[#773] Show Market Cap USD + 24h change instead of Token Price

src/app/story/[storylineId]/page.tsx

@@ -22,7 +22,7 @@ import { WriterIdentity } from "../../../components/WriterIdentity";
 import { ViewCount, ViewTracker } from "../../../components/ViewCount";
 import { CommentSection } from "../../../components/CommentSection";
 import { MobileActionBar } from "../../../components/MobileActionBar";
-import { UsdPriceTag } from "../../../components/UsdPriceTag";
+import { MarketCapBox } from "../../../components/MarketCapBox";
 
 /** Deduplicate plots by plot_index, keeping the first occurrence. */
 function deduplicateByPlotIndex(plots: Plot[]) {
@@ -258,8 +258,6 @@ function StoryHeader({
   storyline: Storyline;
   priceInfo: TokenPriceInfo | null;
 }) {
-  const reserveLabel = RESERVE_LABEL;
-
   return (
     <header className="border-border border-b pb-6">
       <h1 className="font-body text-2xl font-bold tracking-tight text-accent">
@@ -292,15 +290,11 @@ function StoryHeader({
 
       {priceInfo && (
         <div className="border-border bg-surface mt-4 grid grid-cols-2 gap-2 rounded border px-3 py-2 text-xs">
-          <div>
-            <span className="text-muted block text-[10px] uppercase tracking-wider">
-              Token Price
-            </span>
-            <span className="font-semibold text-accent">
-              {formatPrice(priceInfo.pricePerToken)} {reserveLabel}
-              <UsdPriceTag plotAmount={parseFloat(priceInfo.pricePerToken)} />
-            </span>
-          </div>
+          <MarketCapBox
+            tokenAddress={storyline.token_address}
+            totalSupply={parseFloat(priceInfo.totalSupply)}
+            pricePerToken={parseFloat(priceInfo.pricePerToken)}
+          />
           <div>
             <span className="text-muted block text-[10px] uppercase tracking-wider">
               Supply Minted

src/components/MarketCapBox.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { usePlotUsdPrice } from "../hooks/usePlotUsdPrice";
+import { formatUsdValue } from "../../lib/usd-price";
+import { useQuery } from "@tanstack/react-query";
+import { get24hPriceChange } from "../../lib/price";
+import { browserClient } from "../../lib/rpc";
+import { type Address } from "viem";
+
+/**
+ * Client component that displays Market Cap in USD with 24h % change.
+ * Market Cap = totalSupply * pricePerToken * plotUsd
+ */
+export function MarketCapBox({
+  tokenAddress,
+  totalSupply,
+  pricePerToken,
+}: {
+  tokenAddress: string;
+  totalSupply: number;
+  pricePerToken: number;
+}) {
+  const { data: plotUsd } = usePlotUsdPrice();
+  const { data: priceChange } = useQuery({
+    queryKey: ["24h-change", tokenAddress],
+    queryFn: () => get24hPriceChange(tokenAddress as Address, browserClient),
+    staleTime: 60000,
+  });
+
+  if (!plotUsd) return null;
+
+  const marketCapUsd = totalSupply * pricePerToken * plotUsd;
+  const changePercent = priceChange?.changePercent ?? null;
+
+  return (
+    <div>
+      <span className="text-muted block text-[10px] uppercase tracking-wider">
+        Market Cap
+      </span>
+      <span className="font-semibold text-accent">
+        {formatUsdValue(marketCapUsd)}
+        {changePercent !== null && (
+          <span className={`ml-1.5 text-[10px] font-medium ${changePercent >= 0 ? "text-accent" : "text-error"}`}>
+            {changePercent >= 0 ? "+" : ""}{changePercent.toFixed(1)}%
+          </span>
+        )}
+      </span>
+    </div>
+  );
+}