fix(ramps): fix Transak checkout background color mismatch — aggregator flow (TMCU-1087)

[georgewrmarshall]

Description

Follow-up to #33310 — applies the same Transak checkout background fix to the legacy aggregator flow (app/components/UI/Ramp/Aggregator/Views/Checkout/).

The component-library BottomSheet (used in the aggregator) does not have a twClassName prop like the MMDS version. Instead, the style prop is spread last into the sheet surface after getElevatedSurfaceColor(theme), so passing style={{ backgroundColor }} correctly overrides it.

Changes:

• Adds transakBackgroundDark / transakBackgroundLight to app/styles/common.ts (same constants as fix(ramps): fix Transak checkout background color mismatch — native flow (TMCU-1087) #33310 — will resolve trivially on merge)
• Updates Checkout.styles.ts to use Transak colors for the WebView backgroundColor (prevents load flash)
• Applies style={transakBgStyle} to the WebView BottomSheet only — error states keep the default design-system surface
• Removes backgroundColor: colors.background.default from ErrorView so the container owns the surface color

Changelog

CHANGELOG entry: null

Related issues

Fixes: TMCU-1087

Manual testing steps

Feature: Transak checkout background color — aggregator flow

  Scenario: user opens Transak checkout in dark mode (aggregator)
    Given the app is in dark mode
    And the user is on the legacy aggregator Buy flow
    And the user has selected a Transak quote

    When the user proceeds to the checkout screen
    Then the BottomSheet background matches the Transak iframe with no visible color mismatch

  Scenario: user opens Transak checkout in light mode (aggregator)
    Given the app is in light mode

    When the user proceeds to the checkout screen
    Then the BottomSheet background is white matching the Transak iframe

Screenshots/Recordings

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.

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.

---

Note

Low Risk
Scoped UI background overrides for the ramp checkout WebView; no payment, auth, or order-handling logic changes.

Overview
Aligns the legacy aggregator Transak checkout BottomSheet and WebView surfaces with Transak’s fixed iframe colors so dark/light mode no longer shows a visible seam around the embedded flow.

Adds transakBackgroundDark / transakBackgroundLight in app/styles/common.ts, applies them to the WebView style (load flash) and style={transakBgStyle} on the checkout BottomSheet only. Error paths keep the default design-system sheet; ErrorView no longer sets its own backgroundColor so the parent owns the surface.

^{Reviewed by Cursor Bugbot for commit 35277d6. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

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.

[metamask-ci]

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 only 5 of the required 8 items. Every checklist row must be present and consciously checked — do not delete rows.

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

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
All four changed files are scoped to the Ramp/Aggregator (fiat on-ramp/off-ramp) UI:

1. app/styles/common.ts: Adds two new color constants (transakBackgroundDark, transakBackgroundLight) used exclusively by the Transak checkout WebView. No existing colors are modified, so no other components are affected.

2. Checkout.styles.ts: Updates the WebView background color to use the new Transak-specific colors (theme-aware dark/light). Pure styling change within the Checkout view.

3. Checkout.tsx: Adds a transakBgStyle object using the new colors and applies it to the BottomSheet wrapper. This ensures the native chrome matches Transak's iframe background. Functional logic (URL loading, order handling, navigation) is unchanged.

4. ErrorView.tsx: Removes a hardcoded backgroundColor: colors.background.default from the error container — a minor cosmetic fix to let the parent background show through.

These are all styling/visual changes within the Ramp checkout flow. SmokeMoney covers the ramps (buy/sell) flows including the Checkout view. No transaction confirmation logic, swap logic, or other flows are touched, so no additional dependent tags (SmokeConfirmations, SmokeSwap) are warranted beyond what the styling change itself requires.

Performance Test Selection:
The changes are purely UI/styling — adding color constants and applying theme-aware background colors to the Transak checkout WebView. No data fetching, rendering loops, state management, or performance-sensitive code paths are modified. No performance test tags are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud