taler-docs

Documentation for GNU Taler components, APIs and protocols
Log | Files | Refs | README | LICENSE

053-wallet-ui.rst (57624B)


      1 DD 53: Wallet UI Design
      2 #######################
      3 
      4 Summary
      5 =======
      6 
      7 This document proposes designs wallet UI. It defines what Android, iOS and
      8 WebExtension should follow in order to have a coherent UI between platforms.
      9 
     10 Motivation
     11 ==========
     12 
     13 We want user to be able to help each others independent of the implementation
     14 they are using.
     15 We want user to be able to capitalize the effort of learning how to use one
     16 wallet and be able to use a different one without the need to learn
     17 anything new.
     18 Currently development of different platform specific implementation are independent
     19 and every developer needs to choose the layout, texts and buttons and navigation.
     20 
     21 Requirements
     22 ============
     23 
     24 Every screen MUST be defined in a document with the following information:
     25 
     26 * **Identifiable UI screens**: every UI should have an unique identifier that will
     27   be use for development discussion and bug reports. There should be an option
     28   in the application to enable an active rendering of the id.
     29 
     30 * **Description**: the reason to be of the screen, should help to define what will
     31   be included into, what is going to left for other screens and when and from
     32   where should be linked.
     33 
     34 The screen MAY also have:
     35 
     36 * **Predefined assets**: every implementation should resue the same icons, images,
     37   fonts and sounds.
     38 
     39 Additionaly the document COULD defined the components of the UI. If one of this
     40 properties is defined in the spec the implementation must implement it. The specification
     41 should be minimal to achieve the objective in the description.
     42 
     43 * **Info**. Spec of information that the user should have access. The type of info
     44   could be a field (id and value) or a banner (information and instructions).
     45   The spec will help to reuse the text for i18n across apps and defined
     46 
     47 * **Inputs**. Spec of information need to provide in current screen. The type of input,
     48   range of values and validation should be defined if necessary.
     49 
     50 * **Actions**. Spec of buttons and interactable elements that will have a significant
     51   change in the current state. It should also mention navigation when applicable.
     52 
     53 * **Layout**. Spec position of elements when needed. The spec should be "soft" in a sense
     54   that elements should be easy to find following directions like "close to X" or
     55   "at the start/end of the screen".
     56 
     57 * **Issues**. Issues we identified that need to be addressed in some implementation(s).
     58   This is in particular about inconsistencies and bad design choices made on some
     59   platforms.
     60 
     61 * **Adoption**. Things that one version does particularly
     62   nice that we might want other implementations to adopt.
     63 
     64 * **Screenshots**. Should be provided for all wallet implementations and kept
     65   up to date, to ensure that they can be used to aid in UI/UX and QA
     66   discussions.
     67 
     68 Screen should be defined using the most relaxed definition that are good enough to
     69 be clear for the user. Platform will use this definition and adapt to the differences
     70 on the platform taking advantange of platform API and screen sizes.
     71 
     72 When a screen have multiple uses for the same purpose, a substate section should be
     73 included with the difference with the main definition.
     74 
     75 Part of the screens that are reused shoud also be defined in this document as screen.
     76 
     77 Common definition:
     78  * navigation between screens should not happen if the user didn't take any action
     79 
     80 
     81 Proposed Solutions
     82 ==================
     83 
     84 List of all screens with the defined properties.
     85 
     86 .. _cta-balance-list-ref:
     87 
     88 balance-list
     89 ------------
     90 
     91 This screen shows a currency-scoped list of the balances stored in the wallet,
     92 and includes information about the total, incoming, and outgoing amounts, as
     93 well as the currency scope information for each item.
     94 
     95 Info
     96 ^^^^
     97 
     98 * List of balances in the wallet, where each item contains:
     99 
    100   * Total amount with currency (see :doc:`051-fractional-digits`).
    101   * Incoming amount (money pending to arrive).
    102   * Outgoing amount (money pending to leave).
    103   * Currency scope information (see :doc:`035-regional-currencies`).
    104 
    105 * Strings to use:
    106 
    107   * Title is "Balances"
    108   * "inbound" and "outbound" are used with
    109     pending amounts (shown if applicable below the main
    110     amount, green for inbound, red for outbound)
    111   * "pending" MAY be used as a badge label to indicate
    112     that there are pending activities
    113 
    114 Layout
    115 ^^^^^^
    116 
    117 * There SHOULD be a menu or button from where the QR code entry / scan
    118   functionality is reachable (:ref:`cta-url-entry-ref`)
    119 * There SHOULD be a menu or button from where the settings screen (:ref:`cta-settings-ref`)
    120   is reachable, unless settings are handled differently
    121   on the platform.
    122 * In developer mode, there MAY be a menu or button
    123   from where the developer tools (:ref:`cta-devtools-ref`)
    124   are reachable. Alternatively, developer tools COULD
    125   also only be reachable via settings.
    126 
    127 
    128 Issues
    129 ^^^^^^
    130 
    131 * WebEx (image): Screenshot does not show any
    132   pending transactions.
    133 * WebEx (image): Would be nice to include CHF currency
    134 * iOS (minor): Remove text "Balance:" within each currency?
    135 * iOS (image): Multi-currency screenshot might be nicer
    136 * Android (minor): right-align balances?
    137 
    138 
    139 
    140 Adoption
    141 ^^^^^^^^
    142 
    143 * iOS: transaction history visualization with red/green
    144   bars after currency is nice.
    145 
    146 
    147 Actions
    148 ^^^^^^^
    149 
    150 * **View transactions**. Clicking on a balance item should take you to the
    151   transaction list (:ref:`cta-transaction-list-ref`) associated with that balance.
    152 * **View pending**. Clicking on the pending transaction amount should take you to the
    153   pending transaction list (:ref:`cta-transactions-pending-ref`) associated with that currency.
    154 
    155 Screenshots
    156 ^^^^^^^^^^^
    157 
    158 +-----------+------------------------------------------------------------------------+
    159 | Platform  | Screenshot                                                             |
    160 +===========+========================================================================+
    161 | WebEx     | .. image:: ../screenshots/cta-balance-list-firefox-latest.png          |
    162 +-----------+------------------------------------------------------------------------+
    163 | Android   | .. image:: ../screenshots/cta-balance-list-android-latest.png          |
    164 |           |    :width: 30%                                                         |
    165 +-----------+------------------------------------------------------------------------+
    166 | iOS       | .. image:: ../screenshots/cta-balance-list-ios-latest.png              |
    167 |           |    :width: 30%                                                         |
    168 +-----------+------------------------------------------------------------------------+
    169 
    170 
    171 .. _cta-actions-ref:
    172 
    173 cta-actions
    174 -----------
    175 
    176 Actions
    177 ^^^^^^^
    178 
    179 * **Enter URI**:
    180 * **Deposit**:
    181 * **Scan QR code**:
    182 * **Receive**:
    183 * **Withdraw**:
    184 * **Send**:
    185 
    186 
    187 Screenshots
    188 ^^^^^^^^^^^
    189 
    190 +-----------+------------------------------------------------------------+
    191 | Platform  | Screenshot                                                 |
    192 +===========+============================================================+
    193 | WebEx     | .. image:: ../screenshots/cta-actions-firefox-latest.png   |
    194 +-----------+------------------------------------------------------------+
    195 | Android   | .. image:: ../screenshots/cta-actions-android-latest.png   |
    196 |           |    :width: 30%                                             |
    197 +-----------+------------------------------------------------------------+
    198 | iOS       | .. image:: ../screenshots/cta-actions-ios-latest.png       |
    199 |           |    :width: 30%                                             |
    200 +-----------+------------------------------------------------------------+
    201 
    202 .. _cta-transaction-list-ref:
    203 
    204 transaction-list
    205 ----------------
    206 
    207 This screen shows a list of all the transactions associated with a given
    208 currency scope.
    209 
    210 Info
    211 ^^^^
    212 
    213 * Total amount and currency (see :doc:`051-fractional-digits`).
    214 * List of transactions associated with the currency scope, with pending
    215   transactions on top, and where each item contains the following:
    216 
    217   * **Title**. It depends on the transaction type. It can be the exchange URL
    218     (e.g. exchange.demo.taler.net) for withdraw,
    219     the receiver name from the payto-URI for
    220     deposits,
    221     the human-provided summary of the transaction
    222     (for push- and pull- P2P payments),
    223     the name of the merchant paid
    224     (e.g. Essay Shop) for payments to merchants and
    225     refunds
    226   * **Status**. It provides complementary information about the transaction
    227     for the user, such as the status of the transaction (e.g. “Waiting for
    228     confirmation,” “KYC required,” an error message, etc.). (The summary is
    229     provided by wallet-core, along with internationalized versions.)
    230   * **Timestamp**. The moment when the transaction was created. Ideally, it
    231     should be shown with minimal precision, only showing the minutes, hours or
    232     days that have elapsed.
    233   * **Amount**. The positive or negative impact that the transaction has in
    234     the total balance of the currency scope. It should be made clear whether
    235     the amount of the transaction is positive or negative, ideally with a sign
    236     (+/-) and a color (green/red).
    237   * **Pending**. It should be indicated whether the transaction is pending or
    238     finished. This can be done with a small badge and with different colors,
    239     however, it should be always clear and communicate the message
    240     effectively.
    241 
    242 Actions
    243 ^^^^^^^
    244 
    245 * **Send**. The transaction list should include a button that allows the user
    246   to initiate transactions that result in money being sent, such as deposits
    247   and peer push payments.
    248 * **Receive**. The transaction list should also include a button that allows
    249   the user to initiate transactions that result in money being received, such
    250   as withdrawals and peer pull payments.
    251 * **View transaction details**. When clicking on a transaction, the user
    252   should be taken to its corresponding transaction details depending on the
    253   type of the transaction clicked.
    254 * **Select transaction(s)**. The user should be able to select one or more
    255   transactions to perform specific bulk actions, such as deleting. The
    256   interaction that triggers this action might differ across platforms. For
    257   example, in Android this would be achieved by double pressing a transaction
    258   (to activate selection mode) and then clicking other transactions to be
    259   selected. On iOS, this could be achieved using an “Edit” button in the
    260   toolbar that reveals checkboxes that allow the user to select the desired
    261   transactions.
    262 * **Delete transaction(s)**. This could be achieved in bulk via selection
    263   mode, or individually for each transaction via a menu or a button. Either
    264   way, performing a deletion should always show a confirmation menu before
    265   doing the actual deletion.
    266 
    267 Layout
    268 ^^^^^^
    269 
    270 * The specific currency for which transactions are shown
    271   SHOULD be prominent (title bar, menu bar)
    272 * The current balance should be on top (ideally always on-top)
    273   just below the title and on the right of the "send" and "receive"
    274   buttons. The current balance should align with the amounts
    275   of the various transactions below.  If possible, it should
    276   have a label "Balance" near (ideally above) it.
    277 * There needs to be a way to go "back" to the
    278   balance list (:ref:`cta-balance-list-ref`) **if**
    279   we have more than a single currency in use. This
    280   can be some (optional) "back" button or some
    281   "home" button or some "balances" menu entry.
    282 * There should be a menu or button from where the QR code entry / scan
    283   functionality is reachable (:ref:`cta-url-entry-ref`)
    284 * There COULD be a menu or button from where the settings screen (:ref:`cta-settings-ref`)
    285   is reachable. The settings screen MUST be reachable
    286   **if** there is no way to get to the balance list screen
    287   because we only have a single currency.
    288 * In developer mode, there MAY be a menu or button
    289   from where the developer tools (:ref:`cta-devtools-ref`)
    290   are reachable. Alternatively, developer tools COULD
    291   also only be reachable via settings.
    292 
    293 
    294 Issues
    295 ^^^^^^
    296 
    297 * WebEx (text): Iconography (T), (W) is not as
    298   nice as iconography in on Android.
    299 * WebEx (image): Screenshot does not show any
    300   pending transactions.
    301 * WebEx (image): Title is wrong (not Transactions)
    302 * iOS (text): Iconography (+ / -) is also not
    303   expressive and redundant with the colors.
    304 * iOS (text): Sign of the operation (+ / -) should
    305   be just before the amount (see Android), not
    306   all the way on the left as an icon. Also can
    307   probably be more subtle?
    308 * iOS (text): currency symbol in front of every
    309   amount value is highly redundant; would be better
    310   to list the currency once in the title (see Android)
    311 * iOS (minor): lacks search button (see Android)
    312 * all (text): use the merchant name for the main
    313   transaction label on refunds (and payments to
    314   merchants)
    315 * all (text): Use the human-provided *summary* of the
    316   P2P payment for both push and pull payments (the
    317   direction is clear from +/- on the amount, and
    318   it should not matter who initiated!)
    319 * all (text): "Deposits" should use the receiver name
    320   of the payto-URI of the target account (URL-decoded)
    321   in the main title, instead of "Deposit"
    322 * iOS (text): "Withdrawal" shown instead of
    323   exchange URL for withdraw
    324 * iOS (text): "Sent Requested money" shown instead of
    325   exchange URL for withdraw
    326 * iOS (major): The balance is not shown. The
    327   "send" and "receive" buttons are missing.
    328 * iOS (minor): has top/buttom scroll buttons not present
    329   in other UIs (likely too much, better to have search!)
    330 
    331 
    332 
    333 Adoption
    334 ^^^^^^^^
    335 
    336 
    337 
    338 Screenshots
    339 ^^^^^^^^^^^
    340 
    341 +-----------+--------------------------------------------------------------------+
    342 | Platform  | Screenshot                                                         |
    343 +===========+====================================================================+
    344 | WebEx     | .. image:: ../screenshots/cta-transaction-list-firefox-latest.png  |
    345 +-----------+--------------------------------------------------------------------+
    346 | Android   | .. image:: ../screenshots/cta-transaction-list-android-latest.png  |
    347 |           |    :width: 30%                                                     |
    348 +-----------+--------------------------------------------------------------------+
    349 | iOS       | .. image:: ../screenshots/cta-transaction-list-ios-latest.png      |
    350 |           |    :width: 30%                                                     |
    351 +-----------+--------------------------------------------------------------------+
    352 
    353 
    354 .. _cta-transactions-pending-ref:
    355 
    356 transactions-pending
    357 --------------------
    358 
    359 This screen shows a currency-scoped list of the pending transactions of the wallet
    360 for that currency, allowing the user to view details about those pending transactions.
    361 
    362 Info
    363 ^^^^
    364 
    365 * List of pending transactions with type/summary, time and amount
    366 
    367 
    368 Actions
    369 ^^^^^^^
    370 
    371 * **Back**. Goes to the balances (:ref:`cta-balance-list-ref`)
    372 * **Select item**. Clicking on the pending transaction shows goes to a dialog
    373   with details about the transaction (and allows the user to abort it).
    374 
    375   * See :ref:`cta-withdraw-pending-ref` for the most relevant withdraw-pending screen
    376 
    377 
    378 Screenshots
    379 ^^^^^^^^^^^
    380 
    381 +-----------+------------------------------------------------------------------------+
    382 | Platform  | Screenshot                                                             |
    383 +===========+========================================================================+
    384 | WebEx     | FIXME                                                                  |
    385 +-----------+------------------------------------------------------------------------+
    386 | Android   | .. image:: ../screenshots/cta-transactions-pending-android-latest.png  |
    387 |           |    :width: 30%                                                         |
    388 +-----------+------------------------------------------------------------------------+
    389 | iOS       | .. image:: ../screenshots/cta-transactions-pending-ios-latest.png      |
    390 |           |    :width: 30%                                                         |
    391 +-----------+------------------------------------------------------------------------+
    392 
    393 
    394 .. _cta-withdraw-review-ref:
    395 
    396 cta-withdraw-review
    397 -------------------
    398 
    399 This screen is used to inform the user that before they can proceed
    400 with a withdrawal, they must accept the terms of service of the exchange.
    401 
    402 
    403 Info
    404 ^^^^
    405 
    406 * Title: "Withdraw $CURRENCY"
    407 * Text:
    408 
    409   * "You must first accept the payment service's terms of service before you can
    410     withdraw digital cash to your wallet."
    411 
    412 * Also should show the provider for which we will review the ToS!
    413 
    414 Actions
    415 ^^^^^^^
    416 
    417 * **change provider**: allow user to change exchange provider for withdraw
    418   (unless we got the provider in a way that makes is un-editable, say
    419   from a cash-acceptor).
    420 * **review and confirm ToS**: advance to the :ref:`cta-accept-tos-ref` screen
    421 * **back**: user will be redirected to previous screen
    422 
    423 
    424 Issues
    425 ^^^^^^
    426 
    427 * iOS(minor): Should allow changing the provider on this screen (if allowed)
    428 * Android(minor): Only allow changing the provider if allowed
    429 * WebEx(major): not unified with other designs
    430 
    431 
    432 Screenshots
    433 ^^^^^^^^^^^
    434 
    435 +-----------+------------------------------------------------------------------+
    436 | Platform  | Screenshot                                                       |
    437 +===========+==================================================================+
    438 | WebEx     | .. image:: ../screenshots/cta-withdraw-review-chrome-latest.png  |
    439 +-----------+------------------------------------------------------------------+
    440 | Android   | .. image:: ../screenshots/cta-withdraw-review-android-latest.png |
    441 |           |    :width: 30%                                                   |
    442 +-----------+------------------------------------------------------------------+
    443 | iOS       | .. image:: ../screenshots/cta-withdraw-review-ios-latest.png     |
    444 |           |    :width: 30%                                                   |
    445 +-----------+------------------------------------------------------------------+
    446 
    447 
    448 
    449 .. _cta-withdraw-ref:
    450 
    451 cta-withdraw
    452 ------------
    453 
    454 This screen is used for the confirmation of a manual withdrawal,
    455 bank-integrated witdrawals and exchange withdrawals.  the success of this
    456 operation will be an increase of the balance in the wallet. Fee, restrictions
    457 and ETA should be clear for the user.
    458 
    459 There is a related dialog where the currency can still be changed, which
    460 then MAY require the "confirm withdraw" button to change into one where
    461 ToS need to be accepted first.
    462 
    463 
    464 Info
    465 ^^^^
    466 
    467 * table of details of the operation: use the :ref:`operation-table-details-ref` screen
    468 * starting currency: if the exchange has the currency conversion service enabled user should be able to the details based on the wire transfer currency
    469 * service provider to be used showing the URL
    470 * amount to be withdrawn
    471 * applicable fees (if any)
    472 
    473 Inputs
    474 ^^^^^^
    475 
    476 * age restriction: allow the selection of the restriction in the age group possible by the exchange
    477 * service provider: allow the selection of different exchange
    478 
    479 Actions
    480 ^^^^^^^
    481 
    482 * **CURRENCY NUMBER** (optional): hot-buttons for quick entry of common amounts
    483 * **confirm withdraw**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
    484 * **back**: user will be redirected to ``balance``
    485 
    486 .. attention::
    487   User should be able to play with the amount, not possible in the current design
    488 
    489 Issues
    490 ^^^^^^
    491 
    492 * WebEx(major): the flow and dialog style here diverges too much from the other platforms (bad).
    493 * iOS(minor): title is less clear than "Withdraw from bank" on Android
    494 
    495 
    496 Adoption
    497 ^^^^^^^^
    498 
    499 * We should probably keep the "specify the origin
    500   of the money" from Firefox as a dialog after
    501   "Receive funds" is selected in the
    502   transaction list (:ref:`cta-transaction-list-ref`),
    503   but without the amount entry. Keep it simple,
    504   mostly binary choice: withdraw, invoice, or back.
    505 * Eventually, we may want an "edit" (pen) icon next to the exchange URL, and
    506   if context has fixed the amount or exchange, the respective buttons should be hidden.
    507 
    508 Screenshots
    509 ^^^^^^^^^^^
    510 
    511 +-----------+----------------------------------------------------------------+
    512 | Platform  | Screenshot                                                     |
    513 +===========+================================================================+
    514 | WebEx     | .. image:: ../screenshots/cta-withdraw-firefox-latest.png      |
    515 +-----------+----------------------------------------------------------------+
    516 | Android   | .. image:: ../screenshots/cta-withdraw-android-latest.png      |
    517 |           |    :width: 30%                                                 |
    518 +-----------+----------------------------------------------------------------+
    519 | iOS       | .. image:: ../screenshots/cta-withdraw-ios-latest.png          |
    520 |           |    :width: 30%                                                 |
    521 +-----------+----------------------------------------------------------------+
    522 
    523 
    524 This screen is used to ask the the user to confirm the withdrawal operation,
    525 now that all data has been provided.
    526 
    527 
    528 .. _cta-wire-transfer-ref:
    529 
    530 cta-wire-transfer
    531 -----------------
    532 
    533 This screen is used to show the user the information for the wire transfer to
    534 complete a manual withdrawal operation.
    535 
    536 Info
    537 ^^^^
    538 
    539 * wire transfer subject to be used (first, most important)
    540 * target bank account to transfer funds to (e.g. IBAN)
    541 * total amount to transfer in the wire transfer currency
    542 * button to copy ``payto://`` URI with the information to clipboard
    543 
    544 Actions
    545 ^^^^^^^
    546 
    547 * **done**: go back to the main balances list (operation continues in background)
    548 * **view detailed instructions**: go to :ref:`cta-wire-transfer-details-ref`
    549 * **view QR codes**: go to :ref:`cta-wire-transfer-qr-ref`
    550 * **automatic**: screen changes to :ref:`cta-withdraw-done-ref` upon completion
    551 
    552 Issues
    553 ^^^^^^
    554 
    555 * WebEx(text): if there is no fee, no point in showing
    556   the amount **3** times. Maybe only show the amount
    557   on top with the wire transfer details, and then at
    558   the bottom show the fee ONCE *if* there is one?
    559 * iOS(minor): fees are shown even if they are 0; hide!
    560 * All(image): the screenshots do not show how to select an alternative bank (see: Netzbon). Might be nice to show that.
    561 
    562 
    563 
    564 Adoption
    565 ^^^^^^^^
    566 
    567 * 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?)
    568 * Android(text):  iOS has much clearer instructions (more text)
    569 * iOS(text): transaction status is shown as "pending", which is kind-of redundant 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 "Status: Pending" on WebEx/iOS as that is *always* the case when we give the user wire transfer instructions here!
    570 
    571 
    572 
    573 Screenshots
    574 ^^^^^^^^^^^
    575 
    576 +-----------+------------------------------------------------------------------+
    577 | Platform  | Screenshot                                                       |
    578 +===========+==================================================================+
    579 | WebEx     | .. image:: ../screenshots/cta-wire-transfer-firefox-latest.png   |
    580 +-----------+------------------------------------------------------------------+
    581 | Android   | .. image:: ../screenshots/cta-wire-transfer-android-latest.png   |
    582 |           |    :width: 30%                                                   |
    583 +-----------+------------------------------------------------------------------+
    584 | iOS       | .. image:: ../screenshots/cta-wire-transfer-ios-latest.png       |
    585 |           |    :width: 30%                                                   |
    586 +-----------+------------------------------------------------------------------+
    587 
    588 .. _cta-wire-transfer-details-ref:
    589 
    590 cta-wire-transfer-details
    591 -------------------------
    592 
    593 This screen shows the detailed instructions for the manual wire transfer.
    594 
    595 Info
    596 ^^^^
    597 
    598 * wire transfer subject to be used (first, most important)
    599 * target bank account to transfer funds to (e.g. IBAN)
    600 * total amount to transfer in the wire transfer currency
    601 * button to copy ``payto://`` URI with the information to clipboard
    602 
    603 Actions
    604 ^^^^^^^
    605 
    606 * **back**: goes back to the main wire transfer screen
    607 * **copy**: copies details about the instructions to the clipboard
    608 
    609 +-----------+------------------------------------------------------------------------+
    610 | Platform  | Screenshot                                                             |
    611 +===========+========================================================================+
    612 | WebEx     | FIXME                                                                  |
    613 +-----------+------------------------------------------------------------------------+
    614 | Android   | .. image:: ../screenshots/cta-wire-transfer-details-android-latest.png |
    615 |           |    :width: 30%                                                         |
    616 +-----------+------------------------------------------------------------------------+
    617 | iOS       | .. image:: ../screenshots/cta-wire-transfer-details-ios-latest.png     |
    618 |           |    :width: 30%                                                         |
    619 +-----------+------------------------------------------------------------------------+
    620 
    621 .. _cta-wire-transfer-qr-ref:
    622 
    623 cta-wire-transfer-qr
    624 --------------------
    625 
    626 This screen shows the QR codes for the wire transfer for banks that support it.
    627 
    628 Info
    629 ^^^^
    630 
    631 * QR codes for banking systems that could work with the respective exchange's bank account
    632 
    633 Actions
    634 ^^^^^^^
    635 
    636 * **back**: goes back to the main wire transfer screen
    637 * **copy** (per QR code): copies image to the clipboard (?)
    638 * **share** (per QR code): opens link on local system (?)
    639 
    640 
    641 +-----------+------------------------------------------------------------------+
    642 | Platform  | Screenshot                                                       |
    643 +===========+==================================================================+
    644 | WebEx     | FIXME                                                            |
    645 +-----------+------------------------------------------------------------------+
    646 | Android   | .. image:: ../screenshots/cta-wire-transfer-qr-android-latest.png|
    647 |           |    :width: 30%                                                   |
    648 +-----------+------------------------------------------------------------------+
    649 | iOS       | .. image:: ../screenshots/cta-wire-transfer-qr-ios-latest.png    |
    650 |           |    :width: 30%                                                   |
    651 +-----------+------------------------------------------------------------------+
    652 
    653 
    654 .. _cta-withdraw-pending-ref:
    655 
    656 cta-withdraw-pending
    657 --------------------
    658 
    659 This screen is used to show the user the information for a pending wire transfer to
    660 complete a manual withdrawal operation when viewing the transaction via the pending
    661 transaction history (:ref:`cta-transactions-pending-ref`).
    662 
    663 Info
    664 ^^^^
    665 
    666 Same as in :ref:`cta-wire-transfer-details-ref`.
    667 
    668 Actions
    669 ^^^^^^^
    670 
    671 * **abort**: aborts the withdrawal operation (with warning/explanation)
    672 * **back**: go back to the pending transaction list (operation continues in background)
    673 * **view detailed instructions**: go to :ref:`cta-wire-transfer-details-ref`
    674 * **view QR codes**: go to :ref:`cta-wire-transfer-qr-ref`
    675 * **automatic**: screen changes to :ref:`cta-withdraw-done-ref` upon completion
    676 
    677 Issues
    678 ^^^^^^
    679 
    680 * See :ref:`cta-wire-transfer-details-ref`, same issues apply here.
    681 * Android(minor): screen might be a bit much, maybe partition like the iOS screen
    682   with separate screens for details / QR codes (especially give that there will
    683   be a 3rd option eventually as well!)
    684 * Android(text): Texts differ from iOS, iOS texts are clearer for the transaction
    685   details; exchange URL is too prominent
    686 * iOS(text): remove text URL in section header
    687 * iOS(minor): remove fees if fees are zero
    688 
    689 Screenshots
    690 ^^^^^^^^^^^
    691 
    692 +-----------+--------------------------------------------------------------------+
    693 | Platform  | Screenshot                                                         |
    694 +===========+====================================================================+
    695 | WebEx     | .. image:: ../screenshots/cta-withdraw-pending-firefox-latest.png  |
    696 +-----------+--------------------------------------------------------------------+
    697 | Android   | .. image:: ../screenshots/cta-withdraw-pending-android-latest.png  |
    698 |           |    :width: 30%                                                     |
    699 +-----------+--------------------------------------------------------------------+
    700 | iOS       | .. image:: ../screenshots/cta-withdraw-pending-ios-latest.png      |
    701 |           |    :width: 30%                                                     |
    702 +-----------+--------------------------------------------------------------------+
    703 
    704 
    705 .. _cta-withdraw-kyc-ref:
    706 
    707 cta-withdraw-kyc
    708 ----------------
    709 
    710 This screen is used to inform the user that to proceed with a withdraw operation,
    711 they must pass a KYC check.
    712 
    713 Info
    714 ^^^^
    715 
    716 * date
    717 * Text informing about "You need to pass a KYC procedure."
    718 * amount wired  (hidden if no fees)
    719 * fees paid (hidden if no fees)
    720 * total amount withdrawn into wallet (effective balance change)
    721 
    722 Actions
    723 ^^^^^^^
    724 
    725 * **Open KYC website**: opens KYC start URL
    726 
    727 Issues
    728 ^^^^^^
    729 
    730 * iOS(major): not point in showing wire transfer instructions if the wire transfer was already done!
    731 
    732 
    733 Adoption
    734 ^^^^^^^^
    735 
    736 
    737 Screenshots
    738 ^^^^^^^^^^^
    739 
    740 +-----------+------------------------------------------------------------------+
    741 | Platform  | Screenshot                                                       |
    742 +===========+==================================================================+
    743 | WebEx     | FIXME                                                            |
    744 +-----------+------------------------------------------------------------------+
    745 | Android   | .. image:: ../screenshots/cta-withdraw-kyc-android-latest.png    |
    746 |           |    :width: 30%                                                   |
    747 +-----------+------------------------------------------------------------------+
    748 | iOS       | .. image:: ../screenshots/cta-withdraw-kyc-ios-latest.png        |
    749 |           |    :width: 30%                                                   |
    750 +-----------+------------------------------------------------------------------+
    751 
    752 
    753 .. _cta-withdraw-done-ref:
    754 
    755 cta-withdraw-done
    756 -----------------
    757 
    758 This screen is used to show the user the information for a completed withdraw
    759 operation (bank-integrated or manual).
    760 
    761 Info
    762 ^^^^
    763 
    764 * amount wired  (hidden if no fees)
    765 * fees paid (hidden if no fees)
    766 * total amount withdrawn into wallet (effective balance change)
    767 * exchange base URL
    768 * date
    769 
    770 Actions
    771 ^^^^^^^
    772 
    773 * **delete**: deletes information about the withdrawal operation
    774 
    775 Issues
    776 ^^^^^^
    777 
    778 * iOS(text): not point in showing details if there are no fees.
    779 * iOS(text): status: Done is unnecessary, if we show this screen, it will always be 'done' (ok, theoretically in the middle of withdrawing, but the wire transfer will be done; but then maybe show 'incoming' but hide the status once really "done").
    780 * Android/Webext(text): "Delete" vs. 'Delete from history" --- two
    781   styles, two translations. Use "Delete from history" consistently!
    782 
    783 
    784 Adoption
    785 ^^^^^^^^
    786 
    787 * We probably want to show a "pending" transaction if we
    788   are still withdrawing (wire transfer did arrived, coins
    789   are still being generated). That's a very brief time,
    790   but we probably want to use a minor variation of this
    791   dialog in that case.  Not sure it needs to be quite
    792   as prominent as on iOS though...
    793 
    794 
    795 
    796 Screenshots
    797 ^^^^^^^^^^^
    798 
    799 +-----------+------------------------------------------------------------------+
    800 | Platform  | Screenshot                                                       |
    801 +===========+==================================================================+
    802 | WebEx     | .. image:: ../screenshots/cta-withdraw-done-firefox-latest.png   |
    803 +-----------+------------------------------------------------------------------+
    804 | Android   | .. image:: ../screenshots/cta-withdraw-done-android-latest.png   |
    805 |           |    :width: 30%                                                   |
    806 +-----------+------------------------------------------------------------------+
    807 | iOS       | .. image:: ../screenshots/cta-withdraw-done-ios-latest.png       |
    808 |           |    :width: 30%                                                   |
    809 +-----------+------------------------------------------------------------------+
    810 
    811 
    812 .. _cta-url-entry-ref:
    813 
    814 cta-url-entry
    815 -------------
    816 
    817 This screen allows the user to scan a QR code, scan an NFC tag, or enter a
    818 taler://-URL.  Its implementation may differ significantly between
    819 platforms. For example, scanning NFC tags may be fully automated, scanning QR
    820 codes may involve some system applications, and maybe the dialog only allows
    821 the URL entry *or* the camera but not both at the same time, depending on
    822 implementation specifics.
    823 
    824 Info
    825 ^^^^
    826 
    827 * camera with current image to enable user to focus on QR code
    828 * current URL, with information if it is not well-formed for GNU Taler
    829 * possibly status information on NFC reader (if available)
    830 
    831 Actions
    832 ^^^^^^^
    833 
    834 * **open**: if entered manually, open URL as-entered (otherwise open is automatic)
    835 * **back**: return to previous view
    836 
    837 Issues
    838 ^^^^^^
    839 
    840 * iOS (screenshot): lacks dialog (or screenshot?) entirely, not sure if we need manual URL-entry on mobile though, so could be OK!
    841 
    842 
    843 
    844 
    845 Screenshots
    846 ^^^^^^^^^^^
    847 
    848 +-----------+------------------------------------------------------------------+
    849 | Platform  | Screenshot                                                       |
    850 +===========+==================================================================+
    851 | WebEx     | .. image:: ../screenshots/cta-url-entry-firefox-latest.png       |
    852 +-----------+------------------------------------------------------------------+
    853 | Android   | .. image:: ../screenshots/cta-url-entry-android-latest.png       |
    854 |           |    :width: 30%                                                   |
    855 +-----------+------------------------------------------------------------------+
    856 
    857 
    858 .. _cta-payment-ref:
    859 
    860 cta-payment
    861 -----------
    862 
    863 This screen is used for the confirmation of a payment to a merchant.  the
    864 success of this operation will be an decrease of the balance in the wallet and
    865 save a ticket/invoice of the purchase.  fee, restrictions and ETA should be
    866 clear for the user.
    867 
    868 Info
    869 ^^^^
    870 
    871 * merchant offering the order showing the URL
    872 * order summary
    873 * table of details of the operation: use the :ref:`operation-table-details-ref` screen
    874 * receipt: order id
    875 * taler URI: show copy button or QR to complete the operation with another device (webex only)
    876 * cannot pay desc: if the user doesn't have enough money, or if they have enough balance but unable to use it
    877 * payment status: if the order was already paid / repurchased / auto-paid
    878 
    879 Actions
    880 ^^^^^^^
    881 
    882 * **Confirm payment**: 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
    883 * **get more cash**: if there is not enough balance, it will be redirected to :ref:`cta-withdraw-ref`
    884 * **show full details**: pops up dialog with full transaction details (everything from contract terms)
    885 * **back/cancel**: user will be redirected to :ref:`cta-balance-list-ref`
    886 
    887 Issues
    888 ^^^^^^
    889 
    890 * WebEx(Text): "Valid until" is likely confusing, not shown on other platforms. Maybe only show "offer expired" instead of pay button (on all platforms!)?
    891 * Android/iOS(major): lack action to show full contract details
    892 * iOS(text): the label 'Summary' appears only on iOS, and seems unnecessary.
    893 * All(major): detailed layout differs significantly between platforms, needs review
    894   and unification!
    895 * All(screenshot): would be good to have sceenshots of the main variations: with/without product preview images, with/without fees, full details/partial details (if we have such a toggle).
    896 
    897 
    898 Screenshots
    899 ^^^^^^^^^^^
    900 
    901 +-----------+------------------------------------------------------------------+
    902 | Platform  | Screenshot                                                       |
    903 +===========+==================================================================+
    904 | WebEx     | .. image:: ../screenshots/cta-payment-firefox-latest.png         |
    905 +-----------+------------------------------------------------------------------+
    906 | Android   | .. image:: ../screenshots/cta-payment-android-latest.png         |
    907 |           |    :width: 30%                                                   |
    908 +-----------+------------------------------------------------------------------+
    909 | iOS       | .. image:: ../screenshots/cta-payment-ios-latest.png             |
    910 |           |    :width: 30%                                                   |
    911 +-----------+------------------------------------------------------------------+
    912 
    913 
    914 .. _cta-payment-paid-ref:
    915 
    916 cta-payment-paid
    917 ----------------
    918 
    919 This screen is used to show information with details about a historic payment.
    920 
    921 Info
    922 ^^^^
    923 
    924 * merchant offering the order showing the URL
    925 * order summary
    926 * table of details of the operation: use the :ref:`operation-table-details-ref` screen
    927 * receipt: order id
    928 * payment status: if the order was refunded
    929 * Text to use:
    930 
    931   * **Title**. Name of the merchant paid
    932     (e.g. Essay Shop)
    933   * **Status**. It provides complementary information about the transaction
    934     for the user, such as the status of the transaction (e.g. “Waiting for
    935     confirmation,” “KYC required,” an error message, etc.). (The summary is
    936     provided by wallet-core, along with internationalized versions.)
    937   * **Timestamp**. The moment when the payment was made. Ideally, it
    938     should be shown with minimal precision, only showing the minutes, hours or
    939     days that have elapsed.
    940   * **Amount**. The negative impact that the transaction has in
    941     the total balance of the currency scope. It should be made clear that the amount is negative, ideally with a sign (-). Color (red) should not be used because of both psychological impact (people want to avoid red) and confusion with errors.
    942 
    943 
    944 Actions
    945 ^^^^^^^
    946 
    947 * **delete**: delete information about the transaction
    948 * **open merchant website**: opens fullfillment URL in browser (alternatively, dialog should show fulfillment message)
    949 * **write NFC** if the merchant sends totp codes, the wallet offers to write them via NFC (e.g. to a merchant vending machine) to prove the payment
    950 * **show TOTP code** presents the transferred totp codes
    951 * **back**: user will be redirected to ``balance``
    952 
    953 Issues
    954 ^^^^^^
    955 
    956 * iOS(major): delete button is missing, instead only has "Done"
    957 * android(major): lacks button to open fulfillment URL in browser
    958 * WebEx(major): lacks button to open fulfillment URL in browser
    959 
    960 
    961 
    962 Screenshots
    963 ^^^^^^^^^^^
    964 
    965 +-----------+------------------------------------------------------------------+
    966 | Platform  | Screenshot                                                       |
    967 +===========+==================================================================+
    968 | WebEx     | .. image:: ../screenshots/cta-payment-paid-firefox-latest.png    |
    969 +-----------+------------------------------------------------------------------+
    970 | Android   | .. image:: ../screenshots/cta-payment-paid-android-latest.png    |
    971 |           |    :width: 30%                                                   |
    972 +-----------+------------------------------------------------------------------+
    973 | iOS       | .. image:: ../screenshots/cta-payment-paid-ios-latest.png        |
    974 |           |    :width: 30%                                                   |
    975 +-----------+------------------------------------------------------------------+
    976 
    977 
    978 .. _cta-deposit-ref:
    979 
    980 cta-deposit
    981 -----------
    982 
    983 This screen is used for the confirmation of a deposit.  the success of this
    984 operation will be an decrease of the balance in the wallet and save a deposit
    985 ticket for reference.  fee, restrictions and ETA should be clear for the user.
    986 
    987 Info
    988 ^^^^
    989 
    990 * bank account where the money is going to
    991 * table of details of the operation: use the :ref:`operation-table-details-ref` screen
    992 
    993 Actions
    994 ^^^^^^^
    995 
    996 * **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
    997 * **cancel**: user will be redirected to ``balance``
    998 
    999 .. attention::
   1000   User should be able to play with the amount, not possible in the current design
   1001 
   1002 Issues
   1003 ^^^^^^
   1004 
   1005 * WebEx(screenshot): need new section in this document for 'ctx-manage-account'.
   1006 * WebEx(minor): should probably separate out target account selection and amount entry, as done on iOS
   1007 * WebEx(text): "amount" is a bad label, "brut amount" might be good, then use "net deposit"
   1008 * WebEx(text): might be good to have "net deposit" amount also editable, not just computed (and then update "brut amount").
   1009 * Android(screenshot): lacks screenshots for dialogs where we enter/edit accounts and amounts
   1010 * Android(minor): if we do it iOS/WebEx style, we can probalby skip the 'pure' confirmation dialog and have the one where the brut/net amounts are entered be the final one in the sequence before the transaction happens
   1011 * all(screenshot): we need a new dialog showing the transaction in-flight/done as reachable via transaction history
   1012 
   1013 
   1014 Adoption
   1015 ^^^^^^^^
   1016 
   1017 * iOS: I think it makes sense to split this section up into account selection / management and amount entry & confirmation; we should only have one major screen per section! Please split other UIs similarly and let's introduce a new section here.
   1018 
   1019 
   1020 Screenshots
   1021 ^^^^^^^^^^^
   1022 
   1023 +-----------+------------------------------------------------------------------+
   1024 | Platform  | Screenshot                                                       |
   1025 +===========+==================================================================+
   1026 | WebEx     | .. image:: ../screenshots/cta-deposit-firefox-latest.png         |
   1027 +-----------+------------------------------------------------------------------+
   1028 | Android   | .. image:: ../screenshots/cta-deposit-1-android-latest.png       |
   1029 |           |    :width: 30%                                                   |
   1030 |           | .. image:: ../screenshots/cta-deposit-2-android-latest.png       |
   1031 |           |    :width: 30%                                                   |
   1032 +-----------+------------------------------------------------------------------+
   1033 | iOS       | .. image:: ../screenshots/cta-deposit-1-ios-latest.png           |
   1034 |           |    :width: 30%                                                   |
   1035 |           | .. image:: ../screenshots/cta-deposit-2-ios-latest.png           |
   1036 |           |    :width: 30%                                                   |
   1037 +-----------+------------------------------------------------------------------+
   1038 
   1039 .. _cta-bank-accounts-ref:
   1040 
   1041 cta-bank-accounts
   1042 -----------------
   1043 
   1044 Screenshots
   1045 ^^^^^^^^^^^
   1046 
   1047 +-----------+------------------------------------------------------------------+
   1048 | Platform  | Screenshot                                                       |
   1049 +===========+==================================================================+
   1050 | WebEx     | FIXME                                                            |
   1051 +-----------+------------------------------------------------------------------+
   1052 | Android   | .. image:: ../screenshots/cta-bank-accounts-android-latest.png   |
   1053 |           |    :width: 30%                                                   |
   1054 +-----------+------------------------------------------------------------------+
   1055 | iOS       | FIXME                                                            |
   1056 |           |                                                                  |
   1057 +-----------+------------------------------------------------------------------+
   1058 
   1059 .. _cta-bank-account-edit-ref:
   1060 
   1061 cta-bank-account-edit
   1062 ---------------------
   1063 
   1064 +-----------+---------------------------------------------------------------------+
   1065 | Platform  | Screenshot                                                          |
   1066 +===========+=====================================================================+
   1067 | WebEx     | FIXME                                                               |
   1068 +-----------+---------------------------------------------------------------------+
   1069 | Android   | .. image:: ../screenshots/cta-bank-account-edit-android-latest.png  |
   1070 |           |    :width: 30%                                                      |
   1071 +-----------+---------------------------------------------------------------------+
   1072 | iOS       | FIXME                                                               |
   1073 +-----------+---------------------------------------------------------------------+
   1074 
   1075 .. _cta-peer-pull-initiate-ref:
   1076 
   1077 cta-peer-pull-initiate
   1078 ----------------------
   1079 
   1080 This screen is used for the confirmation of the creation of a peer pull
   1081 transaction or invoice to request money from another wallet.  the success of
   1082 this operation will not change the balance immediately in the wallet and allow
   1083 the user to share a taler URI to the payer.  fee, restrictions and ETA should
   1084 be clear for the user.
   1085 
   1086 Info
   1087 ^^^^
   1088 
   1089 * exchange to be used showing the URL
   1090 * table of details of the operation: use the :ref:`operation-table-details-ref` screen
   1091 
   1092 Inputs
   1093 ^^^^^^
   1094 
   1095 * **subject**: short description of the transaction
   1096 * **expiration**: absolute time/date after which the invoice is not valid anymore
   1097 * **service provider**: allow the selection of different exchange
   1098 
   1099 Actions
   1100 ^^^^^^^
   1101 
   1102 * **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
   1103 * **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
   1104 * *cancel*: user will be redirected to ``balance``
   1105 
   1106 .. attention::
   1107   Is the invoice creation always free of charge or does the exchange have a mechanism
   1108   to impose a fee to pay on creation?
   1109 
   1110 Issues
   1111 ^^^^^^
   1112 
   1113 * iOS(text): 3 min/ 1h are inconsistent; other wallets have 1 day, 7 days, 30 days. We should be consistent.
   1114 
   1115 
   1116 Adoption
   1117 ^^^^^^^^
   1118 
   1119 Screenshots
   1120 ^^^^^^^^^^^
   1121 
   1122 +-----------+----------------------------------------------------------------------+
   1123 | Platform  | Screenshot                                                           |
   1124 +===========+======================================================================+
   1125 | WebEx     | .. image:: ../screenshots/cta-peer-pull-initiate-firefox-latest.png  |
   1126 +-----------+----------------------------------------------------------------------+
   1127 | Android   | .. image:: ../screenshots/cta-peer-pull-initiate-android-latest.png  |
   1128 |           |    :width: 30%                                                       |
   1129 +-----------+----------------------------------------------------------------------+
   1130 | iOS       | .. image:: ../screenshots/cta-peer-pull-initiate-ios-latest.png      |
   1131 |           |    :width: 30%                                                       |
   1132 +-----------+----------------------------------------------------------------------+
   1133 
   1134 
   1135 .. _cta-peer-pull-confirm-ref:
   1136 
   1137 cta-peer-pull-confirm
   1138 ---------------------
   1139 
   1140 This screen is used for the confirmation of the payment of a peer pull
   1141 transaction or invoice to send money from another wallet.  the success of this
   1142 operation will be an will decrease the balance in the wallet.  fee,
   1143 restrictions and ETA should be clear for the user.
   1144 
   1145 Info
   1146 ^^^^
   1147 
   1148 * exchange to be used showing the URL
   1149 * subject: short description of the transaction
   1150 * table of details of the operation: use the :ref:`operation-table-details-ref` screen
   1151 * expiration: absolute time/date after which the invoice is not valid anymore
   1152 
   1153 Actions
   1154 ^^^^^^^
   1155 
   1156 * **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
   1157 * **get more cash**: if there is not enough balance, it will be redirected to :ref:`cta-withdraw-ref`
   1158 * **cancel**: user will be redirected to ``balance``
   1159 
   1160 cta-peer-push-initiate
   1161 ----------------------
   1162 
   1163 This screen is used for the confirmation of the creation of a peer push
   1164 transaction or transfer money to another wallet.  the success of this
   1165 operation will reduce the balance immediately in the wallet and allow the user
   1166 to share a taler URI to the receiver.  fee, restrictions and ETA should be
   1167 clear for the user.
   1168 
   1169 Info
   1170 ^^^^
   1171 
   1172 * table of details of the operation: use the ``operation-table-details`` screen
   1173 
   1174 Inputs
   1175 ^^^^^^
   1176 
   1177 * **subject**: short description of the transaction
   1178 * **expiration**: absolute time/date after which the transfer is not valid anymore
   1179 
   1180 Actions
   1181 ^^^^^^^
   1182 
   1183 * **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
   1184 * **cancel**: user will be redirected to ``balance``
   1185 
   1186 Issues
   1187 ^^^^^^
   1188 
   1189 * WebEx(minor): forces user to scroll to the bottom. Android nicely shows the accept button always; that seems nicer;
   1190 * WebEx(text): has text about "Digital cash withdrawal" above. Would be more consistent if we also *only* showed the Terms of service.
   1191 * Android(text): uses "Exchange", should say "PSP's Terms of Service"
   1192 * iOS(screenshot): lacks actual ToS, not ideal to compare!
   1193 
   1194 
   1195 Adoption
   1196 ^^^^^^^^
   1197 
   1198 
   1199 Screenshots
   1200 ^^^^^^^^^^^
   1201 
   1202 +-----------+----------------------------------------------------------------------+
   1203 | Platform  | Screenshot                                                           |
   1204 +===========+======================================================================+
   1205 | WebEx     | .. image:: ../screenshots/cta-peer-push-initiate-firefox-latest.png  |
   1206 +-----------+----------------------------------------------------------------------+
   1207 | Android   | .. image:: ../screenshots/cta-peer-push-initiate-android-latest.png  |
   1208 |           |    :width: 30%                                                       |
   1209 +-----------+----------------------------------------------------------------------+
   1210 | iOS       | .. image:: ../screenshots/cta-peer-push-initiate-ios-latest.png      |
   1211 |           |    :width: 30%                                                       |
   1212 +-----------+----------------------------------------------------------------------+
   1213 
   1214 
   1215 .. _cta-peer-push-confirm-ref:
   1216 
   1217 cta-peer-push-confirm
   1218 ---------------------
   1219 
   1220 This screen is used for the confirmation of the acceptance of a peer push
   1221 transaction or transfer money to this wallet.  the success of this operation
   1222 will be an will decrease the balance in the wallet.  fee, restrictions and ETA
   1223 should be clear for the user.
   1224 
   1225 Info
   1226 ^^^^
   1227 
   1228 * subject: short description of the payment
   1229 * expiration: absolute time/date after which the invoice is not valid anymore
   1230 * table of details of the operation: use the ``operation-table-details`` screen
   1231 
   1232 Actions
   1233 ^^^^^^^
   1234 
   1235 * **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
   1236 * **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
   1237 * **cancel**: user will be redirected to ``balance``
   1238 
   1239 Issues
   1240 ^^^^^^
   1241 
   1242 * All(screenshot): we have no screenshots!
   1243 
   1244 
   1245 Adoption
   1246 ^^^^^^^^
   1247 
   1248 
   1249 Screenshots
   1250 ^^^^^^^^^^^
   1251 
   1252 
   1253 .. _operation-table-details-ref:
   1254 
   1255 operation-table-details
   1256 -----------------------
   1257 
   1258 With the table it should be clear how much the operation will cost, the
   1259 initial amount and the final amount with all the items related to the
   1260 operations (like fee)
   1261 
   1262 Labels
   1263 ^^^^^^
   1264 
   1265 Initial amount of the operation, and final amount are always shown. Fee should
   1266 be shown as an extra row in the table if it is non-zero. Converted amount
   1267 should be shown as an extra row if initial amount currency is not the same as
   1268 the final amount currency.
   1269 
   1270 Initial amount label by operation:
   1271 
   1272  * payment -> Price
   1273  * deposit -> Send
   1274  * peer-pull-credit -> Invoice
   1275  * peer-pull-debit -> Invoice
   1276  * peer-push-debit -> Send
   1277  * peer-push-credit -> Transfer
   1278  * withdrawal -> Transfer
   1279  * refund -> Refund
   1280 
   1281 
   1282 .. _cta-accept-tos-ref:
   1283 
   1284 accept-tos
   1285 ----------
   1286 
   1287 This screen can be use everytime that the user is going to interact with an
   1288 exchange. Since at any moment wallet may find that ToS changed the user needs
   1289 to be prevented from continue before reading/accepting new rules. If possible,
   1290 this screen should be used in place of other actions and hidden if not required
   1291 (for example, user already accepted ToS).
   1292 
   1293 
   1294 Inputs
   1295 ^^^^^^
   1296 
   1297 * **languange**: allow the selection of a languange different from system lang
   1298 
   1299 Actions
   1300 ^^^^^^^
   1301 
   1302 * **accept tos**: will mark this version as accepted in wallet core and redirect the user to the screen from where it was invoked
   1303 * **export/save/print tos** (optional): will save the ToS outside of the wallet
   1304 
   1305 Issues
   1306 ^^^^^^
   1307 
   1308 * all(minor): All platforms seem to lack export/save as/print functionality
   1309 
   1310 Adoption
   1311 ^^^^^^^^
   1312 
   1313 
   1314 Screenshots
   1315 ^^^^^^^^^^^
   1316 
   1317 +-----------+------------------------------------------------------------------+
   1318 | Platform  | Screenshot                                                       |
   1319 +===========+==================================================================+
   1320 | WebEx     | .. image:: ../screenshots/cta-accept-tos-firefox-latest.png      |
   1321 |           |    :width: 30%                                                   |
   1322 +-----------+------------------------------------------------------------------+
   1323 | Android   | .. image:: ../screenshots/cta-accept-tos-android-latest.png      |
   1324 |           |    :width: 30%                                                   |
   1325 +-----------+------------------------------------------------------------------+
   1326 | iOS       | .. image:: ../screenshots/cta-accept-tos-ios-latest.png          |
   1327 |           |    :width: 30%                                                   |
   1328 +-----------+------------------------------------------------------------------+
   1329 
   1330 +-----------+----------------------------------------------------------------------+
   1331 | Platform  | Screenshot                                                           |
   1332 +===========+======================================================================+
   1333 | WebEx     | FIXME                                                                |
   1334 +-----------+----------------------------------------------------------------------+
   1335 | Android   | .. image:: ../screenshots/cta-accept-tos-language-android-latest.png |
   1336 |           |    :width: 30%                                                       |
   1337 +-----------+----------------------------------------------------------------------+
   1338 | iOS       | .. image:: ../screenshots/cta-accept-tos-language-ios-latest.png     |
   1339 |           |    :width: 30%                                                       |
   1340 +-----------+----------------------------------------------------------------------+
   1341 
   1342 .. _cta-settings-ref:
   1343 
   1344 settings
   1345 --------
   1346 
   1347 Info
   1348 ^^^^
   1349 
   1350 Layout
   1351 ^^^^^^
   1352 
   1353 Actions
   1354 ^^^^^^^
   1355 
   1356 Issues
   1357 ^^^^^^
   1358 
   1359 Adoption
   1360 ^^^^^^^^
   1361 
   1362 Screenshots
   1363 ^^^^^^^^^^^
   1364 +-----------+------------------------------------------------------------------+
   1365 | Platform  | Screenshot                                                       |
   1366 +===========+==================================================================+
   1367 | Android   | .. image:: ../screenshots/cta-settings-android-latest.png        |
   1368 |           |    :width: 30%                                                   |
   1369 +-----------+------------------------------------------------------------------+
   1370 | iOS       | .. image:: ../screenshots/cta-settings-ios-latest.png            |
   1371 |           |    :width: 30%                                                   |
   1372 +-----------+------------------------------------------------------------------+
   1373 
   1374 .. _cta-exchange-loading-ref:
   1375 
   1376 cta-exchange-loading
   1377 --------------------
   1378 
   1379 Info
   1380 ^^^^
   1381 
   1382 This screen is shown while the wallet downloads and parses the exchange
   1383 meta-data (/config, /keys, terms of service).
   1384 
   1385 Layout
   1386 ^^^^^^
   1387 
   1388 Actions
   1389 ^^^^^^^
   1390 
   1391 Issues
   1392 ^^^^^^
   1393 
   1394 Adoption
   1395 ^^^^^^^^
   1396 
   1397 Screenshots
   1398 ^^^^^^^^^^^
   1399 
   1400 +-----------+-------------------------------------------------------------------+
   1401 | Platform  | Screenshot                                                        |
   1402 +===========+===================================================================+
   1403 | WebEx     | FIXME                                                             |
   1404 +-----------+-------------------------------------------------------------------+
   1405 | Android   | .. image:: ../screenshots/cta-exchange-loading-android-latest.png |
   1406 |           |    :width: 30%                                                    |
   1407 +-----------+-------------------------------------------------------------------+
   1408 | iOS       | .. image:: ../screenshots/cta-exchange-loading-ios-latest.png     |
   1409 |           |    :width: 30%                                                    |
   1410 +-----------+-------------------------------------------------------------------+
   1411 
   1412 
   1413 .. _cta-devtools-ref:
   1414 
   1415 developer-tools
   1416 ---------------
   1417 
   1418 Info
   1419 ^^^^
   1420 
   1421 Layout
   1422 ^^^^^^
   1423 
   1424 Actions
   1425 ^^^^^^^
   1426 
   1427 Issues
   1428 ^^^^^^
   1429 
   1430 Adoption
   1431 ^^^^^^^^
   1432 
   1433 Screenshots
   1434 ^^^^^^^^^^^
   1435 
   1436 +-----------+-------------------------------------------------------------------+
   1437 | Platform  | Screenshot                                                        |
   1438 +===========+===================================================================+
   1439 | Android   | .. image:: ../screenshots/cta-developer-tools-android-latest.png  |
   1440 |           |    :width: 30%                                                    |
   1441 +-----------+-------------------------------------------------------------------+
   1442 | iOS       | FIXME                                                             |
   1443 +-----------+-------------------------------------------------------------------+
   1444 
   1445 Q / A
   1446 =====