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
Screen Recording Requirements
- Dashboard → click XLM balance card
- Asset detail page opens with price and chart
- Switch 24H / 7D / 30D — chart re-renders each time
- Chart is green when period shows positive return, red when negative
- Click Send → navigates to Send page with XLM pre-selected
- Click Swap → navigates to Swap page with XLM as from-asset
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
src/lib/prices.tssrc/components/PriceChart.tsxsrc/pages/AssetDetailPage.tsxsrc/pages/DashboardPage.tsx— make balance cards clickable linkssrc/App.tsx— add/asset/:coderouteImplementation Notes
prices.tsUse CoinGecko's public
coins/stellar/market_chartendpoint (hourlyinterval for 1 day,dailyotherwise) — no API key required.PriceChartcomponentPure 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)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
Screen Recording Requirements