fix(confirmations): use elevated surface on Advanced EIP-1559 modal by georgewrmarshall · Pull Request #33301 · MetaMask/metamask-mobile

georgewrmarshall · 2026-07-14T21:58:06Z

Description

In Pure Black mode, the Advanced EIP-1559 network fee bottom sheet (AdvancedEIP1559Modal) used background.default on its container while stacked over an elevated confirmation surface. This made the modal appear as flat #000000 instead of the elevated surface color.

This change replaces theme.colors.background.default with getElevatedSurfaceColor(theme) on the modal container, matching other confirmation gas modals (e.g. gas-fee-token-modal).

Part of the Pure Black Hex Background Schema epic (TMCU-622).

Changelog

CHANGELOG entry: null

Related issues

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

Manual testing steps

Feature: Advanced EIP-1559 modal elevated surface in Pure Black mode

  Scenario: Advanced gas fee modal uses elevated surface color
    Given Pure Black mode is enabled
    And the user opens a transaction confirmation on an EIP-1559 network
  When the user edits the network fee and opens Advanced
  Then the bottom sheet background uses the elevated surface color (#1c1d1f) instead of flat #000000

N/A — Pure Black mode requires device/simulator testing with the feature flag enabled; verified via unit test asserting getElevatedSurfaceColor is used for the container background.

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.

In Pure Black mode, the Advanced EIP-1559 network fee bottom sheet was using background.default (#000000), making it visually flat against the elevated confirmation surface underneath. Replace with getElevatedSurfaceColor(theme) so the modal uses the correct elevated surface color in Pure Black dark mode. Fixes TMCU-1089 Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

Apply muted border on elevated surface in Pure Black dark mode and extend styles tests to cover border gating alongside gas-fee-token-modal. Co-authored-by: Cursor <cursoragent@cursor.com>

georgewrmarshall · 2026-07-14T23:37:11Z

+    // Drop getElevatedSurfaceColor, isPureBlackEnabled, and AppThemeKey checks.
    container: {
-      backgroundColor: theme.colors.background.default,
+      backgroundColor: getElevatedSurfaceColor(theme),


AdvancedEIP1559Modal is the EIP-1559 advanced gas sheet (Max Base Fee, Priority Fee, Gas Limit), not the legacy AdvancedGasPriceModal (#33297). It opens stacked over the gas editor on Mainnet-style sends; in Pure Black dark the container used background.default and read as flat black (TMCU-1089).

github-actions · 2026-07-14T23:37:12Z

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-14T23:37:12Z

  const { theme } = params;
+  const { colors } = theme;
+  const isPureBlackDark =
+    isPureBlackEnabled && theme.themeAppearance === AppThemeKey.dark;


isPureBlackDark matches gas-fee-token-modal and the other confirmation bottom sheets: isPureBlackEnabled plus AppThemeKey.dark. Standard dark/light themes and preview-off builds keep borderWidth 0.

georgewrmarshall · 2026-07-14T23:37:13Z

-      backgroundColor: theme.colors.background.default,
+      backgroundColor: getElevatedSurfaceColor(theme),
+      borderWidth: isPureBlackDark ? 1 : 0,
+      borderColor: isPureBlackDark ? colors.border.muted : undefined,


border.muted gives a visible edge when this sheet sits on the already-elevated gas modal stack; without it the elevated gray surface can still disappear against adjacent flat black chrome.

georgewrmarshall · 2026-07-14T23:37:14Z

+    isPureBlackEnabled && theme.themeAppearance === AppThemeKey.dark;

  return StyleSheet.create({
+    // TODO(Pure Black): Remove once MMDS ships pure-black-aware surface tokens.


Styles tests mirror gas-fee-token-modal: elevated background always via getElevatedSurfaceColor mock, border only when isPureBlackEnabled is true in dark mode.

github-actions · 2026-07-14T23:39:05Z

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR modifies the style sheet for the Advanced EIP-1559 gas fee modal (advanced-eip1559-modal.styles.ts) and adds a corresponding unit test file. The style change updates the container's background color to use getElevatedSurfaceColor() for pure black theme support and adds a conditional border (1px muted border) when pure black dark mode is enabled. This is a visual/styling-only change with no functional logic modifications.

While this is primarily cosmetic, it touches the EIP-1559 gas fee customization modal which is part of the confirmations flow. A conservative approach warrants running SmokeConfirmations to verify the modal renders correctly and the gas fee customization flow still works end-to-end. The risk is low since only styling properties (backgroundColor, borderWidth, borderColor) are changed, not any behavioral logic.

Performance Test Selection:
The changes are purely visual/styling updates to the Advanced EIP-1559 modal's style sheet. No performance-sensitive code paths (rendering loops, data fetching, state management, navigation) are affected. No performance test tags are warranted.

View GitHub Actions results

sonarqubecloud · 2026-07-14T23:58:54Z

Quality Gate passed

Issues
1 New issue
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

metamask-ci Bot added the team-design-system All issues relating to design system in Mobile label Jul 14, 2026

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

fix(confirmations): add Pure Black border to AdvancedEIP1559Modal

681b6be

Apply muted border on elevated surface in Pure Black dark mode and extend styles tests to cover border gating alongside gas-fee-token-modal. Co-authored-by: Cursor <cursoragent@cursor.com>

georgewrmarshall commented Jul 14, 2026

View reviewed changes

georgewrmarshall self-assigned this Jul 14, 2026

georgewrmarshall marked this pull request as ready for review July 14, 2026 23:44

georgewrmarshall requested a review from a team as a code owner July 14, 2026 23:44

github-actions Bot added the risk:low AI analysis: low risk label Jul 14, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(confirmations): use elevated surface on Advanced EIP-1559 modal#33301

fix(confirmations): use elevated surface on Advanced EIP-1559 modal#33301
georgewrmarshall wants to merge 2 commits into
mainfrom
cursor/fix-advanced-eip1559-pure-black-b6e6

georgewrmarshall commented Jul 14, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Jul 14, 2026

Uh oh!

github-actions Bot commented Jul 14, 2026

Uh oh!

georgewrmarshall Jul 14, 2026

Uh oh!

georgewrmarshall Jul 14, 2026

Uh oh!

georgewrmarshall Jul 14, 2026

Uh oh!

github-actions Bot commented Jul 14, 2026

Uh oh!

sonarqubecloud Bot commented Jul 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

georgewrmarshall commented Jul 14, 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!

georgewrmarshall Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 14, 2026

Uh oh!

georgewrmarshall Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 14, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented Jul 14, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Jul 14, 2026 •

edited

Loading