@imtbl/sdk 1.52.0 → 1.52.1-alpha.1

package/dist/blockchain_data.js

@@ -1,6 +1,6 @@
-export { A as APIError, B as BlockchainData } from './index-XxjQ6oVx.js';
-export { i as Types } from './index-snMwBaY-.js';
-import './index-8m8-bJcZ.js';
+export { A as APIError, B as BlockchainData } from './index-D0T-P8dM.js';
+export { i as Types } from './index-Dqva106f.js';
+import './index-5q3Doq32.js';
 import 'axios';
 import 'lru-memorise';
 import 'global-const';

package/dist/browser/checkout/{AddFundsWidget-DuG1OWEM.js → AddFundsWidget-SdKqlUUr.js}

@@ -1,11 +1,13 @@
-import { r as reactExports, l as useTranslation, n as jsxs, j as jsx, M as MenuItem, aG as motion, aH as listVariants, aI as listItemVariants, a as Box, a7 as Drawer, V as ViewContext, E as EventTargetContext, p as ViewActions, K as SharedViews, Y as HeaderNavigation, bh as amountInputValidation, o as Body, cK as OverflowPopoverMenu, a2 as SimpleLayout, T as TokenFilterTypes, x as getL2ChainId, F as orchestrationEvents, I as IMTBLWidgetEvents, cL as commonjsGlobal, cM as requireSecp256k1$1, cN as requireLib_commonjs, cO as require$$0$3, cP as requireDist$1, cQ as bech32$2, cR as bnExports$1, cS as require$$0$4, cT as getAugmentedNamespace, cU as require$$0$5, cV as minimalisticAssert, cW as require$$2, cX as hash$6, ah as viewReducer, ai as initialViewState, t as useAnalytics, cY as sendAddFundsCloseEvent, cZ as sendAddFundsGoBackEvent, ak as ErrorView, U as UserJourney } from './index-5qc7Vsg4.js';
-import { T as TextInputForm } from './TextInputForm-Cy6sTMjr.js';
+import { r as reactExports, l as useTranslation, n as jsxs, j as jsx, M as MenuItem, aG as motion, aH as listVariants, aI as listItemVariants, a as Box, a7 as Drawer, V as ViewContext, E as EventTargetContext, p as ViewActions, K as SharedViews, Y as HeaderNavigation, F as orchestrationEvents, I as IMTBLWidgetEvents, bh as amountInputValidation, o as Body, cK as OverflowPopoverMenu, a2 as SimpleLayout, T as TokenFilterTypes, x as getL2ChainId, cL as commonjsGlobal, cM as requireSecp256k1$1, cN as requireLib_commonjs, cO as require$$0$3, cP as requireDist$1, cQ as bech32$2, cR as bnExports$1, cS as require$$0$4, cT as getAugmentedNamespace, cU as require$$0$5, cV as minimalisticAssert, cW as require$$2, cX as hash$6, ah as viewReducer, ai as initialViewState, t as useAnalytics, cY as sendAddFundsCloseEvent, ak as ErrorView, U as UserJourney } from './index-DnQfQojQ.js';
+import { T as TextInputForm } from './TextInputForm-BvZsFFRK.js';
 
 const initialAddFundsState = {
     checkout: null,
     provider: null,
-    allowedTokens: null,
+    allowedTokens: [],
     squid: null,
+    chains: [],
+    balances: [],
 };
 var AddFundsActions;
 (function (AddFundsActions) {
@@ -13,6 +15,8 @@ var AddFundsActions;
     AddFundsActions["SET_PROVIDER"] = "SET_PROVIDER";
     AddFundsActions["SET_ALLOWED_TOKENS"] = "SET_ALLOWED_TOKENS";
     AddFundsActions["SET_SQUID"] = "SET_SQUID";
+    AddFundsActions["SET_CHAINS"] = "SET_CHAINS";
+    AddFundsActions["SET_BALANCES"] = "SET_BALANCES";
 })(AddFundsActions || (AddFundsActions = {}));
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const AddFundsContext = reactExports.createContext({
@@ -42,15 +46,20 @@ const addFundsReducer = (state, action) => {
                 ...state,
                 squid: action.payload.squid,
             };
+        case AddFundsActions.SET_CHAINS:
+            return {
+                ...state,
+                chains: action.payload.chains,
+            };
+        case AddFundsActions.SET_BALANCES:
+            return {
+                ...state,
+                balances: action.payload.balances,
+            };
         default:
             return state;
     }
 };
-const useAddFundsValues = (overrides = {}) => {
-    const [addFundsState, addFundsDispatch] = reactExports.useReducer(addFundsReducer, { ...initialAddFundsState, ...overrides });
-    const values = reactExports.useMemo(() => ({ addFundsState, addFundsDispatch }), [addFundsState, addFundsDispatch]);
-    return values;
-};
 
 var AddFundsWidgetViews;
 (function (AddFundsWidgetViews) {
@@ -133,19 +142,20 @@ showBridgeOption, visible, onClose, onPayWithCard, }) {
                     } }) }) }) }));
 }
 
