Skip to content

feat: implement Pay With Perps section#30124

Merged
OGPoyraz merged 41 commits into
mainfrom
vs/pay-with-perps-section
May 21, 2026
Merged

feat: implement Pay With Perps section#30124
OGPoyraz merged 41 commits into
mainfrom
vs/pay-with-perps-section

Conversation

@vinistevam

@vinistevam vinistevam commented May 13, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Contributor

Description

Adds the Perps section to the redesigned Pay with bottom sheet. On perpsDepositAndOrder confirmations, a Perps account row now renders above the Crypto section with an inline Add button that routes to the standalone Perps deposit confirmation. Visibility mirrors the existing legacy-modal rule (perpsDepositAndOrder only — perpsDeposit is filtered out to avoid a recursive "deposit to deposit" loop).
The Perps row is an Add CTA, not a selection row. Payment-source state for perps flows lives in a dual-state machinery (PerpsController.selectedPaymentToken for the UX choice + TransactionPayController.payToken for the real on-chain funding source) that the legacy modal already orchestrates — there is no on-row "selected token" to display.

All changes are dark-launched behind MM_DEV_PAY_WITH_BOTTOM_SHEET and have no effect in production.

Changelog

CHANGELOG entry: null

Related issues

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

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-15.at.16.56.55.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
Touches confirmations payment-selection and navigation flows (including multi-pop dismissal logic) for perpsDepositAndOrder, which could cause incorrect pay token selection or route-dismissal issues despite being dev-flag gated.

Overview
Adds a new Perps section to the redesigned Pay with bottom sheet for perpsDepositAndOrder, showing a Perps account row with inline Add that launches the Perps deposit confirmation and a tap that selects Perps balance.

Updates Perps pay-token selection to support lightweight {address, chainId} inputs, adjusts the Crypto section so checkmarks/selected rows don’t conflict when Perps balance or fiat payment implicitly owns selection, and wires the Perps order screen to open the new bottom sheet when enabled.

Improves picker dismissal/navigation robustness: PayWithModal can now atomically pop multiple routes (dismissOnSelectCount) to avoid Android double-pop crashes, and useDismissOnPaymentChange now guards against dismissing when the route isn’t focused. Adds/updates unit tests and English strings for the new Perps labels.

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

vinistevam and others added 23 commits May 8, 2026 10:59
@vinistevam
feat: add PayWithBottomSheet component and related functionality
fb2e0bc
@vinistevam
refactor: remove useMMPayFiatConfig and related feature flag logic fr…
db74f9f 
…om PayWithRow
@vinistevam
Merge branch 'main' into vs/pay-with-bottom-sheet-skeleton
89b206f
@vinistevam
refactor: update trailingElement type to ReactElement in PayWithRowCo…
a4da98f 
…nfig and adjust renderTrailing function
@vinistevam
Merge branch 'vs/pay-with-bottom-sheet-skeleton' of github.com:MetaMa…
6bb9ae7 
…sk/metamask-mobile into vs/pay-with-bottom-sheet-skeleton
@vinistevam
feat: implement pay with crypto section and related hooks, tests
ff93b41
@vinistevam
fix ci
7a79ece
@vinistevam
refactor: remove useMMPayFiatConfig hook and related logic from PayWi…
b992716 
…thRow
@vinistevam
feat: integrate selected token functionality into crypto payment section
6abf05c
@vinistevam
Merge branch 'main' into vs/pay-with-crypto-section
6f5208b
@vinistevam
Merge branch 'vs/pay-with-crypto-section' into vs/pay-with-selected-t…
27345ad 
…oken
@vinistevam
feat: implement useDismissOnPayTokenChange hook to manage navigation …
baac1a7 
…on token change
@vinistevam
update docs
12ae98b
@vinistevam
Merge branch 'main' into vs/pay-with-crypto-section
2467418
@vinistevam
feat: enhance payment token handling by resolving preferred token bas…
7fdd17a 
…ed on transaction metadata
@vinistevam
feat: implement last used payment method functionality and related tests
83d4850
@vinistevam
Merge branch 'main' into vs/pay-with-crypto-section
085b0ff
@vinistevam
Merge branch 'main' into vs/pay-with-crypto-section
a7032ee
@vinistevam
Merge branch 'vs/pay-with-crypto-section' into vs/pay-with-selected-t…
10d383f 
…oken
@vinistevam
Merge branch 'vs/pay-with-selected-token' into vs/pay-with-last-used
5dd5023
@vinistevam
Merge branch 'main' into vs/pay-with-selected-token
afe3d52
@vinistevam
Merge branch 'vs/pay-with-selected-token' into vs/pay-with-last-used
81ccdef
@vinistevam
refactor: extract findLatestMetaMaskPayToken function for better reus…
13ea3cd 
…ability in transaction selection
@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 13, 2026
@github-actions

