Send design merge follow-ups

[GBKS]

@rabbitholiness and I are currently working on merging his designs in the design docs and Figma file. It's a big chunk of work and there are some follow-up things, especially ensuring we have a tight design system. This is a tracker issue for those follow-ups. We can add to this as we go:

Basic send flow page:

• Remove QR code scan buttons
• Do we want a message box about having an address on the clipboard, or just the small icon button in the address field? Or both?
• "Send to" placeholder reads "or invoice". What is meant by invoice?
• Remove block status/setting bar from mobile screens
• Need to standardize the context menu component styling
• Need to standardize input validation styles (and lay out all the logic & states)
• Need to flesh out the coin flow functionality further (we had some ideas around a transaction builder, etc). This may also be something users want to see before going to the review
• Does the review screen on desktop need the "Review transaction" header? Just have one header that reads "Review transaction"?
• "You're offline" message. Can this just be in the send/review screen, so you know right away that you cannot broadcast at the moment and don't have to find out so late? Can this design be used for other errors (if there are any)?
• Let's remove the transaction sent modal? Can we just take you to the transaction screen directly?
• Split input field types and their states into a separate page (especially address input)
• Split out fee picker into a separate section or page. Include fee picking for speed-up and cancel. Consider various scenarios

Import & export:

• Add text to this page, it's just images right now
• Revise drag&drop copy and styling - the blue is pretty intense

Coin selection:

• As mentioned at the bottom of the page, add algorithm selection. Presumably, a user may want to first choose some type of ordering, and then pick inputs.
• Also mentioned, some type of integration with the coin flow for a more comprehensive transaction builder
• Additional states for when the user has picked more than needed
• Do we want to consider freezing functionality?
• Additional indicators per input if it's enough to cover the full amount?

Multiple recipients page (comment):

• Clear up the use of the term "Transaction". The features is enabled by toggling "Multiple recipients". Then each recipient is called a "Transaction". The review screen is labelled "Review transaction". Let's clearly distinguish between the transaction as a whole, and recipients.
• What are the "..." options next to recipient ("Transaction 1")
• Don't think we need a QR code button for the address input. The app does not have any sort of camera and QR code scanning support.
• Also don't think we need to show the paste button when the user has already entered an address.
• The desktop "Review transaction" screen is missing the fee
• Mobile screens shows the block status icon and the settings icon - let's remove those
• The mobile "Review transaction" screen has a back button, which the desktop one does not. Let's use the mobile pattern where we navigate left/right between the input and review screens (meaning we'd get rid of the "Back to editing" button at the bottom".
• Export before signing does not seem super useful. What's a good use case?
• Do we need to distinguish between "Sign" and "Sign and broadcast"? Maybe in "..." options?

Multiple keys:

• Add more text descriptions, it's mostly just images right now
• Lots more work to be done around multi-key wallets. Keep this page in early exploration until we've had another bigger stab at the whole thing

External key:

• Is the send page here the right approach, to show this message and ask for connecting an external signer or adding a private key? Or should we just show the send form, since users can still construct transactions?
• This page could benefit from a bit of extra text.
• Link to the import page, since that's where the view-only wallet is set up
• Can we even import private keys, considering the app uses the wallet files? Presumably yes, but maybe verify what the exact process is

Addresses:

• Not clear what the green check indicates
• Hide balance for empty addresses?
• Need mobile layouts
• What does "Get new addresses" do?
• What does "Address details" show?
• Move silent payments content to that page

Contacts:

• Split this into a version for QT parity and a "glorious vision of the future" (additional data per contact, silent payments)?
• Move silent payments content to that page

Silent payments page (comment):

• For clearing a payment request, these designs use "Create new", the web prototype uses "Clear", and the receive screen is missing the functionality. Let's standardize.
• The tabs use the term "invoice", which is not used anywhere else. Let's get rid of it.
• The QR code has a background color and padding, which the receive screen does not. Let's remove it.
• The primary button is labelled "Share request". We just use "Share" elsewhere, let's go with the simpler option.
• I like how the derived address is accessible in the review screen. I wonder if that can be more explicit somehow. The little arrow is clean, but does not explain things very well. Maybe the derived address has its own label or so? Not sure.
• Another approach is that we show an intro page to silent payment addresses the first time the user encounters them.
• The term "sub-address" does not seem quite right. I was looking at the silent payments page for guidance, but could also not find anything there. Something to look into.

Test transactions:

Add stuff for this page.

General:

• Split brand-new features that we are not sure how they fit into the milestone plan and go beyond QT parity into a "Future milestones" section in the nav (snapshot, explorer, silent payments, test transactions) Light page restructuring #146
• There's some overlap with the transaction details screen in activity. Maybe pull out that particular screen into its own page with all the various states?
• Some of button labels are very long ("Go to payment details") and there are some inconsistencies (like having "Finalize payment" & "Finalize"). Can we shorten and standardize?

[rabbitholiness]

Started working on the updates and created a branch for the updates to the basic send flow. It will:

1. Update images & mockups according to some of the items in the checklist
2. Create a new page for specs regarding the input components and probably the fee selection component

But somehow I can't check off the tasks outlined above. Is there any way you can give me edit access to this issue?