-function AddFunds({ checkout, provider, amount, tokenAddress, showOnrampOption = true, showSwapOption = true, showBridgeOption = true, onBackButtonClick, onCloseButtonClick, }) {
+function AddFunds({ checkout, provider, toAmount, toTokenAddress, showBackButton = false, showOnrampOption = true, showSwapOption = true, showBridgeOption = true, onBackButtonClick, onCloseButtonClick, }) {
     console.log('provider', provider);
     console.log('showOnrampOption', showOnrampOption);
     console.log('showSwapOption', showSwapOption);
     console.log('showBridgeOption', showBridgeOption);
+    const showBack = showBackButton || !!onBackButtonClick;
     const { addFundsDispatch } = reactExports.useContext(AddFundsContext);
     const { viewDispatch } = reactExports.useContext(ViewContext);
     const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
     const [showOptionsDrawer, setShowOptionsDrawer] = reactExports.useState(false);
     const [onRampAllowedTokens, setOnRampAllowedTokens] = reactExports.useState([]);
     const [allowedTokens, setAllowedTokens] = reactExports.useState([]);
-    const [toAmount, setToAmount] = reactExports.useState(amount || '0');
-    const [toTokenAddress, setToTokenAddress] = reactExports.useState();
+    const [currentToAmount, setCurrentToAmount] = reactExports.useState(toAmount || '0');
+    const [currentToTokenAddress, setCurrentToTokenAddress] = reactExports.useState();
     const showErrorView = reactExports.useCallback((error) => {
         viewDispatch({
             payload: {
@@ -170,8 +180,9 @@ function AddFunds({ checkout, provider, amount, tokenAddress, showOnrampOption =
                 });
                 if (tokenResponse?.tokens.length > 0) {
                     setAllowedTokens(tokenResponse.tokens);
-                    const token = tokenResponse.tokens.find((t) => t.address === tokenAddress) || tokenResponse.tokens[0];
-                    setToTokenAddress(token);
+                    const token = tokenResponse.tokens.find((t) => t.address === toTokenAddress)
+                        || tokenResponse.tokens[0];
+                    setCurrentToTokenAddress(token);
                     addFundsDispatch({
                         payload: {
                             type: AddFundsActions.SET_ALLOWED_TOKENS,
@@ -185,7 +196,7 @@ function AddFunds({ checkout, provider, amount, tokenAddress, showOnrampOption =
             }
         };
         fetchTokens();
-    }, [checkout, tokenAddress]);
+    }, [checkout, toTokenAddress]);
     reactExports.useEffect(() => {
         if (!checkout) {
             showErrorView(new Error('Checkout object is missing'));
@@ -211,43 +222,47 @@ function AddFunds({ checkout, provider, amount, tokenAddress, showOnrampOption =
         setShowOptionsDrawer(true);
     };
     const updateAmount = (value) => {
-        setToAmount(value);
+        setCurrentToAmount(value);
     };
-    const isSelected = (token) => token.address === toTokenAddress;
-    const isDisabled = !toTokenAddress || !toAmount || parseFloat(toAmount) <= 0;
+    const isSelected = (token) => token.address === currentToTokenAddress;
+    const isDisabled = !currentToTokenAddress || !toAmount || parseFloat(toAmount) <= 0;
     const handleTokenChange = (token) => {
-        setToTokenAddress(token);
+        setCurrentToTokenAddress(token);
     };
     // const handleReviewClick = () => {
     //   console.log('handle review click');
     // };
     const onPayWithCard = (paymentType) => {
         console.log('paymentType', paymentType);
-        console.log('=== toTokenAddress', toTokenAddress);
+        console.log('=== toTokenAddress', currentToTokenAddress);
         console.log('=== toAmount', toAmount);
         if (paymentType === OptionTypes.SWAP) {
             orchestrationEvents.sendRequestSwapEvent(eventTarget, IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT, {
-                toTokenAddress: toTokenAddress?.address ?? '',
+                toTokenAddress: currentToTokenAddress?.address ?? '',
                 amount: toAmount ?? '',
                 fromTokenAddress: '',
             });
         }
         else {
             const data = {
-                tokenAddress: toTokenAddress?.address ?? '',
+                tokenAddress: currentToTokenAddress?.address ?? '',
                 amount: toAmount ?? '',
             };
             orchestrationEvents.sendRequestOnrampEvent(eventTarget, IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT, data);
         }
     };
     const checkShowOnRampOption = () => {
-        if (showOnrampOption && toTokenAddress) {
-            const token = onRampAllowedTokens.find((t) => t.address?.toLowerCase() === toTokenAddress.address?.toLowerCase());
+        if (showOnrampOption && currentToTokenAddress) {
+            const token = onRampAllowedTokens.find((t) => t.address?.toLowerCase()
+                === currentToTokenAddress.address?.toLowerCase());
             return !!token;
         }
         return false;
     };
-    return (jsx(SimpleLayout, { header: (jsx(HeaderNavigation, { title: "Add", onBackButtonClick: onBackButtonClick, onCloseButtonClick: onCloseButtonClick, showBack: !!onBackButtonClick })), children: jsxs(Box, { sx: {
+    return (jsx(SimpleLayout, { header: (jsx(HeaderNavigation, { title: "Add", onCloseButtonClick: onCloseButtonClick, showBack: showBack, onBackButtonClick: () => {
+                orchestrationEvents.sendRequestGoBackEvent(eventTarget, IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT, {});
+                onBackButtonClick?.();
+            } })), children: jsxs(Box, { sx: {
                 display: 'flex',
                 flexDirection: 'column',
                 justifyContent: 'space-between',
@@ -256,14 +271,14 @@ function AddFunds({ checkout, provider, amount, tokenAddress, showOnrampOption =
                         display: 'flex',
                         justifyContent: 'center',
                         marginTop: 'base.spacing.x10',
-                    }, children: jsxs(Box, { sx: { width: 'base.spacing.x40' }, children: [jsx(Box, { sx: { marginBottom: 'base.spacing.x3' }, children: jsx(TextInputForm, { testId: "add-funds-amount", type: "number", value: toAmount, validator: amountInputValidation, onTextInputChange: (value) => updateAmount(value), textAlign: "right", inputMode: "decimal" }) }), jsxs(Box, { sx: {
+                    }, children: jsxs(Box, { sx: { width: 'base.spacing.x40' }, children: [jsx(Box, { sx: { marginBottom: 'base.spacing.x3' }, children: jsx(TextInputForm, { testId: "add-funds-amount", type: "number", value: currentToAmount, validator: amountInputValidation, onTextInputChange: (value) => updateAmount(value), textAlign: "right", inputMode: "decimal" }) }), jsxs(Box, { sx: {
                                     display: 'flex',
                                     borderRadius: 'base.borderRadius.x20',
                                     alignItems: 'center',
                                     gap: 'base.spacing.x5',
                                     justifyContent: 'center',
                                     border: '1px solid grey',
-                                }, children: [jsx(Body, { size: "large", weight: "bold", children: toTokenAddress?.name ?? '' }), jsx(OverflowPopoverMenu, { testId: "add-funds-tokens-menu", children: allowedTokens.map((token) => (jsx(MenuItem, { onClick: () => handleTokenChange(token), selected: isSelected(token), children: jsx(MenuItem.Label, { children: token.name }) }, token.address))) })] })] }) }), jsxs(MenuItem, { size: "small", emphasized: true, disabled: isDisabled, sx: {
+                                }, children: [jsx(Body, { size: "large", weight: "bold", children: currentToTokenAddress?.name ?? '' }), jsx(OverflowPopoverMenu, { testId: "add-funds-tokens-menu", children: allowedTokens.map((token) => (jsx(MenuItem, { onClick: () => handleTokenChange(token), selected: isSelected(token), children: jsx(MenuItem.Label, { children: token.name }) }, token.address))) })] })] }) }), jsxs(MenuItem, { size: "small", emphasized: true, disabled: isDisabled, sx: {
                         opacity: isDisabled ? 0.5 : 1,
                         cursor: isDisabled ? 'not-allowed' : 'pointer',
                     }, onClick: () => {
@@ -164104,44 +164119,60 @@ class Squid extends TokensChains_1.TokensChains {
 Squid_1 = dist$2.Squid = Squid;
 
 const SQUID_SDK_BASE_URL = 'https://apiplus.squidrouter.com';
+const SQUID_API_BASE_URL = 'https://api.squidrouter.com/v1';
 
-const useSquid = () => {
+const useSquid = (checkout) => {
     const [squid, setSquid] = reactExports.useState(null);
+    const squidConfig = reactExports.useCallback(async () => {
+        try {
+            return (await checkout?.config?.remote.getConfig('squid'));
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('Unable to fetch squid config: ', err);
+        }
+        return undefined;
+    }, [checkout]);
     reactExports.useEffect(() => {
-        if (squid) {
+        if (squid || !squidConfig) {
             return;
         }
         const initialiseSquid = async () => {
+            const config = await squidConfig();
+            if (!config?.integratorId)
+                return;
             const squidSDK = new Squid_1({
                 baseUrl: SQUID_SDK_BASE_URL,
-                integratorId: '',
+                integratorId: config.integratorId,
             });
             await squidSDK.init();
             setSquid(squidSDK);
         };
         initialiseSquid();
-    }, []);
+    }, [squidConfig]);
     return squid;
 };
 
-function AddFundsContextProvider({ children }) {
-    const addFundsValue = useAddFundsValues();
-    const { addFundsState, addFundsDispatch } = addFundsValue;
-    const squid = useSquid();
-    reactExports.useEffect(() => {
-        if (!squid || addFundsState.squid)
-            return;
-        addFundsDispatch({
-            payload: {
-                type: AddFundsActions.SET_SQUID,
-                squid,
-            },
-        });
-    }, [squid]);
-    return (jsx(AddFundsContext.Provider, { value: addFundsValue, children: children }));
-}
+const fetchChains = async () => {
+    const url = `${SQUID_API_BASE_URL}/chains`;
+    const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'Content-Type': 'application/json',
+        },
+    });
+    const data = await response.json();
+    const chains = data.chains.map((chain) => ({
+        id: chain.chainId.toString(),
+        name: chain.chainName,
+        iconUrl: chain.chainIconURI,
+        type: chain.chainType,
+    }));
+    return chains;
+};
 
-function AddFundsWidget({ checkout, web3Provider, showOnrampOption = true, showSwapOption = true, showBridgeOption = true, tokenAddress, amount, }) {
+function AddFundsWidget({ checkout, web3Provider, showOnrampOption = true, showSwapOption = true, showBridgeOption = true, toTokenAddress, toAmount, showBackButton, }) {
     const [viewState, viewDispatch] = reactExports.useReducer(viewReducer, {
         ...initialViewState,
         view: { type: AddFundsWidgetViews.ADD_FUNDS },
@@ -164153,7 +164184,51 @@ function AddFundsWidget({ checkout, web3Provider, showOnrampOption = true, showS
         viewState,
         viewDispatch,
     }), [viewState, viewReducer]);
-    const { addFundsDispatch } = reactExports.useContext(AddFundsContext);
+    const [addFundsState, addFundsDispatch] = reactExports.useReducer(addFundsReducer, initialAddFundsState);
+    const addFundsReducerValues = reactExports.useMemo(() => ({
+        addFundsState,
+        addFundsDispatch,
+    }), [addFundsState, addFundsDispatch]);
+    const squid = useSquid(checkout);
+    reactExports.useEffect(() => {
+        (async () => {
+            const chains = await fetchChains();
+            addFundsDispatch({
+                payload: {
+                    type: AddFundsActions.SET_CHAINS,
+                    chains,
+                },
+            });
+        })();
+    }, []);
+    reactExports.useEffect(() => {
+        if (!addFundsState.squid || !addFundsState.chains || !addFundsState.provider)
+            return;
+        (async () => {
+            const chainIds = addFundsState.chains.map((chain) => chain.id);
+            const fromAddress = await addFundsState.provider?.getSigner().getAddress();
+            const balances = await addFundsState.squid?.getAllBalances({
+                chainIds,
+                evmAddress: fromAddress,
+            });
+            addFundsDispatch({
+                payload: {
+                    type: AddFundsActions.SET_BALANCES,
+                    balances: balances?.evmBalances ?? [],
+                },
+            });
+        })();
+    }, [addFundsState.squid, addFundsState.chains, addFundsState.provider]);
+    reactExports.useEffect(() => {
+        if (!squid || addFundsState.squid)
+            return;
+        addFundsDispatch({
+            payload: {
+                type: AddFundsActions.SET_SQUID,
+                squid,
+            },
+        });
+    }, [squid]);
     reactExports.useEffect(() => {
         if (!web3Provider)
             return;
@@ -164175,7 +164250,7 @@ function AddFundsWidget({ checkout, web3Provider, showOnrampOption = true, showS
         });
     }, [checkout]);
     const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
-    return (jsx(ViewContext.Provider, { value: viewReducerValues, children: jsxs(AddFundsContextProvider, { children: [viewState.view.type === AddFundsWidgetViews.ADD_FUNDS && (jsx(AddFunds, { checkout: checkout, provider: web3Provider, tokenAddress: tokenAddress, amount: amount, showOnrampOption: showOnrampOption, showSwapOption: showSwapOption, showBridgeOption: showBridgeOption, onCloseButtonClick: () => sendAddFundsCloseEvent(eventTarget), onBackButtonClick: () => sendAddFundsGoBackEvent(eventTarget) })), viewState.view.type === SharedViews.ERROR_VIEW && (jsx(ErrorView, { actionText: t('views.ERROR_VIEW.actionText'), onActionClick: () => undefined, onCloseClick: () => sendAddFundsCloseEvent(eventTarget), errorEventAction: () => {
+    return (jsx(ViewContext.Provider, { value: viewReducerValues, children: jsxs(AddFundsContext.Provider, { value: addFundsReducerValues, children: [viewState.view.type === AddFundsWidgetViews.ADD_FUNDS && (jsx(AddFunds, { checkout: checkout, provider: web3Provider, toTokenAddress: toTokenAddress, toAmount: toAmount, showBackButton: showBackButton, showOnrampOption: showOnrampOption, showSwapOption: showSwapOption, showBridgeOption: showBridgeOption, onCloseButtonClick: () => sendAddFundsCloseEvent(eventTarget) })), viewState.view.type === SharedViews.ERROR_VIEW && (jsx(ErrorView, { actionText: t('views.ERROR_VIEW.actionText'), onActionClick: () => undefined, onCloseClick: () => sendAddFundsCloseEvent(eventTarget), errorEventAction: () => {
                         page({
                             userJourney: UserJourney.ADD_FUNDS,
                             screen: 'Error',

package/dist/browser/checkout/{BridgeWidget-2D-8F1Vq.js → BridgeWidget-Bx1DFMXg.js}

@@ -1,8 +1,8 @@
-import { bz as axios, bA as defineReadOnly, bB as getStatic, bC as Signer, bD as Provider, bE as getAddress, bF as Logger, bG as getContractAddress, bH as Interface, bI as shallowCopy, bJ as VoidSigner, bK as Indexed, bL as deepCopy, bM as isHexString, bN as checkResultErrors, bO as resolveProperties, ar as BigNumber, bP as accessListify, bQ as arrayify, j as jsx, _ as _objectWithoutProperties, ap as cloneElementWithCssProp, o as Body, k as _defineProperty, J as CheckoutErrorType, bR as IMMUTABLE_API_BASE_URL, r as reactExports, I as IMTBLWidgetEvents, b0 as BridgeEventType, n as jsxs, bS as ShimmerBox, M as MenuItem, aL as Stack, l as useTranslation, d as Button, a as Box, bT as PASSPORT_URL, ag as Link, bU as getChainIdBySlug, P as getChainImage, bV as networkName, O as FramedImage, bd as Icon, t as useAnalytics, U as UserJourney, aN as Divider, V as ViewContext, aB as Fragment, p as ViewActions, a8 as useWalletConnect, aa as isWalletConnectProvider, bc as Logo, bW as RawImage, bX as AXELAR_SCAN_URL, G as isNativeToken, W as getTokenImageByAddress, bY as getNativeSymbolByChainSlug, X as calculateCryptoToFiat, E as EventTargetContext, w as isPassportProvider, y as getL1ChainId, T as TokenFilterTypes, x as getL2ChainId, bZ as WalletProviderRdns, b_ as Web3Provider, b$ as useInjectedProviders, Y as HeaderNavigation, a1 as FooterLogo, c0 as WalletDrawer, a2 as SimpleLayout, c1 as getChainSlugById, c2 as JsonRpcProvider, c3 as DEFAULT_TRANSACTIONS_RETRY_POLICY, aj as LoadingView, aX as ChainId, c4 as getChainNameById, u as useTheme, a6 as Heading, a4 as getWalletProviderNameByProvider, c5 as isAddressSanctioned, K as SharedViews, c6 as isMetaMaskProvider, a3 as WalletProviderName, a7 as Drawer, B as ButtCon, $ as ButtonNavigationStyles, A as tokenValueFormat, v as formatZeroAmount, bf as NATIVE, bh as amountInputValidation, b6 as getRemoteImage, bb as CloudImage, c7 as ETH_TOKEN_SYMBOL, z as Environment, c8 as GasEstimateType, bl as DEFAULT_TOKEN_DECIMALS, bg as DEFAULT_QUOTE_REFRESH_INTERVAL, c9 as addChainChangedListener, ca as removeChainChangedListener, bn as IMX_TOKEN_SYMBOL, cb as dist, cc as CHECKOUT_CDN_BASE_URL, ab as heroBackGroundStyles, ac as heroImageStyles, cd as Badge, ae as SimpleTextBody, bo as FooterButton, ce as getEthTokenImage, cf as WITHDRAWAL_CLAIM_GAS_LIMIT, be as getDefaultTokenImage, ah as viewReducer, ai as initialViewState, cg as BridgeConfiguration, ch as ImmutableConfiguration, ci as TokenBridge, bq as StatusView, aJ as StatusType, ak as ErrorView, cj as ServiceUnavailableErrorView, ck as ServiceType, cl as ETH_SEPOLIA_TO_ZKEVM_TESTNET, cm as ETH_SEPOLIA_TO_ZKEVM_DEVNET, cn as ETH_MAINNET_TO_ZKEVM_MAINNET } from './index-5qc7Vsg4.js';
-import { B as BridgeWidgetViews, C as CryptoFiatContext, f as formatUnits, a as CryptoFiatActions, p as parseUnits, T as TopUpView, b as CryptoFiatProvider } from './TopUpView-Dw-JH0Q5.js';
-import { T as TokenImage, r as retry, u as useInterval } from './retry-C_l6vh-l.js';
-import { A as Accordion, S as SelectForm, T as TransactionRejected, g as getAllowedBalances, F as Fees, N as NetworkSwitchDrawer, W as WalletApproveHero } from './balance-Dt4oB1G1.js';
-import { T as TextInputForm } from './TextInputForm-Cy6sTMjr.js';
+import { bz as axios, bA as defineReadOnly, bB as getStatic, bC as Signer, bD as Provider, bE as getAddress, bF as Logger, bG as getContractAddress, bH as Interface, bI as shallowCopy, bJ as VoidSigner, bK as Indexed, bL as deepCopy, bM as isHexString, bN as checkResultErrors, bO as resolveProperties, ar as BigNumber, bP as accessListify, bQ as arrayify, j as jsx, _ as _objectWithoutProperties, ap as cloneElementWithCssProp, o as Body, k as _defineProperty, J as CheckoutErrorType, bR as IMMUTABLE_API_BASE_URL, r as reactExports, I as IMTBLWidgetEvents, b0 as BridgeEventType, n as jsxs, bS as ShimmerBox, M as MenuItem, aL as Stack, l as useTranslation, d as Button, a as Box, bT as PASSPORT_URL, ag as Link, bU as getChainIdBySlug, P as getChainImage, bV as networkName, O as FramedImage, bd as Icon, t as useAnalytics, U as UserJourney, aN as Divider, V as ViewContext, aB as Fragment, p as ViewActions, a8 as useWalletConnect, aa as isWalletConnectProvider, bc as Logo, bW as RawImage, bX as AXELAR_SCAN_URL, G as isNativeToken, W as getTokenImageByAddress, bY as getNativeSymbolByChainSlug, X as calculateCryptoToFiat, E as EventTargetContext, w as isPassportProvider, y as getL1ChainId, T as TokenFilterTypes, x as getL2ChainId, bZ as WalletProviderRdns, b_ as Web3Provider, b$ as useInjectedProviders, Y as HeaderNavigation, a1 as FooterLogo, c0 as WalletDrawer, a2 as SimpleLayout, c1 as getChainSlugById, c2 as JsonRpcProvider, c3 as DEFAULT_TRANSACTIONS_RETRY_POLICY, aj as LoadingView, aX as ChainId, c4 as getChainNameById, u as useTheme, a6 as Heading, a4 as getWalletProviderNameByProvider, c5 as isAddressSanctioned, K as SharedViews, c6 as isMetaMaskProvider, a3 as WalletProviderName, a7 as Drawer, B as ButtCon, $ as ButtonNavigationStyles, F as orchestrationEvents, A as tokenValueFormat, v as formatZeroAmount, bf as NATIVE, bh as amountInputValidation, b6 as getRemoteImage, bb as CloudImage, c7 as ETH_TOKEN_SYMBOL, z as Environment, c8 as GasEstimateType, bl as DEFAULT_TOKEN_DECIMALS, bg as DEFAULT_QUOTE_REFRESH_INTERVAL, c9 as addChainChangedListener, ca as removeChainChangedListener, bn as IMX_TOKEN_SYMBOL, cb as dist, cc as CHECKOUT_CDN_BASE_URL, ab as heroBackGroundStyles, ac as heroImageStyles, cd as Badge, ae as SimpleTextBody, bo as FooterButton, ce as getEthTokenImage, cf as WITHDRAWAL_CLAIM_GAS_LIMIT, be as getDefaultTokenImage, ah as viewReducer, ai as initialViewState, cg as BridgeConfiguration, ch as ImmutableConfiguration, ci as TokenBridge, bq as StatusView, aJ as StatusType, ak as ErrorView, cj as ServiceUnavailableErrorView, ck as ServiceType, cl as ETH_SEPOLIA_TO_ZKEVM_TESTNET, cm as ETH_SEPOLIA_TO_ZKEVM_DEVNET, cn as ETH_MAINNET_TO_ZKEVM_MAINNET } from './index-DnQfQojQ.js';
+import { B as BridgeWidgetViews, C as CryptoFiatContext, f as formatUnits, a as CryptoFiatActions, p as parseUnits, T as TopUpView, b as CryptoFiatProvider } from './TopUpView-CojeMjuL.js';
+import { T as TokenImage, r as retry, u as useInterval } from './retry-TNKwGgHJ.js';
+import { A as Accordion, S as SelectForm, T as TransactionRejected, g as getAllowedBalances, F as Fees, N as NetworkSwitchDrawer, W as WalletApproveHero } from './balance-_0wiNzA1.js';
+import { T as TextInputForm } from './TextInputForm-BvZsFFRK.js';
 
 // This module is intended to unwrap Axios default export as named.
 // Keep top-level export same with static properties
@@ -2435,7 +2435,7 @@ function WalletAndNetworkSelector() {
                         }, environment: environment }), jsx(Box, { sx: submitButtonWrapperStyles, children: jsx(Button, { testId: `${testId$1}-submit-button`, size: "large", onClick: handleSubmitDetails, children: t('views.WALLET_NETWORK_SELECTION.submitButton.text') }) })] }))] }));
 }
 
-function WalletNetworkSelectionView() {
+function WalletNetworkSelectionView({ showBackButton, }) {
     const { t } = useTranslation();
     const { viewDispatch } = reactExports.useContext(ViewContext);
     const { eventTargetState: { eventTarget } } = reactExports.useContext(EventTargetContext);
@@ -2453,7 +2453,9 @@ function WalletNetworkSelectionView() {
                             view: { type: BridgeWidgetViews.TRANSACTIONS },
                         },
                     });
-                }, testId: "move-transactions-button" })) })), footer: jsx(FooterLogo, {}), children: jsx(WalletAndNetworkSelector, {}) }));
+                }, testId: "move-transactions-button" })), showBack: showBackButton, onBackButtonClick: () => {
+                orchestrationEvents.sendRequestGoBackEvent(eventTarget, IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT, {});
+            } })), footer: jsx(FooterLogo, {}), children: jsx(WalletAndNetworkSelector, {}) }));
 }
 
 function validateToken(fromToken) {
@@ -3870,7 +3872,7 @@ function ClaimWithdrawal({ transaction }) {
                             : handleWithdrawalClaimClick({ forceChangeAccount: true })), children: loading || txProcessing ? (jsx(Button.Icon, { icon: "Loading", sx: { width: 'base.icon.size.400' } })) : t(`views.CLAIM_WITHDRAWAL.${hasWithdrawError ? 'footer.retryText' : 'footer.buttonText'}`) }) }), jsx(FooterLogo, {})] })), children: [jsxs(SimpleTextBody, { heading: `${t('views.CLAIM_WITHDRAWAL.content.heading')} ${getChainNameById(getL1ChainId(checkout.config))}`, children: [jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', pb: 'base.spacing.x1' }, children: t('views.CLAIM_WITHDRAWAL.content.body') }), jsxs(Box, { children: [t('views.CLAIM_WITHDRAWAL.content.body2'), jsx(EllipsizedText, { text: transaction.details.to_address.toLowerCase() ?? '' })] })] }), jsx(NotEnoughEthToWithdraw, { visible: showNotEnoughEthDrawer, onClose: () => setShowNotEnoughEthDrawer(false), onChangeAccount: () => handleWithdrawalClaimClick({ forceChangeAccount: true }) })] }));
 }
 
-function BridgeWidget({ checkout, web3Provider, config, amount, tokenAddress, }) {
+function BridgeWidget({ checkout, web3Provider, config, amount, tokenAddress, showBackButton, }) {
     const { t } = useTranslation();
     const { environment, isOnRampEnabled, isSwapEnabled, isBridgeEnabled, theme, } = config;
     const defaultTokenImage = getDefaultTokenImage(checkout.config.environment, theme);
@@ -3964,7 +3966,7 @@ function BridgeWidget({ checkout, web3Provider, config, amount, tokenAddress, })
             });
         })();
     }, [web3Provider]);
-    return (jsx(ViewContext.Provider, { value: viewReducerValues, children: jsx(BridgeContext.Provider, { value: bridgeReducerValues, children: jsxs(CryptoFiatProvider, { environment: environment, children: [viewState.view.type === BridgeWidgetViews.WALLET_NETWORK_SELECTION && (jsx(WalletNetworkSelectionView, {})), viewState.view.type === BridgeWidgetViews.BRIDGE_FORM && (jsx(Bridge, { amount: amount, tokenAddress: tokenAddress, defaultTokenImage: defaultTokenImage, theme: theme })), viewState.view.type === BridgeWidgetViews.BRIDGE_REVIEW && (jsx(BridgeReview, {})), viewState.view.type === BridgeWidgetViews.IN_PROGRESS && (jsx(MoveInProgress, { transactionHash: viewState.view.transactionHash, isTransfer: viewState.view.isTransfer })), viewState.view.type === BridgeWidgetViews.BRIDGE_FAILURE
+    return (jsx(ViewContext.Provider, { value: viewReducerValues, children: jsx(BridgeContext.Provider, { value: bridgeReducerValues, children: jsxs(CryptoFiatProvider, { environment: environment, children: [viewState.view.type === BridgeWidgetViews.WALLET_NETWORK_SELECTION && (jsx(WalletNetworkSelectionView, { showBackButton: showBackButton })), viewState.view.type === BridgeWidgetViews.BRIDGE_FORM && (jsx(Bridge, { amount: amount, tokenAddress: tokenAddress, defaultTokenImage: defaultTokenImage, theme: theme })), viewState.view.type === BridgeWidgetViews.BRIDGE_REVIEW && (jsx(BridgeReview, {})), viewState.view.type === BridgeWidgetViews.IN_PROGRESS && (jsx(MoveInProgress, { transactionHash: viewState.view.transactionHash, isTransfer: viewState.view.isTransfer })), viewState.view.type === BridgeWidgetViews.BRIDGE_FAILURE
                         && (jsx(StatusView, { testId: "bridge-fail", statusText: t('views.BRIDGE_FAILURE.bridgeFailureText.statusText'), actionText: t('views.BRIDGE_FAILURE.bridgeFailureText.actionText'), onActionClick: goBackToReview, statusType: StatusType.FAILURE, onRenderEvent: () => {
                                 let reason = '';
                                 if (viewState.view.type === BridgeWidgetViews.BRIDGE_FAILURE) {

package/dist/browser/checkout/{CheckoutWidget-Bvnur5WZ.js → CheckoutWidget-B1pE8Gc2.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, cD as PostMessageHandler, j as jsx, I as IMTBLWidgetEvents, E as EventTargetContext, cE as PostMessageHandlerEventType, cF as CheckoutEventType, cG as CheckoutSuccessEventType, b_ as Web3Provider, l as useTranslation, ak as ErrorView, n as jsxs, aj as LoadingView, a as Box, aB as Fragment, z as Environment, cH as CHECKOUT_APP_URL, cI as CheckoutFlowType, cJ as ENV_DEVELOPMENT } from './index-5qc7Vsg4.js';
+import { r as reactExports, cD as PostMessageHandler, j as jsx, I as IMTBLWidgetEvents, E as EventTargetContext, cE as PostMessageHandlerEventType, cF as CheckoutEventType, cG as CheckoutSuccessEventType, b_ as Web3Provider, l as useTranslation, ak as ErrorView, n as jsxs, aj as LoadingView, a as Box, aB as Fragment, z as Environment, cH as CHECKOUT_APP_URL, cI as CheckoutFlowType, cJ as ENV_DEVELOPMENT } from './index-DnQfQojQ.js';
 
 const initialCheckoutState = {
     checkout: null,
@@ -175,6 +175,8 @@ function useEip6963Relayer() {
         postMessageHandler?.send(PostMessageHandlerEventType.EIP_6963_EVENT, {
             message: 'eip6963:announceProvider',
             info: event.detail.info,
+            isPassport: event.detail.provider?.isPassport,
+            isMetamask: event.detail.provider?.isMetamask,
         });
     }, [postMessageHandler]);
     reactExports.useEffect(() => {
@@ -200,6 +202,11 @@ function useEip6963Relayer() {
     }, [postMessageHandler, onRequest]);
 }
 
+var ConnectMethods;
+(function (ConnectMethods) {
+    ConnectMethods["REQUEST_ACCOUNTS"] = "eth_requestAccounts";
+    ConnectMethods["REQUEST_PERMISSIONS"] = "wallet_requestPermissions";
+})(ConnectMethods || (ConnectMethods = {}));
 function useProviderRelay() {
     const [{ checkout, postMessageHandler, provider }, checkoutDispatch] = useCheckoutContext();
     const unsubscribePostMessageHandler = reactExports.useRef();
@@ -226,11 +233,7 @@ function useProviderRelay() {
             });
         }
         catch (error) {
-            // Send the error using the postMessageHandler
-            postMessageHandler.send(PostMessageHandlerEventType.PROVIDER_RELAY, {
-                response: { id: payload.jsonRpcRequestMessage.id, error: error.message, jsonrpc: '2.0' },
-                eip6963Info: payload.eip6963Info,
-            });
+            throw new Error(error);
         }
     }, [postMessageHandler]);
     /**
@@ -249,26 +252,25 @@ function useProviderRelay() {
             console.error('PARENT - requested provider not found', providerRelayPayload?.eip6963Info, injectedProviders);
             return;
         }
-        // If provider is not defined, connect the target provider
         let currentProvider = provider;
+        // If provider is not defined, create a provider
         if (!currentProvider && targetProvider) {
-            const connectResponse = await checkout.connect({
-                provider: new Web3Provider(targetProvider.provider),
-            });
-            currentProvider = connectResponse.provider;
-            // Set provider and execute the request
-            checkoutDispatch({
-                payload: {
-                    type: CheckoutActions.SET_PROVIDER,
-                    provider: currentProvider,
-                },
-            });
+            currentProvider = new Web3Provider(targetProvider.provider);
         }
         if (!currentProvider) {
             throw new Error('Provider is not defined');
         }
         try {
             await execute(providerRelayPayload, currentProvider);
+            if (providerRelayPayload.jsonRpcRequestMessage.method === ConnectMethods.REQUEST_ACCOUNTS
+                || providerRelayPayload.jsonRpcRequestMessage.method === ConnectMethods.REQUEST_PERMISSIONS) {
+                checkoutDispatch({
+                    payload: {
+                        type: CheckoutActions.SET_PROVIDER,
+                        provider: currentProvider,
+                    },
+                });
+            }
         }
         catch (error) {
             // Send the error using the postMessageHandler
@@ -282,16 +284,12 @@ function useProviderRelay() {
      * Subscribe to provider relay messages
      */
     reactExports.useEffect(() => {
-        // TODO we need to unsubscribe everywhere
         if (!postMessageHandler)
             return;
         unsubscribePostMessageHandler.current?.();
         unsubscribePostMessageHandler.current = postMessageHandler?.subscribe(onJsonRpcRequestMessage);
     }, [postMessageHandler, onJsonRpcRequestMessage]);
 }
-// TODO -
-// 1 - commit the unsub part
-// 2 - add unsubs to all postMessageHandlers subscriptions
 
 /**
  * The timeout in milliseconds for the iframe to be initialized.
@@ -316,6 +314,20 @@ const IFRAME_ALLOW_PERMISSIONS = `
     .trim()
     .replace(/\n/g, '');
 
+function useWidgetProviderEventRelayer() {
+    const [checkoutState] = useCheckoutContext();
+    const { postMessageHandler } = checkoutState;
+    const onWidgetProviderEvent = reactExports.useCallback(() => {
+        postMessageHandler?.send(PostMessageHandlerEventType.WIDGET_PROVIDER_EVENT, {});
+    }, [postMessageHandler]);
+    reactExports.useEffect(() => {
+        if (!postMessageHandler)
+            return () => { };
+        window.addEventListener(PostMessageHandlerEventType.WIDGET_PROVIDER_EVENT, onWidgetProviderEvent);
+        return () => window.removeEventListener(PostMessageHandlerEventType.WIDGET_PROVIDER_EVENT, onWidgetProviderEvent);
+    }, [postMessageHandler, onWidgetProviderEvent]);
+}
+
 function CheckoutAppIframe() {
     const { t } = useTranslation();
     const iframeRef = reactExports.useRef(null);
@@ -326,6 +338,7 @@ function CheckoutAppIframe() {
     useCheckoutEventsRelayer();
     useEip6963Relayer();
     useProviderRelay();
+    useWidgetProviderEventRelayer();
     const loading = !iframeURL || !iframeContentWindow || !initialised;
     const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
     reactExports.useEffect(() => {
@@ -373,6 +386,21 @@ function CheckoutAppIframe() {
                 } }))] }));
 }
 
+/**
+ * Encodes a JSON object using base64 encoding.
+ */
+const encodeObject = async (value) => {
+    try {
+        const str = JSON.stringify(value);
+        const base64String = btoa(str);
+        return encodeURIComponent(base64String);
+    }
+    catch (error) {
+        throw new Error(`Compression failed: ${error.message}`);
+    }
+};
+
+/* eslint-disable no-case-declarations */
 /**
  * Converts a record of parameters to a query string.
  */
@@ -391,7 +419,7 @@ const toQueryString = (params) => {
 /**
  * Maps the flow configuration and params to the corresponding query parameters.
  */
-const getIframeParams = (params, widgetConfig, checkoutConfig) => {
+const getIframeParams = async (params, widgetConfig, checkoutConfig) => {
     const { flow } = params;
     const commonConfig = {
         theme: widgetConfig.theme,
@@ -461,6 +489,7 @@ const getIframeParams = (params, widgetConfig, checkoutConfig) => {
                 toAmount: params.tokenAddress,
             });
         case CheckoutFlowType.SALE:
+            const items = await encodeObject(params.items || []);
             return toQueryString({
                 ...commonConfig,
                 ...(widgetConfig.sale || {}),
@@ -473,7 +502,7 @@ const getIframeParams = (params, widgetConfig, checkoutConfig) => {
                 // TODO: Get from hub
                 environmentId: params.environmentId,
                 collectionName: params.collectionName,
-                items: params.items,
+                items,
                 preferredCurrency: params.preferredCurrency,
                 excludePaymentTypes: params.excludePaymentTypes,
                 excludeFiatCurrencies: params.excludeFiatCurrencies,
@@ -485,10 +514,11 @@ const getIframeParams = (params, widgetConfig, checkoutConfig) => {
 /**
  * Returns the iframe URL for the Checkout App based on the environment.
  */
-const getIframeURL = (params, widgetConfig, checkoutConfig) => {
+const getIframeURL = async (params, widgetConfig, checkoutConfig) => {
     const { flow } = params;
     const { publishableKey } = checkoutConfig;
-    const language = params.language || widgetConfig.language;
+    if (!publishableKey)
+        return '';
     let environment = checkoutConfig.environment || Environment.SANDBOX;
     if (checkoutConfig.isDevelopment) {
         environment = ENV_DEVELOPMENT;
@@ -496,10 +526,11 @@ const getIframeURL = (params, widgetConfig, checkoutConfig) => {
     if (checkoutConfig.overrides?.environment) {
         environment = checkoutConfig.overrides.environment;
     }
-    const baseURL = checkoutConfig.overrides?.checkoutAppUrl ?? CHECKOUT_APP_URL[environment];
-    const queryParams = getIframeParams(params, widgetConfig, checkoutConfig);
-    const iframeURL = `${baseURL}/${publishableKey}/${language}/${flow}?${queryParams}`;
-    return [baseURL, iframeURL];
+    const baseURL = checkoutConfig.overrides?.checkoutAppUrl
+        ?? CHECKOUT_APP_URL[environment];
+    const queryParams = await getIframeParams(params, widgetConfig, checkoutConfig);
+    const iframeURL = `${baseURL}/${flow}?${queryParams}`;
+    return iframeURL;
 };
 
 /**
@@ -519,13 +550,28 @@ const useMount = (effect, deps, compare) => {
     }, [deps, effect, compare]);
 };
 
+/**
+ * Handle asynchronous operations with memoization.
+ * It only re-executes the async function when dependencies change.
+ */
+const useAsyncMemo = (asyncFn, dependencies) => {
+    const [value, setValue] = reactExports.useState();
+    reactExports.useEffect(() => {
+        let isMounted = true;
+        asyncFn().then((result) => {
+            if (isMounted)
+                setValue(result);
+        });
+        return () => {
+            isMounted = false;
+        };
+    }, dependencies);
+    return value;
+};
+
 function CheckoutWidget(props) {
     const { config, checkout, params, provider, } = props;
-    const [, iframeURL] = reactExports.useMemo(() => {
-        if (!checkout.config.publishableKey)
-            return ['', ''];
-        return getIframeURL(params, config, checkout.config);
-    }, [params, config, checkout.config]);
+    const iframeURL = useAsyncMemo(async () => getIframeURL(params, config, checkout.config), [params, config, checkout.config]);
     const [checkoutState, checkoutDispatch] = reactExports.useReducer(checkoutReducer, initialCheckoutState);
     const checkoutReducerValues = reactExports.useMemo(() => ({
         checkoutState: { ...checkoutState, iframeURL, checkout },