Skip to main content

Customize the Modal

When using Embedded Wallet with the Connect Wallet component, you can customize the UI of the modal & button.

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:

Build a Custom UI​

You can build a custom UI and use the embedded wallet headless.

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

const embeddedWalletConfig = embeddedWallet();

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

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

Update the Metadata​

Update the metadata for your Embedded Wallet.

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

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

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

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

const embeddedWalletConfig = embeddedWallet();

// 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, connectOptions);

Connect Options​

When using useConnect you can pass custom styles for the pre-styled embedded wallet UI via connectOptions

const connectOptions = {
  email?: string;
  chainId?: number;
  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;

const connect = useConnect();
connect(embeddedWalletConfig, connectOptions);

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

embeddedWallet({
  recommended: true,
});