Embedded Wallet

Prompt users to connect to your app using their email with Embedded Wallet.

Usage

import { EmbeddedWallet } from "@thirdweb-dev/wallets";
import { Ethereum } from "@thirdweb-dev/chains";

const wallet = new EmbeddedWallet({
  chain: Ethereum, //  chain to connect to
  clientId: "your_client_id", // client ID
});

wallet.connect();

Configuration

Provide a configuration object when instantiating the EmbeddedWallet class.

clientId (required)

The embedded wallet requires a clientId. You can create a clientId by visiting the Dashboard. To learn more about API keys, visit the API key documentation.

Must be a string.

chain (required)

The chain to connect to by default.

Must be a Chain object, from the @thirdweb-dev/chains package.

chains (optional)

Provide an array of chains you want to support.

Must be an array of Chain objects, from the @thirdweb-dev/chains package.

styles (optional)

customize the UI component of embedded SDK.

styles: {
  // The roundness of buttons.
  borderRadius?: string,
  // The background color of the UI components.
  colorBackground?: string,
  // The button and link color of the UI components.
  colorPrimary?: string,
  // The text color of the UI components.
  colorText?: string,
  // The font family of the UI components.
  fontFamily?: string,
  // background color of the input fields
  inputBackgroundColor?: string,
  // border color of the input fields
  inputBorderColor?: string,
}

walletStorage (optional)

The wallet needs to store data in persistent storage. By default localStorage is used. If you want to use a different storage, you can pass it in the walletStorage option.

Must be an object conforming to the AsyncStorage interface:

export interface AsyncStorage {
  getItem(key: string): Promise<string | null>;
  setItem(key: string, value: string): Promise<void>;
  removeItem(key: string): Promise<void>;
}

Example:

import { EmbeddedWallet } from "@thirdweb-dev/wallets";

const wallet = new EmbeddedWallet({
  // ... other required config

  walletStorage: {
    getItem: (key) => {
      // Implement your own storage logic here
    },
    removeItem: (key) => {
      // Implement your own storage logic here
    },
    setItem: (key, value) => {
      // Implement your own storage logic here
    },
  },
});

Methods

Inherits all the public methods from the AbstractClientWallet class.

connect

open the Embedded Wallet's Modal and prompt the user to log in with their email address. Once connected, it returns the public wallet address assigned to the user.

await wallet.connect();

Configuration

connect(options?: {
  loginType?: string,
  email?: string,
  otp?: string,
}): Promise<string>;

loginType (optional)

If loginType is not provided, the user will be prompted to enter their email address or sign in with a Google account. Once the user enters the email address or signs in with a Google account, an OTP will be sent to the user's email address. Once the user enters the OTP, the wallet will be connected.

If the loginType is provided, the user will be directly shown the OTP screen, the user will not be prompted to enter their email.

// regular flow with prestyled modal that directly prompts for email otp
await embeddedWallet.connect({
  loginType: "ui_email_otp",
  email: "user@example.com",
});

email (optional)

If email is not provided, the user will be prompted to enter their email address or sign in with a Google account. Once the user enters the email address or signs in with a Google account, an OTP will be sent to the user's email address. Once the user enters the OTP, the wallet will be connected.

If the email is provided, the user will be directly shown the OTP screen, the user will not be prompted to enter their email.

otp (optional)

Verify the user's one-time password (OTP).

//  To verify the user's otp
await embeddedWallet.connect({
  loginType: "headless_email_otp_verification",
  email: "user@example.com",
  otp: "123456",
});

Return Value

Returns a string containing the user's assigned public wallet address.

getEmail

Get the email associated with the currently connected wallet.

const email = await wallet.getEmail();

Configuration

Return Value

Returns a string containing the email.

string;