thirdweb

Add a connect wallet button to your website

Add a connect wallet button to your website

Last updated:

December 8, 2021

Easily setup web3 and add a connect wallet button to your website

Adam

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.

Instead of spending time trying to configure a complex web3 setup, you can use the Thirdweb Component Library to easily add web3 to your applications. Our main features are:

  • Support for most commonly used web3 providers including: MetaMask, WalletConnect, Coinbase Wallet, and Magic Link.
  • An app wide context containing an ethers.js or web3.js instance with everything you need to integrate with the blockchain.
  • Easy-to-use plug-and-play components that let you implement complex and fully-featured web3 app setups with only a few lines of code.

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 @3rdweb/react @3rdweb/hooks # Or run this to install with yarn yarn add @3rdweb/react @3rdweb/hooks

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:

App.js
import { ThirdwebProvider } from "@3rdweb/react"; // If you want to just use @3rdweb/hooks without any styling, you can use the following // as your provider instead of the above: // import { ThirdwebWeb3Provider } from "@3rdweb/hooks"; const App = ({ children }) => { // Put the ethereum chain ids of the chains you want to support const supportedChainIds = [1, 4, 137]; /** * Include the connectors you want to support * injected - MetaMask * magic - Magic Link * walletconnect - Wallet Connect * walletlink - Coinbase Wallet */ const connectors = { injected: {}, magic: { apiKey: "pk_...", // Your magic api key chainId: 1, // The chain ID you want to allow on magic }, walletconnect: {}, walletlink: { appName: "thirdweb - demo", url: "https://thirdweb.com", darkMode: false, }, }; /** * Make sure that your app is wrapped with these contexts. * If you're using Next JS, you'll have to replace children with the Component setup */ return ( <ThirdwebProvider connectors={connectors} supportedChainIds={supportedChainIds} > {children} </ThirdwebProvider> ); };

Connect Wallet & Web3 Setup

Currently, we provide you with components and 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.

There are two main ways to implement wallet connection and web3 integration with the Thirdweb Component Library, both of which we will go over below:

  1. You can use our fully configured ConnectWallet component to handle all web3 connection and integration, including wallet connection and network switching. This is the easiest way to use the Thirdweb Component Library.
  2. If you want to make your own unique web3 connection setup, you can use our useWeb3 and useSwitchNetwork hooks to make your own custom component.

Use Connect Wallet

Using our ConnectWallet component is the easiest way to integrate web3 into your app, complete with network switching, wallet connection, and everything else you need. Adding our connect wallet button is as easy as the following:

components/Connect.js
import { ConnectWallet } from "@3rdweb/react"; const Connect = () => { return <ConnectWallet />; };

You can place this button anywhere in your app and it will display a wallet connection that displays connected chain, wallet address, and balance information as well as a fully-featured connection manager modal.

For a fully functional setup using our ConnectWallet button, you can checkout our NextJS example connect page.

Use 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.

components/CustomConnect.js
import { useState } from "react" import { useWeb3, useSwitchNetwork } from "@3rdweb/hooks" const CustomConnect = () => { const { address, chainId, connectWallet, disconnectWallet } = useWeb3(); const { switchNetwork } = useSwitchNetwork(); const [email, setEmail] = useState(""); // If a wallet is connected, show disconnect and switch network options if (address) { return ( <> Address: {address} <br /> Chain ID: {chainId} <br /> <button onClick={() => switchNetwork(1)}> Switch to Mainnet </button <button onClick={() => switchNetwork(4)}> Switch to Rinkeby </button <button onClick={disconnectWallet}> Disconnect </button> </> ) } // If no wallet is connected, show connect wallet options return ( <> <input value={email} onChange={e => setEmail(e.target.value)} /> <button onClick={() => connectWallet("magic", { email })} > Connect Magic Link </button> <button onClick={() => connectWallet("injected")}> Connect MetaMask </button> <button onClick={() => connectWallet("walletconnect")}> Connect Wallet Connect </button> <button onClick={() => connectWallet("walletlink")}> Connect Coinbase Wallet </button> </> ) }

For a fully functional setup using our custom hooks, you can checkout our NextJS example hooks page.

Access Web3 Setup

After you setup wallet connection with one of the above methods, accessing your connected web3 provider and its related info is as easy as the following:

components/Component.js
import { useWeb3 } from "@3rdweb/hooks"; const Component = () => { // You can do whatever you want with this data const { address, chainId, provider } = useWeb3(); return ( <div> Address: {address} <br /> Chain ID: {chainId} </div> ); };

Ready to build your first web3 app? Get early access & add web3 features to your project today.

Adam

Contents

Introduction

Get Started

Connect Wallet & Web3 Setup

Use Connect Wallet

Use Custom Hooks

Access Web3 Setup