You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The current chart (#1051 → #1052, banded Y-axis time-series) gets the milestone spacing right but uses the wrong axis layout. Three concrete problems with it:
Milestone markers should be vertical lines, not horizontal lines. The benchmark (ultrasound.money's ETH supply chart) uses vertical phase bands with labels at the top of each band. We've been putting our milestones on the Y-axis as horizontal lines instead — readable, but the wrong shape.
The historical area-fill and the dashed projection line don't visually relate to each other. Today's chart shows a thick brown segment at $31K-Y from 5/4 to 5/5, plus a separate dashed diagonal climbing from start to diamond at end-of-campaign. Two unrelated lines on the same canvas confuses what the user is supposed to read off the chart.
The X-axis being a real date is unnecessary. Users don't care that "5/6 is today" on the chart — they care where MCap is on the milestone path. Time on the X is doing no useful work and actively dilutes the signal (most of the chart is empty future-time).
New design
A 1D horizontal milestone progression chart. X-axis = MCap (banded so each milestone gets 25% of width); chart is a thin band, not a tall area chart.
Single horizontal line ("the MCap path from $0 to $100M").
4 vertical dashed milestone markers at 25% / 50% / 75% / 100% of chart width.
Banded X-axis: each milestone gets equal 25% of width. Within a band, position is log-interpolated between the band's lower and upper milestone values (same piecewise math we already use for Y in Airdrop chart: fix overlapping milestone labels via banded Y-axis #1051, just rotated to the X-axis).
Floor: bronze.mcap / 100 so pre-bronze isn't a single pixel at the left edge.
Current MCap: heartbeat dot at its banded X position, on the line. The line up to the dot is rendered thicker/solid; the line past the dot is rendered thinner/dimmer.
Labels
Desktop (≥640px): label block at top of each vertical line — $1M / unlocks 10% / (≈ #1900). Same as today's right-edge labels but rotated to top-of-vertical instead.
Mobile (<640px): simplified tier-name labels below the chart — Bronze / $1M / 10%. CMC rank dropped on mobile.
Removals
No time axis. Drop X-axis date ticks (5/4, 5/5, ..., 5/11).
No projection line. The line itself is the "path"; current dot shows progress on it.
No historical area fill. Drop the daily-prices fetch and area path entirely. (Leave the /api/airdrop/daily-prices route intact — it's just unused by this component now.)
Drop band stripes — when bands are vertical zones with labeled markers, stripes are noise.
Files
src/components/airdrop/CampaignHero.tsx — replace MCapChart body. Type signature stays the same except campaignStart / campaignEnd props can be removed (unused by the new design).
Acceptance criteria
Chart is roughly 100px tall, full container width — a thin band, not a 200px area chart.
4 vertical milestone markers labeled at top (desktop) with $X / unlocks Y% / (≈ #Z).
Mobile: tier names + values below the chart in 4 columns.
Current MCap heartbeat dot lands at correct banded position. At currentFdv=$31K with prod milestones ($1M/…/$100M), dot is in pre-bronze band (X between 0% and 25%), specifically ~6% from left.
Solid/thick line from $0 to dot; thinner/dimmer line from dot to $100M.
No date axis, no projection line, no area fill.
No /api/airdrop/daily-prices fetch in the chart component.
No hex literals in chart code (CSS vars only).
No horizontal scroll on 320px viewport.
Reviewer note
Block this PR if it:
(a) keeps any time-axis component (date ticks, projection line)
Why this ticket exists
The current chart (#1051 → #1052, banded Y-axis time-series) gets the milestone spacing right but uses the wrong axis layout. Three concrete problems with it:
Milestone markers should be vertical lines, not horizontal lines. The benchmark (ultrasound.money's ETH supply chart) uses vertical phase bands with labels at the top of each band. We've been putting our milestones on the Y-axis as horizontal lines instead — readable, but the wrong shape.
The historical area-fill and the dashed projection line don't visually relate to each other. Today's chart shows a thick brown segment at $31K-Y from 5/4 to 5/5, plus a separate dashed diagonal climbing from start to diamond at end-of-campaign. Two unrelated lines on the same canvas confuses what the user is supposed to read off the chart.
The X-axis being a real date is unnecessary. Users don't care that "5/6 is today" on the chart — they care where MCap is on the milestone path. Time on the X is doing no useful work and actively dilutes the signal (most of the chart is empty future-time).
New design
A 1D horizontal milestone progression chart. X-axis = MCap (banded so each milestone gets 25% of width); chart is a thin band, not a tall area chart.
Geometry
bronze.mcap / 100so pre-bronze isn't a single pixel at the left edge.Labels
$1M/unlocks 10%/(≈ #1900). Same as today's right-edge labels but rotated to top-of-vertical instead.Bronze/$1M/10%. CMC rank dropped on mobile.Removals
/api/airdrop/daily-pricesroute intact — it's just unused by this component now.)Files
src/components/airdrop/CampaignHero.tsx— replaceMCapChartbody. Type signature stays the same exceptcampaignStart/campaignEndprops can be removed (unused by the new design).Acceptance criteria
$X / unlocks Y% / (≈ #Z)./api/airdrop/daily-pricesfetch in the chart component.Reviewer note
Block this PR if it: