feat: add PayWithBottomSheet component

[vinistevam]

Description

Introduces the foundation for the redesigned MMPay payment picker (CONF-1313). When the dev override is enabled, tapping the "Pay with" row on confirmation screens opens a new empty bottom sheet instead of the existing token picker (PayWithModal). All subsequent epic PRs (Crypto/Perps/Predict/Bank-Card sections) will plug into this scaffolding.
What's added:

• PayWithBottomSheet modal at components/modals/pay-with-bottom-sheet/ using @metamask/design-system-react-native BottomSheet
• Generic PayWithSection UI primitive at components/UI/pay-with-section/ — renders a section header + rows from config
• Generic PaymentMethodRow UI primitive at components/UI/payment-method-row/ — icon, title/subtitle, trailing element (checkmark / chevron / custom node), optional <Tag label="Last used" />
• PayWithSectionConfig and PayWithRowConfig TypeScript interfaces — the contract every future section hook will implement
• usePayWithSections() orchestrator hook skeleton (returns [] for now; PRs 2–7 will plug in section configs)
• New navigation route Routes.CONFIRMATION_PAY_WITH_BOTTOM_SHEET registered in App.tsx
• pay-with-row.tsx now routes to the new bottom sheet when the gate is on, falls back to the existing PayWithModal otherwise — zero behavior change for users
  Gating:
• Default behavior is unchanged — users still see the existing PayWithModal
• Local dev override MM_DEV_PAY_WITH_BOTTOM_SHEET (set in .js.env) flips the route locally without touching the shared confirmations_pay_fiat remote flag, so it doesn't collide with parallel fiat work

Changelog

CHANGELOG entry: null

Related issues

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

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

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.

[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: SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 85%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR introduces a new PayWithBottomSheet component as a redesigned payment method picker for the confirmations pay-with flow (EIP-7702 gas fee token payments). Key changes:

1. New components: PayWithBottomSheet, PayWithSection, PaymentMethodRow - new UI for selecting payment methods in confirmations
2. Feature flag gating: pay-with-row.tsx now checks useMMPayFiatConfig + MM_DEV_PAY_WITH_BOTTOM_SHEET env var to decide whether to navigate to the new bottom sheet or the existing modal
3. New route: CONFIRMATION_PAY_WITH_BOTTOM_SHEET added to Routes.ts and registered in App.tsx navigation stack
4. Stub hook: usePayWithSections currently returns empty sections, so the new bottom sheet renders nothing yet
5. Localization: New strings for the bottom sheet title and "Last used" tag

The changes directly affect the confirmation pay-with flow (EIP-7702 advanced features, gas fee token payments). The feature flag means the new bottom sheet won't appear in standard E2E runs unless the flag is enabled, but the navigation logic change in pay-with-row.tsx could affect existing pay-with flows. SmokeConfirmations covers EIP-7702 batch transactions and gas fee token payment flows which are the primary affected area.

No other tags are needed: the changes don't touch swap/bridge flows (SmokeSwap), staking (SmokeStake), account management (SmokeAccounts), network management (SmokeNetworkAbstractions), or other areas. The App.tsx change is minimal (one new screen registration) and doesn't affect navigation for other flows.

Performance Test Selection:
The changes introduce new UI components (PayWithBottomSheet, PayWithSection, PaymentMethodRow) but these are behind a feature flag and the hook returns empty sections (stub). There's no impact on app startup, account/network list rendering, login flows, or other performance-sensitive areas. No performance tests are warranted.

View GitHub Actions results

[codecov-commenter]

Codecov Report

❌ Patch coverage is 84.00000% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.51%. Comparing base (4797726) to head (fb2e0bc).

Files with missing lines	Patch %	Lines
...nents/UI/payment-method-row/payment-method-row.tsx	80.00%	1 Missing and 5 partials ⚠️
...ls/pay-with-bottom-sheet/pay-with-bottom-sheet.tsx	80.00%	2 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #29904   +/-   ##
=======================================
  Coverage   81.50%   81.51%           
=======================================
  Files        5328     5332    +4     
  Lines      141146   141195   +49     
  Branches    32157    32174   +17     
=======================================
+ Hits       115046   115090   +44     
  Misses      18239    18239           
- Partials     7861     7866    +5     

☔ 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.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud