feat: improve Orderbook UI #556

dib542 · 2024-05-10T14:12:37Z

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

it includes several Orderbook changes:

LimitOrder card changes:
- 1d5dcb1 1bf3321 changes Buy/Sell control from tabs to a radio input selection "switch"
- 1d5dcb1 b0ac12d Adds Swap/Limit radio input "switch" to control the desired Dex Order type
- 828005b allows editing of both amountIn or amountOut input fields
- 828005b adds new style of token input values (using TokenInputGroup)
- d2524dd fixes keyboard tabbing between inputs
- e4712bb adds LimitPrice input control and connects to Order state
- e4712bb adds LimitPrice shortcut buttons
- 1b68d7e adds new style for Limit Price input component
- 56b9324 13e732f improves the estimated swap price when current price is stale and being re-queried
- 8427ff9 676ec6b improve estimated trade order and "Confirm" button state
- eea0679 a8265e5 b11da0d adds Expiry time shortcut buttons
- eea0679 allows setting new Custom expiries including "months" and "years"
- b9bc50f connects market price slippage as a price indication to Depth and Chart
- 132061b 1653376 f2ee8e6 improves style to become narrower
- eb661dd allow input fields to be focused whenever their "group" of components is selected
- e031c6a adds a new "focusable" style to allow users to know on hover that an input is focusable and interactive
- 6423f7e d3ff604 adds error state when user has no input tokens
- 19b4e07 b541823 improves loading/re-querying price state
- 019eeb0 adds setting price indication on clicking shortcut button for LimitPrice
Chart component changes:
- 129ae48 307f79f fix: improve/reduce re-rendering of Chart on page start/load
- d948121 fix: remove manual addition of "spacing" bars, activate option for automatic "spacing" bars
- 3d03a36 24ee5e8 matches TradingView chart colors to Duality theme colors for design consistency
- 5ed9606 make chart height dynamic (now depends on LimitOrder card height)
- 31d5cdf hide left toolbar by default
- f6fd635 add 5/10 minutes bar options, default to 5 minute bars
- 6952382 a35b095 draw price indication (potential Buy/Sell order) line on chart
- 46aae64 adds click chart to set Order limit price
new Chart-Depth connection component:
- a8a9b41, a233b00 visually connects the Chart to Depth table
- 5543643 visually add price "indication" connection between Depth and Chart
- 36b04b1 visually connections Depth table buckets to Chart
- d4afb38 visually add all Depth buckets to side of Chart
- 14d9875 ab72d77 adds toggle buttons for the display of buckets next to chart or not
Depth tab/table changes:
- 7409a57 fix: puts higher prices at top of table (to align to y-axis of chart)
- 2a07cef 3fe8cc6 adds dynamic number of rows in table to allow a dynamic height of table
- 33d3415 add a bucket resolution control
- b2cf4e4 adds "Value (USD)" column
- 9259aed adds background color "progress bar" indication of value of order row
- d808330 85eeecc d92926c c9047ee adds visual of "price indication" state (a potential trade)
- 019eeb0 adds "click to set limit price" to each bucket row (except "0" price rows: 7a78f9e)
- b3230b8 adds bucket animations on value changes
- 72b52f8 adds radio buttons to select between show Buy or Sell order rows
- 1648ee8 adds footer display of Buy vs Sell value %
Recent Trades List tab/table component changes:
- 2ac05f5 adds 30 rows of recent orders, and allows table to scroll
- d9f99ed adds a websocket subscription to stream real-time table data
My Orders table components changes:
- a309054 changes text from "Orders" to "My Orders"
- b17415f adds specific empty table message when wallet is not connected

and several general fixes to enable these updates:

05b264c Adds a new hook useBuckets
46a5c91 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
b541823 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
9b8eb8a 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
9792f6c 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)
a36b8c1 A general fix to the mutation of arrays
- fixes potential unexpected in-place array .reverse() mutations (which should be avoided in React renders)
28bf86e Allows Orderbook page to take up more width on a wide screen
85919ac Using token displayPrices instead on basePrices
1d19005 4305d0a tx end price calculation fixes

and several updates to components to enable these updates:

Updates RadioButtonGroupInput component
- da8c7b3 to allow a state where none of the options are "active"/selected and
- da8c7b3 fixes string/number type expectations
Updates Tabs / TabsCard components
- 2a9625c to prevent excessive re-renders when tab dependencies changed (which was often in the Orderbook)
Updates TokenInputGroup component
- cc01915 remove "HALF" amount shortcut button: not wanted by users
- 93e850b 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)
- 1a2780d 0c8a556 allows more customizable texts through new header and subheader props
- 19b4e07 allows more visual states through new inactive prop
Updates SelectionModal and TokenPicker component
- 6108a63 to allow onChange to be optional
- 6108a63 disable opening of selection component if onChange is optional
Updates Table component
- b17415f to allow custom empty state message
Updates SelectInput component
- 33d3415 to more consistently format usage that is not a full row width

This reverts commit d31a947.

github-actions · 2024-05-10T14:17:28Z

Deploy Previews

Testnet

Preview URL: https://d31a9476-d1afd1a6--duality-xyz-testnet.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-testnet/deploys/663e2c21a24b0803b7b49006

Beta

Preview URL: https://d31a9476-d1afd1a6--duality-xyz-beta.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-beta/deploys/663e2c72523550044c2eac30

github-actions · 2024-05-10T18:08:17Z

Deploy Previews

Testnet

Preview URL: https://e4199fc9-5015a777--duality-xyz-testnet.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-testnet/deploys/663e623d683dc42ec9e76274

Beta

Preview URL: https://e4199fc9-5015a777--duality-xyz-beta.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-beta/deploys/663e628b5206562e1970484b

…s in tables

github-actions · 2024-06-03T18:45:37Z

Deploy Previews

Testnet

Preview URL: https://d9f99edc-a8a0539b--duality-xyz-testnet.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-testnet/deploys/665e0f0324f451393dadfbfd

Beta

Preview URL: https://d9f99edc-a8a0539b--duality-xyz-beta.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-beta/deploys/665e0f4cf979c837e1932baa

github-actions · 2024-06-03T19:35:40Z

Deploy Previews

Testnet

Preview URL: https://46aae64d-b63d1948--duality-xyz-testnet.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-testnet/deploys/665e1ab8c5fcfd51e6f71206

Beta

Preview URL: https://46aae64d-b63d1948--duality-xyz-beta.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-beta/deploys/665e1b066ca68e43a0c49b1c

github-actions · 2024-06-03T20:04:46Z

Deploy Previews

Testnet

Preview URL: https://b612bc8a-79591317--duality-xyz-testnet.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-testnet/deploys/665e218f7255b94949824682

Beta

Preview URL: https://b612bc8a-79591317--duality-xyz-beta.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-beta/deploys/665e21d96ca68e4b41c4992d

- .toPrecision can return scientitific notation strings which will not pass validation on some numeric input fields - not all need to be changed but its best to change all anyway

github-actions · 2024-06-04T11:18:27Z

Deploy Previews

Testnet

Preview URL: https://b5e7868d-8f2bdeb5--duality-xyz-testnet.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-testnet/deploys/665ef7b402c09e007919cd68

Beta

Preview URL: https://b5e7868d-8f2bdeb5--duality-xyz-beta.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-beta/deploys/665ef7fea32a01009eb6af62

- null parameter means to return an empty data set - a non-null parameter means to request a data set - hopefully this is clearer

- not just GOOD_TIL_TIME but also GOOD_TIL_CANCELLED

- in the Orderbook mostly display tokens are expected

github-actions · 2024-06-05T01:37:25Z

Deploy Previews

Testnet

Preview URL: https://85919acf-61838b52--duality-xyz-testnet.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-testnet/deploys/665fc106f1ccec809d67227b

Beta

Preview URL: https://85919acf-61838b52--duality-xyz-beta.netlify.app
Logs: https://app.netlify.com/sites/duality-xyz-beta/deploys/665fc14f4c6bd8866b6dd3a9

## [2.11.0](v2.10.0...v2.11.0) (2024-06-05) ### Features * improve orderbook order card ([#556](#556)) ([45ad9c9](45ad9c9))

dib542 · 2024-06-05T02:23:51Z

🎉 This PR is included in version 2.11.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

dib542 added 13 commits May 10, 2024 07:28

feat: move Swap/Limit and Buy/Sell controls to radio group controls

1d5dcb1

feat: remove "HALF" wallet amount shortcut button from token input

cc01915

feat: allow custom header text on token input

1a2780d

feat: allow token change to be optional on token input

6108a63

feat: replace token amount with amountIn amountOut input groups

828005b

feat: allow maxValue=0 to remove "MAX" shortcut button on token input

1e6300c

feat: improve estimated trade price

56b9324

feat: improve estimated (validating) trade price part 2

13e732f

feat: enforce order type change with price tab type change

b0ac12d

feat: refine Expiration control setting in Limit Order card

eea0679

feat: reduce recomputation on expiration time changes

f9f96f6

feat: put Swap/Limit Buy/Sell buttons in card header

d31a947

Revert "feat: put Swap/Limit Buy/Sell buttons in card header"

3b5529d

This reverts commit d31a947.

dib542 linked an issue May 10, 2024 that may be closed by this pull request

Improve Orderbook UI #555

Closed

dib542 added the deploy preview label May 10, 2024

MrTalecky deployed to Preview May 10, 2024 14:16 View deployment

