shadcn.io is not affiliated with official shadcn/ui
Order Book Web3 Block for Solid
A spot order book for an invented pair: twelve asks over twelve bids with depth bars and a spread, a Group by select, and a side cell that walks the book for a buy or a sell and marks the levels the order would take.
Installation
Overview
See how deep a market is, and what a large order would do to the price, with this order book panel for Solid with Ark UI. It's the book of Tickhall, a spot exchange, for the invented ROWN and USDC pair, and it is a seeded sample, not market data. A table shows twelve ask levels over twelve bid levels around a spread row worked out from the best prices. Each level has its price, its size and the total so far, with a depth bar in a foreground weight behind it; asks and bids are told apart by position, a heavier bar for bids and the words Ask and Bid, never by color. A Group by Native Select re-buckets the same typed book at 0.01, 0.1 or 1. In the side cell a Buy or Sell pair and a size Input walk the book level by level and report the average price, how far it is from the best price, the levels used and the cost, and the levels the order would take are marked in the table. Nothing is placed. For exchanges, wallets with a trade tab and any screen that shows depth.
FAQ
How does the walk work?
A buy takes the asks from the lowest price up, a sell takes the bids from the highest down. For each fine level it takes what it needs of the level's size until the order is filled, then reports the average price (the cost divided by the size), how far that is from the best price in percent, and how many price buckets in the current grouping it touched. The levels it uses are marked with a heavier row and a bar at the start.
What does Group by change?
The book is typed at 0.01 steps for 1,500 levels on each side. Grouping at 0.1 or 1 adds the sizes of the levels in each bucket, rounding asks up and bids down so the book is never better than it is. The spread row always uses the real best prices, so it doesn't change when you group.
Where does the book come from, and what stays local?
It is generated at load from a seeded hash, the same every time, and never from a clock or a random number. Nothing is a market feed and nothing is placed: there is no Shine Button because the panel reports what an order would do. In your app render the exchange's depth snapshot and its updates, keep the same grouping maths on the client, and send the real order from your own ticket.
What does the size field refuse?
Zero or less, more than 20,000 ROWN in one order, and anything the sample book cannot fill. The problem shows under the field, the figures dash out and the status line says why.
Is the table a real table, and does it read well with a screen reader?
Yes. It has a caption, column headers and one row per level, the side is written in its first cell, and a level your order takes says so after its price. The bars are only background. One polite status message gives the walk in a sentence.