Connect Wallet button in React

Add a connect wallet button in React

If you don't have a a wallet, click here. If you don't know how a connection works with the blockchain, click here. If you don't know how to instantiating our sdk works....click here. If all of this doesn't make sense...please go to our starting page 😬

Copy code//Run this to install with npm
npm install @3rdweb/react @3rdweb/hooks

Inside your components folder, create a file Connect.js with the following code 👇

By wrapping it in the <nav> tag, the button will appear in the nav bar.

Copy codeimport { ConnectWallet } from "@3rdweb/react";

const Connect = () => {
  return
        <nav>
            <ConnectWallet />
        </nav>;
};

Before we can use this button, we need to add the provider to our app.👇

Now we need to setup our Provider. For this we will use the custom component of thirdweb, the ThirdwebProvider. Go ahead and import it.

Copy codeimport { ThirdwebProvider } from "@3rdweb/react";

Next we need to select the chain and type of wallet we want to connect to.

With supportedChainIds we select the blockchain we want to connect with. We have to pass an Id. Every blockchain has an Id. We are using an Id instead of a RPC url here. (again click here if you don't know how a connection with blockchain works).

Copy codeconst App = () => {
  // Polygon's chain Id is 137
  const supportedChainIds = [137];

With connectors we are selecting which wallets we want to support. If you want to learn more about our connect wallet component, click here.

MetaMask connector setup 👇

Copy code//injected - MetaMask
const connectors = {
    injected: {},
  };

Coinbase connector setup 👇

Copy codewalletlink: {
    appName: "",
    url: "https://rinkeby-light.eth.linkpool.io/",
    darkMode: false,
  },
};

We include the ThirdwebProvider in the return statement to wrap our app in the ThirdwebProvider , so that the provider information is accessible from anywhere.

ThirdwebProvider tags should be included at the highest level, usually in react that is app.js except in next. In next it's in _app.js

So make sure you put your Component within the brackets of the ThirdwebProvider.

Copy code    return (
    <ThirdwebProvider
      connectors={connectors}
      supportedChainIds={supportedChainIds}
    >
      <Connect /> /* our connect wallet button */
    </ThirdwebProvider>
  );
};

Here's what the whole code looks like with Metamask as an example in your App.js file.

Copy codeimport { ThirdwebProvider } from "@3rdweb/react";

const App = () => {
  // Polygon's chain Id is 137
  const supportedChainIds = [137];
  //injected - MetaMask
    const connectors = {
    injected: {},
  };

    return (
    <ThirdwebProvider
      connectors={connectors}
      supportedChainIds={supportedChainIds}
    >
      <Connect /> /* our connect wallet button */
    </ThirdwebProvider>
  );
};