feat: improve Orderbook UI

dib542 commented 5 months ago

This PR aims to improve the Orderbook experience based on several user interview and feedback sessions

it includes several Orderbook changes:

LimitOrder card changes:
- 1d5dcb1452ad486618b977d37ccb073483dce5b2 1bf33217515e26460e56a46127b3659accedd268 changes Buy/Sell control from tabs to a radio input selection "switch"
- 1d5dcb1452ad486618b977d37ccb073483dce5b2 b0ac12d15efecd4d57aa4bc41efb833213b25cea Adds Swap/Limit radio input "switch" to control the desired Dex Order type
- 828005b87523a1b940cd38d97fd2828730aa4951 allows editing of both amountIn or amountOut input fields
- 828005b87523a1b940cd38d97fd2828730aa4951 adds new style of token input values (using TokenInputGroup)
- d2524dd1f1c64bcdd4493e383ba93d75f8ae592d fixes keyboard tabbing between inputs
- e4712bbae6f9e53bead339f094ecee4c2761e5c2 adds LimitPrice input control and connects to Order state
- e4712bbae6f9e53bead339f094ecee4c2761e5c2 adds LimitPrice shortcut buttons
- 1b68d7e70e80e3edd2bff763671ca2028b26936a adds new style for Limit Price input component
- 56b932418ebfadcb3f18e61a869d73c355b28921 13e732f779dc7c3a7d3368b24aceb429bea0f3b6 improves the estimated swap price when current price is stale and being re-queried
- 8427ff9fb193daadc4d222733db738ef721490c6 676ec6beb8ba8028f4f686641ec431f8230501f1 improve estimated trade order and "Confirm" button state
- eea0679b05c0d3833d011c8fe45045467a13a06a a8265e5ae23bdc756eb266608fbc5f52ef5fb101 b11da0dab5856b041f94453c1a9da51104c949d7 adds Expiry time shortcut buttons
- eea0679b05c0d3833d011c8fe45045467a13a06a allows setting new Custom expiries including "months" and "years"
- b9bc50f2fe152365926f3c574428db9bde0022df connects market price slippage as a price indication to Depth and Chart
- 132061bf6c848563ace41b5ee9f49a8d203fb6cb 1653376e9a376f843e9a6b14de60e4c5b0a28a90 f2ee8e69c266a50ecef127afc50d6b9988ba5522 improves style to become narrower
- eb661dda593346e1f1eec1d8a9172b0e24f8b82c allow input fields to be focused whenever their "group" of components is selected
- e031c6a671761e45d2cae66242b2a3fd1010f6b4 adds a new "focusable" style to allow users to know on hover that an input is focusable and interactive
- 6423f7ef98e30503d2b93e68152fe32b863af4ba d3ff6040b2feb6d5b2a0aad357b7d15d9dcd1c26 adds error state when user has no input tokens
- 19b4e07117ca3181702d5445d5531d73b9571d3e b54182379a4b5515d3e56d6a63ace949d0d5ae9d improves loading/re-querying price state
- 019eeb02d98b6b6ebb5c6baf46bc2c9b1e2b6ae8 adds setting price indication on clicking shortcut button for LimitPrice
Chart component changes:
- 129ae48739618cc34e37432a4d56b2f5368be131 307f79f97eb5f0b0a5c816f6159a47fd0db0c309 fix: improve/reduce re-rendering of Chart on page start/load
- d948121b133ca6d067cfe15155b768b0bd1ec921 fix: remove manual addition of "spacing" bars, activate option for automatic "spacing" bars
- 3d03a36bf08b5f25b30fb40bf107eac7cce5b298 24ee5e8328b75a362766092397d23045e0c9665c matches TradingView chart colors to Duality theme colors for design consistency
- 5ed96068e2402b5acf3f2de524eebdb5665fe340 make chart height dynamic (now depends on LimitOrder card height)
- 31d5cdfa5430b941b64fd719eee16303d0e7ae93 hide left toolbar by default
- f6fd635f9d4e53be59caff13229fc9a8647e3ed4 add 5/10 minutes bar options, default to 5 minute bars
- 6952382749a5895d80bff522f98d266e3581c5e5 a35b0956f0b31b38dd8b596fbcce04bd6118f002 draw price indication (potential Buy/Sell order) line on chart
- 46aae64dec5cbedb605bf3316cd36654d57da1ef adds click chart to set Order limit price
new Chart-Depth connection component:
- a8a9b4127dfcb491a25ccb01fe9b0dc33c71d92a, a233b000d4ef2186db289138ddac222219f22586 visually connects the Chart to Depth table
- 5543643d87638b23d83471c255e7895e16397a9c visually add price "indication" connection between Depth and Chart
- 36b04b19967de069efa8d89fb0d2fccf38bc4932 visually connections Depth table buckets to Chart
- d4afb38ff85402914484962927cb7b1d120c679c visually add all Depth buckets to side of Chart
- 14d987598b0e23d44a149d803859e7555b71b270 ab72d77e0385250513c06565a0655c33669e5881 adds toggle buttons for the display of buckets next to chart or not
Depth tab/table changes:
- 7409a577453f163bd3ba2b124e0a75f576cb57b4 fix: puts higher prices at top of table (to align to y-axis of chart)
- 2a07cef129b4e90c3c629dbbeab1c768f50731cd 3fe8cc67786351eb800ce59f3dbd368fac96d3da adds dynamic number of rows in table to allow a dynamic height of table
- 33d34158d3ce615abcd0aa966dc8108e9b9441b5 add a bucket resolution control
- b2cf4e4f2a130b9e4819afba768e5237651625fc adds "Value (USD)" column
- 9259aed5758f020771c8aae90e0118c135f3b179 adds background color "progress bar" indication of value of order row
- d8083306bc1be4f2addf5ea5bf89da98c713262b 85eeecc83f8e00a734a20cd7366b83a27ecc65f5 d92926c2e12bcafa6909df95573ed35354ec82ad c9047eeed3e8835f02250c0e18ac0fca3c8f9708 adds visual of "price indication" state (a potential trade)
- 019eeb02d98b6b6ebb5c6baf46bc2c9b1e2b6ae8 adds "click to set limit price" to each bucket row (except "0" price rows: 7a78f9e4b7a6f92286c55582ae320b43a87f8357)
- b3230b85a4588bb2156dca4e75e1e8f2bfbc5fbd adds bucket animations on value changes
- 72b52f8d4c5e8a657c09f6bf1982888adf0a1499 adds radio buttons to select between show Buy or Sell order rows
- 1648ee883654a099d37e4a6943e926afdef99508 adds footer display of Buy vs Sell value %
Recent Trades List tab/table component changes:
- 2ac05f5b2485fa5f76cbfc2bb712f36d842a73bc adds 30 rows of recent orders, and allows table to scroll
- d9f99edcfaf184b9a4a9b48386c069f9786743d4 adds a websocket subscription to stream real-time table data
My Orders table components changes:
- a309054d56a33a0fd8b6248fd48a2bac8b0f8a7e changes text from "Orders" to "My Orders"
- b17415fbef2f0be9771177f64bf4b401a5a33a8e adds specific empty table message when wallet is not connected

