feat(buy): two-panel Du-zahlst/Du-erhaeltst amount layout - #257
Open
joshuakrueger-dfx wants to merge 26 commits into
Open
feat(buy): two-panel Du-zahlst/Du-erhaeltst amount layout#257joshuakrueger-dfx wants to merge 26 commits into
joshuakrueger-dfx wants to merge 26 commits into
Conversation
The wallet's local FeeDto type only declared rate/fixed/network/min/dfx/ total, missing bank/bankFixed/bankVariable/platform/networkStart that the DFX API's FeeDto already sends (api/.../fee.dto.ts). The bank fee was silently unreadable in the app despite being in every response.
Purely additive: PrimaryButton's new icon prop is optional, existing callers are unaffected.
- Presets fixed to 50/100/250/500, moved above the amount input
- Quote card collapsed by default: shield icon, effective rate
('1 {asset} ~ {price} {currency} incl. fees', using exchangeRate
directly - verified against the amount/estimatedAmount ratio in the
quote fixtures, not just the field name), fee-total badge, chevron
- Bank fee row added now that FeeDto carries it
- 'You receive' row highlighted in the accent color
- Static SEPA payment-method row above the CTA (Buy only)
- CTA now names the target asset with a trailing arrow icon
Buy and Sell mirror each other except presets and the payment-method
row, which are Buy-only by design (Sell trades a crypto amount, not a
fiat preset, and has no payment-method choice before confirming).
BuyScreenImpl's CTA test now expects 'buy.title BTC' instead of the old common.continue placeholder; Icon and PrimaryButton get coverage for the new arrow-right variant and icon slot.
The wallet's local FeeDto type only declared rate/fixed/network/min/dfx/ total, missing bank/bankFixed/bankVariable/platform/networkStart that the DFX API's FeeDto already sends (api/.../fee.dto.ts). The bank fee was silently unreadable in the app despite being in every response.
Purely additive: PrimaryButton's new icon prop is optional, existing callers are unaffected.
- Presets fixed to 50/100/250/500, moved above the amount input
- Quote card collapsed by default: shield icon, effective rate
('1 {asset} ~ {price} {currency} incl. fees', using exchangeRate
directly - verified against the amount/estimatedAmount ratio in the
quote fixtures, not just the field name), fee-total badge, chevron
- Bank fee row added now that FeeDto carries it
- 'You receive' row highlighted in the accent color
- Static SEPA payment-method row above the CTA (Buy only)
- CTA now names the target asset with a trailing arrow icon
Buy and Sell mirror each other except presets and the payment-method
row, which are Buy-only by design (Sell trades a crypto amount, not a
fiat preset, and has no payment-method choice before confirming).
BuyScreenImpl's CTA test now expects 'buy.title BTC' instead of the old common.continue placeholder; Icon and PrimaryButton get coverage for the new arrow-right variant and icon slot.
Verifies the icon prop is truly additive (absent by default, hidden during loading) instead of only asserting both texts render.
Adds a TradeModeTabs segmented control (Kaufen/Verkaufen/Tauschen) at
the top of the amount step in Buy and Sell, matching the structure of
the DFX web widget (app2) while using the app's own light-theme
tokens. Adds a new Swap placeholder route/screen ("coming soon") so
all three modes are reachable and switchable, ahead of the real Swap
backend wiring in a follow-up PR.
…amount-panel-redesign
Replaces the Buy screen's asset-tile grid + chain chips + token row + currency chips with a two-panel layout matching the DFX web widget (app2): a "Du zahlst" panel (amount + currency pill) and a "Du erhaeltst" panel (computed amount + asset/chain pill), with a flip button between them that switches to Sell. New PayCurrencySheet and ReceiveAssetSheet bottom sheets replace the old inline grid/chips as pickers. Fixes a real touch bug found via manual device testing: the sheets' option rows were unreachable because the backdrop Pressable wrapped the sheet as a parent instead of sitting beside it as a sibling, so taps fell through to the backdrop's onClose instead of the row's onSelect. Restructured both sheets so the backdrop is an absolutely positioned sibling, not a wrapping parent.
Replaces the letter-in-circle placeholder badges in the amount panels and both picker sheets with real, colored icon glyphs: a Swiss-cross badge for CHF, euro-sign badge for EUR, dollar-sign badge for USD, and a Bitcoin-orange circle for BTC. Both new components (CurrencyGlyph, AssetGlyph) are pure inline SVG, no new dependency or image asset. Fixes two consistency gaps found via live device review: the badge size differed between the compact pill (32px) and the sheet rows (36px) -- unified to 32px everywhere. And ReceiveAssetSheet only special-cased BTC, leaving CHF/EUR/USD asset sections on the old grey letter fallback -- it now picks CurrencyGlyph or AssetGlyph per row based on the asset symbol, matching PayCurrencySheet. Also swaps the flip button's icon from a plain arrow to the existing "swap" icon, which better matches its actual action.
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
joshuakrueger-dfx
added
the
size:override
joshuakrueger-dfx
marked this pull request as ready for review
September 1, 2026 13:48
joshuakrueger-dfx
requested review from
TaprootFreak and
davidleomay
as code owners
September 1, 2026 13:48
joshuakrueger-dfx
added
needs-visual
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Scope
This PR completes the stacked Buy/Sell/Swap amount-panel redesign on top of #255 and #256. The stack is intentionally retained against develop until those PRs land; no history was rewritten.
Necessity
Symptom (verbatim): Buy, Sell, and Swap did not present the same amount-panel structure; selector widths and backgrounds differed, and the Swap route lacked the shared surface.
Scale: This stack changes 37 files because #257 contains the unmerged #255 and #256 bases; the actual feature is split across those three PRs.
Smaller fix considered: Retargeting this PR to an unmerged feature branch would hide the stack from the required develop integration gate; splitting the stack into its existing three PRs is the smaller review unit.
Validation
Review disposition
No migrations, backend contracts, or new enum/status values are changed. No feature flags or encryption behavior are changed here: .env is local-only, CI MVP intentionally leaves deferred features disabled, and permanent activation belongs to an explicit release/integration PR. The observed Encryption key not found message is WDK’s loadExistingWallet error when the simulator has a stale wallet identity without its SecureStore key; reset simulator app/keychain data and onboard again. Adding a fallback key would weaken wallet security and is intentionally out of scope. The existing quote request state remains backend-authoritative; no new fallback or retry policy was introduced. Existing nullable quote display fallbacks are unchanged from the stacked base and remain documented as a follow-up review item.
Scale (cef9cfa): 37 files, +3417/−860, 26 commits
Final pass (cef9cfa):
Coherent: The diff is one stacked trade-flow UI change: shared Buy/Sell amount panels, the shared mode shell, the Swap placeholder, and their tests/matrix documentation.
Nothing extra: No backend Swap implementation, live quote fixture, wallet/keychain reset, dependency change, or unrelated settings change was added; the larger file count is inherited from the explicitly stacked #255/#256 bases.
Sources closed: #255/#256 stack bases are preserved; PR comments from github-code-quality and github-advanced-security are fixed by removing the unused import; the Swap route is classified and covered by a reachable E2E assertion; repository CI and local gates listed above pass except the documented external audit advisory.