Token Components

Elevate your ERC20 and native crypto token applications with our React headless UI components, designed for efficient digital currency transactions. These customizable, zero-styling components simplify token interactions, giving developers the flexibility to create their ideal user interface for DeFi platforms, wallets, and other crypto applications.

View docs Book a Demo

TokenIcon

Show the default native icon of a network

import { TokenProvider, TokenIcon } from "thirdweb/react";

function App() {
  return (
    <TokenProvider
      address={NATIVE_TOKEN_ADDRESS}
      client={THIRDWEB_CLIENT}
      chain={ethereum}
    >
      <TokenIcon className="h-auto w-20 rounded-full" />
    </TokenProvider>
  );
}

Override the token's icon using the iconResolver prop.

There is no official way to query the icon of a token. If you have a source, you can pass it to the iconResolver prop.

import { TokenProvider, TokenIcon } from "thirdweb/react";

function App() {
  const USDC_ADDRESS =
    "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48";
  return (
    <TokenProvider
      address={USDC_ADDRESS}
      client={THIRDWEB_CLIENT}
      chain={ethereum}
    >
      <TokenIcon
        className="h-auto w-20 rounded-full"
        iconResolver="/usdc.svg"
      />
    </TokenProvider>
  );
}

TokenName

Show the name of the token

import { TokenProvider, TokenName } from "thirdweb/react";

function App() {
  return (
    <TokenProvider
      address={USDC_ADDRESS}
      client={THIRDWEB_CLIENT}
      chain={ethereum}
    >
      <TokenName
        loadingComponent={<span>Loading...</span>}
      />
    </TokenProvider>
  );
}

TokenSymbol

Show the symbol of the token

import { TokenProvider, TokenSymbol } from "thirdweb/react";

function App() {
  return (
    <TokenProvider
      address={USDC_ADDRESS}
      client={THIRDWEB_CLIENT}
      chain={ethereum}
    >
      <TokenSymbol
        loadingComponent={<span>Loading...</span>}
      />
    </TokenProvider>
  );
}

Build a token card

You can build a Token card by putting the Token components together

import { TokenProvider, TokenSymbol } from "thirdweb/react";

function App() {
  return (
    <TokenProvider
      address={USDC_ADDRESS}
      client={THIRDWEB_CLIENT}
      chain={ethereum}
    >
      <div className="flex flex-row items-center gap-2 rounded-lg border bg-slate-950 px-4 py-1">
        <TokenIcon
          className="h-10 w-10"
          iconResolver="/usdc.svg"
        />
        <div className="flex flex-col">
          <TokenName className="font-bold" />
          <TokenSymbol className="text-gray-500" />
        </div>
      </div>
    </TokenProvider>
  );
}

Loading...Loading...