Skip to content

Add asset logo SVGs for XLM and USDC #12

Description

@MJ-RWA

Trivial complexity — 100 pts

Summary

AssetBadge currently displays text symbols ( for XLM, $ for USDC) inside colored circles. Using actual SVG logos for both assets makes the app look polished and recognizable.

Files to Modify

  • Create: src/assets/xlm-logo.svg — Stellar's official diamond logo (white on transparent, optimized <5KB)
  • Create: src/assets/usdc-logo.svg — Circle's USDC logo (optimized <5KB)
  • Modify: src/components/AssetBadge.tsx — use <img src={logo} /> for known assets, fallback to first letter

Where to get the SVGs

Implementation Notes

In AssetBadge.tsx, create a assetLogos map and render an <img> (w-3/5 h-3/5 object-contain) when a logo exists, otherwise fall back to the existing letter span.

Acceptance Criteria

  • XLM shows the official Stellar diamond logo
  • USDC shows the official Circle USDC logo
  • Logos render correctly in all three badge sizes (sm, md, lg)
  • Unknown assets fall back to the first letter of the asset code
  • SVG files are under 5KB each (optimized)

Screen Recording Requirements

  1. Dashboard with XLM and USDC balance cards — logos displayed
  2. Send page asset selector — logos displayed
  3. Swap page from/to cards — logos displayed

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions