thirdwebDocs
GitHub

ConnectEmbed

An inline wallet connection component that allows to:

  • Connect to 500+ 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)

It renders the same UI as the ConnectButton component's modal - but directly inline in the page instead of being in a modal.

Once connected, the component does not render any UI. It only renders UI if wallet is not connected.

Example

Default setup

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

View all available config options

Customization options

Customizing wallet options

<ConnectEmbed
  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 { base } from "thirdweb/chains";
 
<ConnectEmbed client={client} chain={base} />;

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.

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

Note that this prop doesn't affect ecosystem wallets. Ecosystem wallets will only be converted to smart accounts if the ecosystem owner has enabled account abstraction.

Enabling sign in with ethereum (Auth)

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

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

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

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

function ConnectEmbed(props: ConnectEmbedProps): Element;

Parameters

The props for the ConnectEmbed component.

Refer to the ConnectEmbedProps type for more details

Type

let props: {
  accountAbstraction?: SmartWalletOptions;
  appMetadata?: AppMetadata;
  autoConnect?: { timeout: number } | boolean;
  chain?: Chain;
  chains?: Array<Chain>;
  className?: string;
  client: ThirdwebClient;
  header?: { title?: string; titleIcon?: string } | true;
  locale?: LocaleId;
  modalSize?: "compact" | "wide";
  onConnect?: (wallet: Wallet) => void;
  privacyPolicyUrl?: string;
  recommendedWallets?: Array<Wallet>;
  requireApproval?: boolean;
  showAllWallets?: boolean;
  showThirdwebBranding?: boolean;
  style?: React.CSSProperties;
  termsOfServiceUrl?: string;
  theme?: "dark" | "light" | Theme;
  walletConnect?: { projectId?: string };
  wallets?: Array<Wallet>;
  welcomeScreen?: WelcomeScreen;
};

Returns

let returnType: Element;

A JSX element that renders the <ConnectEmbed> component.