feat(checkout-widgets): Allow transparent overlays (#2725)

Author: keithbro-imx

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;
+};

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

packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx

@@ -18,6 +18,7 @@ type CoinSelectorProps = {
   optionsLoading?: boolean;
   children?: any;
   visible?: boolean;
+  drawerBackground: string | undefined;
 };
 
 const filterOptions = (filterBy: string, options: CoinSelectorOptionProps[]) => {
@@ -28,7 +29,7 @@ const filterOptions = (filterBy: string, options: CoinSelectorOptionProps[]) =>
 };
 
 export function CoinSelector({
-  heading, options, defaultTokenImage, optionsLoading, children, onCloseDrawer, visible,
+  heading, options, defaultTokenImage, optionsLoading, children, onCloseDrawer, visible, drawerBackground,
 }: CoinSelectorProps) {
   const { t } = useTranslation();
 
@@ -43,15 +44,21 @@ export function CoinSelector({
       return options;
     }
     return filterOptions(searchValue, options);
-  }, [options, searchValue, filterOptions]);
+  }, [options, searchValue]);
 
   const handleCloseDrawer = () => {
     setSearchValue('');
     onCloseDrawer?.();
   };
 
   return (
-    <Drawer headerBarTitle={heading} size="full" onCloseDrawer={handleCloseDrawer} visible={visible}>
+    <Drawer
+      headerBarTitle={heading}
+      size="full"
+      onCloseDrawer={handleCloseDrawer}
+      visible={visible}
+      bgOverlaySx={drawerBackground ? { background: drawerBackground } : undefined}
+    >
       <Drawer.Target>
         {children}
       </Drawer.Target>

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,7 +26,8 @@ interface SelectFormProps {
   screen: string;
   control: string;
   environment?: Environment;
-  theme?: WidgetTheme,
+  theme: WidgetTheme,
+  themeOverrides: ThemeOverrides,
 }
 
 export function SelectForm({
@@ -45,7 +46,8 @@ export function SelectForm({
   screen,
   control,
   environment = Environment.PRODUCTION,
-  theme = WidgetTheme.DARK,
+  theme,
+  themeOverrides,
 }: SelectFormProps) {
   const { track } = useAnalytics();
   const [coinSelectorOpen, setCoinSelectorOpen] = useState<boolean>(false);
@@ -87,6 +89,7 @@ export function SelectForm({
         optionsLoading={optionsLoading ?? false}
         visible={coinSelectorOpen}
         onCloseDrawer={() => setCoinSelectorOpen(false)}
+        drawerBackground={themeOverrides.drawerBackground}
       />
       <FormControlWrapper
         testId={`${testId}-select-control`}

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,
@@ -12,7 +12,6 @@ import { CoinSelectorOptionProps } from '../../CoinSelector/CoinSelectorOption';
 import { UserJourney } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 
 interface SelectInputProps {
-
   testId: string;
   options: CoinSelectorOptionProps[];
   selectTextAlign?: 'left' | 'right';
@@ -40,7 +39,8 @@ interface SelectInputProps {
   screen: string;
   control: string;
   environment?: Environment;
-  theme?: WidgetTheme;
+  theme: WidgetTheme;
+  themeOverrides: ThemeOverrides;
 }
 
 export function SelectInput({
@@ -72,6 +72,7 @@ export function SelectInput({
   control,
   environment,
   theme,
+  themeOverrides,
 }: SelectInputProps) {
   return (
     <Box sx={selectInputBoxStyle}>
@@ -92,6 +93,7 @@ export function SelectInput({
           screen={screen}
           environment={environment}
           theme={theme}
+          themeOverrides={themeOverrides}
         />
       </Box>
       <Box sx={inputStyle}>

packages/checkout/widgets-lib/src/components/Transactions/Transactions.tsx

@@ -11,6 +11,7 @@ import {
   WalletProviderRdns,
   ChainSlug,
   Checkout,
+  ThemeOverrides,
 } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
 import { JsonRpcProvider } from 'ethers';
@@ -60,6 +61,7 @@ import { WalletChangeEvent } from '../WalletDrawer/WalletDrawerEvents';
 type TransactionsProps = {
   defaultTokenImage: string;
   onBackButtonClick: () => void;
+  themeOverrides: ThemeOverrides;
 };
 
 const getTransactionsDetails = async (tokenBridge: TokenBridge, checkout: Checkout, recipient: string) => {
@@ -99,6 +101,7 @@ const getTransactionsDetails = async (tokenBridge: TokenBridge, checkout: Checko
 export function Transactions({
   defaultTokenImage,
   onBackButtonClick,
+  themeOverrides,
 }: TransactionsProps) {
   const {
     eventTargetState: { eventTarget },
@@ -448,6 +451,7 @@ export function Transactions({
             setShowWalletDrawer(show);
           }}
           onWalletChange={handleWalletChange}
+          drawerBackground={themeOverrides.drawerBackground}
         />
       </Box>
     </SimpleLayout>

packages/checkout/widgets-lib/src/components/WalletDrawer/ConnectWalletDrawer.tsx

@@ -46,6 +46,7 @@ type ConnectWalletDrawerProps = {
   }[];
   getShouldRequestWalletPermissions?: (providerInfo: EIP6963ProviderInfo) => boolean | undefined;
   shouldIdentifyUser?: boolean;
+  drawerBackground: string | undefined;
 };
 
 export function ConnectWalletDrawer({
@@ -61,6 +62,7 @@ export function ConnectWalletDrawer({
   disabledOptions = [],
   getShouldRequestWalletPermissions,
   shouldIdentifyUser = true,
+  drawerBackground,
 }: ConnectWalletDrawerProps) {
   const {
     providersState: { checkout, fromProvider, lockedToProvider },
@@ -222,6 +224,7 @@ export function ConnectWalletDrawer({
         }}
         onWalletChange={handleOnWalletChangeEvent}
         bottomSlot={bottomSlot}
+        drawerBackground={drawerBackground}
       />
       <UnableToConnectDrawer
         visible={showUnableToConnectDrawer}

packages/checkout/widgets-lib/src/components/WalletDrawer/DeliverToWalletDrawer.tsx

@@ -16,13 +16,15 @@ type DeliverToWalletDrawerProps = {
     provider: WrappedBrowserProvider,
     providerInfo: EIP6963ProviderInfo
   ) => void;
+  drawerBackground: string | undefined;
 };
 
 export function DeliverToWalletDrawer({
   visible,
   onClose,
   onConnect,
   walletOptions,
+  drawerBackground,
 }: DeliverToWalletDrawerProps) {
   const {
     providersState: { fromProviderInfo },
@@ -50,6 +52,7 @@ export function DeliverToWalletDrawer({
       providerType="to"
       walletOptions={walletOptions}
       onConnect={handleOnConnect}
+      drawerBackground={drawerBackground}
       getShouldRequestWalletPermissions={
         selectedSameFromWalletType
       }

packages/checkout/widgets-lib/src/components/WalletDrawer/PayWithWalletDrawer.tsx

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

packages/checkout/widgets-lib/src/components/WalletDrawer/WalletDrawer.tsx

@@ -35,7 +35,9 @@ interface WalletDrawerProps {
     label: string;
     rdns: string;
   }[];
+  drawerBackground: string | undefined;
 }
+
 export function WalletDrawer({
   testId,
   drawerText,
@@ -48,6 +50,7 @@ export function WalletDrawer({
   menuItemSize,
   bottomSlot,
   disabledOptions,
+  drawerBackground,
 }: WalletDrawerProps) {
   const { t } = useTranslation();
   const { isWalletConnectEnabled, openWalletConnectModal } = useWalletConnect();
@@ -105,6 +108,7 @@ export function WalletDrawer({
         setShowDrawer(false);
       }}
       visible={showDrawer}
+      bgOverlaySx={drawerBackground ? { background: drawerBackground } : undefined}
     >
       {showWalletSelectorTarget && (
         <Drawer.Target>