Skip to content

Add XLM price chart on asset detail page #30

Description

@MJ-RWA

Complexity: High — 200 pts

Summary

The Dashboard shows balances but no price history. This issue adds clickable asset cards that open a detail page with an SVG price chart (24h / 7d / 30d), percentage change, and quick action buttons — built without any external charting library.

Files to Create/Modify

  • Create: src/lib/prices.ts
  • Create: src/components/PriceChart.tsx
  • Create: src/pages/AssetDetailPage.tsx
  • Modify: src/pages/DashboardPage.tsx — make balance cards clickable links
  • Modify: src/App.tsx — add /asset/:code route

Implementation Notes

prices.ts

export interface PricePoint { time: number; price: number; }
export async function fetchXlmPriceHistory(days: 1 | 7 | 30): Promise<PricePoint[]>

Use CoinGecko's public coins/stellar/market_chart endpoint (hourly interval for 1 day, daily otherwise) — no API key required.

PriceChart component

Pure SVG, no charting library: normalize price points to SVG coordinate space, build a polyline, add a gradient fill below the line, show min/max labels. Green if last price > first price, red otherwise.

AssetDetailPage (route /asset/:code)

← Back   XLM
$0.412   ▲ +3.2% (7d)
[SVG Chart]
[24H] [7D] [30D]
Your balance: 142.5 XLM ≈ $58.72 USD
[Send]   [Swap]

For USDC, render a flat $1.00 line with no API call.

Wrap each balance card on the Dashboard in <Link to={/asset/${b.assetCode}}>.

Acceptance Criteria

  • Price chart rendered as SVG (no external charting library)
  • 24H, 7D, 30D periods selectable via tab buttons
  • Chart color: green when period change positive, red when negative
  • Percentage change displayed for selected period
  • Current USD price shown
  • USDC shows flat $1.00 chart
  • Quick action Send and Swap buttons navigate correctly
  • CoinGecko API called without API key (public endpoint)

Screen Recording Requirements

  1. Dashboard → click XLM balance card
  2. Asset detail page opens with price and chart
  3. Switch 24H / 7D / 30D — chart re-renders each time
  4. Chart is green when period shows positive return, red when negative
  5. Click Send → navigates to Send page with XLM pre-selected
  6. Click Swap → navigates to Swap page with XLM as from-asset

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions