Skip to content

fix(ramps): fix Transak checkout background color mismatch — native flow (TMCU-1087) #33310

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
georgewrmarshall wants to merge 6 commits into from
+42 −25
Closed

fix(ramps): fix Transak checkout background color mismatch — native flow (TMCU-1087) #33310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
39922f2
fix(ramps): align Transak checkout WebView with pure-black BottomShee…
cursoragent Jul 15, 2026
abb86f3
fix(ramps): match Transak WebView background to theme colors (TMCU-1087)
georgewrmarshall Jul 15, 2026
ae524d9
revert: remove unrelated ramp utils/hooks changes
georgewrmarshall Jul 15, 2026
ee7acd9
fix(ramps): remove ScreenLayout wrapper from error state in native Ch…
georgewrmarshall Jul 16, 2026
f256f7d
fix(ramps): remove hardcoded background from ErrorView
georgewrmarshall Jul 16, 2026
21e559a
chore(ramps): add comments explaining Transak color overrides
georgewrmarshall Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion app/components/UI/Ramp/Aggregator/components/ErrorView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ const createStyles = (
flex: options?.asScreen ? 1 : undefined,
justifyContent: 'center',

@georgewrmarshall georgewrmarshall Jul 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Every call site renders ErrorView inside a container that already owns the surface color — either a BottomSheet or a ScreenLayout. Having ErrorView also paint a background caused a visual conflict in pure-black mode where the container surface (bg-alternative) differed from colors.background.default. Making the component transparent keeps the responsibility with the container.

Before / After

ImageImage

alignItems: 'center',
backgroundColor: colors.background.default,
},
content: {
width: '100%',
Expand Down
13 changes: 9 additions & 4 deletions app/components/UI/Ramp/Views/Checkout/Checkout.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Comment thread
cursor[bot] marked this conversation as resolved.

@georgewrmarshall georgewrmarshall Jul 16, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both the BottomSheet (twClassName) and the WebView (style.backgroundColor) need the same color for different reasons: twClassName sets the container surface so the native chrome matches the iframe, while the WebView background prevents a momentary flash of white or transparent content before Transak's page finishes loading. Centralising both in colors.transak* ensures they always agree.

},
});
};

export default styleSheet;
48 changes: 28 additions & 20 deletions app/components/UI/Ramp/Views/Checkout/Checkout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ import {
} from '../../headless/headlessEntryNavigation';
import { useStyles } from '../../../../hooks/useStyles';
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';
Expand Down Expand Up @@ -99,6 +102,14 @@ const Checkout = () => {
const navigation = useNavigation();
const params = useParams<CheckoutParams>();
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 transakBgClassName =
themeAppearance === AppThemeKey.dark
? `bg-[${colors.transakBackgroundDark}]`
: `bg-[${colors.transakBackgroundLight}]`;
const { addOrder, addPrecreatedOrder, getOrderFromCallback } =
useRampsOrders();
const { trackEvent, createEventBuilder } = useAnalytics();
Expand Down Expand Up @@ -663,26 +674,22 @@ const Checkout = () => {
keyboardAvoidingViewEnabled={false}
>
{sharedHeader}
<ScreenLayout>
<ScreenLayout.Body>
<ErrorView
description={error}
ctaOnPress={() => {
setKey((prevKey) => prevKey + 1);
setError('');
isRedirectionHandledRef.current = false;
lastLoadCompleteUrlRef.current = null;
loadUrlErrorsRef.current.clear();
loadStartTimeRef.current = null;
closeSourceRef.current = null;
urlHistoryRef.current = { current: null, previous: null };
stepIndexRef.current = 0;
previousNavStateUrlRef.current = null;
}}
location="Provider Webview"
/>
</ScreenLayout.Body>
</ScreenLayout>
<ErrorView
description={error}
ctaOnPress={() => {
setKey((prevKey) => prevKey + 1);
setError('');
isRedirectionHandledRef.current = false;
lastLoadCompleteUrlRef.current = null;
loadUrlErrorsRef.current.clear();

@georgewrmarshall georgewrmarshall Jul 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ScreenLayout seems more appropriate for pages and set backgroundColor: colors.background.default on its container, which overrode the BottomSheet's surface color and made the error state appear on the wrong background in pure-black mode. Rendering ErrorView directly inside BottomSheet lets the sheet's own surface show through correctly.

Before / After

ImageImage

loadStartTimeRef.current = null;
closeSourceRef.current = null;
urlHistoryRef.current = { current: null, previous: null };
stepIndexRef.current = 0;
previousNavStateUrlRef.current = null;
}}
location="Provider Webview"
/>
</BottomSheet>
);
}
Expand All @@ -695,6 +702,7 @@ const Checkout = () => {
isFullscreen
isInteractable={!Device.isAndroid()}
keyboardAvoidingViewEnabled={false}
twClassName={transakBgClassName}
Comment thread
cursor[bot] marked this conversation as resolved.
>

@georgewrmarshall georgewrmarshall Jul 16, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only the WebView BottomSheet gets the Transak background override — the error state intentionally keeps the default design-system surface (bg-alternative in pure-black, bg-default otherwise). Applying it to the error state would make MetaMask's own error UI appear on a non-standard background with no benefit.

{sharedHeader}
<WebView
Expand Down
5 changes: 5 additions & 0 deletions app/styles/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',

@georgewrmarshall georgewrmarshall Jul 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Admittedly I used the eye droper to get the dark color but it seems to match perfectly 😅

Light / Dark

ImageImage

};

export const onboardingCarouselColors: Record<
Expand Down
Loading