commit 13bd1f7e850b83815d6bd5bdafc2c5a798e3c3d0 parent 2a8fc7efae0d93904a0c6e7be4ff23e5f90e3949 Author: Christian Grothoff <grothoff@gnunet.org> Date: Wed, 16 Apr 2025 11:51:03 +0200 add more iOS screenshots from marc, update DD53 with new screens Diffstat:
29 files changed, 239 insertions(+), 49 deletions(-)
diff --git a/design-documents/053-wallet-ui.rst b/design-documents/053-wallet-ui.rst @@ -160,6 +160,8 @@ Actions * **View transactions**. Clicking on a balance item should take you to the transaction list (:ref:`cta-transaction-list-ref`) associated with that balance. +* **View pending**. Clicking on the pending transaction amount should take you to the + pending transaction list (:ref:`cta-pending-list-ref`) associated with that currency. Screenshots ^^^^^^^^^^^ @@ -177,6 +179,45 @@ Screenshots +-----------+------------------------------------------------------------------------+ +.. _cta-pending-list-ref: + +pending-list +------------ + +This screen shows a currency-scoped list of the pending transactions of the wallet +for that currency, allowing the user to view details about those pending transactions. + +Info +^^^^ + +* List of pending transactions with type/summary, time and amount + + +Actions +^^^^^^^ + +* **Back**. Goes to the balances (:ref:`cta-balance-list-ref`) +* **Select item**. Clicking on the pending transaction shows goes to a dialog + with details about the transaction (and allows the user to abort it). + + +Screenshots +^^^^^^^^^^^ + ++-----------+------------------------------------------------------------------------+ +| Platform | Screenshot | ++===========+========================================================================+ +| WebEx | .. image:: ../screenshots/cta-transactions-pending-firefox-latest.png | ++-----------+------------------------------------------------------------------------+ +| Android | .. image:: ../screenshots/cta-transactions-pending-android-latest.png | +| | :width: 30% | ++-----------+------------------------------------------------------------------------+ +| iOS | .. image:: ../screenshots/cta-transactions-pending-ios-latest.png | +| | :width: 30% | ++-----------+------------------------------------------------------------------------+ + + + .. _cta-actions-ref: cta-actions @@ -455,6 +496,9 @@ Info * 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 +* service provider to be used showing the URL +* amount to be withdrawn +* applicable fees (if any) Inputs ^^^^^^ @@ -466,7 +510,6 @@ 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:`cta-accept-tos-ref` screen * **cancel**: user will be redirected to ``balance`` .. attention:: @@ -515,43 +558,53 @@ Screenshots +-----------+----------------------------------------------------------------+ -.. _cta-withdraw-confirm-ref: - -cta-withdraw-confirm --------------------- - This screen is used to ask the the user to confirm the withdrawal operation, now that all data has been provided. -Info -^^^^ +.. _cta-wire-transfer-ref: -* service provider to be used showing the URL -* amount to be withdrawn -* applicable fees (if any) +cta-wire-transfer +----------------- -Inputs -^^^^^^ +This screen is used to show the user the information for the wire transfer to +complete a manual withdrawal operation. -* none? +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 ^^^^^^^ -* **confirm withdraw**: advances to next screen -* **back**: user will be redirected to previous screen +* **done**: go back to the main balances list (operation continues in background) +* **view detailed instructions**: go to :ref:`cta-wire-transfer-details-ref` +* **view QR codes**: go to :ref:`cta-wire-transfer-qt-ref` +* **automatic**: screen changes to :ref:`cta-withdraw-done` upon completion Issues ^^^^^^ -* All: This dialog should be merged with - the future main - withdraw review (:ref:`cta-withdraw-review-ref`) dialog - where the amount and exchange could be edited (if - permitted by trigger event) and the fees are dynamically - shown. No point in yet another dialog. +* All(text): if there is no fee, no point in showing + the amount **3** times. Maybe only show the amount + on top with the wire transfer details, and then at + the bottom show the fee ONCE *if* there is one? +* iOS(text): receiver name is missing, MUST be before IBAN +* WebEx(screenshot): the screenshot does not show how to select an alternative bank (see: Netzbon). Would be nice to show that. +* Android(screenshot): the screenshot does not show how to select an alternative bank (see: Netzbon). Would be nice to show that. + + + +Adoption +^^^^^^^^ + +* iOS(minor): the way to switch between different banks is not as clear as it was on WebEx. Proposal: use notebook tabs similar to how it is done on WebEx (IIRC?) +* Android: transaction status is not shown ("pending" on all other platforms. This is actually *good*, as once we are no longer "pending" the wire transfer details will no longer be shown, so the entire screen will look different. So we can probably get rid of the "This transaction is not complete" and "Status: Pending" on WebEx/iOS as that is *always* the case when we give the user wire transfer instructions here! + Screenshots @@ -560,24 +613,21 @@ Screenshots +-----------+------------------------------------------------------------------+ | Platform | Screenshot | +===========+==================================================================+ -| WebEx | .. image:: ../screenshots/cta-withdraw-confirm-firefox-latest.png| +| WebEx | .. image:: ../screenshots/cta-wire-transfer-firefox-latest.png | +-----------+------------------------------------------------------------------+ -| Android | .. image:: ../screenshots/cta-withdraw-confirm-android-latest.png| +| Android | .. image:: ../screenshots/cta-wire-transfer-android-latest.png | | | :width: 30% | +-----------+------------------------------------------------------------------+ -| iOS | .. image:: ../screenshots/cta-withdraw-confirm-ios-latest.png | +| iOS | .. image:: ../screenshots/cta-wire-transfer-ios-latest.png | | | :width: 30% | +-----------+------------------------------------------------------------------+ +.. _cta-wire-transfer-details-ref: +cta-wire-transfer-details +------------------------- -.. _cta-wire-transfer-ref: - -cta-wire-transfer ------------------ - -This screen is used to show the user the information for the wire transfer to -complete a manual withdrawal operation. +This screen shows the detailed instructions for the manual wire transfer. Info ^^^^ @@ -590,9 +640,74 @@ Info 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 +* **back**: goes back to the main wire transfer screen +* **copy**: copies details about the instructions to the clipboard + ++-----------+------------------------------------------------------------------------+ +| Platform | Screenshot | ++===========+========================================================================+ +| WebEx | .. image:: ../screenshots/cta-wire-transfer-details-firefox-latest.png | ++-----------+------------------------------------------------------------------------+ +| Android | .. image:: ../screenshots/cta-wire-transfer-details-android-latest.png | +| | :width: 30% | ++-----------+------------------------------------------------------------------------+ +| iOS | .. image:: ../screenshots/cta-wire-transfer-details-ios-latest.png | +| | :width: 30% | ++-----------+------------------------------------------------------------------------+ + +.. _cta-wire-transfer-qr-ref: + +cta-wire-transfer-qr +-------------------- + +This screen shows the QR codes for the wire transfer for banks that support it. + +Info +^^^^ + +* QR codes for banking systems that could work with the respective exchange's bank account + +Actions +^^^^^^^ + +* **back**: goes back to the main wire transfer screen + + ++-----------+------------------------------------------------------------------+ +| Platform | Screenshot | ++===========+==================================================================+ +| WebEx | .. image:: ../screenshots/cta-wire-transfer-qr-firefox-latest.png| ++-----------+------------------------------------------------------------------+ +| Android | .. image:: ../screenshots/cta-wire-transfer-qr-android-latest.png| +| | :width: 30% | ++-----------+------------------------------------------------------------------+ +| iOS | .. image:: ../screenshots/cta-wire-transfer-qr-ios-latest.png | +| | :width: 30% | ++-----------+------------------------------------------------------------------+ + + +.. _cta-withdraw-pending-ref: + +cta-withdraw-pending +-------------------- + +This screen is used to show the user the information for a pending wire transfer to +complete a manual withdrawal operation when viewing the transaction via the pending +transaction history (:ref:`cta-pending-list-ref`). + +Info +^^^^ + +Same as in :ref:`cta-wire-transfer-details-ref`. + +Actions +^^^^^^^ + +* **abort**: aborts the withdrawal operation (with warning/explanation) +* **back**: go back to the pending transaction list (operation continues in background) +* **view detailed instructions**: go to :ref:`cta-wire-transfer-details-ref` +* **view QR codes**: go to :ref:`cta-wire-transfer-qt` +* **automatic**: screen changes to :ref:`cta-withdraw-done-ref` upon completion Issues ^^^^^^ @@ -1171,20 +1286,17 @@ this screen should be used inplace of other actions and hidden if not required 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 +* **export/save/print tos** (optional): will save the ToS outside of the wallet Issues ^^^^^^ - - Adoption ^^^^^^^^ @@ -1205,6 +1317,19 @@ Screenshots | | :width: 30% | +-----------+------------------------------------------------------------------+ ++-----------+----------------------------------------------------------------------+ +| Platform | Screenshot | ++===========+======================================================================+ +| WebEx | .. image:: ../screenshots/cta-accept-tos-language-firefox-latest.png | +| | :width: 30% | ++-----------+----------------------------------------------------------------------+ +| Android | .. image:: ../screenshots/cta-accept-tos-language-android-latest.png | +| | :width: 30% | ++-----------+----------------------------------------------------------------------+ +| iOS | .. image:: ../screenshots/cta-accept-tos-language-ios-latest.png | +| | :width: 30% | ++-----------+----------------------------------------------------------------------+ + .. _cta-settings-ref: settings @@ -1237,6 +1362,46 @@ Screenshots | | :width: 30% | +-----------+------------------------------------------------------------------+ +.. _cta-exchange-loading-ref: + +Exchange loading +---------------- + +Info +^^^^ + +This screen is shown while the wallet downloads and parses the exchange +meta-data (/config, /keys, terms of service). + +Layout +^^^^^^ + +Actions +^^^^^^^ + +Issues +^^^^^^ + +Adoption +^^^^^^^^ + +Screenshots +^^^^^^^^^^^ + ++-----------+-------------------------------------------------------------------+ +| Platform | Screenshot | ++===========+===================================================================+ +| WebEx | .. image:: ../screenshots/cta-exchange-loading-firefox-latest.png | +| | :width: 30% | ++-----------+-------------------------------------------------------------------+ +| Android | .. image:: ../screenshots/cta-exchange-loading-android-latest.png | +| | :width: 30% | ++-----------+-------------------------------------------------------------------+ +| iOS | .. image:: ../screenshots/cta-exchange-loading-ios-latest.png | +| | :width: 30% | ++-----------+-------------------------------------------------------------------+ + + .. _cta-devtools-ref: developer-tools diff --git a/screenshots/cta-accept-tos-french-ios-0.png b/screenshots/cta-accept-tos-french-ios-0.png Binary files differ. diff --git a/screenshots/cta-accept-tos-french-ios-latest.png b/screenshots/cta-accept-tos-french-ios-latest.png @@ -0,0 +1 @@ +cta-accept-tos-french-ios-0.png +\ No newline at end of file diff --git a/screenshots/cta-accept-tos-german-ios-0.png b/screenshots/cta-accept-tos-german-ios-0.png Binary files differ. diff --git a/screenshots/cta-accept-tos-german-ios-latest.png b/screenshots/cta-accept-tos-german-ios-latest.png @@ -0,0 +1 @@ +cta-accept-tos-german-ios-0.png +\ No newline at end of file diff --git a/screenshots/cta-accept-tos-ios-2.png b/screenshots/cta-accept-tos-ios-2.png Binary files differ. diff --git a/screenshots/cta-accept-tos-ios-latest.png b/screenshots/cta-accept-tos-ios-latest.png @@ -1 +1 @@ -cta-accept-tos-ios-1.png -\ No newline at end of file +cta-accept-tos-ios-2.png +\ No newline at end of file diff --git a/screenshots/cta-accept-tos-language-ios-0.png b/screenshots/cta-accept-tos-language-ios-0.png Binary files differ. diff --git a/screenshots/cta-accept-tos-language-ios-latest.png b/screenshots/cta-accept-tos-language-ios-latest.png @@ -0,0 +1 @@ +cta-accept-tos-language-ios-0.png +\ No newline at end of file diff --git a/screenshots/cta-balance-list-ios-3.png b/screenshots/cta-balance-list-ios-3.png Binary files differ. diff --git a/screenshots/cta-balance-list-ios-latest.png b/screenshots/cta-balance-list-ios-latest.png @@ -1 +1 @@ -cta-balance-list-ios-2.png -\ No newline at end of file +cta-balance-list-ios-3.png +\ No newline at end of file diff --git a/screenshots/cta-exchange-loading-ios-0.png b/screenshots/cta-exchange-loading-ios-0.png Binary files differ. diff --git a/screenshots/cta-exchange-loading-ios-latest.png b/screenshots/cta-exchange-loading-ios-latest.png @@ -0,0 +1 @@ +cta-exchange-loading-ios-0.png +\ No newline at end of file diff --git a/screenshots/cta-transactions-pending-ios-0.png b/screenshots/cta-transactions-pending-ios-0.png Binary files differ. diff --git a/screenshots/cta-transactions-pending-ios-latest.png b/screenshots/cta-transactions-pending-ios-latest.png @@ -0,0 +1 @@ +cta-transactions-pending-ios-0.png +\ No newline at end of file diff --git a/screenshots/cta-wire-transfer-details-ios-0.png b/screenshots/cta-wire-transfer-details-ios-0.png Binary files differ. diff --git a/screenshots/cta-wire-transfer-details-ios-latest.png b/screenshots/cta-wire-transfer-details-ios-latest.png @@ -0,0 +1 @@ +cta-wire-transfer-details-ios-0.png +\ No newline at end of file diff --git a/screenshots/cta-wire-transfer-ios-1.png b/screenshots/cta-wire-transfer-ios-1.png Binary files differ. diff --git a/screenshots/cta-wire-transfer-ios-latest.png b/screenshots/cta-wire-transfer-ios-latest.png @@ -1 +1 @@ -cta-wire-transfer-ios-0.png -\ No newline at end of file +cta-wire-transfer-ios-1.png +\ No newline at end of file diff --git a/screenshots/cta-wire-transfer-qr-ios-0.png b/screenshots/cta-wire-transfer-qr-ios-0.png Binary files differ. diff --git a/screenshots/cta-wire-transfer-qr-ios-latest.png b/screenshots/cta-wire-transfer-qr-ios-latest.png @@ -0,0 +1 @@ +cta-wire-transfer-qr-ios-0.png +\ No newline at end of file diff --git a/screenshots/cta-withdraw-ios-0.png b/screenshots/cta-withdraw-ios-0.png Binary files differ. diff --git a/screenshots/cta-withdraw-ios-1.png b/screenshots/cta-withdraw-ios-1.png Binary files differ. diff --git a/screenshots/cta-withdraw-ios-latest.png b/screenshots/cta-withdraw-ios-latest.png @@ -1 +1 @@ -cta-withdraw-ios-0.png -\ No newline at end of file +cta-withdraw-ios-1.png +\ No newline at end of file diff --git a/screenshots/cta-withdraw-pending-ios-0.png b/screenshots/cta-withdraw-pending-ios-0.png Binary files differ. diff --git a/screenshots/cta-withdraw-pending-ios-latest.png b/screenshots/cta-withdraw-pending-ios-latest.png @@ -0,0 +1 @@ +cta-withdraw-pending-ios-0.png +\ No newline at end of file diff --git a/screenshots/cta-withdraw-review-ios-1.png b/screenshots/cta-withdraw-review-ios-1.png Binary files differ. diff --git a/screenshots/cta-withdraw-review-ios-latest.png b/screenshots/cta-withdraw-review-ios-latest.png @@ -1 +1 @@ -cta-withdraw-review-ios-0.png -\ No newline at end of file +cta-withdraw-review-ios-1.png +\ No newline at end of file diff --git a/screenshots/import.sh b/screenshots/import.sh @@ -0,0 +1,9 @@ +#!/bin/sh +# Little script to patch up the "-latest" links. +for n in $* +do + NBASE=$(echo $n | sed -e "s/-.\.png//") + echo $NBASE + rm -f $NBASE-latest.png + ln -s $n $NBASE-latest.png +done
