| 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> |
| ); |
| }; |
|
|
