Fix mobile wallet browser crash: reduce refresh storm after trade signing

- OrderForm: reduce refreshTradeState from 4 rounds to 2 (immediate + 3s),
  add AbortController to cancel on unmount/re-trigger, delay order-placed
  event by 1s to avoid overlapping with balance refresh
- WalletButton: debounce (200ms) all refresh-header-balance and order-placed
  event listeners to coalesce rapid-fire events into single requests
- TradeModal: remove currentPrice from modal key to prevent remount on every
  price update (root cause of "page refresh" feel after wallet signing)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: AmazingAng

src/components/OrderForm.tsx

@@ -317,17 +317,23 @@ export default function OrderForm({
     }
   }, [optimisticSharesHeld, sharesHeld]);
 
+  const refreshAbortRef = useRef<AbortController | null>(null);
   const refreshTradeState = useCallback(async () => {
-    const delays = [500, 2000, 5000];
+    refreshAbortRef.current?.abort();
+    const ac = new AbortController();
+    refreshAbortRef.current = ac;
+    notifyHeaderBalanceRefresh();
+    await Promise.allSettled([refetchShares(), refetchUsdcBalance()]);
+    await sleep(3000);
+    if (ac.signal.aborted) return;
     notifyHeaderBalanceRefresh();
     await Promise.allSettled([refetchShares(), refetchUsdcBalance()]);
-    for (const delay of delays) {
-      await sleep(delay);
-      notifyHeaderBalanceRefresh();
-      await Promise.allSettled([refetchShares(), refetchUsdcBalance()]);
-    }
   }, [refetchShares, refetchUsdcBalance]);
 
+  useEffect(() => {
+    return () => { refreshAbortRef.current?.abort(); };
+  }, []);
+
   const handleEOAApprove = useCallback(async () => {
     if (!address) return;
     const exchangeAddr = negRisk ? NEG_RISK_EXCHANGE_ADDR : EXCHANGE_ADDRESS;
@@ -508,7 +514,9 @@ export default function OrderForm({
       }
       void refreshTradeState();
       if (typeof window !== "undefined") {
-        window.dispatchEvent(new CustomEvent("polyworld:order-placed"));
+        setTimeout(() => {
+          window.dispatchEvent(new CustomEvent("polyworld:order-placed"));
+        }, 1000);
       }
       addTradeToast(
         "success",

src/components/TradeModal.tsx

@@ -203,7 +203,6 @@ interface TradeModalProps {
 export default function TradeModal({ state, onClose }: TradeModalProps) {
   const modalKey = [
     state.tokenId,
-    state.currentPrice,
     state.outcomeName,
     state.defaultSide,
     state.marketTitle,

src/components/WalletButton.tsx

@@ -336,10 +336,14 @@ export default function WalletButton({ onRefresh, loading, lastSyncTime, onTrade
     fetchBal();
     fetchPortfolio();
     const iv = setInterval(() => { void fetchBal(); void fetchPortfolio(); }, 30_000);
-    // Force bypass server cache when triggered by trade completion
-    const onRefreshEv = () => { void fetchBal(true); void fetchPortfolio(); };
+    // Force bypass server cache when triggered by trade completion (debounced 200ms)
+    let refreshTimer: ReturnType<typeof setTimeout> | null = null;
+    const onRefreshEv = () => {
+      if (refreshTimer) clearTimeout(refreshTimer);
+      refreshTimer = setTimeout(() => { void fetchBal(true); void fetchPortfolio(); }, 200);
+    };
     window.addEventListener("polyworld:refresh-header-balance", onRefreshEv);
-    return () => { cancelled = true; clearInterval(iv); window.removeEventListener("polyworld:refresh-header-balance", onRefreshEv); };
+    return () => { cancelled = true; clearInterval(iv); if (refreshTimer) clearTimeout(refreshTimer); window.removeEventListener("polyworld:refresh-header-balance", onRefreshEv); };
   }, [effectiveProxy]);
 
   // Fetch positions for portfolio hover dropdown
@@ -387,9 +391,13 @@ export default function WalletButton({ onRefresh, loading, lastSyncTime, onTrade
     };
     fetchPositions();
     const iv = setInterval(fetchPositions, 30_000);
-    const onRefreshPositions = () => { void fetchPositions(); };
+    let posTimer: ReturnType<typeof setTimeout> | null = null;
+    const onRefreshPositions = () => {
+      if (posTimer) clearTimeout(posTimer);
+      posTimer = setTimeout(() => { void fetchPositions(); }, 200);
+    };
     window.addEventListener("polyworld:refresh-header-balance", onRefreshPositions);
-    return () => { cancelled = true; clearInterval(iv); window.removeEventListener("polyworld:refresh-header-balance", onRefreshPositions); };
+    return () => { cancelled = true; clearInterval(iv); if (posTimer) clearTimeout(posTimer); window.removeEventListener("polyworld:refresh-header-balance", onRefreshPositions); };
   }, [effectiveProxy]);
 
   // Fetch open orders for portfolio hover dropdown
@@ -404,9 +412,13 @@ export default function WalletButton({ onRefresh, loading, lastSyncTime, onTrade
     };
     fetchOrders();
     const iv = setInterval(fetchOrders, 15_000);
-    const onOrderPlaced = () => { void fetchOrders(); };
+    let orderTimer: ReturnType<typeof setTimeout> | null = null;
+    const onOrderPlaced = () => {
+      if (orderTimer) clearTimeout(orderTimer);
+      orderTimer = setTimeout(() => { void fetchOrders(); }, 200);
+    };
     window.addEventListener("polyworld:order-placed", onOrderPlaced);
-    return () => { cancelled = true; clearInterval(iv); window.removeEventListener("polyworld:order-placed", onOrderPlaced); };
+    return () => { cancelled = true; clearInterval(iv); if (orderTimer) clearTimeout(orderTimer); window.removeEventListener("polyworld:order-placed", onOrderPlaced); };
   }, [effectiveProxy, tradeSession?.sessionToken]);
 
   const handleCancelOrder = useCallback(async (orderId: string) => {