In-app wallet customization

The latest thirdweb typescript SDK release - v5.96.4 - adds a new way to make the Connect modal feel like your own by adding custom metadata to in-app wallets.

Wide mode

In wide mode, you can customize the name and icon of your in-app wallet in the list of wallets, and the image above the login options separately.

Compact mode

In compact mode, only the image above the login options is displayed.

How to setup your metadata

Simply pass your app metadata along the other options when creating your inAppWallet , then pass it as one of the available wallets in the ConnectButton or ConnectEmbed.

const wallets = [
    inAppWallet({
      // your auth options
      auth: {
        options: ["google", "x", "passkey"],
      },
      // your app metadata
      metadata: {
        name: "My App", // name for the wallet list
        icon: "/twcoin.svg", // icon for the wallet list
        image: {
          src: "/twcoin.svg", // image above the login options
          width: 100,
          height: 100,
          alt: "My App",
        },
      },
    }),
    createWallet("io.metamask"),
    createWallet("com.coinbase.wallet"),
    createWallet("io.rabby"),
];

<ConnectButton client={client} wallets={wallets} />

Happy building! 🛠️