feat: implement Pay With Perps section

[vinistevam]

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

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

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
  • See trace() for usage and addToken for an example

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 payment-selection and navigation dismissal behavior across the redesigned Pay With UX, including Perps-specific routing and multi-pop handling; issues here could strand users on the wrong screen or select the wrong funding source.

Overview
Adds a new Perps section to the redesigned PayWithBottomSheet for perpsDepositAndOrder, showing a Perps account row with an inline Add CTA that kicks off the Perps deposit confirmation flow.

Updates perps payment selection to support the new sheet: PerpsPayRow routes to the bottom sheet when enabled; usePerpsBalanceTokenFilter stops injecting the legacy synthetic Perps-balance row under the new sheet; and usePayWithCryptoSection avoids showing misleading crypto checkmarks/rows when Perps balance (or fiat) implicitly owns the selection, while routing selection taps through usePerpsPaymentToken for perps flows.

Hardens modal/sheet navigation: PayWithModal adds dismissOnSelectCount to atomically pop(N) when launched from the bottom sheet’s “Other assets”, and useDismissOnPaymentChange now guards on navigation.isFocused() to avoid overlapping-route dismissal races. Also wires PayWithBottomSheet into the Perps navigator and adds new i18n strings for the Perps section.

^{Reviewed by Cursor Bugbot for commit 8663914. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

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]

🔍 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 (primary): The core changes affect the Perps Add Funds flow:

   • PerpsPayRow.tsx now routes to CONFIRMATION_PAY_WITH_BOTTOM_SHEET when the feature flag is enabled
   • usePerpsBalanceTokenFilter.ts changes token filtering behavior based on the feature flag
   • usePerpsPaymentToken.ts extends the payment token type to support {address, chainId} objects
   • routes/index.tsx adds PayWithBottomSheet as a new screen in the Perps navigator
   • New usePayWithPerpsSection hook creates a Perps section in the Pay With bottom sheet for perpsDepositAndOrder transactions
   • usePayWithSections.ts now includes the perps section (first in order)

2. SmokeConfirmations (required by SmokePerps tag description): The Add Funds deposits are on-chain transactions going through the confirmations flow. Additionally:

   • pay-with-modal.tsx changes affect the PayWithModal used across multiple confirmation flows (dismissOnSelectCount parameter, shouldNavigateBack prop)
   • useDismissOnPaymentChange.ts adds a navigation focus guard that affects all pay-with flows
   • usePayWithCryptoSection.ts changes affect the crypto section behavior in the Pay With bottom sheet

3. SmokeWalletPlatform (required by SmokePerps tag description): Perps is a section inside the Trending tab, so changes to Perps views affect Trending.

The changes are feature-flag gated (isPayWithBottomSheetEnabled()), which reduces risk somewhat, but the navigation changes in pay-with-modal.tsx and useDismissOnPaymentChange.ts affect all flows using these components regardless of the flag. The Android navigation fix (dismissOnSelectCount) is particularly important to validate.

Performance Test Selection:
The changes affect the Perps Add Funds flow and payment token selection UI. The new PayWithBottomSheet screen and usePayWithPerpsSection hook introduce new UI rendering paths in the Perps flow. The @PerformancePreps tag covers perps market loading, position management, add funds flow, and order execution - directly relevant to these changes. The navigation changes and new section rendering in the Pay With bottom sheet could impact the performance of the Add Funds flow.

View GitHub Actions results

[cursor]

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

^{❌ 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.}

[cursor]

X button fails to dismiss modal when dismissOnSelectCount exceeds one

Medium Severity

When dismissOnSelectCount is greater than 1 (i.e. when opened from "Other assets" in the new PayWithBottomSheet), shouldNavigateBack is false, which prevents the BottomSheet from calling goBack() on any dismiss action. Token selection works because the onClosed callback dispatches StackActions.pop(N). However, the X-button close handler calls close() without a callback, so after the close animation completes, no navigation occurs — the PayWithModal screen stays in the navigation stack invisibly, causing stack pollution and potential navigation issues on subsequent interactions.

Additional Locations (1)

• app/components/Views/confirmations/components/modals/pay-with-modal/pay-with-modal.tsx#L276-L277

 

^{Reviewed by Cursor Bugbot for commit 8663914. Configure here.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[github-actions]

⚠️ E2E Fixture Validation — Structural changes detected

Category	Count
New keys	15
Missing keys	0
Type mismatches	0
Value mismatches	12 (informational)

The committed fixture schema is out of date. To update, comment:

@metamaskbot update-mobile-fixture

View full details | Download diff report