Function OrderForm

src/components/OrderForm.tsx:118–1210

({
  tokenId,
  currentPrice = 0.5,
  outcomeName = "YES",
  negRisk = false,
  defaultSide = "BUY",
  compact = false,
  autoFocusAmount = false,
  onSuccess,
}: OrderFormProps)

type Side = "BUY" | "SELL";

export default function OrderForm({
  tokenId,
  currentPrice = 0.5,
  outcomeName = "YES",
  negRisk = false,
  defaultSide = "BUY",
  compact = false,
  autoFocusAmount = false,
  onSuccess,
}: OrderFormProps) {
  const { t } = useI18n();
  const amountInputRef = useRef<HTMLInputElement>(null);
  const BUY_PRESETS = [-100, 100, 1000] as const;
  const SELL_PRESETS = [10, 25, 50, 100] as const;
  const { address, isConnected, chainId } = useAccount();
  const { connect, connectors } = useConnect();
  const { signTypedDataAsync } = useSignTypedData();
  const { signMessageAsync } = useSignMessage();
  const { data: walletClient } = useWalletClient();
  const { writeContractAsync } = useWriteContract();

  const { tradeSession, setTradeSession, setWallet, proxyAddress } = useWalletStore();
  const addTradeToast = useToastStore((s) => s.addTradeToast);

  const [side, setSide] = useState<Side>(defaultSide);
  const [price, setPrice] = useState(currentPrice.toFixed(2));
  const [amount, setAmount] = useState("");
  const [limitOnly, setLimitOnly] = useState(false);
  const isMarketOrder = !limitOnly;
  const [status, setStatus] = useState<"idle" | "authorizing" | "approving" | "signing" | "submitting" | "done" | "error">("idle");
  const [errorMsg, setErrorMsg] = useState<string | null>(null);
  const [orderId, setOrderId] = useState<string | null>(null);
  const [minOrderShares, setMinOrderShares] = useState(5);
  const [tickSize, setTickSize] = useState(0.01);
  const [optimisticSharesHeld, setOptimisticSharesHeld] = useState<number | null>(null);
  const [ctfApprovalFallback, setCtfApprovalFallback] = useState(false);
  const [quotedMarketPrice, setQuotedMarketPrice] = useState<number | null>(null);   // execution price (display)
  const [quotedLimitPrice, setQuotedLimitPrice] = useState<number | null>(null);     // buffered limit price (order submission)
  const quotedAtRef = useRef<number | null>(null);
  const [quoteRefreshKey, setQuoteRefreshKey] = useState(0);

  const priceDecimals = useMemo(() => tickSize <= 0.001 ? 3 : tickSize <= 0.01 ? 2 : 1, [tickSize]);
  const centsStep = useMemo(() => tickSize * 100, [tickSize]);
  const centsDecimals = useMemo(() => Math.max(0, priceDecimals - 2), [priceDecimals]);
  const minPrice = tickSize;
  const maxPrice = 1 - tickSize;

  useEffect(() => { setPrice(currentPrice.toFixed(priceDecimals)); }, [currentPrice, priceDecimals]);
  // Reset state when the traded token changes; also clear stale orderbook prices
  useEffect(() => {
    setSide(defaultSide); setAmount(""); setStatus("idle"); setErrorMsg(null); setCtfApprovalFallback(false);
  }, [tokenId, defaultSide]);

  // Fetch market-specific minimum order size from CLOB (via orderbook API)
  useEffect(() => {
    if (!tokenId) return;
    fetch(`/api/orderbook?tokenId=${tokenId}`)
      .then(r => r.ok ? r.json() : null)