Theme overrides

keithbro-imx · keithbro-imx · commit c767ab1f3e3a · 2025-09-30T15:34:53.000+10:00
diff --git a/packages/checkout/sdk/src/widgets/definitions/configurations/theme.ts b/packages/checkout/sdk/src/widgets/definitions/configurations/theme.ts
@@ -5,3 +5,7 @@ export enum WidgetTheme {
   LIGHT = 'light',
   DARK = 'dark',
 }
+
+export type ThemeOverrides = {
+  drawerBackground?: string;
+};
diff --git a/packages/checkout/sdk/src/widgets/definitions/configurations/widget.ts b/packages/checkout/sdk/src/widgets/definitions/configurations/widget.ts
@@ -1,4 +1,4 @@
-import { WidgetTheme } from './theme';
+import { ThemeOverrides, WidgetTheme } from './theme';
 
 /**
  * Widget Configuration represents the shared configuration options for the Commerce Widgets.
@@ -9,6 +9,7 @@ import { WidgetTheme } from './theme';
 export type WidgetConfiguration = {
   /** The theme of the Commerce Widget (default: "DARK") */
   theme?: WidgetTheme;
+  themeOverrides?: ThemeOverrides;
   language?: WidgetLanguage;
   walletConnect?: WalletConnectConfig;
 };
