From a771fee6c9ed6f5749eb444e48c87c7309e71f0e Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 22 Apr 2026 18:25:44 +0900
Subject: [PATCH] [#939] Replace PL Earned with FDV and Target Progress in
 stats row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Box 1: Participants (unchanged)
- Box 2: Current FDV value
- Box 3: Dynamic progress % toward next milestone with mini progress bar
- Label updates as milestones are reached (e.g., "Progress to 🥉 Bronze")
- Shows "Diamond Achieved!" when all milestones met

Fixes #939

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 package.json                            |  2 +-
 src/components/airdrop/CampaignHero.tsx | 72 +++++++++++++++++++------
 2 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 09ded99c..e9ea6dbc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plotlink",
-  "version": "0.1.38",
+  "version": "0.1.39",
   "private": true,
   "workspaces": [
     "packages/*"
diff --git a/src/components/airdrop/CampaignHero.tsx b/src/components/airdrop/CampaignHero.tsx
index 5395d1a4..d2175380 100644
--- a/src/components/airdrop/CampaignHero.tsx
+++ b/src/components/airdrop/CampaignHero.tsx
@@ -477,6 +477,57 @@ function TimelineChart({
   );
 }
 
+/* ─── Stats row sub-component ─── */
+
+function StatsRow({
+  participants,
+  currentFdv,
+  tiers,
+}: {
+  participants: number;
+  currentFdv: number;
+  tiers: Tier[];
+}) {
+  // Find next milestone
+  const nextTierIdx = tiers.findIndex((t) => currentFdv < t.fdv);
+  const allReached = nextTierIdx === -1;
+  const nextTier = allReached ? null : tiers[nextTierIdx];
+  const progressPct = allReached
+    ? 100
+    : nextTier
+      ? Math.min(100, Math.round((currentFdv / nextTier.fdv) * 100))
+      : 0;
+
+  const progressLabel = allReached
+    ? `${tiers[tiers.length - 1].emoji} ${tiers[tiers.length - 1].label} Achieved!`
+    : `Progress to ${nextTier!.emoji} ${nextTier!.label}`;
+
+  return (
+    <div className="grid grid-cols-3 gap-2 text-center">
+      <div className="border-border rounded border px-2 py-1.5">
+        <div className="text-foreground text-sm font-bold">{participants}</div>
+        <div className="text-muted text-[9px]">Participants</div>
+      </div>
+      <div className="border-border rounded border px-2 py-1.5">
+        <div className="text-foreground text-sm font-bold">
+          {currentFdv > 0 ? formatUsdValue(currentFdv) : "\u2014"}
+        </div>
+        <div className="text-muted text-[9px]">FDV</div>
+      </div>
+      <div className="border-border rounded border px-2 py-1.5">
+        <div className="text-foreground text-sm font-bold">{progressPct}%</div>
+        <div className="text-muted text-[9px] leading-tight">{progressLabel}</div>
+        <div className="bg-surface border-border mt-1 h-1 rounded border overflow-hidden">
+          <div
+            className="bg-accent h-full transition-all"
+            style={{ width: `${progressPct}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 /* ─── Main component ─── */
 
 export function CampaignHero() {
@@ -551,22 +602,11 @@ export function CampaignHero() {
       )}
 
       {/* Stats row */}
-      <div className="grid grid-cols-3 gap-2 text-center">
-        <div className="border-border rounded border px-2 py-1.5">
-          <div className="text-foreground text-sm font-bold">{data.totalParticipants}</div>
-          <div className="text-muted text-[9px]">Participants</div>
-        </div>
-        <div className="border-border rounded border px-2 py-1.5">
-          <div className="text-foreground text-sm font-bold">{Math.round(data.totalPointsEarned).toLocaleString()}</div>
-          <div className="text-muted text-[9px]">PL Earned</div>
-        </div>
-        <div className="border-border rounded border px-2 py-1.5">
-          <div className="text-foreground text-sm font-bold">
-            {data.latestPriceUsd ? formatUsdValue(data.latestPriceUsd) : "\u2014"}
-          </div>
-          <div className="text-muted text-[9px]">PLOT Price</div>
-        </div>
-      </div>
+      <StatsRow
+        participants={data.totalParticipants}
+        currentFdv={data.currentFdv}
+        tiers={tiers}
+      />
 
       {/* 6-Month Timeline Chart */}
       <TimelineChart