ConnectEmbedProps

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.

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

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

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>
      {" "}
      <ConnectEmbed 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 ConnectEmbed '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

<ConnectEmbed 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/react";
 
const polygon = defineChain({
  id: 137,
});

type chains = Array<Chain>;

Class name to be added to the root element of ConnectEmbed

type className = string;

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;

Set custom title and icon to show for the embed

Set it to true to show the default title and icon

type header = { title?: string; titleIcon?: string } | true;

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

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

Refer to the LocaleId type for supported locales.

type locale = LocaleId;

ConnectEmbed supports two modal size variants: compact and wide .

By default it is set to compact , you can set it to wide if you want to show a wider modal.

Note that if the screen width can not fit the wide modal, the compact version will be shown regardless of this modalSize options provided

type modalSize = "compact" | "wide";

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

type privacyPolicyUrl = string;

Wallets to show as recommended in the ConnectEmbed UI

type recommendedWallets = Array<Wallet>;

If provided, users will be required to accept the Terms of Service before connecting an in-app wallet.

type requireApproval = boolean;

By default, ConnectEmbed 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, A "Powered by Thirdweb" branding is shown at the bottom of the embed.

If you want to hide it, set this to false

type showThirdwebBranding = boolean;

<ConnectEmbed showThirdwebBranding={false} />;

CSS styles to be applied to the root element of ConnectEmbed

type style = React.CSSProperties;

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

type termsOfServiceUrl = string;

Set the theme for the ConnectEmbed 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 <ConnectEmbed 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 <ConnectEmbed 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 ConnectEmbed 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 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

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

<ConnectEmbed welcomeScreen={() => <YourComponent />} />;

type welcomeScreen = WelcomeScreen;