@imtbl/checkout-widgets 2.24.8 → 2.24.9-0

package/dist/browser/{SwapWidget-C4B2Answ.js → SwapWidget-ujE6uX-N.js}

@@ -1,9 +1,9 @@
-import { u as useTranslation, s as jsxs, df as quickswapFooterStyles, t as Box, dg as quickswapFooterLogoStyles, q as jsx, y as Body, dh as quickswapFooterDisclaimerTextStyles, di as WidgetTheme, X as getRemoteImage, r as reactExports, v as Button, aA as Drawer, R as CloudImage, H as Heading, cE as Logo, dj as getImxTokenImage, cb as formatUnits, j as calculateCryptoToFiat, F as tokenValueFormat, ci as isGasFree, p as parseUnits, i as formatZeroAmount, cz as ShimmerBox, bF as PriceDisplay, aF as Fragment, dk as getCryptoToUSDConversion, Z as ConnectLoaderContext, a$ as isNativeToken, cR as NATIVE, aU as ViewContext, z as useAnalytics, dl as calculateFeesFiat, U as UserJourney, cU as DEFAULT_QUOTE_REFRESH_INTERVAL, aK as isPassportProvider, dm as parseEther, N as amountInputValidation, b3 as ButtCon, bj as motion, b8 as Tooltip, bd as Icon, bM as r, V as ViewActions, a5 as SharedViews, G as getDefaultTokenImage, dn as ESTIMATE_DEBOUNCE, dp as DEFAULT_TOKEN_VALIDATION_DECIMALS, c_ as parseChainId, cZ as DEFAULT_TOKEN_DECIMALS, E as EventTargetContext, a0 as LoadingView, x as SimpleLayout, dq as sendSwapWidgetCloseEvent, M as orchestrationEvents, I as IMTBLWidgetEvents, J as HeaderNavigation, cY as IMX_TOKEN_SYMBOL, cy as CheckoutErrorType, d2 as SimpleTextBody, d3 as FooterButton, dr as CheckoutError, d0 as heroBackGroundStyles, d1 as heroImageStyles, bz as Trans, L as Link, aV as useHandover, bH as viewReducer, bI as initialViewState, ds as DEFAULT_BALANCE_RETRY_POLICY, dt as SwapDirection$1, d8 as StatusView, du as sendSwapSuccessEvent, c6 as StatusType, dv as sendSwapFailedEvent, dw as sendSwapRejectedEvent, a6 as ErrorView, bQ as ServiceUnavailableErrorView, l as TokenFilterTypes, cP as WalletProviderName } from './index-2esq4Cem.js';
-import { S as SelectForm, T as TextInputForm, A as Accordion, b as gasAmountAccordionStyles, a as TransactionRejected, N as NetworkSwitchDrawer, W as WalletApproveHero, g as getAllowedBalances } from './WalletApproveHero-ge2JSOYk.js';
-import { u as useInterval } from './useInterval-1gu4cbu3.js';
-import { S as SwapWidgetViews, T as TopUpView } from './TopUpView-BIvdNYib.js';
-import { F as FeesBreakdown, f as fetchRiskAssessmentV2, i as isSingleAddressSanctioned } from './FeesBreakdown-DvoQJlP-.js';
-import { S as SpendingCapHero } from './SpendingCapHero-Z5NIcrWw.js';
+import { u as useTranslation, s as jsxs, d6 as quickswapFooterStyles, t as Box, d7 as quickswapFooterLogoStyles, q as jsx, y as Body, d8 as quickswapFooterDisclaimerTextStyles, d9 as WidgetTheme, R as getRemoteImage, r as reactExports, v as Button, ay as Drawer, Q as CloudImage, H as Heading, cw as Logo, da as getImxTokenImage, c3 as formatUnits, j as calculateCryptoToFiat, D as tokenValueFormat, ca as isGasFree, p as parseUnits, i as formatZeroAmount, cr as ShimmerBox, bz as PriceDisplay, aD as Fragment, db as getCryptoToUSDConversion, X as ConnectLoaderContext, aW as isNativeToken, cI as NATIVE, aP as ViewContext, dc as calculateFeesFiat, cL as DEFAULT_QUOTE_REFRESH_INTERVAL, aG as isPassportProvider, dd as parseEther, M as amountInputValidation, a_ as ButtCon, be as motion, b3 as Tooltip, b8 as Icon, bG as r, V as ViewActions, a3 as SharedViews, F as getDefaultTokenImage, de as ESTIMATE_DEBOUNCE, df as DEFAULT_TOKEN_VALIDATION_DECIMALS, cR as parseChainId, cQ as DEFAULT_TOKEN_DECIMALS, E as EventTargetContext, _ as LoadingView, x as SimpleLayout, dg as sendSwapWidgetCloseEvent, K as orchestrationEvents, I as IMTBLWidgetEvents, G as HeaderNavigation, cP as IMX_TOKEN_SYMBOL, cq as CheckoutErrorType, cV as SimpleTextBody, cW as FooterButton, dh as CheckoutError, cT as heroBackGroundStyles, cU as heroImageStyles, bu as Trans, L as Link, aQ as useHandover, bC as viewReducer, bD as initialViewState, di as DEFAULT_BALANCE_RETRY_POLICY, dj as SwapDirection$1, c$ as StatusView, dk as sendSwapSuccessEvent, b_ as StatusType, dl as sendSwapFailedEvent, dm as sendSwapRejectedEvent, a4 as ErrorView, bK as ServiceUnavailableErrorView, l as TokenFilterTypes, cG as WalletProviderName } from './index-CcxHW36j.js';
+import { S as SelectForm, T as TextInputForm, A as Accordion, b as gasAmountAccordionStyles, a as TransactionRejected, N as NetworkSwitchDrawer, W as WalletApproveHero, g as getAllowedBalances } from './WalletApproveHero-BJi7ufqM.js';
+import { u as useInterval } from './useInterval-DbCsm_gG.js';
+import { S as SwapWidgetViews, T as TopUpView } from './TopUpView-GMv3360Q.js';
+import { F as FeesBreakdown, f as fetchRiskAssessmentV2, i as isSingleAddressSanctioned } from './FeesBreakdown-BU4haotD.js';
+import { S as SpendingCapHero } from './SpendingCapHero-B-0YYZho.js';
 
 function QuickswapFooter({ theme, environment }) {
     const { t } = useTranslation();
@@ -98,8 +98,8 @@ const inputStyle = {
     flex: 2,
 };
 
-function SelectInput({ testId, options, textInputValue, textInputPlaceholder, textInputValidator, textInputType, onTextInputChange, onTextInputBlur, onTextInputFocus, textInputTextAlign, textInputSubtext, textInputErrorMessage, testInputMode, selectTextAlign, selectSubtext, selectErrorMessage, textInputMaxButtonClick, onSelectChange, textInputDisabled, selectInputDisabled, selectedOption, coinSelectorHeading, defaultTokenImage, userJourney, screen, control, environment, theme, themeOverrides, }) {
-    return (jsxs(Box, { sx: selectInputBoxStyle, children: [jsx(Box, { sx: selectStyle, children: jsx(SelectForm, { testId: `${testId}-select-form`, options: options, subtext: selectSubtext, textAlign: selectTextAlign, errorMessage: selectErrorMessage, onSelectChange: onSelectChange, disabled: selectInputDisabled, selectedOption: selectedOption, coinSelectorHeading: coinSelectorHeading, defaultTokenImage: defaultTokenImage, control: control, userJourney: userJourney, screen: screen, environment: environment, theme: theme, themeOverrides: themeOverrides }) }), jsx(Box, { sx: inputStyle, children: jsx(TextInputForm, { type: textInputType, testId: `${testId}-text-form`, value: textInputValue, placeholder: textInputPlaceholder, subtext: textInputSubtext, textAlign: textInputTextAlign, errorMessage: textInputErrorMessage, validator: textInputValidator, onTextInputChange: onTextInputChange, onTextInputBlur: onTextInputBlur, onTextInputFocus: onTextInputFocus, maxButtonClick: textInputMaxButtonClick, disabled: textInputDisabled, inputMode: testInputMode }) })] }));
+function SelectInput({ testId, options, textInputValue, textInputPlaceholder, textInputValidator, textInputType, onTextInputChange, onTextInputBlur, onTextInputFocus, textInputTextAlign, textInputSubtext, textInputErrorMessage, testInputMode, selectTextAlign, selectSubtext, selectErrorMessage, textInputMaxButtonClick, onSelectChange, textInputDisabled, selectInputDisabled, selectedOption, coinSelectorHeading, defaultTokenImage, environment, theme, themeOverrides, }) {
+    return (jsxs(Box, { sx: selectInputBoxStyle, children: [jsx(Box, { sx: selectStyle, children: jsx(SelectForm, { testId: `${testId}-select-form`, options: options, subtext: selectSubtext, textAlign: selectTextAlign, errorMessage: selectErrorMessage, onSelectChange: onSelectChange, disabled: selectInputDisabled, selectedOption: selectedOption, coinSelectorHeading: coinSelectorHeading, defaultTokenImage: defaultTokenImage, environment: environment, theme: theme, themeOverrides: themeOverrides }) }), jsx(Box, { sx: inputStyle, children: jsx(TextInputForm, { type: textInputType, testId: `${testId}-text-form`, value: textInputValue, placeholder: textInputPlaceholder, subtext: textInputSubtext, textAlign: textInputTextAlign, errorMessage: textInputErrorMessage, validator: textInputValidator, onTextInputChange: onTextInputChange, onTextInputBlur: onTextInputBlur, onTextInputFocus: onTextInputFocus, maxButtonClick: textInputMaxButtonClick, disabled: textInputDisabled, inputMode: testInputMode }) })] }));
 }
 
 function validateFromToken(fromToken) {
@@ -526,7 +526,6 @@ function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, })
     const { viewDispatch } = reactExports.useContext(ViewContext);
     const [direction, setDirection] = reactExports.useState(SwapDirection.FROM);
     const [loading, setLoading] = reactExports.useState(false);
-    const { track } = useAnalytics();
     // Form State
     const [fromAmount, setFromAmount] = reactExports.useState(data?.fromAmount || '');
     const [fromAmountError, setFromAmountError] = reactExports.useState('');
@@ -614,20 +613,7 @@ function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, })
     ]);
     const onQuoteError = reactExports.useCallback((error) => {
         setQuoteError(error);
-        track({
-            userJourney: UserJourney.SWAP,
-            screen: 'SwapCoins',
-            control: 'UnableToSwapDrawer',
-            controlType: 'Button',
-            extras: {
-                fromToken,
-                toToken,
-                fromAmount,
-                toAmount,
-                error: 'message' in error ? error.message : error,
-            },
-        });
-    }, [track, fromToken, toToken, fromAmount, toAmount]);
+    }, [fromToken, toToken, fromAmount, toAmount]);
     const tokensOptionsTo = reactExports.useMemo(() => allowedTokens
         .map((token) => ({
         id: formatTokenOptionsId(token.symbol, token.address),
@@ -894,17 +880,6 @@ function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, })
         setFromToken(selected.token);
         setFromBalance(selected.formattedBalance);
         setFromTokenError('');
-        track({
-            userJourney: UserJourney.SWAP,
-            screen: 'SwapCoins',
-            control: 'SelectFrom',
-            controlType: 'Select',
-            extras: {
-                fromBalance: selected.formattedBalance,
-                fromToken: selected.token,
-                fromAmount,
-            },
-        });
     }, [toToken]);
     const onFromTextInputFocus = () => {
         setDirection(SwapDirection.FROM);
@@ -920,17 +895,6 @@ function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, })
             setLoading(true);
         }
         setFromAmount(value);
