fix(pure-black): migrate confirmation Expandable to MMDS BottomSheet

[georgewrmarshall]

Description

The Advanced details bottom sheet in the send/confirmation flow used the legacy BottomModal wrapper with a hardcoded bg-section background (theme.colors.background.section). In Pure Black theme, this caused the sheet surface to blend with the surrounding page instead of using the elevated bg-alternative token.

This PR migrates the shared Expandable confirmation component from BottomModal to the MMDS BottomSheet from @metamask/design-system-react-native. The design-system component applies bg-alternative automatically in Pure Black mode, fixing the contrast mismatch for Advanced details and all other expandable confirmation sections (e.g. signature message).

Changes:

• Replace BottomModal with MMDS BottomSheet wrapped in a transparent Modal
• Remove hardcoded bg-section background from expandable sheet styles
• Use BottomSheetRef.onCloseBottomSheet() for proper close animation via HeaderStandard

Changelog

CHANGELOG entry: Fixed Advanced details bottom sheet background in Pure Black theme by migrating confirmation expandable sheets to MMDS BottomSheet

Related issues

Fixes: TMCU-1059
Part of: TMCU-622

Manual testing steps

Feature: Advanced details bottom sheet respects Pure Black styling

  Scenario: User opens Advanced details in send confirmation with Pure Black enabled
    Given the app is running in dark mode with Pure Black preview enabled
    And the user starts a send flow and reaches the confirmation screen

    When the user taps Advanced details
    Then the bottom sheet displays with the elevated bg-alternative surface
    And the sheet background is visually distinct from the surrounding page

N/A for automated cloud-agent environment — visual QA on device/simulator recommended.

Screenshots/Recordings

Before

N/A — visual contrast issue visible on device with Pure Black enabled.

After

N/A — requires on-device visual QA in Pure Black dark mode.

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 (N/A — no new public APIs)
• 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 (N/A — styling-only change; unit tests pass)
• I've tested with a power user scenario (N/A — no performance-sensitive paths touched)
• I've instrumented key operations with Sentry traces for production performance metrics (N/A — no new traced operations)

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]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR changes the Expandable component in the confirmations UI, migrating from a custom BottomModal to the MMDS BottomSheet component. This is a targeted UI fix for the Pure Black theme background issue in the Advanced Details bottom sheet.

The Expandable component is used in:

1. signature-message-section - displayed in signature confirmation flows (personal_sign, EIP-712, SIWE)
2. advanced-details-row - displayed in transaction confirmation flows
3. account-network-info-row - displayed in confirmation flows

The change replaces BottomModal with React Native's Modal + MMDS BottomSheet, and refactors the close/open logic using refs and callbacks. While this is a UI-only fix, it changes the modal rendering mechanism which could affect:

• How the bottom sheet opens/closes in confirmations
• The animation behavior (animationType changed to "none")
• The close button interaction (now uses bottomSheetRef.current?.onCloseBottomSheet())

SmokeConfirmations is the appropriate tag as it covers signature requests, transaction confirmations, and the confirmation UI system where this component is used.

CHANGELOG confirms this is a fix: "Fixed Advanced details bottom sheet background in Pure Black theme by migrating confirmation expandable sheets to MMDS BottomSheet"

No other tags are needed as the change is isolated to the confirmations expandable UI component. No performance impact expected.

Performance Test Selection:
This is a UI component refactoring (replacing BottomModal with MMDS BottomSheet) with no performance-sensitive code paths. The change does not affect asset loading, account list rendering, login flows, swap execution, or app launch. No performance tests are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud