053-wallet-ui.rst (59401B)
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 | .. image:: ../screenshots/cta-transactions-pending-firefox-latest.png | 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 Proposed Design 509 ^^^^^^^^^^^^^^^ 510 511 .. image:: ../screenshots/design/cta-withdraw-1.png 512 513 After choosing "Withdraw", the user is presented with this screen. 514 The keyboard for amount entry automatically opens. 515 The Withdraw button is disabled until a valid amount is entered. Once a valid amount is provided, the button is enabled and displayed with the primary color. 516 517 .. image:: ../screenshots/design/cta-withdraw-2.png 518 519 The user can select a currency from a dropdown list. 520 A warning icon appears next to the currency selector; tapping it opens a dialog (see next image). 521 The warning icon uses the warning color from the :doc:`066-wallet-color-scheme`. 522 523 .. image:: ../screenshots/design/cta-withdraw-3.png 524 525 The warning dialog displays the message: 526 "The service provider is not trusted by the developers of this wallet." 527 Colors warningContainer and onWarningContainer are applied here. 528 529 .. image:: ../screenshots/design/cta-withdraw-4.png 530 531 If applicable, fees are displayed below the amount input field. 532 Below the amount section, amount shortcuts defined by the exchange are shown for quick selection. 533 534 More details about the prototype are available here: 535 `Penpot Prototype <https://penpot.taler.net/#/workspace?team-id=826af720-982c-8096-8006-0dbdd6a758c1&file-id=29e68e1b-4b36-81a2-8006-bf7630bda762&page-id=29e68e1b-4b36-81a2-8006-bf7630bda763&layout=assets>`_ 536 537 538 Screenshots 539 ^^^^^^^^^^^ 540 541 +-----------+----------------------------------------------------------------+ 542 | Platform | Screenshot | 543 +===========+================================================================+ 544 | WebEx | .. image:: ../screenshots/cta-withdraw-firefox-latest.png | 545 +-----------+----------------------------------------------------------------+ 546 | Android | .. image:: ../screenshots/cta-withdraw-android-latest.png | 547 | | :width: 30% | 548 +-----------+----------------------------------------------------------------+ 549 | iOS | .. image:: ../screenshots/cta-withdraw-ios-latest.png | 550 | | :width: 30% | 551 +-----------+----------------------------------------------------------------+ 552 553 554 This screen is used to ask the the user to confirm the withdrawal operation, 555 now that all data has been provided. 556 557 558 .. _cta-wire-transfer-ref: 559 560 cta-wire-transfer 561 ----------------- 562 563 This screen is used to show the user the information for the wire transfer to 564 complete a manual withdrawal operation. 565 566 Info 567 ^^^^ 568 569 * wire transfer subject to be used (first, most important) 570 * target bank account to transfer funds to (e.g. IBAN) 571 * total amount to transfer in the wire transfer currency 572 * button to copy ``payto://`` URI with the information to clipboard 573 574 Actions 575 ^^^^^^^ 576 577 * **done**: go back to the main balances list (operation continues in background) 578 * **view detailed instructions**: go to :ref:`cta-wire-transfer-details-ref` 579 * **view QR codes**: go to :ref:`cta-wire-transfer-qr-ref` 580 * **automatic**: screen changes to :ref:`cta-withdraw-done-ref` upon completion 581 582 Issues 583 ^^^^^^ 584 585 * WebEx(text): if there is no fee, no point in showing 586 the amount **3** times. Maybe only show the amount 587 on top with the wire transfer details, and then at 588 the bottom show the fee ONCE *if* there is one? 589 * iOS(minor): fees are shown even if they are 0; hide! 590 * All(image): the screenshots do not show how to select an alternative bank (see: Netzbon). Might be nice to show that. 591 592 593 594 Adoption 595 ^^^^^^^^ 596 597 * 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?) 598 * Android(text): iOS has much clearer instructions (more text) 599 * 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! 600 601 602 603 Screenshots 604 ^^^^^^^^^^^ 605 606 +-----------+------------------------------------------------------------------+ 607 | Platform | Screenshot | 608 +===========+==================================================================+ 609 | WebEx | .. image:: ../screenshots/cta-wire-transfer-firefox-latest.png | 610 +-----------+------------------------------------------------------------------+ 611 | Android | .. image:: ../screenshots/cta-wire-transfer-android-latest.png | 612 | | :width: 30% | 613 +-----------+------------------------------------------------------------------+ 614 | iOS | .. image:: ../screenshots/cta-wire-transfer-ios-latest.png | 615 | | :width: 30% | 616 +-----------+------------------------------------------------------------------+ 617 618 .. _cta-wire-transfer-details-ref: 619 620 cta-wire-transfer-details 621 ------------------------- 622 623 This screen shows the detailed instructions for the manual wire transfer. 624 625 Info 626 ^^^^ 627 628 * wire transfer subject to be used (first, most important) 629 * target bank account to transfer funds to (e.g. IBAN) 630 * total amount to transfer in the wire transfer currency 631 * button to copy ``payto://`` URI with the information to clipboard 632 633 Actions 634 ^^^^^^^ 635 636 * **back**: goes back to the main wire transfer screen 637 * **copy**: copies details about the instructions to the clipboard 638 639 +-----------+------------------------------------------------------------------------+ 640 | Platform | Screenshot | 641 +===========+========================================================================+ 642 | WebEx | .. image:: ../screenshots/cta-wire-transfer-details-firefox-latest.png | 643 +-----------+------------------------------------------------------------------------+ 644 | Android | .. image:: ../screenshots/cta-wire-transfer-details-android-latest.png | 645 | | :width: 30% | 646 +-----------+------------------------------------------------------------------------+ 647 | iOS | .. image:: ../screenshots/cta-wire-transfer-details-ios-latest.png | 648 | | :width: 30% | 649 +-----------+------------------------------------------------------------------------+ 650 651 .. _cta-wire-transfer-qr-ref: 652 653 cta-wire-transfer-qr 654 -------------------- 655 656 This screen shows the QR codes for the wire transfer for banks that support it. 657 658 Info 659 ^^^^ 660 661 * QR codes for banking systems that could work with the respective exchange's bank account 662 663 Actions 664 ^^^^^^^ 665 666 * **back**: goes back to the main wire transfer screen 667 * **copy** (per QR code): copies image to the clipboard (?) 668 * **share** (per QR code): opens link on local system (?) 669 670 671 +-----------+------------------------------------------------------------------+ 672 | Platform | Screenshot | 673 +===========+==================================================================+ 674 | WebEx | .. image:: ../screenshots/cta-wire-transfer-qr-firefox-latest.png| 675 +-----------+------------------------------------------------------------------+ 676 | Android | .. image:: ../screenshots/cta-wire-transfer-qr-android-latest.png| 677 | | :width: 30% | 678 +-----------+------------------------------------------------------------------+ 679 | iOS | .. image:: ../screenshots/cta-wire-transfer-qr-ios-latest.png | 680 | | :width: 30% | 681 +-----------+------------------------------------------------------------------+ 682 683 684 .. _cta-withdraw-pending-ref: 685 686 cta-withdraw-pending 687 -------------------- 688 689 This screen is used to show the user the information for a pending wire transfer to 690 complete a manual withdrawal operation when viewing the transaction via the pending 691 transaction history (:ref:`cta-transactions-pending-ref`). 692 693 Info 694 ^^^^ 695 696 Same as in :ref:`cta-wire-transfer-details-ref`. 697 698 Actions 699 ^^^^^^^ 700 701 * **abort**: aborts the withdrawal operation (with warning/explanation) 702 * **back**: go back to the pending transaction list (operation continues in background) 703 * **view detailed instructions**: go to :ref:`cta-wire-transfer-details-ref` 704 * **view QR codes**: go to :ref:`cta-wire-transfer-qr-ref` 705 * **automatic**: screen changes to :ref:`cta-withdraw-done-ref` upon completion 706 707 Issues 708 ^^^^^^ 709 710 * See :ref:`cta-wire-transfer-details-ref`, same issues apply here. 711 * Android(minor): screen might be a bit much, maybe partition like the iOS screen 712 with separate screens for details / QR codes (especially give that there will 713 be a 3rd option eventually as well!) 714 * Android(text): Texts differ from iOS, iOS texts are clearer for the transaction 715 details; exchange URL is too prominent 716 * iOS(text): remove text URL in section header 717 * iOS(minor): remove fees if fees are zero 718 719 Screenshots 720 ^^^^^^^^^^^ 721 722 +-----------+--------------------------------------------------------------------+ 723 | Platform | Screenshot | 724 +===========+====================================================================+ 725 | WebEx | .. image:: ../screenshots/cta-withdraw-pending-firefox-latest.png | 726 +-----------+--------------------------------------------------------------------+ 727 | Android | .. image:: ../screenshots/cta-withdraw-pending-android-latest.png | 728 | | :width: 30% | 729 +-----------+--------------------------------------------------------------------+ 730 | iOS | .. image:: ../screenshots/cta-withdraw-pending-ios-latest.png | 731 | | :width: 30% | 732 +-----------+--------------------------------------------------------------------+ 733 734 735 .. _cta-withdraw-kyc-ref: 736 737 cta-withdraw-kyc 738 ---------------- 739 740 This screen is used to inform the user that to proceed with a withdraw operation, 741 they must pass a KYC check. 742 743 Info 744 ^^^^ 745 746 * date 747 * Text informing about "You need to pass a KYC procedure." 748 * amount wired (hidden if no fees) 749 * fees paid (hidden if no fees) 750 * total amount withdrawn into wallet (effective balance change) 751 752 Actions 753 ^^^^^^^ 754 755 * **Open KYC website**: opens KYC start URL 756 757 Issues 758 ^^^^^^ 759 760 * iOS(major): not point in showing wire transfer instructions if the wire transfer was already done! 761 762 763 Adoption 764 ^^^^^^^^ 765 766 767 Screenshots 768 ^^^^^^^^^^^ 769 770 +-----------+------------------------------------------------------------------+ 771 | Platform | Screenshot | 772 +===========+==================================================================+ 773 | WebEx | .. image:: ../screenshots/cta-withdraw-kyc-firefox-latest.png | 774 +-----------+------------------------------------------------------------------+ 775 | Android | .. image:: ../screenshots/cta-withdraw-kyc-android-latest.png | 776 | | :width: 30% | 777 +-----------+------------------------------------------------------------------+ 778 | iOS | .. image:: ../screenshots/cta-withdraw-kyc-ios-latest.png | 779 | | :width: 30% | 780 +-----------+------------------------------------------------------------------+ 781 782 783 .. _cta-withdraw-done-ref: 784 785 cta-withdraw-done 786 ----------------- 787 788 This screen is used to show the user the information for a completed withdraw 789 operation (bank-integrated or manual). 790 791 Info 792 ^^^^ 793 794 * amount wired (hidden if no fees) 795 * fees paid (hidden if no fees) 796 * total amount withdrawn into wallet (effective balance change) 797 * exchange base URL 798 * date 799 800 Actions 801 ^^^^^^^ 802 803 * **delete**: deletes information about the withdrawal operation 804 805 Issues 806 ^^^^^^ 807 808 * iOS(text): not point in showing details if there are no fees. 809 * 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"). 810 * Android/Webext(text): "Delete" vs. 'Delete from history" --- two 811 styles, two translations. Use "Delete from history" consistently! 812 813 814 Adoption 815 ^^^^^^^^ 816 817 * We probably want to show a "pending" transaction if we 818 are still withdrawing (wire transfer did arrived, coins 819 are still being generated). That's a very brief time, 820 but we probably want to use a minor variation of this 821 dialog in that case. Not sure it needs to be quite 822 as prominent as on iOS though... 823 824 825 826 Screenshots 827 ^^^^^^^^^^^ 828 829 +-----------+------------------------------------------------------------------+ 830 | Platform | Screenshot | 831 +===========+==================================================================+ 832 | WebEx | .. image:: ../screenshots/cta-withdraw-done-firefox-latest.png | 833 +-----------+------------------------------------------------------------------+ 834 | Android | .. image:: ../screenshots/cta-withdraw-done-android-latest.png | 835 | | :width: 30% | 836 +-----------+------------------------------------------------------------------+ 837 | iOS | .. image:: ../screenshots/cta-withdraw-done-ios-latest.png | 838 | | :width: 30% | 839 +-----------+------------------------------------------------------------------+ 840 841 842 .. _cta-url-entry-ref: 843 844 cta-url-entry 845 ------------- 846 847 This screen allows the user to scan a QR code, scan an NFC tag, or enter a 848 taler://-URL. Its implementation may differ significantly between 849 platforms. For example, scanning NFC tags may be fully automated, scanning QR 850 codes may involve some system applications, and maybe the dialog only allows 851 the URL entry *or* the camera but not both at the same time, depending on 852 implementation specifics. 853 854 Info 855 ^^^^ 856 857 * camera with current image to enable user to focus on QR code 858 * current URL, with information if it is not well-formed for GNU Taler 859 * possibly status information on NFC reader (if available) 860 861 Actions 862 ^^^^^^^ 863 864 * **open**: if entered manually, open URL as-entered (otherwise open is automatic) 865 * **back**: return to previous view 866 867 Issues 868 ^^^^^^ 869 870 * iOS (screenshot): lacks dialog (or screenshot?) entirely, not sure if we need manual URL-entry on mobile though, so could be OK! 871 872 873 874 875 Screenshots 876 ^^^^^^^^^^^ 877 878 +-----------+------------------------------------------------------------------+ 879 | Platform | Screenshot | 880 +===========+==================================================================+ 881 | WebEx | .. image:: ../screenshots/cta-url-entry-firefox-latest.png | 882 +-----------+------------------------------------------------------------------+ 883 | Android | .. image:: ../screenshots/cta-url-entry-android-latest.png | 884 | | :width: 30% | 885 +-----------+------------------------------------------------------------------+ 886 887 888 .. _cta-payment-ref: 889 890 cta-payment 891 ----------- 892 893 This screen is used for the confirmation of a payment to a merchant. the 894 success of this operation will be an decrease of the balance in the wallet and 895 save a ticket/invoice of the purchase. fee, restrictions and ETA should be 896 clear for the user. 897 898 Info 899 ^^^^ 900 901 * merchant offering the order showing the URL 902 * order summary 903 * table of details of the operation: use the :ref:`operation-table-details-ref` screen 904 * receipt: order id 905 * taler URI: show copy button or QR to complete the operation with another device (webex only) 906 * cannot pay desc: if the user doesn't have enough money, or if they have enough balance but unable to use it 907 * payment status: if the order was already paid / repurchased / auto-paid 908 909 Actions 910 ^^^^^^^ 911 912 * **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 913 * **get more cash**: if there is not enough balance, it will be redirected to :ref:`cta-withdraw-ref` 914 * **show full details**: pops up dialog with full transaction details (everything from contract terms) 915 * **back/cancel**: user will be redirected to :ref:`cta-balance-list-ref` 916 917 Issues 918 ^^^^^^ 919 920 * WebEx(Text): "Valid until" is likely confusing, not shown on other platforms. Maybe only show "offer expired" instead of pay button (on all platforms!)? 921 * Android/iOS(major): lack action to show full contract details 922 * iOS(text): the label 'Summary' appears only on iOS, and seems unnecessary. 923 * All(major): detailed layout differs significantly between platforms, needs review 924 and unification! 925 * 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). 926 927 928 Screenshots 929 ^^^^^^^^^^^ 930 931 +-----------+------------------------------------------------------------------+ 932 | Platform | Screenshot | 933 +===========+==================================================================+ 934 | WebEx | .. image:: ../screenshots/cta-payment-firefox-latest.png | 935 +-----------+------------------------------------------------------------------+ 936 | Android | .. image:: ../screenshots/cta-payment-android-latest.png | 937 | | :width: 30% | 938 +-----------+------------------------------------------------------------------+ 939 | iOS | .. image:: ../screenshots/cta-payment-ios-latest.png | 940 | | :width: 30% | 941 +-----------+------------------------------------------------------------------+ 942 943 944 .. _cta-payment-paid-ref: 945 946 cta-payment-paid 947 ---------------- 948 949 This screen is used to show information with details about a historic payment. 950 951 Info 952 ^^^^ 953 954 * merchant offering the order showing the URL 955 * order summary 956 * table of details of the operation: use the :ref:`operation-table-details-ref` screen 957 * receipt: order id 958 * payment status: if the order was refunded 959 * Text to use: 960 961 * **Title**. Name of the merchant paid 962 (e.g. Essay Shop) 963 * **Status**. It provides complementary information about the transaction 964 for the user, such as the status of the transaction (e.g. “Waiting for 965 confirmation,” “KYC required,” an error message, etc.). (The summary is 966 provided by wallet-core, along with internationalized versions.) 967 * **Timestamp**. The moment when the payment was made. Ideally, it 968 should be shown with minimal precision, only showing the minutes, hours or 969 days that have elapsed. 970 * **Amount**. The negative impact that the transaction has in 971 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. 972 973 974 Actions 975 ^^^^^^^ 976 977 * **delete**: delete information about the transaction 978 * **open merchant website**: opens fullfillment URL in browser (alternatively, dialog should show fulfillment message) 979 * **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 980 * **show TOTP code** presents the transferred totp codes 981 * **back**: user will be redirected to ``balance`` 982 983 Issues 984 ^^^^^^ 985 986 * iOS(major): delete button is missing, instead only has "Done" 987 * android(major): lacks button to open fulfillment URL in browser 988 * WebEx(major): lacks button to open fulfillment URL in browser 989 990 991 992 Screenshots 993 ^^^^^^^^^^^ 994 995 +-----------+------------------------------------------------------------------+ 996 | Platform | Screenshot | 997 +===========+==================================================================+ 998 | WebEx | .. image:: ../screenshots/cta-payment-paid-firefox-latest.png | 999 +-----------+------------------------------------------------------------------+ 1000 | Android | .. image:: ../screenshots/cta-payment-paid-android-latest.png | 1001 | | :width: 30% | 1002 +-----------+------------------------------------------------------------------+ 1003 | iOS | .. image:: ../screenshots/cta-payment-paid-ios-latest.png | 1004 | | :width: 30% | 1005 +-----------+------------------------------------------------------------------+ 1006 1007 1008 .. _cta-deposit-ref: 1009 1010 cta-deposit 1011 ----------- 1012 1013 This screen is used for the confirmation of a deposit. the success of this 1014 operation will be an decrease of the balance in the wallet and save a deposit 1015 ticket for reference. fee, restrictions and ETA should be clear for the user. 1016 1017 Info 1018 ^^^^ 1019 1020 * bank account where the money is going to 1021 * table of details of the operation: use the :ref:`operation-table-details-ref` screen 1022 1023 Actions 1024 ^^^^^^^ 1025 1026 * **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed 1027 * **cancel**: user will be redirected to ``balance`` 1028 1029 .. attention:: 1030 User should be able to play with the amount, not possible in the current design 1031 1032 Issues 1033 ^^^^^^ 1034 1035 * WebEx(screenshot): need new section in this document for 'ctx-manage-account'. 1036 * WebEx(minor): should probably separate out target account selection and amount entry, as done on iOS 1037 * WebEx(text): "amount" is a bad label, "brut amount" might be good, then use "net deposit" 1038 * WebEx(text): might be good to have "net deposit" amount also editable, not just computed (and then update "brut amount"). 1039 * Android(screenshot): lacks screenshots for dialogs where we enter/edit accounts and amounts 1040 * 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 1041 * all(screenshot): we need a new dialog showing the transaction in-flight/done as reachable via transaction history 1042 1043 1044 Adoption 1045 ^^^^^^^^ 1046 1047 * 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. 1048 1049 1050 Screenshots 1051 ^^^^^^^^^^^ 1052 1053 +-----------+------------------------------------------------------------------+ 1054 | Platform | Screenshot | 1055 +===========+==================================================================+ 1056 | WebEx | .. image:: ../screenshots/cta-deposit-firefox-latest.png | 1057 +-----------+------------------------------------------------------------------+ 1058 | Android | .. image:: ../screenshots/cta-deposit-1-android-latest.png | 1059 | | :width: 30% | 1060 | | .. image:: ../screenshots/cta-deposit-2-android-latest.png | 1061 | | :width: 30% | 1062 +-----------+------------------------------------------------------------------+ 1063 | iOS | .. image:: ../screenshots/cta-deposit-1-ios-latest.png | 1064 | | :width: 30% | 1065 | | .. image:: ../screenshots/cta-deposit-2-ios-latest.png | 1066 | | :width: 30% | 1067 +-----------+------------------------------------------------------------------+ 1068 1069 .. _cta-bank-accounts-ref: 1070 1071 cta-bank-accounts 1072 ----------------- 1073 1074 Screenshots 1075 ^^^^^^^^^^^ 1076 1077 +-----------+------------------------------------------------------------------+ 1078 | Platform | Screenshot | 1079 +===========+==================================================================+ 1080 | WebEx | .. image:: ../screenshots/cta-bank-accounts-firefox-latest.png | 1081 +-----------+------------------------------------------------------------------+ 1082 | Android | .. image:: ../screenshots/cta-bank-accounts-android-latest.png | 1083 | | :width: 30% | 1084 +-----------+------------------------------------------------------------------+ 1085 | iOS | .. image:: ../screenshots/cta-bank-accounts-ios-latest.png | 1086 | | :width: 30% | 1087 +-----------+------------------------------------------------------------------+ 1088 1089 .. _cta-bank-account-edit-ref: 1090 1091 cta-bank-account-edit 1092 --------------------- 1093 1094 +-----------+---------------------------------------------------------------------+ 1095 | Platform | Screenshot | 1096 +===========+=====================================================================+ 1097 | WebEx | .. image:: ../screenshots/cta-bank-account-edit-firefox-latest.png | 1098 | | | 1099 +-----------+---------------------------------------------------------------------+ 1100 | Android | .. image:: ../screenshots/cta-bank-account-edit-android-latest.png | 1101 | | :width: 30% | 1102 +-----------+---------------------------------------------------------------------+ 1103 | iOS | .. image:: ../screenshots/cta-bank-account-edit-ios-latest.png | 1104 | | :width: 30% | 1105 +-----------+---------------------------------------------------------------------+ 1106 1107 .. _cta-peer-pull-initiate-ref: 1108 1109 cta-peer-pull-initiate 1110 ---------------------- 1111 1112 This screen is used for the confirmation of the creation of a peer pull 1113 transaction or invoice to request money from another wallet. the success of 1114 this operation will not change the balance immediately in the wallet and allow 1115 the user to share a taler URI to the payer. fee, restrictions and ETA should 1116 be clear for the user. 1117 1118 Info 1119 ^^^^ 1120 1121 * exchange to be used showing the URL 1122 * table of details of the operation: use the :ref:`operation-table-details-ref` screen 1123 1124 Inputs 1125 ^^^^^^ 1126 1127 * **subject**: short description of the transaction 1128 * **expiration**: absolute time/date after which the invoice is not valid anymore 1129 * **service provider**: allow the selection of different exchange 1130 1131 Actions 1132 ^^^^^^^ 1133 1134 * **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed 1135 * **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 1136 * *cancel*: user will be redirected to ``balance`` 1137 1138 .. attention:: 1139 Is the invoice creation always free of charge or does the exchange have a mechanism 1140 to impose a fee to pay on creation? 1141 1142 Issues 1143 ^^^^^^ 1144 1145 * iOS(text): 3 min/ 1h are inconsistent; other wallets have 1 day, 7 days, 30 days. We should be consistent. 1146 1147 1148 Adoption 1149 ^^^^^^^^ 1150 1151 Screenshots 1152 ^^^^^^^^^^^ 1153 1154 +-----------+----------------------------------------------------------------------+ 1155 | Platform | Screenshot | 1156 +===========+======================================================================+ 1157 | WebEx | .. image:: ../screenshots/cta-peer-pull-initiate-firefox-latest.png | 1158 +-----------+----------------------------------------------------------------------+ 1159 | Android | .. image:: ../screenshots/cta-peer-pull-initiate-android-latest.png | 1160 | | :width: 30% | 1161 +-----------+----------------------------------------------------------------------+ 1162 | iOS | .. image:: ../screenshots/cta-peer-pull-initiate-ios-latest.png | 1163 | | :width: 30% | 1164 +-----------+----------------------------------------------------------------------+ 1165 1166 1167 .. _cta-peer-pull-confirm-ref: 1168 1169 cta-peer-pull-confirm 1170 --------------------- 1171 1172 This screen is used for the confirmation of the payment of a peer pull 1173 transaction or invoice to send money from another wallet. the success of this 1174 operation will be an will decrease the balance in the wallet. fee, 1175 restrictions and ETA should be clear for the user. 1176 1177 Info 1178 ^^^^ 1179 1180 * exchange to be used showing the URL 1181 * subject: short description of the transaction 1182 * table of details of the operation: use the :ref:`operation-table-details-ref` screen 1183 * expiration: absolute time/date after which the invoice is not valid anymore 1184 1185 Actions 1186 ^^^^^^^ 1187 1188 * **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 1189 * **get more cash**: if there is not enough balance, it will be redirected to :ref:`cta-withdraw-ref` 1190 * **cancel**: user will be redirected to ``balance`` 1191 1192 cta-peer-push-initiate 1193 ---------------------- 1194 1195 This screen is used for the confirmation of the creation of a peer push 1196 transaction or transfer money to another wallet. the success of this 1197 operation will reduce the balance immediately in the wallet and allow the user 1198 to share a taler URI to the receiver. fee, restrictions and ETA should be 1199 clear for the user. 1200 1201 Info 1202 ^^^^ 1203 1204 * table of details of the operation: use the ``operation-table-details`` screen 1205 1206 Inputs 1207 ^^^^^^ 1208 1209 * **subject**: short description of the transaction 1210 * **expiration**: absolute time/date after which the transfer is not valid anymore 1211 1212 Actions 1213 ^^^^^^^ 1214 1215 * **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed 1216 * **cancel**: user will be redirected to ``balance`` 1217 1218 Issues 1219 ^^^^^^ 1220 1221 * WebEx(minor): forces user to scroll to the bottom. Android nicely shows the accept button always; that seems nicer; 1222 * WebEx(text): has text about "Digital cash withdrawal" above. Would be more consistent if we also *only* showed the Terms of service. 1223 * Android(text): uses "Exchange", should say "PSP's Terms of Service" 1224 * iOS(screenshot): lacks actual ToS, not ideal to compare! 1225 1226 1227 Adoption 1228 ^^^^^^^^ 1229 1230 1231 Screenshots 1232 ^^^^^^^^^^^ 1233 1234 +-----------+----------------------------------------------------------------------+ 1235 | Platform | Screenshot | 1236 +===========+======================================================================+ 1237 | WebEx | .. image:: ../screenshots/cta-peer-push-initiate-firefox-latest.png | 1238 +-----------+----------------------------------------------------------------------+ 1239 | Android | .. image:: ../screenshots/cta-peer-push-initiate-android-latest.png | 1240 | | :width: 30% | 1241 +-----------+----------------------------------------------------------------------+ 1242 | iOS | .. image:: ../screenshots/cta-peer-push-initiate-ios-latest.png | 1243 | | :width: 30% | 1244 +-----------+----------------------------------------------------------------------+ 1245 1246 1247 .. _cta-peer-push-confirm-ref: 1248 1249 cta-peer-push-confirm 1250 --------------------- 1251 1252 This screen is used for the confirmation of the acceptance of a peer push 1253 transaction or transfer money to this wallet. the success of this operation 1254 will be an will decrease the balance in the wallet. fee, restrictions and ETA 1255 should be clear for the user. 1256 1257 Info 1258 ^^^^ 1259 1260 * subject: short description of the payment 1261 * expiration: absolute time/date after which the invoice is not valid anymore 1262 * table of details of the operation: use the ``operation-table-details`` screen 1263 1264 Actions 1265 ^^^^^^^ 1266 1267 * **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed 1268 * **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 1269 * **cancel**: user will be redirected to ``balance`` 1270 1271 Issues 1272 ^^^^^^ 1273 1274 * All(screenshot): we have no screenshots! 1275 1276 1277 Adoption 1278 ^^^^^^^^ 1279 1280 1281 Screenshots 1282 ^^^^^^^^^^^ 1283 1284 1285 .. _operation-table-details-ref: 1286 1287 operation-table-details 1288 ----------------------- 1289 1290 With the table it should be clear how much the operation will cost, the 1291 initial amount and the final amount with all the items related to the 1292 operations (like fee) 1293 1294 Labels 1295 ^^^^^^ 1296 1297 Initial amount of the operation, and final amount are always shown. Fee should 1298 be shown as an extra row in the table if it is non-zero. Converted amount 1299 should be shown as an extra row if initial amount currency is not the same as 1300 the final amount currency. 1301 1302 Initial amount label by operation: 1303 1304 * payment -> Price 1305 * deposit -> Send 1306 * peer-pull-credit -> Invoice 1307 * peer-pull-debit -> Invoice 1308 * peer-push-debit -> Send 1309 * peer-push-credit -> Transfer 1310 * withdrawal -> Transfer 1311 * refund -> Refund 1312 1313 1314 .. _cta-accept-tos-ref: 1315 1316 accept-tos 1317 ---------- 1318 1319 This screen can be use everytime that the user is going to interact with an 1320 exchange. Since at any moment wallet may find that ToS changed the user needs 1321 to be prevented from continue before reading/accepting new rules. If possible, 1322 this screen should be used in place of other actions and hidden if not required 1323 (for example, user already accepted ToS). 1324 1325 1326 Inputs 1327 ^^^^^^ 1328 1329 * **languange**: allow the selection of a languange different from system lang 1330 1331 Actions 1332 ^^^^^^^ 1333 1334 * **accept tos**: will mark this version as accepted in wallet core and redirect the user to the screen from where it was invoked 1335 * **export/save/print tos** (optional): will save the ToS outside of the wallet 1336 1337 Issues 1338 ^^^^^^ 1339 1340 * all(minor): All platforms seem to lack export/save as/print functionality 1341 1342 Adoption 1343 ^^^^^^^^ 1344 1345 1346 Screenshots 1347 ^^^^^^^^^^^ 1348 1349 +-----------+------------------------------------------------------------------+ 1350 | Platform | Screenshot | 1351 +===========+==================================================================+ 1352 | WebEx | .. image:: ../screenshots/cta-accept-tos-firefox-latest.png | 1353 | | :width: 30% | 1354 +-----------+------------------------------------------------------------------+ 1355 | Android | .. image:: ../screenshots/cta-accept-tos-android-latest.png | 1356 | | :width: 30% | 1357 +-----------+------------------------------------------------------------------+ 1358 | iOS | .. image:: ../screenshots/cta-accept-tos-ios-latest.png | 1359 | | :width: 30% | 1360 +-----------+------------------------------------------------------------------+ 1361 1362 +-----------+----------------------------------------------------------------------+ 1363 | Platform | Screenshot | 1364 +===========+======================================================================+ 1365 | WebEx | .. image:: ../screenshots/cta-accept-tos-language-firefox-latest.png | 1366 | | :width: 30% | 1367 +-----------+----------------------------------------------------------------------+ 1368 | Android | .. image:: ../screenshots/cta-accept-tos-language-android-latest.png | 1369 | | :width: 30% | 1370 +-----------+----------------------------------------------------------------------+ 1371 | iOS | .. image:: ../screenshots/cta-accept-tos-language-ios-latest.png | 1372 | | :width: 30% | 1373 +-----------+----------------------------------------------------------------------+ 1374 1375 .. _cta-settings-ref: 1376 1377 settings 1378 -------- 1379 1380 Info 1381 ^^^^ 1382 1383 Layout 1384 ^^^^^^ 1385 1386 Actions 1387 ^^^^^^^ 1388 1389 Issues 1390 ^^^^^^ 1391 1392 Adoption 1393 ^^^^^^^^ 1394 1395 Screenshots 1396 ^^^^^^^^^^^ 1397 +-----------+------------------------------------------------------------------+ 1398 | Platform | Screenshot | 1399 +===========+==================================================================+ 1400 | Android | .. image:: ../screenshots/cta-settings-android-latest.png | 1401 | | :width: 30% | 1402 +-----------+------------------------------------------------------------------+ 1403 | iOS | .. image:: ../screenshots/cta-settings-ios-latest.png | 1404 | | :width: 30% | 1405 +-----------+------------------------------------------------------------------+ 1406 1407 .. _cta-exchange-loading-ref: 1408 1409 cta-exchange-loading 1410 -------------------- 1411 1412 Info 1413 ^^^^ 1414 1415 This screen is shown while the wallet downloads and parses the exchange 1416 meta-data (/config, /keys, terms of service). 1417 1418 Layout 1419 ^^^^^^ 1420 1421 Actions 1422 ^^^^^^^ 1423 1424 Issues 1425 ^^^^^^ 1426 1427 Adoption 1428 ^^^^^^^^ 1429 1430 Screenshots 1431 ^^^^^^^^^^^ 1432 1433 +-----------+-------------------------------------------------------------------+ 1434 | Platform | Screenshot | 1435 +===========+===================================================================+ 1436 | WebEx | .. image:: ../screenshots/cta-exchange-loading-firefox-latest.png | 1437 | | :width: 30% | 1438 +-----------+-------------------------------------------------------------------+ 1439 | Android | .. image:: ../screenshots/cta-exchange-loading-android-latest.png | 1440 | | :width: 30% | 1441 +-----------+-------------------------------------------------------------------+ 1442 | iOS | .. image:: ../screenshots/cta-exchange-loading-ios-latest.png | 1443 | | :width: 30% | 1444 +-----------+-------------------------------------------------------------------+ 1445 1446 1447 .. _cta-devtools-ref: 1448 1449 developer-tools 1450 --------------- 1451 1452 Info 1453 ^^^^ 1454 1455 Layout 1456 ^^^^^^ 1457 1458 Actions 1459 ^^^^^^^ 1460 1461 Issues 1462 ^^^^^^ 1463 1464 Adoption 1465 ^^^^^^^^ 1466 1467 Screenshots 1468 ^^^^^^^^^^^ 1469 1470 +-----------+-------------------------------------------------------------------+ 1471 | Platform | Screenshot | 1472 +===========+===================================================================+ 1473 | Android | .. image:: ../screenshots/cta-developer-tools-android-latest.png | 1474 | | :width: 30% | 1475 +-----------+-------------------------------------------------------------------+ 1476 | iOS | .. image:: ../screenshots/cta-developer-tools-ios-latest.png | 1477 | | :width: 30% | 1478 +-----------+-------------------------------------------------------------------+ 1479 1480 Q / A 1481 =====