embeddedWallet

A wallet configurator for Embedded Wallet which allows integrating the wallet with React

import { embeddedWallet } from "@thirdweb-dev/react";

const embeddedWalletConfig = embeddedWallet();

customize (optional)

embeddedWalletConfig contains the default config for metadata and UI. you can optionally choose to override the defaults to customize the wallet. Learn more about these configs

const embeddedWalletConfig = embeddedWallet({ ... });

// override metadata
embeddedWalletConfig.meta.name = "..."; // change the name
embeddedWalletConfig.meta.iconURL = "..."; // change the icon
embeddedWalletConfig.meta.urls = {
  // change urls to download the wallet on various platforms
  android: "https://...",
  ios: "https://...",
  chrome: "https://...",
  firefox: "https://...",
};

// override connection UI
embeddedWalletConfig.connectUI = embeddedWalletConnectUI; // react component

// custom selection UI
embeddedWalletConfig.selectUI = embeddedWalletSelectUI; // react component

Once the config is ready, you can use it with ConnectWallet component or useConnect hook as shown below

// add to ThirdwebProvider to add it in ConnectWallet's modal
<ThirdwebProvider supportedWallets={[embeddedWalletConfig]} clientId="your-client-id"/>;

// or use it with useConnect hook
const connect = useConnect();
connect(embeddedWalletConfig, { ... });

advancedOptions (optional)

Advanced options for embedded SDK.

advancedOptions: {
  recoveryShareManagement?: 'AWS_MANAGED' | 'USER_MANAGED'
}

recoveryShareManagement indicates who should be in charge of managing the user's recovery share. Choosing "AWS_MANAGED" is the easiest to get started and is generally what we recommend. For more information, see managing the user's recovery share

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

recommended (optional)

Show this wallet as "recommended" in the ConnectWallet Modal.

embeddedWallet({
  recommended: true,
});

Usage with `ConnectWallet`

To allow users to connect to this wallet using the ConnectWallet component, you can add it to ThirdwebProvider's supportedWallets prop.

<ThirdwebProvider
  clientId="your-client-id"
  supportedWallets={[embeddedWallet()]}
>
  <YourApp />
</ThirdwebProvider>

Usage with `useConnect`

you can use the useConnect hook to programmatically connect to the wallet without using the ConnectWallet component.

The wallet also needs to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

Calling connect opens the embedded Wallet's Modal and prompts the user to log in with their email address.

const embeddedWalletConfig = embeddedWallet(options);

function App() {
  const connect = useConnect();

  const handleConnect = async () => {
    await connect(embeddedWalletConfig, connectOptions);
  };

  return <div> ... </div>;
}

connectOptions

{
  email?: string;
  chainId?: number;
  advancedOptions?: {
    recoveryShareManagement?: 'AWS_MANAGED' | 'USER_MANAGED'
  },
  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,
  }
} | undefined;

chainId (optional)

If chainId is provided, wallet will be connected to network with given chainId, else wallet will be connected to Ethereum mainnet by default.

Chain object corresponding to this chainId from @thirdweb-dev/chains package must be specified in ThirdwebProvider's supportedChains prop as shown below

import { Polygon } from "@thirdweb-dev/chains";
import { ThirdwebProvider } from "@thirdweb-dev/react";

export function YourApp() {
  return (
    <ThirdwebProvider supportedChains={[Polygon]} clientId="your-client-id">
      <App />
    </ThirdwebProvider>
  );
}

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.