chore: fix Pay With sheet elevation mismatch for pure black by georgewrmarshall · Pull Request #32909 · MetaMask/metamask-mobile

georgewrmarshall · 2026-07-07T17:31:16Z

Description

Fixes elevation mismatches in the Pay With bottom sheet when MM_PURE_BLACK_PREVIEW is enabled (TMCU-994 / 8.3.0 pure black soak testing).

Problem: PayWithBottomSheet already uses useElevatedSurface() (bg-alternative), but inner children still painted their own bg-default. With pure black on, bg-default is #000000, so rows appeared as black patches inside the elevated sheet.

Approach (minimal, time-sensitive):

PayWithSection rows container — useElevatedSurface() instead of hardcoded bg-default
PaymentMethodRow unselected state — bg-transparent so the parent container owns the surface; selected rows keep bg-section for highlight

Follow-up (not in this PR): Refactor PayWithSection / PaymentMethodRow to MMDS ListItem / ListItemSelect once pure black QA lands. Keeping this diff small for the release timeline.

Changelog

CHANGELOG entry: null

Related issues

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

Manual testing steps

Feature: Pay With bottom sheet pure black theming

  Scenario: user opens Pay With selector with pure black enabled
    Given the app is in dark mode with MM_PURE_BLACK_PREVIEW=true
    And the user is on the Perps home page with funds available

    When user taps Add funds
    And user taps the Pay With asset dropdown
    Then the Pay With bottom sheet background matches the elevated pure black surface
    And unselected payment method rows do not show a mismatched bg-default patch
    And the selected row still shows a bg-section highlight

  Scenario: user opens Pay With selector with pure black disabled
    Given the app is in dark mode with MM_PURE_BLACK_PREVIEW unset or false

    When user opens the Pay With bottom sheet from Add funds
    Then the bottom sheet and rows render as before (no visual regression)

Screenshots/Recordings

Manual verification on device/simulator with MM_PURE_BLACK_PREVIEW=true — Pay With sheet rows align with elevated sheet surface (Perps Add funds flow).

Before

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-07-07.at.12.27.57.mov

After

MM_PURE_BLACK_PREVIEW="true"

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-07-07.at.12.23.57.mov

MM_PURE_BLACK_PREVIEW="false"

Simulator Screenshot - iPhone 17 Pro - 2026-07-07 at 13 16 02

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-07-07.at.13.16.29.mov

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.

…tions Replace hardcoded bg-default in PayWithSection and PaymentMethodRow with useElevatedSurface() so the Add funds Pay With modal adapts to the pure black theme when MM_PURE_BLACK_PREVIEW is enabled. Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-994 Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

mm-token-exchange-service · 2026-07-07T17:32:04Z

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 documented my code using JSDoc format if applicable"). 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.

Unselected payment method rows inherit the elevated bottom sheet surface instead of painting bg-default/bg-alternative. Drop the elevated-surface test scaffolding added for the pure black rollout. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-07-07T19:25:32Z

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.

georgewrmarshall · 2026-07-07T19:27:34Z


 const PayWithSection = ({ config }: PayWithSectionProps) => {
  const testID = config.testID ?? `pay-with-section-${config.id}`;
+  const surfaceClass = useElevatedSurface();


The container is responsible for the background color. PayWithBottomSheet applies useElevatedSurface on the BottomSheet, so this rows wrapper no longer paints bg-default and child rows inherit the elevated surface.

georgewrmarshall · 2026-07-07T19:27:35Z

 }: PaymentMethodRowProps) => {
  const tw = useTailwind();
  const resolvedTestID = testID ?? `payment-method-row-${id}`;
+  const rowBackgroundClass = isSelected ? 'bg-section' : 'bg-transparent';


List items follow the same rule: the BottomSheet container owns the default background. Unselected rows use bg-transparent; bg-section is only for the selected highlight.

georgewrmarshall · 2026-07-07T19:27:45Z

        tw.style(
          'flex-row items-center px-4 py-3',
-          isSelected ? 'bg-section' : 'bg-default',
+          rowBackgroundClass,


This is a minimal pure-black hotfix. A follow-up PR should replace the bespoke Pressable/Box row with MMDS ListItem or ListItemSelect so selection, press, and surface tokens come from the design system.

Remove useElevatedSurface from PayWithSection so the rows container stays transparent and inherits the elevated surface from PayWithBottomSheet. Co-authored-by: Cursor <cursoragent@cursor.com>

georgewrmarshall · 2026-07-07T20:50:05Z

        </Text>
      ) : null}
-      <Box twClassName="bg-default" testID={`${testID}-rows`}>
+      <Box testID={`${testID}-rows`}>


The container is responsible for the background color, not this rows wrapper. PayWithBottomSheet applies useElevatedSurface on the BottomSheet, so PayWithSection children stay transparent. A child bg-default would paint a second surface on top of bg-alternative and recreate the pure black mismatch.

georgewrmarshall · 2026-07-07T20:50:11Z

 }: PaymentMethodRowProps) => {
  const tw = useTailwind();
  const resolvedTestID = testID ?? `payment-method-row-${id}`;
+  const rowBackgroundClass = isSelected ? 'bg-section' : 'bg-transparent';


List items follow the same pattern: the BottomSheet container owns the background color. Unselected rows use bg-transparent. bg-section is only for the selected highlight; per-row bg-default was a second surface fill and caused the visible black bands.

georgewrmarshall · 2026-07-07T20:50:12Z

        tw.style(
          'flex-row items-center px-4 py-3',
-          isSelected ? 'bg-section' : 'bg-default',
+          rowBackgroundClass,


rowBackgroundClass keeps the static Box and Pressable paths aligned. The container supplies the default background; rows only add a fill for explicit interaction states such as selected or pressed.

github-actions · 2026-07-08T01:23:41Z

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The two changed files are UI styling components in the confirmations payment flow:

pay-with-section.tsx: Removes twClassName="bg-default" from a Box container - a minor visual styling change.
payment-method-row.tsx: Refactors background class logic into a variable and changes the unselected state background from bg-default to bg-transparent. This is a visual change affecting how unselected payment method rows appear.

These changes are in the pay-with-bottom-sheet / payment method selection UI used in the EIP-7702 gas fee token payment flow within confirmations. The changes are purely visual (background colors), with no functional logic changes.

The pay-with-bottom-sheet is imported by the confirmations flow, so SmokeConfirmations is the appropriate tag to verify the payment method selection UI still renders and functions correctly. No other flows are directly impacted by these styling changes.

Performance Test Selection:
These are purely visual/styling changes (background color adjustments) in the payment method row and section components. They have no impact on app performance metrics like render times, load times, or transaction execution speed.

View GitHub Actions results

sonarqubecloud · 2026-07-08T01:42:14Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

mm-token-exchange-service Bot added the team-design-system All issues relating to design system in Mobile label Jul 7, 2026

github-actions Bot added the size-S label Jul 7, 2026

georgewrmarshall changed the title ~~fix(confirmations): use elevated surface in Pay With bottom sheet for pure black theme~~ fix(confirmations): fix Pay With sheet elevation mismatch for pure black Jul 7, 2026

georgewrmarshall commented Jul 7, 2026

View reviewed changes

fix(confirmations): let Pay With bottom sheet own section background

478c4d1

Remove useElevatedSurface from PayWithSection so the rows container stays transparent and inherits the elevated surface from PayWithBottomSheet. Co-authored-by: Cursor <cursoragent@cursor.com>

georgewrmarshall changed the title ~~fix(confirmations): fix Pay With sheet elevation mismatch for pure black~~ chore: fix Pay With sheet elevation mismatch for pure black Jul 7, 2026

georgewrmarshall self-assigned this Jul 7, 2026

georgewrmarshall commented Jul 7, 2026

View reviewed changes

georgewrmarshall marked this pull request as ready for review July 7, 2026 20:52

georgewrmarshall requested a review from a team as a code owner July 7, 2026 20:52

github-actions Bot added the risk:medium AI analysis: medium risk label Jul 7, 2026

Merge branch 'main' into cursor/fix-pay-with-pure-black-tmcu-994-d276

3ed6a79

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

chore: fix Pay With sheet elevation mismatch for pure black#32909

chore: fix Pay With sheet elevation mismatch for pure black#32909
georgewrmarshall wants to merge 4 commits into
mainfrom
cursor/fix-pay-with-pure-black-tmcu-994-d276

georgewrmarshall commented Jul 7, 2026 •

edited

Loading

Uh oh!

mm-token-exchange-service Bot commented Jul 7, 2026

Uh oh!

github-actions Bot commented Jul 7, 2026

Uh oh!

georgewrmarshall Jul 7, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Jul 7, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Jul 7, 2026

Uh oh!

georgewrmarshall Jul 7, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Jul 7, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Jul 7, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 8, 2026

Uh oh!

sonarqubecloud Bot commented Jul 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

georgewrmarshall commented Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

mm-token-exchange-service Bot commented Jul 7, 2026

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

Uh oh!

github-actions Bot commented Jul 7, 2026

Uh oh!

georgewrmarshall Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 8, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented Jul 8, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Jul 7, 2026 •

edited

Loading

georgewrmarshall Jul 7, 2026 •

edited

Loading

georgewrmarshall Jul 7, 2026 •

edited

Loading

georgewrmarshall Jul 7, 2026 •

edited

Loading

georgewrmarshall Jul 7, 2026 •

edited

Loading

georgewrmarshall Jul 7, 2026 •

edited

Loading