frontend-monorepo icon indicating copy to clipboard operation
frontend-monorepo copied to clipboard

Enhanced trading screen sidebar

Open JonRay15 opened this issue 11 months ago • 2 comments

Story

As a user I want a sidebar on te trade screen that makes the deal ticket more obvious and ensures I always know my asset balance So that I dont get stuckk trying to find these things or have to navigate away from trading to find them

Acceptance Criteria

  • [ ] The minibar is removed from this page and all other pages (users will use the new portfolio screen in #6098 if they want to manage assets)
  • [ ] The default view on the trading screen is as per sketch 1, showing
    • [ ] An expandable market info tab
    • [ ] An expanded deal ticket
    • [ ] A mini-asset view
    • [ ] A datanode health indicator
  • [ ] The mini asset view should show:
    • [ ] The asset for the current market
    • [ ] The icon from the icon store - speak to @edd
    • [ ] Your balance of that asset
    • [ ] How much is allocated across any margin accounts or spot swap orders
    • [ ] How much is available collateral
    • [ ] Quick launch buttons for Deposit / Transfer / Withdraw
    • [ ] If the users clicks on the deposit / transfer / withdraw buttons the asset pane should expand to fill most of the sidebar and display the relevant component as shown in sketch 2
    • [ ] Assuming #6033 is complete this should include that swap feature too
    • [ ] Assuming #6109 is complete this should include that deposit feature too
    • [ ] It does NOT need to include the ledger entries function
    • [ ] If the market is SPOT it will need to show both assets, condensed and maybe simplified side by side cards, something like sketch 6
  • [ ] If the user clicks on the asset symbol / the general tile of the asset pane it should expand to all assets and their breakdown using a condensed version of the asset breakdown from #6110 as shown in sketch 3
    • [ ] If the user clicks on deposit / transfer / withdraw button here te same behaviour as above should happen
    • [ ] If the user clicks "manage" it should send the user to the new full portfolio page in #6098
  • [ ] If the user clicks on the market info tab it should expand and show the full market info accordion inside the component, with the other cards shrinking to their minimised state as in sketch 4
  • [ ] If the user selects the datanode selector it should open the mobile version of the datandoe selector inside the sidebar as shown in sketch 5
  • [ ] In each case there is no "minimise" button on the open pane... you minimise by clicking on something else
  • [ ] As a result of this change we can now remove the "Collateral" pane on the bottom table

Sketch

NB. All styling is best efforts in Miro to give you an idea ... please just follow normal existing Console style guides to get this looking decent. If we need to do a Joelle sweep later once its functionally complete we will do.

Sketch 1

image

Sketch 2

image

Sketch 3

image

Sketch 4

image

Sketch 5

image

Sketch 6

image

Additional details / background info

JonRay15 avatar Mar 26 '24 15:03 JonRay15

Note in the screenshots above there is a "Show Details" button on the asset ... but actually if the tile or the asset symbol was clickable we could remove the need for that

JonRay15 avatar Mar 27 '24 12:03 JonRay15

Make sure this includes showing BOTH assets in spot markets in the trading sidebar.

JonRay15 avatar Apr 17 '24 08:04 JonRay15