@imtbl/checkout-widgets 2.0.0-alpha.9 → 2.0.0

package/dist/browser/index.js

@@ -1 +1 @@
-export { e1 as WidgetsFactory } from './index-Bizu61HY.js';
+export { dW as WidgetsFactory } from './index-Skcajiao.js';

package/dist/browser/{index.umd-oUBivosK.js → index.umd-C0PZl9Xk.js}

@@ -1,4 +1,4 @@
-import { B as getDefaultExportFromCjs } from './index-Bizu61HY.js';
+import { x as getDefaultExportFromCjs } from './index-Skcajiao.js';
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {

package/dist/browser/{useInterval-D7lTeYwU.js → useInterval-D2CM0YwW.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, dw as useBrowserLayoutEffect } from './index-Bizu61HY.js';
+import { r as reactExports, dp as useBrowserLayoutEffect } from './index-Skcajiao.js';
 
 // Inspired by https://usehooks-ts.com/react-hook/use-interval
 function useInterval(callback, delay) {

package/dist/types/widgets/purchase/components/PurchaseRouteOptionsDrawer/RouteOptions.d.ts

@@ -8,6 +8,7 @@ export interface OptionsProps {
     onCardClick: (type: FiatOptionType) => void;
     onRouteClick: (route: RouteData, index: number) => void;
     onDirectCryptoPayClick: (route: DirectCryptoPayData, index: number) => void;
+    onChangeWalletClick: () => void;
     routes?: RouteData[];
     size?: MenuItemSize;
     showOnrampOption?: boolean;
@@ -17,4 +18,4 @@ export interface OptionsProps {
     selectedRouteType: SquidRouteOptionType | DirectCryptoPayOptionType | undefined;
     directCryptoPayRoutes?: DirectCryptoPayData[];
 }
-export declare function RouteOptions({ checkout, routes, chains, onCardClick, onRouteClick, onDirectCryptoPayClick, size, showOnrampOption, showDirectCryptoPayOption, insufficientBalance, selectedIndex, selectedRouteType, directCryptoPayRoutes, }: OptionsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function RouteOptions({ checkout, routes, chains, onCardClick, onRouteClick, onDirectCryptoPayClick, onChangeWalletClick, size, showOnrampOption, showDirectCryptoPayOption, insufficientBalance, selectedIndex, selectedRouteType, directCryptoPayRoutes, }: OptionsProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/purchase/components/PurchaseRouteOptionsDrawer/RouteOptionsDrawer.d.ts

@@ -10,6 +10,7 @@ type OptionsDrawerProps = {
     onRouteClick: (route: RouteData) => void;
     onCardClick: (type: FiatOptionType) => void;
     onDirectCryptoPayClick: (route: DirectCryptoPayData) => void;
+    onChangeWalletClick: () => void;
     showOnrampOption?: boolean;
     showDirectCryptoPayOption?: boolean;
     showSwapOption?: boolean;
@@ -17,5 +18,5 @@ type OptionsDrawerProps = {
     insufficientBalance?: boolean;
     directCryptoPayRoutes?: DirectCryptoPayData[];
 };
-export declare function RouteOptionsDrawer({ checkout, routes, chains, visible, onClose, onRouteClick, onCardClick, onDirectCryptoPayClick, showOnrampOption, showDirectCryptoPayOption, showSwapOption, showBridgeOption, insufficientBalance, directCryptoPayRoutes, }: OptionsDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function RouteOptionsDrawer({ checkout, routes, chains, visible, onClose, onRouteClick, onCardClick, onDirectCryptoPayClick, onChangeWalletClick, showOnrampOption, showDirectCryptoPayOption, showSwapOption, showBridgeOption, insufficientBalance, directCryptoPayRoutes, }: OptionsDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/widgets/swap/GeoblockLoader.d.ts

@@ -2,7 +2,7 @@ import { Checkout } from '@imtbl/checkout-sdk';
 type GeoblockLoaderParams = {
     widget: React.ReactNode;
     serviceUnavailableView: React.ReactNode;
-    checkout: Checkout;
+    checkout?: Checkout;
 };
 export declare function GeoblockLoader({ widget, serviceUnavailableView, checkout, }: GeoblockLoaderParams): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/widgets/swap/SwapWidget.d.ts

@@ -3,4 +3,4 @@ import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
 export type SwapWidgetInputs = SwapWidgetParams & {
     config: StrongCheckoutWidgetsConfig;
 };
-export default function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, autoProceed, direction, showBackButton, }: SwapWidgetInputs): import("@emotion/react/jsx-runtime").JSX.Element;
+export default function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, autoProceed, direction, showBackButton, walletProviderName, }: SwapWidgetInputs): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/swap/SwapWidgetRoot.d.ts

@@ -4,7 +4,5 @@ export declare class Swap extends Base<WidgetType.SWAP> {
     protected eventTopic: IMTBLWidgetEvents;
     protected getValidatedProperties({ config }: WidgetProperties<WidgetType.SWAP>): WidgetProperties<WidgetType.SWAP>;
     protected getValidatedParameters(params: SwapWidgetParams): SwapWidgetParams;
-    private isNotPassport;
-    private topUpOptions;
     protected render(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imtbl/checkout-widgets",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0",
   "browserslist": {
     "production": [
       ">0.2%",
@@ -17,12 +17,13 @@
     "@0xsquid/sdk": "^2.8.25",
     "@biom3/design-tokens": "^0.4.5",
     "@biom3/react": "^0.29.4",
-    "@imtbl/bridge-sdk": "2.0.0-alpha.9",
-    "@imtbl/checkout-sdk": "2.0.0-alpha.9",
-    "@imtbl/config": "2.0.0-alpha.9",
-    "@imtbl/cryptofiat": "2.0.0-alpha.9",
-    "@imtbl/dex-sdk": "2.0.0-alpha.9",
-    "@imtbl/passport": "2.0.0-alpha.9",
+    "@emotion/react": "^11.11.3",
+    "@imtbl/bridge-sdk": "2.0.0",
+    "@imtbl/checkout-sdk": "2.0.0",
+    "@imtbl/config": "2.0.0",
+    "@imtbl/cryptofiat": "2.0.0",
+    "@imtbl/dex-sdk": "2.0.0",
+    "@imtbl/passport": "2.0.0",
     "@imtbl/react-analytics": "0.3.2-alpha",
     "@rive-app/react-canvas-lite": "^4.9.0",
     "@walletconnect/ethereum-provider": "^2.11.1",
@@ -49,7 +50,6 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",
-    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@segment/analytics-next": "^1.53.2",
     "@svgr/webpack": "^8.0.1",
@@ -63,7 +63,6 @@
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^8.3.4",
-    "esbuild-plugins-node-modules-polyfill": "^1.6.7",
     "eslint": "^8.40.0",
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
@@ -71,10 +70,9 @@
     "rimraf": "^6.0.1",
     "rollup": "^4.22.4",
     "rollup-plugin-polyfill-node": "^0.13.0",
-    "terser": "^5.34.1",
     "ts-jest": "^29.1.0",
-    "tsup": "8.3.0",
     "typescript": "^5.6.2",
+    "unplugin-swc": "^1.5.1",
     "web-vitals": "^2.1.4"
   },
   "exports": {
@@ -101,15 +99,16 @@
   "type": "module",
   "types": "./dist/types/index.d.ts",
   "scripts": {
-    "build": "rollup --config rollup.config.js && pnpm typegen",
-    "transpile": "tsup src/index.ts --config ./tsup.config.js",
+    "build": "NODE_ENV=production rollup --config rollup.config.js && pnpm typegen",
+    "transpile": "rollup --config rollup.config.js",
     "typegen": "tsc --customConditions default --emitDeclarationOnly --outDir dist/types",
+    "pack:root": "pnpm pack --pack-destination $(dirname $(pnpm root -w))",
     "build:local": "pnpm build && mkdir -p ../widgets-sample-app/public/lib/js && cp dist/browser/*.js ../widgets-sample-app/public/lib/js/",
     "lint": "eslint ./src --ext .ts,.jsx,.tsx --max-warnings=0",
     "lint:fix": "eslint ./src --ext .ts,.jsx,.tsx --max-warnings=0 --fix",
     "prepare:examplewidgets": "pnpm --filter @examples/commerce-widget-nextjs exec mkdir -p tests/utils/local-widgets-js/ && cp ./dist/browser/*.js $(pnpm --filter @examples/commerce-widget-nextjs exec pwd)/tests/utils/local-widgets-js/",
     "prepare:testwidgets": "pnpm --filter @tests/checkout-widgets-nextjs exec mkdir -p tests/utils/local-widgets-js/ && cp ./dist/browser/*.js $(pnpm --filter @tests/checkout-widgets-nextjs exec pwd)/tests/utils/local-widgets-js/",
-    "start": "NODE_ENV=development tsup --config ./tsup.config.js --watch",
+    "start": "NODE_ENV=development rollup --config rollup.config.js --watch",
     "test": "jest test --passWithNoTests",
     "test:watch": "jest test --passWithNoTests --watch",
     "typecheck": "tsc --customConditions default --customConditions \"default\" --noEmit"

package/rollup.config.js

@@ -1,29 +1,46 @@
-// @ts-check
 import typescript from '@rollup/plugin-typescript';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import json from '@rollup/plugin-json';
 import replace from '@rollup/plugin-replace';
 import nodePolyfills from 'rollup-plugin-polyfill-node';
-import terser from '@rollup/plugin-terser';
+import swc from 'unplugin-swc'
 
 const PRODUCTION = 'production';
 
+const isProduction = process.env.NODE_ENV === PRODUCTION
+
+const defaultPlugins = [
+  json(),
+  replace({
+    preventAssignment: true,
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || PRODUCTION),
+  }),
+  isProduction ? typescript({customConditions: ["default"], declaration: false, outDir: 'dist/browser'}) 
+    : swc.rollup({ jsc: { 
+      transform: { react: { development: true, runtime: 'automatic' }},
+    } }),
+]
+
+const productionPlugins = [
+  resolve({
+    browser: true,
+    dedupe: ['react', 'react-dom'],
+    exportConditions: ['default']
+  }),
+  nodePolyfills(),
+  commonjs(),
+
+]
+
 const getPlugins = () => {
+  if (process.env.NODE_ENV !== PRODUCTION) {
+    return defaultPlugins;
+  }
+
   return [
-    json(),
-    replace({
-      preventAssignment: true,
-      'process.env.NODE_ENV': PRODUCTION,
-    }),
-    typescript({customConditions: ["default"], declaration: false, outDir: 'dist/browser'}),
-    resolve({
-      browser: true,
-      dedupe: ['react', 'react-dom'],
-      exportConditions: ['default']
-    }),
-    nodePolyfills(),
-    commonjs(),
+    ...defaultPlugins,
+    ...productionPlugins
   ];
 }
 
@@ -36,22 +53,24 @@ export default [
     output: {
       dir: 'dist/browser',
       format: 'es',
+      inlineDynamicImports: !isProduction
     },
     plugins: [
       ...getPlugins(),
     ]
   },
-  {
-    input: 'src/index.ts',
-    output: {
-      file: 'dist/browser/index.cdn.js',
-      format: 'umd',
-      name: 'ImmutableCheckoutWidgets',
-      inlineDynamicImports: true
+  ...(process.env.NODE_ENV === PRODUCTION ? [
+    {
+      input: 'src/index.ts',
+      output: {
+        file: 'dist/browser/index.cdn.js',
+        format: 'umd',
+        name: 'ImmutableCheckoutWidgets',
+        inlineDynamicImports: true
     },
     context: 'window',
     plugins: [
       ...getPlugins(),
     ]
-  }
+  }] : []),
 ]

package/src/components/CoinSelector/CoinSelector.tsx

@@ -3,8 +3,10 @@ import {
   Drawer,
   Box,
   MenuItem,
+  TextInput,
 } from '@biom3/react';
 import { useTranslation } from 'react-i18next';
+import { useMemo, useState } from 'react';
 import { CoinSelectorOption, CoinSelectorOptionProps } from './CoinSelectorOption';
 import { selectOptionsContainerStyles, selectOptionsLoadingIconStyles } from './CoinSelectorStyles';
 
@@ -18,12 +20,38 @@ type CoinSelectorProps = {
   visible?: boolean;
 };
 
+const filterOptions = (filterBy: string, options: CoinSelectorOptionProps[]) => {
+  const filterByLower = filterBy.toLowerCase();
+  return options.filter((option) => option.name.toLowerCase().includes(filterByLower)
+      || option.symbol.toLowerCase().includes(filterByLower)
+      || option.id.toLowerCase().endsWith(filterByLower));
+};
+
 export function CoinSelector({
   heading, options, defaultTokenImage, optionsLoading, children, onCloseDrawer, visible,
 }: CoinSelectorProps) {
   const { t } = useTranslation();
+
+  const [searchValue, setSearchValue] = useState<string>('');
+
+  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(event.target.value);
+  };
+
+  const filteredOptions = useMemo(() => {
+    if (!searchValue) {
+      return options;
+    }
+    return filterOptions(searchValue, options);
+  }, [options, searchValue, filterOptions]);
+
+  const handleCloseDrawer = () => {
+    setSearchValue('');
+    onCloseDrawer?.();
+  };
+
   return (
-    <Drawer headerBarTitle={heading} size="full" onCloseDrawer={onCloseDrawer} visible={visible}>
+    <Drawer headerBarTitle={heading} size="full" onCloseDrawer={handleCloseDrawer} visible={visible}>
       <Drawer.Target>
         {children}
       </Drawer.Target>
@@ -41,21 +69,40 @@ export function CoinSelector({
               {t('drawers.coinSelector.noCoins')}
             </Body>
           )}
-          {!optionsLoading && options.map(({
-            onClick, icon, name, symbol, balance, id, testId,
-          }) => (
-            <CoinSelectorOption
-              id={id}
-              testId={testId}
-              key={`${symbol}-${name}`}
-              onClick={onClick}
-              icon={icon}
-              name={name}
-              symbol={symbol}
-              balance={balance}
-              defaultTokenImage={defaultTokenImage}
-            />
-          ))}
+          {/* Add a search box when !optionsLoading */}
+          {!optionsLoading ? (
+            <>
+              <TextInput
+                sx={{ marginBottom: 'base.spacing.x4', minWidth: '100%' }}
+                testId="search-text"
+                onChange={(event) => handleOnChange(event)}
+                sizeVariant="large"
+                value={searchValue}
+                inputMode="search"
+                placeholder="name/symbol/contract address"
+                onClearValue={() => setSearchValue('')}
+                hideClearValueButton={false}
+                autoFocus
+              >
+                <TextInput.Icon icon="Search" />
+              </TextInput>
+              {filteredOptions.map(({
+                onClick, icon, name, symbol, balance, id, testId,
+              }) => (
+                <CoinSelectorOption
+                  id={id}
+                  testId={testId}
+                  key={`${symbol}-${name}`}
+                  onClick={onClick}
+                  icon={icon}
+                  name={name}
+                  symbol={symbol}
+                  balance={balance}
+                  defaultTokenImage={defaultTokenImage}
+                />
+              ))}
+            </>
+          ) : null}
         </Box>
       </Drawer.Content>
     </Drawer>

package/src/lib/metrics.ts

@@ -10,9 +10,10 @@ export const withMetrics = <T>(
     return fn(flow);
   } catch (error) {
     if (error instanceof Error) {
-      trackError('commerce', flowName, error);
+      trackError('commerce', flowName, error, { flowId: flow.details.flowId });
+    } else {
+      flow.addEvent('errored');
     }
-    flow.addEvent('errored');
     throw error;
   } finally {
     flow.addEvent('End');
@@ -33,7 +34,7 @@ export const withMetricsAsync = async <T>(
     return await fn(flow);
   } catch (error:any) {
     if (error instanceof Error) {
-      trackError('commerce', flowName, error);
+      trackError('commerce', flowName, error, { flowId: flow.details.flowId });
     }
     if (errorType && errorType(error)) {
       flow.addEvent(`errored_${errorType(error)}`);

package/src/locales/en.json

@@ -909,7 +909,7 @@
       "drawer": {
         "options": {
           "heading": "Pay from",
-          "moreOptionsDividerText": "More ways to Pay",
+          "moreOptionsDividerText": "Other ways to Pay",
           "loadingText1": "Finding the best value",
           "loadingText2": "across all chains",
           "noRoutes": {
@@ -921,6 +921,7 @@
             "caption": "Swap tokens on this network.",
             "disabledCaption": "Currently not available."
           },
+          "changeWallet": "Choose another wallet",
           "debit": {
             "heading": "Debit Card",
             "caption": "",

package/src/locales/ja.json

@@ -892,7 +892,7 @@
       "drawer": {
         "options": {
           "heading": "支払い元",
-          "moreOptionsDividerText": "支払い方法の追加",
+          "moreOptionsDividerText": "その他の支払い方法",
           "loadingText1": "最適な価値を検索中",
           "loadingText2": "すべてのチェーンを横断",
           "noRoutes": {
@@ -904,6 +904,7 @@
             "caption": "このネットワークでトークンを交換します。",
             "disabledCaption": "現在利用できません。"
           },
+          "changeWallet": "別のウォレットを選択",
           "debit": {
             "heading": "デビットカード",
             "caption": "",

package/src/locales/ko.json

@@ -901,6 +901,7 @@
             "caption": "이 네트워크에서 토큰을 교환합니다.",
             "disabledCaption": "현재 이용할 수 없습니다."
           },
+          "changeWallet": "다른 지갑 선택",
           "debit": {
             "heading": "직불 카드",
             "caption": "",

package/src/locales/zh.json

@@ -889,7 +889,7 @@
       "drawer": {
         "options": {
           "heading": "支付来源",
-          "moreOptionsDividerText": "更多支付方式",
+          "moreOptionsDividerText": "其他支付方式",
           "loadingText1": "寻找最佳价值",
           "loadingText2": "跨所有链",
           "noRoutes": {
@@ -901,6 +901,7 @@
             "caption": "在此网络上交换代币。",
             "disabledCaption": "当前不可用。"
           },
+          "changeWallet": "选择另一个钱包",
           "debit": {
             "heading": "借记卡",
             "caption": "",

package/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/FiatOption.tsx

@@ -56,7 +56,6 @@ export function FiatOption<RC extends ReactElement | undefined = undefined>({
           }`,
         )}
       </MenuItem.Caption>
-      {!disabled && <MenuItem.IntentIcon />}
     </MenuItem>
   );
 }

package/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/RouteOptions.tsx

@@ -25,6 +25,7 @@ export interface OptionsProps {
   onCardClick: (type: FiatOptionType) => void;
   onRouteClick: (route: RouteData, index: number) => void;
   onDirectCryptoPayClick: (route: DirectCryptoPayData, index: number) => void;
+  onChangeWalletClick: () => void;
   routes?: RouteData[];
   size?: MenuItemSize;
   showOnrampOption?: boolean;
@@ -42,6 +43,7 @@ export function RouteOptions({
   onCardClick,
   onRouteClick,
   onDirectCryptoPayClick,
+  onChangeWalletClick,
   size,
   showOnrampOption,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -137,11 +139,26 @@ export function RouteOptions({
 
       {!routes?.length && !insufficientBalance && renderLoading()}
 
-      {showOnrampOption && (
+      {showOnrampOption && (routes?.length || insufficientBalance) && (
       <>
         <Divider size="xSmall" sx={{ my: 'base.spacing.x2' }}>
           {t('views.PURCHASE.drawer.options.moreOptionsDividerText')}
         </Divider>
+        <MenuItem
+          emphasized
+          onClick={onChangeWalletClick}
+          size="small"
+        >
+          <MenuItem.FramedIcon
+            icon="Wallet"
+            variant="bold"
+            emphasized={false}
+          />
+          <MenuItem.Label>
+            {t('views.PURCHASE.drawer.options.changeWallet')}
+          </MenuItem.Label>
+        </MenuItem>
+
         {defaultFiatOptions.map((type, idx) => (
           <FiatOption
             key={`fiat-option-${type}`}

package/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/RouteOptionsDrawer.tsx

@@ -25,6 +25,7 @@ type OptionsDrawerProps = {
   onRouteClick: (route: RouteData) => void;
   onCardClick: (type: FiatOptionType) => void;
   onDirectCryptoPayClick: (route: DirectCryptoPayData) => void;
+  onChangeWalletClick: () => void;
   showOnrampOption?: boolean;
   showDirectCryptoPayOption?: boolean;
   showSwapOption?: boolean;
@@ -42,6 +43,7 @@ export function RouteOptionsDrawer({
   onRouteClick,
   onCardClick,
   onDirectCryptoPayClick,
+  onChangeWalletClick,
   showOnrampOption,
   showDirectCryptoPayOption,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -77,6 +79,11 @@ export function RouteOptionsDrawer({
     onDirectCryptoPayClick(route);
   };
 
+  const handleOnChangeWalletClick = () => {
+    onClose();
+    onChangeWalletClick();
+  };
+
   useEffect(() => {
     if (!visible) {
       return;
@@ -132,7 +139,6 @@ export function RouteOptionsDrawer({
               sx={{ c: 'inherit', fontSize: 'inherit' }}
             />
           </MenuItem.Caption>
-
           <MenuItem.StatefulButtCon icon="ChevronExpand" onClick={onClose} />
         </MenuItem>
         <RouteOptions
@@ -143,6 +149,7 @@ export function RouteOptionsDrawer({
           onCardClick={onCardClick}
           onRouteClick={handleOnRouteClick}
           onDirectCryptoPayClick={handleOnDirectCryptoPayClick}
+          onChangeWalletClick={handleOnChangeWalletClick}
           showOnrampOption={showOnrampOption}
           showDirectCryptoPayOption={showDirectCryptoPayOption}
           insufficientBalance={insufficientBalance}

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

@@ -693,12 +693,14 @@ export function Purchase({
         chains={chains}
         showSwapOption={showSwapOption}
         showBridgeOption={showBridgeOption}
+        showOnrampOption={shouldShowOnRampOption}
         showDirectCryptoPayOption
         visible={showOptionsDrawer}
         onClose={() => setShowOptionsDrawer(false)}
         onCardClick={handlePayWithCardClick}
         onRouteClick={handleRouteClick}
         onDirectCryptoPayClick={handleDirectCryptoPayClick}
+        onChangeWalletClick={() => setShowPayWithWalletDrawer(true)}
         insufficientBalance={insufficientBalance}
         directCryptoPayRoutes={directCryptoPayRoutes}
       />

package/src/widgets/swap/GeoblockLoader.tsx

@@ -9,7 +9,7 @@ import { useHandover } from '../../lib/hooks/useHandover';
 type GeoblockLoaderParams = {
   widget: React.ReactNode;
   serviceUnavailableView: React.ReactNode;
-  checkout: Checkout,
+  checkout?: Checkout,
 };
 
 export function GeoblockLoader({
@@ -23,6 +23,8 @@ export function GeoblockLoader({
   const [available, setAvailable] = useState(false);
 
   useEffect(() => {
+    if (!checkout) return;
+
     (async () => {
       try {
         showLoader({ text: t('views.LOADING_VIEW.text') });