Function TradeModalContent

src/components/TradeModal.tsx:214–545

({ state, onClose }: TradeModalProps)

}

function TradeModalContent({ state, onClose }: TradeModalProps) {
  const { t } = useI18n();
  const hasYesNo = !!(state.yesToken && state.noToken);

  const [activeTokenId, setActiveTokenId] = useState(state.tokenId);
  const [activePrice, setActivePrice] = useState(state.currentPrice);
  const [activeName, setActiveName] = useState(state.outcomeName);
  const [orderPlaced, setOrderPlaced] = useState(false);
  const [recentOrders, setRecentOrders] = useState<RecentOrder[]>(() => loadRecentOrders());
  const [activeOpenOrders, setActiveOpenOrders] = useState<OpenOrder[]>([]);
  const [cancellingOrderId, setCancellingOrderId] = useState<string | null>(null);

  // Read share balances for Yes/No tokens
  const CTF_ADDRESS = "0x4D97DCd97eC945f40cF65F87097ACe5EA0476045" as const;
  const CTF_BALANCE_ABI = [{ name: "balanceOf", type: "function", stateMutability: "view", inputs: [{ name: "account", type: "address" }, { name: "id", type: "uint256" }], outputs: [{ name: "", type: "uint256" }] }] as const;
  const { proxyAddress, address, isConnected, tradeSession } = useWalletStore();
  const balanceTarget = (proxyAddress ?? address) as `0x${string}` | undefined;

  const handleKey = useCallback(
    (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); },
    [onClose]
  );
  useEffect(() => {
    document.addEventListener("keydown", handleKey);
    return () => document.removeEventListener("keydown", handleKey);
  }, [handleKey]);

  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => { setIsMobile(window.innerWidth <= 768); }, []);

  // On mobile, scroll focused inputs into view when virtual keyboard opens
  const modalRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const el = modalRef.current;
    if (!el) return;
    const handleFocusIn = (e: FocusEvent) => {
      if (window.innerWidth > 500) return; // desktop — no virtual keyboard
      const target = e.target;
      if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
        setTimeout(() => {
          // Only scroll if keyboard actually shrunk the viewport
          const vv = window.visualViewport;
          if (vv && vv.height < window.innerHeight * 0.85) {
            target.scrollIntoView({ behavior: "smooth", block: "center" });
          }
        }, 300); // wait for keyboard animation
      }
    };
    el.addEventListener("focusin", handleFocusIn);
    return () => el.removeEventListener("focusin", handleFocusIn);
  }, []);

  const handleSuccess = useCallback((info: { side: string; amount: number; price: number }) => {
    setOrderPlaced(true);
    const newOrder: RecentOrder = {
      id: `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
      side: info.side,
      outcome: activeName,