Guides

How to Add a Connect Wallet Button to Your Website

Nacho Iacovino, Jarrod Watts, Avneesh Agarwal

Aug 24, 2022 • 3 min read

This guide will show you how to easily add a connect wallet button to your web application using thirdweb Connect combined with the React SDK.

Letting users connect their wallets is essential for any Web3 web app.

Connect allows you to connect to all of the most popular wallets:

You can also configure Smart Wallet or local wallet for your users.

Get Started

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

npx thirdweb install

This will detect your project type and install the required dependencies.

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

import type { AppProps } from "next/app";
import { ThirdwebProvider } from "@thirdweb-dev/react";
import "../styles/globals.css";

const activeChain = "ethereum";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThirdwebProvider
      clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID}
      activeChain={activeChain}
    >
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

You can pass all the wallets you want to allow supportedWallets prop like this:

<ThirdwebProvider
  clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID}
  activeChain={activeChain}
  supportedWallets={[rainbowWallet(), metamaskWallet()]}
>
  <Component {...pageProps} />
</ThirdwebProvider>

The wallets can be imported from the thirdweb react package:

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

You can check out all the wallets here.

Add the Connect Wallet button.

Now, you can use our ConnectWallet component to connect users' wallets to your site!

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

export default function Home() {
  return (
      <ConnectWallet theme="dark" />
  );
}

You can customize the button with various options, like auth, dropDownPosition, btnTitle, modalSize. You can change the appearance of the button by using the theme prop or you can fully customize it with custom CSS by passing in a className.

Creating a custom UI

If you don't want to use the default connect wallet button and modal, you can also create your UI with the help of some hooks!

We can first use the useConnect to create the connect wallet button:

const metamaskConfig = metamaskWallet();
const connect = useConnect();

return (
  <button
    onClick={async () => {
      const wallet = await connect(metamaskConfig);
      console.log("connected to ", wallet);
    }}
  >
    Connect to MetaMask
  </button>
);

Here, we have just a connect to metamask button, but you can use any wallet(s) you like. You can check out the list of all the wallets here.

You can get access to the connected state with the useConnectionStatus hook like this:

const connectionStatus = useConnectionStatus();

You can use this to check for the connection state and render the buttons accordingly like this:

  const metamaskConfig = metamaskWallet();
  const connect = useConnect();
  const disconnect = useDisconnect();
  const address = useAddress();
  const connectionStatus = useConnectionStatus();

  if (connectionStatus === "connected") {
    return (
      <>
        <p> You are connected to {address}</p>
        <button onClick={disconnect}> Disconnect </button>
      </>
    );
  }
  if (connectionStatus === "disconnected") {
    return (
      <button
        onClick={async () => {
          const wallet = await connect(metamaskConfig);
          console.log("connected to ", wallet);
        }}
      >
        Connect to MetaMask
      </button>
    );
  }

This checks whether the wallet is connected or disconnected and shows the disconnect/connect button accordingly.

This was a very simple implementation, but you can go crazy with your UI, add more wallets, and much more! You can find the list of all the connect wallet hooks here.

Wrapping up

In this guide, we learned how to connect users to a React app using two methods:

With a pre-built UI component
With a custom UI component

You learned a lot. Now pat yourself on the back and share your amazing apps with us on the thirdweb discord!

Need help?

For support, join the official thirdweb Discord server or share your thoughts on our feedback board.

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