This issue is about redesigning the current orderbook (see mock-up below). Key redesign items:
Instead of showing BID/ASK next two each other, show them in different tabs where current BID = new SELL, current ASK = new BUY
For "Expires in" field, use format "2d 7h 23m" and "<1m" if it's less than 1m (latter should be already there in the existing logic)
"Price" field format: 1.3345 DAI, i.e. 4 decimals + collateral token symbol
Orderbook should have a fixed height and if there are more orders, a scroll bar should show up on the right (also indicated on the mock-up)
Best Buy/Sell on the top right show the best ask/bid (i.e. the Price of the top row in BUY/SELL tab)
Trade History / Your Orders do not need much change as they are already in one line in the current design. Just put the timestamps/order expiry times in a separate column.
Orderbook should have the same width as the chart above it
User can fill single orders by clicking the Buy button on the line. It's possible to move that bit into a separate issue if it's too much for one PR
Important: Do not break existing functionality such as the websocket, the automatic refresh, etc.
Trade History / Your Orders:
Current designs below are presented FYI. No design mock-ups have been produced for those two tabs as implementation is straightforward.
Context
This issue is about redesigning the current orderbook (see mock-up below). Key redesign items:
Important: Do not break existing functionality such as the websocket, the automatic refresh, etc.
Figma Mockup https://www.figma.com/file/mcyci32XlFZJ8K1JZa25Ts/Diva-App?node-id=5582%3A34054&t=B4LswKg3PlPEHDXu-4
Trade History / Your Orders: Current designs below are presented FYI. No design mock-ups have been produced for those two tabs as implementation is straightforward.
Trade History
Your Orders