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