UseConnectModalOptions

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.

* function Example() {
 const { connect } = useConnectModal();
 
async function handleConnect() {
 await connect({
   client,
   accountAbstraction: {
     factoryAddress: "0x123...",
     chain: sepolia,
     sponsorGas: true
   }
 })
}
 
 return (
 <button> onClick={handleConnect}>
   Connect
 </button>
)
 
}

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

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.

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;

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 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

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

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

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

Refer to the LocaleId type for supported locales.

type locale = LocaleId;

URL of the "privacy policy" page

If provided, Modal will show a Privacy Policy message at the bottom with below link

type privacyPolicyUrl = string;

Wallets to show as recommended in the Connect Modal

type recommendedWallets = Array<Wallet>;

Whether to set the connected wallet as active wallet or not

By default, It is set to true

You can set it to false and use the retunred wallet from the connect method if you want to connect wallet without setting it as active wallet

type setActive = boolean;

function Example() {
  const { connect } = useConnectModal();
  return (
    <button>
      {" "}
      onClick=
      {async () => {
        const wallet = await connect({ setActive: false, client });
      }}
      > Connect
    </button>
  );
}

By default, Connect 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;

By default Connect Modal shows "Powered by Thirdweb" branding at the bottom of the Modal.

If you want to hide the branding, set this prop to false

type showThirdwebBranding = boolean;

Set the size of the connect modal on desktop - "compact" or "wide"

Modal size is always compact on mobile

By default it is "wide" for desktop.

type size = "compact" | "wide";

URL of the "terms of service" page

If provided, Modal will show a Terms of Service message at the bottom with below link

type termsOfServiceUrl = string;

Set the theme for the Connect Modal. 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",
  },
});

Title to show in Connect Modal

The default is "Connect"

type title = string;

Replace the default thirdweb icon next to Modal title with your own icon

Set to empty string ("" ) to hide the icon

type titleIcon = string;

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() {
  const { connect } = useConnectModal();
  return (
    <button>
      {" "}
      onClick={() => connect({ wallets, client })}> Connect{" "}
    </button>
  );
}

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"),
];

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

Customize the welcome screen. This prop is only applicable when modal size 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

const welcomeScreen = {
  title: "your title",
  subtitle: "your subtitle",
  img: {
    src: "https://your-image-url.png",
    width: 300,
    height: 50,
  },
};

const welcomeScreen = () => <YourCustomComponent />;

type welcomeScreen = WelcomeScreen;