SECRET OF CSS

Permanent File Storage for Web3 Apps With Arweave, Bundlr, Next.js, RainbowKit, and Wagmi | by Deep Patel | Jun, 2022


How to create an excellent way to store your data

0*4 aEaUYIFIOfjgTt
Photo by Steve Johnson on Unsplash

In this article, I will be showing you how to create a Dapp that allows us to store data on the Arweave network, using bundlr on testnet.

Before going forward, let’s see what are we going to build today.

Here is the deployed link if you want to try it out:

https://bundlr-arweave.netlify.app/

  • Nextjs
  • Chakra UI
  • RainbowKit
  • Wagmi
  • Bundlr Client

If you enjoy videos like me, here is a video for you:

Arweave makes information permanence sustainable.

Arweave is a new type of storage that backs data with sustainable and perpetual endowments, allowing users and developers to truly store data forever — for the very first time.

Bundlr makes web3 data storage on Arweave accessible by making it as fast, easy, and reliable as traditional data storage. Arweave is the only truly decentralized, permanent data storage solution.

Bundlr increases the number of transactions conducted on Arweave by 4,000% without sacrificing security or usability and is around ~3,000x faster at uploading data.

Bundlr currently accounts for over 90% of data uploaded to Arweave. It enables infinite scalability and enables instant and guaranteed transaction finality. It is a multichain solution and is compatible with leading blockchains including Ethereum, Solana, Avalanche, Polygon, and many more.

  1. Connect wallet
  2. Initialize the Bundlr client
  3. Add funds ($BNDLR tokens)
  4. Upload the files

Note: we will be bulding this app on polygon mumbai testnet

Bundlr has a devnet which allows you to use devnet/testnet cryptocurrency networks to pay for storage. The devnet node behaves exactly as a mainnet node — other than data is never moved to Arweave and will be cleared from Bundlr after a week.

Keep the completed code open on the side for a better understanding Github

Setup a Nextjs project with tailwind CSS and Chakra UIYou can use create-web3-frontend package to get done with setup quickly or just clone this project repo

Also, install these two dependencies:

yarn add @bundlr-network/client bignumber.js

As we are using Rainbow kit, this step is very easy in index.tsx:

And with these 5–6 lines of code, we are done with connecting the wallet.

We have also added a condition to check if a user is on the Mumbai test, as we will be using polygon Mumbai testnet for this article.

In _app.jsx while configuring Rainbow kit we have configures it for using polygon Mumbai testnet

const { chains, provider } = configureChains(
[chain.polygonMumbai],
[
jsonRpcProvider({ rpc: () => ({ http: process.env.NEXT_PUBLIC_ALCHEMY_RPC_URL }) }),
publicProvider(),
]
);

So, Rainbow kit will also take care of changing the network for us, this is how this warning will look like

0*4RZkREkSVli0yGXe

Let’s create a context for bundlr so we can maintain all bundlr-related logic from there.

Create bundlr.context.tsx

Inside this file, let’s create the context now. You can see the completed version of the file here:

For initializing the Bundlr, we will be using initialiseBundlr the method from the code above. The code is also pretty straightforward.

const bundlr = new WebBundlr(
"https://devnet.bundlr.network",
"matic",
provider,
{
providerUrl:
process.env.NEXT_PUBLIC_ALCHEMY_RPC_URL,
}
);
await bundlr.ready();
setBundlrInstance(bundlr);

We are creating an instance of the Bundlr client and storing it in a state variable

Read more about bundlr client.

For using Bundlr with testnet, read here.

In order to use the devnet, you need to use https://devnet.bundlr.network as the node and set the provider url to a correct testnet/devnet RPC endpoint for the given chain.

Our RPC URL will look something like this, as we will be using polygon testnet.

NEXT_PUBLIC_ALCHEMY_RPC_URL=https://polygon-mumbai.g.alchemy.com/v2/{{alchemy_project_id}}

Read, about all the supported currencies/ networks by bundlr here.

We already have data about our balance in the bundlr context, and we also have a method fundWallet which we will be using to add the funds.

Adding funds is also pretty straightforward. Just use the fund method on the bundlrInstance and pass the amount you want to fund the wallet with.

let response = await bundlrInstance.fund(amountParsed)

In index.tsx, make these changes:

Now, let’s create the <FundWallet /> component.

Create components/FundWallet.tsx

Now, as we’ve already added the funds, we can upload the images (or any other files) to the Arweave network.

In index.tsx , add the following code at the end of the file:

Now, let’s create the <UploadImage /> component:

And, with this in place, we can now upload the files to the Arweave network.

  1. Right now, we are only uploading images. We can add support for other formats as well (video, audio, anything).
  2. Store URLs of uploaded images with wallet address in Supabase, and show the list of files previously uploaded by users when they connect their wallet.

Completed code: GitHub

Want to Connect?Connect with me on Twitter @pateldeep_eth.LinkedinOriginally published at https://pateldeep.xyz/





News Credit

%d bloggers like this: