@imtbl/checkout-widgets 2.24.8 → 2.24.9-0

package/dist/browser/{WalletWidget-hiUotMuQ.js → WalletWidget-BABrqsfd.js}

@@ -1,6 +1,6 @@
-import { ae as _objectWithoutProperties, Q as useTheme, dK as getStartingSize, dL as DEFAULT_BUTTON_SIZE, al as merge, r as reactExports, ar as flattenChildren, q as jsx, dC as isChildSubcomponent, au as SmartClone, t as Box, dM as getResponsiveSx, dN as BUTTON_SIZES, dO as setDefaultSxBackgroundColor, b3 as ButtCon, dA as ClassNames, v as Button, ad as _defineProperty, l as TokenFilterTypes, u as useTranslation, aU as ViewContext, s as jsxs, y as Body, V as ViewActions, Z as ConnectLoaderContext, z as useAnalytics, E as EventTargetContext, bM as r, aP as MenuItem, F as tokenValueFormat, U as UserJourney, M as orchestrationEvents, I as IMTBLWidgetEvents, i as formatZeroAmount, aK as isPassportProvider, dP as ZERO_BALANCE_STRING, a$ as isNativeToken, dQ as sendNetworkSwitchEvent, cy as CheckoutErrorType, a5 as SharedViews, dR as NetworkFilterTypes, dS as sortNetworksCompareFn, cB as getChainImage, cJ as retry, ds as DEFAULT_BALANCE_RETRY_POLICY, dT as sortTokensByAmount, b0 as getTokenImageByAddress, j as calculateCryptoToFiat, D as CryptoFiatContext, a1 as CryptoFiatActions, J as HeaderNavigation, cQ as ButtonNavigationStyles, dU as sendWalletWidgetCloseEvent, c5 as FooterLogo, x as SimpleLayout, cP as WalletProviderName, cN as getWalletProviderNameByProvider, dI as isDualVariantIcon, ca as abbreviateWalletAddress, H as Heading, aA as Drawer, cD as useWalletConnect, dV as sendDisconnectWalletEvent, cG as isWalletConnectProvider, d0 as heroBackGroundStyles, d1 as heroImageStyles, dG as heroImageBottomAlign, d2 as SimpleTextBody, dW as FAQS_LINK, L as Link, bH as viewReducer, bI as initialViewState, Y as CryptoFiatProvider, a0 as LoadingView, a6 as ErrorView } from './index-2esq4Cem.js';
-import { T as TokenImage } from './TokenImage-DucOedrZ.js';
-import { u as useInterval } from './useInterval-1gu4cbu3.js';
+import { ac as _objectWithoutProperties, N as useTheme, dC as getStartingSize, dD as DEFAULT_BUTTON_SIZE, aj as merge, r as reactExports, ap as flattenChildren, q as jsx, dt as isChildSubcomponent, as as SmartClone, t as Box, dE as getResponsiveSx, dF as BUTTON_SIZES, dG as setDefaultSxBackgroundColor, a_ as ButtCon, dr as ClassNames, v as Button, ab as _defineProperty, l as TokenFilterTypes, u as useTranslation, aP as ViewContext, s as jsxs, y as Body, V as ViewActions, X as ConnectLoaderContext, E as EventTargetContext, bG as r, aK as MenuItem, D as tokenValueFormat, K as orchestrationEvents, I as IMTBLWidgetEvents, i as formatZeroAmount, aG as isPassportProvider, dH as ZERO_BALANCE_STRING, aW as isNativeToken, dI as sendNetworkSwitchEvent, cq as CheckoutErrorType, a3 as SharedViews, dJ as NetworkFilterTypes, dK as sortNetworksCompareFn, ct as getChainImage, cB as retry, di as DEFAULT_BALANCE_RETRY_POLICY, dL as sortTokensByAmount, aX as getTokenImageByAddress, j as calculateCryptoToFiat, z as CryptoFiatContext, $ as CryptoFiatActions, G as HeaderNavigation, cH as ButtonNavigationStyles, dM as sendWalletWidgetCloseEvent, bZ as FooterLogo, x as SimpleLayout, cG as WalletProviderName, cF as getWalletProviderNameByProvider, dA as isDualVariantIcon, c2 as abbreviateWalletAddress, H as Heading, ay as Drawer, cv as useWalletConnect, dN as sendDisconnectWalletEvent, cy as isWalletConnectProvider, cT as heroBackGroundStyles, cU as heroImageStyles, dy as heroImageBottomAlign, cV as SimpleTextBody, dO as FAQS_LINK, L as Link, bC as viewReducer, bD as initialViewState, U as CryptoFiatProvider, _ as LoadingView, a4 as ErrorView } from './index-CcxHW36j.js';
+import { T as TokenImage } from './TokenImage-BeUf_Ulv.js';
+import { u as useInterval } from './useInterval-DbCsm_gG.js';
 
 var horizontalMenuSxProps = {
   justifyContent: "stretch",
@@ -321,7 +321,6 @@ const ShowMenuItem = (show) => ({
 
 function BalanceItem({ balanceInfo, theme, bridgeToL2OnClick, }) {
     const { connectLoaderState } = reactExports.useContext(ConnectLoaderContext);
-    const { track } = useAnalytics();
     const { checkout, provider } = connectLoaderState;
     const fiatAmount = `≈ USD $${formatZeroAmount(balanceInfo.fiatAmount)}`;
     const { walletState } = reactExports.useContext(WalletContext);
@@ -388,16 +387,6 @@ function BalanceItem({ balanceInfo, theme, bridgeToL2OnClick, }) {
         swapAllowedTokens,
     ]);
     const handleAddTokenClick = () => {
-        track({
-            userJourney: UserJourney.WALLET,
-            screen: 'WalletBalances',
-            control: 'AddTokens',
-            controlType: 'Button',
-            extras: {
-                tokenSymbol: balanceInfo.symbol,
-                tokenAddress: balanceInfo.address,
-            },
-        });
         if (isAddTokensEnabled) {
             orchestrationEvents.sendRequestAddTokensEvent(eventTarget, IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, {
                 toAmount: '',
@@ -410,44 +399,13 @@ function BalanceItem({ balanceInfo, theme, bridgeToL2OnClick, }) {
             amount: '',
         });
     };
-    return (jsxs(MenuItem, { testId: `balance-item-${balanceInfo.symbol}`, emphasized: true, children: [jsx(MenuItem.FramedImage, { use: (jsx(TokenImage, { theme: theme, src: balanceInfo.icon, name: balanceInfo.symbol, environment: checkout?.config.environment ?? r.PRODUCTION })), circularFrame: true }), jsx(MenuItem.Label, { children: balanceInfo.symbol }), jsx(MenuItem.Caption, { children: balanceInfo.description }), jsx(MenuItem.PriceDisplay, { testId: `balance-item-${balanceInfo.symbol}`, price: tokenValueFormat(balanceInfo.balance), fiatAmount: fiatAmount }), (isOnRampEnabled || isSwapEnabled || isBridgeEnabled || isAddTokensEnabled) && (jsxs(MenuItem.OverflowPopoverMenu, { size: "small", testId: "token-menu", onClick: () => {
-                    track({
-                        userJourney: UserJourney.WALLET,
-                        screen: 'WalletBalances',
-                        control: 'BalanceItem',
-                        controlType: 'Button',
-                        extras: {
-                            tokenSymbol: balanceInfo.symbol,
-                            tokenAddress: balanceInfo.address,
-                        },
-                    });
-                }, children: [jsxs(MenuItem, { testId: "balance-item-add-option", sx: ShowMenuItem(showAddTokenMenuItem), onClick: handleAddTokenClick, children: [jsx(MenuItem.Icon, { icon: "Add" }), jsx(MenuItem.Label, { children: `Add ${balanceInfo.symbol}` })] }), jsxs(MenuItem, { testId: "balance-item-swap-option", sx: ShowMenuItem(isSwapEnabled), onClick: () => {
-                            track({
-                                userJourney: UserJourney.WALLET,
-                                screen: 'WalletBalances',
-                                control: 'SwapTokens',
-                                controlType: 'Button',
-                                extras: {
-                                    tokenSymbol: balanceInfo.symbol,
-                                    tokenAddress: balanceInfo.address,
-                                },
-                            });
+    return (jsxs(MenuItem, { testId: `balance-item-${balanceInfo.symbol}`, emphasized: true, children: [jsx(MenuItem.FramedImage, { use: (jsx(TokenImage, { theme: theme, src: balanceInfo.icon, name: balanceInfo.symbol, environment: checkout?.config.environment ?? r.PRODUCTION })), circularFrame: true }), jsx(MenuItem.Label, { children: balanceInfo.symbol }), jsx(MenuItem.Caption, { children: balanceInfo.description }), jsx(MenuItem.PriceDisplay, { testId: `balance-item-${balanceInfo.symbol}`, price: tokenValueFormat(balanceInfo.balance), fiatAmount: fiatAmount }), (isOnRampEnabled || isSwapEnabled || isBridgeEnabled || isAddTokensEnabled) && (jsxs(MenuItem.OverflowPopoverMenu, { size: "small", testId: "token-menu", children: [jsxs(MenuItem, { testId: "balance-item-add-option", sx: ShowMenuItem(showAddTokenMenuItem), onClick: handleAddTokenClick, children: [jsx(MenuItem.Icon, { icon: "Add" }), jsx(MenuItem.Label, { children: `Add ${balanceInfo.symbol}` })] }), jsxs(MenuItem, { testId: "balance-item-swap-option", sx: ShowMenuItem(isSwapEnabled), onClick: () => {
                             orchestrationEvents.sendRequestSwapEvent(eventTarget, IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, {
                                 fromTokenAddress: balanceInfo.address ?? '',
                                 toTokenAddress: '',
                                 amount: '',
                             });
                         }, children: [jsx(MenuItem.Icon, { icon: "Exchange" }), jsx(MenuItem.Label, { children: `Swap ${balanceInfo.symbol}` })] }), jsxs(MenuItem, { testId: "balance-item-move-option", sx: ShowMenuItem(isBridgeEnabled), onClick: () => {
-                            track({
-                                userJourney: UserJourney.WALLET,
-                                screen: 'WalletBalances',
-                                control: 'MoveTokens',
-                                controlType: 'Button',
-                                extras: {
-                                    tokenSymbol: balanceInfo.symbol,
-                                    tokenAddress: balanceInfo.address,
-                                },
-                            });
                             bridgeToL2OnClick(balanceInfo.address);
                         }, children: [jsx(MenuItem.Icon, { icon: "Minting" }), jsx(MenuItem.Label, { children: `Move ${balanceInfo.symbol}` })] })] }))] }));
 }
@@ -507,19 +465,9 @@ function NetworkMenu() {
     const { walletState, walletDispatch } = reactExports.useContext(WalletContext);
     const { network } = walletState;
     const [allowedNetworks, setNetworks] = reactExports.useState([]);
-    const { track } = useAnalytics();
     const switchNetwork = reactExports.useCallback(async (chainId) => {
         if (!checkout || !provider || !network || Number(network.chainId) === chainId)
             return;
-        track({
-            userJourney: UserJourney.WALLET,
-            screen: 'WalletBalances',
-            control: 'SwitchNetwork',
-            controlType: 'Button',
-            extras: {
-                chainId,
-            },
-        });
         try {
             const switchNetworkResult = await checkout.switchNetwork({
                 provider,
@@ -650,18 +598,11 @@ function WalletBalances({ balancesLoading, theme, showNetworkMenu, }) {
     const { conversions } = cryptoFiatState;
     const isPassport = isPassportProvider(provider);
     const enableNetworkMenu = !isPassport && showNetworkMenu;
-    const { track, page } = useAnalytics();
     const balanceInfos = reactExports.useMemo(() => {
         if (!network?.chainId)
             return [];
         return mapTokenBalancesWithConversions(Number(network.chainId), tokenBalances, conversions);
     }, [tokenBalances, conversions, network?.chainId]);
-    reactExports.useEffect(() => {
-        page({
-            userJourney: UserJourney.WALLET,
-            screen: 'WalletBalances',
-        });
-    }, []);
     reactExports.useEffect(() => {
         (async () => {
             if (!checkout)
@@ -697,12 +638,6 @@ function WalletBalances({ balancesLoading, theme, showNetworkMenu, }) {
                 || supportedTopUps?.isOnRampEnabled));
     }, [checkout, network, supportedTopUps]);
     const handleAddCoinsClick = () => {
-        track({
-            userJourney: UserJourney.WALLET,
-            screen: 'WalletBalances',
-            control: 'AddCoins',
-            controlType: 'Button',
-        });
         orchestrationEvents.sendRequestAddTokensEvent(eventTarget, IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, {});
     };
     const handleBridgeToL2OnClick = (address) => {
@@ -712,12 +647,6 @@ function WalletBalances({ balancesLoading, theme, showNetworkMenu, }) {
         });
     };
     return (jsx(SimpleLayout, { testId: "wallet-balances", header: (jsx(HeaderNavigation, { title: t('views.WALLET_BALANCES.header.title'), rightActions: (jsx(ButtCon, { icon: "SettingsCog", sx: ButtonNavigationStyles(), iconVariant: "bold", onClick: () => {
-                    track({
-                        userJourney: UserJourney.WALLET,
-                        screen: 'WalletBalances',
-                        control: 'Settings',
-                        controlType: 'Button',
-                    });
                     viewDispatch({
                         payload: {
                             type: ViewActions.UPDATE_VIEW,
@@ -747,7 +676,6 @@ function WalletAddress({ provider, showL1Warning, setShowL1Warning, }) {
     const [walletAddress, setWalletAddress] = reactExports.useState('');
     const [isCopied, setIsCopied] = reactExports.useState(false);
     const { t } = useTranslation();
-    const { track } = useAnalytics();
     const ctaIcon = reactExports.useMemo(() => {
         if (isPassportProvider(provider) && !showL1Warning) {
             return 'ShowPassword';
@@ -764,12 +692,6 @@ function WalletAddress({ provider, showL1Warning, setShowL1Warning, }) {
     }, [provider, walletAddress]);
     const handleIconClick = async () => {
         if (walletAddress && ctaIcon === 'CopyText') {
-            track({
-                userJourney: UserJourney.WALLET,
-                screen: 'Settings',
-                control: 'CopyWalletAddress',
-                controlType: 'Button',
-            });
             navigator.clipboard.writeText(walletAddress);
             setIsCopied(true);
             setTimeout(() => setIsCopied(false), 1000);
@@ -833,13 +755,6 @@ function Settings({ showDisconnectButton }) {
     const { provider } = connectLoaderState;
     const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
     const { ethereumProvider } = useWalletConnect();
-    const { page } = useAnalytics();
-    reactExports.useEffect(() => {
-        page({
-            userJourney: UserJourney.WALLET,
-            screen: 'Settings',
-        });
-    }, []);
     // disconnect all Wallet Connect pairings and disconnect the provider
     // so that restoreSession doesn't pick up the previous sessions
     const handleWCDisconnect = async () => {
@@ -890,13 +805,6 @@ function CoinInfo() {
     const { t } = useTranslation();
     const { connectLoaderState: { provider } } = reactExports.useContext(ConnectLoaderContext);
     const isPassport = isPassportProvider(provider);
-    const { page } = useAnalytics();
-    reactExports.useEffect(() => {
-        page({
-            userJourney: UserJourney.WALLET,
-            screen: 'CoinInfo',
-        });
-    }, []);
     return (jsxs(SimpleLayout, { testId: "coin-info", header: jsx(HeaderNavigation, { showBack: true, transparent: true }), footer: jsx(FooterLogo, {}), heroContent: jsx(IMXCoinsHero, {}), floatHeader: true, children: [!isPassport && (jsx(SimpleTextBody, { heading: t('views.COIN_INFO.metamask.heading'), children: t('views.COIN_INFO.metamask.body') })), isPassport && (jsxs(SimpleTextBody, { heading: t('views.COIN_INFO.passport.heading'), children: [t('views.COIN_INFO.passport.body1'), jsx(Link, { onClick: () => window.open(FAQS_LINK), children: t('views.COIN_INFO.passport.linkText') }), t('views.COIN_INFO.passport.body2')] }))] }));
 }