DEV Community

Cover image for How to support multiple chains in your thirdweb Dapp
Avneesh Agarwal
Avneesh Agarwal

Posted on • Updated on • Originally published at blog.thirdweb.com

How to support multiple chains in your thirdweb Dapp

This guide will show you how to create a Dapp that works on multiple chains. In this Dapp we are going to allow users to select chains and claim an NFT from the respective chain. I am going to show goerli and Mumbai but you could do it on any network and go crazy with it.

Before we get started, below are some helpful resources where you can learn more about the tools we will use in this guide.

Let's get started.

Setup

Setting up our project

I am going to use the Next.js Typescript starter template for this guide.

If you are following along with the guide, you can create a project with the template using the thirdweb CLI:

npx thirdweb create --next --ts
Enter fullscreen mode Exit fullscreen mode

If you already have a Next.js app you can simply follow these steps to get started:

  • Install @thirdweb-dev/react and @thirdweb-dev/sdk and ethers.

  • Add MetaMask authentication to the site. You can follow this guide to add metamask auth.

Getting into the code

Creating a context to store chain

Create a new file called Context/Chain.ts and add the following:

import { ChainId } from "@thirdweb-dev/sdk";
import { createContext } from "react";

const ChainContext = createContext({
  selectedChain: ChainId.Mainnet,
  setSelectedChain: (chain: ChainId) => {},
});

export default ChainContext;
Enter fullscreen mode Exit fullscreen mode

This will allow us to create a global state for storing and changing our chainId.

Now, head over to _app.tsx and replait ce with the following:

import { ChainId } from "@thirdweb-dev/sdk";
import type { AppProps } from "next/app";
import { useState } from "react";
import ChainContext from "../context/Chain";
import { ThirdwebProvider } from "@thirdweb-dev/react";

function MyApp({ Component, pageProps }: AppProps) {
  const [selectedChain, setSelectedChain] = useState(ChainId.Mumbai);

  return (
    <ChainContext.Provider value={{ selectedChain, setSelectedChain }}>
      <ThirdwebProvider desiredChainId={selectedChain}>
        <Component {...pageProps} />
      </ThirdwebProvider>
    </ChainContext.Provider>
  );
}

export default MyApp;
Enter fullscreen mode Exit fullscreen mode

We are adding the react context here, so we can access the state everywhere!

Creating dropdown for networks

We will create a simple dropdown for users to switch between networks. So, in pages/index.tsx add this select element that will create a dropdown:

 <select
        value={String(selectedChain)}
        onChange={(e) => setSelectedChain(parseInt(e.target.value))}
      >
        <option value={String(ChainId.Mumbai)}>Mumbai</option>
        <option value={String(ChainId.Goerli)}>Goerli</option>
      </select>
Enter fullscreen mode Exit fullscreen mode

We need to access the react context state that we just created, so we will use the useContext hook to do this:

  const { selectedChain, setSelectedChain } = useContext(ChainContext);
Enter fullscreen mode Exit fullscreen mode

We also need to import these:

import { ChainId } from "@thirdweb-dev/react";
import ChainContext from "../context/Chain";
Enter fullscreen mode Exit fullscreen mode

Now, we will create a JSON object that will have the addresses of the contract addresses:

 const addresses = {
    [String(ChainId.Mumbai)]: "0x25CB5C350bD3062bEaE7458805Fb069200e37fD5",
    [String(ChainId.Goerli)]: "0xA72234a2b9c1601593062f333D739C93291dF49F",
  };
Enter fullscreen mode Exit fullscreen mode

This is creating a string key of the chainId with the contract address of the drops we created as values.

We will use the Web3Component for performing functions. Since I created an NFT Drop I am calling the call function but it might be different for you!

  <div style={{ maxWidth: "200px" }}>
        <Web3Button
          contractAddress={addresses[String(selectedChain)]}
          action={(contract) => contract.erc721.claim(1)}
        >
          Claim
        </Web3Button>
      </div>
Enter fullscreen mode Exit fullscreen mode

If we go to localhost and check out the app, we can switch between networks and it all works completely fine! 🎉

Conclusion

This guide taught us how to allow users to claim NFTs from different NFTs in the same Dapp using the react sdk. If you have any queries hop on the thirdweb discord! If you want to take a look at the code, check out the GitHub Repository.

Top comments (1)

Collapse
 
wulirocks profile image
Paul Boutros

Very useful bro!