Wallet Components

Boost your crypto wallet applications with our React headless UI components, optimized for digital asset management. These flexible, unstyled elements simplify cryptocurrency operations while granting developers complete control over the user interface design.

View docs Book a Demo

WalletIcon

Show the icon of a crypto wallet

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>
  );
}

WalletName

Show the name of a crypto wallet

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

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

Transform the wallet name using the formatFn prop.

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

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