dib542 added 7 commits May 11, 2024 00:31

feat: focus on input control when click input group

56e96a1

feat: remove less useful simulation result information

b5b47bb

fix: initial state then type amountOut fix, price was 0

d09be32

feat: make easier to focus on text inputs from anywhere in group

eb661dd

feat: add basic styling of limit price input

1b68d7e

feat: refine design of Expiry control to single click to custom

a8265e5

feat: enable RadioButtonGroup to skip buttons of no description

da8c7b3

MrTalecky deployed to Preview May 10, 2024 18:06 View deployment

feat: add LimitPrice input, connected to all other input fields

e4712bb

dib542 force-pushed the 555-improve-orderbook-order-card branch from e4199fc to e4712bb Compare May 10, 2024 18:20

feat: remove Swap/Limit buttons to make card header more compact

49fa8cb

MrTalecky deployed to Preview May 10, 2024 18:23 View deployment

feat: abstract useOnDexMsg to add general subscriptions to dex action…

d9f99ed

…s in tables

MrTalecky deployed to Preview June 3, 2024 18:44 View deployment

feat: add click chart to set limit price

46aae64

MrTalecky deployed to Preview June 3, 2024 19:34 View deployment

dib542 added 2 commits June 4, 2024 05:49

fix: avoid chart re-rendering with cached chart pairs

a9876a5

feat: remove tokenPairs dependency from Orderbook chart

b612bc8

MrTalecky deployed to Preview June 3, 2024 20:03 View deployment

dib542 added 2 commits June 4, 2024 21:00

feat: flip or reset order trade state when changing tokens

20d8198

fix: change all usages of BigNumber .toPrecision method to .precision

b5e7868

- .toPrecision can return scientitific notation strings which will not pass validation on some numeric input fields - not all need to be changed but its best to change all anyway

MrTalecky deployed to Preview June 4, 2024 11:17 View deployment

dib542 added 8 commits June 5, 2024 02:34

fix: account=null and account=undefined react-queries were colliding

b8a8f36

fix: make zero-result hook behavior more obvious: allow null parameter

639d5c3

- null parameter means to return an empty data set - a non-null parameter means to request a data set - hopefully this is clearer

feat: ensure Expiry shortcuts are open for all limit orders:

8e4deac

- not just GOOD_TIL_TIME but also GOOD_TIL_CANCELLED

refactor: allow useTransactionTableData page state to be set by parent

7693a6a

fix: use consistent end display price of txs calculations

1d19005

fix: use consistent end display price of txs calculations, part 2

4305d0a

refactor: rename form slippage to include percentage indication

3aea800

fix: replace some tickIndex->basePrice with tickIndex->displayPrice

85919ac

- in the Orderbook mostly display tokens are expected

MrTalecky deployed to Preview June 5, 2024 01:36 View deployment

dib542 merged commit 45ad9c9 into main Jun 5, 2024
2 of 3 checks passed

dib542 deleted the 555-improve-orderbook-order-card branch June 5, 2024 02:23

dib542 pushed a commit that referenced this pull request Jun 5, 2024

chore(release): 2.11.0 [skip ci]

55a2292

## [2.11.0](v2.10.0...v2.11.0) (2024-06-05) ### Features * improve orderbook order card ([#556](#556)) ([45ad9c9](45ad9c9))

dib542 added the released label Jun 5, 2024

dib542 changed the title ~~feat: improve orderbook order card~~ feat: improve Orderbook UI Jun 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: improve Orderbook UI #556

feat: improve Orderbook UI #556

dib542 commented May 10, 2024 •

edited

Loading

github-actions bot commented May 10, 2024

github-actions bot commented May 10, 2024

github-actions bot commented Jun 3, 2024

github-actions bot commented Jun 3, 2024

github-actions bot commented Jun 3, 2024

github-actions bot commented Jun 4, 2024

github-actions bot commented Jun 5, 2024

dib542 commented Jun 5, 2024

feat: improve Orderbook UI #556

feat: improve Orderbook UI #556

Conversation

dib542 commented May 10, 2024 • edited Loading

github-actions bot commented May 10, 2024

Deploy Previews

Testnet

Beta

github-actions bot commented May 10, 2024

Deploy Previews

Testnet

Beta

github-actions bot commented Jun 3, 2024

Deploy Previews

Testnet

Beta

github-actions bot commented Jun 3, 2024

Deploy Previews

Testnet

Beta

github-actions bot commented Jun 3, 2024

Deploy Previews

Testnet

Beta

github-actions bot commented Jun 4, 2024

Deploy Previews

Testnet

Beta

github-actions bot commented Jun 5, 2024

Deploy Previews

Testnet

Beta

dib542 commented Jun 5, 2024

dib542 commented May 10, 2024 •

edited

Loading