From 689f75620573dcd874c2683fa51a69035177918f Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 3 Apr 2026 09:11:43 +0100
Subject: [PATCH 1/2] [#789] Format balance and est. cost values in trading
 widget

Add formatTokenAmount() helper with precision rules:
- >= 1: 2 decimals with thousands separators (e.g. 5,034.43)
- >= 0.001: 4 decimals (e.g. 0.0033)
- < 0.001: 6 decimals (e.g. 0.000001)

Applied to all balance displays and estimate cost/return values
across ETH, USDC, HUNT, and PLOT modes.

Fixes #789

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

diff --git a/src/components/TradingWidget.tsx b/src/components/TradingWidget.tsx
index 232df269..873ceb28 100644
--- a/src/components/TradingWidget.tsx
+++ b/src/components/TradingWidget.tsx
@@ -28,6 +28,19 @@ function applySlippage(amount: bigint, isBuy: boolean): bigint {
 
 const isZapAvailable = ZAP_PLOTLINK !== "0x0000000000000000000000000000000000000000";
 
+/** Format a raw bigint token amount for display with appropriate precision. */
+function formatTokenAmount(value: bigint, decimals: number): string {
+  const num = Number(formatUnits(value, decimals));
+  if (num === 0) return "0";
+  if (num >= 1) {
+    return num.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  }
+  if (num >= 0.001) {
+    return num.toFixed(4);
+  }
+  return num.toFixed(6);
+}
+
 /** Retry a writeContractAsync call once if it fails with a nonce error. */
 async function retryOnNonceError<T>(fn: () => Promise<T>): Promise<T> {
   try {
@@ -499,7 +512,7 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
           </div>
           {balance !== undefined && (
             <p className="text-muted mt-1 text-[10px]">
-              Balance: {formatUnits(balance, balanceDecimals)} {balanceLabel}
+              Balance: {formatTokenAmount(balance, balanceDecimals)} {balanceLabel}
             </p>
           )}
           {insufficientBalance && (
@@ -548,7 +561,7 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
         {/* Balance for sell tab and non-zap buy (PLOT direct) */}
         {(tab === "sell" || !isZapAvailable) && balance !== undefined && (
           <p className="text-muted mt-1 text-[10px]">
-            Balance: {formatUnits(balance, balanceDecimals)} {balanceLabel}
+            Balance: {formatTokenAmount(balance, balanceDecimals)} {balanceLabel}
           </p>
         )}
         {(tab === "sell" || !isZapAvailable) && insufficientBalance && (
@@ -561,7 +574,7 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
         <div className="text-muted mt-2 text-xs">
           Est. cost:{" "}
           <span className="font-semibold text-accent">
-            {formatUnits(zapQuote.fromTokenAmount, estimateDecimals)} {payToken}
+            {formatTokenAmount(zapQuote.fromTokenAmount, estimateDecimals)} {payToken}
           </span>
           <span className="ml-2">(incl. 3% slippage)</span>
         </div>
@@ -570,7 +583,7 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {
         <div className="text-muted mt-2 text-xs">
           {tab === "buy" ? "Max cost" : "Min return"}:{" "}
           <span className="font-semibold text-accent">
-            {formatUnits(applySlippage(estimate, tab === "buy"), 18)} {RESERVE_LABEL}
+            {formatTokenAmount(applySlippage(estimate, tab === "buy"), 18)} {RESERVE_LABEL}
           </span>
           <span className="ml-2">(incl. 3% slippage)</span>
         </div>

From 057a06933ec2ef4adb0361dd3bee23a207ddd75c Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 3 Apr 2026 09:13:41 +0100
Subject: [PATCH 2/2] [#789] Use scientific notation for sub-microscoptic
 values

Values below 0.000001 now use toExponential(2) instead of toFixed(6)
to prevent rendering as "0.000000". Consistent with existing
toExponential usage in lib/format.ts.

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

diff --git a/src/components/TradingWidget.tsx b/src/components/TradingWidget.tsx
index 873ceb28..be0c427e 100644
--- a/src/components/TradingWidget.tsx
+++ b/src/components/TradingWidget.tsx
@@ -38,7 +38,10 @@ function formatTokenAmount(value: bigint, decimals: number): string {
   if (num >= 0.001) {
     return num.toFixed(4);
   }
-  return num.toFixed(6);
+  if (num >= 0.000001) {
+    return num.toFixed(6);
+  }
+  return num.toExponential(2);
 }
 
 /** Retry a writeContractAsync call once if it fails with a nonce error. */