assist a number of chains in your thirdweb Dapp

This information will present you how you can create a Dapp that works on a number of chains. On this Dapp we’re going to permit customers to pick chains and declare an NFT from the respective chain. I’m going to indicate goerli and Mumbai however you might do it on any community and go loopy with it.

Earlier than we get began, under are some useful assets the place you’ll be able to study extra concerning the instruments we are going to use on this information.

Let’s get began.

Setup

Organising our venture

I’m going to make use of the Subsequent.js Typescript starter template for this information.

If you’re following together with the information, you’ll be able to create a venture with the template utilizing the thirdweb CLI:

npx thirdweb create --next --ts

If you have already got a Subsequent.js app you’ll be able to merely observe these steps to get began:

• Set up @thirdweb-dev/react and @thirdweb-dev/sdk and ethers.

• Add MetaMask authentication to the positioning. You may observe this information so as to add metamask auth.

Moving into the code

Making a context to retailer chain

Create a brand new file referred to as Context/Chain.ts and add the next:

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

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

export default ChainContext;

It will permit us to create a world state for storing and altering our chainId.

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

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

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

  return (
    <ChainContext.Supplier worth={{ selectedChain, setSelectedChain }}>
      <ThirdwebProvider desiredChainId={selectedChain}>
        <Part {...pageProps} />
      </ThirdwebProvider>
    </ChainContext.Supplier>
  );
}

export default MyApp;

We’re including the react context right here, so we will entry the state in all places!

Creating dropdown for networks

We are going to create a easy dropdown for customers to modify between networks. So, in pages/index.tsx add this choose component that can create a dropdown:

 <choose
        worth={String(selectedChain)}
        onChange={(e) => setSelectedChain(parseInt(e.goal.worth))}
      >
        <choice worth={String(ChainId.Mumbai)}>Mumbai</choice>
        <choice worth={String(ChainId.Goerli)}>Goerli</choice>
      </choose>

We have to entry the react context state that we simply created, so we are going to use the useContext hook to do that:

  const { selectedChain, setSelectedChain } = useContext(ChainContext);

We additionally have to import these:

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

Now, we are going to create a JSON object that can have the addresses of the contract addresses:

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

That is making a string key of the chainId with the contract deal with of the drops we created as values.

We are going to use the Web3Component for performing features. Since I created an NFT Drop I’m calling the decision perform nevertheless it is perhaps totally different for you!

  <div type={{ maxWidth: "200px" }}>
        <Web3Button
          contractAddress={addresses[String(selectedChain)]}
          motion={(contract) => contract.erc721.declare(1)}
        >
          Declare
        </Web3Button>
      </div>

If we go to localhost and take a look at the app, we will change between networks and all of it works utterly positive! 🎉

Conclusion

This information taught us how you can permit customers to assert NFTs from totally different NFTs in the identical Dapp utilizing the react sdk. When you’ve got any queries hop on the thirdweb discord! If you would like to try the code, take a look at the GitHub Repository.