github-actions Bot commented May 13, 2026

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.

@github-actions github-actions Bot added pr-not-ready-for-e2e Skip E2E and block merging. Remove this label once the PR is ready to run the E2E tests. size-L labels May 13, 2026
@vinistevam vinistevam removed the pr-not-ready-for-e2e Skip E2E and block merging. Remove this label once the PR is ready to run the E2E tests. label May 14, 2026
@MetaMask MetaMask deleted a comment from sonarqubecloud Bot May 15, 2026
Base automatically changed from vs/pay-with-last-used to main May 15, 2026 09:01
@github-actions github-actions Bot added size-L and removed size-M labels May 15, 2026
cursor[bot]
cursor Bot reviewed May 15, 2026
View reviewed changes
Comment thread app/components/UI/Perps/hooks/usePerpsBalanceTokenFilter.ts Outdated
cursor[bot]
cursor Bot reviewed May 15, 2026
View reviewed changes

@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 8663914. Configure here.

Comment thread app/components/Views/confirmations/components/modals/pay-with-modal/pay-with-modal.tsx
@github-actions

github-actions Bot commented May 20, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokePerps, SmokeConfirmations, SmokeWalletPlatform
  • Selected Performance tags: @PerformancePreps
  • Risk Level: medium
  • AI Confidence: 88%
click to see 🤖 AI reasoning details

E2E Test Selection:
The changes in this PR are focused on the Perps payment flow and the Pay With bottom sheet/modal system:

  1. SmokePerps: Directly required. The PR adds a new usePayWithPerpsSection hook that renders a Perps account balance section in the Pay With bottom sheet. The PerpsPayRow now navigates to CONFIRMATION_PAY_WITH_BOTTOM_SHEET when the feature flag is enabled. The usePerpsBalanceTokenFilter behavior changes based on the new flag. These changes directly affect the Perps Add Funds flow and payment token selection.

  2. SmokeConfirmations: Required per SmokePerps tag dependency rules ("When selecting SmokePerps, also select SmokeConfirmations"). Additionally, the changes directly modify the PayWithModal component (adding dismissOnSelectCount parameter, new navigation handling), useDismissOnPaymentChange (adding isFocused() guard), and usePayWithSections (adding Perps section). These are core confirmation payment infrastructure components used across transaction confirmation flows.

  3. SmokeWalletPlatform: Required per SmokePerps tag dependency rules ("When selecting SmokePerps, also select SmokeWalletPlatform"). Perps is a section inside the Trending tab which is tested by SmokeWalletPlatform.

The changes are feature-flag gated (isPayWithBottomSheetEnabled()), which reduces risk somewhat, but the modifications to shared components like PayWithModal and useDismissOnPaymentChange could affect existing flows. The risk is medium because: (1) changes are flag-gated, (2) unit tests are included, (3) the scope is well-contained to Perps/payment flows.

Performance Test Selection:
The changes modify the Perps payment token selection flow, Add Funds navigation, and the Pay With bottom sheet rendering. The new usePayWithPerpsSection hook adds a new section to the bottom sheet that renders Perps account balance and an Add button. These UI rendering changes in the Perps flow could impact performance of the Perps add funds flow and order view. @PerformancePreps covers perps market loading, position management, add funds flow, and order execution - all of which are touched by these changes.

View GitHub Actions results

@sonarqubecloud

sonarqubecloud Bot commented May 20, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
87.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

geositta
geositta approved these changes May 20, 2026
View reviewed changes

@geositta geositta 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.

Approve. The Perps Pay With bottom sheet changes keep Perps balance selection explicit, preserve crypto token selection behavior, and include focused coverage for the new section, dismissal guard, token filtering, and section ordering.

@OGPoyraz OGPoyraz enabled auto-merge May 21, 2026 04:19
@OGPoyraz OGPoyraz added this pull request to the merge queue May 21, 2026
Merged via the queue into main with commit 67b629f May 21, 2026
181 of 204 checks passed
@OGPoyraz OGPoyraz deleted the vs/pay-with-perps-section branch May 21, 2026 06:12
@github-actions github-actions Bot locked and limited conversation to collaborators May 21, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.79.0 Issue or pull request that will be included in release 7.79.0 label May 21, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@cursor cursor[bot] cursor[bot] left review comments

@jpuri jpuri jpuri approved these changes

@geositta geositta geositta approved these changes

Assignees

No one assigned

Labels

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

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@vinistevam @jpuri @geositta @OGPoyraz