feat(token-logo): render chain icons for native tokens

[gabitoesmiapodo]

Summary

Closes #164

Native tokens (ETH, MATIC, etc.) previously fell through to the colored placeholder circle in TokenLogo because buildNativeToken() produces Token objects with no logoURI. This introduces a static chain-ID-to-icon mapping so TokenLogo can resolve and render the well-known chain icon for native tokens directly, without requiring any change to the token data layer.

Changes

• Add nativeTokenIcons.tsx with a static mapping of chain IDs to SVG chain icons
• Refactor TokenLogo from a single file into a folder (TokenLogo/index.tsx + TokenLogo/nativeTokenIcons.tsx)
• Update TokenLogo to check for a native token icon when logoURI is absent, before falling back to the placeholder
• Expand TokenLogo.test.tsx with assertions covering unmapped-chain fallback behavior
• Update src/components/ui/provider.tsx to accommodate the icon integration

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

Test plan

Automated tests

• src/components/sharedComponents/TokenLogo/TokenLogo.test.tsx

pnpm test TokenLogo

Manual verification

Open the token select component on a configured network. Verify native tokens (e.g., ETH on Ethereum) display their chain icon instead of a colored letter placeholder. Verify that a network with no mapped icon still shows the placeholder without errors.

Breaking changes

None.

Checklist

• Self-reviewed my own diff
• Tests added or updated
• Docs updated (if applicable)
• No unrelated changes bundled in

Screenshots

Screen.Recording.2026-04-21.at.11.25.33.mov

[Copilot]

Pull request overview

Adds native-token chain icons to TokenLogo so native assets (ETH, POL, etc.) render a well-known chain icon instead of the letter-placeholder when logoURI is missing.

Changes:

• Introduces a static chainId -> @web3icons/react mapping for native token icons.
• Refactors TokenLogo into a folder module and renders mapped chain icons for native tokens.
• Exports the Chakra system from Provider and extends TokenLogo tests for mapped/unmapped native-token behavior.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
src/components/ui/provider.tsx	Moves Chakra system creation to module scope and exports system for reuse (tests).
src/components/sharedComponents/TokenLogo/nativeTokenIcons.tsx	Adds chainId-to-icon mapping for configured networks.
src/components/sharedComponents/TokenLogo/index.tsx	Updates TokenLogo rendering logic to use native chain icons before other fallbacks.
src/components/sharedComponents/TokenLogo/TokenLogo.test.tsx	Adds assertions for mapped native icon rendering and unmapped fallback behavior.

Comments suppressed due to low confidence (3)

src/components/sharedComponents/TokenLogo/index.tsx:76

• The JSDoc claims native tokens are detected via token.address === env.PUBLIC_NATIVE_TOKEN_ADDRESS, but the implementation uses isNativeToken() (lowercases before comparing). Please update the comment to match the actual detection logic so future readers don’t rely on an equality check that can fail for checksummed addresses.
  src/components/sharedComponents/TokenLogo/index.tsx:110
• PR description says the chain icon should be used when logoURI is absent, but this code returns the native chain icon whenever the token is native (even if a logoURI is provided). Consider gating the native-icon branch on !logoURI (or !logoURI || hasError) so a future explicit native logoURI wouldn’t be ignored.
  src/components/sharedComponents/TokenLogo/index.tsx:101
• nativeTokenIcons[token.chainId as ChainsIds] relies on a type assertion that defeats the “unmapped chain => placeholder” behavior you’re explicitly testing. Prefer typing nativeTokenIcons as a partial map (e.g. Partial<Record<number, IconComponent>>) and indexing with token.chainId directly, so TypeScript models the possibility of undefined without casts.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
components.dappbooster	Ready	Preview, Comment	Apr 21, 2026 2:40pm
demo.dappbooster	Ready	Preview	Apr 21, 2026 2:40pm
docs.dappbooster	Ready	Preview, Comment	Apr 21, 2026 2:40pm

[gabitoesmiapodo]

Responding to the three low-confidence suggestions in #pullrequestreview-4148478875:

• JSDoc at TokenLogo/index.tsx:73 — addressed in 9ae8e55. Updated to reference isNativeToken() and note the case-insensitive match.
• Type assertion at TokenLogo/index.tsx:100 — addressed in 505e6ef. nativeTokenIcons is now typed as Partial<Record<ChainsIds, IconComponent>>, which correctly models the unmapped-chain case exercised by the existing test at TokenLogo.test.tsx:104.
• !logoURI gate at TokenLogo/index.tsx:103 — declined. buildNativeToken() at src/hooks/useTokenLists.ts:210 never sets logoURI, and useTokenLists.ts:131 replaces any LI.FI native entries with local builds. A native token with logoURI cannot be produced by this codebase, so the gate would introduce an unreachable branch.