ConnectButtonProps

Enable Account abstraction for all wallets. This will connect to the users's smart account based on the connected personal wallet and the given options.

This allows to sponsor gas fees for your user's transaction using the thirdweb account abstraction infrastructure.

<ConnectButton
  accountAbstraction={{
   factoryAddress: "0x123...",
   chain: sepolia,
   gasless: true;
  }}
/>

type accountAbstraction = SmartWalletOptions;

Metadata of the app that will be passed to connected wallet. Setting this is highly recommended.

Some wallets display this information to the user when they connect to your app.

type appMetadata = AppMetadata;

{
  name: "My App",
  url: "https://my-app.com",
  description: "some description about your app",
  logoUrl: "https://path/to/my-app/logo.svg",
};

Enable SIWE (Sign in with Ethererum) by passing an object of type SiweAuthOptions to enforce the users to sign a message after connecting their wallet to authenticate themselves.

Refer to the SiweAuthOptions for more details

type auth = SiweAuthOptions;

When the user has connected their wallet to your site, this configuration determines whether or not you want to automatically connect to the last connected wallet when user visits your site again in the future.

By default it is set to { timeout: 15000 } meaning that autoConnect is enabled and if the autoConnection does not succeed within 15 seconds, it will be cancelled.

If you want to disable autoConnect, set this prop to false .

If you want to customize the timeout, you can assign an object with a timeout key to this prop.

<ConnectButton client={client} autoConnect={{ timeout: 10000 }} />;

type autoConnect = { timeout: number } | boolean;

The Chain object of the blockchain you want the wallet to connect to

If a chain is not specified, Wallet will be connected to whatever is the default set in the wallet.

If a chain is specified, Wallet will be prompted to switch to given chain after connection if it is not already connected to it. This ensures that the wallet is connected to the correct blockchain before interacting with your app.

The ConnectButton also shows a "Switch Network" button until the wallet is connected to the specified chain. Clicking on the "Switch Network" button triggers the wallet to switch to the specified chain.

You can create a Chain object using the defineChain function. At minimum, you need to pass the id of the blockchain to defineChain function to create a Chain object.

type chain = Chain;

import { polygon } from "thirdweb/chains";
 
function Example() {
  return (
    <div>
      {" "}
      <ConnectButton chain={polygon} />{" "}
    </div>
  );
}

Array of chains that your app supports.

This is only relevant if your app is a multi-chain app and works across multiple blockchains. If your app only works on a single blockchain, you should only specify the chain prop.

Given list of chains will used in various ways:

• They will be displayed in the network selector in the ConnectButton 's details modal post connection

• They will be sent to wallet at the time of connection if the wallet supports requesting multiple chains ( example: WalletConnect ) so that users can switch between the chains post connection easily

<ConnectButton chains={[ethereum, polygon, optimism]} />;

You can create a Chain object using the defineChain function. At minimum, you need to pass the id of the blockchain to defineChain function to create a Chain object.

import { defineChain } from "thirdweb/chains";
 
const polygon = defineChain({
  id: 137,
});

type chains = Array<Chain>;

A client is the entry point to the thirdweb SDK. It is required for all other actions. You can create a client using the createThirdwebClient function. Refer to the Creating a Client documentation for more information.

You must provide a clientId or secretKey in order to initialize a client. Pass clientId if you want for client-side usage and secretKey for server-side usage.

import { createThirdwebClient } from "thirdweb";
 
const client = createThirdwebClient({
  clientId: "<your_client_id>",
});

type client = ThirdwebClient;

Configurations for the button element that is shown when wallet is not connected

type connectButton = ConnectButton_connectButtonOptions;

<ConnectButton
  connectButton={{
    label: "Connect",
    className: "my-custom-class",
    style: {
      borderRadius: "10px",
    },
  }}
/>;

Configurations for the ConnectButton 's Modal that is shown for connecting a wallet Refer to the ConnectButton_connectModalOptions type for more details

type connectModal = ConnectButton_connectModalOptions;

<ConnectButton connectModal={{ size: "compact" }} />;

Configurations for the Details Button that is shown when wallet is connected Refer to the ConnectButton_detailsButtonOptions type for more details

type detailsButton = ConnectButton_detailsButtonOptions;

