Connect Wallet Button

The Connect Wallet button allows the user to connect to your application with the most popular wallets, such as MetaMask, Coinbase, or WalletConnect.

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

<ConnectWallet />;

After the user has connected, they can:

• View the connected wallet address
• View their balance of the native token (such as ETH)
• Switch networks, disconnect their wallet, and copy their wallet address

You can view a live demo of the component below:

Example: Connect Wallet Button

Props

Prop	Required	Description	Type
accentColor	Optional	The background color of the button	Hex Code
colorMode	Optional	Change the color of the text inside the button	light or dark
auth	Optional	Ask users to sign in using auth after connecting their wallet	LoginOptions

Resources

Learn how to integrate the ConnectWallet component into your application.

Guide: Add the Connect Wallet Button to your App

Video: How to Add a Connect Wallet Button to your Web3 App

Examples

Basic

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

<ConnectWallet
  // Some customization of the button style
  colorMode="light"
  accentColor="#F213A4"
/>;

With Auth

If you have authConfig options in your ThirdwebProvider, you can optionally pass an auth config to the ConnectWallet component that asks the user to sign in after connecting their wallet.

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

<ConnectWallet
  // Ask users to sign in using auth after connecting their wallet
  auth={{
    loginOptional: false,
  }}
/>;

Advanced Auth

You can fully customize the auth configuration:

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

<ConnectWallet
  auth={{
    loginConfig: {
      // The URL to redirect to on login.
      redirectTo: string,
      // Function to run on error.
      onError: (error: string) => void
    },
    // If you want users to sign in after connecting their wallet
    loginOptional: boolean,
    loginOptions: {
      // The optional nonce of the login request used to prevent replay attacks
      nonce: string,
      // The optional time after which the login payload will be invalid
      expirationTime: Date,
      // The optional chain ID that the login request was intended for
      chainId: number,
    },
  }}
/>;