-        track({
-            userJourney: UserJourney.SWAP,
-            screen: 'SwapCoins',
-            control: 'InputFrom',
-            controlType: 'TextInput',
-            extras: {
-                fromBalance,
-                fromToken,
-                fromAmount: value,
-            },
-        });
     };
     const textInputMaxButtonClick = () => {
         if (!fromBalance)
@@ -949,16 +913,6 @@ function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, })
         else {
             setFromAmount(fromBalanceTruncated);
         }
-        track({
-            userJourney: UserJourney.SWAP,
-            screen: 'SwapCoins',
-            control: 'MaxFrom',
-            controlType: 'Button',
-            extras: {
-                fromBalance,
-                fromBalanceTruncated,
-            },
-        });
     };
     // ------------//
     //      TO     //
@@ -972,16 +926,6 @@ function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, })
         }
         setToToken(selected);
         setToTokenError('');
-        track({
-            userJourney: UserJourney.SWAP,
-            screen: 'SwapCoins',
-            control: 'SelectTo',
-            controlType: 'Select',
-            extras: {
-                toToken: selected,
-                toAmount,
-            },
-        });
     }, [fromToken]);
     const onToTextInputFocus = () => {
         setDirection(SwapDirection.TO);
@@ -998,21 +942,10 @@ function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, })
             setLoading(true);
         }
         setToAmount(value);
-        track({
-            userJourney: UserJourney.SWAP,
-            screen: 'SwapCoins',
-            control: 'InputTo',
-            controlType: 'TextInput',
-            extras: {
-                toToken,
-                toAmount: value,
-            },
-        });
     };
     const reverseTokens = () => {
         const currentFromToken = fromToken;
         const currentToToken = toToken;
-        const currentFromAmount = fromAmount;
         const currentToAmount = toAmount;
         setReverseRotation((prev) => (prev === 0 ? 180 : 0));
         resetFormErrors();
@@ -1039,19 +972,6 @@ function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, })
             setToToken(currentFromToken);
             setToAmount(fromAmount);
         }
-        track({
-            userJourney: UserJourney.SWAP,
-            screen: 'SwapCoins',
-            control: 'Flip',
-            controlType: 'Button',
-            extras: {
-                fromToken: currentFromToken,
-                fromAmount: currentFromAmount,
-                toToken: currentToToken,
-                toAmount: currentToAmount,
-                isCurrentToTokenInSellList,
-            },
-        });
     };
     const openNotEnoughImxDrawer = () => {
         setShowNotEnoughImxDrawer(true);
@@ -1084,22 +1004,6 @@ function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, })
             || (validateFromAmountError && direction === SwapDirection.FROM)
             || (validateToAmountError && direction === SwapDirection.TO))
             isSwapFormValid = false;
-        track({
-            userJourney: UserJourney.SWAP,
-            screen: 'SwapCoins',
-            control: 'FormValid',
-            controlType: 'Button',
-            extras: {
-                isSwapFormValid,
-                swapFromAddress: fromToken?.address,
-                swapFromAmount: fromAmount,
-                swapFromTokenSymbol: fromToken?.symbol,
-                swapToAddress: toToken?.address,
-                swapToAmount: toAmount,
-                swapToTokenSymbol: toToken?.symbol,
-                autoProceed,
-            },
-        });
         return isSwapFormValid;
     };
     const isFormValidForAutoProceed = reactExports.useMemo(() => {
@@ -1126,24 +1030,6 @@ function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, })
             return;
         const transaction = quote;
         const isValid = SwapFormValidator();
-        // Tracking swap from data here and is valid or not to understand behaviour
-        track({
-            userJourney: UserJourney.SWAP,
-            screen: 'SwapCoins',
-            control: 'Swap',
-            controlType: 'Button',
-            extras: {
-                swapFromAddress: fromToken?.address,
-                swapFromAmount: fromAmount,
-                swapFromTokenSymbol: fromToken?.symbol,
-                swapToAddress: toToken?.address,
-                swapToAmount: toAmount,
-                swapToTokenSymbol: toToken?.symbol,
-                isSwapFormValid: isValid,
-                hasFundsForGas: !insufficientFundsForGas,
-                autoProceed,
-            },
-        });
         if (!isValid)
             return;
         if (!checkout || !provider || !transaction)
@@ -1245,7 +1131,7 @@ function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, })
                                             : '', selectTextAlign: "left", textInputType: "number", testInputMode: "decimal", textInputValue: fromAmount, textInputPlaceholder: t('views.SWAP.swapForm.from.inputPlaceholder'), textInputSubtext: `${t('views.SWAP.content.fiatPricePrefix')}
               $${formatZeroAmount(fromFiatValue, true)}`, textInputTextAlign: "right", textInputValidator: amountInputValidation, onTextInputChange: (v) => onFromTextInputChange(v), onTextInputFocus: onFromTextInputFocus, textInputMaxButtonClick: textInputMaxButtonClick, onSelectChange: onFromSelectChange, textInputErrorMessage: t(fromAmountError), selectErrorMessage: t(fromTokenError), selectedOption: fromToken
                                             ? formatTokenOptionsId(fromToken.symbol, fromToken.address)
