File size: 3,326 Bytes
e9a8d0a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | import { OrderBook } from '../types';
import { cn } from '../lib/utils';
interface OrderBookViewProps {
orderBook: OrderBook;
className?: string;
}
export const OrderBookView = ({ orderBook, className }: OrderBookViewProps) => {
const maxTotal = Math.max(
...orderBook.bids.map(b => b.total),
...orderBook.asks.map(a => a.total)
);
const getDepthWidth = (total: number) => {
return (total / maxTotal) * 100;
};
return (
<div className={cn('glassmorphism rounded-xl p-6', className)}>
<h3 className="text-lg font-semibold text-foreground mb-4">Order Book</h3>
<div className="grid grid-cols-2 gap-4">
{/* Bids */}
<div>
<div className="flex items-center gap-2 mb-3">
<div className="w-3 h-3 rounded-full bg-green-500" />
<span className="text-sm font-medium text-green-500">Bids</span>
</div>
<div className="space-y-1">
{orderBook.bids.map((bid, index) => (
<div key={`bid-${index}`} className="relative">
<div
className="absolute inset-y-0 right-0 bg-green-500/20 rounded"
style={{ width: `${getDepthWidth(bid.total)}%` }}
/>
<div className="relative flex justify-between items-center px-2 py-1 text-sm">
<span className="font-mono text-green-500">{bid.price.toLocaleString()}</span>
<span className="font-mono text-muted-foreground">{bid.amount.toFixed(4)}</span>
<span className="font-mono text-muted-foreground">{bid.total.toFixed(2)}</span>
</div>
</div>
))}
</div>
</div>
{/* Asks */}
<div>
<div className="flex items-center gap-2 mb-3">
<div className="w-3 h-3 rounded-full bg-red-500" />
<span className="text-sm font-medium text-red-500">Asks</span>
</div>
<div className="space-y-1">
{orderBook.asks.map((ask, index) => (
<div key={`ask-${index}`} className="relative">
<div
className="absolute inset-y-0 right-0 bg-red-500/20 rounded"
style={{ width: `${getDepthWidth(ask.total)}%` }}
/>
<div className="relative flex justify-between items-center px-2 py-1 text-sm">
<span className="font-mono text-red-500">{ask.price.toLocaleString()}</span>
<span className="font-mono text-muted-foreground">{ask.amount.toFixed(4)}</span>
<span className="font-mono text-muted-foreground">{ask.total.toFixed(2)}</span>
</div>
</div>
))}
</div>
</div>
</div>
{/* Spread */}
<div className="mt-4 pt-4 border-t border-border">
<div className="flex justify-between items-center text-sm">
<span className="text-muted-foreground">Spread</span>
<span className="font-mono text-foreground">
{orderBook.asks[0] && orderBook.bids[0]
? ((orderBook.asks[0].price - orderBook.bids[0].price) / orderBook.bids[0].price * 100).toFixed(3)
: '0.000'}%
</span>
</div>
</div>
</div>
);
};
|