Show token logos in a crypto wallet

Use case prompt

Build a token list with crypto logos, following https://www.logo.dev/docs/use-cases/crypto-wallet-logos.md

Read that page and inspect this project's stack. Use this project's existing conventions.

Each row shows the token logo, the token name, the balance, and the value. Build each logo URL from the token symbol. A token with no logo keeps the generated monogram, so every row has the same shape. If the app needs a token's name, description, or colors, look the token up on the server with the Brand API, and allow for a token with no domain.

For API details, read https://www.logo.dev/docs/logo-images/crypto.md, https://www.logo.dev/docs/logo-images/introduction.md, and https://www.logo.dev/docs/brand/introduction.md

Wallets, exchanges, and portfolio trackers show dozens of tokens on one screen. A logo next to each symbol lets people find a holding before they read its ticker. Your app decides which symbol each asset uses and what a row without a logo looks like.

Choose the lookup from the data you have

You have the token symbol. Build a crypto logo URL from the symbol.
You need the token’s name, description, or colors. Look the token up by symbol with the Brand API on your server. Some tokens have no website, so allow for a null domain.

Render the list

Each row is one image next to the balances you already have. A token with no logo shows the generated monogram, so every row keeps the same shape:

type Holding = {
  symbol: string;
  name: string;
  amount: number;
  value: number;
};

const usd = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

export function TokenList({
  token,
  holdings,
}: {
  token: string;
  holdings: Holding[];
}) {
  return (
    <ul className="max-w-md divide-y divide-zinc-950/5 dark:divide-white/5">
      {holdings.map((h) => (
        <li className="flex items-center gap-3 py-3" key={h.symbol}>
          <img
            alt={`${h.name} logo`}
            className="h-10 w-10 rounded-full object-contain"
            height={40}
            loading="lazy"
            src={`https://img.logo.dev/crypto/${encodeURIComponent(h.symbol)}?token=${token}&format=webp&retina=true&size=40`}
            width={40}
          />
          <div className="min-w-0">
            <div className="text-sm font-semibold">{h.name}</div>
            <div className="text-xs tabular-nums text-zinc-500">
              {h.amount.toLocaleString("en-US")} {h.symbol}
            </div>
          </div>
          <div className="ml-auto text-sm font-medium tabular-nums">
            {usd.format(h.value)}
          </div>
        </li>
      ))}
    </ul>
  );
}

import { TokenList } from "./TokenList";

export function Wallet() {
  return (
    <TokenList
      holdings={[
        { symbol: "BTC", name: "Bitcoin", amount: 0.4821, value: 31240.55 },
        { symbol: "ETH", name: "Ethereum", amount: 5.12, value: 17652.3 },
        { symbol: "USDC", name: "USD Coin", amount: 2500, value: 2500 },
      ]}
      token="LOGO_DEV_PUBLISHABLE_KEY"
    />
  );
}

Test the list

Test with a major token such as BTC, a stablecoin such as USDC, a lowercase symbol such as eth, and a symbol that has no logo. Check that every row keeps its size while images load.

Crypto logos

Look up token logos by symbol.

Stock watchlists

Build the same row pattern for stocks.

Start simple

Fintech

CRM and sales

Marketing and onboarding

Marketplaces

Branded content

Show token logos in a crypto wallet

Choose the lookup from the data you have

Render the list

Test the list

Crypto logos

Stock watchlists

​Choose the lookup from the data you have

​Render the list

​Test the list

Crypto logos

Stock watchlists

Choose the lookup from the data you have

Render the list

Test the list