Exchange UI/UX Upgrade

[mindfulme]

Is your feature request related to a problem? Please describe. The problem is that the Exchange Tab is highly inconvenient, especially scroll can't be used, the UX is very bad because of that. Describe the solution you'd like I suggest making the Exchange UI the same as on Binance (Advanced View). I will take care of the implementation

Describe alternatives you've considered I have considered updating the UI of the Exchange Tab anyway.

Additional context From this

To this

[mindfulme]

I have started updating the UI of the exchange tab, will post my progress here every day

[sschiessl-bcp]

Please consult with UI team first before diving in more.

[startailcoon]

The Exchange section is a huge part, which should be discussed before larger changes are made. We're interested in hearing any possible work, but please consult with the UI team, as noted by Stefan

[mindfulme]

I will, okay

Please consult with UI team first before diving in more.

[mindfulme]

I will start the discussion BitsharesDev telegram chat, Stefan already noticed the suggestion before - we will talk regarding that

[mindfulme]

First-day progress on Exchange UI Tab - it is just started will be better over several days

[shulthz]

I think you can check: https://olddex.cybex.io/market/CYB_JADE.USDT

and this is the basic UI of binance which was more better than advanced: https://www.binance.com/en/trade/BTC_USDT

[mindfulme]

Bitshares has slow UI overall, so scrolling is better to remove at all, basic Binance exchange UI has scrolling generally so it is not that good solution for our case

[mindfulme]

@shulthz thx very much, we have found open source version of binance advanced exchange on cybex dex repository. They already copied 1-1 everything from binance. https://github.com/CybexDex/cybex-web-2.0

[mindfulme]

It works pretty fine with Bitshares nodes as well, we will do some magic on it to match bitshares color themes

[shulthz]

en, that's nice

[VladLypovyi]

@shulthz Did you try to configure https://github.com/CybexDex/cybex-web-2.0 with Bitshares node.

[shulthz]

@shulthz Did you try to configure https://github.com/CybexDex/cybex-web-2.0 with Bitshares node.

sorry about that

[VladLypovyi]

@shulthz Are you related to Cybex project?

[shulthz]

@shulthz Are you related to Cybex project?

No

[sschiessl-bcp]

@MindfulMe are you refactoring or redesigning? Please note that this task has no approved estimate (yet).

[mindfulme]

Got it

[mindfulme]

I have merged their UI but there is some work to keep original bitshares-ui functionality on exchange tab

[abitmore]

First-day progress on Exchange UI Tab - it is just started will be better over several days

Just FYI the layout doesn't work well on smaller screens. Please keep responsive design in mind.

[abitmore]

@MindfulMe if your screen is big enough, perhaps your layout is better.

I think the best approach for this issue, is to add a new style, and show different default style on different detected screen sizes. Click "Personalize" at the top-right corner, you'll see what/how to add.

[mindfulme]

---

@MindfulMe if your screen is big enough, perhaps your layout is better.

I think the best approach for this issue, is to add a new style, and show different default style on different detected screen sizes. Click "Personalize" at the top-right corner, you'll see what/how to add.

Okay, I have rolled back to the original UI, Cybex-UI is not suitable for integration with bts-ui since it is highly slow, basic UI of cybex does not look that complex to copy though

[mindfulme]

I will preserve the original UI code with further updates to styles and the further stuff with preserving all bts functionality looking more conveniently for users

[sschiessl-bcp]

I would be sold on re-coding the whole thing with a nice clean reduced UX.

Have you checked the various gateway UIs how they are doing it?

[mindfulme]

There is already no scroll needs polishing on overall positioning of the rest of the components and tabs, styles, etc

[mindfulme]

I have not changed much, tried to do it as clean as possible. Stay tuned on further updates

[mindfulme]

I have not changed much, tried to do it as clean as possible. Stay tuned on further updates

Since we roll back from Cybex back to the version in which I have been modifying the original Bitshares-UI (Latest "develop" version)

[mindfulme]

On mobile looks decent

[sschiessl-bcp]

We are currently discussing redesign as well, please have a look at mobile design here #2854

Desktop design is following as well. Maybe you could implement that one then?

[sschiessl-bcp]

I have not changed much, tried to do it as clean as possible. Stay tuned on further updates

I'm curious to see what you are cooking up.

@startailcoon should we add a bounty for his investigations? Currently, this task is not in a Milestone or has an estimate.

[startailcoon]

I've been following your comments and progress. It doesn't have any bounty or milestone so far as I haven't seen it possible to refactor the whole thing, and we're still waiting for the new UI specs.

However, I do see some possible bounty for these testings, and with some help by the UI team, we could perhaps find a good optional layout that we could add as a "testing"?

[mindfulme]

Whatever, I will finish the version of Exchange tab and submit as a new branch. I guess in 3 days will be ready

[mindfulme]

[mindfulme]

Some polishing to the modals would be ok

[sschiessl-bcp]

Nice progress! Is it responsive for small screens too (not mobile / tiny)?