Metamask-extension: Add token selection to the send screen

[danjm]

This task is to add the "Token" row pictured in the screenshots in #4772

Requirements include:

• (1) token row on the send screen:
  
  
  
  • should display the users token balance for the selected token as shown above
  
  
  • should show the 'Select A Token' default shown in #4772 if no token selected
  
  
  • clicking the area where the token balance or default message is displayed should open a dropdown (the same way that clicking the area in the 'From' or 'To' rows does) with all the tokens that the user has and their balances
  
  
  • the rows in the dropdown should look like the row pictured above
  
  
  • selecting a token in the dropdown should set the selected token as to change the token shown in the amount row
  
  
  • deselecting a token (i.e. returning to ETH) will need to be handled. Watch for @cjeria reply to this comment
  
  
• (2) title of the send screen:
  
  
  
  • It is not shown in the screenshots but mentioned in this comment from @bdresser : next to 'Send' in the title should be the selected token symbol. If no token is selected, it should say "ETH"
  
  
• (3) selection of tokens on the main screen:
  
  
  
  • if someone is on the main screen, then selects a token, then clicks "Send", the token they selected on the main screen should be selected in the token row dropdown by default
  
  
• (4) header adjustments when in popup view
  
  
  
  • the screenshots on #4772 show a change to the header: it has a network dropdown inline with the send screen title. This is to create more space for the rows when in the popup view. When in the popup view, the normal app header (with the fox icon, network dropdown and account menu dropdown) should not be shown. Instead, the send screen header shown in #4772 should be at the very top of the page. An example where this is already done in the popup view is with the "Deposit" modal that you can open from the main screen.
  
  
  • Note that the network dropdown should only be shown in line with the send screen title when in the popup view
  
  

I would say that 1, 2 and 3 can be done in the same PR / on the same branch, but that 4 should be done in a different PR / branch

[bdresser]

should show the 'Select A Token' default shown in #4772 if no token selected

based on @cjeria's last comment (https://github.com/MetaMask/metamask-extension/issues/4772#issuecomment-408522740) I thought we were going to use ETH as the default option (unless the user begins the flow from a token view as you mention)

mentioned in this comment from @bdresser : next to 'Send' in the title should be the selected token symbol. If no token is selected, it should say "ETH"

my comment was in reference to the label of the new row, not the title of the whole screen. If ETH is an option, we probably need a slightly more general label than Token? Like "Currency" or "Asset" or even just "Send" ?

Re: the title of the whole screen, just using "Send" in all cases makes sense to me. @cjeria ?

[bdresser]

let's make sure we do some design QA with @cjeria before this is merged

[cjeria]

@bdresser makes sense!

So..

• Eth as default token unless send flow initiated from a separate asset
• "Asset" as the label for the new token selector
• Title of the screen should remain the same "Send"

[danjm]

closed by https://github.com/MetaMask/metamask-extension/pull/6445