Modular Contracts Beta: Secure, Customizable, and Easy to Integrate contracts
thirdwebDocs
GitHub

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

Customizing the orders of the tabs in the [View Funds] screen

When you click on "View Assets", by default the "Tokens" tab is shown first. If you want to show the "NFTs" tab first, change the order of the asset tabs to: ["nft", "token"] Note: If an empty array is passed, the [View Funds] button will be hidden

<ConnectButton
  client={client}
  detailsModal={{
    assetTabs: ["nft", "token"],
  }}
/>;
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.