commit e7a27851a79ee41d3d9cb35b2ae6b10f9b50e002
parent 92fa9690a9ea2f54672b07e8031656ee80c3f595
Author: Vlada Svirsh <svirv1@bfh.ch>
Date: Sun, 1 Mar 2026 21:26:23 +0100
DD 88: wallet withdraw
Diffstat:
11 files changed, 119 insertions(+), 0 deletions(-)
diff --git a/design-documents/088-wallet-withdraw.rst b/design-documents/088-wallet-withdraw.rst
@@ -0,0 +1,119 @@
+DD 88: Wallet Withdrawal Experience
+###################################
+
+Summary
+=======
+This document describes withdraw flow and experience in wallet. It defines what Android, iOS and WebExtension
+should follow in order to have a coherent withdrawal experience between platforms.
+
+Motivation
+==========
+We want user to have smooth withdrawal experience independent of the platform they are using.
+
+Requirements
+============
+
+Proposed Solution
+=================
+
+Withdraw
+~~~~~~~~
+
+.. image:: wallet-designs/cta-withdraw-1.png
+
+After choosing "Withdraw" action or pressing "Withdraw digital cash" button from "Empty wallet screen", the user is presented with this screen.
+The keyboard for amount entry automatically opens.
+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.
+
+.. image:: wallet-designs/cta-withdraw-2.png
+
+The user can select a currency from a dropdown list.
+A warning icon appears next to the currency selector; tapping it opens a dialog (see next image).
+The warning icon uses the warning color from the :doc:`066-wallet-color-scheme`.
+
+.. image:: wallet-designs/cta-withdraw-3.png
+
+The warning dialog displays the message:
+"The service provider is not trusted by the developers of this wallet."
+Colors warningContainer and onWarningContainer are applied here.
+
+.. image:: wallet-designs/cta-withdraw-4.png
+
+If applicable, fees are displayed below the amount input field.
+Below the amount section, amount shortcuts defined by the exchange are shown for quick selection.
+
+More details about the prototype are available here:
+`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>`_
+
+Withdraw pending
+~~~~~~~~~~~~~~~~
+
+.. image:: wallet-designs/cta-withdraw-pending-1.png
+
+This screen is shown after the user confirms the withdrawal **if only** 1 QR code available
+for withdrawal digital cash.
+
+Screen contains:
+
+- Header with title "Withdraw pending"
+- Date of withdrawal
+- Exchange base_url
+- Amount
+- Fees
+- Text: "Follow the instructions to enter the transfer details into your banking app:"
+- Primary button "Wire transfers instructions" that opens a screen with instructions for wire transfer (see next image)
+- Text: "Or share this QR code with your banking app to withdraw digital cash"
+- Swiss QR code with black and white flag inside
+- Secondary button "Share" that opens the system share dialog to share the QR code with banking app
+
+Wire transfer instructions
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+.. image:: wallet-designs/cta-withdraw-wire-instructions.png
+
+This screen is shown after the user clicks on "Wire transfers instructions" button from "Withdraw pending" screen.
+
+Screen contains:
+
+- Header with title "Wire transfer instructions"
+- Text: "You need to transfer **$amount-with-fees** from your regular bank account to the payment service to receive
+ **$amount** as digital cash in this wallet
+- Warning icon (color warning `#f99c06`) and text: "$accepted-countries bank accounts only"
+- Divider
+- Text: "**Step 1:** If you don't already have it in your banking favorites list, then copy and paste
+**IBAN, recipient name, address** and **amount** into the matching fields in your banking app or website (and save it for next time):"
+- List of details to copy and paste:
+ - IBAN
+ - Recipient name
+ - Address
+ - Amount
+- Text: "**Step 2:** Copy this code and paste it into the subject/purpose field in your banking app or website:"
+- Warning banner (color WarningContainer `#fdedd3`, rounding radius 15) with warning icon and text:
+"This is mandatory, otherwise your money will not arrive in this wallet"
+- Subject to copy and paste
+- Text: "**Step 3:** Finish the wire transfer of 11.23 CHF in your banking app or website, then this withdrawal will
+proceed automatically. Depending on your bank the transfer can take from minutes up to 2 business days. Please be patient."
+- Secondary button "Share" that opens the system share dialog to share the wire transfer instructions with the banking app
+
+Test Plan
+=========
+
+(If this DD concerns a new or changed feature, describe how it can be tested.)
+
+Definition of Done
+==================
+
+(Only applicable to design documents that describe a new feature. While the
+DoD is not satisfied yet, a user-facing feature **must** be behind a feature
+flag or dev-mode flag.)
+
+Alternatives
+============
+
+Drawbacks
+=========
+
+Discussion / Q&A
+================
+
+(This should be filled in with results from discussions on mailing lists / personal communication.)
diff --git a/design-documents/wallet-designs/cta-withdraw-1.png b/design-documents/wallet-designs/cta-withdraw-1.png
Binary files differ.
diff --git a/design-documents/wallet-designs/cta-withdraw-2.png b/design-documents/wallet-designs/cta-withdraw-2.png
Binary files differ.
diff --git a/design-documents/wallet-designs/cta-withdraw-3.png b/design-documents/wallet-designs/cta-withdraw-3.png
Binary files differ.
diff --git a/design-documents/wallet-designs/cta-withdraw-4.png b/design-documents/wallet-designs/cta-withdraw-4.png
Binary files differ.
diff --git a/design-documents/wallet-designs/cta-withdraw-pending-1.png b/design-documents/wallet-designs/cta-withdraw-pending-1.png
Binary files differ.
diff --git a/design-documents/wallet-designs/cta-withdraw-wire-instructions.png b/design-documents/wallet-designs/cta-withdraw-wire-instructions.png
Binary files differ.
diff --git a/screenshots/design/cta-withdraw-1.png b/screenshots/design/cta-withdraw-1.png
Binary files differ.
diff --git a/screenshots/design/cta-withdraw-2.png b/screenshots/design/cta-withdraw-2.png
Binary files differ.
diff --git a/screenshots/design/cta-withdraw-3.png b/screenshots/design/cta-withdraw-3.png
Binary files differ.
diff --git a/screenshots/design/cta-withdraw-4.png b/screenshots/design/cta-withdraw-4.png
Binary files differ.
