@imtbl/sdk 1.2.0 → 1.4.0-alpha.2

package/dist/browser/checkout/SaleWidget-8b73504f.js

@@ -0,0 +1,1610 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback, createContext, useRef, useContext, useEffect, useMemo, useReducer } from 'react';
+import { RoutingOutcomeType, ItemType, TransactionOrGasType, GasTokenType, FundingStepType, SalePaymentTypes, IMTBLWidgetEvents, ConnectTargetLayer, SwapEventType, BridgeEventType, ConnectEventType, ChainId, BlockExplorerService } from '@imtbl/checkout-sdk';
+import { Environment } from '@imtbl/config';
+import { useTranslation } from 'react-i18next';
+import { M as SaleErrorTypes, k as getL2ChainId, N as NATIVE, x as calculateCryptoToFiat, P as formatFiatString, Q as SmartCheckoutErrorTypes, V as ViewContext, b as ViewActions, R as SaleWidgetViews, T as FundWithSmartCheckoutSubViews, C as ConnectLoaderContext, X as eventTargetReducer, Y as initialEventTargetState, l as getL1ChainId, _ as EventTargetActions, E as EventTargetContext, L as LoadingView, $ as ConnectWidget, a0 as ConnectWidgetViews, a1 as ConnectLoaderActions, t as tokenValueFormat, a as SimpleLayout, H as HeaderNavigation, a2 as sendSaleWidgetCloseEvent, F as FooterLogo, u as useAnalytics, U as UserJourney, a3 as sendSaleSuccessEvent, a4 as sendSaleFailedEvent, a5 as sendSaleTransactionSuccessEvent, a6 as sendSalePaymentMethodEvent, a7 as CenteredBoxContent, a8 as LoadingBox, S as SharedViews, o as orchestrationEvents, f as StatusType, d as StatusView, a9 as widgetTheme, v as viewReducer, i as initialViewState } from './index-4511315b.js';
+import { BigNumber } from 'ethers';
+import { parseUnits } from 'ethers/lib/utils';
+import { MenuItem, Heading, HorizontalMenu, Button, Drawer, Box, Body, Banner, Link } from '@biom3/react';
+import { B as BridgeWidget, g as getChainNameById } from './BridgeWidget-52ba2210.js';
+import SwapWidget from './SwapWidget-e52876ac.js';
+import { C as CryptoFiatContext, a as CryptoFiatActions, b as CryptoFiatProvider } from './TopUpView-590c2c4c.js';
+import { u as useTransakEvents } from './useTransakEvents-54a554e5.js';
+import pako from 'pako';
+import '@biom3/design-tokens';
+import '@imtbl/react-analytics';
+import 'react-dom/client';
+import '@ethersproject/providers';
+import 'i18next';
+import 'i18next-browser-languagedetector';
+import '@imtbl/bridge-sdk';
+import 'axios';
+import './retry-254e3478.js';
+import './balance-e5d785aa.js';
+import '@rive-app/react-canvas';
+import '@imtbl/dex-sdk';
+import './SpendingCapHero-43c9cf8c.js';
+import '@imtbl/cryptofiat';
+import 'url';
+
+/* eslint-disable @typescript-eslint/naming-convention */
+const PRIMARY_SALES_API_BASE_URL = {
+    [Environment.SANDBOX]: 'https://api.sandbox.immutable.com/v1/primary-sales',
+    [Environment.PRODUCTION]: 'https://api.immutable.com/v1/primary-sales',
+};
+var SignCurrencyFilter;
+(function (SignCurrencyFilter) {
+    SignCurrencyFilter["CONTRACT_ADDRESS"] = "contract_address";
+    SignCurrencyFilter["CURRENCY_SYMBOL"] = "currency_symbol";
+})(SignCurrencyFilter || (SignCurrencyFilter = {}));
+const toSignedProduct = (product, currency, item) => ({
+    productId: product.product_id,
+    image: item?.image || '',
+    qty: item?.qty || 1,
+    name: item?.name || '',
+    description: item?.description || '',
+    currency,
+    contractType: product.contract_type,
+    collectionAddress: product.collection_address,
+    amount: product.detail.map(({ amount }) => amount),
+    tokenId: product.detail.map(({ token_id: tokenId }) => tokenId),
+});
+const toSignResponse = (signApiResponse, items) => {
+    const { order, transactions } = signApiResponse;
+    return {
+        order: {
+            currency: {
+                name: order.currency.name,
+                erc20Address: order.currency.erc20_address,
+            },
+            products: order.products
+                .map((product) => toSignedProduct(product, order.currency.name, items.find((item) => item.productId === product.product_id)))
+                .reduce((acc, product) => {
+                const index = acc.findIndex((n) => n.name === product.name);
+                if (index === -1) {
+                    acc.push({ ...product });
+                }
+                if (index > -1) {
+                    acc[index].amount = [...acc[index].amount, ...product.amount];
+                    acc[index].tokenId = [...acc[index].tokenId, ...product.tokenId];
+                }
+                return acc;
+            }, []),
+            totalAmount: Number(order.total_amount),
+        },
+        transactions: transactions.map((transaction) => ({
+            tokenAddress: transaction.contract_address,
+            gasEstimate: transaction.gas_estimate,
+            methodCall: transaction.method_call,
+            params: {
+                reference: transaction.params.reference || '',
+                amount: transaction.params.amount || 0,
+                spender: transaction.params.spender || '',
+            },
+            rawData: transaction.raw_data,
+        })),
+    };
+};
+const useSignOrder = (input) => {
+    const { provider, items, fromTokenAddress, recipientAddress, env, environmentId, } = input;
+    const [signError, setSignError] = useState(undefined);
+    const [signResponse, setSignResponse] = useState(undefined);
+    const [executeResponse, setExecuteResponse] = useState({
+        done: false,
+        transactions: [],
+    });
+    const setExecuteTransactions = (transaction) => {
+        setExecuteResponse((prev) => ({
+            ...prev,
+            transactions: [...prev.transactions, transaction],
+        }));
+    };
+    const setExecuteDone = () => setExecuteResponse((prev) => ({ ...prev, done: true }));
+    const setExecuteFailed = () => setExecuteResponse({
+        done: false,
+        transactions: [],
+    });
+    const sendTransaction = useCallback(async (to, data, gasLimit, method) => {
+        let transactionHash;
+        try {
+            const signer = provider?.getSigner();
+            const gasPrice = await provider?.getGasPrice();
+            const txnResponse = await signer?.sendTransaction({
+                to,
+                data,
+                gasPrice,
+                gasLimit,
+            });
+            setExecuteTransactions({ method, hash: txnResponse?.hash });
+            await txnResponse?.wait(1);
+            transactionHash = txnResponse?.hash || '';
+            return [transactionHash, undefined];
+        }
+        catch (err) {
+            const reason = `${err?.reason || err?.message || ''}`.toLowerCase();
+            transactionHash = err?.transactionHash;
+            let errorType = SaleErrorTypes.WALLET_FAILED;
+            if (reason.includes('rejected') && reason.includes('user')) {
+                errorType = SaleErrorTypes.WALLET_REJECTED;
+            }
+            if (reason.includes('failed to submit')
+                && reason.includes('highest gas limit')) {
+                errorType = SaleErrorTypes.WALLET_REJECTED_NO_FUNDS;
+            }
+            if (reason.includes('status failed')
+                || reason.includes('transaction failed')) {
+                errorType = SaleErrorTypes.TRANSACTION_FAILED;
+            }
+            setSignError({
+                type: errorType,
+                data: { error: err },
+            });
+            return [undefined, err];
+        }
+    }, [provider]);
+    const sign = useCallback(async (paymentType) => {
+        try {
+            const data = {
+                recipient_address: recipientAddress,
+                payment_type: paymentType,
+                currency_filter: SignCurrencyFilter.CONTRACT_ADDRESS,
+                currency_value: fromTokenAddress,
+                products: items.map((item) => ({
+                    product_id: item.productId,
+                    quantity: item.qty,
+                })),
+            };
+            const baseUrl = `${PRIMARY_SALES_API_BASE_URL[env]}/${environmentId}/order/sign`;
+            const response = await fetch(baseUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            });
+            const { ok, status } = response;
+            if (!ok) {
+                const { code } = (await response.json());
+                let errorType;
+                switch (status) {
+                    case 400:
+                        errorType = SaleErrorTypes.SERVICE_BREAKDOWN;
+                        break;
+                    case 404:
+                        if (code === 'insufficient_stock') {
+                            errorType = SaleErrorTypes.INSUFFICIENT_STOCK;
+                        }
+                        else {
+                            errorType = SaleErrorTypes.PRODUCT_NOT_FOUND;
+                        }
+                        break;
+                    case 429:
+                    case 500:
+                        errorType = SaleErrorTypes.DEFAULT;
+                        break;
+                    default:
+                        throw new Error('Unknown error');
+                }
+                setSignError({ type: errorType });
+                return undefined;
+            }
+            const responseData = toSignResponse(await response.json(), items);
+            setSignResponse(responseData);
+            return responseData;
+        }
+        catch (e) {
+            setSignError({ type: SaleErrorTypes.DEFAULT, data: { error: e } });
+        }
+        return undefined;
+    }, [items, fromTokenAddress, recipientAddress, environmentId, env, provider]);
+    const execute = async (signData, onTxnSuccess, onTxnError) => {
+        if (!signData) {
+            setSignError({
+                type: SaleErrorTypes.DEFAULT,
+                data: { reason: 'No sign data' },
+            });
+            return [];
+        }
+        let successful = true;
+        const execTransactions = [];
+        for (const transaction of signData.transactions) {
+            const { tokenAddress: to, rawData: data, methodCall: method, gasEstimate, } = transaction;
+            // eslint-disable-next-line no-await-in-loop
+            const [hash, txnError] = await sendTransaction(to, data, gasEstimate, method);
+            if (txnError || !hash) {
+                successful = false;
+                onTxnError(txnError, execTransactions);
+                break;
+            }
+            execTransactions.push({ method, hash });
+            onTxnSuccess({ method, hash });
+        }
+        (successful ? setExecuteDone : setExecuteFailed)();
+        return execTransactions;
+    };
+    return {
+        sign,
+        signResponse,
+        signError,
+        execute,
+        executeResponse,
+    };
+};
+
+const MAX_GAS_LIMIT$1 = '30000000';
+const getItemRequirements = (amount, spenderAddress, tokenAddress) => [
+    {
+        type: ItemType.ERC20,
+        tokenAddress,
+        spenderAddress,
+        amount,
+    },
+];
+const getGasEstimate = () => ({
+    type: TransactionOrGasType.GAS,
+    gasToken: {
+        type: GasTokenType.NATIVE,
+        limit: BigNumber.from(MAX_GAS_LIMIT$1),
+    },
+});
+const isUserFractionalBalanceBlocked = async (walletAddress, tokenAddress, amount, checkout, provider) => {
+    const chainId = getL2ChainId(checkout.config);
+    const balanceResponse = await checkout.getAllBalances({ provider: provider, walletAddress, chainId });
+    const zero = BigNumber.from('0');
+    const purchaseBalance = balanceResponse.balances.find((balance) => balance.token.address === tokenAddress);
+    if (!purchaseBalance) {
+        return false;
+    }
+    const formattedAmount = parseUnits(amount, purchaseBalance.token.decimals);
+    if (purchaseBalance.balance.gt(zero) && purchaseBalance.balance.lt(formattedAmount)) {
+        return true;
+    }
+    const isPassport = !!provider?.provider?.isPassport;
+    if (isPassport) {
+        return false;
+    }
+    const imxBalance = balanceResponse.balances.find((balance) => balance.token.address === NATIVE);
+    const imxBalanceAmount = imxBalance ? imxBalance.balance : BigNumber.from('0');
+    if (imxBalanceAmount.gte(zero) && imxBalanceAmount.lt(BigNumber.from(MAX_GAS_LIMIT$1))) {
+        return true;
+    }
+    return false;
+};
+const fundingRouteFees = (fundingRoute, conversions) => {
+    const fees = [];
+    for (const step of fundingRoute.steps) {
+        switch (step.type) {
+            case FundingStepType.BRIDGE:
+                fees.push(step.fees.approvalGasFee);
+                fees.push(...step.fees.bridgeFees);
+                fees.push(step.fees.bridgeGasFee);
+                break;
+            case FundingStepType.SWAP:
+                fees.push(step.fees.approvalGasFee);
+                fees.push(...step.fees.swapFees);
+                fees.push(step.fees.swapGasFee);
+                break;
+        }
+    }
+    let totalUsd = 0;
+    for (const fee of fees) {
+        if (fee.token) {
+            const feeUsd = calculateCryptoToFiat(fee.formattedAmount, fee.token.symbol, conversions);
+            totalUsd += parseFloat(feeUsd);
+        }
+    }
+    return formatFiatString(totalUsd);
+};
+const smartCheckoutTokensList = (smartCheckoutResult) => {
+    if (smartCheckoutResult.sufficient
+        || smartCheckoutResult.router.routingOutcome.type !== RoutingOutcomeType.ROUTES_FOUND) {
+        return [];
+    }
+    const tokenSymbols = [];
+    for (const requirement of smartCheckoutResult.transactionRequirements) {
+        const { token } = requirement.current;
+        if (!tokenSymbols.includes(token.symbol)) {
+            tokenSymbols.push(token.symbol);
+        }
+    }
+    for (const fundingRoute of smartCheckoutResult.router.routingOutcome.fundingRoutes) {
+        for (const step of fundingRoute.steps) {
+            if (!tokenSymbols.includes(step.fundingItem.token.symbol)) {
+                tokenSymbols.push(step.fundingItem.token.symbol);
+            }
+        }
+    }
+    return tokenSymbols;
+};
+const filterSmartCheckoutResult = (smartCheckoutResult) => {
+    if (smartCheckoutResult.sufficient
+        || smartCheckoutResult.router.routingOutcome.type !== RoutingOutcomeType.ROUTES_FOUND) {
+        return smartCheckoutResult;
+    }
+    const filteredFundingRoutes = smartCheckoutResult.router.routingOutcome.fundingRoutes
+        .filter((route) => !route.steps.some((step) => step.type !== FundingStepType.SWAP));
+    let routingOutcome;
+    if (filteredFundingRoutes.length === 0) {
+        routingOutcome = {
+            type: RoutingOutcomeType.NO_ROUTES_FOUND,
+            message: 'Smart Checkout did not find any Swap routes to fulfill the transaction',
+        };
+    }
+    else {
+        routingOutcome = {
+            type: RoutingOutcomeType.ROUTES_FOUND,
+            fundingRoutes: filteredFundingRoutes,
+        };
+    }
+    return {
+        ...smartCheckoutResult,
+        router: {
+            ...smartCheckoutResult.router,
+            routingOutcome,
+        },
+    };
+};
+
+const useSmartCheckout = ({ checkout, provider, items, amount, tokenAddress, }) => {
+    const [smartCheckoutResult, setSmartCheckoutResult] = useState(undefined);
+    const [smartCheckoutError, setSmartCheckoutError] = useState(undefined);
+    const smartCheckout = useCallback(async () => {
+        try {
+            const signer = provider?.getSigner();
+            const spenderAddress = await signer?.getAddress() || '';
+            const userFractionalBalanceBlocked = await isUserFractionalBalanceBlocked(spenderAddress, tokenAddress, amount, checkout, provider);
+            if (userFractionalBalanceBlocked) {
+                throw new Error(SmartCheckoutErrorTypes.FRACTIONAL_BALANCE_BLOCKED);
+            }
+            const itemRequirements = getItemRequirements(amount, spenderAddress, tokenAddress);
+            const gasEstimate = getGasEstimate();
+            const res = await checkout?.smartCheckout({
+                provider: provider,
+                itemRequirements,
+                transactionOrGasAmount: gasEstimate,
+            });
+            if (!res) {
+                throw new Error();
+            }
+            const result = { ...res };
+            const filteredSmartCheckoutResult = filterSmartCheckoutResult(result);
+            setSmartCheckoutResult(filteredSmartCheckoutResult);
+            return result;
+        }
+        catch (err) {
+            setSmartCheckoutError({
+                type: SaleErrorTypes.SMART_CHECKOUT_ERROR,
+                data: { error: err },
+            });
+        }
+        return undefined;
+    }, [checkout, provider, items, amount, tokenAddress]);
+    return {
+        smartCheckout, smartCheckoutResult, smartCheckoutError,
+    };
+};
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const SaleContext = createContext({
+    items: [],
+    amount: '',
+    fromTokenAddress: '',
+    collectionName: '',
+    provider: undefined,
+    checkout: undefined,
+    environmentId: '',
+    env: '',
+    recipientAddress: '',
+    recipientEmail: '',
+    sign: () => Promise.resolve(undefined),
+    execute: () => Promise.resolve([]),
+    signResponse: undefined,
+    signError: undefined,
+    executeResponse: undefined,
+    passport: undefined,
+    isPassportWallet: false,
+    paymentMethod: undefined,
+    setPaymentMethod: () => { },
+    goBackToPaymentMethods: () => { },
+    goToErrorView: () => { },
+    goToSuccessView: () => { },
+    config: {},
+    querySmartCheckout: () => Promise.resolve(undefined),
+    smartCheckoutResult: undefined,
+    fundingRoutes: [],
+    disabledPaymentTypes: [],
+    invalidParameters: false,
+});
+SaleContext.displayName = 'SaleSaleContext';
+/** Max attemps to retry with same payment method */
+const MAX_ERROR_RETRIES = 1;
+function SaleContextProvider(props) {
+    const { children, value: { config, env, environmentId, items, amount, fromTokenAddress, provider, checkout, passport, collectionName, }, } = props;
+    const errorRetries = useRef(0);
+    const { viewDispatch } = useContext(ViewContext);
+    const [{ recipientEmail, recipientAddress }, setUserInfo] = useState({
+        recipientEmail: '',
+        recipientAddress: '',
+    });
+    const [paymentMethod, setPaymentMethod] = useState(undefined);
+    const [fundingRoutes, setFundingRoutes] = useState([]);
+    const [disabledPaymentTypes, setDisabledPaymentTypes] = useState([]);
+    const [invalidParameters, setInvalidParameters] = useState(false);
+    const goBackToPaymentMethods = useCallback((type, showInsufficientCoinsBanner) => {
+        setPaymentMethod(type);
+        viewDispatch({
+            payload: {
+                type: ViewActions.UPDATE_VIEW,
+                view: {
+                    type: SaleWidgetViews.PAYMENT_METHODS,
+                    data: {
+                        showInsufficientCoinsBanner,
+                    },
+                },
+            },
+        });
+    }, []);
+    useEffect(() => {
+        const getUserInfo = async () => {
+            const signer = provider?.getSigner();
+            const address = (await signer?.getAddress()) || '';
+            const email = (await passport?.getUserInfo())?.email || '';
+            setUserInfo({ recipientEmail: email, recipientAddress: address });
+        };
+        getUserInfo();
+    }, [provider]);
+    const { sign: signOrder, execute, signResponse, signError, executeResponse, } = useSignOrder({
+        items,
+        provider,
+        fromTokenAddress,
+        recipientAddress,
+        environmentId,
+        env,
+    });
+    const sign = useCallback(async (type, callback) => {
+        const response = await signOrder(type);
+        if (!response)
+            return undefined;
+        callback?.(response);
+        return response;
+    }, [signOrder]);
+    const goToErrorView = useCallback((errorType, data = {}) => {
+        errorRetries.current += 1;
+        if (errorRetries.current > MAX_ERROR_RETRIES) {
+            errorRetries.current = 0;
+            setPaymentMethod(undefined);
+        }
+        viewDispatch({
+            payload: {
+                type: ViewActions.UPDATE_VIEW,
+                view: {
+                    type: SaleWidgetViews.SALE_FAIL,
+                    data: {
+                        ...data,
+                        errorType,
+                        paymentMethod,
+                        transactions: executeResponse.transactions,
+                    },
+                },
+            },
+        });
+    }, [paymentMethod, setPaymentMethod, executeResponse]);
+    const goToSuccessView = useCallback((data) => {
+        viewDispatch({
+            payload: {
+                type: ViewActions.UPDATE_VIEW,
+                view: {
+                    type: SaleWidgetViews.SALE_SUCCESS,
+                    data: {
+                        paymentMethod,
+                        transactions: executeResponse.transactions,
+                        ...data,
+                    },
+                },
+            },
+        });
+    }, [[paymentMethod, executeResponse]]);
+    useEffect(() => {
+        if (!signError)
+            return;
+        goToErrorView(signError.type, signError.data);
+    }, [signError]);
+    const { smartCheckout, smartCheckoutResult, smartCheckoutError } = useSmartCheckout({
+        provider,
+        checkout,
+        items,
+        amount,
+        tokenAddress: fromTokenAddress,
+    });
+    useEffect(() => {
+        if (!smartCheckoutError)
+            return;
+        if (smartCheckoutError.data?.error?.message === SmartCheckoutErrorTypes.FRACTIONAL_BALANCE_BLOCKED) {
+            setDisabledPaymentTypes([SalePaymentTypes.CRYPTO]);
+            goBackToPaymentMethods(undefined, true);
+            return;
+        }
+        goToErrorView(smartCheckoutError.type, smartCheckoutError.data);
+    }, [smartCheckoutError]);
+    const querySmartCheckout = useCallback(async (callback) => {
+        const result = await smartCheckout();
+        callback?.(result);
+        return result;
+    }, [smartCheckout]);
+    useEffect(() => {
+        if (!smartCheckoutResult) {
+            return;
+        }
+        if (smartCheckoutResult.sufficient) {
+            sign(SalePaymentTypes.CRYPTO);
+            viewDispatch({
+                payload: {
+                    type: ViewActions.UPDATE_VIEW,
+                    view: {
+                        type: SaleWidgetViews.PAY_WITH_COINS,
+                    },
+                },
+            });
+        }
+        if (!smartCheckoutResult.sufficient) {
+            switch (smartCheckoutResult.router.routingOutcome.type) {
+                case RoutingOutcomeType.ROUTES_FOUND:
+                    setFundingRoutes(smartCheckoutResult.router.routingOutcome.fundingRoutes);
+                    viewDispatch({
+                        payload: {
+                            type: ViewActions.UPDATE_VIEW,
+                            view: {
+                                type: SaleWidgetViews.FUND_WITH_SMART_CHECKOUT,
+                                subView: FundWithSmartCheckoutSubViews.FUNDING_ROUTE_SELECT,
+                            },
+                        },
+                    });
+                    break;
+                case RoutingOutcomeType.NO_ROUTES_FOUND:
+                case RoutingOutcomeType.NO_ROUTE_OPTIONS:
+                default:
+                    setFundingRoutes([]);
+                    setPaymentMethod(undefined);
+                    setDisabledPaymentTypes([SalePaymentTypes.CRYPTO]);
+                    goBackToPaymentMethods(undefined, true);
+                    break;
+            }
+        }
+    }, [smartCheckoutResult]);
+    useEffect(() => {
+        const invalidItems = !items || items.length === 0;
+        const invalidAmount = !amount || amount === '0';
+        const invalidFromTokenAddress = !fromTokenAddress || !fromTokenAddress.startsWith('0x');
+        if (invalidItems || invalidAmount || invalidFromTokenAddress || !collectionName || !environmentId) {
+            setInvalidParameters(true);
+        }
+    }, [items, amount, fromTokenAddress, collectionName, environmentId]);
+    const values = useMemo(() => ({
+        config,
+        items,
+        amount,
+        fromTokenAddress,
+        sign,
+        signResponse,
+        signError,
+        execute,
+        executeResponse,
+        environmentId,
+        collectionName,
+        env,
+        provider,
+        checkout,
+        recipientAddress,
+        recipientEmail,
+        paymentMethod,
+        setPaymentMethod,
+        goBackToPaymentMethods,
+        goToErrorView,
+        goToSuccessView,
+        isPassportWallet: !!provider?.provider?.isPassport,
+        querySmartCheckout,
+        smartCheckoutResult,
+        fundingRoutes,
+        disabledPaymentTypes,
+        invalidParameters,
+    }), [
+        config,
+        env,
+        environmentId,
+        items,
+        amount,
+        fromTokenAddress,
+        collectionName,
+        provider,
+        checkout,
+        recipientAddress,
+        recipientEmail,
+        signResponse,
+        signError,
+        executeResponse,
+        paymentMethod,
+        goBackToPaymentMethods,
+        goToErrorView,
+        goToSuccessView,
+        sign,
+        querySmartCheckout,
+        smartCheckoutResult,
+        fundingRoutes,
+        disabledPaymentTypes,
+        invalidParameters,
+    ]);
+    return jsx(SaleContext.Provider, { value: values, children: children });
+}
+function useSaleContext() {
+    return useContext(SaleContext);
+}
+
+var FundingRouteExecuteViews;
+(function (FundingRouteExecuteViews) {
+    FundingRouteExecuteViews["LOADING"] = "LOADING";
+    FundingRouteExecuteViews["EXECUTE_BRIDGE"] = "EXECUTE_BRIDGE";
+    FundingRouteExecuteViews["EXECUTE_SWAP"] = "EXECUTE_SWAP";
+    FundingRouteExecuteViews["SWITCH_NETWORK_ETH"] = "SWITCH_NETWORK_ETH";
+    FundingRouteExecuteViews["SWITCH_NETWORK_ZKEVM"] = "SWITCH_NETWORK_ZKEVM";
+})(FundingRouteExecuteViews || (FundingRouteExecuteViews = {}));
+function FundingRouteExecute({ fundingRouteStep, onFundingRouteExecuted }) {
+    const { t } = useTranslation();
+    const { config, provider, checkout, fromTokenAddress: requiredTokenAddress, } = useSaleContext();
+    const { viewDispatch } = useContext(ViewContext);
+    const { connectLoaderDispatch } = useContext(ConnectLoaderContext);
+    const [swapParams, setSwapParams] = useState(undefined);
+    const [bridgeParams, setBridgeParams] = useState(undefined);
+    const [view, setView] = useState(FundingRouteExecuteViews.LOADING);
+    const nextView = useRef(false);
+    const stepSuccess = useRef(undefined);
+    const stepFailed = useRef(undefined);
+    const [eventTargetState, eventTargetDispatch] = useReducer(eventTargetReducer, initialEventTargetState);
+    const eventTargetReducerValues = useMemo(() => ({ eventTargetState, eventTargetDispatch }), [eventTargetState, eventTargetDispatch]);
+    const eventTarget = new EventTarget();
+    const sendFailEvent = (errorData) => {
+        viewDispatch({
+            payload: {
+                type: ViewActions.UPDATE_VIEW,
+                view: {
+                    type: SaleWidgetViews.SALE_FAIL,
+                    data: {
+                        errorType: SaleErrorTypes.SMART_CHECKOUT_EXECUTE_ERROR,
+                        errorData,
+                    },
+                },
+            },
+        });
+    };
+    const handleStep = useCallback(async (step) => {
+        if (!checkout || !provider) {
+            throw new Error('checkout or provider not available.');
+        }
+        const network = await checkout.getNetworkInfo({
+            provider,
+        });
+        if (step.type === FundingStepType.BRIDGE) {
+            setBridgeParams({
+                tokenAddress: step.fundingItem.token.address,
+                amount: step.fundingItem.fundsRequired.formattedAmount,
+            });
+            if (network.chainId === getL1ChainId(checkout.config)) {
+                setView(FundingRouteExecuteViews.EXECUTE_BRIDGE);
+                return;
+            }
+            nextView.current = FundingRouteExecuteViews.EXECUTE_BRIDGE;
+            setView(FundingRouteExecuteViews.SWITCH_NETWORK_ETH);
+        }
+        if (step.type === FundingStepType.SWAP) {
+            setSwapParams({
+                amount: step.fundingItem.fundsRequired.formattedAmount,
+                fromTokenAddress: step.fundingItem.token.address,
+                toTokenAddress: requiredTokenAddress,
+            });
+            if (network.chainId === getL2ChainId(checkout.config)) {
+                setView(FundingRouteExecuteViews.EXECUTE_SWAP);
+                return;
+            }
+            nextView.current = FundingRouteExecuteViews.EXECUTE_SWAP;
+            setView(FundingRouteExecuteViews.SWITCH_NETWORK_ZKEVM);
+        }
+    }, [provider, checkout]);
+    useEffect(() => {
+        if (!fundingRouteStep) {
+            return;
+        }
+        try {
+            handleStep(fundingRouteStep);
+        }
+        catch (err) {
+            sendFailEvent(err);
+        }
+    }, [fundingRouteStep]);
+    const onCloseWidget = () => {
+        // Need to check SUCCESS first, as it's possible for widget to emit both FAILED and SUCCESS.
+        if (stepSuccess.current) {
+            stepSuccess.current = undefined;
+            stepFailed.current = undefined;
+            onFundingRouteExecuted();
+        }
+        else {
+            sendFailEvent(stepFailed.current);
+        }
+    };
+    const handleCustomEvent = (event) => {
+        switch (event.detail.type) {
+            case BridgeEventType.TRANSACTION_SENT:
+            case SwapEventType.SUCCESS: {
+                const successEvent = event.detail.data;
+                stepSuccess.current = successEvent;
+                break;
+            }
+            case BridgeEventType.FAILURE:
+            case SwapEventType.FAILURE: {
+                // On FAILURE, widget will prompt user to try again.
+                // We need to know if it failed though when they close the widget
+                const failureEvent = event.detail.data;
+                stepFailed.current = failureEvent;
+                break;
+            }
+            case BridgeEventType.CLOSE_WIDGET:
+            case SwapEventType.CLOSE_WIDGET: {
+                onCloseWidget();
+                break;
+            }
+            case SwapEventType.REJECTED:
+        }
+    };
+    const handleConnectEvent = (event) => {
+        switch (event.detail.type) {
+            case ConnectEventType.SUCCESS: {
+                const eventData = event.detail.data;
+                connectLoaderDispatch({
+                    payload: {
+                        type: ConnectLoaderActions.SET_PROVIDER,
+                        provider: eventData.provider,
+                    },
+                });
+                if (nextView.current !== false) {
+                    setView(nextView.current);
+                    nextView.current = false;
+                }
+                break;
+            }
+            case ConnectEventType.FAILURE:
+            case ConnectEventType.CLOSE_WIDGET:
+            default:
+                onCloseWidget();
+                break;
+        }
+    };
+    useEffect(() => {
+        // Handle the connect event when switching networks
+        eventTarget.addEventListener(IMTBLWidgetEvents.IMTBL_CONNECT_WIDGET_EVENT, handleConnectEvent);
+        // Handle the other widget events
+        eventTarget.addEventListener(IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT, handleCustomEvent);
+        eventTarget.addEventListener(IMTBLWidgetEvents.IMTBL_SWAP_WIDGET_EVENT, handleCustomEvent);
+        // Remove the custom event listener when the component unmounts
+        return () => {
+            eventTarget.removeEventListener(IMTBLWidgetEvents.IMTBL_CONNECT_WIDGET_EVENT, handleConnectEvent);
+            eventTarget.removeEventListener(IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT, handleCustomEvent);
+            eventTarget.removeEventListener(IMTBLWidgetEvents.IMTBL_SWAP_WIDGET_EVENT, handleCustomEvent);
+        };
+    }, []);
+    useEffect(() => {
+        eventTargetDispatch({
+            payload: {
+                type: EventTargetActions.SET_EVENT_TARGET,
+                eventTarget,
+            },
+        });
+    }, [checkout]);
+    return (jsxs(EventTargetContext.Provider, { value: eventTargetReducerValues, children: [view === FundingRouteExecuteViews.LOADING && (jsx(LoadingView, { loadingText: t('views.FUND_WITH_SMART_CHECKOUT.loading.checkingBalances') })), view === FundingRouteExecuteViews.EXECUTE_BRIDGE && (jsx(BridgeWidget, { ...bridgeParams, config: config, checkout: checkout })), view === FundingRouteExecuteViews.EXECUTE_SWAP && (jsx(SwapWidget, { ...swapParams, config: config })), view === FundingRouteExecuteViews.SWITCH_NETWORK_ETH && (jsx(ConnectWidget, { config: config, targetLayer: ConnectTargetLayer.LAYER1, web3Provider: provider, checkout: checkout, deepLink: ConnectWidgetViews.SWITCH_NETWORK })), view === FundingRouteExecuteViews.SWITCH_NETWORK_ZKEVM && (jsx(ConnectWidget, { config: config, targetLayer: ConnectTargetLayer.LAYER2, web3Provider: provider, checkout: checkout, deepLink: ConnectWidgetViews.SWITCH_NETWORK }))] }));
+}
+
+// Taken from packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.tsx
+const networkIcon = {
+    [ChainId.IMTBL_ZKEVM_DEVNET]: 'Immutable',
+    [ChainId.IMTBL_ZKEVM_MAINNET]: 'Immutable',
+    [ChainId.IMTBL_ZKEVM_TESTNET]: 'Immutable',
+    [ChainId.ETHEREUM]: 'EthToken',
+    [ChainId.SEPOLIA]: 'EthToken',
+};
+const logoColour = {
+    [ChainId.IMTBL_ZKEVM_DEVNET]: 'base.color.text.link.primary',
+    [ChainId.IMTBL_ZKEVM_TESTNET]: 'base.color.text.link.primary',
+    [ChainId.IMTBL_ZKEVM_MAINNET]: 'base.color.text.link.primary',
+    [ChainId.ETHEREUM]: 'base.color.accent.5',
+    [ChainId.SEPOLIA]: 'base.color.accent.5',
+};
+function FundingRouteMenuItem({ onClick, fundingRoute, toggleVisible, selected, size = 'small', }) {
+    const { t } = useTranslation();
+    const firstFundingStep = fundingRoute.steps[0];
+    const { cryptoFiatState } = useContext(CryptoFiatContext);
+    const { isPassportWallet } = useSaleContext();
+    const [feesUsd, setFeesUsd] = useState(undefined);
+    const [usdBalance, setUsdBalance] = useState(undefined);
+    useEffect(() => {
+        if (!cryptoFiatState.conversions) {
+            return;
+        }
+        try {
+            setFeesUsd(fundingRouteFees(fundingRoute, cryptoFiatState.conversions));
+            setUsdBalance(calculateCryptoToFiat(firstFundingStep.fundingItem.userBalance.formattedBalance, firstFundingStep.fundingItem.token.symbol, cryptoFiatState.conversions));
+        }
+        catch {
+            setFeesUsd(undefined);
+            setUsdBalance(undefined);
+        }
+    }, [cryptoFiatState, fundingRoute]);
+    const networkLabel = () => (jsxs(HorizontalMenu.Button, { rc: jsx("a", {}), sx: {
+            pointerEvents: 'none',
+            cursor: 'default',
+            height: '100%',
+            marginLeft: 'base.spacing.x2',
+            fontSize: 'base.text.body.xxSmall.regular.fontSize',
+            fontWeight: 'base.text.body.xxSmall.regular.fontWeight',
+            color: 'base.color.brand.4',
+            paddingLeft: 'base.spacing.x2',
+            paddingRight: 'base.spacing.x2',
+        }, size: "small", children: [jsx(Button.Icon, { icon: networkIcon[firstFundingStep.chainId], sx: {
+                    width: '14px',
+                    fill: logoColour[firstFundingStep.chainId],
+                } }), getChainNameById(firstFundingStep.chainId)] }));
+    return (jsxs(MenuItem, { emphasized: true, testId: "funding-route-menu-item", onClick: onClick, selected: selected, size: size, children: [toggleVisible && jsx(MenuItem.IntentIcon, { icon: "ChevronExpand" }), jsx(MenuItem.FramedIcon, { icon: "Coins", circularFrame: true }), jsx(MenuItem.PriceDisplay, { use: jsx(Heading, { size: "xSmall" }), fiatAmount: `${t('views.FUND_WITH_SMART_CHECKOUT.currency.usdEstimate')}${usdBalance}`, price: tokenValueFormat(firstFundingStep.fundingItem.userBalance.formattedBalance) }), jsxs(MenuItem.Label, { sx: { display: 'flex', wordBreak: 'default' }, children: [firstFundingStep.fundingItem.token.symbol, isPassportWallet ? null : networkLabel()] }), jsxs(MenuItem.Caption, { children: ["Fees \u2248 USD $", feesUsd] })] }));
+}
+
+function FundingRouteDrawer({ visible, onCloseDrawer, fundingRoutes, activeFundingRouteIndex, }) {
+    const { t } = useTranslation();
+    const onClickMenuItem = (selectedFundingRouteIndex) => {
+        onCloseDrawer(selectedFundingRouteIndex);
+    };
+    return (jsx(Drawer, { size: "full", onCloseDrawer: () => onCloseDrawer(activeFundingRouteIndex), visible: visible, showHeaderBar: true, headerBarTitle: t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteDrawer.header'), children: jsx(Drawer.Content, { children: fundingRoutes.map((fundingRoute, i) => (jsx(FundingRouteMenuItem, { onClick: () => onClickMenuItem(i), fundingRoute: fundingRoute, selected: activeFundingRouteIndex === i, size: "medium" }, fundingRoute.steps[0].fundingItem.type + fundingRoute.steps[0].fundingItem.token))) }) }));
+}
+
+function PurchaseMenuItem({ fundingRoute, collectionName }) {
+    const { t } = useTranslation();
+    const { items } = useSaleContext();
+    const firstItem = items[0];
+    const firstFundingStep = fundingRoute.steps[0];
+    const { cryptoFiatState } = useContext(CryptoFiatContext);
+    const [usdPurchaseAmount, setUsdPurchaseAmount] = useState(undefined);
+    useEffect(() => {
+        if (!cryptoFiatState.conversions) {
+            return;
+        }
+        try {
+            setUsdPurchaseAmount(calculateCryptoToFiat(firstFundingStep.fundingItem.fundsRequired.formattedAmount, firstFundingStep.fundingItem.token.symbol, cryptoFiatState.conversions));
+        }
+        catch {
+            setUsdPurchaseAmount(undefined);
+        }
+    }, [cryptoFiatState, fundingRoute]);
+    return (jsxs(MenuItem, { emphasized: true, testId: "funding-route-purchase-item", size: "medium", children: [jsx(MenuItem.FramedImage, { imageUrl: firstItem?.image }), jsx(MenuItem.PriceDisplay, { use: jsx(Heading, { size: "xSmall" }), price: `${firstFundingStep?.fundingItem.token.symbol} 
+          ${tokenValueFormat(firstFundingStep.fundingItem.fundsRequired.formattedAmount)}`, fiatAmount: `${t('views.FUND_WITH_SMART_CHECKOUT.currency.usdEstimate')}${usdPurchaseAmount}` }), jsxs(MenuItem.Label, { children: [firstItem?.name, firstItem?.qty > 1 ? ` x${firstItem.qty}` : null] }), jsx(MenuItem.Caption, { children: collectionName })] }, firstItem?.name));
+}
+
+function FundingRouteSelect({ fundingRoutes, collectionName, onFundingRouteSelected, }) {
+    const { t } = useTranslation();
+    const [smartCheckoutDrawerVisible, setSmartCheckoutDrawerVisible] = useState(false);
+    const [activeFundingRouteIndex, setActiveFundingRouteIndex] = useState(0);
+    const { viewDispatch } = useContext(ViewContext);
+    const { eventTargetState: { eventTarget }, } = useContext(EventTargetContext);
+    const { goBackToPaymentMethods } = useSaleContext();
+    const onClickContinue = () => {
+        onFundingRouteSelected(fundingRoutes[activeFundingRouteIndex]);
+        viewDispatch({
+            payload: {
+                type: ViewActions.UPDATE_VIEW,
+                view: {
+                    type: SaleWidgetViews.FUND_WITH_SMART_CHECKOUT,
+                    subView: FundWithSmartCheckoutSubViews.FUNDING_ROUTE_EXECUTE,
+                },
+            },
+        });
+    };
+    const closeDrawer = (selectedFundingRouteIndex) => {
+        setActiveFundingRouteIndex(selectedFundingRouteIndex);
+        setSmartCheckoutDrawerVisible(false);
+    };
+    const onSmartCheckoutDropdownClick = () => {
+        setSmartCheckoutDrawerVisible(true);
+    };
+    return (jsxs(SimpleLayout, { testId: "funding-route-select", header: (jsx(HeaderNavigation, { onCloseButtonClick: () => sendSaleWidgetCloseEvent(eventTarget) })), footer: jsx(FooterLogo, {}), children: [jsxs(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingX: 'base.spacing.x2',
+                    paddingY: 'base.spacing.x8',
+                    rowGap: 'base.spacing.x4',
+                    height: '100%',
+                }, children: [jsx(Heading, { size: "small", children: t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.heading') }), fundingRoutes.length === 0
+                        ? [
+                            jsx(Body, { size: "small", children: t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.noRoutesAvailable') }, "noRoutesAvailableText"),
+                            jsx(Button, { variant: "tertiary", children: t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.payWithCard') }, "payWithCardButton"),
+                        ]
+                        : [
+                            jsx(FundingRouteMenuItem, { "data-testid": "funding-route-select-selected-route", onClick: fundingRoutes.length > 1
+                                    ? onSmartCheckoutDropdownClick
+                                    : () => { }, fundingRoute: fundingRoutes[activeFundingRouteIndex], selected: true, toggleVisible: fundingRoutes.length > 1 }, "selectedFundingRouteMenuItem"),
+                            jsx(PurchaseMenuItem, { fundingRoute: fundingRoutes[activeFundingRouteIndex], collectionName: collectionName }, "purchaseMenuItem"),
+                            jsx(Button, { sx: { mt: 'auto' }, variant: "primary", onClick: onClickContinue, children: t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.continue') }, "continueButton"),
+                            jsx(Button, { variant: "tertiary", onClick: () => goBackToPaymentMethods(), children: t('views.FUND_WITH_SMART_CHECKOUT.fundingRouteSelect.payWithCardInstead') }, "payWithCardButton"),
+                        ]] }), jsx(FundingRouteDrawer, { visible: smartCheckoutDrawerVisible, onCloseDrawer: closeDrawer, fundingRoutes: fundingRoutes, activeFundingRouteIndex: activeFundingRouteIndex })] }));
+}
+
+const toStringifyTransactions = (transactions) => transactions
+    .map(({ method, hash }) => `${method}: ${hash}`).join(' | ');
+const toPascalCase = (str) => str
+    .split('_')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join('');
+
+const useSaleEvent = () => {
+    const { track, page } = useAnalytics();
+    const { recipientAddress: userId, recipientEmail: email, signResponse, paymentMethod, } = useSaleContext();
+    const { eventTargetState: { eventTarget }, } = useContext(EventTargetContext);
+    const defaultView = SaleWidgetViews.PAYMENT_METHODS;
+    const commonProps = {
+        location: 'web',
+        userJourney: UserJourney.SALE,
+    };
+    const userProps = {
+        email,
+        userId,
+        paymentMethod,
+    };
+    const orderProps = {
+        amount: signResponse?.order.totalAmount,
+        currency: signResponse?.order.currency.name,
+    };
+    const sendCloseEvent = (screen = defaultView, controlType = 'Button', action = 'Pressed') => {
+        track({
+            ...commonProps,
+            screen: toPascalCase(screen),
+            control: 'Close',
+            controlType,
+            action,
+            extras: {
+                ...userProps,
+            },
+        });
+        sendSaleWidgetCloseEvent(eventTarget);
+    };
+    const sendSuccessEvent = (screen = defaultView, transactions = [], details) => {
+        track({
+            ...commonProps,
+            screen: toPascalCase(screen),
+            control: 'Success',
+            controlType: 'Event',
+            action: 'Succeeded',
+            extras: {
+                ...details,
+                ...userProps,
+                transactions: toStringifyTransactions(transactions),
+                ...orderProps,
+                paymentMethod,
+            },
+        });
+        sendSaleSuccessEvent(eventTarget, paymentMethod, transactions);
+    };
+    const sendFailedEvent = (reason, error, transactions = [], screen = defaultView) => {
+        track({
+            ...commonProps,
+            screen: toPascalCase(screen),
+            control: 'Fail',
+            controlType: 'Event',
+            action: 'Failed',
+            extras: {
+                transactions: toStringifyTransactions(transactions),
+                ...error,
+                ...orderProps,
+                ...userProps,
+                paymentMethod,
+                reason,
+            },
+        });
+        sendSaleFailedEvent(eventTarget, reason, error, paymentMethod, transactions);
+    };
+    const sendTransactionSuccessEvent = (transaction) => {
+        sendSaleTransactionSuccessEvent(eventTarget, paymentMethod, [transaction]);
+    };
+    const sendSelectedPaymentMethod = (type, screen) => {
+        track({
+            ...commonProps,
+            screen: toPascalCase(screen),
+            control: 'Select',
+            controlType: 'MenuItem',
+            extras: {
+                paymentMethod: type,
+            },
+        });
+        sendSalePaymentMethodEvent(eventTarget, type);
+    };
+    const sendPageView = (screen, data) => {
+        page({
+            ...commonProps,
+            screen: toPascalCase(screen),
+            action: 'Viewed',
+            ...data,
+        });
+    };
+    const sendOrderCreated = (screen, details) => {
+        track({
+            ...commonProps,
+            screen: toPascalCase(screen),
+            control: 'OrderCreated',
+            controlType: 'Event',
+            extras: {
+                ...details,
+            },
+        });
+    };
+    return {
+        track,
+        page,
+        sendPageView,
+        sendCloseEvent,
+        sendSuccessEvent,
+        sendFailedEvent,
+        sendTransactionSuccessEvent,
+        sendOrderCreated,
+        sendSelectedPaymentMethod,
+    };
+};
+
+function FundWithSmartCheckout({ subView }) {
+    const { t } = useTranslation();
+    const { sendPageView } = useSaleEvent();
+    const { viewDispatch } = useContext(ViewContext);
+    const [selectedFundingRoute, setSelectedFundingRoute] = useState(undefined);
+    const [fundingRouteStepIndex, setFundingRouteStepIndex] = useState(0);
+    const { querySmartCheckout, fundingRoutes, smartCheckoutResult, collectionName, } = useSaleContext();
+    const { cryptoFiatDispatch } = useContext(CryptoFiatContext);
+    const smartCheckoutLoading = useRef(false);
+    const onFundingRouteSelected = (fundingRoute) => {
+        setSelectedFundingRoute(fundingRoute);
+    };
+    useEffect(() => {
+        if (subView === FundWithSmartCheckoutSubViews.INIT && !smartCheckoutLoading.current) {
+            smartCheckoutLoading.current = true;
+            try {
+                querySmartCheckout();
+            }
+            finally {
+                smartCheckoutLoading.current = false;
+            }
+        }
+    }, [subView]);
+    useEffect(() => {
+        if (!cryptoFiatDispatch || !smartCheckoutResult)
+            return;
+        const tokenSymbols = smartCheckoutTokensList(smartCheckoutResult);
+        cryptoFiatDispatch({
+            payload: {
+                type: CryptoFiatActions.SET_TOKEN_SYMBOLS,
+                tokenSymbols,
+            },
+        });
+    }, [cryptoFiatDispatch, smartCheckoutResult]);
+    const fundingRouteStep = useMemo(() => {
+        if (!selectedFundingRoute) {
+            return undefined;
+        }
+        return selectedFundingRoute.steps[fundingRouteStepIndex];
+    }, [selectedFundingRoute, fundingRouteStepIndex]);
+    const onFundingRouteExecuted = () => {
+        if (!selectedFundingRoute) {
+            return;
+        }
+        if (fundingRouteStepIndex === selectedFundingRoute.steps.length - 1) {
+            setFundingRouteStepIndex(0);
+            setSelectedFundingRoute(undefined);
+            // ! Recurse with SC to trigger another query and confirm they have the required balance
+            viewDispatch({
+                payload: {
+                    type: ViewActions.UPDATE_VIEW,
+                    view: {
+                        type: SaleWidgetViews.FUND_WITH_SMART_CHECKOUT,
+                        subView: FundWithSmartCheckoutSubViews.INIT,
+                    },
+                },
+            });
+        }
+        else {
+            setFundingRouteStepIndex(fundingRouteStepIndex + 1);
+        }
+    };
+    useEffect(() => sendPageView(SaleWidgetViews.FUND_WITH_SMART_CHECKOUT, {
+        subView,
+        ...(!!fundingRouteStep && { fundingStep: fundingRouteStep.type }),
+    }), []);
+    return (jsxs(Box, { children: [subView === FundWithSmartCheckoutSubViews.INIT && (jsx(LoadingView, { loadingText: t('views.FUND_WITH_SMART_CHECKOUT.loading.checkingBalances') })), subView === FundWithSmartCheckoutSubViews.FUNDING_ROUTE_SELECT && (jsx(FundingRouteSelect, { fundingRoutes: fundingRoutes, collectionName: collectionName, onFundingRouteSelected: onFundingRouteSelected })), subView === FundWithSmartCheckoutSubViews.FUNDING_ROUTE_EXECUTE && (jsx(FundingRouteExecute, { onFundingRouteExecuted: onFundingRouteExecuted, fundingRouteStep: fundingRouteStep }))] }));
+}
+
+const MAX_GAS_LIMIT = '30000000';
+// TODO: Move to common config file inside Checkout SDK while refactoring onRamp
+// const { baseUrl, apiKey } = checkout.fiatExchangeConfig('transak')
+const TRANSAK_API_BASE_URL = {
+    [Environment.SANDBOX]: 'https://global-stg.transak.com',
+    [Environment.PRODUCTION]: 'https://global.transak.com/',
+};
+const useTransakIframe = (props) => {
+    const { type, ...transakParams } = props;
+    const [iframeSrc, setIframeSrc] = useState('');
+    // TODO: Get transak config from checkout SDK
+    // const { checkout, provider } = connectLoaderState;
+    // const {  config } = checkout.fiatExchangeConfig('transak');
+    // const { environment, apiKey, network } = config
+    const environment = 'sandbox';
+    const apiKey = 'd14b44fb-0f84-4db5-affb-e044040d724b';
+    const network = 'immutablezkevm';
+    const getNFTCheckoutURL = useCallback(() => {
+        const { calldata, nftData: nfts, estimatedGasLimit, ...restTransakParams } = transakParams;
+        // FIXME: defaulting to first nft in the list
+        // as transak currently only supports on nft at a time
+        const nftData = nfts?.slice(0, 1);
+        const gasLimit = estimatedGasLimit > 0 ? estimatedGasLimit : MAX_GAS_LIMIT;
+        const params = {
+            apiKey,
+            network,
+            isNFT: 'true',
+            disableWalletAddressForm: 'true',
+            environment: 'STAGING',
+            calldata: btoa(String.fromCharCode.apply(null, pako.deflate(calldata))),
+            nftData: btoa(JSON.stringify(nftData)),
+            estimatedGasLimit: gasLimit.toString(),
+            ...restTransakParams,
+            themeColor: '0D0D0D',
+        };
+        const baseUrl = `${TRANSAK_API_BASE_URL[environment]}?`;
+        const queryParams = new URLSearchParams(params);
+        const widgetUrl = `${baseUrl}${queryParams.toString()}`;
+        return widgetUrl;
+    }, [props]);
+    useEffect(() => {
+        setIframeSrc(getNFTCheckoutURL());
+    }, [props]);
+    return { iframeSrc };
+};
+
+function TransakIframe(props) {
+    const { id, type, email, walletAddress, isPassportWallet, nftData, calldata, cryptoCurrencyCode, estimatedGasLimit, exchangeScreenTitle, smartContractAddress, partnerOrderId, onOpen, onInit, onOrderCreated, onOrderProcessing, onOrderCompleted, onOrderFailed, onFailedToLoad, failedToLoadTimeoutInMs, loadingText, } = props;
+    const iframeRef = useRef(null);
+    const { onLoad, initialised } = useTransakEvents({
+        userJourney: UserJourney.SALE,
+        ref: iframeRef,
+        email,
+        userId: walletAddress,
+        isPassportWallet,
+        onOpen,
+        onOrderCreated,
+        onOrderProcessing,
+        onOrderCompleted,
+        onOrderFailed,
+        onInit,
+        failedToLoadTimeoutInMs,
+        onFailedToLoad,
+    });
+    const { iframeSrc } = useTransakIframe({
+        type,
+        nftData,
+        calldata,
+        cryptoCurrencyCode,
+        estimatedGasLimit,
+        exchangeScreenTitle,
+        smartContractAddress,
+        email,
+        walletAddress,
+        partnerOrderId,
+    });
+    return (jsxs(Fragment, { children: [!initialised && (jsx(CenteredBoxContent, { testId: "loading-view", children: jsx(LoadingBox, { loadingText: loadingText }) })), jsx("iframe", { ref: iframeRef, id: id, src: iframeSrc, title: "Transak-Iframe", allow: "camera;microphone;fullscreen;payment", style: {
+                    height: '100%',
+                    width: '100%',
+                    border: 'none',
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    opacity: initialised ? 1 : 0,
+                    transition: 'opacity 0.5s ease-out',
+                }, onLoad: onLoad, onError: () => onFailedToLoad?.() })] }));
+}
+
+function WithCard(props) {
+    const { t } = useTranslation();
+    const { onInit, onOpen, onOrderCreated, onOrderProcessing, onOrderCompleted, onOrderFailed, } = props;
+    const { recipientEmail, recipientAddress, isPassportWallet, signResponse, goToErrorView, } = useSaleContext();
+    const executeTxn = signResponse?.transactions.find((txn) => txn.methodCall.startsWith('execute'));
+    if (!signResponse || !executeTxn) {
+        return null;
+    }
+    const nftData = useMemo(() => signResponse.order.products.map((product) => ({
+        collectionAddress: product.collectionAddress,
+        imageURL: product.image,
+        nftName: product.name,
+        price: product.amount,
+        quantity: product.qty,
+        tokenID: product.tokenId,
+        nftType: product.contractType || 'ERC721',
+    })), [signResponse]);
+    const onFailedToLoad = () => {
+        goToErrorView(SaleErrorTypes.TRANSACTION_FAILED);
+    };
+    return (jsx(TransakIframe, { id: "transak-iframe", type: "nft-checkout", email: recipientEmail, walletAddress: recipientAddress, isPassportWallet: isPassportWallet, exchangeScreenTitle: t('views.PAY_WITH_CARD.screenTitle'), loadingText: t('views.PAY_WITH_CARD.loading'), nftData: nftData, calldata: executeTxn.rawData, cryptoCurrencyCode: signResponse.order.currency.name, estimatedGasLimit: executeTxn.gasEstimate, smartContractAddress: executeTxn.tokenAddress, partnerOrderId: executeTxn.params.reference, onInit: onInit, onOpen: onOpen, onOrderCreated: onOrderCreated, onOrderProcessing: onOrderProcessing, onOrderCompleted: onOrderCompleted, onOrderFailed: onOrderFailed, onFailedToLoad: onFailedToLoad }));
+}
+
+function PayWithCard() {
+    const { sendPageView } = useSaleEvent();
+    const [initialised, setInitialised] = useState(false);
+    const { goBackToPaymentMethods, goToErrorView, goToSuccessView } = useSaleContext();
+    const { sendOrderCreated } = useSaleEvent();
+    const onInit = () => setInitialised(true);
+    const onOrderFailed = () => {
+        goToErrorView(SaleErrorTypes.TRANSAK_FAILED);
+    };
+    const onOrderProcessing = (data = {}) => {
+        const { id: orderId, status: orderStatus, cryptoAmount, cryptoCurrency, fiatAmount, fiatAmountInUsd, amountPaid, totalFeeInFiat, paymentOptionId: paymentOption, userId, userKycType, walletAddress, nftAssetInfo, } = data;
+        const { nftDataBase64, quantity } = nftAssetInfo || {};
+        goToSuccessView({
+            orderId,
+            orderStatus,
+            cryptoAmount,
+            cryptoCurrency,
+            fiatAmount,
+            fiatAmountInUsd,
+            amountPaid,
+            totalFeeInFiat,
+            paymentOption,
+            userId,
+            userKycType,
+            walletAddress,
+            nftDataBase64,
+            quantity,
+        });
+    };
+    const onOrderCreated = (data = {}) => {
+        const { id: orderId, status: orderStatus, cryptoAmount, cryptoCurrency, fiatAmount, fiatAmountInUsd, amountPaid, totalFeeInFiat, paymentOptionId: paymentOption, userId, userKycType, walletAddress, nftAssetInfo, } = data;
+        const { nftDataBase64, quantity } = nftAssetInfo || {};
+        sendOrderCreated(SaleWidgetViews.PAY_WITH_CARD, {
+            orderId,
+            orderStatus,
+            cryptoAmount,
+            cryptoCurrency,
+            fiatAmount,
+            fiatAmountInUsd,
+            amountPaid,
+            totalFeeInFiat,
+            paymentOption,
+            userId,
+            userKycType,
+            walletAddress,
+            nftDataBase64,
+            quantity,
+        });
+    };
+    useEffect(() => sendPageView(SaleWidgetViews.PAY_WITH_CARD), []);
+    return (jsx(SimpleLayout, { header: initialised && (jsx(HeaderNavigation, { onCloseButtonClick: () => goBackToPaymentMethods() })), footer: jsx(FooterLogo, { hideLogo: initialised }), children: jsx(Box, { style: {
+                display: 'block',
+                position: 'relative',
+                maxWidth: '420px',
+                height: '565px',
+                borderRadius: '1%',
+                overflow: 'hidden',
+                margin: '0 auto',
+                width: '100%',
+            }, children: jsx(WithCard, { onInit: onInit, onOrderFailed: onOrderFailed, onOrderCompleted: onOrderProcessing, onOrderCreated: onOrderCreated, onOrderProcessing: onOrderProcessing }) }) }));
+}
+
+function PayWithCoins() {
+    const { t } = useTranslation();
+    const processing = useRef(false);
+    const { sendPageView, sendTransactionSuccessEvent, sendFailedEvent } = useSaleEvent();
+    const { execute, signResponse, executeResponse, goToSuccessView, } = useSaleContext();
+    const expectedTxns = signResponse?.transactions.length || 0;
+    const executedTxns = executeResponse?.transactions.length || 0;
+    let loadingText = t('views.PAYMENT_METHODS.loading.ready');
+    if (signResponse !== undefined) {
+        loadingText = t('views.PAYMENT_METHODS.loading.confirm');
+    }
+    else if (executedTxns > 0 && executedTxns === expectedTxns) {
+        loadingText = t('views.PAYMENT_METHODS.loading.processing');
+    }
+    if (signResponse !== undefined) {
+        loadingText = `${loadingText} ${executedTxns}/${expectedTxns}`;
+    }
+    const sendTransaction = async () => {
+        execute(signResponse, (txn) => {
+            sendTransactionSuccessEvent(txn);
+        }, (error, txns) => {
+            sendFailedEvent(error.toString(), error, txns);
+        });
+    };
+    useEffect(() => {
+        if (signResponse !== undefined && processing.current === false) {
+            processing.current = true;
+            sendTransaction();
+        }
+    }, [signResponse]);
+    useEffect(() => {
+        if (executeResponse?.done === true) {
+            goToSuccessView();
+        }
+    }, [executeResponse]);
+    useEffect(() => sendPageView(SaleWidgetViews.PAY_WITH_COINS), []);
+    return jsx(LoadingView, { loadingText: loadingText, showFooterLogo: true });
+}
+
+function PaymentOption(props) {
+    const { t } = useTranslation();
+    const { type, onClick, disabled } = props;
+    // const optionText = options[type];
+    const icon = {
+        [SalePaymentTypes.CRYPTO]: 'Coins',
+        [SalePaymentTypes.FIAT]: 'BankCard',
+    };
+    const handleClick = () => onClick(type);
+    return (jsxs(MenuItem, { size: "medium", emphasized: true, onClick: disabled ? undefined : handleClick, sx: {
+            ...(disabled && { opacity: '0.5', cursor: 'not-allowed' }),
+            marginBottom: 'base.spacing.x1',
+        }, disabled: disabled, children: [jsx(MenuItem.FramedIcon, { icon: icon[type] }), jsx(MenuItem.Label, { size: "medium", children: t(`views.PAYMENT_METHODS.options.${type}.heading`) }), !disabled && jsx(MenuItem.IntentIcon, {}), jsx(MenuItem.Caption, { children: t(`views.PAYMENT_METHODS.options.${type}.${disabled ? 'disabledCaption' : 'caption'}`) })] }));
+}
+
+const defaultPaymentOptions = [
+    SalePaymentTypes.FIAT,
+    SalePaymentTypes.CRYPTO,
+];
+function PaymentOptions(props) {
+    const { disabledOptions = [], onClick } = props;
+    return (jsx(Box, { testId: "payment-options-list", sx: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'flex-start',
+        }, children: defaultPaymentOptions.map((type) => (jsx(PaymentOption, { disabled: disabledOptions.includes(type), onClick: onClick, type: type }, type))) }));
+}
+
+function PaymentMethods() {
+    const { t } = useTranslation();
+    const { viewState, viewDispatch } = useContext(ViewContext);
+    const { sign, amount, fromTokenAddress: tokenAddress, goToErrorView, paymentMethod, setPaymentMethod, disabledPaymentTypes, invalidParameters, } = useSaleContext();
+    const { sendPageView, sendCloseEvent, sendSelectedPaymentMethod } = useSaleEvent();
+    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
+    const handleOptionClick = (type) => setPaymentMethod(type);
+    useEffect(() => {
+        if (paymentMethod) {
+            sendSelectedPaymentMethod(paymentMethod, SaleWidgetViews.PAYMENT_METHODS);
+        }
+        if (paymentMethod === SalePaymentTypes.FIAT) {
+            sign(paymentMethod, () => {
+                viewDispatch({
+                    payload: {
+                        type: ViewActions.UPDATE_VIEW,
+                        view: {
+                            type: SaleWidgetViews.PAY_WITH_CARD,
+                        },
+                    },
+                });
+            });
+            viewDispatch({
+                payload: {
+                    type: ViewActions.UPDATE_VIEW,
+                    view: {
+                        type: SharedViews.LOADING_VIEW,
+                        data: { loadingText: t('views.PAYMENT_METHODS.loading.ready') },
+                    },
+                },
+            });
+        }
+        if (paymentMethod === SalePaymentTypes.CRYPTO) {
+            viewDispatch({
+                payload: {
+                    type: ViewActions.UPDATE_VIEW,
+                    view: {
+                        type: SaleWidgetViews.FUND_WITH_SMART_CHECKOUT,
+                        subView: FundWithSmartCheckoutSubViews.INIT,
+                    },
+                },
+            });
+        }
+    }, [paymentMethod]);
+    const insufficientCoinsBanner = (jsx(Box, { sx: { paddingX: 'base.spacing.x2' }, children: jsxs(Banner, { children: [jsx(Banner.Icon, { icon: "InformationCircle" }), jsxs(Banner.Caption, { children: [t('views.PAYMENT_METHODS.insufficientCoinsBanner.caption'), jsx(Link, { sx: { mx: 'base.spacing.x1' }, onClick: () => orchestrationEvents
+                                .sendRequestBridgeEvent(eventTarget, IMTBLWidgetEvents.IMTBL_SALE_WIDGET_EVENT, {
+                                amount, tokenAddress,
+                            }), children: t('views.PAYMENT_METHODS.insufficientCoinsBanner.captionCTA') }), t('views.PAYMENT_METHODS.insufficientCoinsBanner.captionEnd')] })] }) }));
+    useEffect(() => sendPageView(SaleWidgetViews.PAYMENT_METHODS), []);
+    useEffect(() => {
+        if (!invalidParameters)
+            return;
+        goToErrorView(SaleErrorTypes.INVALID_PARAMETERS);
+    }, [invalidParameters]);
+    return (jsx(SimpleLayout, { testId: "payment-methods", header: (jsx(HeaderNavigation, { onCloseButtonClick: () => sendCloseEvent(SaleWidgetViews.PAYMENT_METHODS) })), footer: jsx(FooterLogo, {}), children: jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                paddingX: 'base.spacing.x2',
+                paddingY: 'base.spacing.x8',
+                rowGap: 'base.spacing.x4',
+            }, children: [jsx(Heading, { size: "small", sx: {
+                        paddingX: 'base.spacing.x4',
+                    }, children: t('views.PAYMENT_METHODS.header.heading') }), jsx(Box, { sx: { paddingX: 'base.spacing.x2' }, children: jsx(PaymentOptions, { disabledOptions: disabledPaymentTypes, onClick: handleOptionClick }) }), viewState.view.data?.showInsufficientCoinsBanner ? insufficientCoinsBanner : null] }) }));
+}
+
+function SaleErrorView({ errorType = SaleErrorTypes.DEFAULT, transactionHash, blockExplorerLink, biomeTheme, }) {
+    const { t } = useTranslation();
+    const { goBackToPaymentMethods } = useSaleContext();
+    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
+    const closeWidget = () => {
+        sendSaleWidgetCloseEvent(eventTarget);
+    };
+    const errorHandlersConfig = {
+        [SaleErrorTypes.TRANSACTION_FAILED]: {
+            onActionClick: goBackToPaymentMethods,
+            onSecondaryActionClick: transactionHash ? () => {
+                window.open(blockExplorerLink);
+            } : closeWidget,
+            statusType: StatusType.FAILURE,
+            statusIconStyles: {
+                fill: biomeTheme.color.status.destructive.dim,
+            },
+        },
+        [SaleErrorTypes.SERVICE_BREAKDOWN]: {
+            onSecondaryActionClick: closeWidget,
+            statusType: StatusType.INFORMATION,
+            statusIconStyles: {
+                fill: biomeTheme.color.status.fatal.dim,
+            },
+        },
+        [SaleErrorTypes.PRODUCT_NOT_FOUND]: {
+            onSecondaryActionClick: closeWidget,
+            statusType: StatusType.INFORMATION,
+            statusIconStyles: {
+                fill: biomeTheme.color.status.fatal.dim,
+            },
+        },
+        [SaleErrorTypes.INSUFFICIENT_STOCK]: {
+            onSecondaryActionClick: closeWidget,
+            statusType: StatusType.INFORMATION,
+            statusIconStyles: {
+                fill: biomeTheme.color.status.fatal.dim,
+            },
+        },
+        [SaleErrorTypes.TRANSAK_FAILED]: {
+            onActionClick: goBackToPaymentMethods,
+            onSecondaryActionClick: closeWidget,
+            statusType: StatusType.INFORMATION,
+        },
+        [SaleErrorTypes.WALLET_FAILED]: {
+            onActionClick: goBackToPaymentMethods,
+            onSecondaryActionClick: closeWidget,
+            statusType: StatusType.INFORMATION,
+            statusIconStyles: {
+                fill: biomeTheme.color.status.fatal.dim,
+            },
+        },
+        [SaleErrorTypes.WALLET_REJECTED_NO_FUNDS]: {
+            onActionClick: goBackToPaymentMethods,
+            onSecondaryActionClick: closeWidget,
+            statusType: StatusType.INFORMATION,
+        },
+        [SaleErrorTypes.WALLET_REJECTED]: {
+            onActionClick: () => {
+                goBackToPaymentMethods(SalePaymentTypes.CRYPTO);
+            },
+            onSecondaryActionClick: closeWidget,
+            statusType: StatusType.INFORMATION,
+        },
+        [SaleErrorTypes.SMART_CHECKOUT_ERROR]: {
+            onActionClick: goBackToPaymentMethods,
+            onSecondaryActionClick: closeWidget,
+            statusType: StatusType.INFORMATION,
+        },
+        [SaleErrorTypes.SMART_CHECKOUT_EXECUTE_ERROR]: {
+            onActionClick: goBackToPaymentMethods,
+            onSecondaryActionClick: closeWidget,
+            statusType: StatusType.INFORMATION,
+        },
+        [SaleErrorTypes.INVALID_PARAMETERS]: {
+            onSecondaryActionClick: closeWidget,
+            statusType: StatusType.ALERT,
+            statusIconStyles: {
+                fill: biomeTheme.color.status.attention.dim,
+                transform: 'none',
+            },
+        },
+        [SaleErrorTypes.DEFAULT]: {
+            onActionClick: goBackToPaymentMethods,
+            onSecondaryActionClick: closeWidget,
+            statusType: StatusType.INFORMATION,
+        },
+    };
+    const getErrorViewProps = () => {
+        const handlers = errorHandlersConfig[errorType] || {};
+        const secondaryActionText = errorType === SaleErrorTypes.TRANSACTION_FAILED && transactionHash
+            ? t(`views.SALE_FAIL.errors.${SaleErrorTypes.DEFAULT}.secondaryAction`)
+            : t(`views.SALE_FAIL.errors.${errorType}.secondaryAction`);
+        return {
+            testId: 'fail-view',
+            statusText: t(`views.SALE_FAIL.errors.${errorType}.description`),
+            actionText: t(`views.SALE_FAIL.errors.${errorType}.primaryAction`),
+            onActionClick: handlers?.onActionClick,
+            secondaryActionText,
+            onSecondaryActionClick: handlers?.onSecondaryActionClick,
+            onCloseClick: closeWidget,
+            statusType: handlers.statusType,
+            statusIconStyles: {
+                transform: 'rotate(180deg)',
+                fill: biomeTheme.color.status.guidance.dim,
+                ...handlers.statusIconStyles,
+            },
+        };
+    };
+    return (jsx(StatusView, { ...getErrorViewProps() }));
+}
+
+function SaleSuccessView({ data }) {
+    const { t } = useTranslation();
+    const { sendCloseEvent, sendSuccessEvent } = useSaleEvent();
+    const closeWidget = () => {
+        sendCloseEvent(SaleWidgetViews.SALE_SUCCESS);
+    };
+    return (jsx(StatusView, { statusText: t('views.SALE_SUCCESS.text'), actionText: t('views.SALE_SUCCESS.actionText'), onRenderEvent: () => {
+            const { transactions, ...rest } = data;
+            sendSuccessEvent(SaleWidgetViews.SALE_SUCCESS, transactions, rest);
+        }, onActionClick: () => closeWidget(), statusType: StatusType.SUCCESS, testId: "success-view" }));
+}
+
+function SaleWidget(props) {
+    const { t } = useTranslation();
+    const { config, amount, items, environmentId, fromTokenAddress, collectionName, } = props;
+    const { connectLoaderState } = useContext(ConnectLoaderContext);
+    const { checkout, provider } = connectLoaderState;
+    const chainId = useRef();
+    const { theme } = config;
+    const biomeTheme = useMemo(() => widgetTheme(theme), [theme]);
+    const [viewState, viewDispatch] = useReducer(viewReducer, initialViewState);
+    const viewReducerValues = useMemo(() => ({ viewState, viewDispatch }), [viewState, viewDispatch]);
+    const loadingText = viewState.view.data?.loadingText
+        || t('views.LOADING_VIEW.text');
+    useEffect(() => {
+        if (!checkout || !provider)
+            return;
+        (async () => {
+            const network = await checkout.getNetworkInfo({ provider });
+            chainId.current = network.chainId;
+        })();
+    }, [checkout, provider]);
+    const mounted = useRef(false);
+    const onMount = useCallback(() => {
+        if (!checkout || !provider)
+            return;
+        if (!mounted.current) {
+            mounted.current = true;
+            viewDispatch({
+                payload: {
+                    type: ViewActions.UPDATE_VIEW,
+                    view: {
+                        type: SaleWidgetViews.PAYMENT_METHODS,
+                    },
+                },
+            });
+        }
+    }, [checkout, provider]);
+    useEffect(() => {
+        if (!checkout || !provider)
+            return;
+        onMount();
+    }, [checkout, provider]);
+    return (jsx(ViewContext.Provider, { value: viewReducerValues, children: jsx(SaleContextProvider, { value: {
+                config,
+                items,
+                amount,
+                fromTokenAddress,
+                env: checkout.config.environment ?? Environment.SANDBOX,
+                environmentId,
+                provider,
+                checkout,
+                passport: checkout?.passport,
+                collectionName,
+            }, children: jsxs(CryptoFiatProvider, { environment: config.environment, children: [viewState.view.type === SharedViews.LOADING_VIEW && (jsx(LoadingView, { loadingText: loadingText })), viewState.view.type === SaleWidgetViews.PAYMENT_METHODS && (jsx(PaymentMethods, {})), viewState.view.type === SaleWidgetViews.PAY_WITH_CARD && (jsx(PayWithCard, {})), viewState.view.type === SaleWidgetViews.PAY_WITH_COINS && (jsx(PayWithCoins, {})), viewState.view.type === SaleWidgetViews.SALE_FAIL && (jsx(SaleErrorView, { biomeTheme: biomeTheme, errorType: viewState.view.data?.errorType, transactionHash: viewState.view.data?.transactionHash, blockExplorerLink: BlockExplorerService.getTransactionLink(chainId.current, viewState.view.data?.transactionHash) })), viewState.view.type === SaleWidgetViews.SALE_SUCCESS && provider && (jsx(SaleSuccessView, { data: viewState.view.data })), viewState.view.type === SaleWidgetViews.FUND_WITH_SMART_CHECKOUT && (jsx(FundWithSmartCheckout, { subView: viewState.view.subView }))] }) }) }));
+}
+
+export { SaleWidget as default };