@imtbl/checkout-widgets 2.24.8 → 2.24.9-1

package/dist/browser/{CommerceWidget-CcCuv661.js → CommerceWidget-BPFWRX2R.js}

@@ -1,16 +1,16 @@
-import { I as IMTBLWidgetEvents, C as CommerceFlowType, P as ProviderEventType, a as CommerceEventType, b as ConnectEventType, c as CommerceFailureEventType, d as CommerceSuccessEventType, W as WalletEventType, e as CommerceUserActionEventType, S as SwapEventType, A as AddTokensEventType, B as BridgeEventType, O as OnRampEventType, f as SaleEventType, g as PurchaseEventType, T as TransferEventType, h as OrchestrationEventType, r as reactExports, V as ViewActions, p as parseUnits, i as formatZeroAmount, j as calculateCryptoToFiat, k as Contract, l as TokenFilterTypes, u as useTranslation, m as dist, n as getRemoteRive, o as BlockExplorerService, q as jsx, s as jsxs, t as Box, H as Heading, L as Link, v as Button, w as Stack, x as SimpleLayout, y as Body, z as useAnalytics, E as EventTargetContext, D as CryptoFiatContext, F as tokenValueFormat, G as getDefaultTokenImage, U as UserJourney, J as HeaderNavigation, K as sendCloseWidgetEvent, M as orchestrationEvents$1, N as amountInputValidation, Q as useTheme, R as CloudImage, X as getRemoteImage, Y as CryptoFiatProvider, Z as ConnectLoaderContext, _ as isAddress, $ as isError, a0 as LoadingView, a1 as CryptoFiatActions, a2 as useViewState, a3 as useEventTargetState, a4 as commerceFlows, a5 as SharedViews, a6 as ErrorView, a7 as ConnectWidget, a8 as ProvidersContextProvider, a9 as PurchaseWidget, aa as ConnectLoader, ab as ViewContextProvider } from './index-2esq4Cem.js';
-import { S as SelectInput, a as SwapWidget } from './SwapWidget-C4B2Answ.js';
-import { B as BridgeWidget } from './BridgeWidget-6KlgTXwZ.js';
-import OnRampWidget from './OnRampWidget-DaL34PiA.js';
-import WalletWidget from './WalletWidget-hiUotMuQ.js';
-import SaleWidget from './SaleWidget-D-IBBRTL.js';
-import AddTokensWidget from './AddTokensWidget-BQfrLKCo.js';
-import { g as getAllowedBalances, T as TextInputForm } from './WalletApproveHero-ge2JSOYk.js';
-import './useInterval-1gu4cbu3.js';
-import './TopUpView-BIvdNYib.js';
-import './FeesBreakdown-DvoQJlP-.js';
-import './SpendingCapHero-Z5NIcrWw.js';
-import './TokenImage-DucOedrZ.js';
+import { I as IMTBLWidgetEvents, C as CommerceFlowType, P as ProviderEventType, a as CommerceEventType, b as ConnectEventType, c as CommerceFailureEventType, d as CommerceSuccessEventType, W as WalletEventType, e as CommerceUserActionEventType, S as SwapEventType, A as AddTokensEventType, B as BridgeEventType, O as OnRampEventType, f as SaleEventType, g as PurchaseEventType, T as TransferEventType, h as OrchestrationEventType, r as reactExports, V as ViewActions, p as parseUnits, i as formatZeroAmount, j as calculateCryptoToFiat, k as Contract, l as TokenFilterTypes, u as useTranslation, m as dist, n as getRemoteRive, o as BlockExplorerService, q as jsx, s as jsxs, t as Box, H as Heading, L as Link, v as Button, w as Stack, x as SimpleLayout, y as Body, E as EventTargetContext, z as CryptoFiatContext, D as tokenValueFormat, F as getDefaultTokenImage, G as HeaderNavigation, J as sendCloseWidgetEvent, K as orchestrationEvents$1, M as amountInputValidation, N as useTheme, Q as CloudImage, R as getRemoteImage, U as CryptoFiatProvider, X as ConnectLoaderContext, Y as isAddress, Z as isError, _ as LoadingView, $ as CryptoFiatActions, a0 as useViewState, a1 as useEventTargetState, a2 as commerceFlows, a3 as SharedViews, a4 as ErrorView, a5 as ConnectWidget, a6 as ProvidersContextProvider, a7 as PurchaseWidget, a8 as ConnectLoader, a9 as ViewContextProvider } from './index-Bs2uHEgi.js';
+import { S as SelectInput, a as SwapWidget } from './SwapWidget-r9E9O8w8.js';
+import { B as BridgeWidget } from './BridgeWidget-BPonD-21.js';
+import OnRampWidget from './OnRampWidget-BahAHZlJ.js';
+import WalletWidget from './WalletWidget-Bf6bDJdr.js';
+import SaleWidget from './SaleWidget-CaNtBz3t.js';
+import AddTokensWidget from './AddTokensWidget-CAnsz6Ds.js';
+import { g as getAllowedBalances, T as TextInputForm } from './WalletApproveHero-ZZhVhTT2.js';
+import './useInterval-C6NhVtCa.js';
+import './TopUpView-CKIcuXnF.js';
+import './FeesBreakdown-7fI38j9m.js';
+import './SpendingCapHero-SdeBfZ_3.js';
+import './TokenImage-Cc4dAr3U.js';
 
 const sendCheckoutEvent = (eventTarget, detail) => {
     const event = new CustomEvent(IMTBLWidgetEvents.IMTBL_COMMERCE_WIDGET_EVENT, { detail });
@@ -720,7 +720,6 @@ function AwaitingApproval({ config }) {
 
 function TransferForm({ config, viewState, setViewState, onSend, showBackButton, showHeader, title, coinAmountTitle, }) {
     const { t } = useTranslation();
-    const { track } = useAnalytics();
     const { eventTargetState: { eventTarget } } = reactExports.useContext(EventTargetContext);
     const { cryptoFiatState } = reactExports.useContext(CryptoFiatContext);
     const tokenOptions = reactExports.useMemo(() => viewState.allowedBalances.map((tokenBalance) => ({
@@ -738,35 +737,21 @@ function TransferForm({ config, viewState, setViewState, onSend, showBackButton,
     const defaultTokenImage = reactExports.useMemo(() => getDefaultTokenImage(viewState.checkout.config.environment, config.theme), [viewState.checkout.config.environment, config.theme]);
     const fromFiatValue = reactExports.useMemo(() => calculateCryptoToFiat(viewState.amount, token?.symbol || '', cryptoFiatState.conversions), [viewState.amount, token, cryptoFiatState.conversions]);
     const handleTokenChange = reactExports.useCallback((optionKey) => {
-        track({
-            screen: 'TransferToken',
-            userJourney: UserJourney.TRANSFER,
-            control: 'SelectToken',
-            controlType: 'Select',
-            extras: { token: optionKey },
-        });
         if (typeof optionKey !== 'string')
             throw new Error('Invalid token address');
         setViewState((s) => ({ ...s, tokenAddress: optionKey, amountError: '' }));
-    }, [setViewState, track]);
+    }, [setViewState]);
     const handleMaxButtonClick = reactExports.useCallback(() => {
         if (!token)
             throw new Error('Token not found');
         if (!token.balance)
             throw new Error('Token balance not found');
-        track({
-            screen: 'TransferToken',
-            userJourney: UserJourney.TRANSFER,
-            control: 'Max',
-            controlType: 'Button',
-            extras: { token: token.id, amount: token.balance.fullBalance },
-        });
         setViewState((s) => {
             if (!token.balance)
                 throw new Error('Token balance not found');
             return { ...s, amount: token.balance.fullBalance };
         });
-    }, [token, setViewState, track]);
+    }, [token, setViewState]);
     const handleRecipientAddressChange = reactExports.useCallback((value) => {
         setViewState((s) => ({ ...s, toAddress: value, toAddressError: '' }));
     }, [setViewState]);
@@ -786,7 +771,7 @@ function TransferForm({ config, viewState, setViewState, onSend, showBackButton,
                 mt: 'base.spacing.x6',
                 mx: 'base.spacing.x4',
                 mb: 'base.spacing.x10',
-            }, children: [jsxs(Stack, { gap: "base.spacing.x9", children: [jsxs(Stack, { gap: "base.spacing.x1", children: [jsx(Heading, { size: "xSmall", children: coinAmountTitle }), jsx(SelectInput, { testId: "transfer-token-select", options: tokenOptions, textInputValue: viewState.amount, textInputPlaceholder: "0", textInputTextAlign: "right", coinSelectorHeading: t('views.TRANSFER.form.coinSelectorHeading'), textInputMaxButtonClick: token ? handleMaxButtonClick : undefined, textInputValidator: amountInputValidation, textInputErrorMessage: viewState.amountError, selectSubtext: selectSubtext, textInputSubtext: `${t('views.TRANSFER.content.fiatPricePrefix')} $${formatZeroAmount(fromFiatValue, true)}`, onTextInputChange: handleAmountChange, onSelectChange: handleTokenChange, selectedOption: token?.id, defaultTokenImage: defaultTokenImage, userJourney: UserJourney.TRANSFER, screen: "TransferToken", control: "Token", theme: config.theme, themeOverrides: config.themeOverrides })] }), jsxs(Stack, { gap: "base.spacing.x1", children: [jsx(Heading, { size: "xSmall", children: t('views.TRANSFER.form.toAddressHeading') }), jsx(TextInputForm, { testId: "transfer-to-address-input", value: viewState.toAddress, placeholder: "0x", validator: validatePartialAddress, onTextInputChange: handleRecipientAddressChange, errorMessage: viewState.toAddressError })] })] }), jsxs(Box, { children: [jsx(Body, { rc: jsx("div", {}), size: "xSmall", weight: "bold", sx: { color: 'base.color.text.status.fatal.primary' }, children: t('views.TRANSFER.content.notAllExchangesSupportImmutableZkEVM') }), jsx(Body, { rc: jsx("div", {}), size: "xxSmall", weight: "regular", sx: { mb: 'base.spacing.x4' }, children: t('views.TRANSFER.content.notAllExchangesSupportImmutableZkEVMDescription') }), jsx(Button, { sx: { width: '100%' }, variant: "primary", size: "large", disabled: isButtonDisabled, onClick: onSend, children: t('views.TRANSFER.form.buttonText') })] })] }) }));
+            }, children: [jsxs(Stack, { gap: "base.spacing.x9", children: [jsxs(Stack, { gap: "base.spacing.x1", children: [jsx(Heading, { size: "xSmall", children: coinAmountTitle }), jsx(SelectInput, { testId: "transfer-token-select", options: tokenOptions, textInputValue: viewState.amount, textInputPlaceholder: "0", textInputTextAlign: "right", coinSelectorHeading: t('views.TRANSFER.form.coinSelectorHeading'), textInputMaxButtonClick: token ? handleMaxButtonClick : undefined, textInputValidator: amountInputValidation, textInputErrorMessage: viewState.amountError, selectSubtext: selectSubtext, textInputSubtext: `${t('views.TRANSFER.content.fiatPricePrefix')} $${formatZeroAmount(fromFiatValue, true)}`, onTextInputChange: handleAmountChange, onSelectChange: handleTokenChange, selectedOption: token?.id, defaultTokenImage: defaultTokenImage, theme: config.theme, themeOverrides: config.themeOverrides })] }), jsxs(Stack, { gap: "base.spacing.x1", children: [jsx(Heading, { size: "xSmall", children: t('views.TRANSFER.form.toAddressHeading') }), jsx(TextInputForm, { testId: "transfer-to-address-input", value: viewState.toAddress, placeholder: "0x", validator: validatePartialAddress, onTextInputChange: handleRecipientAddressChange, errorMessage: viewState.toAddressError })] })] }), jsxs(Box, { children: [jsx(Body, { rc: jsx("div", {}), size: "xSmall", weight: "bold", sx: { color: 'base.color.text.status.fatal.primary' }, children: t('views.TRANSFER.content.notAllExchangesSupportImmutableZkEVM') }), jsx(Body, { rc: jsx("div", {}), size: "xxSmall", weight: "regular", sx: { mb: 'base.spacing.x4' }, children: t('views.TRANSFER.content.notAllExchangesSupportImmutableZkEVMDescription') }), jsx(Button, { sx: { width: '100%' }, variant: "primary", size: "large", disabled: isButtonDisabled, onClick: onSend, children: t('views.TRANSFER.form.buttonText') })] })] }) }));
 }
 
 const sendSuccessEvent = (eventTarget, transactionHash) => {
@@ -839,7 +824,6 @@ function TransferWidgetInner(props) {
     const { t } = useTranslation();
     const { cryptoFiatDispatch } = reactExports.useContext(CryptoFiatContext);
     const { eventTargetState: { eventTarget } } = reactExports.useContext(EventTargetContext);
-    const { track } = useAnalytics();
     const { connectLoaderState: { checkout, provider }, } = reactExports.useContext(ConnectLoaderContext);
     const [viewState, setViewState] = reactExports.useState({
         type: 'INITIALISING',
@@ -877,13 +861,6 @@ function TransferWidgetInner(props) {
     const onSend = reactExports.useCallback(async () => {
         if (viewState.type !== 'FORM')
             throw new Error('Unexpected state');
-        track({
-            screen: 'TransferToken',
-            userJourney: UserJourney.TRANSFER,
-            control: 'Send',
-            controlType: 'Button',
-            extras: { token: viewState.tokenAddress, amount: viewState.amount },
-        });
         if (!isAddress(viewState.toAddress)) {
             setViewState((s) => ({ ...s, toAddressError: 'Invalid wallet address' }));
             return;
@@ -945,13 +922,6 @@ function TransferWidgetInner(props) {
                 && e.error
                 && 'code' in e.error
                 && e.error.code === TRANSACTION_CANCELLED_ERROR_CODE) {
-                track({
-                    screen: 'TransferToken',
-                    userJourney: UserJourney.TRANSFER,
-                    control: 'TranactionCancel',
-                    controlType: 'Event',
-                    extras: { token: viewState.tokenAddress, amount: viewState.amount },
-                });
                 sendRejectedEvent(eventTarget, 'Transaction cancelled');
             }
             else {
@@ -961,7 +931,7 @@ function TransferWidgetInner(props) {
                 setViewState({ ...viewState, type: 'FORM' }); // TODO: We should be showing a failed view here
             }
         }
-    }, [viewState, eventTarget, track]);
+    }, [viewState, eventTarget]);
     switch (viewState.type) {
         case 'INITIALISING':
             return jsx(LoadingView, { loadingText: t('views.LOADING_VIEW.text') });

package/dist/browser/{FeesBreakdown-DvoQJlP-.js → FeesBreakdown-7fI38j9m.js}

@@ -1,4 +1,4 @@
-import { cv as axios, dH as IMMUTABLE_API_BASE_URL, s as jsxs, q as jsx, y as Body, bF as PriceDisplay, t as Box, u as useTranslation, aA as Drawer, aP as MenuItem, aF as Fragment, aB as Divider, F as tokenValueFormat, i as formatZeroAmount, c5 as FooterLogo } from './index-2esq4Cem.js';
+import { cn as axios, dz as IMMUTABLE_API_BASE_URL, s as jsxs, q as jsx, y as Body, bz as PriceDisplay, t as Box, u as useTranslation, ay as Drawer, aK as MenuItem, aD as Fragment, az as Divider, D as tokenValueFormat, i as formatZeroAmount, bZ as FooterLogo } from './index-Bs2uHEgi.js';
 
 const fetchRiskAssessmentV2 = async (assessmentData, config) => {
     const result = Object.fromEntries(assessmentData.map((data) => [data.address.toLowerCase(), { sanctioned: false }]));

package/dist/browser/{OnRampWidget-DaL34PiA.js → OnRampWidget-BahAHZlJ.js}

@@ -1,6 +1,6 @@
-import { r as reactExports, Z as ConnectLoaderContext, E as EventTargetContext, u as useTranslation, aU as ViewContext, a5 as SharedViews, z as useAnalytics, U as UserJourney, V as ViewActions, q as jsx, x as SimpleLayout, J as HeaderNavigation, d9 as sendOnRampWidgetCloseEvent, M as orchestrationEvents, I as IMTBLWidgetEvents, t as Box, aK as isPassportProvider, da as url, db as TRANSAK_ORIGIN, dc as ExchangeType, c5 as FooterLogo, s as jsxs, d2 as SimpleTextBody, bH as viewReducer, bI as initialViewState, cR as NATIVE, a0 as LoadingView, dd as sendOnRampSuccessEvent, c6 as StatusType, d8 as StatusView, de as sendOnRampFailedEvent, bQ as ServiceUnavailableErrorView } from './index-2esq4Cem.js';
-import { O as OnRampWidgetViews, T as TopUpView } from './TopUpView-BIvdNYib.js';
-import { S as SpendingCapHero } from './SpendingCapHero-Z5NIcrWw.js';
+import { r as reactExports, X as ConnectLoaderContext, E as EventTargetContext, u as useTranslation, aP as ViewContext, a3 as SharedViews, V as ViewActions, q as jsx, x as SimpleLayout, G as HeaderNavigation, d0 as sendOnRampWidgetCloseEvent, K as orchestrationEvents, I as IMTBLWidgetEvents, t as Box, d1 as url, d2 as TRANSAK_ORIGIN, d3 as ExchangeType, bZ as FooterLogo, s as jsxs, cV as SimpleTextBody, bC as viewReducer, bD as initialViewState, cI as NATIVE, _ as LoadingView, d4 as sendOnRampSuccessEvent, b_ as StatusType, c$ as StatusView, d5 as sendOnRampFailedEvent, bK as ServiceUnavailableErrorView } from './index-Bs2uHEgi.js';
+import { O as OnRampWidgetViews, T as TopUpView } from './TopUpView-CKIcuXnF.js';
+import { S as SpendingCapHero } from './SpendingCapHero-SdeBfZ_3.js';
 
 const containerStyle = (showIframe) => ({
     position: 'relative',
@@ -50,15 +50,6 @@ function useWidgetUrl(checkout, provider, tokenAddress, tokenAmount, passport, s
     }, [checkout, provider, tokenAddress, tokenAmount, passport, showMenu, customSubTitle]);
     return widgetUrl;
 }
-function useWalletAddress(provider) {
-    const [userWalletAddress, setUserWalletAddress] = reactExports.useState(undefined);
-    reactExports.useEffect(() => {
-        if (!provider)
-            return;
-        provider.getSigner().then((signer) => signer.getAddress()).then(setUserWalletAddress);
-    }, [provider]);
-    return userWalletAddress;
-}
 function OnRampMain({ passport, showIframe, tokenAmount, tokenAddress, showBackButton, showMenu, customTitle, customSubTitle, showHeader = true, }) {
     const { connectLoaderState } = reactExports.useContext(ConnectLoaderContext);
     const { checkout, provider } = connectLoaderState;
@@ -66,76 +57,11 @@ function OnRampMain({ passport, showIframe, tokenAmount, tokenAddress, showBackB
     const { t } = useTranslation();
     const { viewState, viewDispatch } = reactExports.useContext(ViewContext);
     const widgetUrl = useWidgetUrl(checkout, provider, tokenAddress, tokenAmount, passport, showMenu, customSubTitle);
-    const userWalletAddress = useWalletAddress(provider);
     const eventTimer = reactExports.useRef();
-    const isPassport = !!passport && isPassportProvider(provider);
     const openedFromTopUpView = reactExports.useMemo(() => viewState.history.length > 2
         && viewState.history[viewState.history.length - 2].type
             === SharedViews.TOP_UP_VIEW, [viewState.history]);
     const showBack = showBackButton || openedFromTopUpView;
-    const { track } = useAnalytics();
-    const trackSegmentEvents = reactExports.useCallback(async (event, walletAddress) => {
-        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;
-        }
-    }, [isPassport, track]);
     const transakEventHandler = reactExports.useCallback((event) => {
         if (eventTimer.current)
             clearTimeout(eventTimer.current);
@@ -219,7 +145,6 @@ function OnRampMain({ passport, showIframe, tokenAmount, tokenAddress, showBackB
             if (event.source === domIframe.contentWindow
                 && host
                 && TRANSAK_ORIGIN.includes(host)) {
-                trackSegmentEvents(event.data, userWalletAddress ?? '');
                 transakEventHandler(event.data);
             }
         };
@@ -228,7 +153,7 @@ function OnRampMain({ passport, showIframe, tokenAmount, tokenAddress, showBackB
         return () => {
             window.removeEventListener('message', handleTransakEvents);
         };
-    }, [trackSegmentEvents, transakEventHandler, userWalletAddress]);
+    }, [transakEventHandler]);
     return (jsx(Box, { sx: boxMainStyle(showIframe), children: jsx(SimpleLayout, { header: showHeader ? (jsx(HeaderNavigation, { title: customTitle ?? t('views.ONRAMP.header.title'), onCloseButtonClick: () => sendOnRampWidgetCloseEvent(eventTarget), showBack: showBack, onBackButtonClick: () => {
                     orchestrationEvents.sendRequestGoBackEvent(eventTarget, IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT, {});
                 } })) : undefined, footerBackgroundColor: "base.color.translucent.emphasis.200", children: jsx(Box, { sx: containerStyle(showIframe), children: jsx("iframe", { title: "Transak", id: transakIframeId, src: widgetUrl, allow: "camera;microphone;fullscreen;payment", referrerPolicy: "strict-origin-when-cross-origin", style: {
@@ -288,7 +213,7 @@ function OnRampWidget({ amount, tokenAddress, config, showBackButton, onrampConf
                         },
                     });
                 }, statusType: StatusType.FAILURE, onCloseClick: () => sendOnRampWidgetCloseEvent(eventTarget), testId: "fail-view" })), (viewState.view.type !== OnRampWidgetViews.SUCCESS
-                && viewState.view.type !== OnRampWidgetViews.FAIL) && (jsx(OnRampMain, { passport: checkout?.passport, showIframe: showIframe, tokenAmount: amount ?? viewState.view.data?.amount, tokenAddress: tknAddr ?? viewState.view.data?.tokenAddress, showBackButton: showBackButton, showMenu: onrampConfig?.showMenu, customTitle: onrampConfig?.customTitle, customSubTitle: onrampConfig?.customSubTitle, showHeader: onrampConfig?.showHeader })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx(TopUpView, { analytics: { userJourney: UserJourney.ON_RAMP }, widgetEvent: IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT, checkout: checkout, provider: provider, showOnrampOption: isOnRampEnabled, showSwapOption: isSwapEnabled, showBridgeOption: isBridgeEnabled, onCloseButtonClick: () => sendOnRampWidgetCloseEvent(eventTarget) })), viewState.view.type
+                && viewState.view.type !== OnRampWidgetViews.FAIL) && (jsx(OnRampMain, { passport: checkout?.passport, showIframe: showIframe, tokenAmount: amount ?? viewState.view.data?.amount, tokenAddress: tknAddr ?? viewState.view.data?.tokenAddress, showBackButton: showBackButton, showMenu: onrampConfig?.showMenu, customTitle: onrampConfig?.customTitle, customSubTitle: onrampConfig?.customSubTitle, showHeader: onrampConfig?.showHeader })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx(TopUpView, { widgetEvent: IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT, checkout: checkout, provider: provider, showOnrampOption: isOnRampEnabled, showSwapOption: isSwapEnabled, showBridgeOption: isBridgeEnabled, onCloseButtonClick: () => sendOnRampWidgetCloseEvent(eventTarget) })), viewState.view.type
                 === SharedViews.SERVICE_UNAVAILABLE_ERROR_VIEW && (jsx(ServiceUnavailableErrorView, { onCloseClick: () => sendOnRampWidgetCloseEvent(eventTarget) }))] }));
 }