summaryrefslogtreecommitdiff
path: root/design-documents
diff options
context:
space:
mode:
authorChristian Blättler <blatc2@bfh.ch>2024-03-11 20:47:09 +0100
committerChristian Blättler <blatc2@bfh.ch>2024-03-11 20:47:09 +0100
commit7af0b3eb8b07027bb8dc079a08abb0bb44662f99 (patch)
tree73f80ce1efb4a6c5727f451615ac2ddd901e9458 /design-documents
parent9b0678d5fb4b7ffafae92539797858a84680c656 (diff)
parentf3cf0a283c328ebc71cfdbcf2894429066014a96 (diff)
downloaddocs-7af0b3eb8b07027bb8dc079a08abb0bb44662f99.tar.gz
docs-7af0b3eb8b07027bb8dc079a08abb0bb44662f99.tar.bz2
docs-7af0b3eb8b07027bb8dc079a08abb0bb44662f99.zip
Merge branch 'master' into feature/tokensfeature/tokens
Diffstat (limited to 'design-documents')
-rw-r--r--design-documents/024-age-restriction.rst2
-rw-r--r--design-documents/053-wallet-ui.rst699
-rw-r--r--design-documents/054-dynamic-form.rst14
-rw-r--r--design-documents/055-wallet-problem-report.rst33
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/READE22
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/add-exchange/1-balance.pngbin0 -> 30910 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/add-exchange/10-testkudos-in-the-list.pngbin0 -> 32709 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/add-exchange/11-select-test-kudos.pngbin0 -> 49363 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/add-exchange/2-click-get-cash.pngbin0 -> 36330 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/add-exchange/3-click-add-exchange.pngbin0 -> 42139 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/add-exchange/4-input-URL.pngbin0 -> 56001 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/add-exchange/5-click-next.pngbin0 -> 37919 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/add-exchange/6-review-tos.pngbin0 -> 72501 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/add-exchange/7-accept-tos.pngbin0 -> 37051 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/add-exchange/8-confirm.pngbin0 -> 30910 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/add-exchange/9-click-get-cash.pngbin0 -> 36330 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/deposit/1-balance.pngbin0 -> 35087 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/deposit/10-balance.pngbin0 -> 47824 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/deposit/2-click-send.pngbin0 -> 47464 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/deposit/3-click-deposit.pngbin0 -> 35569 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/deposit/4-click-add-account.pngbin0 -> 54335 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/deposit/5-complete-form.pngbin0 -> 60639 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/deposit/6-click-add.pngbin0 -> 59490 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/deposit/7-confirm-deposit.pngbin0 -> 60419 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/deposit/8-show-transaction.pngbin0 -> 65622 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/deposit/9-after-deposit-confirmed.pngbin0 -> 76645 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/dev-tools.pngbin0 -> 95380 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/invoice/1-balance.pngbin0 -> 36026 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/invoice/10-confirm-transfer.pngbin0 -> 55732 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/invoice/11-show-history.pngbin0 -> 49646 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/invoice/2-click-add.pngbin0 -> 48365 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/invoice/3-input-six.pngbin0 -> 48827 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/invoice/4-click-invoice.pngbin0 -> 62019 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/invoice/5-complete-form.pngbin0 -> 64943 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/invoice/6-create-invoice.pngbin0 -> 73127 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/invoice/7-copy-qr-open-qr-page.pngbin0 -> 48070 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/invoice/8-paste-URI.pngbin0 -> 63650 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/invoice/9-click-open.pngbin0 -> 52823 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/payment/1-load-shop.pngbin0 -> 2449960 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/payment/10-click-article-URL.pngbin0 -> 76691 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/payment/2-click-first-article.pngbin0 -> 83759 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/payment/3-confirm-payment.pngbin0 -> 442385 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/payment/4-click-refund.pngbin0 -> 101347 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/payment/5-click-request-refund.pngbin0 -> 41768 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/payment/6-accept-refund.pngbin0 -> 85837 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/payment/7-click-refund-detail.pngbin0 -> 69279 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/payment/8-show-history.pngbin0 -> 81889 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/payment/9-click-receipt.pngbin0 -> 85837 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/scan-qr-code.pngbin0 -> 36358 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/settings-developer-mode.pngbin0 -> 170233 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/settings-normal-mode.pngbin0 -> 47851 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/store-installed.pngbin0 -> 32548 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/store-payment.pngbin0 -> 28060 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/store-withdraw.pngbin0 -> 20772 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/transfer/1-initial-balance.pngbin0 -> 36311 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/transfer/10-open-URI.pngbin0 -> 51973 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/transfer/11-accept-transfer.pngbin0 -> 49787 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/transfer/12-show-history.pngbin0 -> 47985 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/transfer/2-click-send.pngbin0 -> 47235 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/transfer/3-amount-five.pngbin0 -> 47547 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/transfer/4-send-wallet.pngbin0 -> 56300 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/transfer/5-complete-form.pngbin0 -> 58617 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/transfer/6-confirm-transfer.pngbin0 -> 77092 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/transfer/7-show-history.pngbin0 -> 55329 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/transfer/8-scan-qr.pngbin0 -> 48384 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/transfer/9-paste-URI.pngbin0 -> 64510 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/withdrawal/10-transaction-completed.pngbin0 -> 44344 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/withdrawal/11-history-after-withdraw.pngbin0 -> 35260 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/withdrawal/2-empty-wallet.pngbin0 -> 29113 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/withdrawal/3-get-digital-cash.pngbin0 -> 36120 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/withdrawal/4-select-kudos.pngbin0 -> 47910 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/withdrawal/5-set-amount-five.pngbin0 -> 48389 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/withdrawal/6-withdraw-from-bank.pngbin0 -> 52203 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/withdrawal/7-review-tos.pngbin0 -> 69841 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/withdrawal/8-accept-tos.pngbin0 -> 50475 bytes
-rw-r--r--design-documents/wallet-screenshots/webex-wallet/withdrawal/9-confirm-withdraw.pngbin0 -> 148862 bytes
76 files changed, 588 insertions, 182 deletions
diff --git a/design-documents/024-age-restriction.rst b/design-documents/024-age-restriction.rst
index ee478ee1..0445aa6d 100644
--- a/design-documents/024-age-restriction.rst
+++ b/design-documents/024-age-restriction.rst
@@ -247,7 +247,7 @@ changed since the given timestamp.
// Similar as for ``.denoms``, if the query parameter ``last_issue_date``
// was provided by the client, the exchange will only return the keys that
// have changed since the given timestamp.
- age_restricted_denoms: Denom[];
+ age_restricted_denoms: DenomCommon[];
//...
}
diff --git a/design-documents/053-wallet-ui.rst b/design-documents/053-wallet-ui.rst
index c36d4759..99640ceb 100644
--- a/design-documents/053-wallet-ui.rst
+++ b/design-documents/053-wallet-ui.rst
@@ -40,20 +40,24 @@ Additionaly the document COULD defined the components of the UI. If one of this
properties is defined in the spec the implementation must implement it. The specification
should be minimal to achieve the objective in the description.
-* **Info**: Spec of information that the user should have access. The type of info
+* **Info**. Spec of information that the user should have access. The type of info
could be a field (id and value) or a banner (information and instructions).
The spec will help to reuse the text for i18n across apps and defined
-* **Inputs**: Spec of information need to provide in current screen. The type of input,
+* **Inputs**. Spec of information need to provide in current screen. The type of input,
range of values and validation should be defined if necessary.
-* **Actions**: Spec of buttons and interactable elements that will have a significant
+* **Actions**. Spec of buttons and interactable elements that will have a significant
change in the current state. It should also mention navigation when applicable.
-* **Layout**: Spec position of elements when needed. The spec should be "soft" in a sense
+* **Layout**. Spec position of elements when needed. The spec should be "soft" in a sense
that elements should be easy to find following directions like "close to X" or
"at the start/end of the screen".
+* **Screenshots**. Should be provided for all wallet implementations and kept
+ up to date, to ensure that they can be used to aid in UI/UX and QA
+ discussions.
+
Screen should be defined using the most relaxed definition that are good enough to
be clear for the user. Platform will use this definition and adapt to the differences
on the platform taking advantange of platform API and screen sizes.
@@ -72,252 +76,583 @@ Proposed Solutions
List of all screens with the defined properties.
+.. _balance-list-ref:
+
+balance-list
+------------
+
+This screen shows a currency-scoped list of the balances stored in the wallet,
+and includes information about the total, incoming, and outgoing amounts, as
+well as the currency scope information for each item.
+
+Info
+^^^^
+
+* List of balances in the wallet, where each item contains:
+
+ * Total amount with currency (see :doc:`051-fractional-digits`).
+ * Incoming amount (money pending to arrive).
+ * Outgoing amount (money pending to leave).
+ * Currency scope information (see :doc:`035-regional-currencies`).
+
+Actions
+^^^^^^^
+
+* **View transactions**. Clicking on a balance item should take you to the
+ transaction list (:ref:`transaction-list-ref`) associated with that balance.
+
+Screenshots
+^^^^^^^^^^^
+
++-----------+----------------------------------------------------------------+
+| Platform | Screenshot |
++===========+================================================================+
+| WebEx | .. image:: ../screenshots/balance-list-firefox-latest.png |
++-----------+----------------------------------------------------------------+
+| Android | .. image:: ../screenshots/balance-list-android-latest.png |
+| | :width: 30% |
++-----------+----------------------------------------------------------------+
+| iOS | .. image:: ../screenshots/balance-list-1-ios-latest.png |
+| | :width: 30% |
+| | .. image:: ../screenshots/balance-list-2-ios-latest.png |
+| | :width: 30% |
++-----------+----------------------------------------------------------------+
+
+
+.. _transaction-list-ref:
+
+transaction-list
+----------------
+
+This screen shows a list of all the transactions associated with a given
+currency scope.
+
+Info
+^^^^
+
+* Total amount and currency (see :doc:`051-fractional-digits`).
+* List of transactions associated with the currency scope, with pending
+ transactions on top, and where each item contains the following:
+
+ * **Title**. It depends on the transaction type. It can be the exchange URL
+ (e.g. exchange.demo.taler.net), a description of the type of transaction
+ (e.g. Deposit, Invoice, Payment, etc.), the name of the merchant paid
+ (e.g. Essay Shop), etc.
+ * **Summary**. It provides complementary information about the transaction
+ for the user, such as the status of the transaction (e.g. “Waiting for
+ confirmation,” “KYC required,” an error message, etc.). (The summary is
+ provided by wallet-core, along with internationalized versions.)
+ * **Timestamp**. The moment when the transaction was created. Ideally, it
+ should be shown with minimal precision, only showing the minutes, hours or
+ days that have elapsed.
+ * **Amount**. The positive or negative impact that the transaction has in
+ the total balance of the currency scope. It should be made clear whether
+ the amount of the transaction is positive or negative, ideally with a sign
+ (+/-) and a color (green/red).
+ * **Pending**. It should be indicated whether the transaction is pending or
+ finished. This can be done with a small badge and with different colors,
+ however, it should be always clear and communicate the message
+ effectively.
+
+Actions
+^^^^^^^
+
+* **Send**. The transaction list should include a button that allows the user
+ to initiate transactions that result in money being sent, such as deposits
+ and peer push payments.
+* **Receive**. The transaction list should also include a button that allows
+ the user to initiate transactions that result in money being received, such
+ as withdrawals and peer pull payments.
+* **View transaction details**. When clicking on a transaction, the user
+ should be taken to its corresponding transaction details depending on the
+ type of the transaction clicked.
+* **Select transaction(s)**. The user should be able to select one or more
+ transactions to perform specific bulk actions, such as deleting. The
+ interaction that triggers this action might differ across platforms. For
+ example, in Android this would be achieved by double pressing a transaction
+ (to activate selection mode) and then clicking other transactions to be
+ selected. On iOS, this could be achieved using an “Edit” button in the
+ toolbar that reveals checkboxes that allow the user to select the desired
+ transactions.
+* **Delete transaction(s)**. This could be achieved in bulk via selection
+ mode, or individually for each transaction via a menu or a button. Either
+ way, performing a deletion should always show a confirmation menu before
+ doing the actual deletion.
+
+Screenshots
+^^^^^^^^^^^
+
++-----------+----------------------------------------------------------------+
+| Platform | Screenshot |
++===========+================================================================+
+| WebEx | .. image:: ../screenshots/transaction-list-firefox-latest.png |
++-----------+----------------------------------------------------------------+
+| Android | .. image:: ../screenshots/transaction-list-android-latest.png |
+| | :width: 30% |
++-----------+----------------------------------------------------------------+
+| iOS | .. image:: ../screenshots/transaction-list-ios-latest.png |
+| | :width: 30% |
++-----------+----------------------------------------------------------------+
+
+
+.. _cta-withdraw-ref:
+
cta-withdraw
------------
-``Description``: this screen is used for the confirmation of a manual withdrawal,
-bank-integrated witdrawals and exchange withdrawals.
-the success of this operation will be an increase of the balance in the wallet.
-fee, restrictions and ETA should be clear for the user.
+This screen is used for the confirmation of a manual withdrawal,
+bank-integrated witdrawals and exchange withdrawals. the success of this
+operation will be an increase of the balance in the wallet. fee, restrictions
+and ETA should be clear for the user.
+
+Info
+^^^^
+
+* exchange to be used showing the URL
+* table of details of the operation: use the :ref:`operation-table-details-ref` screen
+* starting currency: if the exchange has the currency conversion service enabled user should be able to the details based on the wire transfer currency
+* taler URI: show copy button or QR to complete the operation with another device
-``Info``:
- * exchange to be used showing the URL
- * table of details of the operation: use the ``operation-table-details`` screen
- * starting currency: if the exchange has the currency conversion service enabled user should be able to the details based on the wire transfer currency
- * taler URI: show copy button or QR to complete the operation with another device
+Inputs
+^^^^^^
-``Inputs``:
- * age restriction: allow the selection of the restriction in the age group possible by the exchange
- * service provider: allow the selection of different exchange
+* age restriction: allow the selection of the restriction in the age group possible by the exchange
+* service provider: allow the selection of different exchange
-``Actions``:
- * confirm operation: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
- * review and confirm ToS: if the current selected exchange has a version of ToS that the user didn't yet accepted, use the ``accept-tos`` screen
- * cancel: user will be redirected to ``balance``
+Actions
+^^^^^^^
+
+* **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
+* **review and confirm ToS**: if the current selected exchange has a version of ToS that the user didn't yet accepted, use the :ref:`accept-tos-ref` screen
+* **cancel**: user will be redirected to ``balance``
.. attention::
User should be able to play with the amount, not possible in the current design
+Screenshots
+^^^^^^^^^^^
+
++-----------+----------------------------------------------------------------+
+| Platform | Screenshot |
++===========+================================================================+
+| WebEx | .. image:: ../screenshots/cta-withdraw-firefox-latest.png |
++-----------+----------------------------------------------------------------+
+| Android | .. image:: ../screenshots/cta-withdraw-2-android-latest.png |
+| | :width: 30% |
++-----------+----------------------------------------------------------------+
+| iOS | .. image:: ../screenshots/cta-withdraw-ios-latest.png |
+| | :width: 30% |
++-----------+----------------------------------------------------------------+
+
+
+.. _cta-wire-transfer-ref:
+
cta-wire-transfer
-----------------
-``Description``: this screen is used to show the user the information for
-the wire transfer to complete a manual withdrawal operation.
+This screen is used to show the user the information for the wire transfer to
+complete a manual withdrawal operation.
+
+Info
+^^^^
+
+* wire transfer subject to be used (first, most important)
+* target bank account to transfer funds to (e.g. IBAN)
+* total amount to transfer in the wire transfer currency
+* button to copy ``payto://`` URI with the information to clipboard
+
+Actions
+^^^^^^^
+
+* **abort**: aborts the withdrawal operation
+* **menu**: go back to the main balances list (operation continues in background)
+* **automatic**: screen changes to "cta-withdraw-done" upon completion
-``Info``:
- * wire transfer subject to be used (first, most important)
- * target bank account to transfer funds to (e.g. IBAN)
- * total amount to transfer in the wire transfer currency
- * button to copy ``payto://`` URI with the information to clipboard
+Screenshots
+^^^^^^^^^^^
-``Actions``:
- * abort: aborts the withdrawal operation
- * menu: go back to the main balances list (operation continues in background)
- * automatic: screen changes to "cta-withdraw-done" upon completion
++-----------+------------------------------------------------------------------+
+| Platform | Screenshot |
++===========+==================================================================+
+| WebEx | .. image:: ../screenshots/cta-wire-transfer-firefox-latest.png |
++-----------+------------------------------------------------------------------+
+| Android | .. image:: ../screenshots/cta-wire-transfer-1-android-latest.png |
+| | :width: 30% |
+| | .. image:: ../screenshots/cta-wire-transfer-2-android-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
+| iOS | .. image:: ../screenshots/cta-wire-transfer-1-ios-latest.png |
+| | :width: 30% |
+| | .. image:: ../screenshots/cta-wire-transfer-2-ios-latest.png |
+| | :width: 30% |
+| | .. image:: ../screenshots/cta-wire-transfer-3-ios-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
-.. image:: ../screenshots/cta-wire-transfer-firefox-latest.png
+
+.. _cta-withdraw-done-ref:
cta-withdraw-done
-----------------
-``Description``: this screen is used to show the user the information for
-a completed withdraw operation (bank-integrated or manual)
+This screen is used to show the user the information for a completed withdraw
+operation (bank-integrated or manual)
+
+Info
+^^^^
+
+* amount wired (hidden if no fees)
+* fees paid (hidden if no fees)
+* total amount withdrawn into wallet (effective balance change)
+* exchange base URL
+* date
+
+Actions
+^^^^^^^
+
+* **delete**: deletes information about the withdrawal operation
-``Info``:
- * amount wired (hidden if no fees)
- * fees paid (hidden if no fees)
- * total amount withdrawn into wallet (effective balance change)
- * exchange base URL
- * date
+Screenshots
+^^^^^^^^^^^
-``Actions``:
- * delete: deletes information about the withdrawal operation
++-----------+------------------------------------------------------------------+
+| Platform | Screenshot |
++===========+==================================================================+
+| WebEx | .. image:: ../screenshots/cta-withdraw-done-firefox-latest.png |
++-----------+------------------------------------------------------------------+
+| Android | .. image:: ../screenshots/cta-withdraw-done-android-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
+| iOS | .. image:: ../screenshots/cta-withdraw-done-ios-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
-.. image:: ../screenshots/cta-withdraw-done-firefox-latest.png
+.. _cta-url-entry-ref:
cta-url-entry
-------------
-``Description``: this screen allows the user to scan a QR code, scan an NFC
-tag, or enter a taler://-URL. Its implementation may differ significantly
-between platforms. For example, scanning NFC tags may be fully automated,
-scanning QR codes may involve some system applications, and maybe the dialog
-only allows the URL entry *or* the camera but not both at the same time,
-depending on implementation specifics.
+This screen allows the user to scan a QR code, scan an NFC tag, or enter a
+taler://-URL. Its implementation may differ significantly between
+platforms. For example, scanning NFC tags may be fully automated, scanning QR
+codes may involve some system applications, and maybe the dialog only allows
+the URL entry *or* the camera but not both at the same time, depending on
+implementation specifics.
+
+Info
+^^^^
+
+* camera with current image to enable user to focus on QR code
+* current URL, with information if it is not well-formed for GNU Taler
+* possibly status information on NFC reader (if available)
+
+Actions
+^^^^^^^
+
+* **open**: if entered manually, open URL as-entered (otherwise open is automatic)
+* **back**: return to previous view
-``Info``:
- * camera with current image to enable user to focus on QR code
- * current URL, with information if it is not well-formed for GNU Taler
- * possibly status information on NFC reader (if available)
+Screenshots
+^^^^^^^^^^^
-``Actions``:
- * open: if entered manually, open URL as-entered (otherwise open is automatic)
- * back: return to previous view
++-----------+------------------------------------------------------------------+
+| Platform | Screenshot |
++===========+==================================================================+
+| WebEx | .. image:: ../screenshots/cta-url-entry-firefox-latest.png |
++-----------+------------------------------------------------------------------+
+| Android | .. image:: ../screenshots/cta-url-entry-1-android-latest.png |
+| | :width: 30% |
+| | .. image:: ../screenshots/cta-url-entry-2-android-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
-.. image:: ../screenshots/cta-url-entry-firefox-latest.png
+.. _cta-payment-ref:
cta-payment
-----------
-``Description``: this screen is used for the confirmation of a payment to a merchant.
-the success of this operation will be an decrease of the balance in the wallet
-and save a ticket/invoice of the purchase.
-fee, restrictions and ETA should be clear for the user.
+This screen is used for the confirmation of a payment to a merchant. the
+success of this operation will be an decrease of the balance in the wallet and
+save a ticket/invoice of the purchase. fee, restrictions and ETA should be
+clear for the user.
-``Info``:
- * merchant offering the order showing the URL
- * order summary
- * table of details of the operation: use the ``operation-table-details`` screen
- * receipt: order id
- * payment deadline: absolute time before the claimed order expires
- * taler URI: show copy button or QR to complete the operation with another device
- * cant pay desc: if the user has enough balance but unable to use it
- * payment status: if the
+Info
+^^^^
-``Actions``:
- * confirm operation: if the payment is possible, on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
- * get more cash: if there is not enough balance, it will be redirected to ``cta-witddraw``
- * cancel: user will be redirected to ``balance``
+* merchant offering the order showing the URL
+* order summary
+* table of details of the operation: use the :ref:`operation-table-details-ref` screen
+* receipt: order id
+* payment deadline: absolute time before the claimed order expires
+* taler URI: show copy button or QR to complete the operation with another device
+* cant pay desc: if the user has enough balance but unable to use it
+* payment status: if the
-.. image:: ../screenshots/cta-payment-firefox-latest.png
+Actions
+^^^^^^^
+
+* **confirm operation**: if the payment is possible, on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
+* **get more cash**: if there is not enough balance, it will be redirected to :ref:`cta-withdraw-ref`
+* **cancel**: user will be redirected to ``balance``
+
+Screenshots
+^^^^^^^^^^^
+
++-----------+------------------------------------------------------------------+
+| Platform | Screenshot |
++===========+==================================================================+
+| WebEx | .. image:: ../screenshots/cta-payment-firefox-latest.png |
++-----------+------------------------------------------------------------------+
+| Android | .. image:: ../screenshots/cta-payment-android-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
+| iOS | .. image:: ../screenshots/cta-payment-ios-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
+
+
+.. _cta-payment-paid-ref:
cta-payment-paid
----------------
-``Description``: this screen is used to show information with details
-about a historic payment.
+This screen is used to show information with details about a historic payment.
+
+Info
+^^^^
+
+* merchant offering the order showing the URL
+* order summary
+* table of details of the operation: use the :ref:`operation-table-details-ref` screen
+* receipt: order id
+* payment status: if the order was refunded
+
+Actions
+^^^^^^^
+
+* **delete**: delete information about the transaction
+* **back**: user will be redirected to ``balance``
+
+Screenshots
+^^^^^^^^^^^
-``Info``:
- * merchant offering the order showing the URL
- * order summary
- * table of details of the operation: use the ``operation-table-details`` screen
- * receipt: order id
- * payment status: if the order was refunded
++-----------+------------------------------------------------------------------+
+| Platform | Screenshot |
++===========+==================================================================+
+| WebEx | .. image:: ../screenshots/cta-payment-paid-firefox-latest.png |
++-----------+------------------------------------------------------------------+
+| Android | .. image:: ../screenshots/cta-payment-paid-android-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
+| iOS | .. image:: ../screenshots/cta-payment-paid-1-ios-latest.png |
+| | :width: 30% |
+| | .. image:: ../screenshots/cta-payment-paid-2-ios-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
-``Actions``:
- * delete: delete information about the transaction
- * back: user will be redirected to ``balance``
-.. image:: ../screenshots/cta-payment-paid-firefox-latest.png
+.. _cta-deposit-ref:
cta-deposit
------------
-``Description``: this screen is used for the confirmation of a deposit.
-the success of this operation will be an decrease of the balance in the wallet
-and save a deposit ticket for reference.
-fee, restrictions and ETA should be clear for the user.
+This screen is used for the confirmation of a deposit. the success of this
+operation will be an decrease of the balance in the wallet and save a deposit
+ticket for reference. fee, restrictions and ETA should be clear for the user.
-``Info``:
- * bank account where the money is going to
- * table of details of the operation: use the ``operation-table-details`` screen
+Info
+^^^^
-``Actions``:
- * confirm operation: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
- * cancel: user will be redirected to ``balance``
+* bank account where the money is going to
+* table of details of the operation: use the :ref:`operation-table-details-ref` screen
+
+Actions
+^^^^^^^
+
+* **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
+* **cancel**: user will be redirected to ``balance``
.. attention::
User should be able to play with the amount, not possible in the current design
+Screenshots
+^^^^^^^^^^^
+
++-----------+------------------------------------------------------------------+
+| Platform | Screenshot |
++===========+==================================================================+
+| WebEx | .. image:: ../screenshots/cta-deposit-firefox-latest.png |
++-----------+------------------------------------------------------------------+
+| Android | .. image:: ../screenshots/cta-deposit-android-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
+| iOS | .. image:: ../screenshots/cta-deposit-1-ios-latest.png |
+| | :width: 30% |
+| | .. image:: ../screenshots/cta-deposit-2-ios-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
+
+
+.. _cta-peer-pull-initiate-ref:
cta-peer-pull-initiate
----------------------
-``Description``: this screen is used for the confirmation of the creation of
-a peer pull transaction or invoice to request money from another wallet.
-the success of this operation will not change the balance immediately in the wallet
-and allow the user to share a taler URI to the payer.
-fee, restrictions and ETA should be clear for the user.
+This screen is used for the confirmation of the creation of a peer pull
+transaction or invoice to request money from another wallet. the success of
+this operation will not change the balance immediately in the wallet and allow
+the user to share a taler URI to the payer. fee, restrictions and ETA should
+be clear for the user.
-``Info``:
- * exchange to be used showing the URL
- * table of details of the operation: use the ``operation-table-details`` screen
+Info
+^^^^
-``Inputs``:
- * subject: short description of the transaction
- * expiration: absolute time/date after which the invoice is not valid anymore
- * service provider: allow the selection of different exchange
+* exchange to be used showing the URL
+* table of details of the operation: use the :ref:`operation-table-details-ref` screen
-``Actions``:
- * confirm operation: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
- * review and confirm ToS: if the current selected exchange has a version of ToS that the user didn't yet accepted, use the ``accept-tos`` screen
- * cancel: user will be redirected to ``balance``
+Inputs
+^^^^^^
+
+* **subject**: short description of the transaction
+* **expiration**: absolute time/date after which the invoice is not valid anymore
+* **service provider**: allow the selection of different exchange
+
+Actions
+^^^^^^^
+
+* **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
+* **review and confirm ToS**: if the current selected exchange has a version of ToS that the user didn't yet accepted, use the :ref:`accept-tos-ref` screen
+* *cancel*: user will be redirected to ``balance``
.. attention::
Is the invoice creation always free of charge or does the exchange have a mechanism
to impose a fee to pay on creation?
+Screenshots
+^^^^^^^^^^^
+
++-----------+----------------------------------------------------------------------+
+| Platform | Screenshot |
++===========+======================================================================+
+| WebEx | .. image:: ../screenshots/cta-peer-pull-initiate-firefox-latest.png |
++-----------+----------------------------------------------------------------------+
+| Android | .. image:: ../screenshots/cta-peer-pull-initiate-android-latest.png |
+| | :width: 30% |
++-----------+----------------------------------------------------------------------+
+| iOS | .. image:: ../screenshots/cta-peer-pull-initiate-ios-latest.png |
+| | :width: 30% |
++-----------+----------------------------------------------------------------------+
+
+
+.. _cta-peer-pull-confirm-ref:
cta-peer-pull-confirm
---------------------
-``Description``: this screen is used for the confirmation of the payment of
-a peer pull transaction or invoice to send money from another wallet.
-the success of this operation will be an will decrease the balance in the wallet.
-fee, restrictions and ETA should be clear for the user.
+This screen is used for the confirmation of the payment of a peer pull
+transaction or invoice to send money from another wallet. the success of this
+operation will be an will decrease the balance in the wallet. fee,
+restrictions and ETA should be clear for the user.
+
+Info
+^^^^
-``Info``:
- * exchange to be used showing the URL
- * subject: short description of the transaction
- * table of details of the operation: use the ``operation-table-details`` screen
- * expiration: absolute time/date after which the invoice is not valid anymore
+* exchange to be used showing the URL
+* subject: short description of the transaction
+* table of details of the operation: use the :ref:`operation-table-details-ref` screen
+* expiration: absolute time/date after which the invoice is not valid anymore
-``Actions``:
- * confirm operation: if the payment is possible, on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
- * get more cash: if there is not enough balance, it will be redirected to ``cta-witddraw``
- * cancel: user will be redirected to ``balance``
+Actions
+^^^^^^^
+
+* **confirm operation**: if the payment is possible, on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
+* **get more cash**: if there is not enough balance, it will be redirected to :ref:`cta-withdraw-ref`
+* **cancel**: user will be redirected to ``balance``
cta-peer-push-initiate
----------------------
-``Description``: this screen is used for the confirmation of the creation of
-a peer push transaction or transfer money to another wallet.
-the success of this operation will reduce the balance immediately in the wallet
-and allow the user to share a taler URI to the receiver.
-fee, restrictions and ETA should be clear for the user.
+This screen is used for the confirmation of the creation of a peer push
+transaction or transfer money to another wallet. the success of this
+operation will reduce the balance immediately in the wallet and allow the user
+to share a taler URI to the receiver. fee, restrictions and ETA should be
+clear for the user.
+
+Info
+^^^^
+
+* table of details of the operation: use the ``operation-table-details`` screen
+
+Inputs
+^^^^^^
+
+* **subject**: short description of the transaction
+* **expiration**: absolute time/date after which the transfer is not valid anymore
+
+Actions
+^^^^^^^
-``Info``:
- * table of details of the operation: use the ``operation-table-details`` screen
+* **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
+* **cancel**: user will be redirected to ``balance``
-``Inputs``:
- * subject: short description of the transaction
- * expiration: absolute time/date after which the transfer is not valid anymore
+Screenshots
+^^^^^^^^^^^
-``Actions``:
- * confirm operation: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
- * cancel: user will be redirected to ``balance``
++-----------+----------------------------------------------------------------------+
+| Platform | Screenshot |
++===========+======================================================================+
+| WebEx | .. image:: ../screenshots/cta-peer-push-initiate-firefox-latest.png |
++-----------+----------------------------------------------------------------------+
+| Android | .. image:: ../screenshots/cta-peer-push-initiate-android-latest.png |
+| | :width: 30% |
++-----------+----------------------------------------------------------------------+
+| iOS | .. image:: ../screenshots/cta-peer-push-initiate-ios-latest.png |
+| | :width: 30% |
++-----------+----------------------------------------------------------------------+
+
+
+.. _cta-peer-push-confirm-ref:
cta-peer-push-confirm
---------------------
-``Description``: this screen is used for the confirmation of the acceptance of
-a peer push transaction or transfer money to this wallet.
-the success of this operation will be an will decrease the balance in the wallet.
-fee, restrictions and ETA should be clear for the user.
+This screen is used for the confirmation of the acceptance of a peer push
+transaction or transfer money to this wallet. the success of this operation
+will be an will decrease the balance in the wallet. fee, restrictions and ETA
+should be clear for the user.
+
+Info
+^^^^
-``Info``:
- * subject: short description of the payment
- * expiration: absolute time/date after which the invoice is not valid anymore
- * table of details of the operation: use the ``operation-table-details`` screen
+* subject: short description of the payment
+* expiration: absolute time/date after which the invoice is not valid anymore
+* table of details of the operation: use the ``operation-table-details`` screen
-``Actions``:
- * confirm operation: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
- * review and confirm ToS: if the current selected exchange has a version of ToS that the user didn't yet accepted, use the ``accept-tos`` screen
- * cancel: user will be redirected to ``balance``
+Actions
+^^^^^^^
+* **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
+* **review and confirm ToS**: if the current selected exchange has a version of ToS that the user didn't yet accepted, use the :ref:`accept-tos-ref` screen
+* **cancel**: user will be redirected to ``balance``
+
+.. _operation-table-details-ref:
operation-table-details
-----------------------
-``Description``: with the table it should be clear how much the operation will cost,
-the initial amount and the final amount with all the items related to the operations (like fee)
+With the table it should be clear how much the operation will cost, the
+initial amount and the final amount with all the items related to the
+operations (like fee)
+
+Labels
+^^^^^^
-``labels``: initial amount of the operation, and final amount are always shown.
-Fee should be shown as an extra row in the table if it is non-zero.
-Converted amount should be shown as an extra row if initial amount currency is not the same
-as the final amount currency.
+Initial amount of the operation, and final amount are always shown. Fee should
+be shown as an extra row in the table if it is non-zero. Converted amount
+should be shown as an extra row if initial amount currency is not the same as
+the final amount currency.
Initial amount label by operation:
@@ -331,24 +666,44 @@ Initial amount label by operation:
* refund -> Refund
+.. _accept-tos-ref:
+
accept-tos
----------
-``Description``: this screen can be use everytime that the user is going to interact
-with an exchange. since at any moment wallet may find that ToS changed the user needs
-to be prevented from continue before reading/accepting new rules. If possible, this
-screen should be used inplace of other actions and hidden if not required (for example,
-user already accepted ToS)
-
-``Inputs``:
- * format: allow the selection of a ToS format
- * languange: allow the selection of a languange different from system lang
-
-``Actions``:
- * accept tos: will mark this version as accepted in wallet core and redirect the user to the screen from where it was invoked
- * save/print tos: will save the ToS outside of the wallet
-
-.. image:: ../screenshots/cta-accept-tos-firefox-latest.png
+This screen can be use everytime that the user is going to interact with an
+exchange. since at any moment wallet may find that ToS changed the user needs
+to be prevented from continue before reading/accepting new rules. If possible,
+this screen should be used inplace of other actions and hidden if not required
+(for example, user already accepted ToS)
+
+Inputs
+^^^^^^
+
+* **format**: allow the selection of a ToS format
+* **languange**: allow the selection of a languange different from system lang
+
+Actions
+^^^^^^^
+
+* **accept tos**: will mark this version as accepted in wallet core and redirect the user to the screen from where it was invoked
+* **save/print tos**: will save the ToS outside of the wallet
+
+Screenshots
+^^^^^^^^^^^
+
++-----------+------------------------------------------------------------------+
+| Platform | Screenshot |
++===========+==================================================================+
+| WebEx | .. image:: ../screenshots/cta-accept-tos-firefox-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
+| Android | .. image:: ../screenshots/cta-accept-tos-android-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
+| iOS | .. image:: ../screenshots/cta-accept-tos-ios-latest.png |
+| | :width: 30% |
++-----------+------------------------------------------------------------------+
Q / A
diff --git a/design-documents/054-dynamic-form.rst b/design-documents/054-dynamic-form.rst
index 6ff84d41..d93b3684 100644
--- a/design-documents/054-dynamic-form.rst
+++ b/design-documents/054-dynamic-form.rst
@@ -51,7 +51,7 @@ readOnly (flag to disable input), onUpdate (callback on form data update),
and computeFormState (function to derive the form state based on current data).
-.. code-block:: javascript
+.. code-block:: typescript
interface FormType<T extends object> {
value: Partial<T>;
@@ -82,7 +82,7 @@ The field type ``AmountJson`` and ``AbsoluteTime`` are opaque since field is use
The form can be instanciated using
-.. code-block:: javascript
+.. code-block:: typescript
import { FormProvider } from "@gnu-taler/web-util/browser";
@@ -90,7 +90,7 @@ The form can be instanciated using
Then the field component can access all the properties by the ``useField(name)`` hook,
which will return
-.. code-block:: javascript
+.. code-block:: typescript
interface InputFieldHandler<Type> {
value: Type;
@@ -116,10 +116,10 @@ A set of common form field exist in ``@gnu-taler/web-util``:
and should be used inside a ``Form`` context.
-.. code-block:: javascript
+.. code-block:: none
function MyFormComponent():VNode {
- return <FormProvider >
+ return <FormProvider>
<InputAmount name="amount" />
<InputText name="subject" />
<button type="submit"> Confirm </button>
@@ -132,7 +132,7 @@ Example
Consider a form shape represented by the TypeScript type:
-.. code-block:: javascript
+.. code-block:: typescript
type TheFormType = {
name: string,
@@ -148,7 +148,7 @@ Consider a form shape represented by the TypeScript type:
An example instance of this form could be:
-.. code-block:: javascript
+.. code-block:: typescript
const theFormValue: TheFormType = {
name: "Sebastian",
diff --git a/design-documents/055-wallet-problem-report.rst b/design-documents/055-wallet-problem-report.rst
index 84c6159a..2fd7a221 100644
--- a/design-documents/055-wallet-problem-report.rst
+++ b/design-documents/055-wallet-problem-report.rst
@@ -5,6 +5,11 @@ DD 55: Wallet Problem Reports
**Status**: Early work in progress / DD number reservation.
+.. warning::
+
+ We concluded that we don't need the problem reports feature right now,
+ as all cases we care about are already covered by something else.
+
Summary
=======
@@ -52,13 +57,35 @@ New wallet-core notification type
Types of reports
----------------
+(Currently we don't have any good examples where this is actually needed.)
+
+Examples of what should NOT be a report
+---------------------------------------
+
* money lost due to the exchange stopping to offer a denomination
+
+ * => Should be a transactions item
+
* money locked behind a (long) pending refresh
+
+ * => Should be a pending transaction
+
* money lost due to a permanently failing refresh
+
+ * => pending or final transaction item
+
* money lost due to expired denominations (auto-refresh wasn't done fast enough)
-* exchange changed its master public key
+
+ * => transaction item
+
* a denomination changed its info (expiration, fees)
+ * => exchange entry state
+
+* Important information about the exchange changed (master pub, accounts, keys)
+
+ => exchange entry state
+
Definition of Done
==================
@@ -68,7 +95,9 @@ TBD.
Alternatives
============
-TBD.
+* Report problems with an API specific to each resource (exchange entry, transaction, ...)
+* Have an *alerts* API that returns alerts to the client that the client can show to to the user,
+ but that a user can't interact with.
Drawbacks
=========
diff --git a/design-documents/wallet-screenshots/webex-wallet/READE b/design-documents/wallet-screenshots/webex-wallet/READE
new file mode 100644
index 00000000..597fa22e
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/READE
@@ -0,0 +1,22 @@
+Wallet Web Extension screenshots
+--------------------------------
+
+Screenshoots are organized by common use case using
+the happy path to ilustrate the user flow:
+
+ * withdrawal: starts from an empty wallet and performs
+ a manual withdrawal with demo exchange.
+ * payment: starts from demo shop and pay for an article.
+ also showing how a refund looks.
+ * transfer: performs a p2p push debit and credit.
+ * invoice: performs a p2p pull credit and debit.
+ * deposit: starts from a wallet with some balance
+ and deposit into a bank account new yet
+ known by the wallet.
+ * add-exchange: add the test exchange into the wallet.
+
+In this root folder there are some additionals screen for
+settings, dev tools and others.
+
+Screenshot starting with "store-*" are used in chrome webstore
+and firefox addon store.
diff --git a/design-documents/wallet-screenshots/webex-wallet/add-exchange/1-balance.png b/design-documents/wallet-screenshots/webex-wallet/add-exchange/1-balance.png
new file mode 100644
index 00000000..1041e2ee
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/add-exchange/1-balance.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/add-exchange/10-testkudos-in-the-list.png b/design-documents/wallet-screenshots/webex-wallet/add-exchange/10-testkudos-in-the-list.png
new file mode 100644
index 00000000..12a53026
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/add-exchange/10-testkudos-in-the-list.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/add-exchange/11-select-test-kudos.png b/design-documents/wallet-screenshots/webex-wallet/add-exchange/11-select-test-kudos.png
new file mode 100644
index 00000000..43e18c89
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/add-exchange/11-select-test-kudos.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/add-exchange/2-click-get-cash.png b/design-documents/wallet-screenshots/webex-wallet/add-exchange/2-click-get-cash.png
new file mode 100644
index 00000000..d7d247f0
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/add-exchange/2-click-get-cash.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/add-exchange/3-click-add-exchange.png b/design-documents/wallet-screenshots/webex-wallet/add-exchange/3-click-add-exchange.png
new file mode 100644
index 00000000..7a1a48e9
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/add-exchange/3-click-add-exchange.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/add-exchange/4-input-URL.png b/design-documents/wallet-screenshots/webex-wallet/add-exchange/4-input-URL.png
new file mode 100644
index 00000000..efdf852a
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/add-exchange/4-input-URL.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/add-exchange/5-click-next.png b/design-documents/wallet-screenshots/webex-wallet/add-exchange/5-click-next.png
new file mode 100644
index 00000000..9a2782f2
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/add-exchange/5-click-next.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/add-exchange/6-review-tos.png b/design-documents/wallet-screenshots/webex-wallet/add-exchange/6-review-tos.png
new file mode 100644
index 00000000..44a85d6f
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/add-exchange/6-review-tos.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/add-exchange/7-accept-tos.png b/design-documents/wallet-screenshots/webex-wallet/add-exchange/7-accept-tos.png
new file mode 100644
index 00000000..c73c5256
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/add-exchange/7-accept-tos.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/add-exchange/8-confirm.png b/design-documents/wallet-screenshots/webex-wallet/add-exchange/8-confirm.png
new file mode 100644
index 00000000..1041e2ee
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/add-exchange/8-confirm.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/add-exchange/9-click-get-cash.png b/design-documents/wallet-screenshots/webex-wallet/add-exchange/9-click-get-cash.png
new file mode 100644
index 00000000..d7d247f0
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/add-exchange/9-click-get-cash.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/deposit/1-balance.png b/design-documents/wallet-screenshots/webex-wallet/deposit/1-balance.png
new file mode 100644
index 00000000..7c571c48
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/deposit/1-balance.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/deposit/10-balance.png b/design-documents/wallet-screenshots/webex-wallet/deposit/10-balance.png
new file mode 100644
index 00000000..4e3a787b
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/deposit/10-balance.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/deposit/2-click-send.png b/design-documents/wallet-screenshots/webex-wallet/deposit/2-click-send.png
new file mode 100644
index 00000000..2cdb5fe0
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/deposit/2-click-send.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/deposit/3-click-deposit.png b/design-documents/wallet-screenshots/webex-wallet/deposit/3-click-deposit.png
new file mode 100644
index 00000000..afc4a431
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/deposit/3-click-deposit.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/deposit/4-click-add-account.png b/design-documents/wallet-screenshots/webex-wallet/deposit/4-click-add-account.png
new file mode 100644
index 00000000..c91bc8d9
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/deposit/4-click-add-account.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/deposit/5-complete-form.png b/design-documents/wallet-screenshots/webex-wallet/deposit/5-complete-form.png
new file mode 100644
index 00000000..77514161
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/deposit/5-complete-form.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/deposit/6-click-add.png b/design-documents/wallet-screenshots/webex-wallet/deposit/6-click-add.png
new file mode 100644
index 00000000..e78538c7
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/deposit/6-click-add.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/deposit/7-confirm-deposit.png b/design-documents/wallet-screenshots/webex-wallet/deposit/7-confirm-deposit.png
new file mode 100644
index 00000000..bf2c61bc
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/deposit/7-confirm-deposit.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/deposit/8-show-transaction.png b/design-documents/wallet-screenshots/webex-wallet/deposit/8-show-transaction.png
new file mode 100644
index 00000000..381ae09e
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/deposit/8-show-transaction.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/deposit/9-after-deposit-confirmed.png b/design-documents/wallet-screenshots/webex-wallet/deposit/9-after-deposit-confirmed.png
new file mode 100644
index 00000000..74c2026d
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/deposit/9-after-deposit-confirmed.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/dev-tools.png b/design-documents/wallet-screenshots/webex-wallet/dev-tools.png
new file mode 100644
index 00000000..a817d055
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/dev-tools.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/invoice/1-balance.png b/design-documents/wallet-screenshots/webex-wallet/invoice/1-balance.png
new file mode 100644
index 00000000..a6692c4f
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/invoice/1-balance.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/invoice/10-confirm-transfer.png b/design-documents/wallet-screenshots/webex-wallet/invoice/10-confirm-transfer.png
new file mode 100644
index 00000000..2611c9f3
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/invoice/10-confirm-transfer.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/invoice/11-show-history.png b/design-documents/wallet-screenshots/webex-wallet/invoice/11-show-history.png
new file mode 100644
index 00000000..52907939
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/invoice/11-show-history.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/invoice/2-click-add.png b/design-documents/wallet-screenshots/webex-wallet/invoice/2-click-add.png
new file mode 100644
index 00000000..7834436d
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/invoice/2-click-add.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/invoice/3-input-six.png b/design-documents/wallet-screenshots/webex-wallet/invoice/3-input-six.png
new file mode 100644
index 00000000..0f910210
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/invoice/3-input-six.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/invoice/4-click-invoice.png b/design-documents/wallet-screenshots/webex-wallet/invoice/4-click-invoice.png
new file mode 100644
index 00000000..0d7c1b31
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/invoice/4-click-invoice.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/invoice/5-complete-form.png b/design-documents/wallet-screenshots/webex-wallet/invoice/5-complete-form.png
new file mode 100644
index 00000000..625afb3c
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/invoice/5-complete-form.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/invoice/6-create-invoice.png b/design-documents/wallet-screenshots/webex-wallet/invoice/6-create-invoice.png
new file mode 100644
index 00000000..def698a8
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/invoice/6-create-invoice.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/invoice/7-copy-qr-open-qr-page.png b/design-documents/wallet-screenshots/webex-wallet/invoice/7-copy-qr-open-qr-page.png
new file mode 100644
index 00000000..fe221eac
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/invoice/7-copy-qr-open-qr-page.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/invoice/8-paste-URI.png b/design-documents/wallet-screenshots/webex-wallet/invoice/8-paste-URI.png
new file mode 100644
index 00000000..26351cb9
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/invoice/8-paste-URI.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/invoice/9-click-open.png b/design-documents/wallet-screenshots/webex-wallet/invoice/9-click-open.png
new file mode 100644
index 00000000..90393d3b
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/invoice/9-click-open.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/payment/1-load-shop.png b/design-documents/wallet-screenshots/webex-wallet/payment/1-load-shop.png
new file mode 100644
index 00000000..4aacc47b
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/payment/1-load-shop.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/payment/10-click-article-URL.png b/design-documents/wallet-screenshots/webex-wallet/payment/10-click-article-URL.png
new file mode 100644
index 00000000..74488cb6
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/payment/10-click-article-URL.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/payment/2-click-first-article.png b/design-documents/wallet-screenshots/webex-wallet/payment/2-click-first-article.png
new file mode 100644
index 00000000..31635b8a
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/payment/2-click-first-article.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/payment/3-confirm-payment.png b/design-documents/wallet-screenshots/webex-wallet/payment/3-confirm-payment.png
new file mode 100644
index 00000000..016f5514
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/payment/3-confirm-payment.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/payment/4-click-refund.png b/design-documents/wallet-screenshots/webex-wallet/payment/4-click-refund.png
new file mode 100644
index 00000000..4a3ddd39
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/payment/4-click-refund.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/payment/5-click-request-refund.png b/design-documents/wallet-screenshots/webex-wallet/payment/5-click-request-refund.png
new file mode 100644
index 00000000..9b27cd5b
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/payment/5-click-request-refund.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/payment/6-accept-refund.png b/design-documents/wallet-screenshots/webex-wallet/payment/6-accept-refund.png
new file mode 100644
index 00000000..a4b1c137
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/payment/6-accept-refund.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/payment/7-click-refund-detail.png b/design-documents/wallet-screenshots/webex-wallet/payment/7-click-refund-detail.png
new file mode 100644
index 00000000..14291836
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/payment/7-click-refund-detail.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/payment/8-show-history.png b/design-documents/wallet-screenshots/webex-wallet/payment/8-show-history.png
new file mode 100644
index 00000000..2758f7f3
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/payment/8-show-history.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/payment/9-click-receipt.png b/design-documents/wallet-screenshots/webex-wallet/payment/9-click-receipt.png
new file mode 100644
index 00000000..a4b1c137
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/payment/9-click-receipt.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/scan-qr-code.png b/design-documents/wallet-screenshots/webex-wallet/scan-qr-code.png
new file mode 100644
index 00000000..ae28e3db
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/scan-qr-code.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/settings-developer-mode.png b/design-documents/wallet-screenshots/webex-wallet/settings-developer-mode.png
new file mode 100644
index 00000000..c93883dc
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/settings-developer-mode.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/settings-normal-mode.png b/design-documents/wallet-screenshots/webex-wallet/settings-normal-mode.png
new file mode 100644
index 00000000..50f70cab
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/settings-normal-mode.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/store-installed.png b/design-documents/wallet-screenshots/webex-wallet/store-installed.png
new file mode 100644
index 00000000..67c481fc
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/store-installed.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/store-payment.png b/design-documents/wallet-screenshots/webex-wallet/store-payment.png
new file mode 100644
index 00000000..3f776696
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/store-payment.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/store-withdraw.png b/design-documents/wallet-screenshots/webex-wallet/store-withdraw.png
new file mode 100644
index 00000000..8409a0b9
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/store-withdraw.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/transfer/1-initial-balance.png b/design-documents/wallet-screenshots/webex-wallet/transfer/1-initial-balance.png
new file mode 100644
index 00000000..20e74cf3
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/transfer/1-initial-balance.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/transfer/10-open-URI.png b/design-documents/wallet-screenshots/webex-wallet/transfer/10-open-URI.png
new file mode 100644
index 00000000..22f21f89
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/transfer/10-open-URI.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/transfer/11-accept-transfer.png b/design-documents/wallet-screenshots/webex-wallet/transfer/11-accept-transfer.png
new file mode 100644
index 00000000..9ee2083a
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/transfer/11-accept-transfer.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/transfer/12-show-history.png b/design-documents/wallet-screenshots/webex-wallet/transfer/12-show-history.png
new file mode 100644
index 00000000..d2d12ca8
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/transfer/12-show-history.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/transfer/2-click-send.png b/design-documents/wallet-screenshots/webex-wallet/transfer/2-click-send.png
new file mode 100644
index 00000000..0e705860
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/transfer/2-click-send.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/transfer/3-amount-five.png b/design-documents/wallet-screenshots/webex-wallet/transfer/3-amount-five.png
new file mode 100644
index 00000000..ffe4bee7
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/transfer/3-amount-five.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/transfer/4-send-wallet.png b/design-documents/wallet-screenshots/webex-wallet/transfer/4-send-wallet.png
new file mode 100644
index 00000000..f566b0cb
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/transfer/4-send-wallet.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/transfer/5-complete-form.png b/design-documents/wallet-screenshots/webex-wallet/transfer/5-complete-form.png
new file mode 100644
index 00000000..836755ca
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/transfer/5-complete-form.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/transfer/6-confirm-transfer.png b/design-documents/wallet-screenshots/webex-wallet/transfer/6-confirm-transfer.png
new file mode 100644
index 00000000..55de4bb0
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/transfer/6-confirm-transfer.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/transfer/7-show-history.png b/design-documents/wallet-screenshots/webex-wallet/transfer/7-show-history.png
new file mode 100644
index 00000000..39de7b66
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/transfer/7-show-history.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/transfer/8-scan-qr.png b/design-documents/wallet-screenshots/webex-wallet/transfer/8-scan-qr.png
new file mode 100644
index 00000000..cacdce06
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/transfer/8-scan-qr.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/transfer/9-paste-URI.png b/design-documents/wallet-screenshots/webex-wallet/transfer/9-paste-URI.png
new file mode 100644
index 00000000..32ac0ff4
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/transfer/9-paste-URI.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/withdrawal/10-transaction-completed.png b/design-documents/wallet-screenshots/webex-wallet/withdrawal/10-transaction-completed.png
new file mode 100644
index 00000000..2a774334
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/withdrawal/10-transaction-completed.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/withdrawal/11-history-after-withdraw.png b/design-documents/wallet-screenshots/webex-wallet/withdrawal/11-history-after-withdraw.png
new file mode 100644
index 00000000..54b05212
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/withdrawal/11-history-after-withdraw.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/withdrawal/2-empty-wallet.png b/design-documents/wallet-screenshots/webex-wallet/withdrawal/2-empty-wallet.png
new file mode 100644
index 00000000..79fc787b
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/withdrawal/2-empty-wallet.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/withdrawal/3-get-digital-cash.png b/design-documents/wallet-screenshots/webex-wallet/withdrawal/3-get-digital-cash.png
new file mode 100644
index 00000000..273d5f5f
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/withdrawal/3-get-digital-cash.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/withdrawal/4-select-kudos.png b/design-documents/wallet-screenshots/webex-wallet/withdrawal/4-select-kudos.png
new file mode 100644
index 00000000..741ac32a
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/withdrawal/4-select-kudos.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/withdrawal/5-set-amount-five.png b/design-documents/wallet-screenshots/webex-wallet/withdrawal/5-set-amount-five.png
new file mode 100644
index 00000000..8454928b
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/withdrawal/5-set-amount-five.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/withdrawal/6-withdraw-from-bank.png b/design-documents/wallet-screenshots/webex-wallet/withdrawal/6-withdraw-from-bank.png
new file mode 100644
index 00000000..e0942a0c
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/withdrawal/6-withdraw-from-bank.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/withdrawal/7-review-tos.png b/design-documents/wallet-screenshots/webex-wallet/withdrawal/7-review-tos.png
new file mode 100644
index 00000000..505e06d3
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/withdrawal/7-review-tos.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/withdrawal/8-accept-tos.png b/design-documents/wallet-screenshots/webex-wallet/withdrawal/8-accept-tos.png
new file mode 100644
index 00000000..61d3c0a4
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/withdrawal/8-accept-tos.png
Binary files differ
diff --git a/design-documents/wallet-screenshots/webex-wallet/withdrawal/9-confirm-withdraw.png b/design-documents/wallet-screenshots/webex-wallet/withdrawal/9-confirm-withdraw.png
new file mode 100644
index 00000000..579803cc
--- /dev/null
+++ b/design-documents/wallet-screenshots/webex-wallet/withdrawal/9-confirm-withdraw.png
Binary files differ