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
Screen Recording Requirements
- Dashboard with XLM and USDC balance cards — logos displayed
- Send page asset selector — logos displayed
- Swap page from/to cards — logos displayed
Trivial complexity — 100 pts
Summary
AssetBadgecurrently 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
src/assets/xlm-logo.svg— Stellar's official diamond logo (white on transparent, optimized <5KB)src/assets/usdc-logo.svg— Circle's USDC logo (optimized <5KB)src/components/AssetBadge.tsx— use<img src={logo} />for known assets, fallback to first letterWhere to get the SVGs
Implementation Notes
In
AssetBadge.tsx, create aassetLogosmap 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
sm,md,lg)Screen Recording Requirements