Metamask-extension: New UI: Send Token Screen Improvements

[danfinlay]

@cjeria

We got a user in our support system who was frustrated with our send token screen. In their case, they had an account with many UTK tokens, but no ether, resulting in this experience:

They were frustrated because they knew they had tokens, and this screen:

• [ ] Should show the relevant token's balance for selected accounts.
• [x] The "insufficient funds" warning should distinguish between "insufficient ether" and "insufficient tokens".

[danjm]

@danfinlay The second item on that list was taken care of by the recently merged: https://github.com/MetaMask/metamask-extension/pull/4694

[cjeria]

Here's a suggested solution. How about we add an extra dropdown for accounts that hold tokens?

[cjeria]

Accounts that hold tokens will display the dropdown. Accounts selected should still show the ETH/fiat values for gas purposes. The Quantity dropdown should change to token (sorry was being lazy and didn't update that).

[cjeria]

Here's the flow

[bdresser]

Looks good @cjeria! Makes sense to show the new row only if the account has tokens. In general I think this will solve a lot of headaches.

• ~Will users miss the account switcher in the top-right? I often click "Send," then switch to my relevant account. Could perhaps reduce some padding to help it all fit? Maybe worth some informal interviews.~
• If I am sending ETH from an account with tokens, I might feel weird about the blank field. Why not re-label the field something generic (like "Send" or "Currency") and include ETH as the default option?

[danjm]

@cjeria How should we handle going from a selected token back to ETH? Should the first item in the token dropdown be ETH? Or should there be some sort of deselect button (like an 'X') somewhere?

[cjeria]

@danjm the first option in the dropdown should be ETH. If the user starts the send flow from a token view, that token should be populated in the token field.

[bdresser]

@cjeria @danjm my only open question is what the label for the form field should be. token isn't really accurate since we're including ETH. currency ? asset ?

I know kyo is busy on other things but I'm happy to get a bounty up if it makes sense.

[cjeria]

@bdresser maybe coins makes more sense for this category. Coinbase uses this term and categorizes eth under "coins".

[bdresser]

Per convo with @cjeria, let's start with asset as the label.

Flagging for @omnat - specifically, is anyone confused by showing the asset amount alongside it's ticker symbol in the dropdown? We want to show how much they have, but don't want to make it sound like they're automatically sending the max.

Will move forward with development, can make these tweaks easily once it's in production.

[omnat]

No one has mentioned it yet in the tests. Could prompt it more in the next tests to see if this is confusing. Will comment if tweaks needed.

[cjeria]

This insight was uncovered during our first mobile prototype user testing sessions (before @omnat started). I had stitched up the entire send flow and used the same send screen UI as in extension. The whole screen was interactive as well. The reason we haven't seen it in recent tests is because we haven't been looking the send flow very closely.

We'll want to take a closer look at the send screen (with the new token selection option) and entire send flow for both the extension and mobile (crossover insights) in the near future!