fix(pure-black): switch confirmations Expandable to MMDS BottomSheet (uses bg-alternative)

[georgewrmarshall]

Description

Reverts the earlier refactor that swapped confirmations Expandable to MMDS BottomSheet. We keep the legacy BottomModal implementation and fix the Pure Black bug by adjusting styles only: the sheet content container now uses the elevated surface color, which resolves to bg-alternative when Pure Black is enabled.

Scope:

• app/components/Views/confirmations/components/UI/expandable/expandable.tsx (revert to BottomModal)
• app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts (use elevated surface color)

Notes:

• No behavior change to headers, copy button, or interactions.
• Styling now matches other Pure Black elevated surfaces.

Changelog

CHANGELOG entry: Fixed Advanced details bottom sheet surface in Pure Black by using the elevated bg-alternative surface (style-only change; no component refactor).

Related issues

Refs: TMCU-622
Fixes: TMCU-1059

Manual testing steps

Feature: Advanced details sheet uses Pure Black elevated surface

  Scenario: Open Advanced details while Pure Black is enabled
    Given the app is launched with environment variable MM_PURE_BLACK_PREVIEW=true
    And a transaction confirmation is visible (e.g. dapp-initiated transfer)
    When I tap the "Advanced details" row
    Then a bottom sheet opens using the elevated bg-alternative surface (dark grey)
    And the sheet header and content remain unchanged
    And dismissing the sheet works via the close button or swipe down

Screenshots/Recordings

N/A — visual change to sheet surface; will attach screenshots from nightly build if needed.

Before

N/A

After

N/A

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and 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 (internal only)

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 the linked power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics

Slack Thread

  

[mm-token-exchange-service]

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

Warnings — informational, address before merging:

• PR body does not match pull-request-template.md (one or more section headings are missing). See https://github.com/MetaMask/metamask-mobile/blob/main/.github/scripts/shared/pr-template-checks.ts#L15-L23.

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

[georgewrmarshall]

@cursoragent revert the refactor changes and lets just chagne the styles to use background alternative if pure black is true

[cursor]

Done. I reverted the Expandable refactor and made a style-only fix:

• Reverted Expandable to use the existing BottomModal (no component migration).
• Updated expandable.styles.ts to use the elevated surface color, which resolves to bg-alternative when Pure Black is enabled.
• Pushed commit and updated the PR body to reflect “style-only” change.

This keeps behavior unchanged and fixes the Pure Black background for the Advanced details sheet.

  

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: None (no tests recommended)
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 97%

click to see 🤖 AI reasoning details

E2E Test Selection:
The only changed file is app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts. The diff shows a single-line change replacing theme.colors.background.section with getElevatedSurfaceColor(theme) for the modalContent background color. This is a purely cosmetic/visual styling change — it adjusts the background color of the expandable modal content in the confirmations UI. The getElevatedSurfaceColor utility is already widely used across the codebase (BottomSheetDialog, ModalConfirmation, NetworkManager, TextField, etc.) and is a well-established theme utility. There is no functional logic change, no state management impact, no navigation change, and no business logic affected. Per the COSMETIC CHANGES guidance, this type of styling-only change does not warrant any E2E test execution.

Performance Test Selection:
The change is a pure CSS/StyleSheet background color update in a single style file. It has no impact on rendering performance, load times, or any measurable performance metric. No performance tests 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