Function MiniOrderBook

src/components/TradeModal.tsx:88–194

({ tokenId, currentPrice, compact }: { tokenId: string; currentPrice: number; compact?: boolean })

}

function MiniOrderBook({ tokenId, currentPrice, compact }: { tokenId: string; currentPrice: number; compact?: boolean }) {
  const { t } = useI18n();
  const [book, setBook] = useState<BookData | null>(null);
  const [loading, setLoading] = useState(true);
  const abortRef = useRef<AbortController | null>(null);

  useEffect(() => {
    let cancelled = false;

    const fetchLatest = async () => {
      abortRef.current?.abort();
      const ac = new AbortController();
      abortRef.current = ac;
      try {
        const data = await loadOrderBook(tokenId, ac.signal);
        if (!cancelled && !ac.signal.aborted) {
          setBook(data);
          setLoading(false);
        }
      } catch {
        // aborted or network error
      }
    };

    void fetchLatest();
    const iv = setInterval(() => {
      void fetchLatest();
    }, 5_000);

    return () => {
      cancelled = true;
      clearInterval(iv);
      abortRef.current?.abort();
    };
  }, [tokenId]);

  // Compute cumulative sizes for depth bars
  const ROWS = 8;
  const asks = useMemo(() => {
    if (!book?.asks?.length) return [];
    const sorted = [...book.asks].sort((a, b) => a.price - b.price).slice(0, ROWS);
    let cum = 0;
    return sorted.map(l => { cum += l.size; return { ...l, cum }; });
  }, [book]);

  const bids = useMemo(() => {
    if (!book?.bids?.length) return [];
    const sorted = [...book.bids].sort((a, b) => b.price - a.price).slice(0, ROWS);
    let cum = 0;
    return sorted.map(l => { cum += l.size; return { ...l, cum }; });
  }, [book]);

  const maxCum = Math.max(asks[asks.length - 1]?.cum ?? 0, bids[bids.length - 1]?.cum ?? 0) || 1;
  const spread = asks[0] && bids[0] ? ((asks[0].price - bids[0].price) * 100).toFixed(1) : null;

  if (loading) return (
    <div className="flex items-center justify-center h-full text-[var(--text-dim)] text-[10px]">{t("common.loading")}</div>
  );