and several general fixes to enable these updates:

05b264c14840f48fb79cb67d98f129e86c905335 Adds a new hook useBuckets
46a5c91d935bd188b2094e451e9349d2dcd660e1 Adds a general fix to the useRealtimePrice hooks
- this was sometimes used to get "base" price or "display" price
- this is now explicitly split into two hooks: useRealtimeBasePrice and useRealtimeDisplayPrice
b54182379a4b5515d3e56d6a63ace949d0d5ae9d Adds a general fix to the isLoading state of react-query states
- isLoading of the SWR state now maps to the react-query isLoading state as should make sense
9b8eb8a2980a015058312a4fde81643dcb230832 Adds a general improvement to the indexer hooks
- this allows am onAccumulated callback to receive the latest data updates as well as the accumulated state
9792f6c7accbc95dcf41e3ccaee985107c606745 Adds a general fix to the My Orders table
- when no wallet is connected, the "My Orders" table no longer generates a chain tx query of no address field (resulting in querying all order txs)
a36b8c1dd11320a1973191e945f8aa9f4c1a44dd A general fix to the mutation of arrays
- fixes potential unexpected in-place array .reverse() mutations (which should be avoided in React renders)
28bf86e97ac195a162ef257a64e2dfb63584fc75 Allows Orderbook page to take up more width on a wide screen
85919acf479af5ff4d2cc017ceda2512fa57472d Using token displayPrices instead on basePrices
1d19005afea57a2fe9642f22e21126022acb5036 4305d0a51678562a019d1c090a5d7e85cdc048fe tx end price calculation fixes

and several updates to components to enable these updates:

Updates RadioButtonGroupInput component
- da8c7b300fe684387d9ca34b032220675da055e8 to allow a state where none of the options are "active"/selected and
- da8c7b300fe684387d9ca34b032220675da055e8 fixes string/number type expectations
Updates Tabs / TabsCard components
- 2a9625c1ea0275e73f9857df3290035c536ac396 to prevent excessive re-renders when tab dependencies changed (which was often in the Orderbook)
Updates TokenInputGroup component
- cc01915358a54eced63079a6686b1fb1eeb886f6 remove "HALF" amount shortcut button: not wanted by users
- 93e850b783d07c6ed6c669069a5d1cf7db610b59 refactor layout so that top row sub-components (available tokens) does not affect the width of the text input for token amount (there is no reason for the layout of these sub-components to align vertically)
- 1a2780d547fa8ca337289da43e89405e3cc6056f 0c8a5561606376ecf43514f0e54ced03d779dacf allows more customizable texts through new header and subheader props
- 19b4e07117ca3181702d5445d5531d73b9571d3e allows more visual states through new inactive prop
Updates SelectionModal and TokenPicker component
- 6108a63637a06131cfce520a9c2a0b26ad446e4b to allow onChange to be optional
- 6108a63637a06131cfce520a9c2a0b26ad446e4b disable opening of selection component if onChange is optional
Updates Table component
- b17415fbef2f0be9771177f64bf4b401a5a33a8e to allow custom empty state message
Updates SelectInput component
- 33d34158d3ce615abcd0aa966dc8108e9b9441b5 to more consistently format usage that is not a full row width