Add orderbook list UI components

[cmagan]

order book is very useful for more detailed inspection of bids
I propose to add an orderbook to the main bidding interface
initial draft

Order book examples
Binance:

dydx:

[gabitoesmiapodo]

Discussion started here:

#312 (comment)
#312 (comment)

[gabitoesmiapodo]

@cmagan

Added some ideas here https://www.figma.com/file/hapgMbgd2Zo5NFZDNfbogQ/Gnosis-Auction-Feedback?node-id=501%3A2

[gabitoesmiapodo]

New design is here https://zpl.io/b6KvD5m

I will implement it when there's no more feedback.

[cmagan]

Gabriel, how can I get access to the new design?

…

On Wed, Apr 21, 2021 at 6:28 PM Gabriel Rodriguez Alsina < ***@***.***> wrote: New design is here https://zpl.io/b6KvD5m I will implement it when there's no more feedback. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#484 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABU6OIDYUHRJ7TTX6S463P3TJ3VLHANCNFSM42UUZKRA> .

[gabitoesmiapodo]

Gabriel, how can I get access to the new design?
…
On Wed, Apr 21, 2021 at 6:28 PM Gabriel Rodriguez Alsina < @.***> wrote: New design is here https://zpl.io/b6KvD5m I will implement it when there's no more feedback. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#484 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABU6OIDYUHRJ7TTX6S463P3TJ3VLHANCNFSM42UUZKRA .

@cmagan

https://www.figma.com/file/hapgMbgd2Zo5NFZDNfbogQ/Gnosis-Auction-Feedback

[gabitoesmiapodo]

@maria-vslvn is going to implement this.

Some notes to help her understand what's needed to be done:

• This issue is part of an Epic (Auction UI / UX Improvements #523). We're not merging these issues into /develop but into feature/#523-epic, so take that into account when creating new pull requests.
• We should keep feature/#523-epic in sync with /develop.
• For every new issue create a new branch based on feature/#523-epic.
• Once all of these issues are merged into feature/#523-epic, we'll merge it into /develop
• Orderbook functionality will have both a chart and a table / list for the display of information. The chart already exists but we need to add several extra components now, which are all of the components you can see inside the green rectangle in the image below.
• We're dealing with static display of components here, once you implement this somebody else will add the missing logic on Orderbook list integration #527
• Zeplin file: https://zpl.io/b6KvD5m (I've sent you an invite to the project)
• Ask all you need to ask.

Regarding the design, you should:

0- Add the "Orderbook" title, just like it's on "Place Order", "Your Orders", etc.

1- Add a "Granularity" dropdown. The dropdown component already exists, you can see some examples and how to use it on the app's header (user address dropdown) and the auction's list "Items per page" dropdown.

Idle style for the button must be like the "Max" button on the place order form. Hover / active style must be like in the design.

No need to make the granularity work (ie: modify the table data dinamically).

2- Add these toggles to show and hide the orderbook's chart and table.

3- There's no radio button component you can use for the dropdown's options list, but you can duplicate
src\components\pureStyledComponents\Checkbox.tsx and modify it accordingly.

4- Add the Orderbook table like in the design. Mocked data is fine. You might want to have a look into the module we used for the auctions' list (react-table) to implement the table here. No need to replicate what I did there, just do it the way you prefer.

The table should be responsive, so at least allow for horizontal scrolling on smaller devices.

No need to style the scrollbar, that's just for the design.

Add the tooltips to the table's header. We don't have the tooltip's contents, but we can ask the guys here.

---

[gabitoesmiapodo]

@josojo @cmagan

@maria-vslvn is working on this, maybe we should add her as a collaborator to the repository.

[josojo]

Yes, I asked her already to open her local PR as a PR to this repo. Would be great to have her work incorporated

[maria-vslvn]

@josojo i've completed the scope. Currently i have all the updates in the copy repo. Should i create a PR to the native repo?

[josojo]

Yes, either you creaate a native PR in this repo, or you make a PR from your clone.
I think I would prefer the first option, such that ci is working