Skip to content

Add missing icons for native tokens #164

@gabitoesmiapodo

Description

@gabitoesmiapodo

User story / Problem statement

Currently, native tokens (ETH, MATIC, etc.) in the token select component display a colored placeholder circle with the first letter of the symbol instead of the actual chain logo. This makes it harder to visually identify native tokens at a glance, especially in the top tokens bar where quick recognition matters.

Expected outcome

Native tokens display their well-known chain icons (e.g., ETH diamond, MATIC logo) consistently across the token select list and top tokens bar, matching the visual quality of ERC-20 tokens that already have logoURI from token lists.

Acceptance criteria

  • Native tokens rendered by TokenLogo display their chain-specific icon instead of the colored placeholder
  • Icons display correctly across all configured networks
  • Fallback to the existing placeholder still works if a native token logo cannot be loaded

Technical notes

buildNativeToken() in src/hooks/useTokenLists.ts (line 198) constructs native Token objects from viem/chains nativeCurrency data, which provides name, symbol, and decimals but no logo URI. The logoURI field is left undefined, triggering the Placeholder fallback in src/components/sharedComponents/TokenLogo.tsx.

A likely fix is adding a logoURI to the token object returned by buildNativeToken(), sourced from a static mapping of chain IDs to well-known native token logo URLs (e.g., from a token logo CDN or bundled assets).

Additional context

Native tokens missing icons in token select

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions