Send view update

[MariaPleshkova]

Recently we've been working on some updates for the Send view, so this is what we ended up with:

How it looks in implementation right now:

How an updated design looks like:

You can find all updated layouts, components sheet, colors palette, basically everything in Figma https://www.figma.com/file/EanUbqJmPs8EMqY26j9zwo/decred-piui-master?node-id=12%3A0

Well, listing the things that has been changed:

Common

• Changed Details section. Now there are no 2 separate sections (white and gray), only common white one.

• Reordered fields according to users’ logical chain of actions. Previously there were From-To-Amount fields, now we changed to From-Amount-To order.

• Redesigned small buttons. Now they all are icons over white/blue square buttons (also added shadows if the button is white)

• Changed the behavior after clicking on “List UTXOs” link over the up right corner of the section. Now it will open a modal (instead of a page) with the list of all unspent utxos. (see List UTXO’s view / modal update #3281 )

• We also moved Send button inside the section (actually the common pattern is when the button is below sections, but it’s an exception here). That has been done for the situations when users add more than 1 recipient address, so the button has its static place and doesn’t move down with the bottom line of the section.

“Account” Field

• Now balance preview is under an account name + adeded “Balance” title.

• Now there is one more small button (Send All Funds From Selected Account) next to “Send Funds To Another Account” one. It was next to Amount field before.

• Within the dropdown show balances under account names , not in one row like before.
  

“Amount” Field

• Amount field differs a bit from all other fields. We needed to create a field when it’s possible to enter 2 sized numbers, as that’s how we mostly show amount. It means that after writing a dot the size of numbers has to be automatically reduced from 20px to 13px.
  

• Also added some new information regarding Account Balance, % of Account Balance. It shows how many % of existing balance in user’s account this user is going to send.

“Send To” Field

• The field was changed to the TextInput component from the component library.
• Added “Paste” button into the “Send” field. On a click, an address from the clipboard will be pasted. It means that users don’t need to make more than one action to paste a copied address.
  

When an address pasted, Paste button disappears.

• The button that adds new recipients addresses (the one with ‘+’ icon) basically remained the same as before if we talk about its functionality. We just changed the visual side, now it’s blue.
  After clicking on it, new empty “Amount” and “Send To” fields for one more recipient appears below the 1st one and the serial number of a recipient appears above every Send To field, including the 1st one. Also one more thing is that such fields have Delete (cross) button instead of Add (plus) one. If you click on the Cross one, you will delete this new recipient.

On the example below you can see filled addresses of the 1st and 2nd recipients and an empty field for the 3rd one.

Previously it was like this (I mean in implementation right now)

@linnutee tell me if I forgot something.

[xaur]

Recent user feedback suggests we could make the "List UTXOs" button a bit more visible:

Under the transactions tab there is a little link on the right that says "List UTXOs" which I had never seen before (not sure if it is new) and was very helpful for me to diagnose the issues I was having.

Side note: "UTXO" (unspent transaction output) acronym is a bit loaded and personally I would use "coins". It is one of the key concepts in crypto and some wallets allow advanced "coin control" or "coin selection" that allows you to pick which coins to use as inputs to transactions. But not suggesting to rename it in the scope of this issue, it should be coordinated across many views.

[bgptr]

on this