Order Book

1import { cn } from "@/lib/utils";
2 
3interface OrderBookProps {
4  bids: {
5    price: number;
6    size: number;
7  }[];
8  asks: {
9    price: number;
10    size: number;
11  }[];
12  className?: string;
13}
14 
15const formatSize = (value: number) => {
16  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(2)}M`;
17  if (value >= 1_000) return `${(value / 1_000).toFixed(0)}K`;
18  return value.toFixed(0);
19};
20 
21const OrderBook = ({ bids, asks, className }: OrderBookProps) => {
22  if (bids.length === 0 && asks.length === 0) return null;
23 
24  const highestBid = bids[0]?.price ?? 0;
25  const lowestAsk = asks[0]?.price ?? 0;
26  const midPrice =
27    bids.length > 0 && asks.length > 0
28      ? (highestBid + lowestAsk) / 2
29      : highestBid || lowestAsk;
30  const spread = lowestAsk - highestBid;
31  const spreadPercent = highestBid > 0 ? (spread / highestBid) * 100 : 0;
32 
33  let cumulativeBidSize = 0;
34  const bidTotals = bids.map((bid) => {
35    cumulativeBidSize += bid.size;
36    return cumulativeBidSize;
37  });
38 
39  let cumulativeAskSize = 0;
40  const askTotals = asks.map((ask) => {
41    cumulativeAskSize += ask.size;
42    return cumulativeAskSize;
43  });
44 
45  const maxTotal = Math.max(
46    bidTotals[bidTotals.length - 1] || 0,
47    askTotals[askTotals.length - 1] || 0,
48  );
49 
50  const reversedAsks = [...asks].reverse();
51  const reversedAskTotals = [...askTotals].reverse();
52 
53  return (
54    <div
55      className={cn(
56        "w-full flex flex-col overflow-hidden rounded-lg border bg-card text-card-foreground",
57        className,
58      )}
59    >
60      {/* Column headers */}
61      <div className="grid grid-cols-3 px-3 py-2 text-xs text-muted-foreground border-b">
62        <span>Price</span>
63        <span className="text-right">Size</span>
64        <span className="text-right">Total</span>
65      </div>
66 
67      {/* Asks (reversed so lowest ask is at bottom, near spread) */}
68      <div className="flex flex-col overflow-auto">
69        {reversedAsks.map((ask, i) => {
70          const total = reversedAskTotals[i];
71          const depth = maxTotal > 0 ? (total / maxTotal) * 100 : 0;
72          return (
73            <div key={`ask-${ask.price}`} className="relative">
74              <div
75                className="absolute right-0 top-0 bottom-0 bg-red-400/10"
76                style={{ width: `${depth}%` }}
77              />
78              <div className="relative grid grid-cols-3 px-3 py-1 text-xs">
79                <span className="text-red-400 font-medium tabular-nums">
80                  {ask.price.toFixed(2)}
81// … truncated