Add a connect wallet button to your website
Tags: web3, thirdweb, connectwallet, react
Published: 2022-03-21 15:28:18

## 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](https://thirdweb.com?utm_source=devto&utm_medium=crosspost&utm_campaign=add_connect_wallet) 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](https://github.com/thirdweb-dev/examples/tree/main/typescript/add-connect-wallet).

Check out the full docs for our React package [here](https://docs.thirdweb.com/react?utm_source=devto&utm_medium=crosspost&utm_campaign=add_connect_wallet).

## Get Started

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

```bash
# 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:

```tsx
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:

```tsx
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:

```tsx:pages/index.tsx
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](https://github.com/thirdweb-dev/examples/tree/main/typescript/add-connect-wallet).

---

This article was originally posted on [thirdweb.com](https://portal.thirdweb.com/guides/add-connectwallet-to-your-website?utm_source=devto&utm_medium=crosspost&utm_campaign=add_connect_wallet).