@imtbl/checkout-widgets 2.7.6-alpha.3 → 2.7.6-alpha.4

package/src/lib/withDefaultWidgetConfig.test.ts

@@ -12,16 +12,18 @@ import {
 
 describe('withDefaultWidgetConfig', () => {
   it('empty config returns defaults', () => {
-    expect(withDefaultWidgetConfigs({})).toEqual({
+    expect(withDefaultWidgetConfigs({} as any)).toEqual({
       theme: DEFAULT_THEME,
+      themeOverrides: {},
       environment: DEFAULT_ENV,
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
       isBridgeEnabled: DEFAULT_BRIDGE_ENABLED,
       isAddTokensEnabled: DEFAULT_ADD_TOKENS_ENABLED,
     });
-    expect(withDefaultWidgetConfigs(undefined)).toEqual({
+    expect(withDefaultWidgetConfigs(undefined as any)).toEqual({
       theme: DEFAULT_THEME,
+      themeOverrides: {},
       environment: DEFAULT_ENV,
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
@@ -34,9 +36,10 @@ describe('withDefaultWidgetConfig', () => {
     expect(
       withDefaultWidgetConfigs({
         environment: Environment.PRODUCTION,
-      }),
+      } as any),
     ).toEqual({
       theme: DEFAULT_THEME,
+      themeOverrides: {},
       environment: Environment.PRODUCTION,
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
@@ -46,9 +49,10 @@ describe('withDefaultWidgetConfig', () => {
     expect(
       withDefaultWidgetConfigs({
         isOnRampEnabled: false,
-      }),
+      } as any),
     ).toEqual({
       theme: DEFAULT_THEME,
+      themeOverrides: {},
       environment: DEFAULT_ENV,
       isOnRampEnabled: false,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
@@ -61,9 +65,10 @@ describe('withDefaultWidgetConfig', () => {
     expect(
       withDefaultWidgetConfigs({
         environment: Environment.PRODUCTION,
-      }),
+      } as any),
     ).toEqual({
       theme: DEFAULT_THEME,
+      themeOverrides: {},
       environment: Environment.PRODUCTION,
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
@@ -74,9 +79,10 @@ describe('withDefaultWidgetConfig', () => {
     expect(
       withDefaultWidgetConfigs({
         environment: Environment.SANDBOX,
-      }),
+      } as any),
     ).toEqual({
       theme: DEFAULT_THEME,
+      themeOverrides: {},
       environment: Environment.SANDBOX,
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
@@ -87,9 +93,10 @@ describe('withDefaultWidgetConfig', () => {
     expect(
       withDefaultWidgetConfigs({
         environment: 'unknown' as Environment,
-      }),
+      } as any),
     ).toEqual({
       theme: DEFAULT_THEME,
+      themeOverrides: {},
       environment: DEFAULT_ENV,
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
@@ -102,9 +109,10 @@ describe('withDefaultWidgetConfig', () => {
     expect(
       withDefaultWidgetConfigs({
         theme: WidgetTheme.DARK,
-      }),
+      } as any),
     ).toEqual({
       theme: WidgetTheme.DARK,
+      themeOverrides: {},
       environment: DEFAULT_ENV,
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
@@ -115,9 +123,10 @@ describe('withDefaultWidgetConfig', () => {
     expect(
       withDefaultWidgetConfigs({
         theme: WidgetTheme.LIGHT,
-      }),
+      } as any),
     ).toEqual({
       theme: WidgetTheme.LIGHT,
+      themeOverrides: {},
       environment: DEFAULT_ENV,
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,
@@ -128,9 +137,10 @@ describe('withDefaultWidgetConfig', () => {
     expect(
       withDefaultWidgetConfigs({
         theme: 'unknown' as Environment,
-      }),
+      } as any),
     ).toEqual({
       theme: DEFAULT_THEME,
+      themeOverrides: {},
       environment: DEFAULT_ENV,
       isOnRampEnabled: DEFAULT_ON_RAMP_ENABLED,
       isSwapEnabled: DEFAULT_SWAP_ENABLED,

package/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,

package/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,

package/src/widgets/add-tokens/views/AddTokens.tsx

@@ -817,6 +817,7 @@ export function AddTokens({
             onConnect={handleWalletConnected}
             insufficientBalance={insufficientBalance}
             showOnRampOption={shouldShowOnRampOption || !selectedToken}
+            drawerBackground={config.themeOverrides?.drawerBackground}
           />
           <RouteOptionsDrawer
             checkout={checkout}
@@ -835,6 +836,7 @@ export function AddTokens({
             walletOptions={walletOptions}
             onClose={handleDeliverToClose}
             onConnect={handleWalletConnected}
+            drawerBackground={config.themeOverrides?.drawerBackground}
           />
           <OnboardingDrawer environment={checkout?.config.environment!} />
         </Stack>

package/src/widgets/bridge/BridgeWidget.tsx

@@ -85,6 +85,7 @@ export default function BridgeWidget({
     isSwapEnabled,
     isBridgeEnabled,
     theme,
+    themeOverrides,
   } = config;
   const defaultTokenImage = getDefaultTokenImage(checkout.config.environment, theme);
   const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
@@ -203,7 +204,7 @@ export default function BridgeWidget({
       <BridgeContext.Provider value={bridgeReducerValues}>
         <CryptoFiatProvider environment={environment}>
           {viewState.view.type === BridgeWidgetViews.WALLET_NETWORK_SELECTION && (
-            <WalletNetworkSelectionView showBackButton={showBackButton} />
+            <WalletNetworkSelectionView showBackButton={showBackButton} themeOverrides={themeOverrides} />
           )}
           {viewState.view.type === BridgeWidgetViews.BRIDGE_FORM && (
             <Bridge
@@ -211,6 +212,7 @@ export default function BridgeWidget({
               tokenAddress={tokenAddress}
               defaultTokenImage={defaultTokenImage}
               theme={theme}
+              themeOverrides={themeOverrides}
             />
           )}
           {viewState.view.type === BridgeWidgetViews.BRIDGE_REVIEW && (
@@ -257,7 +259,11 @@ export default function BridgeWidget({
             />
           )}
           {viewState.view.type === BridgeWidgetViews.TRANSACTIONS && (
-            <Transactions onBackButtonClick={goBackToWalletNetworkSelector} defaultTokenImage={defaultTokenImage} />
+            <Transactions
+              onBackButtonClick={goBackToWalletNetworkSelector}
+              defaultTokenImage={defaultTokenImage}
+              themeOverrides={themeOverrides}
+            />
           )}
           {viewState.view.type === BridgeWidgetViews.CLAIM_WITHDRAWAL && (
             <ClaimWithdrawal transaction={viewState.view.transaction} />

package/src/widgets/bridge/components/BridgeForm.tsx

@@ -5,7 +5,7 @@ import {
   OptionKey,
 } from '@biom3/react';
 import {
-  GetBalanceResult, WidgetTheme,
+  GetBalanceResult, ThemeOverrides, WidgetTheme,
 } from '@imtbl/checkout-sdk';
 import { parseUnits } from 'ethers';
 import {
@@ -49,7 +49,8 @@ interface BridgeFormProps {
   isTokenBalancesLoading?: boolean;
   defaultTokenImage: string;
   environment?: Environment;
-  theme?: WidgetTheme;
+  theme: WidgetTheme;
+  themeOverrides: ThemeOverrides;
 }
 
 export function BridgeForm(props: BridgeFormProps) {
@@ -78,6 +79,7 @@ export function BridgeForm(props: BridgeFormProps) {
     defaultTokenImage,
     environment,
     theme,
+    themeOverrides,
   } = props;
 
   const { track } = useAnalytics();
@@ -389,6 +391,7 @@ export function BridgeForm(props: BridgeFormProps) {
               defaultTokenImage={defaultTokenImage}
               environment={environment}
               theme={theme}
+              themeOverrides={themeOverrides}
             />
             <TextInputForm
               testId="bridge-amount"

package/src/widgets/bridge/components/WalletAndNetworkSelector.tsx

@@ -12,7 +12,7 @@ import {
   useState,
 } from 'react';
 import {
-  ChainId, WalletProviderName, WalletProviderRdns, WrappedBrowserProvider,
+  ChainId, ThemeOverrides, WalletProviderName, WalletProviderRdns, WrappedBrowserProvider,
 } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
 import { BridgeWidgetViews } from '../../../context/view-context/BridgeViewContextTypes';
@@ -43,7 +43,7 @@ import { WalletChangeEvent } from '../../../components/WalletDrawer/WalletDrawer
 
 const testId = 'wallet-network-selector';
 
-export function WalletAndNetworkSelector() {
+export function WalletAndNetworkSelector({ themeOverrides }: { themeOverrides: ThemeOverrides }) {
   const { t } = useTranslation();
   const {
     bridgeState: { checkout, from, to },
@@ -475,6 +475,7 @@ export function WalletAndNetworkSelector() {
         setShowDrawer={setFromWalletDrawerOpen}
         walletOptions={fromWalletSelectorOptions}
         onWalletChange={handleFromWalletConnection}
+        drawerBackground={themeOverrides.drawerBackground}
       />
 
       {/* From selections have been made */}
@@ -521,6 +522,7 @@ export function WalletAndNetworkSelector() {
               showDrawer={toWalletDrawerOpen}
               setShowDrawer={setToWalletDrawerOpen}
               onWalletChange={handleToWalletSelection}
+              drawerBackground={themeOverrides.drawerBackground}
             />
           </Box>
         </Box>

package/src/widgets/bridge/views/Bridge.tsx

@@ -4,7 +4,7 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { TokenFilterTypes, WidgetTheme } from '@imtbl/checkout-sdk';
+import { ThemeOverrides, TokenFilterTypes, WidgetTheme } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
 import { UserJourney, useAnalytics } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { sendBridgeWidgetCloseEvent } from '../BridgeWidgetEvents';
@@ -24,6 +24,7 @@ export interface BridgeProps {
   tokenAddress?: string;
   defaultTokenImage: string;
   theme: WidgetTheme;
+  themeOverrides: ThemeOverrides;
 }
 
 export function Bridge({
@@ -31,6 +32,7 @@ export function Bridge({
   tokenAddress,
   defaultTokenImage,
   theme,
+  themeOverrides,
 }: BridgeProps) {
   const { t } = useTranslation();
   const { bridgeState, bridgeDispatch } = useContext(BridgeContext);
@@ -123,6 +125,7 @@ export function Bridge({
         defaultTokenImage={defaultTokenImage}
         environment={checkout?.config.environment}
         theme={theme}
+        themeOverrides={themeOverrides}
       />
     </SimpleLayout>
   );

package/src/widgets/bridge/views/WalletNetworkSelectionView.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect } from 'react';
 import { ButtCon } from '@biom3/react';
 import { useTranslation } from 'react-i18next';
-import { IMTBLWidgetEvents } from '@imtbl/checkout-sdk';
+import { IMTBLWidgetEvents, ThemeOverrides } from '@imtbl/checkout-sdk';
 import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { FooterLogo } from '../../../components/Footer/FooterLogo';
@@ -16,9 +16,11 @@ import { orchestrationEvents } from '../../../lib/orchestrationEvents';
 
 type WalletNetworkSelectionViewProps = {
   showBackButton?: boolean;
+  themeOverrides: ThemeOverrides;
 };
 export function WalletNetworkSelectionView({
   showBackButton,
+  themeOverrides,
 }: WalletNetworkSelectionViewProps) {
   const { t } = useTranslation();
   const { viewDispatch } = useContext(ViewContext);
@@ -68,7 +70,7 @@ export function WalletNetworkSelectionView({
       )}
       footer={<FooterLogo />}
     >
-      <WalletAndNetworkSelector />
+      <WalletAndNetworkSelector themeOverrides={themeOverrides} />
     </SimpleLayout>
   );
 }

package/src/widgets/connect/ConnectWidget.tsx

@@ -225,6 +225,7 @@ export default function ConnectWidget({
               checkNetwork={isCheckNetworkEnabled ?? true}
               showBackButton={showBackButton}
               onBackButtonClick={sendGoBackEventOverride}
+              themeOverrides={config.themeOverrides}
             />
           )}
           {view.type === ConnectWidgetViews.SWITCH_NETWORK && isZkEvmChainId(targetChain) && (

package/src/widgets/connect/components/WalletList.tsx

@@ -7,6 +7,7 @@ import {
   WrappedBrowserProvider,
   WalletProviderName,
   WalletProviderRdns,
+  ThemeOverrides,
 } from '@imtbl/checkout-sdk';
 import {
   useCallback,
@@ -58,6 +59,7 @@ export interface WalletListProps {
   allowlistWalletRdns?: string[];
   blocklistWalletRdns: string[];
   isCheckNetworkEnabled: boolean;
+  themeOverrides: ThemeOverrides;
 }
 
 // eslint-disable-next-line max-len
@@ -73,6 +75,7 @@ export function WalletList(props: WalletListProps) {
     targetChainId,
     allowedChains,
     isCheckNetworkEnabled,
+    themeOverrides,
     allowlistWalletRdns,
     blocklistWalletRdns,
   } = props;
@@ -443,6 +446,7 @@ export function WalletList(props: WalletListProps) {
           setShowWalletDrawer(show);
         }}
         onWalletChange={handleWalletChange}
+        drawerBackground={themeOverrides.drawerBackground}
       />
 
       <ChangedYourMindDrawer

package/src/widgets/connect/views/ConnectWallet.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect } from 'react';
 import { Body, Box, Heading } from '@biom3/react';
 import { useTranslation } from 'react-i18next';
-import { ChainId } from '@imtbl/checkout-sdk';
+import { ChainId, ThemeOverrides } from '@imtbl/checkout-sdk';
 import { FooterLogo } from '../../../components/Footer/FooterLogo';
 import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
@@ -18,6 +18,7 @@ export interface ConnectWalletProps {
   checkNetwork: boolean;
   showBackButton?: boolean;
   onBackButtonClick?: () => void;
+  themeOverrides: ThemeOverrides;
 }
 
 export function ConnectWallet({
@@ -29,6 +30,7 @@ export function ConnectWallet({
   checkNetwork,
   showBackButton,
   onBackButtonClick,
+  themeOverrides,
 }: ConnectWalletProps) {
   const { t } = useTranslation();
   const {
@@ -91,6 +93,7 @@ export function ConnectWallet({
           allowlistWalletRdns={allowlistWalletRdns}
           blocklistWalletRdns={blocklistWalletRdns}
           isCheckNetworkEnabled={checkNetwork}
+          themeOverrides={themeOverrides}
         />
       </Box>
     </SimpleLayout>

package/src/widgets/purchase/PurchaseWidget.tsx

@@ -191,6 +191,7 @@ export default function PurchaseWidget({
                 checkout={checkout}
                 environmentId={environmentId!}
                 showBackButton={showBackButton}
+                themeOverrides={config.themeOverrides}
                 onCloseButtonClick={() => sendPurchaseCloseEvent(eventTarget)}
                 onBackButtonClick={() => {
                   orchestrationEvents.sendRequestGoBackEvent(

package/src/widgets/purchase/components/PurchaseConnectWalletDrawer.tsx

@@ -37,6 +37,7 @@ type PurchaseConnectWalletDrawerProps = {
     rdns: string;
   }[];
   shouldIdentifyUser?: boolean;
+  drawerBackground: string | undefined;
 };
 
 export function PurchaseConnectWalletDrawer({
@@ -51,6 +52,7 @@ export function PurchaseConnectWalletDrawer({
   menuItemSize = 'small',
   disabledOptions = [],
   shouldIdentifyUser = true,
+  drawerBackground,
 }: PurchaseConnectWalletDrawerProps) {
   const {
     providersState: { checkout },
@@ -178,6 +180,7 @@ export function PurchaseConnectWalletDrawer({
         }}
         onWalletChange={handleOnWalletChangeEvent}
         bottomSlot={bottomSlot}
+        drawerBackground={drawerBackground}
       />
       <UnableToConnectDrawer
         visible={showUnableToConnectDrawer}

package/src/widgets/purchase/components/PurchaseDeliverToWalletDrawer.tsx

@@ -15,6 +15,7 @@ type PurchaseDeliverToWalletDrawerProps = {
     provider: BrowserProvider,
     providerInfo: EIP6963ProviderInfo
   ) => void;
+  drawerBackground: string | undefined;
 };
 
 export function PurchaseDeliverToWalletDrawer({
@@ -22,6 +23,7 @@ export function PurchaseDeliverToWalletDrawer({
   onClose,
   onConnect,
   walletOptions,
+  drawerBackground,
 }: PurchaseDeliverToWalletDrawerProps) {
   const handleOnConnect = (
     provider: BrowserProvider,
@@ -39,6 +41,7 @@ export function PurchaseDeliverToWalletDrawer({
       providerType="to"
       walletOptions={walletOptions}
       onConnect={handleOnConnect}
+      drawerBackground={drawerBackground}
     />
   );
 }

package/src/widgets/purchase/components/PurchasePayWithWalletDrawer.tsx

@@ -13,6 +13,7 @@ type PurchasePayWithWalletDrawerProps = {
   walletOptions: EIP6963ProviderDetail[];
   insufficientBalance?: boolean;
   showOnRampOption?: boolean;
+  drawerBackground: string | undefined;
 };
 
 export function PurchasePayWithWalletDrawer({
@@ -23,6 +24,7 @@ export function PurchasePayWithWalletDrawer({
   walletOptions,
   insufficientBalance,
   showOnRampOption = true,
+  drawerBackground,
 }: PurchasePayWithWalletDrawerProps) {
   const { t } = useTranslation();
   const { providersState: { fromProviderInfo } } = useProvidersContext();
@@ -79,6 +81,7 @@ export function PurchasePayWithWalletDrawer({
       bottomSlot={payWithCardItem}
       onConnect={handleOnConnect}
       shouldIdentifyUser={false}
+      drawerBackground={drawerBackground}
     />
   );
 }

package/src/widgets/purchase/views/Purchase.tsx

@@ -5,6 +5,7 @@ import {
 import {
   Checkout, WalletProviderRdns, EIP6963ProviderInfo, ChainId,
   WrappedBrowserProvider,
+  ThemeOverrides,
 } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';
 import { t } from 'i18next';
@@ -59,6 +60,7 @@ interface PurchaseProps {
   showBackButton?: boolean;
   onCloseButtonClick?: () => void;
   onBackButtonClick?: () => void;
+  themeOverrides: ThemeOverrides;
 }
 
 export function Purchase({
@@ -67,6 +69,7 @@ export function Purchase({
   onCloseButtonClick,
   showBackButton,
   onBackButtonClick,
+  themeOverrides,
 }: PurchaseProps) {
   const [showPayWithWalletDrawer, setShowPayWithWalletDrawer] = useState(false);
   const [showDeliverToWalletDrawer, setShowDeliverToWalletDrawer] = useState(false);
@@ -686,12 +689,14 @@ export function Purchase({
         onConnect={handleWalletConnected}
         insufficientBalance={insufficientBalance}
         showOnRampOption={shouldShowOnRampOption}
+        drawerBackground={themeOverrides.drawerBackground}
       />
       <PurchaseDeliverToWalletDrawer
         visible={showDeliverToWalletDrawer}
         walletOptions={walletOptions}
         onClose={handleDeliverToWalletClose}
         onConnect={() => undefined}
+        drawerBackground={themeOverrides.drawerBackground}
       />
       <RouteOptionsDrawer
         checkout={checkout}

package/src/widgets/swap/SwapWidget.tsx

@@ -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}

package/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,6 +78,7 @@ let quoteRequest: CancellablePromise<any>;
 export interface SwapFromProps {
   data?: SwapFormData;
   theme: WidgetTheme;
+  themeOverrides: ThemeOverrides;
   cancelAutoProceed: () => void;
   subTitle: string;
 }
@@ -89,7 +91,7 @@ class PriceImpactError extends Error {
 }
 
 export function SwapForm({
-  data, theme, cancelAutoProceed, subTitle,
+  data, theme, themeOverrides, cancelAutoProceed, subTitle,
 }: SwapFromProps) {
   const { t } = useTranslation();
   const {
@@ -1009,6 +1011,7 @@ export function SwapForm({
               screen="SwapCoins"
               environment={checkout?.config.environment}
               theme={theme}
+              themeOverrides={themeOverrides}
             />
           </Box>
 
@@ -1087,6 +1090,7 @@ export function SwapForm({
               screen="SwapCoins"
               environment={checkout?.config.environment}
               theme={theme}
+              themeOverrides={themeOverrides}
             />
           </Box>
         </Box>

package/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;
@@ -39,6 +40,7 @@ export interface SwapCoinsProps {
 
 export function SwapCoins({
   theme,
+  themeOverrides,
   cancelAutoProceed,
   fromAmount,
   toAmount,
@@ -125,6 +127,7 @@ export function SwapCoins({
             toTokenAddress,
           }}
           theme={theme}
+          themeOverrides={themeOverrides}
           subTitle={subTitle}
         />
         <NotEnoughImx

package/src/widgets/transfer/TransferForm.tsx

@@ -189,6 +189,8 @@ export function TransferForm({
               userJourney={UserJourney.TRANSFER}
               screen="TransferToken"
               control="Token"
+              theme={config.theme}
+              themeOverrides={config.themeOverrides}
             />
           </Stack>
           <Stack gap="base.spacing.x1">