Swap page cleanup

[LuizAsFight]

We're having too much movement / flicks when interacting with swap page

Problems

• Timing of layout changes is not good. if you play the video below slowly, you'll see first coin changes, then Balance hide/show.
• Timing issues also happen in preview box, if you play this video slowly, first it gets to zero then it goes loading.
• Preview box is blinking if you click "swap", then click "swap" again before loading is finished
• Timing/flicks issues also happening in last line price box "1 ETH = x.xx DAI"
• Max button hiding/showing when swapping
• By consequence the position of balance text changes all the time. It changes if balance value changes AND if max button hides/shows

https://user-images.githubusercontent.com/8636507/191587500-93978feb-e10c-4f54-b816-4f8c1e6e869a.mov

---

Solutions proposed

• [ ] Fix timing of layout changes
• [ ] To better UX, move balance to start of the input. Feels much better to see balance right below of where you're typing your value
• [ ] Balance should be shown even when it's zero
• [ ] Balance value should be clickable, and set the value to input
• [ ] As we now have the balance clickable, "Max" button is useless and can be removed to make screen cleaner
• [ ] Ultimately reaching something like this:

Just as ref - See this example of dieselpools Layout is not good/pretty but in terms of ux it's very clear and concise, you can keep clicking and clicking and clicking in anything (swap, max buttons), and things basically don't move

[zhou407134]

我同意

[pyramus]

Would like to add another issue to this UI cleanup.

Show multiple digit decimals for tokens in liquidity positions (at least 2-3)

• Adding 0.47 ETH + 529.05 DAI to LP
• UI shows pooled tokens as just 0.4 ETH + 529.05 DAI
• UI shows 0.4 pool tokens (instead of actually 0.46)
• Removing LP confirms the actual amounts

https://user-images.githubusercontent.com/2742107/211334009-810d2f72-359a-4db7-8c13-974f93a42685.mov

Although I could confirm this is just a display issue, seems important nevertheless. It seems as if you're losing quite some ETH when adding liquidity due to the interface just showing a single digit decimal. Note that it's not normally rounded (would become 0.5 in this example) but really unnecessarily cutting off decimal digits.

Tested only in last stable release since opening LP doesn't seem to work in latest master branch (see issue 399)

[LuizAsFight]

nice catch @pyramus , def needs to be fixed

[otart]

ok