From 544fc0d8a25bdddde6d64e97bda526c566457b86 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Sun, 12 Apr 2026 07:02:47 +0100
Subject: [PATCH] [#856] Live USD token price + historical chart labeling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename chart heading "Price" → "Price History" to clarify it shows
  historical trade data, not a real-time feed
- Add TokenPriceBox client component: shows live USD price as primary
  (via same Mint Club SDK/GeckoTerminal source), PLOT price as secondary
- Replace static PLOT-only price in story header stats with TokenPriceBox
- Patch version bump 0.1.21 → 0.1.22

Price semantics (for future reference):
  - Header "Token Price" = live current USD via usePlotUsdPrice hook
  - Chart "Price History" = historical trade-derived prices with USD toggle

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 package.json                         |  2 +-
 src/app/story/[storylineId]/page.tsx |  4 ++--
 src/components/PriceChart.tsx        |  6 +++---
 src/components/TokenPriceBox.tsx     | 27 +++++++++++++++++++++++++++
 4 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 src/components/TokenPriceBox.tsx

diff --git a/package.json b/package.json
index da22803c..b7aac94a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plotlink",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "private": true,
   "workspaces": [
     "packages/*"
diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index abe3bcd2..aa24e615 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -23,6 +23,7 @@ import { ViewCount, ViewTracker } from "../../../components/ViewCount";
 import { CommentSection } from "../../../components/CommentSection";
 import { MobileActionBar } from "../../../components/MobileActionBar";
 import { MarketCapBox } from "../../../components/MarketCapBox";
+import { TokenPriceBox } from "../../../components/TokenPriceBox";
 
 /** Deduplicate plots by plot_index, keeping the first occurrence. */
 function deduplicateByPlotIndex(plots: Plot[]) {
@@ -296,8 +297,7 @@ function StoryHeader({
         )}
       </div>
       <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-        <div className="text-foreground text-sm font-bold">{formatPrice(priceInfo.pricePerToken)} {RESERVE_LABEL}</div>
-        <div className="text-muted text-[9px]">Token Price</div>
+        <TokenPriceBox pricePerToken={parseFloat(priceInfo.pricePerToken)} />
       </div>
       <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
         <div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>
diff --git a/src/components/PriceChart.tsx b/src/components/PriceChart.tsx
index c0b6840a..9d14bed9 100644
--- a/src/components/PriceChart.tsx
+++ b/src/components/PriceChart.tsx
@@ -113,7 +113,7 @@ export function PriceChart({ tokenAddress, currentPriceRaw }: PriceChartProps) {
   if (!hasData) {
     return (
       <section className="border-border mt-4 rounded border px-4 py-4">
-        <h2 className="text-foreground text-sm font-medium">Price</h2>
+        <h2 className="text-foreground text-sm font-medium">Price History</h2>
         <div className="mt-3 flex flex-col items-center justify-center py-6">
           <svg width="40" height="40" viewBox="0 0 40 40">
             <circle cx="20" cy="20" r="3" fill="var(--accent)" />
@@ -156,7 +156,7 @@ export function PriceChart({ tokenAddress, currentPriceRaw }: PriceChartProps) {
     // All points filtered out — shouldn't happen, but fallback
     return (
       <section className="border-border mt-4 rounded border px-4 py-4">
-        <h2 className="text-foreground text-sm font-medium">Price</h2>
+        <h2 className="text-foreground text-sm font-medium">Price History</h2>
         <p className="text-muted mt-2 text-[10px]">USD pricing data not yet available</p>
       </section>
     );
@@ -243,7 +243,7 @@ export function PriceChart({ tokenAddress, currentPriceRaw }: PriceChartProps) {
   return (
     <section className="border-border mt-4 rounded border px-4 py-4">
       <div className="flex items-center justify-between">
-        <h2 className="text-foreground text-sm font-medium">Price</h2>
+        <h2 className="text-foreground text-sm font-medium">Price History</h2>
         {hasUsdData && (
           <div className="border-border flex rounded border text-[10px]">
             <button
diff --git a/src/components/TokenPriceBox.tsx b/src/components/TokenPriceBox.tsx
new file mode 100644
index 00000000..c0f82249
--- /dev/null
+++ b/src/components/TokenPriceBox.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { usePlotUsdPrice } from "../hooks/usePlotUsdPrice";
+import { formatUsdValue } from "../../lib/usd-price";
+import { formatPrice } from "../../lib/format";
+import { RESERVE_LABEL } from "../../lib/contracts/constants";
+
+/**
+ * Token price stat box: live USD as primary, PLOT as secondary.
+ * Uses the same PLOT/USD source as Mint Club (via usePlotUsdPrice).
+ */
+export function TokenPriceBox({ pricePerToken }: { pricePerToken: number }) {
+  const { data: plotUsd } = usePlotUsdPrice();
+  const usdPrice = plotUsd ? pricePerToken * plotUsd : null;
+
+  return (
+    <>
+      <div className="text-foreground text-sm font-bold">
+        {usdPrice !== null ? formatUsdValue(usdPrice) : `${formatPrice(pricePerToken)} ${RESERVE_LABEL}`}
+      </div>
+      {usdPrice !== null && (
+        <div className="text-muted text-[8px]">{formatPrice(pricePerToken)} {RESERVE_LABEL}</div>
+      )}
+      <div className="text-muted text-[9px]">Token Price</div>
+    </>
+  );
+}