FNDRY Token Price Widget with DexScreener Integration

[sepulchralvoid666]

Bounty #846 — FNDRY Token Price Widget Component

What

Embeddable React component displaying real-time FNDRY token price using DexScreener free API (no auth required).

Features

• Three variants: compact (inline pill), default (card with sparkline), full (stats dashboard)
• Real-time price: DexScreener /dex/tokens/{address} endpoint, 30s auto-refresh
• 24h price change: Color-coded (green up, red down) with trend icon
• SVG sparkline chart: Pure SVG, no charting library dependency — gradient fill, live dot, dash fallback for insufficient data
• Stats (full variant): 24h volume, liquidity, FDV in compact notation
• Responsive: Works at any container width, mobile-friendly
• Manual refresh button with loading/error states

Files

• types/dexscreener.ts — DexScreener API response types
• hooks/useFNDRYPrice.ts — Data fetching hook with auto-refresh and sparkline accumulator
• components/ui/SparklineChart.tsx — Reusable SVG sparkline component
• components/fndry/FNDRYPriceWidget.tsx — Main widget with 3 variants
• pages/HomePage.tsx — Widget placed below hero section

Acceptance Criteria

• Real-time price updates from DexScreener
• 24h price change percentage display
• Responsive design for multiple container sizes
• Sparkline chart with gradient fill
• No charting library dependency

Closes #846

Solana wallet for payout: 9PmjWFwM2mdnjBNjJyfNMTWGCnGAKFpywsLF9xcRF8PK

[nagiexplorer88]

This does not currently fetch the real FNDRY price on the default path.

useFNDRYPrice.ts hard-codes the default token address as:

const FNDRY_TOKEN_ADDRESS = "FNDRY_TOKEN_ADDRESS_PLACEHOLDER";

HomePage.tsx renders <FNDRYPriceWidget variant="default" /> without passing a tokenAddress, so the homepage widget calls DexScreener with /dex/tokens/FNDRY_TOKEN_ADDRESS_PLACEHOLDER. That will return no real FNDRY pair and the widget will show the error state instead of the real-time price.

Since #846 is specifically for an FNDRY token price widget with real DexScreener updates, the default address needs to be the actual FNDRY token address or the component should require a real configured value before it is rendered on the homepage.