From c5d107ce3190c353c0d3a6e9a84f0f858de3ca5b Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Mon, 16 Mar 2026 12:08:41 +0000
Subject: [PATCH 1/2] [#159] Add balance display, validation, and MAX button to
 Trade/Donate

- Show relevant token balance below input (reserve for buy/donate, storyline token for sell)
- Inline "Insufficient balance" error when amount exceeds balance, button disabled
- MAX button fills input with full available balance
- Balance auto-refreshes every 15s and after each successful transaction

Fixes #159

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/DonateWidget.tsx  | 67 ++++++++++++++++++++++-------
 src/components/TradingWidget.tsx | 72 +++++++++++++++++++++++++-------
 2 files changed, 111 insertions(+), 28 deletions(-)

diff --git a/src/components/DonateWidget.tsx b/src/components/DonateWidget.tsx
index 247b8926..c3374521 100644
--- a/src/components/DonateWidget.tsx
+++ b/src/components/DonateWidget.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useCallback } from "react";
 import { useAccount, useWriteContract } from "wagmi";
+import { useQuery } from "@tanstack/react-query";
 import { parseUnits, formatUnits } from "viem";
 import { publicClient } from "../../lib/rpc";
 import { erc20Abi } from "../../lib/price";
@@ -29,6 +30,24 @@ export function DonateWidget({ storylineId }: DonateWidgetProps) {
       ? parseUnits(amount, 18)
       : BigInt(0);
 
+  // Fetch reserve token balance
+  const { data: balance, refetch: refetchBalance } = useQuery({
+    queryKey: ["token-balance", PLOT_TOKEN, address],
+    queryFn: async () => {
+      return publicClient.readContract({
+        address: PLOT_TOKEN,
+        abi: erc20Abi,
+        functionName: "balanceOf",
+        args: [address!],
+      });
+    },
+    enabled: !!address,
+    refetchInterval: 15000,
+  });
+
+  const insufficientBalance =
+    balance !== undefined && parsedAmount > BigInt(0) && parsedAmount > balance;
+
   const executeDonate = useCallback(async () => {
     if (!address || parsedAmount === BigInt(0)) return;
 
@@ -82,11 +101,12 @@ export function DonateWidget({ storylineId }: DonateWidgetProps) {
 
       setTxState("done");
       setAmount("");
+      refetchBalance();
     } catch (err) {
       setError(err instanceof Error ? err.message : "Transaction failed");
       setTxState("error");
     }
-  }, [address, parsedAmount, storylineId, writeContractAsync]);
+  }, [address, parsedAmount, storylineId, writeContractAsync, refetchBalance]);
 
   const reset = useCallback(() => {
     setTxState("idle");
@@ -107,18 +127,37 @@ export function DonateWidget({ storylineId }: DonateWidgetProps) {
         <label className="text-muted block text-[10px] uppercase tracking-wider">
           Amount ({reserveLabel})
         </label>
-        <input
-          type="text"
-          inputMode="decimal"
-          placeholder="0.0"
-          value={amount}
-          onChange={(e) => {
-            setAmount(e.target.value);
-            if (txState !== "idle") reset();
-          }}
-          disabled={txState !== "idle" && txState !== "error" && txState !== "done"}
-          className="border-border bg-background text-foreground mt-1 w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
-        />
+        <div className="relative mt-1">
+          <input
+            type="text"
+            inputMode="decimal"
+            placeholder="0.0"
+            value={amount}
+            onChange={(e) => {
+              setAmount(e.target.value);
+              if (txState !== "idle") reset();
+            }}
+            disabled={txState !== "idle" && txState !== "error" && txState !== "done"}
+            className="border-border bg-background text-foreground w-full rounded border px-3 py-2 pr-14 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
+          />
+          {balance !== undefined && (
+            <button
+              type="button"
+              onClick={() => setAmount(formatUnits(balance, 18))}
+              className="text-accent hover:text-foreground absolute right-2 top-1/2 -translate-y-1/2 text-[10px] font-bold"
+            >
+              MAX
+            </button>
+          )}
+        </div>
+        {balance !== undefined && (
+          <p className="text-muted mt-1 text-[10px]">
+            Balance: {formatUnits(balance, 18)} {reserveLabel}
+          </p>
+        )}
+        {insufficientBalance && (
+          <p className="mt-1 text-[10px] text-red-400">Insufficient balance</p>
+        )}
       </div>
 
       {parsedAmount > BigInt(0) && (
@@ -134,7 +173,7 @@ export function DonateWidget({ storylineId }: DonateWidgetProps) {
       <button
         onClick={txState === "done" || txState === "error" ? reset : executeDonate}
         disabled={
-          (txState === "idle" && parsedAmount === BigInt(0)) ||
+          (txState === "idle" && (parsedAmount === BigInt(0) || insufficientBalance)) ||
           (txState !== "idle" && txState !== "done" && txState !== "error")
         }
         className="bg-accent text-background mt-3 w-full rounded py-2 text-xs font-medium transition-opacity disabled:opacity-40"
diff --git a/src/components/TradingWidget.tsx b/src/components/TradingWidget.tsx
index 4d26b9a8..89d6a91f 100644
--- a/src/components/TradingWidget.tsx
+++ b/src/components/TradingWidget.tsx
@@ -38,6 +38,22 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
       ? parseUnits(amount, 18)
       : BigInt(0);
 
+  // Fetch relevant balance: reserve token for buy, storyline token for sell
+  const balanceToken = tab === "buy" ? PLOT_TOKEN : tokenAddress;
+  const { data: balance, refetch: refetchBalance } = useQuery({
+    queryKey: ["token-balance", balanceToken, address],
+    queryFn: async () => {
+      return publicClient.readContract({
+        address: balanceToken,
+        abi: erc20Abi,
+        functionName: "balanceOf",
+        args: [address!],
+      });
+    },
+    enabled: !!address,
+    refetchInterval: 15000,
+  });
+
   // Fetch price estimate
   const { data: estimate } = useQuery({
     queryKey: ["trade-estimate", tab, tokenAddress, amount],
@@ -135,11 +151,12 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
 
       setTxState("done");
       setAmount("");
+      refetchBalance();
     } catch (err) {
       setError(err instanceof Error ? err.message : "Transaction failed");
       setTxState("error");
     }
-  }, [address, parsedAmount, estimate, tab, tokenAddress, writeContractAsync]);
+  }, [address, parsedAmount, estimate, tab, tokenAddress, writeContractAsync, refetchBalance]);
 
   const reset = useCallback(() => {
     setTxState("idle");
@@ -147,6 +164,14 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
     setTxHash(null);
   }, []);
 
+  // Pre-validate balance
+  const insufficientBalance =
+    balance !== undefined &&
+    parsedAmount > BigInt(0) &&
+    (tab === "buy"
+      ? estimate != null && applySlippage(estimate, true) > balance
+      : parsedAmount > balance);
+
   if (!isConnected) return null;
 
   return (
@@ -179,18 +204,37 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
         <label className="text-muted block text-[10px] uppercase tracking-wider">
           {tab === "buy" ? "Tokens to buy" : "Tokens to sell"}
         </label>
-        <input
-          type="text"
-          inputMode="decimal"
-          placeholder="0.0"
-          value={amount}
-          onChange={(e) => {
-            setAmount(e.target.value);
-            if (txState !== "idle") reset();
-          }}
-          disabled={txState !== "idle" && txState !== "error" && txState !== "done"}
-          className="border-border bg-background text-foreground mt-1 w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
-        />
+        <div className="relative mt-1">
+          <input
+            type="text"
+            inputMode="decimal"
+            placeholder="0.0"
+            value={amount}
+            onChange={(e) => {
+              setAmount(e.target.value);
+              if (txState !== "idle") reset();
+            }}
+            disabled={txState !== "idle" && txState !== "error" && txState !== "done"}
+            className="border-border bg-background text-foreground w-full rounded border px-3 py-2 pr-14 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
+          />
+          {balance !== undefined && (
+            <button
+              type="button"
+              onClick={() => setAmount(formatUnits(balance, 18))}
+              className="text-accent hover:text-foreground absolute right-2 top-1/2 -translate-y-1/2 text-[10px] font-bold"
+            >
+              MAX
+            </button>
+          )}
+        </div>
+        {balance !== undefined && (
+          <p className="text-muted mt-1 text-[10px]">
+            Balance: {formatUnits(balance, 18)} {tab === "buy" ? reserveLabel : "tokens"}
+          </p>
+        )}
+        {insufficientBalance && (
+          <p className="mt-1 text-[10px] text-red-400">Insufficient balance</p>
+        )}
       </div>
 
       {/* Estimate */}
@@ -208,7 +252,7 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
       <button
         onClick={txState === "done" || txState === "error" ? reset : executeTrade}
         disabled={
-          (txState === "idle" && (parsedAmount === BigInt(0) || !estimate)) ||
+          (txState === "idle" && (parsedAmount === BigInt(0) || !estimate || insufficientBalance)) ||
           (txState !== "idle" && txState !== "done" && txState !== "error")
         }
         className="bg-accent text-background mt-3 w-full rounded py-2 text-xs font-medium transition-opacity disabled:opacity-40"

From 7e8f55c196b658704bd6a341f39c6427fb3cd158 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Mon, 16 Mar 2026 12:10:28 +0000
Subject: [PATCH 2/2] =?UTF-8?q?[#159]=20Hide=20MAX=20button=20on=20Buy=20t?=
 =?UTF-8?q?ab=20=E2=80=94=20unit=20mismatch=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MAX on Buy would fill "tokens to buy" with reserve token balance
(wrong unit). MAX only shown on Sell tab where input and balance
share the same unit (storyline tokens).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/TradingWidget.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TradingWidget.tsx b/src/components/TradingWidget.tsx
index 89d6a91f..ed7904cd 100644
--- a/src/components/TradingWidget.tsx
+++ b/src/components/TradingWidget.tsx
@@ -215,9 +215,9 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
               if (txState !== "idle") reset();
             }}
             disabled={txState !== "idle" && txState !== "error" && txState !== "done"}
-            className="border-border bg-background text-foreground w-full rounded border px-3 py-2 pr-14 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
+            className={`border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50 ${tab === "sell" ? "pr-14" : ""}`}
           />
-          {balance !== undefined && (
+          {tab === "sell" && balance !== undefined && (
             <button
               type="button"
               onClick={() => setAmount(formatUnits(balance, 18))}