How to Add a Connect Wallet Button to Your Website

Nacho Iacovino, Jarrod Watts

Aug 24, 2022 • 1 min read

In this guide, we'll show you how to easily add a connect wallet button to your web application using the React SDK.

Setting up web3 on your website and letting your users connect their wallets is essential for any web3 web app.

Our Web3 SDK allows you to connect to all of the most popular wallets:

Get Started

To get started with thirdweb, you can run the following to install our packages into an existing React project:

# Run this to install with npm
npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers@5

# Or run this to install with yarn
yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers@5

Once you've installed the necessary packages, set up the ThirdwebProvider to wrap the rest of your application:

import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Goerli;

function MyApp({ Component, pageProps }) {
  return (
    <ThirdwebProvider desiredChainId={activeChainId}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

Connect Wallet

Now you're ready to use one our ConnectWallet component to connect users' wallets to your site!

import { ConnectWallet } from "@thirdweb-dev/react";

export default function Home() {
  return (
      <ConnectWallet accentColor="#f213a4" colorMode="dark" />
  );
}

And that's it! If you have any questions, drop us a line on our Discord server.