feat(buy-sell): add Buy/Sell/Swap segmented mode switcher - #256
Open
joshuakrueger-dfx wants to merge 10 commits into
Open
feat(buy-sell): add Buy/Sell/Swap segmented mode switcher#256joshuakrueger-dfx wants to merge 10 commits into
joshuakrueger-dfx wants to merge 10 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.
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.
joshuakrueger-dfx
marked this pull request as ready for review
September 1, 2026 13:53
joshuakrueger-dfx
requested review from
Danswar,
TaprootFreak and
davidleomay
as code owners
September 1, 2026 13:53
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
1 participant
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.
Summary
TradeModeTabs, a segmented control (Kaufen/Verkaufen/Tauschen) at the top of the amount step in Buy and Sell, matching the DFX web widget's (app2).seg/.panelsstructure and using the app's ownlightColorstokens./(auth)/swapplaceholder route and makes it reachable from the shared trade tabs.Verified
npm test -- --coverage: 109 suites, 1398 tests passed; 99.83% lines, 93.03% branches, 99.78% functions.npm run check: typecheck and format passed; lint passed with 0 errors (repository has existing warnings).node scripts/check-coverage-floor.mjs: scoped line coverage 99.83% (floor 99%).node scripts/check-coverage-file-floors.mjs: all 15 Tier-A files meet their floors.node scripts/check-feature-matrix.mjs: 67 referenced paths, 17 flags, 38 screens documented.node scripts/check-visual-coverage.mjsand--self-test: 38 routes accounted for; 13 self-test cases passed.eb09942ae51d.e2e/__baselines__/trade-mode-swap.png; the full authenticated visual file also exercises pre-existing wallet/auth flows that are not deterministic on this local simulator.Scope and evidence
Symptom (verbatim):
matrix-check:screen app/(auth)/swap/index.tsx is not referenced anywhere in the README feature matrix;visual-coverage:screen (auth)/swap/index.tsx has no entry in e2e/visual-coverage.json.Scale: 19 changed files, +667/−38 lines from the merge-base; the change is limited to trade tabs/swap UI, its tests, documentation, and one captured visual baseline.
Smaller fix considered: Updating only the matrix and visual manifest would clear the two CI failures but would leave Swap visually inconsistent with Buy/Sell and without an E2E navigation assertion, so the shared shell and focused tests were updated together.
Not done here (follow-up)
Final pass (eb09942): Required GitHub checks are green on this SHA; mergeability is
MERGEABLE; no reviews or comments are open. No merge or auto-merge is requested.