fix(confirmations): remove redundant useElevatedSurface from MMDS BottomSheets (TMCU-1044)

[georgewrmarshall]

Description

MMDS BottomSheet now handles pure-black elevated surface internally. This PR removes the redundant useElevatedSurface() shim from confirmation-owned MMDS bottom sheets, which was previously passing twClassName={surfaceClass} to override the sheet background.

Why: The parent shim is no longer needed and can conflict with MMDS-owned surface handling during the pure-black rollout.

What changed: Removed useElevatedSurface import, hook usage, and twClassName prop from:

• app/components/Views/confirmations/components/AccountSelector/AccountSelector.tsx
• app/components/Views/confirmations/components/modals/pay-with-bottom-sheet/pay-with-bottom-sheet.tsx
• app/components/Views/confirmations/components/rows/account-picker-row/account-picker-row.tsx
• app/components/Views/confirmations/components/send/send-alert-modal/send-alert-modal.tsx

Also removed obsolete useElevatedSurface mocks from predict/perps account picker row tests.

Child bg-default fixes (e.g. TMCU-994 pattern) remain out of scope — only the parent shim was removed.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-1044

Manual testing steps

Feature: Pure black elevated surface on confirmation bottom sheets

  Scenario: Account selector bottom sheet uses MMDS surface styling
    Given the app is running with pure black preview enabled
    And the user is on a confirmation flow that shows the account selector
    When the user opens the account selector bottom sheet
    Then the sheet background should use the elevated surface color without collapsing into the screen background

  Scenario: Pay with bottom sheet uses MMDS surface styling
    Given the app is running with pure black preview enabled
    And the user is on a pay confirmation flow
    When the user opens the pay-with bottom sheet
    Then the sheet background should use the elevated surface color without collapsing into the screen background

  Scenario: Send alert modal uses MMDS surface styling
    Given the app is running with pure black preview enabled
    And the user is on a send flow that triggers a send alert
    When the send alert modal bottom sheet is shown
    Then the sheet background should use the elevated surface color without collapsing into the screen background

Unit tests were also run:

• AccountSelector.test.tsx
• pay-with-bottom-sheet.test.tsx
• send-alert-modal.test.tsx
• predict-account-picker-row.test.tsx
• perps-account-picker-row.test.tsx

Screenshots/Recordings

N/A — visual change requires pure black preview QA on device/simulator; no before/after captures attached in this PR.

Before

N/A

After

N/A

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.

  

[mm-token-exchange-service]

PR template — items to address before "Ready for review"

Warnings — informational, address before merging:

• Pre-merge author checklist has unchecked items (e.g. "I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards."). Every box must be consciously checked — see docs/readme/ready-for-review.md.

See docs/readme/ready-for-review.md for the full Definition of Ready for Review.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeConfirmations, SmokePerps, SmokePredictions, SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR removes the useElevatedSurface hook and its twClassName prop from BottomSheet components across several confirmation-related files:

1. AccountSelector.tsx - Used in confirmation flows for account selection. Removing twClassName={surfaceClass} changes the visual styling of the account selector bottom sheet.
2. pay-with-bottom-sheet.tsx - Used in Perps and Predict payment flows. Same styling change.
3. account-picker-row.tsx - Used in Perps and Predict account picker rows. Same styling change.
4. send-alert-modal.tsx - Used in send flows for alert display. Same styling change.
5. perps-account-picker-row.test.tsx and predict-account-picker-row.test.tsx - Test cleanup removing the now-unnecessary useElevatedSurface mock.

These are UI/styling changes that affect the visual appearance of bottom sheets in confirmation, perps, and predict flows. While not functional logic changes, they could affect rendering and visual correctness of these flows.

Tag selection rationale:

• SmokeConfirmations: AccountSelector and SendAlertModal are core to confirmation flows (send, signatures, token approvals)
• SmokePerps: perps-account-picker-row and pay-with-bottom-sheet are directly used in Perps flows
• SmokePredictions: predict-account-picker-row and pay-with-bottom-sheet are directly used in Predict flows
• SmokeWalletPlatform: Required by both SmokePerps and SmokePredictions per their tag descriptions (Trending section includes Perps and Predictions views)

Performance Test Selection:
The changes are purely UI/styling removals (removing useElevatedSurface hook and twClassName prop from BottomSheet components). These are cosmetic/visual changes that do not affect performance-sensitive code paths like rendering loops, data fetching, state management, or app startup. No performance test tags are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[georgewrmarshall]

@cursor update PR description to align with pull-request-template

[cursor]

Updated the PR description on #33166 to match .github/pull-request-template.md.

It now includes all required sections:

• Description — what changed and why
• Changelog — CHANGELOG entry: null (internal styling cleanup)
• Related issues — Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-1044
• Manual testing steps — Gherkin scenarios for pure black QA on the three affected sheets, plus unit test list
• Screenshots/Recordings — explicit N/A with Before/After subsections
• Pre-merge author checklist — template checklist preserved
• Pre-merge reviewer checklist — template checklist preserved

This should clear the PR template structural warning from @mm-token-exchange-service[bot]. Checklist boxes remain unchecked for draft status, per the template’s ready-for-review guidance.