Custom logos in Connect Modal

Greg

We've released a new way to customize the built-in Connect Modal to seamlessly blend in with the rest of your app. Pass an image, alt tag, along with height and/or width to any in-app wallet's metadata field.

import { inAppWallet } from "thirdweb/wallets";
 
const wallet = inAppWallet({
  metadata: {
    image: {
      src: "https://i.ibb.co/JyF66pr/Aperture-Laboratories-Logo-1.png",
      width: 350,
      height: 100,
      alt: "Aperture Laboratories",
    },
  },
});

The logo will then show in the modal when you pass the wallet to the Connect Button. Logo scaling and resizing is handled for you across all devices.

import { ConnectButton } from "thirdweb/react";
 
// ...your page code
 
<ConnectButton client={client} wallets={[wallet]} />;

If you're building a custom authentication UI, you can still access the wallet's metadata through its config.

const config = wallet.getConfig();
const logo = config?.metadata?.image;

We can't wait to see your logo on a Connect Modal soon!