{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "defi-orderbook",
  "type": "registry:ui",
  "description": "Defi orderbook component",
  "files": [
    {
      "path": "packages/defi/orderbook.tsx",
      "content": "\"use client\"\n\nimport { useState, useEffect } from \"react\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { TrendingUp, TrendingDown, Activity } from 'lucide-react'\n\ninterface OrderBookEntry {\n    price: number\n    amount: number\n    total: number\n    change?: number\n}\n\ninterface OrderBookProps {\n    pair?: string\n    exchange?: string\n    className?: string\n}\n\nexport function OrderBook({ \n    pair = \"ETH/USD\", \n    exchange = \"Coinbase\",\n    className = \"\" \n}: OrderBookProps) {\n    const [asks, setAsks] = useState<OrderBookEntry[]>([])\n    const [bids, setBids] = useState<OrderBookEntry[]>([])\n    const [spread, setSpread] = useState(0)\n    const [spreadPercent, setSpreadPercent] = useState(0)\n    const [lastPrice, setLastPrice] = useState(0)\n    const [priceChange, setPriceChange] = useState(0)\n\n    // Simulate real-time order book data\n    useEffect(() => {\n        const generateOrderBook = () => {\n            const basePrice = 2345.67 + (Math.random() - 0.5) * 10\n            const newAsks: OrderBookEntry[] = []\n            const newBids: OrderBookEntry[] = []\n\n            // Generate asks (sell orders) - sorted ascending\n            for (let i = 0; i < 10; i++) {\n                const price = basePrice + (i + 1) * (Math.random() * 1.5 + 0.3)\n                const amount = Math.random() * 15 + 0.1\n                const change = (Math.random() - 0.5) * 0.1\n                newAsks.push({\n                    price: parseFloat(price.toFixed(2)),\n                    amount: parseFloat(amount.toFixed(4)),\n                    total: parseFloat((price * amount).toFixed(2)),\n                    change: parseFloat(change.toFixed(3))\n                })\n            }\n\n            // Generate bids (buy orders) - sorted descending\n            for (let i = 0; i < 10; i++) {\n                const price = basePrice - (i + 1) * (Math.random() * 1.5 + 0.3)\n                const amount = Math.random() * 15 + 0.1\n                const change = (Math.random() - 0.5) * 0.1\n                newBids.push({\n                    price: parseFloat(price.toFixed(2)),\n                    amount: parseFloat(amount.toFixed(4)),\n                    total: parseFloat((price * amount).toFixed(2)),\n                    change: parseFloat(change.toFixed(3))\n                })\n            }\n\n            const currentSpread = newAsks[0]?.price - newBids[0]?.price || 0\n            const midPrice = ((newAsks[0]?.price || 0) + (newBids[0]?.price || 0)) / 2\n            const spreadPct = midPrice > 0 ? (currentSpread / midPrice) * 100 : 0\n            \n            setAsks(newAsks)\n            setBids(newBids)\n            setSpread(currentSpread)\n            setSpreadPercent(spreadPct)\n            \n            // Update last price and change\n            if (lastPrice > 0) {\n                setPriceChange(midPrice - lastPrice)\n            }\n            setLastPrice(midPrice)\n        }\n\n        generateOrderBook()\n        const interval = setInterval(generateOrderBook, 1500)\n        return () => clearInterval(interval)\n    }, [lastPrice])\n\n    const formatPrice = (price: number) => price.toLocaleString('en-US', { \n        minimumFractionDigits: 2, \n        maximumFractionDigits: 2 \n    })\n\n    const formatAmount = (amount: number) => amount.toLocaleString('en-US', { \n        minimumFractionDigits: 4, \n        maximumFractionDigits: 4 \n    })\n\n    const getMaxAmount = () => {\n        const allAmounts = [...asks, ...bids].map(entry => entry.amount)\n        return Math.max(...allAmounts)\n    }\n\n    const maxAmount = getMaxAmount()\n\n    return (\n        <Card className={`h-full border-slate-200/60 bg-background shadow-sm ${className}`}>\n            <CardHeader className=\"pb-4 border-b border-slate-100\">\n                <div className=\"flex items-center justify-between\">\n                    <div className=\"flex items-center gap-3\">\n                        <CardTitle className=\"font-semibold text-text\">Order Book</CardTitle>\n                        <Activity className=\"w-4 h-4 text-text\" />\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                        <Badge variant=\"default\" className=\"h-6 px-2.5 text-xs font-medium bg-blue-50 text-text border-blue-200\">\n                            {pair}\n                        </Badge>\n                        <Badge variant=\"outline\" className=\"h-6 px-2.5 text-xs text-text\">\n                            {exchange}\n                        </Badge>\n                    </div>\n                </div>\n            </CardHeader>\n            \n            <CardContent className=\"p-0\">\n                <div className=\"space-y-0\">\n                    {/* Column Headers */}\n                    <div className=\"grid grid-cols-3 gap-4 px-4 py-3 text-xs font-semibold text-text bg-slate-50/50 border-b border-slate-100\">\n                        <span>Price (USD)</span>\n                        <span className=\"text-right\">Size ({pair.split('/')[0]})</span>\n                        <span className=\"text-right\">Total (USD)</span>\n                    </div>\n\n                    {/* Asks (Sell Orders) */}\n                    <div className=\"max-h-48 overflow-y-auto\">\n                        {asks.slice().reverse().slice(0, 8).map((ask, index) => (\n                            <div\n                                key={`ask-${ask.price}-${index}`}\n                                className=\"group grid grid-cols-3 gap-4 px-4 py-1.5 text-xs hover:bg-red-50/60 transition-all duration-150 relative cursor-pointer\"\n                            >\n                                {/* Depth Bar */}\n                                <div\n                                    className=\"absolute right-0 top-0 bottom-0 bg-gradient-to-l from-red-50/40 to-red-50/20 transition-all duration-300\"\n                                    style={{ width: `${Math.min((ask.amount / maxAmount) * 100, 100)}%` }}\n                                />\n                                \n                                <div className=\"flex items-center gap-1 relative z-10\">\n                                    <span className=\"font-mono font-medium text-text\">${formatPrice(ask.price)}</span>\n                                    {ask.change && ask.change !== 0 && (\n                                        <span className={`text-xs ${ask.change > 0 ? 'text-red-500' : 'text-green-500'}`}>\n                                            {ask.change > 0 ? '↑' : '↓'}\n                                        </span>\n                                    )}\n                                </div>\n                                <span className=\"text-right text-text font-mono relative z-10 group-hover:text-text\">\n                                    {formatAmount(ask.amount)}\n                                </span>\n                                <span className=\"text-right text-text font-mono relative z-10 group-hover:text-text\">\n                                    ${ask.total.toLocaleString()}\n                                </span>\n                            </div>\n                        ))}\n                    </div>\n\n                    {/* Spread Section */}\n                    <div className=\"px-4 py-4 bg-gradient-to-r from-slate-50/50 to-slate-50/30 border-y border-slate-100\">\n                        <div className=\"flex items-center justify-between\">\n                            <div className=\"flex items-center gap-2\">\n                                <span className=\"text-sm font-medium text-text\">Spread</span>\n                                <div className=\"flex items-center gap-1\">\n                                    {priceChange > 0 ? (\n                                        <TrendingUp className=\"w-3.5 h-3.5 text-green-500\" />\n                                    ) : priceChange < 0 ? (\n                                        <TrendingDown className=\"w-3.5 h-3.5 text-red-500\" />\n                                    ) : (\n                                        <div className=\"w-3.5 h-3.5 rounded-full bg-slate-300\" />\n                                    )}\n                                </div>\n                            </div>\n                            <div className=\"text-right\">\n                                <div className=\"font-mono text-sm font-semibold text-text\">\n                                    ${spread.toFixed(2)}\n                                </div>\n                                <div className=\"text-xs text-text\">\n                                    {spreadPercent.toFixed(3)}%\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    {/* Bids (Buy Orders) */}\n                    <div className=\"max-h-48 overflow-y-auto\">\n                        {bids.slice(0, 8).map((bid, index) => (\n                            <div\n                                key={`bid-${bid.price}-${index}`}\n                                className=\"group grid grid-cols-3 gap-4 px-4 py-1.5 text-xs hover:bg-green-50/60 transition-all duration-150 relative cursor-pointer\"\n                            >\n                                {/* Depth Bar */}\n                                <div\n                                    className=\"absolute right-0 top-0 bottom-0 bg-gradient-to-l from-green-50/40 to-green-50/20 transition-all duration-300\"\n                                    style={{ width: `${Math.min((bid.amount / maxAmount) * 100, 100)}%` }}\n                                />\n                                \n                                <div className=\"flex items-center gap-1 relative z-10\">\n                                    <span className=\"font-mono font-medium text-text\">${formatPrice(bid.price)}</span>\n                                    {bid.change && bid.change !== 0 && (\n                                        <span className={`text-xs ${bid.change > 0 ? 'text-green-500' : 'text-red-500'}`}>\n                                            {bid.change > 0 ? '↑' : '↓'}\n                                        </span>\n                                    )}\n                                </div>\n                                <span className=\"text-right text-text font-mono relative z-10 group-hover:text-text\">\n                                    {formatAmount(bid.amount)}\n                                </span>\n                                <span className=\"text-right text-text font-mono relative z-10 group-hover:text-text\">\n                                    ${bid.total.toLocaleString()}\n                                </span>\n                            </div>\n                        ))}\n                    </div>\n                </div>\n            </CardContent>\n        </Card>\n    )\n}\n",
      "type": "registry:component"
    }
  ]
}