ConnectWallet

ConnectWallet component's Modal has two size variants - "wide" and "compact"

The default is "wide" for desktop and "compact" for mobile devices

Note that it is always "compact" on mobile even if you set it as "wide" because of size constraints on mobile devices.

wide compact

<ConnecWallet modalSize="wide" />;

The wide modal shows a Welcome Screen on the right side of the Modal which is fully customize via the welcomeScreen prop.

Set the theme to either "light" or "dark" or pass a custom theme object to completely customize the look and feel of the ConnectWallet Modal.

The default is "dark"

<ConnectWallet theme="dark" />;

Instead of passing an object along with all the required colors, you can use the darkTheme or lightTheme functions to use light / dark theme as base and override just the parts you want to change.

import { darkTheme, lightTheme } from "@thirdweb-dev/react";
 
const customDarkTheme = darkTheme({
  fontFamily: "Inter, sans-serif",
  colors: {
    modalBg: "#000000",
    accentText: "red",
    // ... etc
  },
});
 
<ConnectWallet theme={customDarkTheme} />;

Change the text on button when the ConnectWallet button is in the disconnected state.

The default is "Connect Wallet"

<ConnectWallet btnTitle="Login" />;

This prop is only applicable when modalSize prop is set to "wide".

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

This screen can be customized in two ways

• Customize Metadata and Image

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

• Render Custom Component

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

Change the title of ConnectWallet Modal

The default is "Connect"

<ConnectWallet modalTitle="Login" />;

Render a custom button to display connected wallet details instead of the default one

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

This class is applied to the ConnectWallet button ( not the modal ). Using this className, you can further customize the button's styles using custom CSS.

For some CSS properties, you may need to use the !important to override the default styles

<ConnectWallet className="my-custom-class" />;

Hide the "Request Testnet funds" link in ConnectWallet details modal when user is connected to a testnet.

Default is true, If you want to show the link, set it to false.

<ConnectWallet hideTestnetFaucet={false} />;

You can show a "Terms of Service" and/or "Privacy Policy" link in the ConnectWallet Modal by passing the termsOfServiceUrl and/or privacyPolicyUrl props

<ConnectWallet
  termsOfServiceUrl="https://...."
  privacyPolicyUrl="https://...."
/>;

Customize the tokens shown in the "Send Funds" screen for various networks.

By default, The "Send Funds" screen shows a few popular tokens for default chains and the native token. For other chains it only shows the native token.

supportedTokens prop allows you to customize this list as shown below.

import { Base } from "@thirdweb-dev/chains";
 
const supportedTokens = {
  // use chain id of the network as key and pass an array of tokens to show
  // you can directly pass the number or import the chain object from @thirdweb-dev/chains to get the chain id
  [Base.chainId]: [
    {
      address: "0x50c5725949A6F0c72E6C4a641F24049A917DB0Cb", // token contract address
      name: "Dai Stablecoin",
      symbol: "DAI",
      icon: "https://assets.coingecko.com/coins/images/9956/small/Badge_Dai.png?1687143508",
    },
  ],
};
 
// Show "Dai Stablecoin" when connected to the "Base" mainnet
function Example() {
  return <ConnectWallet supportedTokens={supportedTokens} />;
}

Display the balance of a token instead of the native token in ConnectWallet details button.

import { Base } from "@thirdweb-dev/chains";
 
// show Wrapped BTC balance when connected to Ethereum mainnet
// Show Dai Stablecoin balance when connected to the Base mainnet
 
const displayBalanceToken = {
  // 1 is chain id of Ethereum mainnet
  1: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599", // contract address of Wrapped BTC token
 
  // you can also import the chain object from @thirdweb-dev/chains to get the chain id
  [Base.chainId]: "0x50c5725949A6F0c72E6C4a641F24049A917DB0Cb", // contract address of Dai Stablecoin token
};
 
//  pass an object with chain id as key and token address as value
function Example() {
  return <ConnectWallet displayBalanceToken={displayBalanceToken} />;
}

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.

<ConnectWallet
  auth={{
    loginOptional: false,
    onLogin(token) {
      console.log("user logged in", token);
    },
    onLogout() {
      console.log("user logged out");
    },
  }}
/>;

Specify whether to show a "Switch Network" button after the wallet is connected and 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.

default is false.

<ConnectWallet switchToActiveChain={true} />;

Hide the "Switch to Personal wallet" option in the wallet details modal which is shown when wallet is connected to either Smart Account or Safe.

By default it is false. If you want to hide it, set it to true.

<ConnectWallet hideSwitchToPersonalWallet={true} />;