From f620295a8a47016927bb6dec7674a6a20d41df8a Mon Sep 17 00:00:00 2001 From: Cho Young-Hwi Date: Thu, 2 Apr 2026 21:33:14 +0100 Subject: [PATCH 1/3] [#773] Replace Token Price with Market Cap USD + 24h change on storyline page Replace the Token Price box in StoryHeader with a Market Cap box showing totalSupply * pricePerToken * plotUsd in USD, plus 24h percent change with green/red coloring. Supply Minted box unchanged. New MarketCapBox client component fetches plotUsd and 24h price change data client-side. Co-Authored-By: Claude Opus 4.6 (1M context) --- src/app/story/[storylineId]/page.tsx | 15 ++++---- src/components/MarketCapBox.tsx | 52 ++++++++++++++++++++++++++++ 2 files changed, 58 insertions(+), 9 deletions(-) create mode 100644 src/components/MarketCapBox.tsx diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx index f0bec67f..0e35d64a 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 { UsdPriceTag } from "../../../components/UsdPriceTag"; +import { MarketCapBox } from "../../../components/MarketCapBox"; /** Deduplicate plots by plot_index, keeping the first occurrence. */ function deduplicateByPlotIndex(plots: Plot[]) { @@ -292,15 +293,11 @@ function StoryHeader({ {priceInfo && (
-
- - Token Price - - - {formatPrice(priceInfo.pricePerToken)} {reserveLabel} - - -
+
Supply Minted diff --git a/src/components/MarketCapBox.tsx b/src/components/MarketCapBox.tsx new file mode 100644 index 00000000..2a1baa7b --- /dev/null +++ b/src/components/MarketCapBox.tsx @@ -0,0 +1,52 @@ +"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 { createPublicClient, http, type Address } from "viem"; +import { base } from "viem/chains"; + +const browserClient = createPublicClient({ chain: base, transport: http() }); + +/** + * 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 ( +
+ + Market Cap + + + {formatUsdValue(marketCapUsd)} + {changePercent !== null && ( + = 0 ? "text-accent" : "text-error"}`}> + {changePercent >= 0 ? "+" : ""}{changePercent.toFixed(1)}% + + )} + +
+ ); +} From d951998ed281bc21a97bdc903228d8333357b85b Mon Sep 17 00:00:00 2001 From: Cho Young-Hwi Date: Thu, 2 Apr 2026 21:35:33 +0100 Subject: [PATCH 2/3] [#773] Fix T2a review: use shared browserClient from lib/rpc Replace hardcoded Base mainnet client with the shared chain-aware browserClient from lib/rpc.ts for correct behavior across environments. Co-Authored-By: Claude Opus 4.6 (1M context) --- src/components/MarketCapBox.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/MarketCapBox.tsx b/src/components/MarketCapBox.tsx index 2a1baa7b..fa32fd79 100644 --- a/src/components/MarketCapBox.tsx +++ b/src/components/MarketCapBox.tsx @@ -4,10 +4,8 @@ import { usePlotUsdPrice } from "../hooks/usePlotUsdPrice"; import { formatUsdValue } from "../../lib/usd-price"; import { useQuery } from "@tanstack/react-query"; import { get24hPriceChange } from "../../lib/price"; -import { createPublicClient, http, type Address } from "viem"; -import { base } from "viem/chains"; - -const browserClient = createPublicClient({ chain: base, transport: http() }); +import { browserClient } from "../../lib/rpc"; +import { type Address } from "viem"; /** * Client component that displays Market Cap in USD with 24h % change. From 6f537372cb8ac9ed12219cecf59718f495b1e231 Mon Sep 17 00:00:00 2001 From: Cho Young-Hwi Date: Thu, 2 Apr 2026 21:37:45 +0100 Subject: [PATCH 3/3] [#773] Fix T2a review: remove unused UsdPriceTag import and reserveLabel Co-Authored-By: Claude Opus 4.6 (1M context) --- src/app/story/[storylineId]/page.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx index 0e35d64a..6dd3fb6a 100644 --- a/src/app/story/[storylineId]/page.tsx +++ b/src/app/story/[storylineId]/page.tsx @@ -22,7 +22,6 @@ 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. */ @@ -259,8 +258,6 @@ function StoryHeader({ storyline: Storyline; priceInfo: TokenPriceInfo | null; }) { - const reserveLabel = RESERVE_LABEL; - return (