thirdwebDocs

ConnectButton

A fully featured wallet connection component that allows to:

  • Connect to 350+ external wallets

  • Connect with email, phone, passkey or socials

  • Convert any wallet to a ERC4337 smart wallet for gasless transactions

  • Sign in with ethereum (Auth)

Once connected, the component allows to:

  • Reolve ENS names and avatars

  • Manage multipple connected wallets

  • Send and receive native tokens and ERC20 tokens

  • View ERC20 tokens and NFTs

  • Onramp, bridge and swap tokens

  • Switch chains

  • Connect to another app with WalletConnect

Example

Default setup

import { createThirdwebClient } from "thirdweb";
import { ConnectButton } from "thirdweb/react";
 
const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });
 
<ConnectButton client={client} />;

View all available config options

Customization options

Customizing wallet options

<ConnectButton
  client={client}
  wallets={[
    createWallet("io.metamask"),
    createWallet("com.coinbase.wallet"),
    createWallet("me.rainbow"),
  ]}
/>;

View all available wallets

Customizing the default chain to connect to

import { sepolia } from "thirdweb/chains";
 
<ConnectButton client={client} chain={sepolia} />;

Enabling Account Abstraction

By passing the accountAbstraction prop, ALL connected wallets will be converted to smart accounts. And by setting sponsorGas to true , all transactions done with those smart accounts will be sponsored.

<ConnectButton
  client={client}
  accountAbstraction={{
    chain: sepolia,
    sponsorGas: true,
  }}
/>;

Enabling sign in with ethereum (Auth)

<ConnectButton
  client={client}
  auth={{
    isLoggedIn: async (address) => {
      console.log("checking if logged in!", { address });
      return await isLoggedIn();
    },
    doLogin: async (params) => {
      console.log("logging in!");
      await login(params);
    },
    getLoginPayload: async ({ address }) =>
      generatePayload({ address }),
    doLogout: async () => {
      console.log("logging out!");
      await logout();
    },
  }}
/>;

Customizing the theme

<ConnectButton client={client} theme="light" />;

For more granular control, you can also pass a custom theme object:

<ConnectButton
  client={client}
  theme={lightTheme({
    colors: {
      modalBg: "red",
    },
  })}
/>;

View all available themes properties

Changing the display language

<ConnectEmbed client={client} locale="ja_JP" />;

View all available locales

Customizing the connect button UI

<ConnectButton
  client={client}
  connectButton={{
    label: "Sign in to MyApp",
  }}
/>;

Customizing the modal UI

<ConnectButton
   client={client}
   connectModal={{
     title: "Sign in to MyApp",
     titleIcon: https://example.com/logo.png,
     size: "compact",
   }}
/>

Customizing details button UI (after connecting)

<ConnectButton
  client={client}
  detailsButton={{
    displayBalanceToken: {
      [sepolia.id]: "0x...", // token address to display balance for
      [ethereum.id]: "0x...", // token address to display balance for
    },
  }}
/>;

View all available auth helper functions

Customizing the Auth sign in button (after connecting, but before authenticating)

<ConnectButton
  client={client}
  auth={{ ... }}
  signInButton: {
    label: "Authenticate with MyApp",
  },
}}
/>;

Customizing supported Tokens and NFTs

These tokens and NFTs will be shown in the modal when the user clicks "View Assets", as well as the send token screen.

<ConnectButton
  client={client}
  supportedTokens={{
    [ethereum.id]: [
      {
        address: "0x...",
        name: "MyToken",
        symbol: "MT",
        icon: "https://example.com/icon.png",
      },
    ],
  }}
  supportedNFTs={{
    [ethereum.id]: [
      "0x...", // nft contract address
    ],
  }}
/>;
function ConnectButton(props: ConnectButtonProps): Element;

Parameters

Props for the ConnectButton component

Refer to ConnectButtonProps to see the available props.

Type

let props: {
  accountAbstraction?: SmartWalletOptions;
  appMetadata?: AppMetadata;
  autoConnect?: { timeout: number } | boolean;
  chain?: Chain;
  chains?: Array<Chain>;
  client: ThirdwebClient;
  locale?: LocaleId;
  onConnect?: (wallet: Wallet) => void;
  onDisconnect?: (info: { account: Account; wallet: Wallet }) => void;
  recommendedWallets?: Array<Wallet>;
  showAllWallets?: boolean;
  signInButton?: {
    className?: string;
    label?: string;
    style?: React.CSSProperties;
  };
  supportedNFTs?: SupportedNFTs;
  supportedTokens?: SupportedTokens;
  switchButton?: {
    className?: string;
    label?: string;
    style?: React.CSSProperties;
  };
  theme?: "dark" | "light" | Theme;
  walletConnect?: { projectId?: string };
  wallets?: Array<Wallet>;
};

Returns

let returnType: Element;

A JSX element that renders the <ConnectButton> component.