-                                            : undefined, coinSelectorHeading: t('views.SWAP.swapForm.from.selectorTitle'), defaultTokenImage: defaultTokenImage, control: "FromToken", userJourney: UserJourney.SWAP, screen: "SwapCoins", environment: checkout?.config.environment, theme: theme, themeOverrides: themeOverrides })] }), jsx(Box, { sx: {
+                                            : undefined, coinSelectorHeading: t('views.SWAP.swapForm.from.selectorTitle'), defaultTokenImage: defaultTokenImage, environment: checkout?.config.environment, theme: theme, themeOverrides: themeOverrides })] }), jsx(Box, { sx: {
                                     display: 'flex',
                                     justifyContent: 'center',
                                     alignItems: 'center',
@@ -1262,14 +1148,7 @@ function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, })
                                                                 w: 'base.icon.size.300',
                                                             } }) }), jsx(Tooltip.Content, { children: swapConversionRateTooltip })] }))] }), jsx(SelectInput, { testId: "toTokenInputs", options: tokensOptionsTo, selectTextAlign: "left", textInputType: "number", testInputMode: "decimal", textInputValue: toAmount, textInputPlaceholder: t('views.SWAP.swapForm.to.inputPlaceholder'), textInputTextAlign: "right", textInputValidator: amountInputValidation, onTextInputChange: (v) => onToTextInputChange(v), onTextInputFocus: onToTextInputFocus, onSelectChange: onToSelectChange, textInputErrorMessage: t(toAmountError), selectErrorMessage: t(toTokenError), selectedOption: toToken
                                             ? formatTokenOptionsId(toToken.symbol, toToken.address)
-                                            : undefined, coinSelectorHeading: t('views.SWAP.swapForm.to.selectorTitle'), defaultTokenImage: defaultTokenImage, control: "ToToken", userJourney: UserJourney.SWAP, screen: "SwapCoins", environment: checkout?.config.environment, theme: theme, themeOverrides: themeOverrides })] })] }), jsx(Fees, { feeFiatValue: feeFiatValue, gasFeeToken: gasFeeToken, fees: formattedFees, onFeesClick: () => {
-                            track({
-                                userJourney: UserJourney.SWAP,
-                                screen: 'SwapCoins',
-                                control: 'ViewFees',
-                                controlType: 'Button',
-                            });
-                        }, sx: {
+                                            : undefined, coinSelectorHeading: t('views.SWAP.swapForm.to.selectorTitle'), defaultTokenImage: defaultTokenImage, environment: checkout?.config.environment, theme: theme, themeOverrides: themeOverrides })] })] }), jsx(Fees, { feeFiatValue: feeFiatValue, gasFeeToken: gasFeeToken, fees: formattedFees, sx: {
                             paddingBottom: '0',
                         }, loading: loading })] }), quoteError && (jsxs(Box, { sx: {
                     paddingX: 'base.spacing.x4',
@@ -1319,19 +1198,6 @@ function SwapCoins({ theme, themeOverrides, cancelAutoProceed, fromAmount, toAmo
     const { swapState: { tokenBalances, autoProceed, }, } = reactExports.useContext(SwapContext);
     const { connectLoaderState: { checkout, provider, }, } = reactExports.useContext(ConnectLoaderContext);
     const [showNotEnoughImxDrawer, setShowNotEnoughImxDrawer] = reactExports.useState(false);
-    const { page } = useAnalytics();
-    reactExports.useEffect(() => {
-        page({
-            userJourney: UserJourney.SWAP,
-            screen: 'SwapCoins',
-            extras: {
-                fromAmount,
-                toAmount,
-                fromTokenAddress,
-                toTokenAddress,
-            },
-        });
-    }, []);
     reactExports.useEffect(() => {
         if (hasZeroBalance(tokenBalances, IMX_TOKEN_SYMBOL) && !isPassportProvider(provider)) {
             setShowNotEnoughImxDrawer(true);
@@ -1366,16 +1232,6 @@ function SwapCoins({ theme, themeOverrides, cancelAutoProceed, fromAmount, toAmo
 function SwapInProgress({ transactionResponse, swapForm, }) {
     const { t } = useTranslation();
     const { viewDispatch } = reactExports.useContext(ViewContext);
-    const { page } = useAnalytics();
-    reactExports.useEffect(() => {
-        page({
-            userJourney: UserJourney.SWAP,
-            screen: 'SwapInProgress',
-            extras: {
-                swapFormInfo: swapForm,
-            },
-        });
-    }, []);
     reactExports.useEffect(() => {
         (async () => {
             try {
@@ -1426,8 +1282,6 @@ function SwapInProgress({ transactionResponse, swapForm, }) {
     return (jsx(LoadingView, { loadingText: t('views.SWAP.IN_PROGRESS.loading.text') }));
 }
 
-const APPROVE_SPENDING = 'ApproveSpending';
-const APPROVE_SWAP = 'ApproveSwap';
 function ApproveERC20Onboarding({ data }) {
     const { t } = useTranslation();
     const { swapState: { allowedTokens } } = reactExports.useContext(SwapContext);
@@ -1445,16 +1299,6 @@ function ApproveERC20Onboarding({ data }) {
     // reject transaction flags
     const [rejectedSpending, setRejectedSpending] = reactExports.useState(false);
     const [rejectedSwap, setRejectedSwap] = reactExports.useState(false);
-    const { page, track } = useAnalytics();
-    reactExports.useEffect(() => {
-        page({
-            userJourney: UserJourney.SWAP,
-            screen: noApprovalTransaction ? APPROVE_SWAP : APPROVE_SPENDING,
-            extras: {
-                swapFormInfo: data.swapFormInfo,
-            },
-        });
-    }, []);
     // Get symbol from swap info for approve amount text
     const fromToken = reactExports.useMemo(() => allowedTokens.find((token) => token.address === data.swapFormInfo.fromTokenAddress), [allowedTokens, data.swapFormInfo.fromTokenAddress]);
     // Common error view function
@@ -1532,15 +1376,6 @@ function ApproveERC20Onboarding({ data }) {
     const handleApproveSpendingClick = reactExports.useCallback(async () => {
         if (loading)
             return;
-        track({
-            userJourney: UserJourney.SWAP,
-            screen: APPROVE_SPENDING,
-            control: APPROVE_SPENDING,
-            controlType: 'Button',
-            extras: {
-                autoProceed: data.autoProceed,
-            },
-        });
         setLoading(true);
         if (!checkout || !provider) {
             showErrorView();
@@ -1608,15 +1443,6 @@ function ApproveERC20Onboarding({ data }) {
     const handleApproveSwapClick = reactExports.useCallback(async () => {
         if (loading)
             return;
-        track({
-            userJourney: UserJourney.SWAP,
-            screen: APPROVE_SWAP,
-            control: APPROVE_SWAP,
-            controlType: 'Button',
-            extras: {
-                autoProceed: data.autoProceed,
-            },
-        });
         setLoading(true);
         if (!checkout || !provider) {
             showErrorView();
@@ -1773,7 +1599,6 @@ function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, autoProc
         history: [],
     });
     const [swapState, swapDispatch] = reactExports.useReducer(swapReducer, initialSwapState);
-    const { page } = useAnalytics();
     const [errorViewLoading, setErrorViewLoading] = reactExports.useState(false);
     const swapReducerValues = reactExports.useMemo(() => ({ swapState, swapDispatch }), [swapState, swapDispatch]);
     const viewReducerValues = reactExports.useMemo(() => ({ viewState, viewDispatch }), [viewState, viewDispatch]);
@@ -1891,22 +1716,8 @@ function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, autoProc
         return optionsArray;
     }, []);
     return (jsx(GeoblockLoader, { checkout: checkout, widget: (jsx(ViewContext.Provider, { value: viewReducerValues, children: jsxs(SwapContext.Provider, { value: swapReducerValues, children: [viewState.view.type === SharedViews.LOADING_VIEW && (jsx(LoadingView, { loadingText: t('views.LOADING_VIEW.text') })), viewState.view.type === SwapWidgetViews.SWAP && (jsx(SwapCoins, { theme: theme, themeOverrides: themeOverrides, cancelAutoProceed: cancelAutoProceed, fromAmount: viewState.view.data?.fromAmount ?? fromAmount, toAmount: viewState.view.data?.toAmount ?? toAmount, fromTokenAddress: viewState.view.data?.fromTokenAddress ?? fromTokenAddress, toTokenAddress: viewState.view.data?.toTokenAddress ?? toTokenAddress, showBackButton: showBackButton, showHeader: showHeader ?? true, title: customTitle ?? t('views.SWAP.header.title'), subTitle: customSubTitle ?? t('views.SWAP.content.title') })), viewState.view.type === SwapWidgetViews.IN_PROGRESS && (jsx(SwapInProgress, { transactionResponse: viewState.view.data.transactionResponse, swapForm: viewState.view.data.swapForm })), viewState.view.type === SwapWidgetViews.APPROVE_ERC20 && (jsx(ApproveERC20Onboarding, { data: viewState.view.data })), viewState.view.type === SwapWidgetViews.SUCCESS && (jsx(StatusView, { statusText: t('views.SWAP.success.text'), actionText: t('views.SWAP.success.actionText'), onRenderEvent: () => {
-                            page({
-                                userJourney: UserJourney.SWAP,
-                                screen: 'SwapSuccess',
-                                extras: {
-                                    fromTokenAddress: viewState.view.data?.fromTokenAddress,
-                                    fromAmount: viewState.view.data?.fromAmount,
-                                    toTokenAddress: viewState.view.data?.toTokenAddress,
-                                    toAmount: viewState.view.data?.toAmount,
-                                },
-                            });
                             sendSwapSuccessEvent(eventTarget, viewState.view.data.transactionHash);
                         }, onActionClick: () => sendSwapWidgetCloseEvent(eventTarget), statusType: StatusType.SUCCESS, testId: "success-view" })), viewState.view.type === SwapWidgetViews.FAIL && (jsx(StatusView, { statusText: t('views.SWAP.failed.text'), actionText: t('views.SWAP.failed.actionText'), onRenderEvent: () => {
-                            page({
-                                userJourney: UserJourney.SWAP,
-                                screen: 'SwapFailed',
-                            });
                             sendSwapFailedEvent(eventTarget, 'Transaction failed');
                         }, onActionClick: () => {
                             if (viewState.view.type === SwapWidgetViews.FAIL) {
@@ -1921,11 +1732,6 @@ function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, autoProc
                                 });
                             }
                         }, statusType: StatusType.FAILURE, onCloseClick: () => sendSwapWidgetCloseEvent(eventTarget), testId: "fail-view" })), viewState.view.type === SwapWidgetViews.PRICE_SURGE && (jsx(StatusView, { statusText: t('views.SWAP.rejected.text'), actionText: t('views.SWAP.rejected.actionText'), onRenderEvent: () => {
-                            page({
-                                userJourney: UserJourney.SWAP,
-                                screen: 'PriceSurge',
-                                extras: viewState.view.data,
-                            });
                             sendSwapRejectedEvent(eventTarget, 'Price surge');
                         }, onActionClick: () => {
                             if (viewState.view.type === SwapWidgetViews.PRICE_SURGE) {
@@ -1954,7 +1760,7 @@ function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, autoProc
                             viewDispatch({
                                 payload: { type: ViewActions.UPDATE_VIEW, view: { type: SwapWidgetViews.SWAP } },
                             });
-                        } })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx(TopUpView, { analytics: { userJourney: UserJourney.SWAP }, checkout: checkout, provider: provider, widgetEvent: IMTBLWidgetEvents.IMTBL_SWAP_WIDGET_EVENT, showOnrampOption: isOnRampEnabled, showSwapOption: isSwapEnabled, showBridgeOption: isBridgeEnabled, onCloseButtonClick: () => sendSwapWidgetCloseEvent(eventTarget) }))] }) })), serviceUnavailableView: (jsx(ServiceUnavailableToRegionErrorView, { service: ServiceType.SWAP, onCloseClick: () => sendSwapWidgetCloseEvent(window), showHeader: showHeader, primaryActionText: topUpOptions && topUpOptions?.length > 0
+                        } })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx(TopUpView, { checkout: checkout, provider: provider, widgetEvent: IMTBLWidgetEvents.IMTBL_SWAP_WIDGET_EVENT, showOnrampOption: isOnRampEnabled, showSwapOption: isSwapEnabled, showBridgeOption: isBridgeEnabled, onCloseButtonClick: () => sendSwapWidgetCloseEvent(eventTarget) }))] }) })), serviceUnavailableView: (jsx(ServiceUnavailableToRegionErrorView, { service: ServiceType.SWAP, onCloseClick: () => sendSwapWidgetCloseEvent(window), showHeader: showHeader, primaryActionText: topUpOptions && topUpOptions?.length > 0
                 ? t(topUpOptions[0].textKey)
                 : undefined, onPrimaryButtonClick: topUpOptions && topUpOptions?.length > 0
                 ? topUpOptions[0].action

package/dist/browser/{TokenImage-DucOedrZ.js → TokenImage-BeUf_Ulv.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, G as getDefaultTokenImage, q as jsx } from './index-2esq4Cem.js';
+import { r as reactExports, F as getDefaultTokenImage, q as jsx } from './index-CcxHW36j.js';
 
 function TokenImage({ src, name, environment, theme, defaultImage, ...forwardedProps }) {
     const [error, setError] = reactExports.useState(false);

package/dist/browser/{TopUpView-BIvdNYib.js → TopUpView-GMv3360Q.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, cb as formatUnits, q as jsx, s as jsxs, dI as isDualVariantIcon, aP as MenuItem, t as Box, u as useTranslation, aU as ViewContext, D as CryptoFiatContext, E as EventTargetContext, z as useAnalytics, a1 as CryptoFiatActions, dJ as DEFAULT_TOKEN_SYMBOLS, cT as GasEstimateType, J as HeaderNavigation, H as Heading, y as Body, x as SimpleLayout, I as IMTBLWidgetEvents, V as ViewActions, M as orchestrationEvents, bM as r } from './index-2esq4Cem.js';
+import { c3 as formatUnits, q as jsx, s as jsxs, dA as isDualVariantIcon, aK as MenuItem, t as Box, r as reactExports, u as useTranslation, aP as ViewContext, z as CryptoFiatContext, E as EventTargetContext, $ as CryptoFiatActions, dB as DEFAULT_TOKEN_SYMBOLS, cK as GasEstimateType, G as HeaderNavigation, H as Heading, y as Body, x as SimpleLayout, I as IMTBLWidgetEvents, V as ViewActions, K as orchestrationEvents, bG as r } from './index-CcxHW36j.js';
 
 var BridgeWidgetViews;
 (function (BridgeWidgetViews) {
@@ -16,32 +16,6 @@ var BridgeWidgetViews;
     BridgeWidgetViews["SERVICE_UNAVAILABLE"] = "SERVICE_UNAVAILABLE";
 })(BridgeWidgetViews || (BridgeWidgetViews = {}));
 
-/**
- * useMount hook to runs only once when the component mounts
- * after mounting condition is met
- *
- * @param fn function to run
- * @param shouldMount function to check mount condition
- * @param deps dependencies to watch for changes
- */
-const useMount = (fn, shouldMount, deps) => {
-    const isMounted = reactExports.useRef(false);
-    const shouldMountCheck = () => {
-        if (typeof shouldMount === 'function') {
-            return shouldMount();
-        }
-        return true;
-    };
-    reactExports.useEffect(() => {
-        if (isMounted.current)
-            return;
-        if (!shouldMountCheck())
-            return;
-        fn();
-        isMounted.current = true;
-    }, deps || []);
-};
-
 var SwapWidgetViews;
 (function (SwapWidgetViews) {
     SwapWidgetViews["SWAP"] = "SWAP";
@@ -147,9 +121,8 @@ const TOOLKIT_BASE_URL = {
 function TopUpView({ widgetEvent, checkout, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 provider, // Keep this for future use
-showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analytics, onCloseButtonClick, onBackButtonClick, heading, subheading, }) {
+showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, onCloseButtonClick, onBackButtonClick, heading, subheading, }) {
     const { t } = useTranslation();
-    const { userJourney } = analytics;
     const { viewDispatch } = reactExports.useContext(ViewContext);
     const { cryptoFiatState, cryptoFiatDispatch } = reactExports.useContext(CryptoFiatContext);
     const { conversions, fiatSymbol } = cryptoFiatState;
@@ -160,7 +133,6 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
     const [, setBridgeFeesInFiat] = reactExports.useState('-.--');
     const title = heading ? t(...heading) : t('views.TOP_UP_VIEW.header.title');
     const description = subheading ? t(...subheading) : null;
-    const { page, track } = useAnalytics();
     const isSwapAvailable = useAsyncMemo(async () => {
         if (!checkout)
             return undefined;
@@ -171,9 +143,6 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
             return false;
         }
     }, [checkout]);
-    useMount(() => {
-        page({ userJourney, screen: 'TopUp' });
-    });
     reactExports.useEffect(() => {
         if (!cryptoFiatDispatch)
             return;
@@ -206,15 +175,6 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
             setOnRampFeesPercentage(onRampFees);
         })();
     }, [checkout !== undefined]);
-    const localTrack = (control, extras, controlType = 'Button') => {
-        track({
-            userJourney,
-            screen: 'TopUp',
-            control,
-            controlType,
-            extras,
-        });
-    };
     const onClickSwap = () => {
         if (widgetEvent === IMTBLWidgetEvents.IMTBL_SWAP_WIDGET_EVENT) {
             const data = {
@@ -231,7 +191,6 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
                     },
                 },
             });
-            localTrack('Swap', { ...data, widgetEvent });
             return;
         }
         const data = {
@@ -240,7 +199,6 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
             amount: '',
         };
         orchestrationEvents.sendRequestSwapEvent(eventTarget, widgetEvent, data);
-        localTrack('Swap', { ...data, widgetEvent });
     };
     const onClickBridge = () => {
         if (widgetEvent === IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT) {
@@ -257,7 +215,6 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
                     },
                 },
             });
-            localTrack('Bridge', { ...data, widgetEvent });
             return;
         }
         const data = {
@@ -265,7 +222,6 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
             amount: '',
         };
         orchestrationEvents.sendRequestBridgeEvent(eventTarget, widgetEvent, data);
-        localTrack('Bridge', { ...data, widgetEvent });
     };
     const onClickOnRamp = () => {
         if (widgetEvent === IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT) {
@@ -282,7 +238,6 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
                     },
                 },
             });
-            localTrack('OnRamp', { ...data, widgetEvent });
             return;
         }
         const data = {
@@ -290,15 +245,9 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
             amount: amount ?? '',
         };
         orchestrationEvents.sendRequestOnrampEvent(eventTarget, widgetEvent, data);
-        localTrack('OnRamp', { ...data, widgetEvent });
     };
     const onClickAdvancedOptions = () => {
         const toolkitBaseUrl = TOOLKIT_BASE_URL[environment];
-        const data = {
-            tokenAddress: tokenAddress ?? '',
-            amount: amount ?? '',
-        };
-        localTrack('AdvancedOptions', { ...data, widgetEvent });
         window.open(`${toolkitBaseUrl}/squid-bridge/`, '_blank');
     };
     const renderFees = (txt) => (jsx(Box, { sx: {
@@ -362,4 +311,4 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
                             : t(`${element.textConfigKey}.caption`), onClick: element.onClickEvent, renderFeeFunction: element.fee, isDisabled: !element.isAvailable }, t(`${element.textConfigKey}.heading`).toLowerCase()))) })] }) }));
 }
 
-export { BridgeWidgetViews as B, OnRampWidgetViews as O, SwapWidgetViews as S, TopUpView as T, useMount as u };
+export { BridgeWidgetViews as B, OnRampWidgetViews as O, SwapWidgetViews as S, TopUpView as T };

package/dist/browser/{WalletApproveHero-ge2JSOYk.js → WalletApproveHero-BJi7ufqM.js}

@@ -1,5 +1,5 @@
-import { ac as hFlex, q as jsx, dx as motion, ae as _objectWithoutProperties, Q as useTheme, r as reactExports, ag as _slicedToArray, aq as useGetSubcomponentChild, al as merge, s as jsxs, dy as BaseClickable, b3 as ButtCon, au as SmartClone, dz as AnimatePresence, t as Box, w as Stack, dA as ClassNames, ad as _defineProperty, dB as getTertiaryButtonStyles, ar as flattenChildren, dC as isChildSubcomponent, aB as Divider, b4 as TextInput, dD as FormControlWrapper, u as useTranslation, aP as MenuItem, aA as Drawer, y as Body, aF as Fragment, z as useAnalytics, dE as Select, bM as r, dF as DuoCon, H as Heading, v as Button, cJ as retry, cR as NATIVE, b0 as getTokenImageByAddress, a$ as isNativeToken, ds as DEFAULT_BALANCE_RETRY_POLICY, aK as isPassportProvider, cO as isMetaMaskProvider, R as CloudImage, c5 as FooterLogo, X as getRemoteImage, cM as getChainNameById, cG as isWalletConnectProvider, d0 as heroBackGroundStyles, d1 as heroImageStyles, dG as heroImageBottomAlign } from './index-2esq4Cem.js';
-import { T as TokenImage } from './TokenImage-DucOedrZ.js';
+import { aa as hFlex, q as jsx, dn as motion, ac as _objectWithoutProperties, N as useTheme, r as reactExports, ae as _slicedToArray, ao as useGetSubcomponentChild, aj as merge, s as jsxs, dp as BaseClickable, a_ as ButtCon, as as SmartClone, dq as AnimatePresence, t as Box, w as Stack, dr as ClassNames, ab as _defineProperty, ds as getTertiaryButtonStyles, ap as flattenChildren, dt as isChildSubcomponent, az as Divider, a$ as TextInput, du as FormControlWrapper, u as useTranslation, aK as MenuItem, ay as Drawer, y as Body, aD as Fragment, dv as Select, bG as r, dw as DuoCon, H as Heading, v as Button, cB as retry, cI as NATIVE, aX as getTokenImageByAddress, aW as isNativeToken, di as DEFAULT_BALANCE_RETRY_POLICY, aG as isPassportProvider, dx as isMetaMaskProvider, Q as CloudImage, bZ as FooterLogo, R as getRemoteImage, cE as getChainNameById, cy as isWalletConnectProvider, cT as heroBackGroundStyles, cU as heroImageStyles, dy as heroImageBottomAlign } from './index-CcxHW36j.js';
+import { T as TokenImage } from './TokenImage-BeUf_Ulv.js';
 
 function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -371,8 +371,7 @@ function CoinSelector({ heading, options, defaultTokenImage, optionsLoading, chi
     return (jsxs(Drawer, { headerBarTitle: heading, size: "full", onCloseDrawer: handleCloseDrawer, visible: visible, bgOverlaySx: drawerBackground ? { background: drawerBackground } : undefined, children: [jsx(Drawer.Target, { children: children }), jsx(Drawer.Content, { children: jsxs(Box, { sx: selectOptionsContainerStyles, children: [optionsLoading && options.length === 0 && (jsxs(Box, { sx: selectOptionsLoadingIconStyles, children: [jsx(MenuItem, { shimmer: true, emphasized: true, testId: "balance-item-shimmer--1" }), jsx(MenuItem, { shimmer: true, emphasized: true, testId: "balance-item-shimmer--2" }), jsx(MenuItem, { shimmer: true, emphasized: true, testId: "balance-item-shimmer--3" })] })), !optionsLoading && options.length === 0 && (jsx(Body, { sx: { padding: 'base.spacing.x4' }, children: t('drawers.coinSelector.noCoins') })), !optionsLoading ? (jsxs(Fragment, { children: [jsx(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: true, children: jsx(TextInput.Icon, { icon: "Search" }) }), filteredOptions.map(({ onClick, icon, name, symbol, balance, id, testId, }) => (jsx(CoinSelectorOption, { id: id, testId: testId, onClick: onClick, icon: icon, name: name, symbol: symbol, balance: balance, defaultTokenImage: defaultTokenImage }, `${symbol}-${name}`)))] })) : null] }) })] }));
 }
 
-function SelectForm({ testId, options, optionsLoading, subtext, onSelectChange, textAlign, errorMessage, disabled, selectedOption, coinSelectorHeading, defaultTokenImage, userJourney, screen, control, environment = r.PRODUCTION, theme, themeOverrides, }) {
-    const { track } = useAnalytics();
+function SelectForm({ testId, options, optionsLoading, subtext, onSelectChange, textAlign, errorMessage, disabled, selectedOption, coinSelectorHeading, defaultTokenImage, environment = r.PRODUCTION, theme, themeOverrides, }) {
     const [coinSelectorOpen, setCoinSelectorOpen] = reactExports.useState(false);
     const coinSelectorOptions = reactExports.useMemo(() => options.map((option) => ({
         ...option,
@@ -394,14 +393,7 @@ function SelectForm({ testId, options, optionsLoading, subtext, onSelectChange,
     const filteredOption = options.find((o) => o.id === selectedOption) ?? selectedOption;
     const openCoinSelector = reactExports.useCallback(() => {
         setCoinSelectorOpen(true);
-        track({
-            userJourney,
-            screen,
-            control,
-            controlType: 'Select',
-            action: 'Opened',
-        });
-    }, [setCoinSelectorOpen, track]);
+    }, [setCoinSelectorOpen]);
     return (jsxs(Box, { children: [jsx(CoinSelector, { heading: coinSelectorHeading, options: coinSelectorOptions, defaultTokenImage: defaultTokenImage, optionsLoading: optionsLoading ?? false, visible: coinSelectorOpen, onCloseDrawer: () => setCoinSelectorOpen(false), drawerBackground: themeOverrides.drawerBackground }), jsx(FormControlWrapper, { testId: `${testId}-select-control`, textAlign: textAlign ?? 'left', subtext: errorMessage ? undefined : subtext, isErrored: !!errorMessage, errorMessage: errorMessage, children: jsx(Select, { testId: `${testId}-select`, size: "large", defaultLabel: "Select token", targetClickOveride: openCoinSelector, selectedOption: getSelectedOption(), sx: { minw: '170px' }, children: filteredOption && (jsxs(Select.Option, { optionKey: filteredOption.id, testId: filteredOption.testId, 
                         // select cannot currently be disabled so disabling at the option level for now
                         disabled: disabled, children: [!filteredOption.icon && (jsx(Select.Option.Icon, { icon: "Coins", variant: "bold" })), filteredOption.icon && (jsx(Select.Option.FramedImage, { use: (jsx(TokenImage, { environment: environment, theme: theme, src: filteredOption.icon, name: filteredOption.name })), circularFrame: true, sx: { background: 'base.color.translucent.standard.100' } })), jsx(Select.Option.Label, { children: filteredOption.symbol })] }, filteredOption.id)) }) })] }));