COMPONENT orderbook
Orderbook
Dual-pane L2 orderbook with color-coded depth bars, spread display, and click-to-set-price. Feed with useOrderbook(coin) which returns { bids, asks }. Key props: coin (string), bids (BookLevel[]), asks (BookLevel[]), depth? (number), onPriceClick? (price => void). Component calculates spread/mid internally.
Install
$
npx shadcn@latest add https://ui.purrdict.xyz/r/orderbook.json Preview
BTC Up/Down — OrderbookYes side
PriceSizeTotal
0.68005034.0
0.675011074.3
0.67007550.3
0.660014092.4
0.65509562.2
Spread0.0050(0.76%)
0.650012078.0
0.6450200129.0
0.64008554.4
0.635015095.3
0.63006541.0
Usage
import { Orderbook } from "@/components/hip4/orderbook"
import { useOrderbook } from "@/hooks/hip4/use-orderbook"
function MarketOrderbook({ coin }: { coin: string }) {
const { bids, asks } = useOrderbook(undefined, coin)
return (
<Orderbook
coin={coin}
bids={bids}
asks={asks}
depth={10}
onPriceClick={(px) => setLimitPrice(px)}
/>
)
}Props
| Prop | Type | Description |
|---|---|---|
coin | string | Coin identifier for the outcome |
bids | BookLevel[] | Bid levels sorted by price desc |
asks | BookLevel[] | Ask levels sorted by price asc |
depth | number | Levels to display. Default: 10 |
onPriceClick | (price: number) => void | Click handler for price level |
Dependencies
npm packages
Registry components