Connect Wallet

Connect Wallet is an out-of-the-box UI solution for connecting users' wallets to web3 applications and games. With its customizable UI and extensive wallet options, this component allows for flexibility in supporting various wallet types including non-custodial, custodial, smart wallets, and embedded wallets.

Try Out Connect Wallet

Customizing the Displayed Wallets

View the Connect Wallet supported and default displayed wallets in React.

To customize the displayed wallets, you can pass in a supportedWallets prop to the ThirdWebProvider component.

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

function App() {
  return (
    <ThirdWebProvider
      supportedWallets={["metamaskWallet()", "walletConnect()"]}
    >
      <ConnectWallet />
    </ThirdWebProvider>
  );
}

This will display only the MetaMask and WalletConnect wallets in the Connect Wallet modal.

Configuration Options

The following customization options are available for the Connect Wallet component:

Prop Name	Type	Default Value	Options	Description
modalSize	string	"wide" for desktop and "compact" for mobile devices.	"wide" or "compact"	The size of the Connect Wallet modal.
theme	string	"dark"	"light" or "dark"	The theme of the Connect Wallet component. The default is "light".
btnTitle	string	"Connect Wallet"	Any string	The title of the Connect Wallet button.
modalTitle	string	"Connect"	Any string	The title of the Connect Wallet modal.
className	string	N/A	Any string	Apply custom CSS styles to the Connect Wallet button.
switchToActiveChain	boolean	false	true or false	Automatically switch to the active chain when connecting a wallet.
termsOfServiceUrl	string	N/A	Any string	The URL to the terms of service page.
privacyPolicyUrl	string	N/A	Any string	The URL to the privacy policy page.
welcomeScreen	object	N/A	See below	Customize the welcome screen on wide modal.
detailsBtn	JSX.Element	N/A	See below	Customize the details button.
auth	object	N/A	See below	Enforce that users must sign in with their wallet.
dropdownPosition	DropDownPosition	N/A	See below	Specify where should the dropdown menu open.

Customize "Welcome Screen" for wide modal

welcomeScreen

On wide modal, a welcome screen is shown on the right side of the modal.

This screen can be customized in two ways:

1. Customize Metadata

<ConnectWallet
  welcomeScreen={{
    title: "Your Title",
    subtitle: "Your Subtitle",
    img: {
      src: "https://...",
      width: 300,
      height: 50,
    },
  }}
/>

2. Render custom component

<ConnectWallet
  welcomeScreen={() => {
    return <YourComponent />;
  }}
/>

Details Button

### detailsBtn

Render a custom button to display connected wallet details

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

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

Authenticate Users

### auth

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,
      }}
    />
  );
}

Modal Dropdown Position

### dropdownPosition (optional)

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";
  }}
/>

Advanced Configuration

Create a Wallet Connection UI

To integrate a wallet with ConnectWallet, you need to create a wallet configurator - a function that returns a WalletConfig object and add it in ThirdwebProvider's supportedWallets.

connectUI

To create a custom UI for connecting your wallet, create a connectUI function in your wallet configurator.

// optional - render a UI for connecting your wallet
    connectUI(props) {
      return <MyWalletConnectionUI {...props} />;
    },

selectUI

To create a custom UI for selecting your wallet in the wallet selection screen in the connect wallet modal, create a selectUI function in your wallet configurator.

    // optional - override the default UI for selecting your wallet in the wallet selector screen
    selectUI(props) {
      return <MyWalletSelectionUI {...props} />
    }

Create your Own Wallet Connector

For more details on how to create your own wallet connector that you can use for Connect Wallet, see the Create Your Own Wallet Guide guide.