From 35277d612705358eb83d75e50049d2c6bcb560c6 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Wed, 15 Jul 2026 19:49:05 -0700
Subject: [PATCH] =?UTF-8?q?fix(ramps):=20fix=20Transak=20checkout=20backgr?=
 =?UTF-8?q?ound=20color=20mismatch=20=E2=80=94=20aggregator=20flow=20(TMCU?=
 =?UTF-8?q?-1087)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mirrors the fix from the native unified-buy flow to the legacy aggregator
checkout. Overrides the component-library BottomSheet background (via the
style prop, which is spread last into the sheet surface) and the WebView
backgroundColor to match Transak's iframe theme colors (#1a1a1a dark /
#ffffff light), sourced from new constants in app/styles/common.ts.

Also removes the hardcoded backgroundColor from ErrorView so the container
(BottomSheet or ScreenLayout) is always responsible for the surface color.
---
 .../Aggregator/Views/Checkout/Checkout.styles.ts   | 13 +++++++++----
 .../UI/Ramp/Aggregator/Views/Checkout/Checkout.tsx | 14 ++++++++++++++
 .../UI/Ramp/Aggregator/components/ErrorView.tsx    |  1 -
 app/styles/common.ts                               |  5 +++++
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/app/components/UI/Ramp/Aggregator/Views/Checkout/Checkout.styles.ts b/app/components/UI/Ramp/Aggregator/Views/Checkout/Checkout.styles.ts
index df5fea79316..8ad6801c826 100644
--- a/app/components/UI/Ramp/Aggregator/Views/Checkout/Checkout.styles.ts
+++ b/app/components/UI/Ramp/Aggregator/Views/Checkout/Checkout.styles.ts
@@ -1,14 +1,19 @@
 import { StyleSheet } from 'react-native';
-import { Theme } from '../../../../../../util/theme/models';
+import { Theme, AppThemeKey } from '../../../../../../util/theme/models';
+import { colors } from '../../../../../../styles/common';
 
-const styleSheet = (params: { theme: Theme }) =>
-  StyleSheet.create({
+const styleSheet = (params: { theme: Theme }) => {
+  const isDark = params.theme.themeAppearance === AppThemeKey.dark;
+  return StyleSheet.create({
     headerWithoutPadding: {
       paddingVertical: 0,
     },
     webview: {
-      backgroundColor: params.theme.colors.background.default,
+      backgroundColor: isDark
+        ? colors.transakBackgroundDark
+        : colors.transakBackgroundLight,
     },
   });
+};
 
 export default styleSheet;
diff --git a/app/components/UI/Ramp/Aggregator/Views/Checkout/Checkout.tsx b/app/components/UI/Ramp/Aggregator/Views/Checkout/Checkout.tsx
index 1d2253510e8..6bce37d3921 100644
--- a/app/components/UI/Ramp/Aggregator/Views/Checkout/Checkout.tsx
+++ b/app/components/UI/Ramp/Aggregator/Views/Checkout/Checkout.tsx
@@ -38,6 +38,9 @@ import {
 } from '../../../../../../component-library/components/Icons/Icon';
 import { useStyles } from '../../../../../../component-library/hooks';
 import styleSheet from './Checkout.styles';
+import { useTheme } from '../../../../../../util/theme';
+import { AppThemeKey } from '../../../../../../util/theme/models';
+import { colors } from '../../../../../../styles/common';
 import Device from '../../../../../../util/device';
 import { shouldStartLoadWithRequest } from '../../../../../../util/browser';
 import { CHECKOUT_TEST_IDS } from './Checkout.testIds';
@@ -67,6 +70,16 @@ const CheckoutWebView = () => {
   const handleSuccessfulOrder = useHandleSuccessfulOrder();
 
   const { styles } = useStyles(styleSheet, {});
+  const { themeAppearance } = useTheme();
+  // Intentionally overrides the design-system BottomSheet background to match
+  // Transak's iframe, which we cannot style. Keeps the native chrome seamless
+  // with the embedded checkout flow. See colors.transak* in app/styles/common.ts.
+  const transakBgStyle = {
+    backgroundColor:
+      themeAppearance === AppThemeKey.dark
+        ? colors.transakBackgroundDark
+        : colors.transakBackgroundLight,
+  };
 
   const { url: uri, customOrderId, provider } = params;
 
@@ -252,6 +265,7 @@ const CheckoutWebView = () => {
         isFullscreen
         isInteractable={!Device.isAndroid()}
         keyboardAvoidingViewEnabled={false}
+        style={transakBgStyle}
       >
         <BottomSheetHeader
           endAccessory={
diff --git a/app/components/UI/Ramp/Aggregator/components/ErrorView.tsx b/app/components/UI/Ramp/Aggregator/components/ErrorView.tsx
index d4750508dc1..740adee21d2 100644
--- a/app/components/UI/Ramp/Aggregator/components/ErrorView.tsx
+++ b/app/components/UI/Ramp/Aggregator/components/ErrorView.tsx
@@ -28,7 +28,6 @@ const createStyles = (
       flex: options?.asScreen ? 1 : undefined,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: colors.background.default,
     },
     content: {
       width: '100%',
diff --git a/app/styles/common.ts b/app/styles/common.ts
index 13de042dbbe..7949c79a0a5 100644
--- a/app/styles/common.ts
+++ b/app/styles/common.ts
@@ -27,6 +27,11 @@ export const colors = {
   gettingStartedPageBackgroundColor: '#EAC2FF',
   gettingStartedTextColor: '#3D065F',
   gettingStartedPageBackgroundColorLightMode: '#FFF2EB',
+  // Transak's iframe renders these background colors — values are set by Transak
+  // and outside our control. Used to match the BottomSheet surface so the
+  // checkout feels seamless. Update only if Transak changes their theme colors.
+  transakBackgroundDark: '#1a1a1a',
+  transakBackgroundLight: '#ffffff',
 };
 
 export const onboardingCarouselColors: Record<