diff --git a/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx b/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx
@@ -18,7 +18,7 @@ type CoinSelectorProps = {
   optionsLoading?: boolean;
   children?: any;
   visible?: boolean;
-  transparentOverlay: boolean;
+  drawerBackground: string | undefined;
 };
 
 const filterOptions = (filterBy: string, options: CoinSelectorOptionProps[]) => {
@@ -29,7 +29,7 @@ const filterOptions = (filterBy: string, options: CoinSelectorOptionProps[]) =>
 };
 
 export function CoinSelector({
-  heading, options, defaultTokenImage, optionsLoading, children, onCloseDrawer, visible, transparentOverlay,
+  heading, options, defaultTokenImage, optionsLoading, children, onCloseDrawer, visible, drawerBackground,
 }: CoinSelectorProps) {
   const { t } = useTranslation();
 
@@ -57,7 +57,7 @@ export function CoinSelector({
       size="full"
       onCloseDrawer={handleCloseDrawer}
       visible={visible}
-      bgOverlaySx={transparentOverlay ? { backgroundColor: 'transparent' } : undefined}
+      bgOverlaySx={drawerBackground ? { background: drawerBackground } : undefined}
     >
       <Drawer.Target>
         {children}
diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.tsx
@@ -3,7 +3,7 @@ import {
 } from '@biom3/react';
 import { useCallback, useMemo, useState } from 'react';
 import { Environment } from '@imtbl/config';
-import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
 import { TokenImage } from '../../TokenImage/TokenImage';
 import { FormControlWrapper } from '../FormControlWrapper/FormControlWrapper';
 import { CoinSelector } from '../../CoinSelector/CoinSelector';
@@ -26,8 +26,8 @@ interface SelectFormProps {
   screen: string;
   control: string;
   environment?: Environment;
-  theme?: WidgetTheme,
-  transparentOverlay: boolean;
+  theme: WidgetTheme,
+  themeOverrides: ThemeOverrides,
 }
 
 export function SelectForm({
@@ -45,9 +45,9 @@ export function SelectForm({
   userJourney,
   screen,
   control,
-  transparentOverlay,
   environment = Environment.PRODUCTION,
-  theme = WidgetTheme.DARK,
+  theme,
+  themeOverrides,
 }: SelectFormProps) {
   const { track } = useAnalytics();
   const [coinSelectorOpen, setCoinSelectorOpen] = useState<boolean>(false);
@@ -89,7 +89,7 @@ export function SelectForm({
         optionsLoading={optionsLoading ?? false}
         visible={coinSelectorOpen}
         onCloseDrawer={() => setCoinSelectorOpen(false)}
-        transparentOverlay={transparentOverlay}
+        drawerBackground={themeOverrides.drawerBackground}
       />
       <FormControlWrapper
         testId={`${testId}-select-control`}
diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx
@@ -1,5 +1,5 @@
 import { Box, OptionKey } from '@biom3/react';
-import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';
 import {
   inputStyle,
@@ -38,9 +38,9 @@ interface SelectInputProps {
   userJourney: UserJourney;
   screen: string;
   control: string;
-  transparentOverlay: boolean;
   environment?: Environment;
-  theme?: WidgetTheme;
+  theme: WidgetTheme;
+  themeOverrides: ThemeOverrides;
 }
 
 export function SelectInput({
@@ -70,9 +70,9 @@ export function SelectInput({
   userJourney,
   screen,
   control,
-  transparentOverlay,
   environment,
   theme,
+  themeOverrides,
 }: SelectInputProps) {
   return (
     <Box sx={selectInputBoxStyle}>
@@ -93,7 +93,7 @@ export function SelectInput({
           screen={screen}
           environment={environment}
           theme={theme}
-          transparentOverlay={transparentOverlay}
+          themeOverrides={themeOverrides}
         />
       </Box>
       <Box sx={inputStyle}>
diff --git a/packages/checkout/widgets-lib/src/lib/withDefaultWidgetConfig.ts b/packages/checkout/widgets-lib/src/lib/withDefaultWidgetConfig.ts
@@ -1,5 +1,5 @@
 import { Environment } from '@imtbl/config';
-import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
 import {
   DEFAULT_ADD_TOKENS_ENABLED,
   DEFAULT_BRIDGE_ENABLED,
@@ -11,6 +11,7 @@ import {
 
 export type StrongCheckoutWidgetsConfig = {
   theme: WidgetTheme;
+  themeOverrides: ThemeOverrides;
   environment: Environment;
   isOnRampEnabled: boolean;
   isSwapEnabled: boolean;
@@ -38,9 +39,18 @@ function getValidBoolean(defaultValue: boolean, value?: string): boolean {
 }
 
 export const withDefaultWidgetConfigs = (
-  configs?: any,
+  configs: {
+    theme: WidgetTheme | undefined;
+    themeOverrides: ThemeOverrides | undefined;
+    environment: Environment;
+    isOnRampEnabled: boolean;
+    isSwapEnabled: boolean;
+    isBridgeEnabled: boolean;
+    isAddTokensEnabled?: boolean; // TODO: why is this optional?
+  },
 ): StrongCheckoutWidgetsConfig => ({
   theme: getValidTheme(configs?.theme),
+  themeOverrides: configs?.themeOverrides ?? {},
   environment: getValidEnvironment(configs?.environment),
   isOnRampEnabled: getValidBoolean(
     DEFAULT_ON_RAMP_ENABLED,
diff --git a/packages/checkout/widgets-lib/src/widgets/BaseWidgetRoot.ts b/packages/checkout/widgets-lib/src/widgets/BaseWidgetRoot.ts
@@ -191,6 +191,7 @@ export abstract class Base<T extends WidgetType> implements Widget<T> {
   protected strongConfig(): StrongCheckoutWidgetsConfig {
     return withDefaultWidgetConfigs({
       theme: this.properties.config?.theme,
+      themeOverrides: this.properties.config?.themeOverrides,
       environment: this.checkout.config.environment,
       isOnRampEnabled: this.checkout.config.isOnRampEnabled,
       isSwapEnabled: this.checkout.config.isSwapEnabled,
diff --git a/packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidgetRoot.tsx b/packages/checkout/widgets-lib/src/widgets/immutable-commerce/CommerceWidgetRoot.tsx
@@ -49,6 +49,8 @@ export class CommerceWidgetRoot extends Base<WidgetType.IMMUTABLE_COMMERCE> {
       else validatedConfig.theme = WidgetTheme.DARK;
     }
 
+    console.log({ validatedConfig });
+
     // TODO: validate configs for each widget
     return {
       config: validatedConfig,
@@ -304,6 +306,8 @@ export class CommerceWidgetRoot extends Base<WidgetType.IMMUTABLE_COMMERCE> {
 
     const { t } = i18n;
 
+    console.log({ strongConfig: this.strongConfig() });
+
     this.reactRoot.render(
       <CustomAnalyticsProvider checkout={this.checkout}>
         <ThemeProvider id="checkout-container" config={this.strongConfig()}>
diff --git a/packages/checkout/widgets-lib/src/widgets/swap/SwapWidget.tsx b/packages/checkout/widgets-lib/src/widgets/swap/SwapWidget.tsx
@@ -71,7 +71,7 @@ export default function SwapWidget({
   autoProceed,
   direction,
   showBackButton,
-  swapConfig: { customTitle, customSubTitle, transparentOverlay },
+  swapConfig: { customTitle, customSubTitle },
   walletProviderName,
 }: SwapWidgetInputs) {
   const { t } = useTranslation();
@@ -81,6 +81,7 @@ export default function SwapWidget({
 
   const {
     theme,
+    themeOverrides,
     isOnRampEnabled,
     isSwapEnabled,
     isBridgeEnabled,
@@ -254,6 +255,7 @@ export default function SwapWidget({
             {viewState.view.type === SwapWidgetViews.SWAP && (
             <SwapCoins
               theme={theme}
+              themeOverrides={themeOverrides}
               cancelAutoProceed={cancelAutoProceed}
               fromAmount={viewState.view.data?.fromAmount ?? fromAmount}
               toAmount={viewState.view.data?.toAmount ?? toAmount}
@@ -262,7 +264,6 @@ export default function SwapWidget({
               showBackButton={showBackButton}
               title={customTitle ?? t('views.SWAP.header.title')}
               subTitle={customSubTitle ?? t('views.SWAP.content.title')}
-              transparentOverlay={transparentOverlay ?? false}
             />
             )}
             {viewState.view.type === SwapWidgetViews.IN_PROGRESS && (
diff --git a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx
@@ -6,6 +6,7 @@ import {
   Box, ButtCon, Heading, Icon, OptionKey, Tooltip, Body,
 } from '@biom3/react';
 import {
+  ThemeOverrides,
   TokenInfo,
   WidgetTheme,
 } from '@imtbl/checkout-sdk';
@@ -77,9 +78,9 @@ let quoteRequest: CancellablePromise<any>;
 export interface SwapFromProps {
   data?: SwapFormData;
   theme: WidgetTheme;
+  themeOverrides: ThemeOverrides;
   cancelAutoProceed: () => void;
   subTitle: string;
-  transparentOverlay: boolean;
 }
 
 class PriceImpactError extends Error {
@@ -90,7 +91,7 @@ class PriceImpactError extends Error {
 }
 
 export function SwapForm({
-  data, theme, cancelAutoProceed, subTitle, transparentOverlay,
+  data, theme, themeOverrides, cancelAutoProceed, subTitle,
 }: SwapFromProps) {
   const { t } = useTranslation();
   const {
@@ -1010,7 +1011,7 @@ export function SwapForm({
               screen="SwapCoins"
               environment={checkout?.config.environment}
               theme={theme}
-              transparentOverlay={transparentOverlay}
+              themeOverrides={themeOverrides}
             />
           </Box>
 
@@ -1089,7 +1090,7 @@ export function SwapForm({
               screen="SwapCoins"
               environment={checkout?.config.environment}
               theme={theme}
-              transparentOverlay={transparentOverlay}
+              themeOverrides={themeOverrides}
             />
           </Box>
         </Box>
diff --git a/packages/checkout/widgets-lib/src/widgets/swap/views/SwapCoins.tsx b/packages/checkout/widgets-lib/src/widgets/swap/views/SwapCoins.tsx
@@ -4,7 +4,7 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { IMTBLWidgetEvents, WidgetTheme } from '@imtbl/checkout-sdk';
+import { IMTBLWidgetEvents, ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
 import { Environment } from '@imtbl/config';
 import { ConnectLoaderContext } from '../../../context/connect-loader-context/ConnectLoaderContext';
@@ -26,6 +26,7 @@ import { orchestrationEvents } from '../../../lib/orchestrationEvents';
 
 export interface SwapCoinsProps {
   theme: WidgetTheme;
+  themeOverrides: ThemeOverrides;
   cancelAutoProceed: () => void;
   fromAmount?: string;
   toAmount?: string;
@@ -34,11 +35,11 @@ export interface SwapCoinsProps {
   showBackButton?: boolean;
   title: string;
   subTitle: string;
-  transparentOverlay: boolean;
 }
 
 export function SwapCoins({
   theme,
+  themeOverrides,
   cancelAutoProceed,
   fromAmount,
   toAmount,
@@ -47,7 +48,6 @@ export function SwapCoins({
   showBackButton,
   title,
   subTitle,
-  transparentOverlay,
 }: SwapCoinsProps) {
   const { t } = useTranslation();
   const { viewDispatch } = useContext(ViewContext);
@@ -125,8 +125,8 @@ export function SwapCoins({
             toTokenAddress,
           }}
           theme={theme}
+          themeOverrides={themeOverrides}
           subTitle={subTitle}
-          transparentOverlay={transparentOverlay}
         />
         <NotEnoughImx
           environment={checkout?.config.environment ?? Environment.PRODUCTION}
diff --git a/packages/checkout/widgets-lib/src/widgets/transfer/TransferForm.tsx b/packages/checkout/widgets-lib/src/widgets/transfer/TransferForm.tsx
@@ -31,7 +31,6 @@ export function TransferForm({
   showBackButton,
   showHeader,
   title,
-  transparentOverlay,
 }: {
   config: StrongCheckoutWidgetsConfig;
   viewState: TransferFormState;
@@ -40,7 +39,6 @@ export function TransferForm({
   showBackButton: boolean | undefined;
   showHeader: boolean;
   title: string;
-  transparentOverlay: boolean;
 }) {
   const { t } = useTranslation();
   const { track } = useAnalytics();
@@ -191,7 +189,8 @@ export function TransferForm({
               userJourney={UserJourney.TRANSFER}
               screen="TransferToken"
               control="Token"
-              transparentOverlay={transparentOverlay}
+              theme={config.theme}
+              themeOverrides={config.themeOverrides}
             />
           </Stack>
           <Stack gap="base.spacing.x1">
diff --git a/packages/checkout/widgets-lib/src/widgets/transfer/TransferWidget.tsx b/packages/checkout/widgets-lib/src/widgets/transfer/TransferWidget.tsx
@@ -207,7 +207,6 @@ function TransferWidgetInner(props: TransferWidgetInputs) {
           showBackButton={props.showBackButton}
           showHeader={props.transferConfig.showHeader ?? true}
           title={props.transferConfig.customTitle ?? t('views.TRANSFER.header.title')}
-          transparentOverlay={props.transferConfig.transparentOverlay ?? false}
         />
       );
     case 'AWAITING_APPROVAL':
diff --git a/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx b/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx
@@ -286,6 +286,9 @@ function CheckoutUI() {
       provider: browserProvider,
       config: {
         theme,
+        themeOverrides: {
+          drawerBackground: 'transparent',
+        },
         language,
         // SWAP: {},
         TRANSFER: {

Original file line number	Diff line number	Diff line change
`@@ -5,3 +5,7 @@ export enum WidgetTheme {`
`5`	`5`	`LIGHT = 'light',`
`6`	`6`	`DARK = 'dark',`
`7`	`7`	`}`
	`8`	`+`
	`9`	`+export type ThemeOverrides = {`
	`10`	`+ drawerBackground?: string;`
	`11`	`+};`