Skip to main content

Connect Wallet Button

Button to connect a user’s wallet to your app, with support for MetaMask, Coinbase, WalletConnect, Safe Wallet and Paper Wallet.

Wallets you provide to the ThirdwebProvider's supportedWallets prop are shown as options in the ConnectWallet button’s Modal. If this prop is not provided, the default values are shown (MetaMask, Coinbase Wallet, WalletConnect).

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

Usage​

Render the ConnectWallet component to display the button.

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

function App() {
  return <ConnectWallet />;
}

Live Demo​

Edit the code below to see how it works!

Note: this playground uses the Goerli test network.

Editor

<ConnectWallet

  theme="dark"

  btnTitle="Connect Wallet"

/>

Preview

Configuration​

theme (optional)​

Change the theme of Connect Wallet UI to "light" or "dark" mode, to match the color theme of your app.

The default value is "dark".

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

function App() {
  return (
    <ConnectWallet
      theme="dark"
    />
  );
}

btnTitle (optional)​

Change the text the button displays while in the disconnected state.

The default value is "Connect Wallet".

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

function App() {
  return (
    <ConnectWallet
      btnTitle="Connect Wallet"
    />
  );
}

modalTitle (optional)​

Change the title of Connect Wallet Modal's title

The default value is "Choose your wallet".

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

function App() {
  return (
    <ConnectWallet
      modalTitle="Login"
    />
  );
}

detailsBtn (optional)​

Render a custom button to display connected wallet details

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

function App() {
  return (
    <ConnectWallet
      detailsBtn={() => {
        return <button> .... </button>;
      }}
    />
  );
}

auth (optional)​

Enforce that users must sign in with their wallet using auth after connecting their wallet.

Requires the authConfig prop to be set on the ThirdWebProvider component.

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

function App() {
  return (
    <ConnectWallet
      auth={{
        loginOptional: false,
      }}
    />
  );
}

className (optional)​

Apply custom CSS styles to the button.

info

For some specific CSS properties, you may need to apply the !important CSS rule to override the default styles

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

function App() {
  return (
    <ConnectWallet
      className="my-custom-class"
    />
  );
}

switchToActiveChain (optional)​

Specify whether to show a "Switch Network" button after the wallet is connected but it is not connected to the activeChain set in ThirdwebProvider to encourage the user to switch to the correct network in their wallet.

activeChain must be explicitly set in ThirdwebProvider for this to work.

By default, it is set to false.

<ConnectWallet switchToActiveChain={true} />

Specify where should the dropdown menu open relative to the Connect Wallet Button.

<ConnectWallet
  dropdownPosition={{
    side: "bottom", // "top" | "bottom" | "left" | "right";
    align: "end", // "start" | "center" | "end";
  }}
/>