Multihop transfers requires a warning to the user about missing SVT tokens to pay PFS

[agatsoh]

Description

In multihop transfers it not really clear to end user that he needs to pay the SVT tokens for accessing services of the PFS https://imgur.com/e2a8bvA.png

Acceptance criteria

• On the route select screen give some kind of warning to the user that he needs SVT tokens for path finding services

Tasks

• [ ] On the route select screen give some kind of warning to the user that he needs SVT tokens for path finding services

[taleldayekh]

The UI solution which we are currently using to warn the user about a too low token balance to pay for the pfs is to disable the Transfer button. The button is only enabled once the user has enough tokens to pay for the pfs. This is perhaps not clear enough as @agatsoh points out in this issue.

I've made a design mockup for how we could tackle this (see image below). In the design I've also reworked the pfs list a bit and removed the token balance from the Transfer button. The reason for removing the token balance from the button is that it risks creating confusion between the pfs token and the actual token which the user is transferring. Since it is getting summarized in the final screen anyways, I don't see the need to add it to the button anymore.

I experimented a bit with warning the user about the pfs token balance through modals but I believe that is a bad idea. We should restrict the use of modals to more meaningful tasks and not clutter the dApp with them.

@andrevmatos @kelsos @nephix @christianbrb

[kelsos]

I like this approach :+1: Only a minor nitpicky comment. If we increase the size of the card, the price would look better centered vertically. Aligned to the checkbox instead of the first line.

[nephix]

I like it as well 👍

[andrevmatos]

I too think it's good! Would just push for, while touching it, turn those checkboxes into radiobuttons, but the warning is nice! :D