Wallet Components

Headless UI components for rendering wallet name and icon

WalletIcon

Show the icon of a crypto wallet

Code

import { WalletProvider, WalletIcon } from "thirdweb/react";

function App() {
  return (
    <WalletProvider id="io.metamask">
      <WalletIcon
        className="h-20 w-20 rounded-full"
        loadingComponent={<span>Loading...</span>}
      />
    </WalletProvider>
  );
}

Preview

WalletName

Show the name of a crypto wallet

Code

import { WalletProvider, WalletName } from "thirdweb/react";

function App() {
  return (
    <WalletProvider id="io.metamask">
      <WalletName loadingComponent={<span>Loading...</span>} />
    </WalletProvider>
  );
}

Preview

Transform the wallet name using the formatFn prop.

Code

import { WalletProvider, WalletName } from "thirdweb/react";

function App() {
  return (
    <WalletProvider id="io.metamask">
      <WalletName
        loadingComponent={<span>Loading...</span>}
        formatFn={(str: string) => `${str} Wallet`}
      />
    </WalletProvider>
  );
}

Preview