From 4eac82a75fa4bcdbdef3e9c544d33bdbf31d991d Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 19 Mar 2026 11:29:42 +0000
Subject: [PATCH] [#349] Replace hardcoded $PLOT with RESERVE_LABEL in 7
 components

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/ClaimRoyalties.tsx     | 12 +++++-------
 src/components/DonateWidget.tsx       | 11 +++++------
 src/components/PriceChart.tsx         |  9 ++++-----
 src/components/ReaderPortfolio.tsx    |  8 +++-----
 src/components/StoryCardStats.tsx     | 10 ++++------
 src/components/TradingWidget.tsx      |  7 +++----
 src/components/WriterTradingStats.tsx |  8 +++-----
 7 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/src/components/ClaimRoyalties.tsx b/src/components/ClaimRoyalties.tsx
index 8e7c4ddc..ae48cadf 100644
--- a/src/components/ClaimRoyalties.tsx
+++ b/src/components/ClaimRoyalties.tsx
@@ -6,7 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import { formatUnits, type Address } from "viem";
 import { publicClient } from "../../lib/rpc";
 import { mcv2BondAbi, getTokenTVL } from "../../lib/price";
-import { MCV2_BOND, IS_TESTNET, EXPLORER_URL, PLOT_TOKEN } from "../../lib/contracts/constants";
+import { MCV2_BOND, RESERVE_LABEL, EXPLORER_URL, PLOT_TOKEN } from "../../lib/contracts/constants";
 
 function formatTruncated(value: bigint, decimals: number, digits = 10): string {
   const raw = formatUnits(value, decimals);
@@ -33,8 +33,6 @@ export function ClaimRoyalties({ tokenAddress, plotCount, beneficiary }: ClaimRo
 
   const { writeContractAsync } = useWriteContract();
 
-  const reserveLabel = IS_TESTNET ? "WETH" : "$PLOT";
-
   // Fetch unclaimed royalty balance + cumulative claimed
   const { data: royaltyInfo } = useQuery({
     queryKey: ["royalty-info", tokenAddress, beneficiary],
@@ -139,18 +137,18 @@ export function ClaimRoyalties({ tokenAddress, plotCount, beneficiary }: ClaimRo
                     Chain at least 2 plots ({plotCount}/2) {eligible && "\u2713"}
                   </li>
                   <li>
-                    Royalties accrue when readers trade your token ({formatTruncated(unclaimed, decimals)} {reserveLabel} unclaimed)
+                    Royalties accrue when readers trade your token ({formatTruncated(unclaimed, decimals)} {RESERVE_LABEL} unclaimed)
                   </li>
                 </ul>
               </div>
             )}
           </div>
           <span className={`ml-1 font-medium ${unclaimed > BigInt(0) ? "text-accent" : "text-foreground"}`}>
-            {formatTruncated(unclaimed, decimals)} {reserveLabel}
+            {formatTruncated(unclaimed, decimals)} {RESERVE_LABEL}
           </span>
           {totalClaimed > BigInt(0) && (
             <span className="text-muted ml-1 text-[10px]">
-              (claimed: {formatTruncated(totalClaimed, decimals)} {reserveLabel} so far)
+              (claimed: {formatTruncated(totalClaimed, decimals)} {RESERVE_LABEL} so far)
             </span>
           )}
           <button
@@ -182,7 +180,7 @@ export function ClaimRoyalties({ tokenAddress, plotCount, beneficiary }: ClaimRo
       )}
       {txHash && txState === "done" && (
         <p className="text-muted mt-1 text-[10px]">
-          Claimed {formatTruncated(claimedAmount, decimals)} {reserveLabel} —{" "}
+          Claimed {formatTruncated(claimedAmount, decimals)} {RESERVE_LABEL} —{" "}
           tx:{" "}
           <a
             href={`${EXPLORER_URL}/tx/${txHash}`}
diff --git a/src/components/DonateWidget.tsx b/src/components/DonateWidget.tsx
index 16b20d96..e8f50b47 100644
--- a/src/components/DonateWidget.tsx
+++ b/src/components/DonateWidget.tsx
@@ -7,7 +7,7 @@ import { parseUnits, formatUnits } from "viem";
 import { publicClient } from "../../lib/rpc";
 import { erc20Abi } from "../../lib/price";
 import { storyFactoryAbi } from "../../lib/contracts/abi";
-import { STORY_FACTORY, PLOT_TOKEN, IS_TESTNET, EXPLORER_URL } from "../../lib/contracts/constants";
+import { STORY_FACTORY, PLOT_TOKEN, RESERVE_LABEL, EXPLORER_URL } from "../../lib/contracts/constants";
 import { FarcasterAvatar } from "./FarcasterAvatar";
 
 type TxState = "idle" | "approving" | "confirming" | "pending" | "indexing" | "done" | "error";
@@ -26,7 +26,6 @@ export function DonateWidget({ storylineId, writerAddress }: DonateWidgetProps)
 
   const { writeContractAsync } = useWriteContract();
 
-  const reserveLabel = IS_TESTNET ? "WETH" : "$PLOT";
   const parsedAmount =
     amount && !isNaN(Number(amount)) && Number(amount) > 0
       ? parseUnits(amount, 18)
@@ -123,12 +122,12 @@ export function DonateWidget({ storylineId, writerAddress }: DonateWidgetProps)
     <section className="border-border mt-8 rounded border px-4 py-4">
       <h2 className="text-foreground text-sm font-medium">Donate to Writer</h2>
       <p className="text-muted mt-1 text-[10px]">
-        Tip the author directly with {reserveLabel}
+        Tip the author directly with {RESERVE_LABEL}
       </p>
 
       <div className="mt-3">
         <label className="text-muted block text-[10px] uppercase tracking-wider">
-          Amount ({reserveLabel})
+          Amount ({RESERVE_LABEL})
         </label>
         <div className="relative mt-1">
           <input
@@ -155,7 +154,7 @@ export function DonateWidget({ storylineId, writerAddress }: DonateWidgetProps)
         </div>
         {balance !== undefined && (
           <p className="text-muted mt-1 text-[10px]">
-            Balance: {formatUnits(balance, 18)} {reserveLabel}
+            Balance: {formatUnits(balance, 18)} {RESERVE_LABEL}
           </p>
         )}
         {insufficientBalance && (
@@ -167,7 +166,7 @@ export function DonateWidget({ storylineId, writerAddress }: DonateWidgetProps)
         <p className="text-muted mt-2 text-xs">
           Donating{" "}
           <span className="text-foreground">
-            {formatUnits(parsedAmount, 18)} {reserveLabel}
+            {formatUnits(parsedAmount, 18)} {RESERVE_LABEL}
           </span>{" "}
           to {writerAddress ? <FarcasterAvatar address={writerAddress} size={12} linkProfile={false} /> : `story #${storylineId}`}
         </p>
diff --git a/src/components/PriceChart.tsx b/src/components/PriceChart.tsx
index a94a3bf2..ba4013c7 100644
--- a/src/components/PriceChart.tsx
+++ b/src/components/PriceChart.tsx
@@ -3,7 +3,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { type Address, formatUnits } from "viem";
 import { supabase } from "../../lib/supabase";
-import { IS_TESTNET } from "../../lib/contracts/constants";
+import { RESERVE_LABEL } from "../../lib/contracts/constants";
 
 const CHART_W = 320;
 const CHART_H = 140;
@@ -36,7 +36,6 @@ function formatPrice(v: number): string {
 }
 
 export function PriceChart({ tokenAddress, currentPriceRaw }: PriceChartProps) {
-  const reserveLabel = IS_TESTNET ? "WETH" : "$PLOT";
   const currentPrice = Number(formatUnits(currentPriceRaw, 18));
 
   const { data: tradePoints } = useQuery({
@@ -81,7 +80,7 @@ export function PriceChart({ tokenAddress, currentPriceRaw }: PriceChartProps) {
           <p className="text-muted mt-2 text-[10px]">No trading activity yet</p>
           {currentPrice > 0 && (
             <p className="text-accent mt-1 text-xs font-medium">
-              {formatPrice(currentPrice)} {reserveLabel}
+              {formatPrice(currentPrice)} {RESERVE_LABEL}
             </p>
           )}
         </div>
@@ -202,9 +201,9 @@ export function PriceChart({ tokenAddress, currentPriceRaw }: PriceChartProps) {
         <circle cx={lastX} cy={lastY} r={3} fill="var(--accent)" />
       </svg>
       <p className="text-muted mt-1 text-[10px]">
-        Price per token ({reserveLabel})
+        Price per token ({RESERVE_LABEL})
         <span className="text-accent-dim">
-          {" "}&middot; latest: {formatPrice(points[lastIdx].price)} {reserveLabel}
+          {" "}&middot; latest: {formatPrice(points[lastIdx].price)} {RESERVE_LABEL}
         </span>
       </p>
     </section>
diff --git a/src/components/ReaderPortfolio.tsx b/src/components/ReaderPortfolio.tsx
index 003a7d46..f287f698 100644
--- a/src/components/ReaderPortfolio.tsx
+++ b/src/components/ReaderPortfolio.tsx
@@ -5,7 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import { formatUnits, type Address } from "viem";
 import { publicClient } from "../../lib/rpc";
 import { erc20Abi, mcv2BondAbi, get24hPriceChange, getTokenTVL } from "../../lib/price";
-import { MCV2_BOND, IS_TESTNET, STORY_FACTORY } from "../../lib/contracts/constants";
+import { MCV2_BOND, RESERVE_LABEL, STORY_FACTORY } from "../../lib/contracts/constants";
 import { supabase, type Storyline } from "../../lib/supabase";
 import Link from "next/link";
 
@@ -20,8 +20,6 @@ interface Holding {
 
 export function ReaderPortfolio() {
   const { address, isConnected } = useAccount();
-  const reserveLabel = IS_TESTNET ? "WETH" : "$PLOT";
-
   const { data: holdings, isLoading } = useQuery({
     queryKey: ["reader-portfolio", address],
     queryFn: async (): Promise<Holding[]> => {
@@ -127,7 +125,7 @@ export function ReaderPortfolio() {
                 Total Value
               </span>
               <span className="text-accent text-sm font-medium">
-                {formatUnits(totalValue, reserveDecimals)} {reserveLabel}
+                {formatUnits(totalValue, reserveDecimals)} {RESERVE_LABEL}
               </span>
             </div>
             {bestPick && bestPick.priceChange !== null && (
@@ -166,7 +164,7 @@ export function ReaderPortfolio() {
                 </div>
                 <div className="text-right">
                   <div className="text-foreground">
-                    {formatUnits(h.value, h.reserveDecimals)} {reserveLabel}
+                    {formatUnits(h.value, h.reserveDecimals)} {RESERVE_LABEL}
                   </div>
                   {h.priceChange !== null && (
                     <div
diff --git a/src/components/StoryCardStats.tsx b/src/components/StoryCardStats.tsx
index 519b675e..98b9059b 100644
--- a/src/components/StoryCardStats.tsx
+++ b/src/components/StoryCardStats.tsx
@@ -3,9 +3,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { type Address } from "viem";
 import { getTokenTVL, getTokenPrice } from "../../lib/price";
-import { IS_TESTNET } from "../../lib/contracts/constants";
-
-const reserveLabel = IS_TESTNET ? "WETH" : "$PLOT";
+import { RESERVE_LABEL } from "../../lib/contracts/constants";
 
 function formatCompact(value: string): string {
   const num = parseFloat(value);
@@ -41,8 +39,8 @@ export function StoryCardStats({ tokenAddress }: { tokenAddress: string }) {
 
   return (
     <div className="text-muted flex flex-wrap gap-x-3 gap-y-0.5 text-[10px]">
-      <span>Price: <span className="text-foreground">{price} {reserveLabel}</span></span>
-      <span>TVL: <span className="text-foreground">{tvl} {reserveLabel}</span></span>
+      <span>Price: <span className="text-foreground">{price} {RESERVE_LABEL}</span></span>
+      <span>TVL: <span className="text-foreground">{tvl} {RESERVE_LABEL}</span></span>
     </div>
   );
 }
@@ -60,6 +58,6 @@ export function StoryCardTVL({ tokenAddress }: { tokenAddress: string }) {
   const tvl = tvlData ? formatCompact(tvlData.tvl) : "—";
 
   return (
-    <span>TVL: <span className="text-foreground">{tvl} {reserveLabel}</span></span>
+    <span>TVL: <span className="text-foreground">{tvl} {RESERVE_LABEL}</span></span>
   );
 }
diff --git a/src/components/TradingWidget.tsx b/src/components/TradingWidget.tsx
index 917608db..5b59eed2 100644
--- a/src/components/TradingWidget.tsx
+++ b/src/components/TradingWidget.tsx
@@ -6,7 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import { parseUnits, formatUnits, type Address } from "viem";
 import { publicClient } from "../../lib/rpc";
 import { mcv2BondAbi, erc20Abi } from "../../lib/price";
-import { MCV2_BOND, PLOT_TOKEN, IS_TESTNET, EXPLORER_URL } from "../../lib/contracts/constants";
+import { MCV2_BOND, PLOT_TOKEN, RESERVE_LABEL, EXPLORER_URL } from "../../lib/contracts/constants";
 
 type Tab = "buy" | "sell";
 type TxState = "idle" | "approving" | "confirming" | "pending" | "done" | "error";
@@ -32,7 +32,6 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
 
   const { writeContractAsync } = useWriteContract();
 
-  const reserveLabel = IS_TESTNET ? "WETH" : "$PLOT";
   const parsedAmount =
     amount && !isNaN(Number(amount)) && Number(amount) > 0
       ? parseUnits(amount, 18)
@@ -242,7 +241,7 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
         </div>
         {balance !== undefined && (
           <p className="text-muted mt-1 text-[10px]">
-            Balance: {formatUnits(balance, 18)} {tab === "buy" ? reserveLabel : "tokens"}
+            Balance: {formatUnits(balance, 18)} {tab === "buy" ? RESERVE_LABEL : "tokens"}
           </p>
         )}
         {insufficientBalance && (
@@ -255,7 +254,7 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
         <div className="text-muted mt-2 text-xs">
           {tab === "buy" ? "Estimated cost" : "Estimated return"}:{" "}
           <span className="text-foreground">
-            {formatUnits(estimate, 18)} {reserveLabel}
+            {formatUnits(estimate, 18)} {RESERVE_LABEL}
           </span>
           <span className="ml-2">(3% slippage tolerance)</span>
         </div>
diff --git a/src/components/WriterTradingStats.tsx b/src/components/WriterTradingStats.tsx
index b87ba34e..369cb6e7 100644
--- a/src/components/WriterTradingStats.tsx
+++ b/src/components/WriterTradingStats.tsx
@@ -4,7 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import { formatUnits, type Address } from "viem";
 import { publicClient } from "../../lib/rpc";
 import { mcv2BondAbi, getTokenTVL } from "../../lib/price";
-import { MCV2_BOND, IS_TESTNET } from "../../lib/contracts/constants";
+import { MCV2_BOND, RESERVE_LABEL } from "../../lib/contracts/constants";
 import type { Storyline } from "../../lib/supabase";
 
 interface WriterTradingStatsProps {
@@ -13,8 +13,6 @@ interface WriterTradingStatsProps {
 
 export function WriterTradingStats({ storyline }: WriterTradingStatsProps) {
   const tokenAddress = storyline.token_address as Address;
-  const reserveLabel = IS_TESTNET ? "WETH" : "$PLOT";
-
   // Fetch token price
   const { data: price } = useQuery({
     queryKey: ["writer-price", tokenAddress],
@@ -46,7 +44,7 @@ export function WriterTradingStats({ storyline }: WriterTradingStatsProps) {
           Token Price
         </span>
         <span className="text-foreground">
-          {price !== undefined && decimals !== undefined ? `${formatUnits(BigInt(price), decimals)} ${reserveLabel}` : "—"}
+          {price !== undefined && decimals !== undefined ? `${formatUnits(BigInt(price), decimals)} ${RESERVE_LABEL}` : "—"}
         </span>
       </div>
       <div>
@@ -54,7 +52,7 @@ export function WriterTradingStats({ storyline }: WriterTradingStatsProps) {
           TVL
         </span>
         <span className="text-foreground">
-          {tvlData ? `${tvlData.tvl} ${reserveLabel}` : "—"}
+          {tvlData ? `${tvlData.tvl} ${RESERVE_LABEL}` : "—"}
         </span>
       </div>
     </div>