Add a connect wallet button to your website

Introduction

Setting up web3 on your website and letting your users connect their wallet is essential for any web3 web app, and yet the process of integrating these features is often complex and nuanced.

thirdweb is a platform that lets you deploy smart contracts without having to know Solidity, you can do it by using TypeScript, Python or Go or even without writing any code.

Instead of spending time trying to configure a complex web3 setup, you can use the thirdweb React library to easily add web3 to your applications.

You can check the full code for this guide in this GitHub repository.

Check out the full docs for our React package here.

Get Started

To get started with the Thirdweb Component Library, you can run the following to install our packages:

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

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

Once you've installed the necessary package, you just need to setup the ThirdwebProvider that provides all the context consumed by your app. With this context, you will have a standard web3 provider that you can use throughout your app.

Setting up this context is as easy as wrapping your app with the following setup, on the pages/_app.tsx file:

import type { AppProps } from 'next/app';
import { ThirdwebProvider } from '@thirdweb-dev/react';

function MyApp({ Component, pageProps }: AppProps) {
  const desiredChainId = 80001;

  /**
   * Make sure that your app is wrapped with these contexts.
   * If you're using React, you'll have to replace the Component setup with {children}
   */
  return (
    <ThirdwebProvider desiredChainId={desiredChainId}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

Connect Wallet & Web3 Setup

Currently, we provide you with hooks to easily integrate web3 into your app and setup an app wide context without having to deal with the complexity of lower level web3 configuration.

Using custom hooks

If you want to create your own custom component instead of using ours, you can build it with our useWeb3 and useSwitchNetwork hooks. On the components/ConnectWallet.js file:

import {
  useMetamask,
  useWalletConnect,
  useCoinbaseWallet,
  useNetwork,
  useAddress,
  useDisconnect,
} from '@thirdweb-dev/react';

export const ConnectWallet = () => {
  const connectWithCoinbaseWallet = useCoinbaseWallet();
  const connectWithMetamask = useMetamask();
  const connectWithWalletConnect = useWalletConnect();
  const disconnectWallet = useDisconnect();
  const address = useAddress();
  const network = useNetwork();

  // If a wallet is connected, show address, chainId and disconnect button
  if (address) {
    return (
      <div>
        Address: {address}
        <br />
        Chain ID: {network[0].data.chain && network[0].data.chain.id}
        <br />
        <button onClick={disconnectWallet}>Disconnect</button>
      </div>
    );
  }

  // If no wallet is connected, show connect wallet options
  return (
    <div>
      <button onClick={() => connectWithCoinbaseWallet()}>
        Connect Coinbase Wallet
      </button>
      <button onClick={() => connectWithMetamask()}>Connect MetaMask</button>
      <button onClick={() => connectWithWalletConnect()}>
        Connect WalletConnect
      </button>
    </div>
  );
};

Then, we need to import this component on our index.tsx file:

import type { NextPage } from 'next'
import { ConnectWallet } from '../components/ConnectWallet';

const Home: NextPage = () => {
  return (
    <div>
      <ConnectWallet />
    </div>
  );
};

export default Home

The code

Remember, you can check the full code for this example in this GitHub repository.

---

This article was originally posted on thirdweb.com.