Basic send flow (#128)

* Intial page content

* Updated images and copy

* Upstream changes

* Revert "Upstream changes"

This reverts commit def8fb1.

* Intermediate update

- Updated basic send flow
- Initial screens for remaining pages

* More tweaks

- Updated review screen to simple modal
- Expanded RBF section
- Removed unused images
- Removed "Broadcast" section

pages/milestones/1-7-send.md

@@ -29,93 +29,16 @@ Below is a visual map of how we can reach this parity point based on Milestone 1
 
 The complexity of the send flow can range dramatically. Some of the features to support:
 
-- Address book
+- [Address book]({{ '/milestones/1-7-send/contacts' | relative_url }})
 - Fee estimation, recommendations and customization
-- Coin selection
-- External signers
-- Multiple signers
+- [Coin selection]({{ '/milestones/1-7-send/coin-selection' | relative_url }})
+- [External signers]({{ '/milestones/1-7-send/external-key' | relative_url }})
+- [Multiple signers]({{ '/milestones/1-7-send/multiple-keys' | relative_url }})
 - Multiple signing paths
-- Silent payments
-- Transaction batching
-- Transaction (PSBT) import and export
+- [Silent payments]({{ '/milestones/1-7-send/silent-payments' | relative_url }})
+- [Transaction batching]({{ '/milestones/1-7-send/multiple-recipients' | relative_url }})
+- [Transaction (PSBT) import and export]({{ '/milestones/1-7-send/import-export' | relative_url }})
 - Bitcoin URI scheme support
 - Clipboard support
 
-Screens and flows have not been fully designed yet. This page covers the current state. Below is an early version of the tree of user flows we may end up with.
-
-{% include picture.html
-	image = "/assets/images/send/flow.png"
-	retina = "/assets/images/send/[email protected]"
-	big = "/assets/images/send/flow-big.png"
-	alt-text = "Zoomed-out view of a tree structure of screens involved in the send flow"
-	width = 800
-	height = 807
-%}
-
-This is an initial send screen where the user has a payment request on their clipboard, and the wallet has multiple active spending paths to choose from.
-
-{% include picture.html
-	image = "/assets/images/send/send.png"
-	retina = "/assets/images/send/[email protected]"
-	big = "/assets/images/send/send-big.png"
-	alt-text = "Send screen with a notice at the top about an invoice being on the clipboard"
-	width = 800
-	height = 711
-%}
-
-The goal is to keep the primary screen simple and focused for regular transactions, and hide less frequently used options in the menu, accessed easily via the ellipsis button.
-
-{% include picture.html
-	image = "/assets/images/send/send-menu.png"
-	retina = "/assets/images/send/send-[email protected]"
-	big = "/assets/images/send/send-menu-big.png"
-	alt-text = "Overlay menu with send screen options"
-	width = 800
-	height = 318
-%}
-
-Before the transaction is broadcast, the user has another chance to review it.
-
-{% include picture.html
-	image = "/assets/images/send/approve.png"
-	retina = "/assets/images/send/[email protected]"
-	big = "/assets/images/send/approve-big.png"
-	alt-text = "Transaction summary modal for the user to approve or cancel"
-	width = 800
-	height = 526
-%}
-
-Wallet can be set up to be view only. We need to decide whether to offer some type of upgrade path to enable signing.
-
-{% include picture.html
-	image = "/assets/images/send/view-only.png"
-	retina = "/assets/images/send/view-[email protected]"
-	big = "/assets/images/send/view-only-big.png"
-	alt-text = "A send screen with a notice about the view-only state and options to upgrade to a signing wallet"
-	width = 800
-	height = 711
-%}
-
-Batch transactions can be enabled via the menu. The user can add more recipients and specify amounts for each.
-
-{% include picture.html
-	image = "/assets/images/send/batching.png"
-	retina = "/assets/images/send/[email protected]"
-	big = "/assets/images/send/batching-big.png"
-	alt-text = "Send screen with a pagination for batch transactions"
-	width = 800
-	height = 711
-%}
-
-In coin selection, users can choose which inputs to include in a transaction.
-
-{% include picture.html
-	image = "/assets/images/send/coin-selection.png"
-	retina = "/assets/images/send/coin-[email protected]"
-	big = "/assets/images/send/coin-selection-big.png"
-	alt-text = "Coin selection screen with multiple inputs to choose from"
-	width = 800
-	height = 711
-%}
-
-There is a lot missing from these designs, but they should provide a good foundation to build on.
+Screens and flows have not been fully designed yet. This page covers the current state.

pages/milestones/send/basic-send-flow.md

@@ -10,11 +10,182 @@ indent: true
 
 **Status: Early design exploration**
 
-The basic send flow contains the following features:
+## Overview
 
-- Paste address
-- Add note to self
-- etc.
+From a user's perspective, the send flow consists of three basic steps:
 
+1. Enter the transaction information
+1. Review & sign the transaction
+1. Broadcast the transaction to the bitcoin network
 
-There is a lot missing from these designs, but they should provide a good foundation to build on.
+## Send form
+
+On the send form users specify the details of the transaction. They can do this in a few different ways:
+
+- Fill out the form manually
+- Click on an invoice URI link
+- Paste an invoice from the clipboard
+- Scan a QR code
+- Import the invoice from a file. Either via drag and drop or by selecting a file.
+
+{% include picture.html
+	image = "/assets/images/send/send-form-empty.png"
+	retina = "/assets/images/send/send-[email protected]"
+	big = "/assets/images/send/send-form-empty-big.png"
+	alt-text = "Send screen with everything filled out"
+	width = 800
+	height = 551
+%}
+
+The goal is to keep the primary screen simple and focused for regular transactions, and hide less frequently used options in the menu, accessed easily via the ellipsis button.
+
+
+{% include picture.html
+	image = "/assets/images/send/send-form-menu.png"
+	retina = "/assets/images/send/send-[email protected]"
+	big = "/assets/images/send/send-form-menu-big.png"
+	alt-text = "Overlay menu with send screen options"
+	width = 800
+	height = 551
+%}
+
+After all the information has been provided, the screen looks like this.
+
+{% include picture.html
+	image = "/assets/images/send/send-form-filled.png"
+	retina = "/assets/images/send/send-[email protected]"
+	big = "/assets/images/send/send-form-filled-big.png"
+	alt-text = "Send screen with everything filled out"
+	width = 800
+	height = 551
+%}
+
+#### Clipboard detection
+
+To make it easier for users to fill out the form, the application automatically detects if payment information is saved on user's clipboard. Specifically, the following types of information are detected: 
+
+1. A full invoice (URI format)
+1. A bitcoin address
+
+{% include picture.html
+	image = "/assets/images/send/clipboard-detection.png"
+	retina = "/assets/images/send/clipboard-[email protected]"
+	big = "/assets/images/send/clipboard-detection-big.png"
+	alt-text = "Send screen with an info message that the user has a bitcoin invoice on their clipboard."
+	width = 800
+	height = 551
+%}
+
+#### Additional information
+
+Payment requests can contain additional information that the recipient wants the sender to know, such as a personal message or their name. Check out the [receive]({{ '/milestones/1-6-receive/' | relative_url }}) page for how this works.
+
+If such information is present in the payment request, it is displayed at the top of the form. Note that the additional information will not be included in the transaction data.
+
+{% include picture.html
+	image = "/assets/images/send/additional-information.png"
+	retina = "/assets/images/send/additional-[email protected]"
+	big = "/assets/images/send/additional-information-big.png"
+	alt-text = "Filled out send screen with a message from the recipient."
+	width = 800
+	height = 551
+%}
+
+Note that when importing a payment request, the address cannot be changed manually.
+
+#### Validation errors
+
+{% include picture.html
+	image = "/assets/images/send/validation-errors.png"
+	retina = "/assets/images/send/validation-[email protected]"
+	big = "/assets/images/send/validation-errors-big.png"
+	alt-text = "Filled out send screen with a message from the recipient."
+	width = 800
+	height = 551
+%}
+
+
+## Review transaction
+
+Before the transaction is broadcast, the user has another chance to review it.
+
+{% include picture.html
+	image = "/assets/images/send/review-modal.png"
+	retina = "/assets/images/send/review-[email protected]"
+	big = "/assets/images/send/review-modal-big.png"
+	alt-text = "Screen showing the transaction details."
+	width = 800
+	height = 551
+%}
+
+## Transaction confirmation
+
+After the transaction has been broadcast to the network, a success message is displayed. 
+
+{% include picture.html
+	image = "/assets/images/send/confirmation-message.png"
+	retina = "/assets/images/send/confirmation-[email protected]"
+	big = "/assets/images/send/confirmation-message-big.png"
+	alt-text = "Confirmation screen with a success message."
+	width = 800
+	height = 551
+%}
+
+#### Error handling
+
+There are scenarios in which the broadcasting of a transaction fails.
+
+{% include picture.html
+	image = "/assets/images/send/error-message.png"
+	retina = "/assets/images/send/error-[email protected]"
+	big = "/assets/images/send/error-message-big.png"
+	alt-text = "Confirmation screen with an error message."
+	width = 800
+	height = 551
+%}
+
+## Replace-By-Fee
+
+If Replace-By-Fee (RBF) is enabled, users can edit a transaction as long as it has not been confirmed by the network yet. There are two main use cases for this feature: 
+
+- accelerate the transactions
+- cancel the transaction
+
+{% include picture.html
+	image = "/assets/images/send/rbf.png"
+	retina = "/assets/images/send/[email protected]"
+	big = "/assets/images/send/rbf-big.png"
+	alt-text = "Transaction detail screen with a countdown and editing options."
+	width = 800
+	height = 712
+%}
+
+In all cases, the initial transaction gets replaced with a new transaction that has a higher fee then the initial one. The new transaction will be confirmed first, which in turn invalidates the original transaction.
+
+#### Accelerate transaction
+
+Based on the fee selected in the initial transaction, users have a differenet timeframe available to edit a transaction. The application displays a countdown with an estimated confirmation time to let users know how much time they have.
+
+{% include picture.html
+	image = "/assets/images/send/rbf-accelerate.png"
+	retina = "/assets/images/send/rbf-[email protected]"
+	big = "/assets/images/send/rbf-accelerate-big.png"
+	alt-text = "Overlay screen for cancelling the transaction."
+	width = 800
+	height = 712
+%}
+
+When accelerating transactions, users only need select the new fee option or set a custom fee rate. By default, the application chooses the highest fee from the fee option.
+
+#### Cancel transaction
+
+If a user chooses to cancel a transaction, the application replaces the initial transaction with new transaction that spends the funds back into their own wallet. 
+
+{% include picture.html
+	image = "/assets/images/send/rbf-cancel.png"
+	retina = "/assets/images/send/rbf-[email protected]"
+	big = "/assets/images/send/rbf-cancel-big.png"
+	alt-text = "Overlay screen for cancelling the transaction."
+	width = 800
+	height = 712
+%}

pages/milestones/send/coin-selection.md

@@ -10,3 +10,30 @@ indent: true
 
 **Status: Early design exploration**
 
+In coin selection, users can choose which inputs to include in a transaction. 
+
+## Enabling coin selection
+
+Users enable coin selection through the ellipsis menu. 
+
+{% include picture.html
+	image = "/assets/images/send/coin-selection-enabling.png"
+	retina = "/assets/images/send/coin-[email protected]"
+	big = "/assets/images/send/coin-selection-enabling-big.png"
+	alt-text = "Multiple screens showing the process of enabling coin selection"
+	width = 800
+	height = 366
+%}
+
+## Selecting coins (UTXOs)
+
+In the coin selection screen, users select from their list of UTXOs. The screen shows the total amount of the selected coins as well as the amount that remains to be selected.
+
+{% include picture.html
+	image = "/assets/images/send/coin-selection.png"
+	retina = "/assets/images/send/coin-[email protected]"
+	big = "/assets/images/send/coin-selection-big.png"
+	alt-text = "Coin selection screen with multiple inputs to choose from"
+	width = 800
+	height = 551
+%}

pages/milestones/send/contacts.md

@@ -10,3 +10,11 @@ indent: true
 
 **Status: Early design exploration**
 
+{% include picture.html
+	image = "/assets/images/send/contacts.png"
+	retina = "/assets/images/send/[email protected]"
+	big = "/assets/images/send/contacts-big.png"
+	alt-text = "A screen with a list of contacts and a detail screen showing contact information."
+	width = 800
+	height = 366
+%}

pages/milestones/send/external-key.md

@@ -10,3 +10,13 @@ indent: true
 
 **Status: Early design exploration**
 
+Wallet can be set up to be view only. We need to decide whether to offer some type of upgrade path to enable signing.
+
+{% include picture.html
+	image = "/assets/images/send/view-only.png"
+	retina = "/assets/images/send/view-[email protected]"
+	big = "/assets/images/send/view-only-big.png"
+	alt-text = "A send screen with a notice about the view-only state and options to upgrade to a signing wallet"
+	width = 800
+	height = 711
+%}

pages/milestones/send/import-export.md

@@ -10,3 +10,37 @@ indent: true
 
 **Status: Early design exploration**
 
+## Importing transactions
+
+### File selection
+
+{% include picture.html
+	image = "/assets/images/send/import-select.png"
+	retina = "/assets/images/send/import-[email protected]"
+	big = "/assets/images/send/import-select-big.png"
+	alt-text = "Coin selection screen with multiple inputs to choose from"
+	width = 800
+	height = 247
+%}
+
+### Drag and drop
+
+{% include picture.html
+	image = "/assets/images/send/import-drag-drop.png"
+	retina = "/assets/images/send/import-[email protected]"
+	big = "/assets/images/send/import-drag-drop-big.png"
+	alt-text = "Coin selection screen with multiple inputs to choose from"
+	width = 800
+	height = 247
+%}
+
+## Exporting transactions
+
+{% include picture.html
+	image = "/assets/images/send/export-transaction.png"
+	retina = "/assets/images/send/export-[email protected]"
+	big = "/assets/images/send/export-transaction-big.png"
+	alt-text = "Coin selection screen with multiple inputs to choose from"
+	width = 800
+	height = 391
+%}