defi-orderbook

1"use client"
2 
3import { useState, useEffect } from "react"
4import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
5import { Badge } from "@/components/ui/badge"
6import { TrendingUp, TrendingDown, Activity } from 'lucide-react'
7 
8interface OrderBookEntry {
9    price: number
10    amount: number
11    total: number
12    change?: number
13}
14 
15interface OrderBookProps {
16    pair?: string
17    exchange?: string
18    className?: string
19}
20 
21export function OrderBook({ 
22    pair = "ETH/USD", 
23    exchange = "Coinbase",
24    className = "" 
25}: OrderBookProps) {
26    const [asks, setAsks] = useState<OrderBookEntry[]>([])
27    const [bids, setBids] = useState<OrderBookEntry[]>([])
28    const [spread, setSpread] = useState(0)
29    const [spreadPercent, setSpreadPercent] = useState(0)
30    const [lastPrice, setLastPrice] = useState(0)
31    const [priceChange, setPriceChange] = useState(0)
32 
33    // Simulate real-time order book data
34    useEffect(() => {
35        const generateOrderBook = () => {
36            const basePrice = 2345.67 + (Math.random() - 0.5) * 10
37            const newAsks: OrderBookEntry[] = []
38            const newBids: OrderBookEntry[] = []
39 
40            // Generate asks (sell orders) - sorted ascending
41            for (let i = 0; i < 10; i++) {
42                const price = basePrice + (i + 1) * (Math.random() * 1.5 + 0.3)
43                const amount = Math.random() * 15 + 0.1
44                const change = (Math.random() - 0.5) * 0.1
45                newAsks.push({
46                    price: parseFloat(price.toFixed(2)),
47                    amount: parseFloat(amount.toFixed(4)),
48                    total: parseFloat((price * amount).toFixed(2)),
49                    change: parseFloat(change.toFixed(3))
50                })
51            }
52 
53            // Generate bids (buy orders) - sorted descending
54            for (let i = 0; i < 10; i++) {
55                const price = basePrice - (i + 1) * (Math.random() * 1.5 + 0.3)
56                const amount = Math.random() * 15 + 0.1
57                const change = (Math.random() - 0.5) * 0.1
58                newBids.push({
59                    price: parseFloat(price.toFixed(2)),
60                    amount: parseFloat(amount.toFixed(4)),
61                    total: parseFloat((price * amount).toFixed(2)),
62                    change: parseFloat(change.toFixed(3))
63                })
64            }
65 
66            const currentSpread = newAsks[0]?.price - newBids[0]?.price || 0
67// … truncated