Improve the token selector

[giorgionocera]

At the moment, we are using a select (dropdown) to let the user select a token in the swap component. Due to the fact that we have a big number of tokens (which number should increase soon), we should propose a new component for the token selection.

Some suggestions:

• We can change the dropdown with a dialog
• We can add a search bar inside the dialog
• We can add other info for each asset (Available asset, price, etc.)
• We can sort by available balances

Some references:

• Uniswap
• Astroport

We need the design for such a component (also the swap one).

[giannnni]

Due to a redesign of the entire Swap Component, I could suggest a better solution that could include some extra help for users like a search field and a small "Recent Swapped Token" carousel.

You could see the new select component just below:

You can also see the Swap Component redesigned here:

[giorgionocera]

I think it is a nice solution. Thank you!
Do you have also the mobile and tablet versions?

Anyway, let's see what @angelorc thinks about it.

[giannnni]

Yes, you could see here a minimized version for mobile only (opened as a bottom sheet):

· Base version:

· Slippage menu open:

· Select Token open:

[giorgionocera]

It is very nice. However I think this blur could be an issue at the moment, but let's wait for feedback from @DavideSegullo.

[DavideSegullo]

@giorgionocera It's better if we doesn't use it if not required

[giorgionocera]

@giannnni, can we remove it? Or is it required?

[giannnni]

Ok, let's move to solid color #311D3E

[giorgionocera]

Okay, so now let's only wait for feedback from @angelorc 😄

[giorgionocera]

As from the meeting with @angelorc, we need:

• reduce margins in tokens selector;
• move the FanToken name under the symbol.
  So please @giannnni , let's perform these edits! 💪

[giannnni]

I fixed the table reducing margins and moving fantoken name under symbol.
Tell me if it's enough or you need less margins (I suggest not).

Here my proposal:

[giorgionocera]

Yeah, I think it could be nice! Thank you @giannnni !
@DavideSegullo we can move it in development!

[giorgionocera]

This also includes issue #335.

[giorgionocera]

Thank you!

[giorgionocera]

I think that in the desktop version the information on the amount of token available should be visible at every moment of the swap action. We need to bring it back.