@imtbl/checkout-widgets 2.24.8 → 2.24.9-0

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

@@ -28,10 +28,6 @@ import {
   ViewActions,
   ViewContext,
 } from '../../../context/view-context/ViewContext';
-import {
-  useAnalytics,
-  UserJourney,
-} from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { useWalletConnect } from '../../../lib/hooks/useWalletConnect';
 import { useInjectedProviders } from '../../../lib/hooks/useInjectedProviders';
 import { walletListStyle } from './WalletListStyles';
@@ -48,7 +44,6 @@ import { WalletDrawer } from '../../../components/WalletDrawer/WalletDrawer';
 import { WalletChangeEvent } from '../../../components/WalletDrawer/WalletDrawerEvents';
 import { WalletConnectItem } from './WalletConnectItem';
 import { BrowserWalletItem } from './BrowserWalletItem';
-import { identifyUser } from '../../../lib/analytics/identifyUser';
 import { NonPassportWarningDrawer } from './NonPassportWarningDrawer';
 import { removeSpace } from '../../../lib/utils';
 import { parseChainId } from '../../../lib/chains';
@@ -84,9 +79,7 @@ export function WalletList(props: WalletListProps) {
     connectDispatch,
     connectState: { checkout },
   } = useContext(ConnectContext);
-  const { viewDispatch } = useContext(ViewContext);
-  const { track, identify, user } = useAnalytics();
-  const { providers } = useInjectedProviders({ checkout });
+  const { viewDispatch } = useContext(ViewContext); const { providers } = useInjectedProviders({ checkout });
   const [showWalletDrawer, setShowWalletDrawer] = useState(false);
   const { isWalletConnectEnabled, openWalletConnectModal } = useWalletConnect();
   const walletConnectItemRef = useRef(null);
@@ -191,13 +184,7 @@ export function WalletList(props: WalletListProps) {
           });
 
           // Set up EIP-1193 provider event listeners for widget root instances