<ConnectButton
  detailsButton={{
    className: "my-custom-class",
    style: { borderRadius: "10px" },
  }}
/>;

Configurations for the Details Modal that is shown when wallet is connected and user clicks on the details button to see the connected wallet details Refer to the ConnectButton_detailsModalOptions type for more details

type detailsModal = ConnectButton_detailsModalOptions;

By default - ConnectButton UI uses the en-US locale for english language users.

You can customize the language used in the ConnectButton UI by setting the locale prop.

Refer to the LocaleId type for supported locales.

type locale = LocaleId;

Wallets to show as recommended in the ConnectButton 's Modal

type recommendedWallets = Array<Wallet>;

By default, ConnectButton modal shows a "All Wallets" button that shows a list of 350+ wallets.

You can disable this button by setting showAllWallets prop to false

type showAllWallets = boolean;

Customize the NFTs shown in the "View Funds" screen in Details Modal for various networks.

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

type supportedNFTs = SupportedNFTs;

supportedTokens prop allows you to customize this list as shown below which shows "Pudgy Penguins" help when users wallet is connected to Ethereum mainnet.

import { ConnectButton } from "thirdweb/react";
 
function Example() {
  return (
    <ConnectButton
      supportedNFTs={{
        // when connected to Ethereum mainnet - show Pudgy Penguins
        1: ["0xBd3531dA5CF5857e7CfAA92426877b022e612cf8"],
      }}
    />
  );
}

Customize the tokens shown in the "Send Funds" screen in Details Modal 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.

type supportedTokens = SupportedTokens;

supportedTokens prop allows you to customize this list as shown below which shows "Dai Stablecoin" when users wallet is connected to the "Base" mainnet.

import { ConnectButton } from "thirdweb/react";
 
function Example() {
  return (
    <ConnectButton
      supportedTokens={{
        // when connected to "Base" mainnet - show balance of DAI stablecoin
        84532: [
          {
            address: "0x50c5725949A6F0c72E6C4a641F24049A917DB0Cb", // token contract address
            name: "Dai Stablecoin",
            symbol: "DAI",
            icon: "https://assets.coingecko.com/coins/images/9956/small/Badge_Dai.png?1687143508",
          },
        ],
      }}
    />
  );
}

Configuration for the "Switch Network" button. This button is rendered when the wallet is connected, but it is not connected to the chain prop provided in ConnectButton component

type switchButton = {
  className?: string;
  label?: string;
  style?: React.CSSProperties;
};

<ConnectButton
  switchButton={{
    label: "Wrong Network",
    className: "my-custom-class",
    style: {
      backgroundColor: "red",
    },
  }}
/>;

Set the theme for the ConnectButton component. By default it is set to "dark"

theme can be set to either "dark" , "light" or a custom theme object. You can also import lightTheme or darkTheme functions from thirdweb/react to use the default themes as base and overrides parts of it.

type theme = "dark" | "light" | Theme;

import { lightTheme } from "thirdweb/react";
 
const customTheme = lightTheme({
  colors: {
    modalBg: "red",
  },
});
 
function Example() {
  return <ConnectButton theme={customTheme} />;
}

Configure options for WalletConnect

By default WalletConnect uses the thirdweb's default project id. Setting your own project id is recommended.

You can create a project id by signing up on walletconnect.com

type walletConnect = { projectId?: string };

Array of supported wallets. If not provided, default wallets will be used.

type wallets = Array<Wallet>;

import { AutoConnect } from "thirdweb/react";
import { createWallet, inAppWallet } from "thirdweb/wallets";
 
const wallets = [
  inAppWallet(),
  createWallet("io.metamask"),
  createWallet("com.coinbase.wallet"),
  createWallet("me.rainbow"),
];
 
function Example() {
  return <ConnectButton client={client} wallets={wallets} />;
}

If no wallets are specified. The component will show All the EIP-6963 compliant installed wallet extensions, as well as below default wallets:

const defaultWallets = [
  inAppWallet(),
  createWallet("io.metamask"),
  createWallet("com.coinbase.wallet"),
  createWallet("me.rainbow"),
  createWallet("io.zerion.wallet"),
];

The ConnectButton also shows a "All wallets" button at the end of wallet list which allows user to connect to any of the 350+ wallets