ConnectEmbed

An inline wallet connection component that allows to:

Connect to 350+ 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

Parameters

Returns

A JSX element that renders the <ConnectEmbed> component.