[ABA 🎵 Impact] - Fallback message and Loader

[W3stside]

Summary

Closes #1908

Description && screenshots in #1908

TODO: there are some tweaks to make:

1. better hiding/showing of message based on price impact - idea will be to (in another PR) make a global flag for ABA impact loading/not existing and wait for that to return before showing/hiding message done using fallback price impact error checking
2. a loader potentiatlly? done loader in commit

LOADER screenshot

To Test

1. any chain
2. any tokens
3. enter amounts
   4a. see loader in price impact spot
4. wait for message to appear (if selected token pair has no impact)
5. switch to other token with known impact
6. message warning should disappear

[github-actions]

• 🔭 GP Swap: Gnosis Protocol v2 Swap UI

[MareenG]

Hey @W3stside,

In generel it works and the messages shows up and disappear. For 1Inch and stake it didn't work I got the error loading price messages but for other tokens it worked as expected.

However, I noticed that the error messages always shows up if you insert new values see video:

Bildschirmaufnahme.2021-11-25.um.14.22.19.mov

Also it doesn't quite work if you already have inserted a high value in the token amount field.
Example
Choose WXDAI and AGVE insert a high switch amount and then change to 1Inch the message is not displayed

Bildschirmaufnahme.2021-11-25.um.14.23.39.mov

[elena-zh]

Hey @W3stside , I'd like to add some cases:

1. Swap button is disabled to me when I select WXDAI-STAKE token pair.
   
   It appeared, that a token pair does not matter: I always see Swap button disabled: https://watch.screencastify.com/v/L9yyfWSVuDdW99idTSBK
2. 'unknown' looks like a link to me, and intuitionally I want to click on it.. Is there any possibility to write 'unknown' in bold or so?
   

[elena-zh]

Should we show this warning when we select XDAI/ETH as a token to trade?

Currently, we have a task not to show fee warning when these tokens are selected #1853

[elena-zh]

It would be nice to show this warning a bit nicer in a mobile devices. See the image (iPhone 12 mini): dash is shifted on the 2nd row, looks weird

[alfetopito]

Tested only xDai

Looking great, loader behaving fine and giving the warning on unknown estimations like the infamous 1inch

But I did get a weird USD estimation (although amounts look ok) for DAI

[anxolin]

I love the loading, i think is a great solution!

I would delay the appearance fo the loadera bit maybe? at least in xDAI was loading fast and making an effect like everything was moving a lot. I was feeling it takes too much attention (maybe good, but i don't like this part a lot).

The numbers are completely weird, or this is out of this PR?

[W3stside]

@elena-zh @anxolin

[W3stside]

I love the loading, i think is a great solution!

I would delay the appearance fo the loadera bit maybe? at least in xDAI was loading fast and making an effect like everything was moving a lot. I was feeling it takes too much attention (maybe good, but i don't like this part a lot).

ok something to consider, i'll look into it today

The numbers are completely weird, or this is out of this PR?

cause of the simple function im using, so in another pr will be fixed

[elena-zh]

Loading looks great to me. However, sometimes it runs too long. In addition, sometimes I am able to get more than a huge % after a loading, but then in a sec the value was changed: https://watch.screencastify.com/v/BiSQvhtOZrFx8AWuu0ZT

But I still see Swap button disabled when there is no price impact warning

Or these changes are out of scope for this PR?

Again, I still see this issue #1916 (comment) . Please let me know if I need to open a separate issue for this.

Another nitpick, is that there is a different padding between warnings on the Swap form and confirmation modals. It would be good to have the same one

[elena-zh]

Hey @W3stside , now the 'Swap/ button is enabled, but a bit weird to see Price impact message in the confirmation modal. See the video:
https://watch.screencastify.com/v/E7RbQ4fQqbnYFfK4Vixr

[W3stside]

@anxolin @gnosis/gp-frontend @gnosis/gp-qa please post merge review if necessary, tho this one is outdated from the others merged in (safe to ignore)