Skip to content

Missing asset icons in swap/limit order/TWAP/stop-loss cards #230

@premiumjibles

Description

@premiumjibles

Problem

Token icons are missing from swap, limit order, TWAP, and stop-loss transaction cards. Only text symbols show (e.g. "ETH > USDC") with no logos.

tk ticket: sa-midv
Figma: https://www.figma.com/design/GeIQBjsXPrqJRYLVCzcjdV/AI-UX-Flows?node-id=2861-3112

Root Cause

Icons were never implemented in TxStepCardSwapPair. The component only accepts fromSymbol/toSymbol string props — no icon props exist. The vanilla JS migration is unrelated.

The icon data IS available: swapData.sellAsset.icon and swapData.buyAsset.icon carry valid URLs, and AssetIcon component already exists and is used elsewhere (portfolio, tx history, asset search).

Fix

  1. TxStepCard.tsx — Add fromIcon/toIcon optional props to TxStepCardSwapPair, render AssetIcon
  2. All 4 UI components — Pass icon URLs from tool output:
    • InitiateSwapUI.tsx
    • LimitOrderUI.tsx
    • StopLossUI.tsx
    • TwapUI.tsx

Acceptance Criteria

  • TxStepCardSwapPair renders AssetIcon for both sell and buy assets
  • All 4 UI components pass icon URLs
  • Graceful fallback to letter initials when URL missing/fails
  • Visual appearance matches Figma reference

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions