Skip to content

feat: integrate selected token functionality into crypto payment section#30029

Merged
vinistevam merged 20 commits into
mainfrom
vs/pay-with-selected-token
May 14, 2026
Merged

feat: integrate selected token functionality into crypto payment section#30029
vinistevam merged 20 commits into
mainfrom
vs/pay-with-selected-token

Conversation

@vinistevam

@vinistevam vinistevam commented May 12, 2026

Copy link
Copy Markdown
Contributor

Description

Extends the Crypto section of the redesigned Pay with bottom sheet so the user-selected token from the existing Other assets picker is reflected back as its own row the next time the bottom sheet opens.
When the selected pay token diverges from the auto-selected preferred candidate, both rows render: the preferred token row (no checkmark) and a separate user-selected token row (with the checkmark). When the user re-selects the preferred token, the bottom sheet collapses back to a single row — preferred with the checkmark. Tapping the preferred token row inside the bottom sheet selects it directly, with an idempotency guard that avoids refiring gas-fee estimates when the row is already selected.
Scoped to the current transaction only: no new persistence layer is introduced. The selection lives on TransactionPayController's per-transaction state — the same source the existing PayWithModal already writes to via setPayToken. Origin (user vs automatic) is derived by comparing payToken to the automatic candidate from useAutomaticTransactionPayToken.

The bottom sheet now dismisses itself whenever a token is selected, so the only path that leaves the picker open is the header X. Two paths covered:

  • Tap a row inside the sheet: the preferred-row onPress calls selectToken and then navigation.goBack(). Idempotent taps (already-selected) still dismiss — a token-row tap is treated as a "done picking" signal.
  • Pick a token inside the underlying PayWithModal: new useDismissOnPayTokenChange() hook snapshots payToken on mount and calls navigation.goBack() whenever the value diverges. Wired into PayWithBottomSheet. The modal still closes itself first via its existing handleTokenSelect path, then the sheet sees the change and pops, returning the user to the confirmation screen.
    No double-dismiss: the row-tap path goes through setPayToken too, but the section hook calls goBack() first, so by the time the effect re-runs the route is already popped.

Changelog

CHANGELOG entry:

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/CONF-1360

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

WhatsApp.Video.2026-05-12.at.11.21.27.mp4

Before

After

Pre-merge author checklist

Performance checks (if applicable)

  • I've tested on Android
    • Ideally on a mid-range device; emulator is acceptable
  • I've tested with a power user scenario
    • Use these power-user SRPs to import wallets with many accounts and tokens
  • I've instrumented key operations with Sentry traces for production performance metrics

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Medium Risk
Changes the confirmation pay-token selection UX and navigation behavior by adding new token-selection state handling and automatically dismissing the bottom sheet when the transaction pay token updates. Risk is moderate because it touches transaction pay-token resolution/comparison logic and route dismissal flow.

Overview
The Pay With bottom sheet now auto-dismisses when the active transaction payToken changes (new useDismissOnPayTokenChange, wired into PayWithBottomSheet) so selecting a token in the underlying modal collapses back to the confirmation screen.

The crypto section now shows a separate user-selected token row (when it differs from the automatic/preferred candidate), allows tapping the preferred-token row to reselect it (with an idempotent selectToken helper), and centralizes token matching + preferred-token fallback resolution via new isMatchingPayToken and resolvePreferredPayToken utilities (including mUSD mainnet fallback for moneyAccountWithdraw). Tests were updated/added to cover the new rows, presses, and dismissal behavior.

Reviewed by Cursor Bugbot for commit 5ba9b00. Bugbot is set up for automated code reviews on this repo. Configure here.

@vinistevam vinistevam added team-confirmations Push issues to confirmations team no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed labels May 12, 2026
@github-actions

Copy link
Copy Markdown
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@codecov-commenter

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 94.28571% with 2 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (vs/pay-with-crypto-section@6f5208b). Learn more about missing BASE report.

Files with missing lines Patch % Lines
...ions/hooks/pay/sections/usePayWithCryptoSection.ts 83.33% 1 Missing and 1 partial ⚠️
Additional details and impacted files
@@                      Coverage Diff                      @@
##             vs/pay-with-crypto-section   #30029   +/-   ##
=============================================================
  Coverage                              ?   81.56%           
=============================================================
  Files                                 ?     5355           
  Lines                                 ?   142350           
  Branches                              ?    32473           
=============================================================
  Hits                                  ?   116102           
  Misses                                ?    18303           
  Partials                              ?     7945           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@vinistevam vinistevam marked this pull request as ready for review May 12, 2026 11:01
@vinistevam vinistevam requested a review from a team as a code owner May 12, 2026 11:01
Comment thread app/components/Views/confirmations/hooks/pay/usePayWithSelectedToken.ts Outdated
Base automatically changed from vs/pay-with-crypto-section to main May 13, 2026 09:59
@vinistevam vinistevam requested a review from OGPoyraz May 13, 2026 15:09
@vinistevam vinistevam enabled auto-merge May 14, 2026 11:03
@github-actions

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeConfirmations
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: medium
  • AI Confidence: 88%
click to see 🤖 AI reasoning details

E2E Test Selection:
All 11 changed files are within the confirmations/pay subsystem, specifically:

  1. pay-with-bottom-sheet.tsx: Integrates the new useDismissOnPayTokenChange hook to auto-dismiss the bottom sheet when the pay token changes.
  2. useDismissOnPayTokenChange.ts (new): Navigates back when the active transaction's pay token changes after mount - affects the PayWithBottomSheet navigation behavior.
  3. usePayWithSelectedToken.ts (new): Manages selected pay token state, comparing against the automatic token.
  4. usePayWithPreferredToken.ts: Refactored - removed inline isMatchingToken and moneyAccountWithdraw logic (moved to shared utility).
  5. usePayWithCryptoSection.ts: Enhanced to show a selected token row when user chose a token distinct from the automatic one; added handlePreferredTokenPress callback.
  6. transaction-pay.ts: Added isMatchingPayToken utility and resolvePreferredPayToken function (extracted from usePayWithPreferredToken).

These changes directly affect the EIP-7702 gas fee token selection flow and the "Pay With" bottom sheet UI used in confirmations. The existing E2E tests transaction-pay.spec.ts and gas-fee-tokens-eip-7702.spec.ts are both tagged with SmokeConfirmations and directly test these flows.

The changes are scoped to the confirmations pay subsystem - no other areas (accounts, networks, browser, snaps, etc.) are affected. The refactoring moves logic between files but the behavioral change is the new auto-dismiss behavior when a token is selected and the new selected-token row display in the crypto section.

No dependent tags are required per the tag descriptions since this doesn't involve swap/bridge flows, stake flows, or Solana transactions.

Performance Test Selection:
The changes are focused on UI logic hooks and utility functions within the confirmations pay subsystem. They involve navigation behavior (auto-dismiss) and token selection state management, but do not affect rendering performance, data loading, list rendering, app startup, or any other performance-critical paths. No performance tests are warranted.

View GitHub Actions results

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 5ba9b00. Configure here.

chainId: preferredToken.chainId,
});
navigation.goBack();
}, [navigation, preferredToken, selectToken]);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Double goBack when preferred token row changes selection

Medium Severity

When a user taps the preferred token row and it differs from the currently selected token, handlePreferredTokenPress calls selectToken (which synchronously updates payToken in Redux via setPayTokenEngineService.flushState()) and then calls navigation.goBack(). Because the bottom sheet component remains mounted during its closing animation, useDismissOnPayTokenChange detects the payToken change on the next render and fires a second navigation.goBack(), potentially popping the confirmation screen behind the bottom sheet.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 5ba9b00. Configure here.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed on #30184

@sonarqubecloud

Copy link
Copy Markdown

@vinistevam vinistevam added this pull request to the merge queue May 14, 2026
Merged via the queue into main with commit 4545120 May 14, 2026
96 of 98 checks passed
@vinistevam vinistevam deleted the vs/pay-with-selected-token branch May 14, 2026 11:55
@github-actions github-actions Bot locked and limited conversation to collaborators May 14, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.78.0 Issue or pull request that will be included in release 7.78.0 label May 14, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed release-7.78.0 Issue or pull request that will be included in release 7.78.0 size-L team-confirmations Push issues to confirmations team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants