[#1059] Rebuild airdrop chart as area chart with linear-Y $ axis

[realproject7]

Fixes #1059

Summary

Replaces the thin 1D milestone bar from #1056/#1058 with a tall area chart in the ultrasound.money ETH supply visual style, per user feedback:

I still prefer actual chart looking like the benchmarking chart. so, y-axis should be actual $ amount. Also, put nicely each milestone items exactly like the benchmarking chart. lastly, add bronze, silver, ... these milestone title on the desktop view too.

What changed

• Chart shape: 110px thin band → 280px tall area chart.
• Y-axis: banded log → linear actual $. Tick labels on the left at $0 / $25M / $50M / $75M / $100M.
• X-axis: still banded MCap progression (each milestone 25% of width). NO time component, per the earlier "x-axis not necessarily the exact date of now" feedback.
• Vertical band dividers: full chart height, dim accent (matches ETH chart visual).
• Top-of-band labels (desktop): 4 stacked lines per band — TIER NAME (small caps, letter-spaced) / \$1M (bold) / unlocks 10% / (≈ #1900) (dim). Tier name added per user ask.
• Bottom-of-band labels (desktop): tier names (bronze / silver / gold / diamond) as X-axis labels.
• Curve: piecewise log-interpolated through milestone knots, 24 samples per band (97 points total). Smooth, not hockey-stick piecewise-linear.
• Heartbeat dot: at (mcapToX(currentFdv), currentFdv) — lies on the curve by construction.
• Caption: current MCap value rendered just above the dot.

Removed

• Thin 1D bar layout
• "Current: $X" footer caption (info now visible from dot's Y position vs the Y-axis)
• "$0" endpoint label (Y-axis tick at $0 makes it explicit)

Files

• src/components/airdrop/CampaignHero.tsx — MCapChart rewritten end-to-end.
• package.json — 1.7.1 → 1.8.0 (2nd digit, design overhaul of an existing component).

Verification

• npm run typecheck passes
• npm run lint clean for CampaignHero.tsx
• Curve passes through (0%, $0), (25%, $1M), (50%, $10M), (75%, $50M), (100%, $100M) — 5 milestone knots
• At currentFdv=$33K, dot at X≈6.5%, Y≈99.97% (very near bottom-left, honest signal)
• All hex literals use CSS vars

Test plan

• Chart renders ~280px tall, full container width
• Y-axis ticks visible: $0 / $25M / $50M / $75M / $100M
• Vertical band dividers at 0/25/50/75/100% of chart width
• Each band column has 4 stacked top labels: TIER NAME / $value / unlocks Y% / (≈ #Z)
• Bottom of each band: tier name (bronze/silver/gold/diamond)
• Smooth curve from bottom-left to top-right with hockey-stick climb
• Heartbeat dot at current MCap on the curve
• Mobile: legend below chart preserved
• No console errors

Reviewer note

Block this PR if it:

• (a) reverts to a thin 1D bar layout
• (b) uses log Y-axis (must be linear $)
• (c) puts time on the X-axis
• (d) omits tier names from desktop top-of-band labels

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
plotlink	Ignored		May 6, 2026 2:38am