From d135b794c6b31fc4c63ec927fc597db71b3e0d8f Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 27 Mar 2026 17:33:11 +0000
Subject: [PATCH] [#301] Clean up token page and show USD balance

Remove the "How to Get PLOT" section. Add USD equivalent below the
PLOT balance amount using the existing token price data from
useTokenInfo(). Only shown when balance > 0 and price is available.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/token/page.tsx | 33 ++++++++-------------------------
 1 file changed, 8 insertions(+), 25 deletions(-)

diff --git a/src/app/token/page.tsx b/src/app/token/page.tsx
index 93e2d29a..1a40ed06 100644
--- a/src/app/token/page.tsx
+++ b/src/app/token/page.tsx
@@ -75,6 +75,14 @@ export default function TokenPage() {
               })}{" "}
               <span className="text-background/80">PLOT</span>
             </div>
+            {tokenInfo?.price && parseFloat(formattedBalance) > 0 && (
+              <div className="text-background/60 mt-1 text-sm">
+                ${(parseFloat(formattedBalance) * tokenInfo.price).toLocaleString(undefined, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })} USD
+              </div>
+            )}
           </div>
         )}
       </div>
@@ -107,31 +115,6 @@ export default function TokenPage() {
       {/* Swap Interface */}
       <SwapInterface />
 
-      {/* How to Get PLOT */}
-      <div className="border-border rounded border p-5">
-        <h3 className="text-foreground text-sm font-bold mb-3">How to Get PLOT</h3>
-        <div className="space-y-2">
-          <div className="flex items-start gap-3">
-            <span className="text-accent text-sm">&#8226;</span>
-            <p className="text-muted text-sm">
-              <span className="text-foreground font-semibold">Buy via Mint Club</span> — purchase PLOT on the bonding curve using HUNT tokens.
-            </p>
-          </div>
-          <div className="flex items-start gap-3">
-            <span className="text-accent text-sm">&#8226;</span>
-            <p className="text-muted text-sm">
-              <span className="text-foreground font-semibold">Sell story tokens</span> — selling any storyline token returns PLOT to your wallet.
-            </p>
-          </div>
-          <div className="flex items-start gap-3">
-            <span className="text-accent text-sm">&#8226;</span>
-            <p className="text-muted text-sm">
-              <span className="text-foreground font-semibold">Use the Zap</span> — buy story tokens with ETH or HUNT and the zap contract handles PLOT conversion automatically.
-            </p>
-          </div>
-        </div>
-      </div>
-
       {/* Token Information */}
       <div className="border-border rounded border p-5">
         <h3 className="text-foreground text-sm font-bold mb-4">Token Information</h3>