@imtbl/checkout-widgets 2.24.8 → 2.24.9-0

package/src/widgets/add-tokens/hooks/useError.tsx

@@ -11,10 +11,6 @@ import {
   ViewContext,
 } from '../../../context/view-context/ViewContext';
 import { AddTokensWidgetViews } from '../../../context/view-context/AddTokensViewContextTypes';
-import {
-  useAnalytics,
-  UserJourney,
-} from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { RiveStateMachineInput } from '../../../types/HandoverTypes';
 import { useHandover } from '../../../lib/hooks/useHandover';
 import { APPROVE_TXN_ANIMATION } from '../../../lib/squid/config';
@@ -30,10 +26,7 @@ interface ErrorConfig {
 }
 
 export const useError = (environment: Environment) => {
-  const { viewDispatch } = useContext(ViewContext);
-
-  const { page } = useAnalytics();
-  const { t } = useTranslation();
+  const { viewDispatch } = useContext(ViewContext); const { t } = useTranslation();
   const { addHandover, closeHandover } = useHandover({
     id: HandoverTarget.GLOBAL,
   });
@@ -151,17 +144,7 @@ export const useError = (environment: Environment) => {
 
   const showErrorHandover = (
     errorType: AddTokensErrorTypes,
-    data?: Record<string, unknown>,
   ) => {
-    page({
-      userJourney: UserJourney.ADD_TOKENS,
-      screen: 'Error',
-      extras: {
-        errorType,
-        ...data,
-      },
-    });
-
     addHandover({
       animationUrl: getRemoteRive(environment, APPROVE_TXN_ANIMATION),
       inputValue: RiveStateMachineInput.ERROR,

package/src/widgets/add-tokens/hooks/useErrorHandler.ts

@@ -1,16 +1,11 @@
 import { useContext } from 'react';
-import { AddTokensError, AddTokensErrorTypes } from '../types';
+import { AddTokensErrorTypes } from '../types';
 import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
 import { sendAddTokensFailedEvent } from '../AddTokensWidgetEvents';
 import { useError } from './useError';
-import { AddTokensContext } from '../context/AddTokensContext';
 import { useProvidersContext } from '../../../context/providers-context/ProvidersContext';
 
 export const useErrorHandler = () => {
-  const {
-    addTokensState: { id: contextId },
-  } = useContext(AddTokensContext);
-
   const {
     providersState: {
       checkout,
@@ -56,12 +51,7 @@ export const useErrorHandler = () => {
       errorType = AddTokensErrorTypes.UNRECOGNISED_CHAIN;
     }
 
-    const error: AddTokensError = {
-      type: errorType,
-      data: { error: err },
-    };
-
-    showErrorHandover(errorType, { contextId, error });
+    showErrorHandover(errorType);
   };
 
   return { onTransactionError };

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

@@ -28,9 +28,9 @@ import {
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ActionType } from '@0xsquid/squid-types';
 import { trackFlow } from '@imtbl/metrics';
 import { parseUnits } from 'ethers/utils';
+import { v4 as uuidv4 } from 'uuid';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
 import {
@@ -46,7 +46,7 @@ import {
 import type { StrongCheckoutWidgetsConfig } from '../../../lib/withDefaultWidgetConfig';
 import { useRoutes } from '../../../lib/squid/hooks/useRoutes';
 import { AddTokensWidgetViews } from '../../../context/view-context/AddTokensViewContextTypes';
-import { AddTokensErrorTypes, AddTokensExperiments } from '../types';
+import { AddTokensErrorTypes } from '../types';
 import { DeliverToWalletDrawer } from '../../../components/WalletDrawer/DeliverToWalletDrawer';
 import { PayWithWalletDrawer } from '../../../components/WalletDrawer/PayWithWalletDrawer';
 import { useInjectedProviders } from '../../../lib/hooks/useInjectedProviders';
@@ -54,10 +54,6 @@ import { getProviderSlugFromRdns } from '../../../lib/provider';
 import { useProvidersContext } from '../../../context/providers-context/ProvidersContext';
 import { sendConnectProviderSuccessEvent } from '../AddTokensWidgetEvents';
 import { convertToUsd } from '../../../lib/squid/functions/convertToUsd';
-import {
-  useAnalytics,
-  UserJourney,
-} from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { validateToAmount } from '../functions/amountValidation';
 import { OnboardingDrawer } from '../components/OnboardingDrawer';
 import { useError } from '../hooks/useError';
@@ -66,14 +62,12 @@ import { TokenDrawerMenu } from '../components/TokenDrawerMenu';
 import { PULSE_SHADOW } from '../utils/animation';
 import { RouteData } from '../../../lib/squid/types';
 import { SQUID_NATIVE_TOKEN, TOOLKIT_SQUID_URL } from '../../../lib/squid/config';
-import { identifyUser } from '../../../lib/analytics/identifyUser';
 import { NotEnoughGasDrawer } from '../../../components/NotEnoughGasDrawer/NotEnoughGasDrawer';
 import { SelectedWallet } from '../../../components/SelectedWallet/SelectedWallet';
 import { RouteOptionsDrawer } from '../../../components/RouteOptionsDrawer/RouteOptionsDrawer';
 import { SelectedRouteOption } from '../../../components/SelectedRouteOption/SelectedRouteOption';
 import { getFormattedAmounts } from '../../../functions/getFormattedNumber';
 import { checkSanctionedAddresses } from '../../../functions/checkSanctionedAddresses';
-import { RouteError } from '../../../lib/squid/RouteError';
 
 interface AddTokensProps {
   checkout: Checkout;
@@ -120,15 +114,7 @@ export function AddTokens({
     selectedRouteData,
     selectedToken,
     isSwapAvailable,
-    experiments,
   } = addTokensState;
-
-  const {
-    track,
-    page,
-    identify,
-    user,
-  } = useAnalytics();
   const { viewDispatch } = useContext(ViewContext);
   const { t } = useTranslation();
 
@@ -188,31 +174,6 @@ export function AddTokens({
   }, [selectedAmount, inputValue]);
 
   const setSelectedRouteData = (route: RouteData | undefined) => {
-    if (route) {
-      track({
-        userJourney: UserJourney.ADD_TOKENS,
-        screen: 'InputScreen',
-        control: 'RoutesMenu',
-        controlType: 'MenuItem',
-        extras: {
-          contextId: id,
-          toTokenAddress: route.amountData.toToken.address,
-          toTokenChainId: route.amountData.toToken.chainId,
-          toTokenSymbol: route.amountData.toToken.symbol,
-          fromTokenAddress: route.amountData.fromToken.address,
-          fromTokenChainId: route.amountData.fromToken.chainId,
-          fromTokenSymbol: route.amountData.fromToken.symbol,
-          toAmount: route.amountData.toAmount,
-          fromAmount: route.amountData.fromAmount,
-          isBridge: route.amountData.toToken.chainId !== route.amountData.fromToken.chainId,
-          isSwap: route.amountData.toToken.chainId === route.amountData.fromToken.chainId,
-          hasEmbeddedSwap: !!route.route.route.estimate.actions.find(
-            (action) => action.type === ActionType.SWAP,
-          ),
-          isInsufficientGas: route.isInsufficientGas,
-        },
-      });
-    }
     addTokensDispatch({
       payload: {
         type: AddTokensActions.SET_SELECTED_ROUTE_DATA,
@@ -229,17 +190,6 @@ export function AddTokens({
 
       if (amount > 0) {
         setSelectedAmount(value);
-
-        track({
-          userJourney: UserJourney.ADD_TOKENS,
-          screen: 'InputScreen',
-          control: 'AmountInput',
-          controlType: 'TextInput',
-          extras: {
-            contextId: id,
-            toAmount: value,
-          },
-        });
       } else {
         setSelectedAmount('');
       }
@@ -282,12 +232,7 @@ export function AddTokens({
   useEffect(() => {
     if (!lockedToProvider) { return; }
 
-    (async () => {
-      const userData = user ? await user() : undefined;
-      const anonymousId = userData?.anonymousId();
-
-      await identifyUser(identify, toProvider!, { anonymousId });
-    })();
+    (async () => { })();
   }, [toProvider, lockedToProvider]);
 
   const toChain = useMemo(
@@ -296,20 +241,8 @@ export function AddTokens({
   );
 
   useEffect(() => {
-    if (!id || isSwapAvailable === undefined) { return; }
-
-    page({
-      userJourney: UserJourney.ADD_TOKENS,
-      screen: 'InputScreen',
-      extras: {
-        contextId: id,
-        toAmount,
-        toTokenAddress,
-        geoBlocked: !isSwapAvailable,
-      },
-    }).then((ctx) => {
-      trackFlow('commerce', `addTokensLoaded_${ctx.event.messageId}`);
-    });
+    if (!id || isSwapAvailable === undefined) return;
+    trackFlow('commerce', `addTokensLoaded_${uuidv4()}`);
   }, [id, isSwapAvailable]);
 
   useEffect(() => {
@@ -364,32 +297,8 @@ export function AddTokens({
           if (availableRoutes.length === 0) {
             setInsufficientBalance(true);
           }
-
-          track({
-            userJourney: UserJourney.ADD_TOKENS,
-            screen: 'InputScreen',
-            control: 'RoutesMenu',
-            controlType: 'MenuItem',
-            action: 'Request',
-            extras: {
-              contextId: id,
-              routesAvailable: availableRoutes.length,
-              geoBlocked: !isSwapAvailable,
-            },
-          });
-        } catch (error) {
-          if (error instanceof RouteError && error.data) {
-            track({
-              userJourney: UserJourney.ADD_TOKENS,
-              screen: 'Routes',
-              action: 'Failed',
-              extras: {
-                contextId: id,
-                message: error.message,
-                ...error.data,
-              },
-            });
-          }
+        } catch {
+          // Route errors are reflected by the empty routes state.
         }
 
         setFetchingRoutes(false);
@@ -417,24 +326,13 @@ export function AddTokens({
           setOnRampAllowedTokens(tokenResponse.tokens);
         }
       } catch (error) {
-        showErrorHandover(AddTokensErrorTypes.SERVICE_BREAKDOWN, { contextId: id, error });
+        showErrorHandover(AddTokensErrorTypes.SERVICE_BREAKDOWN);
       }
     };
     fetchOnRampTokens();
   }, [checkout, id]);
 
   const sendRequestOnRampEvent = async () => {
-    track({
-      userJourney: UserJourney.ADD_TOKENS,
-      screen: 'InputScreen',
-      control: 'PayWithCardMenu',
-      controlType: 'MenuItem',
-      extras: {
-        contextId: id,
-        tokenAddress: selectedToken?.address ?? '',
-        amount: selectedAmount ?? '',
-      },
-    });
     const data = {
       tokenAddress: selectedToken?.address ?? '',
       amount: selectedAmount ?? '',
@@ -501,23 +399,6 @@ export function AddTokens({
 
       return;
     }
-
-    track({
-      userJourney: UserJourney.ADD_TOKENS,
-      screen: 'InputScreen',
-      control: 'Review',
-      controlType: 'Button',
-      extras: {
-        contextId: id,
-        toTokenAddress: selectedRouteData.amountData.toToken.address,
-        toTokenChainId: selectedRouteData.amountData.toToken.chainId,
-        fromTokenAddress: selectedRouteData.amountData.fromToken.address,
-        fromTokenChainId: selectedRouteData.amountData.fromToken.chainId,
-        toAmount: selectedRouteData.amountData.toAmount,
-        fromAmount: selectedRouteData.amountData.fromAmount,
-      },
-    });
-
     viewDispatch({
       payload: {
         type: ViewActions.UPDATE_VIEW,
@@ -575,19 +456,6 @@ export function AddTokens({
     provider: WrappedBrowserProvider,
     providerInfo: EIP6963ProviderInfo,
   ) => {
-    track({
-      userJourney: UserJourney.ADD_TOKENS,
-      screen: 'InputScreen',
-      control: 'WalletsMenu',
-      controlType: 'MenuItem',
-      extras: {
-        contextId: id,
-        providerType,
-        providerName: providerInfo.name,
-        providerRdns: providerInfo.rdns,
-        providerUuid: providerInfo.uuid,
-      },
-    });
     sendConnectProviderSuccessEvent(
       eventTarget,
       providerType,
@@ -606,20 +474,6 @@ export function AddTokens({
     return undefined;
   };
 
-  useEffect(() => {
-    if (!id || !experiments) return;
-
-    track({
-      userJourney: UserJourney.ADD_TOKENS,
-      screen: 'Experiments',
-      action: 'Started',
-      extras: {
-        contextId: id,
-        preselectedToken: experiments[AddTokensExperiments.PRESELECTED_TOKEN] || 'none',
-      },
-    });
-  }, [id, experiments]);
-
   useEffect(() => {
     if (selectedRouteData?.isInsufficientGas) {
       setShowNotEnoughGasDrawer(true);

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

@@ -14,9 +14,9 @@ import {
   Sticker,
   useInterval,
 } from '@biom3/react';
-import { ChainId } from '@imtbl/checkout-sdk';
 import { trackFlow } from '@imtbl/metrics';
 import { t } from 'i18next';
+import { v4 as uuidv4 } from 'uuid';
 import {
   useCallback,
   useContext,
@@ -38,11 +38,6 @@ import { useExecute } from '../../../lib/squid/hooks/useExecute';
 import { useRoutes } from '../../../lib/squid/hooks/useRoutes';
 import { AddTokensContext } from '../context/AddTokensContext';
 import { AddTokensErrorTypes } from '../types';
-
-import {
-  useAnalytics,
-  UserJourney,
-} from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { useProvidersContext } from '../../../context/providers-context/ProvidersContext';
 import { getRouteChains } from '../../../lib/squid/functions/getRouteChains';
 import { getTotalRouteFees } from '../../../lib/squid/functions/getTotalRouteFees';
@@ -60,7 +55,6 @@ import {
 } from '../../../lib/squid/config';
 import { verifyAndSwitchChain } from '../../../lib/squid/functions/verifyAndSwitchChain';
 import { useError } from '../hooks/useError';
-import { FromAmountData } from '../../../lib/squid/types';
 import {
   sendAddTokensSuccessEvent,
 } from '../AddTokensWidgetEvents';
@@ -90,12 +84,9 @@ export function Review({
   onCloseButtonClick,
 }: ReviewProps) {
   const { viewDispatch } = useContext(ViewContext);
-
-  const { track, page } = useAnalytics();
-
   const {
     addTokensState: {
-      id, squid, chains, tokens,
+      squid, chains, tokens,
     },
   } = useContext(AddTokensContext);
 
@@ -112,7 +103,6 @@ export function Review({
   } = useContext(EventTargetContext);
 
   const [route, setRoute] = useState<RouteResponse | undefined>();
-  const [amountData, setAmountData] = useState<FromAmountData | undefined>();
   const [proceedDisabled, setProceedDisabled] = useState(true);
   const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);
   const [showSecuringQuote, setShowSecuringQuote] = useState(false);
@@ -124,21 +114,7 @@ export function Review({
 
   const {
     getAllowance, approve, execute, getStatus,
-  } = useExecute(UserJourney.ADD_TOKENS, onTransactionError);
-
-  useEffect(() => {
-    page({
-      userJourney: UserJourney.ADD_TOKENS,
-      screen: 'Review',
-      extras: {
-        contextId: id,
-        toAmount: data.toAmount,
-        toChainId: data.toChainId,
-        toTokenAddress: data.toTokenAddress,
-      },
-    });
-  }, [id]);
-
+  } = useExecute('AddTokens', onTransactionError);
   const getFromAmountAndRoute = async () => {
     if (!squid || !tokens) return;
 
@@ -170,14 +146,10 @@ export function Review({
       false,
     );
     setRoute(routeResponse.route);
-    setAmountData(updatedAmountData);
     setProceedDisabled(false);
     setShowSecuringQuote(false);
     if (routeResponse?.route === undefined) {
-      showErrorHandover(AddTokensErrorTypes.ROUTE_ERROR, {
-        contextId: id,
-        error: 'Failed to obtain final route',
-      });
+      showErrorHandover(AddTokensErrorTypes.ROUTE_ERROR);
     }
   };
 
@@ -197,20 +169,6 @@ export function Review({
   );
 
   const openFeeBreakdown = () => {
-    const feesToken = route?.route.estimate.feeCosts?.[0]?.token;
-    track({
-      userJourney: UserJourney.ADD_TOKENS,
-      screen: 'Review',
-      control: 'FeeBreakdown',
-      controlType: 'Button',
-      extras: {
-        contextId: id,
-        feesToken: feesToken?.symbol,
-        totalAmount: feesToken ? getFormattedNumber(totalFees, feesToken.decimals) : null,
-        totalFiatAmount: getFormattedAmounts(totalFeesUsd),
-      },
-    });
-
     setShowFeeBreakdown(true);
   };
 
@@ -268,32 +226,10 @@ export function Review({
     }
 
     let currentFromAddress = '';
-    track({
-      userJourney: UserJourney.ADD_TOKENS,
-      screen: 'Review',
-      control: 'Proceed',
-      controlType: 'Button',
-      extras: {
-        contextId: id,
-        toTokenAddress: route.route.params.toToken,
-        toTokenChainId: route.route.params.toChain,
-        fromTokenAddress: route.route.params.fromToken,
-        fromTokenChainId: route.route.params.fromChain,
-        fromAddress: route.route.params.fromAddress,
-        toAddress: route.route.params.toAddress,
-        estimatedRouteDuration: route.route.estimate.estimatedRouteDuration,
-        fromAmount: amountData?.fromAmount,
-        toAmount: amountData?.toAmount,
-      },
-    });
-
     try {
       currentFromAddress = await (await fromProvider.getSigner()).getAddress();
     } catch (error) {
-      showErrorHandover(AddTokensErrorTypes.PROVIDER_ERROR, {
-        contextId: id,
-        error,
-      });
+      showErrorHandover(AddTokensErrorTypes.PROVIDER_ERROR);
       return;
     }
 
@@ -338,31 +274,7 @@ export function Review({
     const executeTxnReceipt = await execute(squid, fromProviderInfo, changeableProvider, route);
 
     if (executeTxnReceipt) {
-      track({
-        userJourney: UserJourney.ADD_TOKENS,
-        screen: 'FundsAdded',
-        action: 'Succeeded',
-        extras: {
-          contextId: id,
-          ...(route.route.params.fromChain !== ChainId.IMTBL_ZKEVM_MAINNET.toString()
-            && { txHash: executeTxnReceipt.hash }),
-          ...(route.route.params.fromChain === ChainId.IMTBL_ZKEVM_MAINNET.toString()
-            && { immutableZkEVMTxHash: executeTxnReceipt.hash }),
-          toTokenAddress: route.route.params.toToken,
-          toTokenChainId: route.route.params.toChain,
-          fromTokenAddress: route.route.params.fromToken,
-          fromTokenChainId: route.route.params.fromChain,
-          fromAmount: amountData?.fromAmount,
-          fromAddress: route.route.params.fromAddress,
-          toAddress: route.route.params.toAddress,
-          toAmount: amountData?.toAmount,
-          fromTokenSymbol: amountData?.fromToken.symbol,
-          toTokenSymbol: amountData?.toToken.symbol,
-        },
-      }).then((ctx) => {
-        trackFlow('commerce', `addTokensFundsAdded_${ctx.event.messageId}`);
-      });
-
+      trackFlow('commerce', `addTokensFundsAdded_${uuidv4()}`);
       sendAddTokensSuccessEvent(eventTarget, executeTxnReceipt.hash);
 
       if (toChain === fromChain) {

package/src/widgets/bridge/BridgeWidget.tsx

@@ -26,7 +26,6 @@ import { CryptoFiatProvider } from '../../context/crypto-fiat-context/CryptoFiat
 import { StatusView } from '../../components/Status/StatusView';
 import { StatusType } from '../../components/Status/StatusType';
 import { Transactions } from '../../components/Transactions/Transactions';
-import { UserJourney, useAnalytics } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { TopUpView } from '../../views/top-up/TopUpView';
 import { ClaimWithdrawalInProgress } from '../../components/Transactions/ClaimWithdrawalInProgress';
 import { getDefaultTokenImage } from '../../lib/utils';
@@ -89,9 +88,6 @@ export default function BridgeWidget({
   } = config;
   const defaultTokenImage = getDefaultTokenImage(checkout.config.environment, theme);
   const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
-
-  const { page } = useAnalytics();
-
   const [viewState, viewDispatch] = useReducer(
     viewReducer,
     {
@@ -237,15 +233,6 @@ export default function BridgeWidget({
                   if (viewState.view.type === BridgeWidgetViews.BRIDGE_FAILURE) {
                     reason = viewState.view.reason;
                   }
-
-                  page({
-                    userJourney: UserJourney.BRIDGE,
-                    screen: 'Failed',
-                    extras: {
-                      reason,
-                    },
-                  });
-
                   sendBridgeFailedEvent(eventTarget, reason);
                 }}
               />
@@ -273,17 +260,10 @@ export default function BridgeWidget({
               actionText={t('views.ERROR_VIEW.actionText')}
               onActionClick={goBackToWalletNetworkSelectorClearState}
               onCloseClick={() => sendBridgeWidgetCloseEvent(eventTarget)}
-              errorEventAction={() => {
-                page({
-                  userJourney: UserJourney.BRIDGE,
-                  screen: 'Error',
-                });
-              }}
             />
           )}
           {viewState.view.type === SharedViews.TOP_UP_VIEW && (
             <TopUpView
-              analytics={{ userJourney: UserJourney.BRIDGE }}
               widgetEvent={IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT}
               checkout={checkout}
               provider={browserProvider}
@@ -303,10 +283,6 @@ export default function BridgeWidget({
               statusText={t('views.CLAIM_WITHDRAWAL.IN_PROGRESS.success.text')}
               actionText={t('views.CLAIM_WITHDRAWAL.IN_PROGRESS.success.actionText')}
               onRenderEvent={() => {
-                page({
-                  userJourney: UserJourney.BRIDGE,
-                  screen: 'ClaimWithdrawalSuccess',
-                });
                 sendBridgeClaimWithdrawalSuccessEvent(
                   eventTarget,
                   (viewState.view as BridgeClaimWithdrawalSuccess).transactionHash,
@@ -322,17 +298,6 @@ export default function BridgeWidget({
               statusText={t('views.CLAIM_WITHDRAWAL.IN_PROGRESS.failure.text')}
               actionText={t('views.CLAIM_WITHDRAWAL.IN_PROGRESS.failure.actionText')}
               onRenderEvent={() => {
-                let reason = '';
-                if (viewState.view.type === BridgeWidgetViews.CLAIM_WITHDRAWAL_FAILURE) {
-                  reason = viewState.view.reason;
-                }
-                page({
-                  userJourney: UserJourney.BRIDGE,
-                  screen: 'ClaimWithdrawalFailure',
-                  extras: {
-                    reason,
-                  },
-                });
                 sendBridgeClaimWithdrawalFailedEvent(
                   eventTarget,
                   (viewState.view as BridgeClaimWithdrawalFailure).transactionHash,

package/src/widgets/bridge/BridgeWidgetRoot.tsx

@@ -10,7 +10,6 @@ import {
 import { Base } from '../BaseWidgetRoot';
 import { isValidWalletProvider, isValidAmount, isValidAddress } 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 i18n from '../../i18n';
@@ -65,23 +64,23 @@ export class Bridge extends Base<WidgetType.BRIDGE> {
 
     this.reactRoot.render(
       <React.StrictMode>
-        <CustomAnalyticsProvider checkout={this.checkout}>
-          <ThemeProvider id="bridge-container" config={this.strongConfig()}>
-            <HandoverProvider>
-              <Suspense fallback={<LoadingView loadingText={t('views.LOADING_VIEW.text')} />}>
-                <BridgeWidget
-                  checkout={this.checkout}
-                  config={this.strongConfig()}
-                  browserProvider={this.browserProvider}
-                  tokenAddress={this.parameters.tokenAddress}
-                  amount={this.parameters.amount}
-                  walletProviderName={this.parameters.walletProviderName}
-                  showBackButton={!!this.parameters.showBackButton}
-                />
-              </Suspense>
-            </HandoverProvider>
-          </ThemeProvider>
-        </CustomAnalyticsProvider>
+
+        <ThemeProvider id="bridge-container" config={this.strongConfig()}>
+          <HandoverProvider>
+            <Suspense fallback={<LoadingView loadingText={t('views.LOADING_VIEW.text')} />}>
+              <BridgeWidget
+                checkout={this.checkout}
+                config={this.strongConfig()}
+                browserProvider={this.browserProvider}
+                tokenAddress={this.parameters.tokenAddress}
+                amount={this.parameters.amount}
+                walletProviderName={this.parameters.walletProviderName}
+                showBackButton={!!this.parameters.showBackButton}
+              />
+            </Suspense>
+          </HandoverProvider>
+        </ThemeProvider>
+
       </React.StrictMode>,
     );
   }