refactor: elevate QR signing and hardware wallet sheets

[gantunesr]

Description

Fixes elevated surfaces collapsing into the pure-black screen background when MM_PURE_BLACK_PREVIEW=true. The QR signing modal and hardware wallet bottom sheet now use getElevatedSurfaceColor() instead of background.default, so they render as visible elevated surfaces in pure-black dark mode. Light mode and flag-off behavior are unchanged.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MUL-1866

Manual testing steps

• Set MM_PURE_BLACK_PREVIEW="true" in .js.env and rebuild the app.
• Switch the app to dark mode.
• Trigger a QR signing flow (Keystone / QR hardware wallet) and confirm the modal background is visibly elevated above the screen.
• Trigger a hardware wallet connect flow (e.g. Ledger) and confirm the bottom sheet background is visibly elevated above the screen.
• Disable the flag or switch to light mode and confirm both surfaces look the same as before.

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.

[mm-token-exchange-service]

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

Warnings — informational, address before merging:

• Screenshots/Recordings section is empty. Add an image/video for user-facing changes, logs/console output for non-user-facing changes, or write N/A if no evidence is applicable.
• 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: SmokeAccounts
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR changes are limited to two QR hardware wallet UI components:

1. HardwareWalletBottomSheet.tsx: Refactored to pass the full theme object to createStyles instead of just colors, switching the background color from colors.background.default to getElevatedSurfaceColor(theme). This is a pure theming/styling change.

2. QRSigningModal/index.tsx: Same refactoring pattern - uses full theme instead of colors, switches to getElevatedSurfaceColor(theme) for background, and adds a testID to the content wrapper for testability.

3. Test files: Unit tests updated/added to verify the new elevated surface color styling.

These changes affect the visual appearance of QR hardware wallet flows (adding QR-based hardware wallet accounts and signing with them). The SmokeAccounts tag directly covers "adding QR-based hardware wallet accounts" per its description. No functional logic was changed - only the color/theme utility used for background styling.

No other tags are warranted:

• No confirmation flow logic changed (SmokeConfirmations not needed)
• No network changes (SmokeNetworkAbstractions/Expansion not needed)
• No core Engine/controller changes
• Risk is low as this is a cosmetic theming improvement

Performance Test Selection:
The changes are purely UI/styling refactors (switching from colors.background.default to getElevatedSurfaceColor(theme)). There is no impact on rendering performance, data fetching, app launch, or any performance-sensitive flows. No performance tests are warranted.

View GitHub Actions results