In-app wallet customization

Joaquim Verges

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.

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.

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

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! 🛠️