-          addProviderListenersForWidgetRoot(connectResult.provider);
-
-          const userData = user ? await user() : undefined;
-          const anonymousId = userData?.anonymousId();
-          await identifyUser(identify, connectResult.provider, { anonymousId });
-
-          selectBrowserProvider(
+          addProviderListenersForWidgetRoot(connectResult.provider); selectBrowserProvider(
             browserProvider,
             getProviderSlugFromRdns(providerDetail.info.rdns),
           );
@@ -258,12 +245,6 @@ export function WalletList(props: WalletListProps) {
   };
 
   const handleWalletConnectConnection = async () => {
-    track({
-      userJourney: UserJourney.CONNECT,
-      screen: 'ConnectWallet',
-      control: 'WalletConnect',
-      controlType: 'MenuItem',
-    });
     await openWalletConnectModal({
       connectCallback,
       restoreSession: false,
@@ -272,19 +253,7 @@ export function WalletList(props: WalletListProps) {
 
   const handleWalletChange = async (event: WalletChangeEvent) => {
     const { providerDetail } = event;
-    setChosenProviderDetail(providerDetail);
-    track({
-      userJourney: UserJourney.CONNECT,
-      screen: 'ConnectWallet',
-      control: removeSpace(providerDetail.info.name),
-      controlType: 'MenuItem',
-      extras: {
-        wallet: getProviderSlugFromRdns(providerDetail.info.rdns),
-        walletRdns: providerDetail.info.rdns,
-        walletUuid: providerDetail.info.uuid,
-      },
-    });
-    await selectProviderDetail(providerDetail);
+    setChosenProviderDetail(providerDetail); await selectProviderDetail(providerDetail);
     setShowWalletDrawer(false);
   };
 
@@ -303,21 +272,9 @@ export function WalletList(props: WalletListProps) {
 
       setShowChangedYourMindDrawer(false);
       setShowUnableToConnectDrawer(false);
-      setChosenProviderDetail(providerDetail);
-      track({
-        userJourney: UserJourney.CONNECT,
-        screen: 'ConnectWallet',
-        control: removeSpace(providerDetail.info.name),
-        controlType: 'MenuItem',
-        extras: {
-          wallet: getProviderSlugFromRdns(providerDetail.info.rdns),
-          walletRdns: providerDetail.info.rdns,
-          walletUuid: providerDetail.info.uuid,
-        },
-      });
-      await selectProviderDetail(providerDetail);
+      setChosenProviderDetail(providerDetail); await selectProviderDetail(providerDetail);
     },
-    [track, checkout],
+    [checkout],
   );
 
   const onChosenProviderDetailChange = useCallback(() => {
@@ -326,14 +283,8 @@ export function WalletList(props: WalletListProps) {
   }, [chosenProviderDetail]);
 
   const onBrowserWalletsClick = useCallback(() => {
-    track({
-      userJourney: UserJourney.CONNECT,
-      screen: 'ConnectWallet',
-      control: 'BrowserWallets',
-      controlType: 'MenuItem',
-    });
     setShowWalletDrawer(true);
-  }, [track]);
+  }, []);
 
   useEffect(() => {
     // Auto-trigger wallet connection via rdns

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

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'react';
+import { useContext } from 'react';
 import { Body, Box, Heading } from '@biom3/react';
 import { useTranslation } from 'react-i18next';
 import { ChainId, ThemeOverrides } from '@imtbl/checkout-sdk';
@@ -7,7 +7,6 @@ import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { WalletList } from '../components/WalletList';
 import { ConnectContext } from '../context/ConnectContext';
-import { UserJourney, useAnalytics } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 
 export interface ConnectWalletProps {
   targetWalletRdns?: string,
@@ -36,16 +35,6 @@ export function ConnectWallet({
   const {
     connectState: { sendCloseEvent },
   } = useContext(ConnectContext);
-
-  const { page } = useAnalytics();
-
-  useEffect(() => {
-    page({
-      userJourney: UserJourney.CONNECT,
-      screen: 'ConnectWallet',
-    });
-  }, []);
-
   return (
     <SimpleLayout
       testId="connect-wallet"

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

@@ -18,8 +18,6 @@ import { ConnectWidgetViews } from '../../../context/view-context/ConnectViewCon
 import { ConnectContext, ConnectActions } from '../context/ConnectContext';
 import { ViewContext, ViewActions } from '../../../context/view-context/ViewContext';
 import { isMetaMaskProvider, isPassportProvider } from '../../../lib/provider';
-import { UserJourney, useAnalytics } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
-import { identifyUser } from '../../../lib/analytics/identifyUser';
 import { parseChainId } from '../../../lib/chains';
 
 export interface ReadyToConnectProps {
@@ -36,18 +34,6 @@ export function ReadyToConnect({ targetChainId, allowedChains }: ReadyToConnectP
 
   const isPassport = isPassportProvider(provider);
   const isMetaMask = isMetaMaskProvider(provider);
-
-  const {
-    page, identify, track, user,
-  } = useAnalytics();
-
-  useEffect(() => {
-    page({
-      userJourney: UserJourney.CONNECT,
-      screen: 'ReadyToConnect',
-    });
-  }, []);
-
   // make sure wallet provider name is set if coming directly to this screen
   // and not through the wallet list
   useEffect(() => {
@@ -127,13 +113,6 @@ export function ReadyToConnect({ targetChainId, allowedChains }: ReadyToConnectP
     setLoading(true);
 
     try {
-      track({
-        userJourney: UserJourney.CONNECT,
-        screen: 'ReadyToConnect',
-        control: 'Connect',
-        controlType: 'Button',
-      });
-
       let changeAccount = false;
       if (isMetaMaskProvider(provider)) {
         changeAccount = true;
@@ -145,13 +124,7 @@ export function ReadyToConnect({ targetChainId, allowedChains }: ReadyToConnectP
       });
 
       // Set up EIP-1193 provider event listeners for widget root instances
-      addProviderListenersForWidgetRoot(connectResult.provider);
-
-      const userData = user ? await user() : undefined;
-      const anonymousId = userData?.anonymousId();
-      await identifyUser(identify, connectResult.provider, { anonymousId });
-
-      connectDispatch({
+      addProviderListenersForWidgetRoot(connectResult.provider); connectDispatch({
         payload: {
           type: ConnectActions.SET_PROVIDER,
           provider: connectResult.provider,
@@ -164,7 +137,7 @@ export function ReadyToConnect({ targetChainId, allowedChains }: ReadyToConnectP
       setLoading(false);
       setFooterButtonTextKey(`${textView()}.footer.buttonText2`);
     }
-  }, [checkout, provider, connectDispatch, viewDispatch, identify]);
+  }, [checkout, provider, connectDispatch, viewDispatch]);
 
   return (
     <SimpleLayout

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

@@ -1,5 +1,5 @@
 import {
-  useCallback, useContext, useEffect, useState,
+  useCallback, useContext, useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getChainNameById } from '../../../lib/chains';
@@ -14,7 +14,6 @@ import {
   ViewContext,
   ViewActions,
 } from '../../../context/view-context/ViewContext';
-import { UserJourney, useAnalytics } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 
 export function SwitchNetworkEth() {
   const { t } = useTranslation();
@@ -22,26 +21,8 @@ export function SwitchNetworkEth() {
   const { connectDispatch, connectState } = useContext(ConnectContext);
   const { checkout, provider, sendCloseEvent } = connectState;
   const [buttonTextKey, setButtonTextKey] = useState(t('views.SWITCH_NETWORK.eth.button.text'));
-
-  const { page, track } = useAnalytics();
-
-  useEffect(() => {
-    page({
-      userJourney: UserJourney.CONNECT,
-      screen: 'SwitchNetworkEth',
-    });
-  }, []);
-
   const switchNetwork = useCallback(async () => {
-    if (!provider || !checkout) return;
-
-    track({
-      userJourney: UserJourney.CONNECT,
-      screen: 'SwitchNetworkEth',
-      control: 'Switch',
-      controlType: 'Button',
-    });
-    try {
+    if (!provider || !checkout) return; try {
       const switchRes = await checkout.switchNetwork({
         provider,
         chainId: checkout.config.l1ChainId,
@@ -65,7 +46,7 @@ export function SwitchNetworkEth() {
     } catch (err: any) {
       setButtonTextKey(t('views.SWITCH_NETWORK.eth.button.retryText'));
     }
-  }, [provider, checkout, track]);
+  }, [provider, checkout]);
 
   return (
     <SimpleLayout

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

@@ -13,7 +13,6 @@ import { ConnectActions, ConnectContext } from '../context/ConnectContext';
 import { ViewContext, ViewActions } from '../../../context/view-context/ViewContext';
 import { addChainChangedListener, removeChainChangedListener } from '../../../lib';
 import { ImmutablePlanetHero } from '../../../components/Hero/ImmutablePlanetHero';
-import { UserJourney, useAnalytics } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 
 export function SwitchNetworkZkEVM() {
   const { t } = useTranslation();
@@ -21,15 +20,6 @@ export function SwitchNetworkZkEVM() {
   const { connectDispatch, connectState } = useContext(ConnectContext);
   const { checkout, provider, sendCloseEvent } = connectState;
   const [buttonTextKey, setButtonTextKey] = useState(t('views.SWITCH_NETWORK.zkEVM.button.text'));
-  const { page, track } = useAnalytics();
-
-  useEffect(() => {
-    page({
-      userJourney: UserJourney.CONNECT,
-      screen: 'SwitchNetworkZkEVM',
-    });
-  }, []);
-
   useEffect(() => {
     if (!provider || !checkout) return;
 
@@ -65,14 +55,6 @@ export function SwitchNetworkZkEVM() {
 
   const switchNetwork = useCallback(async () => {
     if (!provider || !checkout) return;
-
-    track({
-      userJourney: UserJourney.CONNECT,
-      screen: 'SwitchNetworkZkEVM',
-      control: 'Switch',
-      controlType: 'Button',
-    });
-
     if (!provider.send) return;
 
     const currentChainId = await provider.send('eth_chainId', []) as `0x${string}`;

package/src/widgets/immutable-commerce/CommerceWidgetRoot.tsx

@@ -19,7 +19,6 @@ import {
 import React, { Suspense } from 'react';
 import { isAddress } from 'ethers';
 import { ThemeProvider } from '../../components/ThemeProvider/ThemeProvider';
-import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
 import { HandoverProvider } from '../../context/handover-context/HandoverProvider';
 import { LoadingView } from '../../views/loading/LoadingView';
 import { Base } from '../BaseWidgetRoot';
@@ -305,25 +304,24 @@ export class CommerceWidgetRoot extends Base<WidgetType.IMMUTABLE_COMMERCE> {
     const { t } = i18n;
 
     this.reactRoot.render(
-      <CustomAnalyticsProvider checkout={this.checkout}>
-        <ThemeProvider id="checkout-container" config={this.strongConfig()}>
-          <HandoverProvider>
-            <Suspense
-              fallback={
-                <LoadingView loadingText={t('views.LOADING_VIEW.text')} />
+      <ThemeProvider id="checkout-container" config={this.strongConfig()}>
+        <HandoverProvider>
+          <Suspense
+            fallback={
+              <LoadingView loadingText={t('views.LOADING_VIEW.text')} />
               }
-            >
-              <CommerceWidget
-                checkout={this.checkout}
-                browserProvider={this.browserProvider}
-                flowParams={this.parameters}
-                flowConfig={this.properties.config || {}}
-                widgetsConfig={this.strongConfig()}
-              />
-            </Suspense>
-          </HandoverProvider>
-        </ThemeProvider>
-      </CustomAnalyticsProvider>,
+          >
+            <CommerceWidget
+              checkout={this.checkout}
+              browserProvider={this.browserProvider}
+              flowParams={this.parameters}
+              flowConfig={this.properties.config || {}}
+              widgetsConfig={this.strongConfig()}
+            />
+          </Suspense>
+        </HandoverProvider>
+      </ThemeProvider>
+      ,
     );
   }
 }

package/src/widgets/on-ramp/OnRampWidget.tsx

@@ -3,7 +3,6 @@ import {
 } from 'react';
 import { IMTBLWidgetEvents, OnRampWidgetParams, OnrampWidgetConfiguration } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
-import { UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { NATIVE } from '../../lib';
 import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
 import {
@@ -149,7 +148,6 @@ export default function OnRampWidget({
 
       {viewState.view.type === SharedViews.TOP_UP_VIEW && (
         <TopUpView
-          analytics={{ userJourney: UserJourney.ON_RAMP }}
           widgetEvent={IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT}
           checkout={checkout}
           provider={provider}

package/src/widgets/on-ramp/OnRampWidgetRoot.tsx

@@ -12,7 +12,6 @@ import { Base } from '../BaseWidgetRoot';
 import { ConnectLoader, ConnectLoaderParams } from '../../components/ConnectLoader/ConnectLoader';
 import { isValidAddress, isValidAmount } from '../../lib/validations/widgetValidators';
 import { ThemeProvider } from '../../components/ThemeProvider/ThemeProvider';
-import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
 import { LoadingView } from '../../views/loading/LoadingView';
 import { HandoverProvider } from '../../context/handover-context/HandoverProvider';
 import { sendOnRampWidgetCloseEvent } from './OnRampWidgetEvents';
@@ -87,29 +86,29 @@ export class OnRamp extends Base<WidgetType.ONRAMP> {
 
     this.reactRoot.render(
       <React.StrictMode>
-        <CustomAnalyticsProvider checkout={this.checkout}>
-          <ThemeProvider id="onramp-container" config={this.strongConfig()}>
-            <HandoverProvider>
-              <ConnectLoader
-                widgetConfig={this.strongConfig()}
-                params={connectLoaderParams}
-                closeEvent={() => sendOnRampWidgetCloseEvent(window)}
-                goBackEvent={() => this.goBackEvent(window)}
-                showBackButton={this.parameters.showBackButton}
-              >
-                <Suspense fallback={<LoadingView loadingText={t('views.ONRAMP.initialLoadingText')} />}>
-                  <OnRampWidget
-                    tokenAddress={this.parameters.tokenAddress}
-                    amount={this.parameters.amount}
-                    config={this.strongConfig()}
-                    showBackButton={this.parameters.showBackButton}
-                    onrampConfig={this.properties.config}
-                  />
-                </Suspense>
-              </ConnectLoader>
-            </HandoverProvider>
-          </ThemeProvider>
-        </CustomAnalyticsProvider>
+
+        <ThemeProvider id="onramp-container" config={this.strongConfig()}>
+          <HandoverProvider>
+            <ConnectLoader
+              widgetConfig={this.strongConfig()}
+              params={connectLoaderParams}
+              closeEvent={() => sendOnRampWidgetCloseEvent(window)}
+              goBackEvent={() => this.goBackEvent(window)}
+              showBackButton={this.parameters.showBackButton}
+            >
+              <Suspense fallback={<LoadingView loadingText={t('views.ONRAMP.initialLoadingText')} />}>
+                <OnRampWidget
+                  tokenAddress={this.parameters.tokenAddress}
+                  amount={this.parameters.amount}
+                  config={this.strongConfig()}
+                  showBackButton={this.parameters.showBackButton}
+                  onrampConfig={this.properties.config}
+                />
+              </Suspense>
+            </ConnectLoader>
+          </HandoverProvider>
+        </ThemeProvider>
+
       </React.StrictMode>,
     );
   }

package/src/widgets/on-ramp/views/OnRampMain.tsx

@@ -21,10 +21,6 @@ import {
 } from '../../../context/view-context/ViewContext';
 import { OnRampWidgetViews } from '../../../context/view-context/OnRampViewContextTypes';
 import { boxMainStyle, containerStyle } from './onRampStyles';
-import {
-  useAnalytics,
-  UserJourney,
-} from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import {
   TransakEventData,
   TransakEvents,
@@ -34,7 +30,6 @@ import { ConnectLoaderContext } from '../../../context/connect-loader-context/Co
 import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
 import { TRANSAK_ORIGIN } from '../../../components/Transak/useTransakEvents';
 import { orchestrationEvents } from '../../../lib/orchestrationEvents';
-import { isPassportProvider } from '../../../lib/provider';
 
 const transakIframeId = 'transak-iframe';
 const IN_PROGRESS_VIEW_DELAY_MS = 6000; // 6 second
@@ -80,17 +75,6 @@ function useWidgetUrl(
   return widgetUrl;
 }
 
-function useWalletAddress(provider: WrappedBrowserProvider | undefined) {
-  const [userWalletAddress, setUserWalletAddress] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    if (!provider) return;
-    provider.getSigner().then((signer) => signer.getAddress()).then(setUserWalletAddress);
-  }, [provider]);
-
-  return userWalletAddress;
-}
-
 export function OnRampMain({
   passport,
   showIframe,
@@ -111,12 +95,9 @@ export function OnRampMain({
   const { t } = useTranslation();
   const { viewState, viewDispatch } = useContext(ViewContext);
   const widgetUrl = useWidgetUrl(checkout, provider, tokenAddress, tokenAmount, passport, showMenu, customSubTitle);
-  const userWalletAddress = useWalletAddress(provider);
 
   const eventTimer = useRef<number | undefined>();
 
-  const isPassport = !!passport && isPassportProvider(provider);
-
   const openedFromTopUpView = useMemo(
     () => viewState.history.length > 2
       && viewState.history[viewState.history.length - 2].type
@@ -125,76 +106,6 @@ export function OnRampMain({
   );
 
   const showBack = showBackButton || openedFromTopUpView;
-
-  const { track } = useAnalytics();
-
-  const trackSegmentEvents = useCallback(async (
-    event: TransakEventData,
-    walletAddress: string,
-  ) => {
-    const miscProps = {
-      userId: walletAddress.toLowerCase(),
-      isPassportWallet: isPassport,
-    };
-    switch (event.event_id) {
-      case TransakEvents.TRANSAK_WIDGET_OPEN:
-        track({
-          userJourney: UserJourney.ON_RAMP,
-          screen: 'InputScreen',
-          control: 'TransakWidgetOpen',
-          controlType: 'IframeEvent',
-          extras: { ...miscProps },
-        }); // checkoutOnRampInputScreen_TransakWidgetOpenIframeEvent
-        break;
-      case TransakEvents.TRANSAK_ORDER_CREATED:
-        track({
-          userJourney: UserJourney.ON_RAMP,
-          screen: 'InputScreen',
-          control: 'OrderCreated',
-          controlType: 'IframeEvent',
-          extras: { ...miscProps },
-        }); // checkoutOnRampInputScreen_OrderCreatedIframeEvent
-        break;
-      case TransakEvents.TRANSAK_ORDER_SUCCESSFUL:
-        if (event.data.status === TransakStatuses.PROCESSING) {
-          // user paid
-          track({
-            userJourney: UserJourney.ON_RAMP,
-            screen: 'OrderInProgress',
-            control: 'PaymentProcessing',
-            controlType: 'IframeEvent',
-            extras: {
-              ...miscProps,
-              transactionHash: event.data.transactionHash,
-            },
-          }); // checkoutOnRampOrderInProgress_PaymentProcessingIframeEvent
-        }
-        if (event.data.status === TransakStatuses.COMPLETED) {
-          track({
-            userJourney: UserJourney.ON_RAMP,
-            screen: 'Success',
-            control: 'PaymentCompleted',
-            controlType: 'IframeEvent',
-            extras: {
-              ...miscProps,
-              transactionHash: event.data.transactionHash,
-            },
-          }); // checkoutOnRampSuccess_PaymentCompletedIframeEvent
-        }
-        break;
-      case TransakEvents.TRANSAK_ORDER_FAILED: // payment failed
-        track({
-          userJourney: UserJourney.ON_RAMP,
-          screen: 'Failure',
-          control: 'PaymentFailed',
-          controlType: 'IframeEvent',
-          extras: { ...miscProps },
-        }); // checkoutOnRampFailure_PaymentFailedIframeEvent
-        break;
-      default:
-    }
-  }, [isPassport, track]);
-
   const transakEventHandler = useCallback((event: TransakEventData) => {
     if (eventTimer.current) clearTimeout(eventTimer.current);
 
@@ -291,7 +202,6 @@ export function OnRampMain({
         && host
         && TRANSAK_ORIGIN.includes(host)
       ) {
-        trackSegmentEvents(event.data, userWalletAddress ?? '');
         transakEventHandler(event.data);
       }
     };
@@ -302,7 +212,7 @@ export function OnRampMain({
     return () => {
       window.removeEventListener('message', handleTransakEvents);
     };
-  }, [trackSegmentEvents, transakEventHandler, userWalletAddress]);
+  }, [transakEventHandler]);
 
   return (
     <Box sx={boxMainStyle(showIframe)}>

package/src/widgets/purchase/PurchaseWidgetRoot.tsx

@@ -9,7 +9,6 @@ import {
 import React, { Suspense } from 'react';
 import { Base } from '../BaseWidgetRoot';
 import i18n from '../../i18n';
-import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
 import { ThemeProvider } from '../../components/ThemeProvider/ThemeProvider';
 import { HandoverProvider } from '../../context/handover-context/HandoverProvider';
 import { ProvidersContextProvider } from '../../context/providers-context/ProvidersContext';
@@ -70,29 +69,29 @@ export class Purchase extends Base<WidgetType.PURCHASE> {
 
     this.reactRoot.render(
       <React.StrictMode>
-        <CustomAnalyticsProvider checkout={this.checkout}>
-          <ThemeProvider id="purchase-container" config={this.strongConfig()}>
-            <HandoverProvider>
-              <ProvidersContextProvider
-                initialState={{
-                  checkout: this.checkout,
-                }}
-              >
-                <Suspense
-                  fallback={
-                    <LoadingView loadingText={t('views.LOADING_VIEW.text')} />
+
+        <ThemeProvider id="purchase-container" config={this.strongConfig()}>
+          <HandoverProvider>
+            <ProvidersContextProvider
+              initialState={{
+                checkout: this.checkout,
+              }}
+            >
+              <Suspense
+                fallback={
+                  <LoadingView loadingText={t('views.LOADING_VIEW.text')} />
                 }
-                >
-                  <PurchaseWidget
-                    config={this.strongConfig()}
-                    environmentId={this.parameters.environmentId!}
-                    items={this.parameters.items!}
-                  />
-                </Suspense>
-              </ProvidersContextProvider>
-            </HandoverProvider>
-          </ThemeProvider>
-        </CustomAnalyticsProvider>
+              >
+                <PurchaseWidget
+                  config={this.strongConfig()}
+                  environmentId={this.parameters.environmentId!}
+                  items={this.parameters.items!}
+                />
+              </Suspense>
+            </ProvidersContextProvider>
+          </HandoverProvider>
+        </ThemeProvider>
+
       </React.StrictMode>,
     );
   }