Skip to content

Airdrop chart: rebuild as area chart with linear Y-$ axis and tier-name vertical bands #1059

@realproject7

Description

@realproject7

Why this ticket exists

The current chart (#1056 + #1058) is a thin 1D progress band. The user wants the actual visual shape of the benchmark (ultrasound.money's "ETH supply—2y projection" chart) — a tall area chart with a linear Y-axis showing real $ amounts and vertical phase bands with full labels at the top of each band, including the tier name.

New design

Tall area chart, ultrasound.money style, with our milestone data.

Axes

  • Y-axis: linear, actual $ amounts. Domain [0, milestones.diamond.mcap]. Tick labels at \$0, \$25M, \$50M, \$75M, \$100M (or proportional 0/25/50/75/100% of diamond for test mode). Labels render on the left, monospace, small.
  • X-axis: banded MCap progression. Each milestone occupies an equal 25% of width — the same mcapToX piecewise log-interpolation we already have. NO time component. Labels at the bottom of each band: tier name only (Bronze / Silver / Gold / Diamond) in monospace caps.

Bands

  • 3 vertical band dividers spanning full chart height at 25%, 50%, 75% of width (band 0/1, 1/2, 2/3 boundaries). Plus left edge (band 0 left) and right edge (= diamond, also at 100%).
  • Top-of-band labels stacked vertically, centered horizontally over each band (not the line):
    BRONZE                SILVER             GOLD              DIAMOND
    $1M                   $10M               $50M              $100M
    unlocks 10%           unlocks 30%        unlocks 50%       unlocks 100%
    ≈ #1900               ≈ #950             ≈ #400            ≈ #250
    
    Tier name uppercased and bold (small caps style); other lines normal weight; CMC rank dimmer. This is the explicit "add Bronze/Silver/etc on desktop too" ask.

Curve and dot

  • The curve passes through the 5 knot points: (0, $0), (0.25, bronze.mcap), (0.5, silver.mcap), (0.75, gold.mcap), (1.0, diamond.mcap). Within each band, sample 20 sub-points using the same banded log interpolation as mcapToX so the curve is smooth (not a piecewise-linear hockey-stick).
  • Area fill below the curve, accent gradient (matches the previous design's gradient).
  • Heartbeat dot at (mcapToX(currentFdv), currentFdv) — this point lies exactly ON the curve by construction.
  • The current dot for currentFdv = $33K lands near the bottom-left in band 0 (pre-bronze), Y position is essentially at $0 line because $33K is 0.033% of $100M on linear Y. Visually the dot may overlap the X-axis baseline — that is honest signal ("we're starting from zero relative to the goal") and matches the benchmark's style.

Mobile

  • Tier name labels stay as a 4-column legend below the chart (existing pattern).
  • Top-of-band labels on the chart itself: hide CMC rank line on mobile (small text becomes unreadable). Keep tier name + value + pct.
  • Y-axis: keep tick labels visible on mobile (small monospace).

Removals from #1056

  • The thin 1D bar layout
  • The "Current: $X" caption (info now visible from the dot's Y position against the Y-axis)
  • The \$0 endpoint label (the Y-axis itself shows $0)

Files

  • src/components/airdrop/CampaignHero.tsx — replace MCapChart again

Acceptance criteria

  • Chart is ~250px tall (matching ultrasound.money's visual proportion).
  • Y-axis on the left has 5 tick labels: $0 / $25M / $50M / $75M / $100M, scaling appropriately if test/prod mode differs.
  • 3 vertical band dividers visible spanning full chart height.
  • Top of each band shows 4 lines: TIER NAME / $value / unlocks Y% / ≈ #Z.
  • Bottom of each band shows the tier name as the X-axis label.
  • Curve smoothly rises from $0 (bottom-left) to $100M (top-right), passing through each milestone knot.
  • Filled area below curve with accent gradient.
  • Heartbeat dot visible at current MCap position on the curve.
  • Mobile: 4-column legend below chart with tier name + value + pct.
  • No hex literals; all colors via CSS vars.

Reviewer note

Block this PR if it:

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    agent/T3Assigned to T3 builder agent

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions