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

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.