@imtbl/sdk 1.4.0-alpha.2 → 1.4.1-alpha.1

package/dist/browser/checkout/BridgeWidget-52ba2210.js

@@ -1,2753 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { IMMUTABLE_API_BASE_URL, ChainId, ChainName, ChainSlug, WalletProviderName, IMTBLWidgetEvents, BridgeEventType, TokenFilterTypes, GasEstimateType, CheckoutErrorType } from '@imtbl/checkout-sdk';
-import { createContext, useState, useEffect, useMemo, useContext, useCallback, useRef, useReducer } from 'react';
-import { C as CryptoFiatContext, a as CryptoFiatActions, b as CryptoFiatProvider, T as TopUpView } from './TopUpView-590c2c4c.js';
-import { JsonRpcProvider } from '@ethersproject/providers';
-import { ad as text, aq as BridgeWidgetViews, ar as PASSPORT_URL, q as networkIcon$3, r as logoColour$2, as as networkName, u as useAnalytics, U as UserJourney, V as ViewContext, b as ViewActions, at as isMetaMaskProvider, j as isPassportProvider, au as AXELAR_SCAN_URL, x as calculateCryptoToFiat, E as EventTargetContext, l as getL1ChainId, k as getL2ChainId, av as createAndConnectToProvider, a as SimpleLayout, H as HeaderNavigation, F as FooterLogo, aw as DEFAULT_TRANSACTIONS_RETRY_POLICY, L as LoadingView, B as ButtonNavigationStyles, ax as ETH_TOKEN_SYMBOL, ay as getEthTokenImage, af as getImxTokenImage, t as tokenValueFormat, h as formatZeroAmount, m as isNativeToken, N as NATIVE, ag as DEFAULT_QUOTE_REFRESH_INTERVAL, ah as amountInputValidation, al as IMX_TOKEN_SYMBOL, S as SharedViews, aj as DEFAULT_TOKEN_DECIMALS, az as CHECKOUT_CDN_BASE_URL, A as heroBackGroundStyles, G as heroImageStyles, c as SimpleTextBody, am as FooterButton, aA as WITHDRAWAL_CLAIM_GAS_LIMIT, v as viewReducer, i as initialViewState, d as StatusView, f as StatusType, K as ErrorView } from './index-4511315b.js';
-import { ImmutableConfiguration } from '@imtbl/config';
-import { BridgeConfiguration, TokenBridge, ETH_SEPOLIA_TO_ZKEVM_TESTNET, ETH_SEPOLIA_TO_ZKEVM_DEVNET, ETH_MAINNET_TO_ZKEVM_MAINNET } from '@imtbl/bridge-sdk';
-import { MenuItem, Drawer, Select, Box, ShimmerBox, Body, Button, Link, Icon, EllipsizedText, Accordion, Divider, Logo, Heading, ButtCon, CloudImage, PriceDisplay, Badge } from '@biom3/react';
-import axios, { HttpStatusCode } from 'axios';
-import { r as retry, u as useInterval } from './retry-254e3478.js';
-import { useTranslation } from 'react-i18next';
-import { b as FormControlWrapper, S as SelectForm, T as TextInputForm, F as FeesBreakdown, a as TransactionRejected, g as getAllowedBalances, W as WalletApproveHero } from './balance-e5d785aa.js';
-import { formatUnits } from 'ethers/lib/utils';
-import { utils, BigNumber } from 'ethers';
-import { useRive, Layout, Fit } from '@rive-app/react-canvas';
-
-const CACHE_DATA_TTL = 60; // seconds
-/**
- * Checkout API class provides a client abstraction for the Checkout API.
- */
-class CheckoutApi {
-    url;
-    ttl;
-    env;
-    cacheMap;
-    setCache(key, data) {
-        this.cacheMap[key] = { data, ttl: new Date().getTime() + this.ttl * 1000 };
-    }
-    getCache(key) {
-        const d = this.cacheMap[key];
-        if (!d || d.ttl <= new Date().getTime())
-            return null;
-        return d.data;
-    }
-    /**
-     * Checkout API constructor
-     * @param env target chain
-     * @param ttl cache TTL
-     */
-    constructor(params) {
-        this.env = params.env;
-        this.url = `${IMMUTABLE_API_BASE_URL[this.env]}/checkout`;
-        this.cacheMap = {};
-        this.ttl = params.ttl !== undefined ? params.ttl : CACHE_DATA_TTL;
-    }
-    /**
-     * isHttpError verifies if the error is a HTTP error
-     * @param err error to evaluate
-     */
-    static isHttpError = (err) => 'code' in err;
-    /**
-     * getTransactions fetches a list of blockchain transactions.
-     * @param txType transaction type
-     * @param fromAddress transactions executed from address
-     */
-    async getTransactions(params) {
-        const { txType, fromAddress } = params;
-        try {
-            const url = `${this.url}/v1/transactions?from_address=${fromAddress}&tx_type=${txType}`;
-            // Cache response data to prevent unnecessary requests
-            const cached = this.getCache(url);
-            if (cached)
-                return Promise.resolve(cached);
-            const response = await axios.get(url);
-            if (response.status >= 400) {
-                return Promise.reject({
-                    code: response.status,
-                    message: response.statusText,
-                });
-            }
-            const { data } = response;
-            this.setCache(url, data);
-            return Promise.resolve(data);
-        }
-        catch (err) {
-            let code = HttpStatusCode.InternalServerError;
-            let message = 'InternalServerError';
-            if (axios.isAxiosError(err)) {
-                code = err.response?.status || code;
-                message = err.message;
-            }
-            return Promise.reject({ code, message });
-        }
-    }
-}
-
-/* eslint-disable @typescript-eslint/naming-convention */
-var TransactionType;
-(function (TransactionType) {
-    TransactionType["BRIDGE"] = "bridge";
-})(TransactionType || (TransactionType = {}));
-const TransactionStatus = {
-    IN_PROGRESS: 'in_progress',
-    WITHDRAWAL_PENDING: 'withdrawal_pending',
-};
-
-function getChainNameById(chainId) {
-    switch (chainId) {
-        case ChainId.ETHEREUM: return ChainName.ETHEREUM;
-        case ChainId.IMTBL_ZKEVM_TESTNET: return ChainName.IMTBL_ZKEVM_TESTNET;
-        case ChainId.IMTBL_ZKEVM_MAINNET: return ChainName.IMTBL_ZKEVM_MAINNET;
-        case ChainId.IMTBL_ZKEVM_DEVNET: return ChainName.IMTBL_ZKEVM_DEVNET;
-        case ChainId.SEPOLIA: return ChainName.SEPOLIA;
-        default: return '';
-    }
-}
-function getChainSlugById(chainId) {
-    switch (chainId) {
-        case ChainId.ETHEREUM: return ChainSlug.ETHEREUM;
-        case ChainId.IMTBL_ZKEVM_TESTNET: return ChainSlug.IMTBL_ZKEVM_TESTNET;
-        case ChainId.IMTBL_ZKEVM_MAINNET: return ChainSlug.IMTBL_ZKEVM_MAINNET;
-        case ChainId.IMTBL_ZKEVM_DEVNET: return ChainSlug.IMTBL_ZKEVM_DEVNET;
-        case ChainId.SEPOLIA: return ChainSlug.SEPOLIA;
-        default: return '';
-    }
-}
-function getChainIdBySlug(chainSlug) {
-    switch (chainSlug) {
-        case ChainSlug.ETHEREUM: return ChainId.ETHEREUM;
-        case ChainSlug.IMTBL_ZKEVM_TESTNET: return ChainId.IMTBL_ZKEVM_TESTNET;
-        case ChainSlug.IMTBL_ZKEVM_MAINNET: return ChainId.IMTBL_ZKEVM_MAINNET;
-        case ChainSlug.IMTBL_ZKEVM_DEVNET: return ChainId.IMTBL_ZKEVM_DEVNET;
-        case ChainSlug.SEPOLIA: return ChainId.SEPOLIA;
-        default: return 0;
-    }
-}
-
-const initialBridgeState = {
-    web3Provider: null,
-    walletProviderName: null,
-    from: null,
-    to: null,
-    tokenBridge: null,
-    tokenBalances: [],
-    allowedTokens: [],
-    token: null,
-    amount: '0',
-};
-var BridgeActions;
-(function (BridgeActions) {
-    BridgeActions["SET_WALLETS_AND_NETWORKS"] = "SET_WALLETS_AND_NETWORKS";
-    BridgeActions["SET_WALLET_PROVIDER_NAME"] = "SET_WALLET_PROVIDER_NAME";
-    BridgeActions["SET_PROVIDER"] = "SET_PROVIDER";
-    BridgeActions["SET_TOKEN_BRIDGE"] = "SET_TOKEN_BRIDGE";
-    BridgeActions["SET_TOKEN_BALANCES"] = "SET_TOKEN_BALANCES";
-    BridgeActions["SET_ALLOWED_TOKENS"] = "SET_ALLOWED_TOKENS";
-    BridgeActions["SET_TOKEN_AND_AMOUNT"] = "SET_TOKEN_AND_AMOUNT";
-})(BridgeActions || (BridgeActions = {}));
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const BridgeContext = createContext({
-    bridgeState: { ...initialBridgeState, checkout: {} },
-    bridgeDispatch: () => { },
-});
-BridgeContext.displayName = 'BridgeContext'; // help with debugging Context in browser
-const bridgeReducer = (state, action) => {
-    switch (action.payload.type) {
-        case BridgeActions.SET_WALLETS_AND_NETWORKS:
-            return {
-                ...state,
-                from: action.payload.from,
-                to: action.payload.to,
-            };
-        case BridgeActions.SET_WALLET_PROVIDER_NAME:
-            return {
-                ...state,
-                walletProviderName: action.payload.walletProviderName,
-            };
-        case BridgeActions.SET_PROVIDER:
-            return {
-                ...state,
-                web3Provider: action.payload.web3Provider,
-            };
-        case BridgeActions.SET_TOKEN_BRIDGE:
-            return {
-                ...state,
-                tokenBridge: action.payload.tokenBridge,
-            };
-        case BridgeActions.SET_TOKEN_BALANCES:
-            return {
-                ...state,
-                tokenBalances: action.payload.tokenBalances,
-            };
-        case BridgeActions.SET_ALLOWED_TOKENS:
-            return {
-                ...state,
-                allowedTokens: action.payload.allowedTokens,
-            };
-        case BridgeActions.SET_TOKEN_AND_AMOUNT:
-            return {
-                ...state,
-                token: action.payload.token,
-                amount: action.payload.amount,
-            };
-        default:
-            return state;
-    }
-};
-
-function WalletItem({ testId, walletProviderName, onWalletClick, loading, }) {
-    const { t } = useTranslation();
-    const [showLoadingIcon, setShowLoadingIcon] = useState(false);
-    const logo = {
-        [WalletProviderName.PASSPORT]: 'PassportSymbolOutlined',
-        [WalletProviderName.METAMASK]: 'MetaMaskSymbol',
-    };
-    return (jsxs(MenuItem, { testId: `${testId}-wallet-list-${walletProviderName}`, size: "medium", emphasized: true, onClick: async () => {
-            if (loading)
-                return;
-            setShowLoadingIcon(true);
-            // let the parent handle errors
-            try {
-                await onWalletClick(walletProviderName);
-            }
-            finally {
-                setShowLoadingIcon(false);
-            }
-        }, children: [jsx(MenuItem.FramedLogo, { logo: logo[walletProviderName], sx: { backgroundColor: 'base.color.translucent.standard.200' } }), jsx(MenuItem.Label, { size: "medium", children: t(`wallets.${walletProviderName}.heading`) }), showLoadingIcon && (jsx(MenuItem.StatefulButtCon, { state: "loading", icon: "Loading" }))] }));
-}
-
-const walletItemListStyles = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 'base.spacing.x1',
-};
-
-function WalletDrawer({ testId, drawerText, walletOptions, showWalletSelectorTarget, showDrawer, setShowDrawer, onWalletItemClick, }) {
-    const [walletItemLoading, setWalletItemLoading] = useState(false);
-    const { heading, defaultText } = drawerText;
-    const handleWalletItemClick = async (name) => {
-        setWalletItemLoading(true);
-        try {
-            await onWalletItemClick(name);
-        }
-        catch (err) {
-            // eslint-disable-next-line no-console
-            console.error(err);
-        }
-        finally {
-            setWalletItemLoading(false);
-        }
-    };
-    return (jsxs(Drawer, { headerBarTitle: heading, size: "full", onCloseDrawer: () => {
-            if (walletItemLoading)
-                return;
-            setShowDrawer(false);
-        }, visible: showDrawer, children: [showWalletSelectorTarget
-                && (jsx(Drawer.Target, { children: jsx(FormControlWrapper, { testId: `${testId}-wallet-form-control`, textAlign: "left", children: jsx(Select, { testId: `${testId}-wallet-select`, defaultLabel: defaultText ?? '', size: "large", targetClickOveride: () => setShowDrawer(true) }) }) })), jsx(Drawer.Content, { sx: walletItemListStyles, children: walletOptions.map((walletProviderName) => (jsx(WalletItem, { testId: testId, loading: walletItemLoading, walletProviderName: walletProviderName, onWalletClick: handleWalletItemClick }, walletProviderName))) })] }));
-}
-
-const sendBridgeTransactionSentEvent = (eventTarget, transactionHash) => {
-    const successEvent = new CustomEvent(IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT, {
-        detail: {
-            type: BridgeEventType.TRANSACTION_SENT,
-            data: {
-                transactionHash,
-            },
-        },
-    });
-    // eslint-disable-next-line no-console
-    console.log('bridge success ', eventTarget, successEvent);
-    if (eventTarget !== undefined)
-        eventTarget.dispatchEvent(successEvent);
-};
-const sendBridgeFailedEvent = (eventTarget, reason) => {
-    const failedEvent = new CustomEvent(IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT, {
-        detail: {
-            type: BridgeEventType.FAILURE,
-            data: {
-                reason,
-                timestamp: new Date().getTime(),
-            },
-        },
-    });
-    // eslint-disable-next-line no-console
-    console.log('bridge failed ', eventTarget, failedEvent);
-    if (eventTarget !== undefined)
-        eventTarget.dispatchEvent(failedEvent);
-};
-function sendBridgeWidgetCloseEvent(eventTarget) {
-    const closeWidgetEvent = new CustomEvent(IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT, {
-        detail: {
-            type: BridgeEventType.CLOSE_WIDGET,
-            data: {},
-        },
-    });
-    // eslint-disable-next-line no-console
-    console.log('bridge close ', eventTarget, closeWidgetEvent);
-    if (eventTarget !== undefined)
-        eventTarget.dispatchEvent(closeWidgetEvent);
-}
-const sendBridgeClaimWithdrawalSuccessEvent = (eventTarget, transactionHash) => {
-    const successEvent = new CustomEvent(IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT, {
-        detail: {
-            type: BridgeEventType.CLAIM_WITHDRAWAL_SUCCESS,
-            data: {
-                transactionHash,
-            },
-        },
-    });
-    // eslint-disable-next-line no-console
-    console.log('bridge claim withdrawal success event:', eventTarget, successEvent);
-    if (eventTarget !== undefined)
-        eventTarget.dispatchEvent(successEvent);
-};
-const sendBridgeClaimWithdrawalFailedEvent = (eventTarget, transactionHash, reason) => {
-    const failedEvent = new CustomEvent(IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT, {
-        detail: {
-            type: BridgeEventType.CLAIM_WITHDRAWAL_FAILURE,
-            data: {
-                transactionHash,
-                reason,
-                timestamp: new Date().getTime(),
-            },
-        },
-    });
-    // eslint-disable-next-line no-console
-    console.log('bridge claim withdrawal failed event:', eventTarget, failedEvent);
-    if (eventTarget !== undefined)
-        eventTarget.dispatchEvent(failedEvent);
-};
-
-function Shimmer() {
-    return (jsxs(Box, { sx: {
-            pt: 'base.spacing.x5',
-            px: 'base.spacing.x4',
-        }, children: [jsx(ShimmerBox, { sx: {
-                    h: 'base.spacing.x4',
-                    w: 'base.spacing.x32',
-                    mb: 'base.spacing.x2',
-                    mt: 'base.spacing.x2',
-                } }), jsx(Box, { sx: { mb: 'base.spacing.x5' }, children: jsx(MenuItem, { shimmer: true, emphasized: true, size: "small" }) }), jsx(Box, { sx: { mb: 'base.spacing.x5' }, children: jsx(MenuItem, { shimmer: true, emphasized: true, size: "small" }) }), jsx(Box, { sx: { mb: 'base.spacing.x5' }, children: jsx(MenuItem, { shimmer: true, emphasized: true, size: "small" }) })] }));
-}
-
-const transactionsContainerStyle = {
-    px: 'base.spacing.x4',
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-};
-const transactionsListContainerStyle = {
-    flexGrow: '1',
-    flexShrink: '0',
-    flexBasis: '0',
-};
-const supportBoxContainerStyle = {
-    flexGrow: '0',
-    flexShrink: '1',
-    mt: 'base.spacing.x2',
-};
-
-const containerStyle = {
-    bg: 'base.color.translucent.emphasis.100',
-    borderRadius: 'base.borderRadius.x4',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'column',
-    height: '100%',
-    px: 'base.spacing.x5',
-};
-
-function EmptyStateNotConnected({ openWalletDrawer }) {
-    const { t } = useTranslation();
-    return (jsxs(Box, { sx: containerStyle, children: [jsx(Body, { sx: { mb: 'base.spacing.x8' }, children: t('views.TRANSACTIONS.status.emptyState.notConnected.body') }), jsx(Button, { variant: "secondary", size: "medium", testId: "transactions-connect-wallet-button", onClick: openWalletDrawer, children: t('views.TRANSACTIONS.status.emptyState.notConnected.buttonText') })] }));
-}
-
-const supportMessageBoxStyle = {
-    backgroundColor: 'base.color.neutral.800',
-    px: 'base.spacing.x4',
-    p: 'base.spacing.x5',
-    borderRadius: 'base.borderRadius.x6',
-};
-const bodyStyle = {
-    color: 'base.color.text.secondary',
-};
-
-function SupportMessage({ checkout, isPassport, }) {
-    const { support: { body1, body2, body3, supportLink, passport, }, } = text.views[BridgeWidgetViews.TRANSACTIONS];
-    const [passportLink, setPassportLink] = useState('');
-    useEffect(() => {
-        if (!checkout)
-            return;
-        setPassportLink(PASSPORT_URL[checkout.config.environment]);
-    }, [checkout]);
-    return (jsx(Box, { sx: supportMessageBoxStyle, children: jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-            }, children: [jsxs(Box, { children: [jsx(Body, { size: "small", children: body1 }), jsxs(Body, { size: "small", sx: bodyStyle, children: [body2, jsx(Link, { size: "small", rc: jsx("a", { target: "_blank", href: supportLink, rel: "noreferrer" }), children: body3 })] })] }), isPassport && (jsxs(Body, { size: "small", sx: bodyStyle, children: [passport.body1, ' ', jsx(Link, { size: "small", rc: jsx("a", { target: "_blank", href: passportLink, rel: "noreferrer" }), children: passport.body2 })] }))] }) }));
-}
-
-const containerStyles$4 = {
-    display: 'flex',
-    flexDirection: 'column',
-    borderRadius: 'base.borderRadius.x4',
-    bg: 'base.color.translucent.emphasis.100',
-};
-const actionsContainerStyles = {
-    p: 'base.spacing.x3',
-    d: 'flex',
-    justifyContent: 'space-between',
-    position: 'relative',
-};
-const actionsLayoutStyles = {
-    display: 'flex',
-    flexGrow: '1',
-    alignItems: 'center',
-    gap: 'base.spacing.x2',
-};
-
-function TransactionDetails({ transaction }) {
-    const fromChain = getChainIdBySlug(transaction.details.from_chain);
-    const toChain = getChainIdBySlug(transaction.details.to_chain);
-    return (jsxs(Box, { sx: {
-            display: 'flex',
-            px: 'base.spacing.x4',
-            gap: 'base.spacing.x2',
-        }, children: [jsx(Icon, { icon: networkIcon$3[fromChain], sx: {
-                    w: 'base.icon.size.250',
-                    fill: logoColour$2[fromChain],
-                }, variant: "bold" }), jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    flexGrow: '1',
-                }, children: [jsx(Body, { size: "xxSmall", sx: { color: 'base.color.translucent.standard.900' }, children: networkName[fromChain] }), jsx(EllipsizedText, { size: "xxSmall", sx: { color: 'base.color.translucent.standard.600' }, text: transaction.details.from_address })] }), jsx(Box, { sx: { flexGrow: '1' } }), jsx(Icon, { icon: "ArrowForward", sx: {
-                    w: 'base.icon.size.250',
-                    fill: 'base.color.brand.4',
-                } }), jsx(Box, { sx: { flexGrow: '1' } }), jsx(Icon, { icon: networkIcon$3[toChain], sx: {
-                    w: 'base.icon.size.250',
-                    fill: logoColour$2[toChain],
-                }, variant: "bold" }), jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    flexGrow: '1',
-                }, children: [jsx(Body, { size: "xxSmall", sx: { color: 'base.color.translucent.standard.900' }, children: networkName[toChain] }), jsx(EllipsizedText, { size: "xxSmall", sx: { color: 'base.color.translucent.standard.600' }, text: transaction.details.to_address })] })] }));
-}
-
-function TransactionItem({ label, details, transaction, fiatAmount, amount, }) {
-    const { track } = useAnalytics();
-    const txnDetailsLink = useMemo(() => `${details.link}${details.hash}`, [details]);
-    const handleDetailsLinkClick = (event, linkDetail) => {
-        event.stopPropagation(); // prevent expanding accordian
-        track({
-            userJourney: UserJourney.BRIDGE,
-            screen: 'TransactionItem',
-            control: 'Details',
-            controlType: 'Link',
-            extras: {
-                linkDetail,
-            },
-        });
-    };
-    return (jsx(Box, { testId: `transaction-item-${transaction.blockchain_metadata.transaction_hash}`, sx: containerStyles$4, children: jsxs(Accordion, { chevronSide: "right", sx: {
-                button: {
-                    p: 'base.spacing.x1',
-                },
-                article: {
-                    pr: 'base.spacing.x10',
-                },
-            }, onExpandChange: (expanded) => expanded
-                && track({
-                    userJourney: UserJourney.BRIDGE,
-                    screen: 'TransactionItem',
-                    control: 'Accordion',
-                    controlType: 'Button',
-                }), children: [jsx(Accordion.TargetLeftSlot, { sx: { pr: 'base.spacing.x2' }, children: jsxs(MenuItem, { size: "xSmall", children: [jsx(MenuItem.FramedIcon, { icon: "Coins", circularFrame: true }), jsx(MenuItem.Label, { children: label }), jsx(MenuItem.Caption, { children: jsx(Link, { size: "xSmall", rc: (jsx("a", { target: "_blank", href: txnDetailsLink, rel: "noreferrer", onClick: (e) => handleDetailsLinkClick(e, details) })), children: details.text }) }), jsx(MenuItem.PriceDisplay, { fiatAmount: fiatAmount, price: amount })] }) }), jsxs(Accordion.ExpandedContent, { sx: {
-                        pr: '0',
-                        pl: '0',
-                        mb: 'base.spacing.x3',
-                        gap: '0',
-                    }, children: [jsx(Divider, { size: "xSmall", sx: {
-                                px: 'base.spacing.x2',
-                            } }), jsx(TransactionDetails, { transaction: transaction })] })] }) }));
-}
-
-const transactionsListStyle = (showPassportLink) => {
-    let height = 440;
-    if (showPassportLink) {
-        height -= 20;
-    }
-    return {
-        backgroundColor: 'base.color.neutral.800',
-        px: 'base.spacing.x4',
-        pt: 'base.spacing.x5',
-        pb: 'base.spacing.x4',
-        borderRadius: 'base.borderRadius.x6',
-        h: `${height}px`,
-        w: '100%',
-        overflowY: 'scroll',
-    };
-};
-const containerStyles$3 = {
-    borderRadius: 'base.borderRadius.x4',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 'base.spacing.x5',
-};
-
-function TransactionItemWithdrawPending({ label, transaction, fiatAmount, amount, }) {
-    const { viewDispatch } = useContext(ViewContext);
-    const { track } = useAnalytics();
-    const translation = useTranslation();
-    const dateNowUnixMs = useMemo(() => new Date().getTime(), []);
-    const withdrawalReadyDate = useMemo(() => (transaction.details.current_status.withdrawal_ready_at
-        ? new Date(transaction.details.current_status.withdrawal_ready_at)
-        : undefined), [transaction]);
-    const requiresWithdrawalClaim = transaction.details.current_status.status === TransactionStatus.WITHDRAWAL_PENDING;
-    const relativeTimeFormat = new Intl.RelativeTimeFormat(translation[1].language || 'en', { numeric: 'auto' });
-    const delayTimeString = useMemo(() => {
-        if (!requiresWithdrawalClaim || withdrawalReadyDate === undefined)
-            return '';
-        const timeDiffMins = (withdrawalReadyDate.getTime() - dateNowUnixMs) / (60 * 1000);
-        if (timeDiffMins <= 1)
-            return 'in 1 minute';
-        if (timeDiffMins < 60) {
-            return relativeTimeFormat.format(Math.ceil(timeDiffMins), 'minute');
-        }
-        const timeDiffHours = timeDiffMins / 60; // hours
-        if (timeDiffMins < 60 * 24) {
-            return relativeTimeFormat.format(Math.ceil(timeDiffHours), 'hour');
-        }
-        const timeDiffDays = timeDiffHours / 24; // days
-        return relativeTimeFormat.format(Math.ceil(timeDiffDays), 'day');
-    }, [dateNowUnixMs, translation[1].language]);
-    const withdrawalReadyToClaim = withdrawalReadyDate ? withdrawalReadyDate.getTime() < dateNowUnixMs : false;
-    const actionMessage = useMemo(() => (withdrawalReadyToClaim === true
-        ? translation.t('views.TRANSACTIONS.status.withdrawalPending.withdrawalReadyText')
-        : `${translation.t('views.TRANSACTIONS.status.withdrawalPending.withdrawalDelayText')} ${delayTimeString}`), [delayTimeString, translation[1].language]);
-    const handleWithdrawalClaimClick = () => {
-        viewDispatch({
-            payload: {
-                type: ViewActions.UPDATE_VIEW,
-                view: {
-                    type: BridgeWidgetViews.CLAIM_WITHDRAWAL,
-                    transaction,
-                },
-            },
-        });
-    };
-    return (jsxs(Box, { testId: `transaction-item-${transaction.blockchain_metadata.transaction_hash}`, sx: containerStyles$4, children: [requiresWithdrawalClaim && (jsxs(Fragment, { children: [jsxs(Box, { sx: actionsContainerStyles, children: [jsxs(Box, { sx: actionsLayoutStyles, children: [jsx(Icon, { icon: "Alert", variant: "bold", sx: {
-                                            fill: withdrawalReadyToClaim
-                                                ? 'base.color.status.fatal.bright'
-                                                : 'base.color.status.attention.bright',
-                                            w: 'base.icon.size.200',
-                                        } }), jsx(Body, { testId: `transaction-item-${transaction.blockchain_metadata.transaction_hash}-action-message`, size: "xSmall", sx: { color: 'base.color.text.secondary' }, children: actionMessage })] }), requiresWithdrawalClaim && withdrawalReadyToClaim && (jsx(Button, { testId: `transaction-item-${transaction.blockchain_metadata.transaction_hash}-action-button`, variant: "primary", size: "small", onClick: handleWithdrawalClaimClick, children: translation.t('views.TRANSACTIONS.status.withdrawalPending.actionButtonText') }))] }), jsx(Divider, { size: "small", sx: { color: 'base.color.translucent.emphasis.300', opacity: 0.1 } })] })), jsxs(Accordion, { chevronSide: "right", sx: {
-                    button: {
-                        p: 'base.spacing.x1',
-                    },
-                    article: {
-                        pr: 'base.spacing.x10',
-                    },
-                    borderTopRightRadius: '0',
-                    borderTopLeftRadius: '0',
-                }, onExpandChange: (expanded) => expanded
-                    && track({
-                        userJourney: UserJourney.BRIDGE,
-                        screen: 'TransactionItem',
-                        control: 'Accordion',
-                        controlType: 'Button',
-                    }), children: [jsx(Accordion.TargetLeftSlot, { sx: { pr: 'base.spacing.x2' }, children: jsxs(MenuItem, { size: "xSmall", children: [jsx(MenuItem.FramedIcon, { icon: "Coins", circularFrame: true }), jsx(MenuItem.Label, { children: label }), jsx(MenuItem.Caption, { children: translation.t('views.TRANSACTIONS.status.withdrawalPending.caption') }), jsx(MenuItem.PriceDisplay, { fiatAmount: fiatAmount, price: amount })] }) }), jsxs(Accordion.ExpandedContent, { sx: {
-                            pr: '0',
-                            pl: '0',
-                            mb: 'base.spacing.x3',
-                            gap: '0',
-                        }, children: [jsx(Divider, { size: "xSmall", sx: {
-                                    px: 'base.spacing.x2',
-                                } }), jsx(TransactionDetails, { transaction: transaction })] })] })] }));
-}
-
-const headingStyles = {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    p: 'base.spacing.x2',
-    pb: 'base.spacing.x4',
-};
-
-function ChangeWallet({ onChangeWalletClick, }) {
-    const { t } = useTranslation();
-    const { bridgeState: { from } } = useContext(BridgeContext);
-    const { track } = useAnalytics();
-    const walletAddress = from?.walletAddress || '';
-    const isMetaMask = isMetaMaskProvider(from?.web3Provider);
-    const isPassport = isPassportProvider(from?.web3Provider);
-    const handleChangeWalletClick = () => {
-        track({
-            userJourney: UserJourney.BRIDGE,
-            screen: BridgeWidgetViews.TRANSACTIONS,
-            controlType: 'Button',
-            control: 'Pressed',
-        });
-        onChangeWalletClick();
-    };
-    return (jsxs(Box, { sx: headingStyles, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 'base.spacing.x1' }, children: [isMetaMask && !isPassport && jsx(Logo, { logo: "MetaMaskSymbol", sx: { width: 'base.icon.size.400' } }), !isMetaMask && isPassport && (jsx(Logo, { logo: "PassportSymbolOutlined", sx: {
-                            width: 'base.icon.size.400',
-                            pr: 'base.spacing.x1',
-                        } })), jsx(EllipsizedText, { leftSideLength: 6, rightSideLength: 4, text: walletAddress })] }), jsx(Button, { size: "small", variant: "tertiary", onClick: handleChangeWalletClick, children: t('views.TRANSACTIONS.changeWallet.buttonText') })] }));
-}
-
-function TransactionList({ checkout, transactions, knownTokenMap, isPassport, changeWallet, }) {
-    const { cryptoFiatState } = useContext(CryptoFiatContext);
-    const { t } = useTranslation();
-    const { fiatPricePrefix, } = text.views[BridgeWidgetViews.TRANSACTIONS];
-    const [link, setLink] = useState('');
-    useEffect(() => {
-        if (!checkout)
-            return;
-        setLink(AXELAR_SCAN_URL[checkout.config.environment]);
-    }, [checkout]);
-    const sortWithdrawalPendingFirst = useCallback((txnA, txnB) => {
-        if (txnA.details.current_status.status === TransactionStatus.WITHDRAWAL_PENDING
-            && txnB.details.current_status.status !== TransactionStatus.WITHDRAWAL_PENDING)
-            return -1;
-        if (txnA.details.current_status.status === txnB.details.current_status.status)
-            return 0;
-        return 1;
-    }, []);
-    return (jsxs(Box, { sx: transactionsListStyle(isPassport), children: [jsx(ChangeWallet, { onChangeWalletClick: changeWallet }), jsx(Box, { testId: "move-transaction-list", sx: containerStyles$3, children: transactions
-                    .sort(sortWithdrawalPendingFirst)
-                    .map((transaction) => {
-                    const hash = transaction.blockchain_metadata.transaction_hash;
-                    const tokens = knownTokenMap[transaction.details.from_chain];
-                    const token = tokens[transaction.details.from_token_address.toLowerCase()];
-                    const amount = formatUnits(transaction.details.amount, token.decimals);
-                    const fiat = calculateCryptoToFiat(amount, token.symbol, cryptoFiatState.conversions);
-                    if (transaction.details.current_status.status === TransactionStatus.WITHDRAWAL_PENDING) {
-                        return (jsx(TransactionItemWithdrawPending, { label: token.name, transaction: transaction, fiatAmount: `${fiatPricePrefix}${fiat}`, amount: amount }, hash));
-                    }
-                    return (jsx(TransactionItem, { label: token.name, details: { text: t('views.TRANSACTIONS.status.inProgress.stepInfo'), link, hash }, transaction: transaction, fiatAmount: `${fiatPricePrefix}${fiat}`, amount: amount }, hash));
-                }) })] }));
-}
-
-const containerStyles$2 = {
-    backgroundColor: 'base.color.neutral.800',
-    px: 'base.spacing.x4',
-    pt: 'base.spacing.x5',
-    pb: 'base.spacing.x4',
-    borderRadius: 'base.borderRadius.x6',
-    h: '100%',
-    w: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-};
-const noTransactionsContainerStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 'base.spacing.x5',
-    flex: 1,
-};
-const noTransactionsBodyStyle = {
-    mb: 'base.spacing.x8',
-    color: 'base.color.text.secondary',
-};
-const passportBodyStyle = {
-    color: 'base.color.text.secondary',
-};
-
-function NoTransactions({ checkout, isPassport, changeWallet, }) {
-    const { page } = useAnalytics();
-    const { t } = useTranslation();
-    const [passportLink, setPassportLink] = useState('');
-    useEffect(() => {
-        if (!checkout)
-            return;
-        setPassportLink(PASSPORT_URL[checkout.config.environment]);
-    }, [checkout]);
-    useEffect(() => {
-        page({
-            userJourney: UserJourney.BRIDGE,
-            screen: 'NoTransactions',
-        });
-    }, []);
-    return (jsxs(Box, { sx: containerStyles$2, children: [jsx(ChangeWallet, { onChangeWalletClick: changeWallet }), jsxs(Box, { sx: noTransactionsContainerStyle, children: [jsx(Body, { size: "small", sx: noTransactionsBodyStyle, children: t('views.TRANSACTIONS.status.noTransactions.body') }), isPassport && (jsxs(Body, { size: "small", sx: passportBodyStyle, children: [t('views.TRANSACTIONS.status.noTransactions.passport.body'), ' ', jsx(Link, { size: "small", rc: jsx("a", { target: "_blank", href: passportLink, rel: "noreferrer" }), children: t('views.TRANSACTIONS.status.noTransactions.passport.link') })] }))] })] }));
-}
-
-function Transactions({ onBackButtonClick }) {
-    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
-    const { cryptoFiatDispatch } = useContext(CryptoFiatContext);
-    const { bridgeDispatch, bridgeState: { checkout, from } } = useContext(BridgeContext);
-    const { page } = useAnalytics();
-    const { t } = useTranslation();
-    const { track } = useAnalytics();
-    const [loading, setLoading] = useState(true);
-    const [knownTokenMap, setKnownTokenMap] = useState(undefined);
-    const [txs, setTxs] = useState([]);
-    const [showWalletDrawer, setShowWalletDrawer] = useState(false);
-    const isPassport = isPassportProvider(from?.web3Provider);
-    // Fetch the tokens for the root chain using the allowed tokens.
-    // In case this list does not have all the tokens, there is logic
-    // built into the <TransactionsList /> component to fetch the
-    // the missing data.
-    const rootChainTokensHashmap = useCallback(async () => {
-        if (!checkout)
-            return {};
-        const rootChainId = getL1ChainId(checkout.config);
-        try {
-            const tokens = (await checkout.getTokenAllowList({ type: TokenFilterTypes.BRIDGE, chainId: rootChainId })).tokens ?? [];
-            return tokens.reduce((out, current) => {
-                // eslint-disable-next-line no-param-reassign
-                out[current.address.toLowerCase()] = current;
-                return out;
-            }, {});
-        }
-        catch (e) {
-            // eslint-disable-next-line no-console
-            console.error(e);
-            return [];
-        }
-    }, [checkout]);
-    // Fetch the tokens for the root chain using the user balances tokens.
-    // In case this list does not have all the tokens, there is logic
-    // built into the <TransactionsList /> component to fetch the
-    // the missing data.
-    const childChainTokensHashmap = useCallback(async () => {
-        if (!from?.web3Provider)
-            return {};
-        if (!from?.walletAddress)
-            return {};
-        const childChainId = getL2ChainId(checkout.config);
-        try {
-            const data = await checkout.getAllBalances({
-                provider: from?.web3Provider,
-                walletAddress: from?.walletAddress,
-                chainId: childChainId,
-            });
-            return data.balances.reduce((out, current) => {
-                // eslint-disable-next-line no-param-reassign
-                out[current.token.address.toLowerCase()] = current.token;
-                return out;
-            }, {});
-        }
-        catch (e) {
-            // eslint-disable-next-line no-console
-            console.error(e);
-            return [];
-        }
-    }, [checkout, from]);
-    const updateAndConnectProvider = useCallback(async (walletProviderName) => {
-        track({
-            userJourney: UserJourney.BRIDGE,
-            screen: 'EmptyStateNotConnected',
-            control: 'WalletProvider',
-            controlType: 'Select',
-            extras: {
-                walletProviderName,
-            },
-        });
-        try {
-            const localProvider = await createAndConnectToProvider(checkout, walletProviderName, true);
-            const network = await localProvider.getNetwork();
-            const address = await localProvider?.getSigner().getAddress() ?? '';
-            setTxs([]);
-            bridgeDispatch({
-                payload: {
-                    type: BridgeActions.SET_WALLETS_AND_NETWORKS,
-                    from: {
-                        web3Provider: localProvider,
-                        walletAddress: address.toLowerCase(),
-                        network: network.chainId,
-                    },
-                    to: null,
-                },
-            });
-        }
-        catch (error) {
-            // eslint-disable-next-line no-console
-            console.error(error);
-        }
-        finally {
-            setShowWalletDrawer(false);
-        }
-    }, [checkout, from]);
-    const getTokensDetails = async (tokensWithChainSlug) => {
-        const rootChainName = getChainSlugById(getL1ChainId(checkout.config));
-        const childChainName = getChainSlugById(getL2ChainId(checkout.config));
-        const [rootData, childData] = await Promise.all([
-            rootChainTokensHashmap(),
-            childChainTokensHashmap(),
-        ]);
-        // Fetch the data for the missing tokens: tokensWithChainSlug
-        const missingTokens = {};
-        Object.entries(tokensWithChainSlug).forEach(([key, value]) => {
-            if ((tokensWithChainSlug[key] === rootChainName && !rootData[key])
-                || (tokensWithChainSlug[key] === childChainName && !childData[key]))
-                missingTokens[key] = value;
-        });
-        // Root provider is always L1
-        const rootProvider = new JsonRpcProvider(checkout.config.networkMap.get(getL1ChainId(checkout.config))?.rpcUrls[0]);
-        // Child provider is always L2
-        const childProvider = new JsonRpcProvider(checkout.config.networkMap.get(getL2ChainId(checkout.config))?.rpcUrls[0]);
-        const rootTokenInfoPromises = [];
-        const childTokenInfoPromises = [];
-        Object.entries(missingTokens).forEach(([tokenAddress, chainName]) => {
-            if (chainName === rootChainName) {
-                // Root provider
-                rootTokenInfoPromises.push(checkout.getTokenInfo({
-                    provider: rootProvider,
-                    tokenAddress,
-                }));
-            }
-            else {
-                // child provider
-                childTokenInfoPromises.push(checkout.getTokenInfo({
-                    provider: childProvider,
-                    tokenAddress,
-                }));
-            }
-        });
-        const rootTokenInfo = await Promise.allSettled(rootTokenInfoPromises);
-        const childTokenInfo = await Promise.allSettled(childTokenInfoPromises);
-        (rootTokenInfo.filter((result) => result.status === 'fulfilled'))
-            .forEach((result) => {
-            const resp = result;
-            rootData[resp.value.address.toLowerCase()] = resp.value;
-        });
-        (childTokenInfo.filter((result) => result.status === 'fulfilled'))
-            .forEach((result) => {
-            const resp = result;
-            childData[resp.value.address.toLowerCase()] = resp.value;
-        });
-        const allTokenSymbols = [];
-        Object.values(rootData).forEach((token) => allTokenSymbols.push(token.symbol.toLowerCase()));
-        Object.values(childData).forEach((token) => allTokenSymbols.push(token.symbol.toLowerCase()));
-        cryptoFiatDispatch({
-            payload: {
-                type: CryptoFiatActions.SET_TOKEN_SYMBOLS,
-                tokenSymbols: allTokenSymbols,
-            },
-        });
-        return { [rootChainName]: rootData, [childChainName]: childData };
-    };
-    const getTransactionsDetails = useCallback(async (env, address) => {
-        const client = new CheckoutApi({ env });
-        return client.getTransactions({ txType: TransactionType.BRIDGE, fromAddress: address });
-    }, []);
-    const fetchData = useCallback(async () => {
-        if (!from?.walletAddress)
-            return undefined;
-        const localTxs = await getTransactionsDetails(checkout.config.environment, from?.walletAddress);
-        const tokensWithChainSlug = {};
-        localTxs.result.forEach((txn) => {
-            tokensWithChainSlug[txn.details.from_token_address] = txn.details.from_chain;
-        });
-        return {
-            tokens: await getTokensDetails(tokensWithChainSlug),
-            transactions: localTxs.result,
-        };
-    }, [from, getTransactionsDetails]);
-    const walletOptions = useMemo(() => {
-        const options = [WalletProviderName.METAMASK];
-        if (checkout.passport) {
-            options.push(WalletProviderName.PASSPORT);
-        }
-        return options;
-    }, [checkout]);
-    // Fetch all the data at once
-    useEffect(() => {
-        (async () => {
-            setLoading(true);
-            const data = await retry(fetchData, DEFAULT_TRANSACTIONS_RETRY_POLICY);
-            if (!data) {
-                setLoading(false);
-                return;
-            }
-            const knownTxs = data.transactions.filter((txn) => {
-                const tokens = data.tokens[txn.details.from_chain];
-                if (!tokens)
-                    return false;
-                const token = tokens[txn.details.from_token_address.toLowerCase()];
-                if (!token)
-                    return false;
-                return true;
-            });
-            setKnownTokenMap(data.tokens);
-            setTxs(knownTxs);
-            setLoading(false);
-        })();
-    }, [from?.walletAddress, checkout]);
-    useEffect(() => {
-        page({
-            userJourney: UserJourney.BRIDGE,
-            screen: 'Transactions',
-        });
-    }, []);
-    return (jsx(SimpleLayout, { testId: "bridge-view", header: (jsx(HeaderNavigation, { showBack: true, onBackButtonClick: onBackButtonClick, title: t('views.TRANSACTIONS.layoutHeading'), onCloseButtonClick: () => sendBridgeWidgetCloseEvent(eventTarget) })), footer: jsx(FooterLogo, {}), children: jsxs(Box, { sx: transactionsContainerStyle, children: [jsxs(Box, { sx: transactionsListContainerStyle, children: [!from?.web3Provider && (jsx(EmptyStateNotConnected, { openWalletDrawer: () => setShowWalletDrawer(true) })), from?.web3Provider && loading && (jsx(Shimmer, {})), from?.web3Provider && !loading && txs.length > 0 && knownTokenMap && (jsx(TransactionList, { checkout: checkout, transactions: txs, knownTokenMap: knownTokenMap, isPassport: isPassport, changeWallet: () => setShowWalletDrawer(true) })), from?.web3Provider && !loading && txs.length === 0 && (jsx(NoTransactions, { checkout: checkout, isPassport: isPassport, changeWallet: () => setShowWalletDrawer(true) }))] }), from?.web3Provider && txs.length > 0 && (jsx(Box, { sx: supportBoxContainerStyle, children: jsx(SupportMessage, { checkout: checkout, isPassport: isPassport }) })), jsx(WalletDrawer, { testId: "select-wallet-drawer", drawerText: {
-                        heading: t('views.TRANSACTIONS.walletSelection.heading'),
-                    }, showWalletSelectorTarget: false, walletOptions: walletOptions, showDrawer: showWalletDrawer, setShowDrawer: (show) => { setShowWalletDrawer(show); }, onWalletItemClick: updateAndConnectProvider })] }) }));
-}
-
-function ClaimWithdrawalInProgress({ transactionResponse }) {
-    const { t } = useTranslation();
-    const { viewDispatch } = useContext(ViewContext);
-    const { page } = useAnalytics();
-    useEffect(() => {
-        page({
-            userJourney: UserJourney.BRIDGE,
-            screen: 'ClaimWithdrawalInProgress',
-        });
-    }, []);
-    useEffect(() => {
-        if (!transactionResponse)
-            return;
-        (async () => {
-            try {
-                const receipt = await transactionResponse.wait();
-                if (receipt.status === 1) {
-                    viewDispatch({
-                        payload: {
-                            type: ViewActions.UPDATE_VIEW,
-                            view: {
-                                type: BridgeWidgetViews.CLAIM_WITHDRAWAL_SUCCESS,
-                                transactionHash: receipt.transactionHash,
-                            },
-                        },
-                    });
-                    return;
-                }
-                viewDispatch({
-                    payload: {
-                        type: ViewActions.UPDATE_VIEW,
-                        view: {
-                            type: BridgeWidgetViews.CLAIM_WITHDRAWAL_FAILURE,
-                            transactionHash: receipt.transactionHash,
-                            reason: 'Transaction failed',
-                        },
-                    },
-                });
-            }
-            catch (error) {
-                // eslint-disable-next-line no-console
-                console.error(error);
-                viewDispatch({
-                    payload: {
-                        type: ViewActions.UPDATE_VIEW,
-                        view: {
-                            type: BridgeWidgetViews.CLAIM_WITHDRAWAL_FAILURE,
-                            transactionHash: '',
-                            reason: 'Transaction failed',
-                        },
-                    },
-                });
-            }
-        })();
-    }, [transactionResponse]);
-    return jsx(LoadingView, { loadingText: t('views.CLAIM_WITHDRAWAL.IN_PROGRESS.loading.text'), showFooterLogo: true });
-}
-
-function abbreviateAddress(address) {
-    if (!address)
-        return '';
-    return address.substring(0, 6).concat('...').concat(address.substring(address.length - 4));
-}
-
-const brigdeWalletWrapperStyles = {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    paddingX: 'base.spacing.x4',
-};
-const bridgeHeadingStyles = {
-    paddingTop: 'base.spacing.x10',
-    paddingBottom: 'base.spacing.x4',
-};
-const submitButtonWrapperStyles = {
-    display: 'flex',
-    flexDirection: 'column',
-    paddingY: 'base.spacing.x6',
-};
-
-const logoColour$1 = {
-    [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',
-};
-const networkItemStyles = (chainId) => ({
-    backgroundColor: logoColour$1[chainId],
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    '& svg': {
-        fill: 'base.color.brand.2',
-    },
-});
-
-const networkIcon$2 = {
-    [ChainId.IMTBL_ZKEVM_DEVNET]: 'Immutable',
-    [ChainId.IMTBL_ZKEVM_MAINNET]: 'Immutable',
-    [ChainId.IMTBL_ZKEVM_TESTNET]: 'Immutable',
-    [ChainId.ETHEREUM]: 'EthToken',
-    [ChainId.SEPOLIA]: 'EthToken',
-};
-function NetworkItem({ testId, chainId, chainName, onNetworkClick, }) {
-    return (jsxs(MenuItem, { testId: `${testId}-network-list-${chainId}`, size: "medium", emphasized: true, onClick: async () => {
-            await onNetworkClick(chainId);
-        }, sx: { marginBottom: 'base.spacing.x1' }, children: [jsx(MenuItem.FramedIcon, { icon: networkIcon$2[chainId], circularFrame: true, sx: networkItemStyles(chainId) }), jsx(MenuItem.Label, { size: "medium", children: chainName })] }));
-}
-
-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',
-};
-const walletButtonOuterStyles = {
-    width: '100%',
-    backgroundColor: 'base.color.translucent.emphasis.100',
-    borderRadius: 'base.borderRadius.x4',
-    paddingX: 'base.spacing.x3',
-    paddingY: 'base.spacing.x5',
-    display: 'flex',
-    flexDirection: 'row',
-    gap: 'base.spacing.x4',
-    alignItems: 'center',
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    '&:hover': {
-        cursor: 'pointer',
-        backgroundColor: 'base.color.translucent.emphasis.200',
-    },
-};
-const walletLogoStyles = (walletName) => ({
-    width: 'base.icon.size.500',
-    padding: walletName === WalletProviderName.PASSPORT ? 'base.spacing.x1' : '',
-    backgroundColor: 'base.color.translucent.standard.200',
-    borderRadius: 'base.borderRadius.x2',
-});
-const walletCaptionStyles = { color: 'base.color.text.secondary' };
-const networkButtonStyles = {
-    paddingY: 'base.spacing.x6',
-    borderRadius: 'base.borderRadius.x18',
-};
-const networkIconStyles = (chainId) => ({
-    fill: 'base.color.brand.2',
-    width: 'base.icon.size.300',
-    backgroundColor: logoColour[chainId],
-    borderRadius: '100%',
-    padding: 'base.spacing.x1',
-});
-
-const networkIcon$1 = {
-    [ChainId.IMTBL_ZKEVM_DEVNET]: 'Immutable',
-    [ChainId.IMTBL_ZKEVM_MAINNET]: 'Immutable',
-    [ChainId.IMTBL_ZKEVM_TESTNET]: 'Immutable',
-    [ChainId.ETHEREUM]: 'EthToken',
-    [ChainId.SEPOLIA]: 'EthToken',
-};
-const walletLogo = {
-    [WalletProviderName.PASSPORT]: 'PassportSymbolOutlined',
-    [WalletProviderName.METAMASK]: 'MetaMaskSymbol',
-};
-function WalletNetworkButton({ testId, walletName, walletAddress, chainId, disableNetworkButton = false, onWalletClick, onNetworkClick, }) {
-    const networkName = getChainNameById(chainId);
-    const walletHeading = walletName === WalletProviderName.METAMASK ? 'Metamask' : 'Passport';
-    return (jsxs(Box, { testId: `${testId}-${walletName}-${chainId}-button-wrapper`, sx: walletButtonOuterStyles, onClick: onWalletClick, children: [jsx(Logo, { logo: walletLogo[walletName], sx: walletLogoStyles(walletName) }), jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    flex: 1,
-                }, children: [jsx(Heading, { size: "xSmall", children: walletHeading }), jsx(Body, { size: "xSmall", sx: walletCaptionStyles, children: walletAddress })] }), jsxs(Button, { testId: `${testId}-network-${chainId}-button`, size: "small", disabled: disableNetworkButton, onClick: (e) => {
-                    // stop propogation so onWalletClick is not triggered
-                    e.stopPropagation();
-                    onNetworkClick(e);
-                }, variant: "tertiary", sx: networkButtonStyles, children: [jsx(Button.Icon, { icon: networkIcon$1[chainId], sx: networkIconStyles(chainId) }), networkName] })] }));
-}
-
-const testId$1 = 'wallet-network-selector';
-function WalletAndNetworkSelector() {
-    const { t } = useTranslation();
-    const { bridgeState: { checkout, from, to, }, bridgeDispatch, } = useContext(BridgeContext);
-    const { viewDispatch } = useContext(ViewContext);
-    const { track } = useAnalytics();
-    // calculating l1/l2 chains to work with based on Checkout environment
-    const l1NetworkChainId = getL1ChainId(checkout.config);
-    const l1NetworkName = getChainNameById(l1NetworkChainId);
-    const imtblZkEvmNetworkChainId = getL2ChainId(checkout.config);
-    const imtblZkEvmNetworkName = getChainNameById(imtblZkEvmNetworkChainId);
-    const passportCache = useRef();
-    /** From wallet and from network local state */
-    const [fromWalletDrawerOpen, setFromWalletDrawerOpen] = useState(false);
-    const [fromNetworkDrawerOpen, setFromNetworkDrawerOpen] = useState(false);
-    const [fromWalletWeb3Provider, setFromWalletWeb3Provider] = useState();
-    const [fromNetwork, setFromNetwork] = useState();
-    const [fromWalletAddress, setFromWalletAddress] = useState('');
-    /** To wallet local state */
-    const [toWalletDrawerOpen, setToWalletDrawerOpen] = useState(false);
-    const [toWalletWeb3Provider, setToWalletWeb3Provider] = useState();
-    const [toNetwork, setToNetwork] = useState();
-    const [toWalletAddress, setToWalletAddress] = useState('');
-    /* Derived state */
-    const isFromWalletAndNetworkSelected = fromWalletWeb3Provider && fromNetwork;
-    const isToWalletAndNetworkSelected = toWalletWeb3Provider && toNetwork;
-    const fromWalletProviderName = useMemo(() => {
-        if (!fromWalletWeb3Provider)
-            return null;
-        return isPassportProvider(fromWalletWeb3Provider)
-            ? WalletProviderName.PASSPORT
-            : WalletProviderName.METAMASK;
-    }, [fromWalletWeb3Provider]);
-    const toWalletProviderName = useMemo(() => {
-        if (!fromWalletWeb3Provider)
-            return null;
-        return isPassportProvider(toWalletWeb3Provider)
-            ? WalletProviderName.PASSPORT
-            : WalletProviderName.METAMASK;
-    }, [toWalletWeb3Provider]);
-    const fromWalletSelectorOptions = useMemo(() => {
-        const options = [WalletProviderName.METAMASK];
-        if (checkout.passport) {
-            options.push(WalletProviderName.PASSPORT);
-        }
-        return options;
-    }, [checkout]);
-    const toWalletSelectorOptions = useMemo(() => {
-        const options = [WalletProviderName.METAMASK];
-        if (checkout.passport
-            && fromNetwork === l1NetworkChainId
-            && fromWalletProviderName === WalletProviderName.METAMASK) {
-            options.push(WalletProviderName.PASSPORT);
-        }
-        return options;
-    }, [checkout, fromNetwork, fromWalletProviderName]);
-    useEffect(() => {
-        if (!from || !to)
-            return;
-        if (fromWalletAddress !== from?.walletAddress) {
-            track({
-                userJourney: UserJourney.BRIDGE,
-                screen: 'WalletAndNetwork',
-                control: 'FromWallet',
-                controlType: 'Select',
-                extras: {
-                    walletAddress: from?.walletAddress,
-                },
-            });
-        }
-        if (fromNetwork !== from?.network) {
-            track({
-                userJourney: UserJourney.BRIDGE,
-                screen: 'WalletAndNetwork',
-                control: 'FromNetwork',
-                controlType: 'Select',
-                extras: {
-                    chainId: from?.network,
-                },
-            });
-        }
-        if (toWalletAddress !== to?.walletAddress) {
-            track({
-                userJourney: UserJourney.BRIDGE,
-                screen: 'WalletAndNetwork',
-                control: 'ToWallet',
-                controlType: 'Select',
-                extras: {
-                    walletAddress: to?.walletAddress,
-                },
-            });
-        }
-        if (toNetwork !== to?.network) {
-            track({
-                userJourney: UserJourney.BRIDGE,
-                screen: 'WalletAndNetwork',
-                control: 'ToNetwork',
-                controlType: 'Select',
-                extras: {
-                    chainId: to?.network,
-                },
-            });
-        }
-        // add local state from context values
-        // if user has clicked back button
-        setFromWalletWeb3Provider(from.web3Provider);
-        setFromWalletAddress(from.walletAddress.toLowerCase());
-        setFromNetwork(from.network);
-        setToWalletWeb3Provider(to.web3Provider);
-        setToWalletAddress(to.walletAddress.toLowerCase());
-        setToNetwork(to.network);
-        bridgeDispatch({
-            payload: {
-                type: BridgeActions.SET_WALLETS_AND_NETWORKS,
-                from: null,
-                to: null,
-            },
-        });
-    }, [from, to]);
-    const createProviderAndConnect = useCallback(async (walletProviderName) => {
-        let web3Provider;
-        try {
-            web3Provider = await createAndConnectToProvider(checkout, walletProviderName);
-            if (walletProviderName === WalletProviderName.PASSPORT) {
-                passportCache.current = web3Provider;
-            }
-            return web3Provider;
-        }
-        catch (error) {
-            // eslint-disable-next-line no-console
-            console.error(error);
-            throw error;
-        }
-    }, [checkout]);
-    function clearToWalletSelections() {
-        setToWalletWeb3Provider(null);
-        setToNetwork(null);
-    }
-    /* --------------------------- */
-    /* --- Handling selections --- */
-    /* --------------------------- */
-    const handleFromWalletConnection = useCallback(async (walletProviderName) => {
-        clearToWalletSelections();
-        let provider;
-        if (walletProviderName === WalletProviderName.PASSPORT && passportCache.current) {
-            provider = passportCache.current;
-        }
-        if (!provider) {
-            try {
-                provider = await createProviderAndConnect(walletProviderName);
-            }
-            catch (error) {
-                return;
-            }
-        }
-        setFromWalletWeb3Provider(provider);
-        const address = await provider.getSigner().getAddress();
-        setFromWalletAddress(address.toLowerCase());
-        /** if Passport skip from network selector and default to zkEVM */
-        if (isPassportProvider(provider)) {
-            setFromNetwork(imtblZkEvmNetworkChainId);
-            setFromWalletDrawerOpen(false);
-            return;
-        }
-        /**
-         * Force the selection of network
-         * by clearing the fromNetwork
-         * and opening the network drawer
-         */
-        setFromNetwork(null);
-        setFromWalletDrawerOpen(false);
-        setTimeout(() => setFromNetworkDrawerOpen(true), 500);
-    }, [fromWalletProviderName, passportCache.current]);
-    const handleFromNetworkSelection = useCallback(async (chainId) => {
-        if (!fromWalletWeb3Provider)
-            return;
-        clearToWalletSelections();
-        if (isPassportProvider(fromWalletWeb3Provider)) {
-            setFromNetworkDrawerOpen(false);
-            setFromNetwork(chainId);
-            return;
-        }
-        const currentNetwork = await fromWalletWeb3Provider?.getNetwork();
-        if (currentNetwork?.chainId === chainId) {
-            setFromNetworkDrawerOpen(false);
-            setFromNetwork(chainId);
-            return;
-        }
-        let switchNetwork;
-        try {
-            switchNetwork = await checkout.switchNetwork({ provider: fromWalletWeb3Provider, chainId });
-            setFromWalletWeb3Provider(switchNetwork.provider);
-            setFromNetworkDrawerOpen(false);
-            setFromNetwork(switchNetwork.network.chainId);
-        }
-        catch (err) {
-            // eslint-disable-next-line no-console
-            console.error(err);
-        }
-    }, [
-        checkout,
-        fromWalletWeb3Provider,
-        fromWalletProviderName,
-        fromNetwork,
-    ]);
-    const handleToWalletSelection = useCallback(async (selectedToWalletProviderName) => {
-        if (fromWalletProviderName === selectedToWalletProviderName) {
-            // if same from wallet and to wallet, just use the existing fromWalletLocalWeb3Provider
-            setToWalletWeb3Provider(fromWalletWeb3Provider);
-            const address = await fromWalletWeb3Provider.getSigner().getAddress();
-            setToWalletAddress(address.toLowerCase());
-        }
-        else {
-            let toWalletProvider;
-            if (selectedToWalletProviderName === WalletProviderName.PASSPORT && passportCache.current) {
-                toWalletProvider = passportCache.current;
-            }
-            if (!toWalletProvider) {
-                try {
-                    toWalletProvider = await createProviderAndConnect(selectedToWalletProviderName);
-                }
-                catch (error) {
-                    return;
-                }
-            }
-            setToWalletWeb3Provider(toWalletProvider);
-            const address = await toWalletProvider.getSigner().getAddress();
-            setToWalletAddress(address.toLowerCase());
-        }
-        // toNetwork is always the opposite of fromNetwork
-        const theToNetwork = fromNetwork === l1NetworkChainId ? imtblZkEvmNetworkChainId : l1NetworkChainId;
-        setToNetwork(theToNetwork);
-        setToWalletDrawerOpen(false);
-    }, [
-        fromWalletProviderName,
-        fromNetwork,
-        fromWalletWeb3Provider,
-        passportCache.current,
-    ]);
-    const handleSubmitDetails = useCallback(() => {
-        if (!fromWalletWeb3Provider || !fromNetwork || !toWalletWeb3Provider || !toNetwork)
-            return;
-        bridgeDispatch({
-            payload: {
-                type: BridgeActions.SET_TOKEN_BALANCES,
-                tokenBalances: [],
-            },
-        });
-        bridgeDispatch({
-            payload: {
-                type: BridgeActions.SET_ALLOWED_TOKENS,
-                allowedTokens: [],
-            },
-        });
-        bridgeDispatch({
-            payload: {
-                type: BridgeActions.SET_WALLETS_AND_NETWORKS,
-                from: {
-                    web3Provider: fromWalletWeb3Provider,
-                    walletAddress: fromWalletAddress.toLowerCase(),
-                    network: fromNetwork,
-                },
-                to: {
-                    web3Provider: toWalletWeb3Provider,
-                    walletAddress: toWalletAddress.toLowerCase(),
-                    network: toNetwork,
-                },
-            },
-        });
-        track({
-            userJourney: UserJourney.BRIDGE,
-            screen: 'WalletAndNetwork',
-            control: 'Next',
-            controlType: 'Button',
-            extras: {
-                fromWalletAddress,
-                fromNetwork,
-                fromWallet: {
-                    address: fromWalletAddress,
-                    isPassportWallet: isPassportProvider(fromWalletWeb3Provider),
-                    isMetaMask: isMetaMaskProvider(fromWalletWeb3Provider),
-                },
-                toWalletAddress,
-                toNetwork,
-                toWallet: {
-                    address: toWalletAddress,
-                    isPassportWallet: isPassportProvider(toWalletWeb3Provider),
-                    isMetaMask: isMetaMaskProvider(toWalletWeb3Provider),
-                },
-            },
-        });
-        viewDispatch({
-            payload: {
-                type: ViewActions.UPDATE_VIEW,
-                view: { type: BridgeWidgetViews.BRIDGE_FORM },
-            },
-        });
-    }, [
-        fromWalletWeb3Provider,
-        fromNetwork,
-        fromWalletAddress,
-        toWalletWeb3Provider,
-        toNetwork,
-        toWalletAddress,
-    ]);
-    return (jsxs(Box, { testId: testId$1, sx: brigdeWalletWrapperStyles, children: [jsx(Heading, { testId: `${testId$1}-heading`, size: "small", weight: "regular", sx: bridgeHeadingStyles, children: t('views.WALLET_NETWORK_SELECTION.heading') }), jsx(Heading, { size: "xSmall", sx: { paddingBottom: 'base.spacing.x2' }, children: t('views.WALLET_NETWORK_SELECTION.fromFormInput.heading') }), jsx(WalletDrawer, { testId: `${testId$1}-from`, drawerText: {
-                    heading: t('views.WALLET_NETWORK_SELECTION.fromFormInput.walletSelectorHeading'),
-                    defaultText: t('views.WALLET_NETWORK_SELECTION.fromFormInput.selectDefaultText'),
-                }, showWalletSelectorTarget: !isFromWalletAndNetworkSelected, walletOptions: fromWalletSelectorOptions, showDrawer: fromWalletDrawerOpen, setShowDrawer: setFromWalletDrawerOpen, onWalletItemClick: handleFromWalletConnection }), isFromWalletAndNetworkSelected && fromWalletProviderName && (jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 'base.spacing.x10' }, children: [jsx(WalletNetworkButton, { testId: testId$1, walletName: fromWalletProviderName, walletAddress: abbreviateAddress(fromWalletAddress), chainId: fromNetwork, onWalletClick: () => {
-                            setFromWalletDrawerOpen(true);
-                        }, onNetworkClick: () => setFromNetworkDrawerOpen(true) }), jsxs(Box, { children: [jsx(Heading, { size: "xSmall", sx: { paddingBottom: 'base.spacing.x2' }, children: t('views.WALLET_NETWORK_SELECTION.toFormInput.heading') }), jsx(WalletDrawer, { testId: `${testId$1}-to`, drawerText: {
-                                    heading: t('views.WALLET_NETWORK_SELECTION.toFormInput.walletSelectorHeading'),
-                                    defaultText: t('views.WALLET_NETWORK_SELECTION.toFormInput.selectDefaultText'),
-                                }, showWalletSelectorTarget: !isToWalletAndNetworkSelected, walletOptions: toWalletSelectorOptions, showDrawer: toWalletDrawerOpen, setShowDrawer: setToWalletDrawerOpen, onWalletItemClick: handleToWalletSelection })] })] })), jsx(Drawer, { headerBarTitle: t('views.WALLET_NETWORK_SELECTION.fromFormInput.networkSelectorHeading'), size: "full", onCloseDrawer: () => {
-                    setFromNetworkDrawerOpen(false);
-                }, visible: fromNetworkDrawerOpen, children: jsxs(Drawer.Content, { children: [jsx(NetworkItem, { testId: testId$1, chainName: imtblZkEvmNetworkName, onNetworkClick: handleFromNetworkSelection, chainId: imtblZkEvmNetworkChainId }, imtblZkEvmNetworkName), fromWalletProviderName === WalletProviderName.METAMASK && (jsx(NetworkItem, { testId: testId$1, chainName: l1NetworkName, onNetworkClick: handleFromNetworkSelection, chainId: l1NetworkChainId }, l1NetworkName))] }) }), isToWalletAndNetworkSelected && toWalletProviderName && (jsxs(Box, { sx: {
-                    flex: 1,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'space-between',
-                }, children: [jsx(WalletNetworkButton, { testId: testId$1, walletName: toWalletProviderName, walletAddress: abbreviateAddress(toWalletAddress), chainId: toNetwork, disableNetworkButton: true, onWalletClick: () => {
-                            setToWalletDrawerOpen(true);
-                        }, 
-                        // eslint-disable-next-line no-console
-                        onNetworkClick: () => { } }), 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() {
-    const { t } = useTranslation();
-    const { viewDispatch } = useContext(ViewContext);
-    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
-    const { page } = useAnalytics();
-    useEffect(() => {
-        page({
-            userJourney: UserJourney.BRIDGE,
-            screen: 'WalletNetworkSelection',
-        });
-    }, []);
-    return (jsx(SimpleLayout, { testId: "bridge-view", header: (jsx(HeaderNavigation, { title: t('views.WALLET_NETWORK_SELECTION.layoutHeading'), onCloseButtonClick: () => sendBridgeWidgetCloseEvent(eventTarget), rightActions: (jsx(ButtCon, { icon: "Minting", sx: ButtonNavigationStyles(), onClick: () => {
-                    viewDispatch({
-                        payload: {
-                            type: ViewActions.UPDATE_VIEW,
-                            view: { type: BridgeWidgetViews.TRANSACTIONS },
-                        },
-                    });
-                }, testId: "move-transactions-button" })) })), footer: jsx(FooterLogo, {}), children: jsx(WalletAndNetworkSelector, {}) }));
-}
-
-function validateToken(fromToken) {
-    const { validation } = text.views[BridgeWidgetViews.BRIDGE_FORM];
-    if (!fromToken)
-        return validation.noTokenSelected;
-    return '';
-}
-function validateAmount(amount, balance) {
-    const { validation } = text.views[BridgeWidgetViews.BRIDGE_FORM];
-    if (!amount || parseFloat(amount) === 0)
-        return validation.noAmountInputted;
-    if (balance && Number(amount) > Number(balance))
-        return validation.insufficientBalance;
-    return '';
-}
-
-const bridgeFormWrapperStyles = {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    paddingTop: 'base.spacing.x10',
-};
-const formInputsContainerStyles = {
-    paddingTop: 'base.spacing.x4',
-    display: 'flex',
-    gap: 'base.spacing.x1',
-};
-const bridgeFormButtonContainerStyles = {
-    display: 'flex',
-    flexDirection: 'column',
-    paddingY: 'base.spacing.x6',
-    paddingX: 'base.spacing.x4',
-};
-const gasAmountAccordionStyles = {
-    backgroundColor: 'base.color.translucent.emphasis.100',
-};
-const gasAmountHeadingStyles$1 = {
-    marginBottom: 'base.spacing.x4',
-    color: 'base.color.text.secondary',
-};
-const bridgeButtonIconLoadingStyle$1 = {
-    width: 'base.icon.size.400',
-};
-
-const containerStyles$1 = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    paddingTop: 'base.spacing.x6',
-    paddingBottom: 'base.spacing.x1',
-    height: '100%',
-};
-const contentTextStyles$1 = {
-    color: 'base.color.text.secondary',
-    fontFamily: 'base.font.family.heading.secondary',
-    textAlign: 'center',
-    marginTop: '15px',
-};
-const actionButtonContainerStyles$1 = {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    gap: 'base.spacing.x2',
-    height: '100%',
-    width: '100%',
-};
-const actionButtonStyles$1 = {
-    width: '100%',
-    height: 'base.spacing.x16',
-};
-const logoContainerStyles = {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingTop: 'base.spacing.x6',
-};
-
-function NotEnoughGas({ environment, onCloseDrawer, visible, showHeaderBar, walletAddress, showAdjustAmount, tokenSymbol, onAddCoinsClick, }) {
-    const { content, buttons } = text.drawers.notEnoughGas;
-    const [isCopied, setIsCopied] = useState(false);
-    const ethLogo = getEthTokenImage(environment);
-    const imxLogo = getImxTokenImage(environment);
-    const heading = tokenSymbol === ETH_TOKEN_SYMBOL ? `${content.eth.heading}` : `${content.imx.heading}`;
-    const body = tokenSymbol === ETH_TOKEN_SYMBOL ? `${content.eth.body}` : `${content.imx.body}`;
-    const handleCopy = useCallback(() => {
-        if (walletAddress && walletAddress !== '') {
-            navigator.clipboard.writeText(walletAddress);
-        }
-        setIsCopied(true);
-        setTimeout(() => {
-            setIsCopied(false);
-        }, 3000);
-    }, [walletAddress]);
-    return (jsx(Drawer, { headerBarTitle: undefined, size: "full", onCloseDrawer: onCloseDrawer, visible: visible, showHeaderBar: showHeaderBar, children: jsx(Drawer.Content, { children: jsxs(Box, { testId: "not-enough-gas-bottom-sheet", sx: containerStyles$1, children: [jsx(CloudImage, { imageUrl: tokenSymbol === ETH_TOKEN_SYMBOL
-                            ? ethLogo
-                            : imxLogo, sx: { w: 'base.icon.size.600', h: 'base.icon.size.600' } }), jsx(Heading, { size: "small", sx: contentTextStyles$1, testId: "not-enough-gas-heading", children: heading }), jsx(Body, { sx: contentTextStyles$1, children: body }), jsxs(Box, { sx: actionButtonContainerStyles$1, children: [showAdjustAmount && (jsx(Button, { testId: "not-enough-gas-adjust-amount-button", sx: actionButtonStyles$1, variant: "tertiary", onClick: onCloseDrawer, children: buttons.adjustAmount })), tokenSymbol === ETH_TOKEN_SYMBOL
-                                ? (jsxs(Button, { testId: "not-enough-gas-copy-address-button", sx: actionButtonStyles$1, variant: "tertiary", onClick: handleCopy, children: [buttons.copyAddress, jsx(Button.Icon, { icon: isCopied ? 'Tick' : 'CopyText' })] }))
-                                : (jsx(Button, { testId: "not-enough-gas-add-imx-button", sx: actionButtonStyles$1, variant: "tertiary", onClick: onAddCoinsClick, children: buttons.addMoreImx })), jsx(Button, { sx: actionButtonStyles$1, variant: "tertiary", onClick: onCloseDrawer, testId: "not-enough-gas-cancel-button", children: buttons.cancel })] }), jsx(Box, { sx: logoContainerStyles, children: jsx(Logo, { testId: "footer-logo-image", logo: "ImmutableHorizontalLockup", sx: { width: 'base.spacing.x25' } }) })] }) }) }));
-}
-
-function TokenSelectShimmer({ sx }) {
-    return (jsxs(Box, { sx: {
-            ...sx,
-            paddingTop: '0',
-            marginTop: 'base.spacing.x4',
-        }, rc: jsx("div", {}), children: [jsx(Box, { sx: {
-                    display: 'flex',
-                    backgroundColor: '#F3F3F30A',
-                    borderRadius: '8px',
-                }, children: jsx(Box, { sx: {
-                        minw: '170px',
-                        height: '64px',
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        WebkitMaskPosition: 'left center',
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        WebkitMaskRepeat: 'no-repeat',
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        WebkitMaskSize: 'contain',
-                        // eslint-disable-next-line @typescript-eslint/naming-convention,max-len
-                        WebkitMaskImage: 'url(\'data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M154.75 39q1.65 0 2.85-1.15 1.15-1.15 1.15-2.85v-4q0-1.65-1.15-2.8-1.2-1.2-2.85-1.2h-93.6q-2.3 0-3.85 1.2-1.55 1.15-1.55 2.8v4q0 1.7 1.55 2.85Q58.85 39 61.15 39h93.6m-111.7-3.35q.2-1.3.2-2.65 0-1.35-.2-2.65-.75-4.9-4.5-8.65-4.7-4.7-11.3-4.7-6.65 0-11.3 4.7-4.7 4.7-4.7 11.3 0 6.65 4.7 11.3Q20.6 49 27.25 49q6.6 0 11.3-4.7 3.75-3.7 4.5-8.65Z" id="a"/></svg>\')',
-                    }, rc: jsx("span", {}), children: jsx(ShimmerBox, { rc: jsx("span", {}) }) }) }), jsx(Box, { sx: {
-                    display: 'flex',
-                    width: '100%',
-                    backgroundColor: '#F3F3F30A',
-                    borderRadius: '8px',
-                }, children: jsx(Box, { sx: {
-                        width: '100%',
-                        height: '64px',
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        WebkitMaskPosition: 'right center',
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        WebkitMaskRepeat: 'no-repeat',
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        WebkitMaskSize: 'contain',
-                        // eslint-disable-next-line @typescript-eslint/naming-convention,max-len
-                        WebkitMaskImage: 'url(\'data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="196" height="96"><path d="M182.85 55.2Q181.65 54 180 54h-56q-1.7 0-2.85 1.2Q120 56.35 120 58v4q0 1.7 1.15 2.85Q122.3 66 124 66h56q1.65 0 2.85-1.15Q184 63.7 184 62v-4q0-1.65-1.15-2.8m0-22Q181.65 32 180 32H68q-1.7 0-2.85 1.2Q64 34.35 64 36v8q0 1.7 1.15 2.85Q66.3 48 68 48h112q1.65 0 2.85-1.15Q184 45.7 184 44v-8q0-1.65-1.15-2.8Z" id="a"/></svg>\')',
-                    }, rc: jsx("span", {}), children: jsx(ShimmerBox, { rc: jsx("span", {}) }) }) })] }));
-}
-
-function BridgeForm(props) {
-    const { t } = useTranslation();
-    const { bridgeDispatch, bridgeState: { tokenBridge, tokenBalances, allowedTokens, checkout, from, to, amount, token, }, } = useContext(BridgeContext);
-    const { cryptoFiatState, cryptoFiatDispatch } = useContext(CryptoFiatContext);
-    const { viewDispatch } = useContext(ViewContext);
-    const { testId, defaultAmount, defaultTokenAddress, isTokenBalancesLoading, } = props;
-    const { track } = useAnalytics();
-    // Form state
-    const [formAmount, setFormAmount] = useState(defaultAmount || '');
-    const [amountError, setAmountError] = useState('');
-    const [formToken, setFormToken] = useState();
-    const [tokenError, setTokenError] = useState('');
-    const [amountFiatValue, setAmountFiatValue] = useState('');
-    const [editing, setEditing] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const hasSetDefaultState = useRef(false);
-    const tokenBalanceSubtext = formToken
-        ? `${t('views.BRIDGE_FORM.content.availableBalancePrefix')} ${tokenValueFormat(formToken?.formattedBalance)}`
-        : '';
-    // Fee estimates & transactions
-    const [isFetching, setIsFetching] = useState(false);
-    const [estimates, setEstimates] = useState(undefined);
-    const [gasFee, setGasFee] = useState('');
-    const [gasFeeFiatValue, setGasFeeFiatValue] = useState('');
-    const [tokensOptions, setTokensOptions] = useState([]);
-    const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);
-    // Not enough ETH to cover gas
-    const [showNotEnoughGasDrawer, setShowNotEnoughGasDrawer] = useState(false);
-    const [walletAddress, setWalletAddress] = useState('');
-    // user rejects transaction
-    const [showTxnRejectedState, setShowTxnRejectedState] = useState(false);
-    const formatTokenOptionsId = useCallback((symbol, address) => {
-        if (!address)
-            return symbol.toLowerCase();
-        return `${symbol.toLowerCase()}-${address.toLowerCase()}`;
-    }, []);
-    const gasFiatAmount = `${t('views.BRIDGE_FORM.fees.fiatPricePrefix')} ${gasFeeFiatValue}`;
-    useEffect(() => {
-        if (tokenBalances.length === 0)
-            return;
-        // WT-1350 removing ETH as possible bridge option from being selected
-        // balance > 0 AND token is not ETH
-        const options = tokenBalances
-            .filter((tokenBalance) => tokenBalance.balance.gt(0))
-            .map((tokenBalance) => ({
-            id: formatTokenOptionsId(tokenBalance.token.symbol, tokenBalance.token.address),
-            name: tokenBalance.token.name,
-            symbol: tokenBalance.token.symbol,
-            icon: tokenBalance.token.icon,
-            balance: {
-                formattedFiatAmount: cryptoFiatState.conversions.size === 0 ? formatZeroAmount('')
-                    : calculateCryptoToFiat(tokenBalance.formattedBalance, tokenBalance.token.symbol, cryptoFiatState.conversions),
-                formattedAmount: tokenValueFormat(tokenBalance.formattedBalance),
-            },
-        }));
-        setTokensOptions(options);
-        if (!hasSetDefaultState.current) {
-            hasSetDefaultState.current = true;
-            if (defaultTokenAddress) {
-                setFormToken(tokenBalances.find((b) => (isNativeToken(b.token.address) && defaultTokenAddress?.toLocaleUpperCase() === NATIVE)
-                    || (b.token.address?.toLowerCase() === defaultTokenAddress?.toLowerCase())));
-            }
-        }
-    }, [
-        tokenBalances,
-        cryptoFiatState.conversions,
-        defaultTokenAddress,
-        hasSetDefaultState.current,
-        formatTokenOptionsId,
-        formatZeroAmount,
-    ]);
-    useEffect(() => {
-        // This useEffect is for populating the form
-        // with values from context when the user
-        // has selected the back button from the review screen
-        if (!amount || !token)
-            return;
-        setFormAmount(amount);
-        for (let i = 0; i < tokenBalances.length; i++) {
-            const balance = tokenBalances[i];
-            if (balance.token.address === token.address) {
-                setFormToken(balance);
-                break;
-            }
-        }
-        bridgeDispatch({
-            payload: {
-                type: BridgeActions.SET_TOKEN_AND_AMOUNT,
-                token: null,
-                amount: '',
-            },
-        });
-    }, [amount, token, tokenBalances]);
-    const selectedOption = useMemo(() => (formToken && formToken.token
-        ? formatTokenOptionsId(formToken.token.symbol, formToken.token.address)
-        : undefined), [formToken, tokenBalances, cryptoFiatState.conversions, formatTokenOptionsId]);
-    const canFetchEstimates = () => {
-        if (Number.isNaN(parseFloat(formAmount)))
-            return false;
-        if (parseFloat(formAmount) <= 0)
-            return false;
-        if (!formToken)
-            return false;
-        if (isFetching)
-            return false;
-        if (!from || !from.walletAddress)
-            return false;
-        if (!to || !to.walletAddress)
-            return false;
-        return true;
-    };
-    const fetchEstimates = async (silently = false) => {
-        if (!canFetchEstimates())
-            return;
-        // setIsFetching within this if statement
-        // to allow the user to edit the form
-        // even if a new quote is fetching silently
-        if (!silently) {
-            setLoading(true);
-            setIsFetching(true);
-        }
-        // Prevent silently fetching and set a new fee estimate
-        // if the user has updated and the widget is already
-        // fetching or the user is updating the inputs.
-        if ((silently && (loading || editing)) || !checkout)
-            return;
-        const tokenIsNative = isNativeToken(formToken?.token.address);
-        const amountToBridge = tokenIsNative
-            ? utils.parseUnits(formAmount)
-            : utils.parseUnits(formAmount, formToken?.token.decimals);
-        const tokenAddress = tokenIsNative ? NATIVE.toUpperCase() : formToken?.token.address;
-        const [unsignedApproveTransaction, unsignedTransaction] = await Promise.all([
-            tokenBridge.getUnsignedApproveBridgeTx({
-                senderAddress: from.walletAddress,
-                token: tokenAddress ?? NATIVE.toUpperCase(),
-                amount: amountToBridge,
-                sourceChainId: from.network.toString(),
-                destinationChainId: to.network.toString(),
-            }),
-            tokenBridge.getUnsignedBridgeTx({
-                senderAddress: from.walletAddress,
-                recipientAddress: to.walletAddress,
-                token: tokenAddress ?? NATIVE.toUpperCase(),
-                amount: amountToBridge,
-                sourceChainId: from.network.toString(),
-                destinationChainId: to.network.toString(),
-                gasMultiplier: 1.1,
-            }),
-        ]);
-        const transactionFeeData = unsignedTransaction.feeData;
-        const { totalFees, approvalFee } = transactionFeeData;
-        let rawTotalFees = totalFees;
-        if (!unsignedApproveTransaction.unsignedTx) {
-            rawTotalFees = totalFees.sub(approvalFee);
-        }
-        const gasEstimateResult = {
-            gasEstimateType: GasEstimateType.BRIDGE_TO_L2,
-            fees: { totalFees: rawTotalFees },
-            token: checkout.config.networkMap.get(from.network)?.nativeCurrency,
-        };
-        setEstimates(gasEstimateResult);
-        const estimatedAmount = utils.formatUnits(gasEstimateResult?.fees?.totalFees || 0, DEFAULT_TOKEN_DECIMALS);
-        setGasFee(estimatedAmount);
-        setGasFeeFiatValue(calculateCryptoToFiat(estimatedAmount, gasEstimateResult?.token?.symbol || '', cryptoFiatState.conversions));
-        if (!silently) {
-            setLoading(false);
-            setIsFetching(false);
-        }
-    };
-    const insufficientFundsForGas = useMemo(() => {
-        const nativeTokenBalance = tokenBalances
-            .find((balance) => isNativeToken(balance.token.address));
-        if (!nativeTokenBalance) {
-            return true;
-        }
-        const tokenIsNative = isNativeToken(formToken?.token.address);
-        const gasAmount = utils.parseUnits(gasFee.length !== 0 ? gasFee : '0');
-        const additionalAmount = tokenIsNative && !Number.isNaN(parseFloat(formAmount))
-            ? utils.parseUnits(formAmount)
-            : BigNumber.from('0');
-        return gasAmount.add(additionalAmount).gt(nativeTokenBalance.balance);
-    }, [gasFee, tokenBalances, formToken, formAmount]);
-    // Silently refresh the quote
-    useInterval(() => fetchEstimates(true), DEFAULT_QUOTE_REFRESH_INTERVAL);
-    useEffect(() => {
-        if (editing)
-            return;
-        (async () => await fetchEstimates())();
-    }, [formAmount, formToken, editing]);
-    const onTextInputFocus = () => {
-        setEditing(true);
-    };
-    const handleBridgeAmountChange = (value) => {
-        setFormAmount(value);
-        if (amountError) {
-            const validateAmountError = validateAmount(value, formToken?.formattedBalance);
-            setAmountError(validateAmountError);
-        }
-        if (!formToken)
-            return;
-        setAmountFiatValue(calculateCryptoToFiat(value, formToken.token.symbol, cryptoFiatState.conversions));
-    };
-    const handleAmountInputBlur = (value) => {
-        setEditing(false);
-        setFormAmount(value);
-        if (amountError) {
-            const validateAmountError = validateAmount(value, formToken?.formattedBalance);
-            setAmountError(validateAmountError);
-        }
-        if (!formToken)
-            return;
-        setAmountFiatValue(calculateCryptoToFiat(value, formToken.token.symbol, cryptoFiatState.conversions));
-    };
-    const handleSelectTokenChange = (value) => {
-        const selected = tokenBalances.find((tokenBalance) => (value === formatTokenOptionsId(tokenBalance.token.symbol, tokenBalance.token.address)));
-        if (!selected)
-            return;
-        setFormToken(selected);
-        setTokenError('');
-    };
-    useEffect(() => {
-        cryptoFiatDispatch({
-            payload: {
-                type: CryptoFiatActions.SET_TOKEN_SYMBOLS,
-                tokenSymbols: allowedTokens.map((allowedToken) => allowedToken.symbol),
-            },
-        });
-    }, [cryptoFiatDispatch, allowedTokens]);
-    useEffect(() => {
-        if (!formAmount)
-            return;
-        if (!formToken)
-            return;
-        setAmountFiatValue(calculateCryptoToFiat(formAmount, formToken.token.symbol, cryptoFiatState.conversions));
-    }, [formAmount, formToken]);
-    useEffect(() => {
-        (async () => {
-            if (!from?.web3Provider)
-                return;
-            const address = await from.web3Provider.getSigner().getAddress();
-            setWalletAddress((previous) => {
-                if (previous !== '' && previous !== address) {
-                    setFormToken(undefined);
-                }
-                return address;
-            });
-        })();
-    }, [from?.web3Provider, tokenBalances]);
-    const bridgeFormValidator = useCallback(() => {
-        const validateTokenError = validateToken(formToken);
-        const validateAmountError = validateAmount(formAmount, formToken?.formattedBalance);
-        if (validateTokenError)
-            setTokenError(validateTokenError);
-        if (validateAmountError)
-            setAmountError(validateAmountError);
-        if (validateTokenError || validateAmountError)
-            return false;
-        return true;
-    }, [formToken, formAmount, setTokenError, setAmountError]);
-    const submitBridge = useCallback(async () => {
-        if (!bridgeFormValidator())
-            return;
-        if (!checkout || !from?.web3Provider || !formToken)
-            return;
-        if (insufficientFundsForGas) {
-            setShowNotEnoughGasDrawer(true);
-            return;
-        }
-        track({
-            userJourney: UserJourney.BRIDGE,
-            screen: 'TokenAmount',
-            control: 'Review',
-            controlType: 'Button',
-            extras: {
-                tokenAddress: formToken.token.address,
-                amount: formAmount,
-            },
-        });
-        bridgeDispatch({
-            payload: {
-                type: BridgeActions.SET_TOKEN_AND_AMOUNT,
-                token: formToken.token,
-                amount: formAmount,
-            },
-        });
-        viewDispatch({
-            payload: {
-                type: ViewActions.UPDATE_VIEW,
-                view: {
-                    type: BridgeWidgetViews.BRIDGE_REVIEW,
-                },
-            },
-        });
-    }, [
-        checkout,
-        from?.web3Provider,
-        bridgeFormValidator,
-        insufficientFundsForGas,
-        formToken,
-    ]);
-    const retrySubmitBridge = async () => {
-        setShowTxnRejectedState(false);
-        await submitBridge();
-    };
-    return (jsxs(Box, { testId: testId, sx: bridgeFormWrapperStyles, children: [jsxs(Box, { sx: { paddingX: 'base.spacing.x4' }, children: [jsx(Heading, { testId: `${testId}-content-heading`, size: "small", weight: "regular", sx: { paddingBottom: 'base.spacing.x4' }, children: t('views.BRIDGE_FORM.content.title') }), (!defaultTokenAddress || !isTokenBalancesLoading) && (jsxs(Box, { sx: formInputsContainerStyles, children: [jsx(SelectForm, { testId: "bridge-token", options: tokensOptions, optionsLoading: isTokenBalancesLoading, coinSelectorHeading: t('views.BRIDGE_FORM.bridgeForm.from.selectorTitle'), selectedOption: selectedOption, subtext: tokenBalanceSubtext, textAlign: "left", errorMessage: tokenError, onSelectChange: (option) => handleSelectTokenChange(option), disabled: isFetching }), jsx(TextInputForm, { testId: "bridge-amount", value: formAmount, placeholder: t('views.BRIDGE_FORM.bridgeForm.from.inputPlaceholder'), subtext: `${t('views.BRIDGE_FORM.content.fiatPricePrefix')} $${formatZeroAmount(amountFiatValue, true)}`, validator: amountInputValidation, onTextInputFocus: onTextInputFocus, onTextInputChange: (value) => handleBridgeAmountChange(value), onTextInputBlur: (value) => handleAmountInputBlur(value), textAlign: "right", errorMessage: amountError, disabled: isFetching })] })), defaultTokenAddress && isTokenBalancesLoading && (jsx(TokenSelectShimmer, { sx: formInputsContainerStyles })), gasFee && (jsx(Box, { sx: { paddingY: 'base.spacing.x2' }, children: jsxs(Accordion, { targetClickOveride: () => setShowFeeBreakdown(true), sx: gasAmountAccordionStyles, children: [jsx(Accordion.TargetLeftSlot, { children: jsx(Body, { size: "medium", sx: gasAmountHeadingStyles$1, children: t('views.BRIDGE_FORM.fees.title') }) }), jsx(Accordion.TargetRightSlot, { children: jsx(PriceDisplay, { testId: "bridge-gas-fee__priceDisplay", fiatAmount: `${t('views.BRIDGE_FORM.fees.fiatPricePrefix')} ${gasFeeFiatValue}`, price: `${estimates?.token?.symbol} ${tokenValueFormat(gasFee)}` }) })] }) }))] }), jsx(FeesBreakdown, { totalFiatAmount: gasFiatAmount, totalAmount: gasFee, tokenSymbol: estimates?.token?.symbol ?? '', fees: [
-                    {
-                        label: t('drawers.feesBreakdown.fees.gas.label'),
-                        fiatAmount: gasFiatAmount,
-                        amount: gasFee,
-                    },
-                ], visible: showFeeBreakdown, onCloseDrawer: () => setShowFeeBreakdown(false) }), jsxs(Box, { sx: bridgeFormButtonContainerStyles, children: [jsx(Button, { testId: `${testId}-button`, variant: "primary", onClick: submitBridge, disabled: loading, size: "large", children: loading ? (jsx(Button.Icon, { icon: "Loading", sx: bridgeButtonIconLoadingStyle$1 })) : t('views.BRIDGE_FORM.bridgeForm.buttonText') }), jsx(TransactionRejected, { visible: showTxnRejectedState, showHeaderBar: false, onCloseDrawer: () => setShowTxnRejectedState(false), onRetry: retrySubmitBridge }), jsx(NotEnoughGas, { environment: checkout.config.environment, visible: showNotEnoughGasDrawer, showHeaderBar: false, onCloseDrawer: () => setShowNotEnoughGasDrawer(false), walletAddress: walletAddress, showAdjustAmount: isNativeToken(formToken?.token.address), tokenSymbol: from?.network === getL1ChainId(checkout?.config)
-                            ? ETH_TOKEN_SYMBOL
-                            : IMX_TOKEN_SYMBOL, onAddCoinsClick: () => {
-                            viewDispatch({
-                                payload: {
-                                    type: ViewActions.UPDATE_VIEW,
-                                    view: {
-                                        type: SharedViews.TOP_UP_VIEW,
-                                    },
-                                },
-                            });
-                        } })] })] }));
-}
-
-const REFRESH_TOKENS_INTERVAL_MS = 10000;
-function Bridge({ amount, tokenAddress }) {
-    const { t } = useTranslation();
-    const { bridgeState, bridgeDispatch } = useContext(BridgeContext);
-    const { checkout, from } = bridgeState;
-    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
-    const [isTokenBalancesLoading, setIsTokenBalancesLoading] = useState(false);
-    const showBackButton = true;
-    const { page } = useAnalytics();
-    useEffect(() => {
-        if (amount || tokenAddress) {
-            page({
-                userJourney: UserJourney.BRIDGE,
-                screen: 'TokenAmount',
-                extras: {
-                    amount,
-                    tokenAddress,
-                },
-            });
-        }
-    }, []);
-    // This is used to refresh the balances after the Bridge widget
-    // has been loaded so that processing transfers will be eventually
-    // reflected.
-    const refreshBalances = useCallback(async () => {
-        if (!checkout || !from?.web3Provider)
-            return;
-        try {
-            const tokensAndBalances = await getAllowedBalances({
-                checkout,
-                provider: from.web3Provider,
-                allowTokenListType: TokenFilterTypes.BRIDGE,
-                // Skip retry given that in this case it is not needed;
-                // refreshBalances will be, automatically, called again
-                // after REFRESH_TOKENS_INTERVAL_MS.
-                retryPolicy: { retryIntervalMs: 0, retries: 0 },
-            });
-            // Why? Check getAllowedBalances
-            if (tokensAndBalances === undefined)
-                return;
-            bridgeDispatch({
-                payload: {
-                    type: BridgeActions.SET_TOKEN_BALANCES,
-                    tokenBalances: tokensAndBalances.allowedBalances,
-                },
-            });
-            bridgeDispatch({
-                payload: {
-                    type: BridgeActions.SET_ALLOWED_TOKENS,
-                    allowedTokens: tokensAndBalances.allowList.tokens,
-                },
-            });
-            // Ignore errors given that this is a background refresh
-            // and the logic will retry anyways.
-        }
-        catch (e) {
-            // eslint-disable-next-line no-console
-            console.debug(e);
-        }
-    }, [checkout, from?.web3Provider]);
-    useInterval(refreshBalances, REFRESH_TOKENS_INTERVAL_MS);
-    useEffect(() => {
-        if (!checkout || !from?.web3Provider)
-            return;
-        setIsTokenBalancesLoading(true);
-        refreshBalances().finally(() => setIsTokenBalancesLoading(false));
-    }, [checkout, from?.web3Provider]);
-    return (jsx(SimpleLayout, { testId: "bridge-view", header: (jsx(HeaderNavigation, { showBack: showBackButton, title: t('views.BRIDGE_FORM.header.title'), onCloseButtonClick: () => sendBridgeWidgetCloseEvent(eventTarget) })), footer: jsx(FooterLogo, {}), children: jsx(BridgeForm, { testId: "bridge-form", defaultAmount: amount, defaultTokenAddress: tokenAddress, isTokenBalancesLoading: isTokenBalancesLoading }) }));
-}
-
-const topMenuItemStyles = {
-    borderBottomLeftRadius: '0px',
-    borderBottomRightRadius: '0px',
-    marginBottom: '2px',
-};
-const bottomMenuItemStyles = {
-    borderTopLeftRadius: '0px',
-    borderTopRightRadius: '0px',
-    backgroundColor: 'base.color.translucent.emphasis.100',
-};
-const bridgeReviewWrapperStyles = {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    paddingX: 'base.spacing.x4',
-};
-const bridgeReviewHeadingStyles = {
-    paddingTop: 'base.spacing.x10',
-    paddingBottom: 'base.spacing.x4',
-};
-const arrowIconWrapperStyles = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    paddingY: 'base.spacing.x1',
-};
-const arrowIconStyles = {
-    width: 'base.icon.size.300',
-    transform: 'rotate(270deg)',
-};
-const gasAmountHeadingStyles = {
-    marginBottom: 'base.spacing.x4',
-    color: 'base.color.text.secondary',
-};
-const bridgeButtonIconLoadingStyle = {
-    width: 'base.icon.size.400',
-};
-
-const networkIcon = {
-    [ChainId.IMTBL_ZKEVM_DEVNET]: 'Immutable',
-    [ChainId.IMTBL_ZKEVM_MAINNET]: 'Immutable',
-    [ChainId.IMTBL_ZKEVM_TESTNET]: 'Immutable',
-    [ChainId.ETHEREUM]: 'EthToken',
-    [ChainId.SEPOLIA]: 'EthToken',
-};
-const logo = {
-    [WalletProviderName.PASSPORT]: 'PassportSymbolOutlined',
-    [WalletProviderName.METAMASK]: 'MetaMaskSymbol',
-};
-const testId = 'bridge-review-summary';
-function BridgeReviewSummary() {
-    const { t } = useTranslation();
-    const { viewDispatch } = useContext(ViewContext);
-    const { bridgeState: { checkout, tokenBridge, from, to, token, amount, }, } = useContext(BridgeContext);
-    const { track } = useAnalytics();
-    const { cryptoFiatState } = useContext(CryptoFiatContext);
-    const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const [estimates, setEstimates] = useState(undefined);
-    const [gasFee, setGasFee] = useState('');
-    const [gasFeeFiatValue, setGasFeeFiatValue] = useState('');
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [approveTransaction, setApproveTransaction] = useState(undefined);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [transaction, setTransaction] = useState(undefined);
-    const walletProviderName = (provider) => (isPassportProvider(provider)
-        ? WalletProviderName.PASSPORT
-        : WalletProviderName.METAMASK);
-    const displayAmount = useMemo(() => (token?.symbol ? `${token?.symbol} ${amount}` : `${amount}`), [token, amount]);
-    const fromFiatAmount = useMemo(() => {
-        if (!amount || !token)
-            return '';
-        return calculateCryptoToFiat(amount, token.symbol, cryptoFiatState.conversions);
-    }, [token, amount]);
-    const fromAddress = useMemo(() => {
-        if (!from)
-            return '-';
-        return from.walletAddress;
-    }, [from]);
-    const fromWalletProviderName = useMemo(() => walletProviderName(from?.web3Provider), [from]);
-    const fromNetwork = useMemo(() => from && from.network, [from]);
-    const toAddress = useMemo(() => {
-        if (!to)
-            return '-';
-        return to.walletAddress;
-    }, [to]);
-    const toWalletProviderName = useMemo(() => walletProviderName(to?.web3Provider), [to]);
-    const toNetwork = useMemo(() => to?.network, [to]);
-    const fetchGasEstimate = useCallback(async () => {
-        if (!tokenBridge || !amount || !from || !to || !token)
-            return;
-        const [unsignedApproveTransaction, unsignedTransaction] = await Promise.all([
-            tokenBridge.getUnsignedApproveBridgeTx({
-                senderAddress: fromAddress,
-                token: token.address ?? NATIVE.toUpperCase(),
-                amount: utils.parseUnits(amount, token.decimals),
-                sourceChainId: from?.network.toString(),
-                destinationChainId: to?.network.toString(),
-            }),
-            tokenBridge.getUnsignedBridgeTx({
-                senderAddress: fromAddress,
-                recipientAddress: toAddress,
-                token: token.address ?? NATIVE.toUpperCase(),
-                amount: utils.parseUnits(amount, token.decimals),
-                sourceChainId: from?.network.toString(),
-                destinationChainId: to?.network.toString(),
-                gasMultiplier: 1.1,
-            }),
-        ]);
-        setApproveTransaction(unsignedApproveTransaction);
-        setTransaction(unsignedTransaction);
-        // todo: add approval gas fees
-        const transactionFeeData = unsignedTransaction.feeData;
-        const { totalFees, approvalFee } = transactionFeeData;
-        let rawTotalFees = totalFees;
-        if (!unsignedApproveTransaction.unsignedTx) {
-            rawTotalFees = totalFees.sub(approvalFee);
-        }
-        const gasEstimateResult = {
-            gasEstimateType: GasEstimateType.BRIDGE_TO_L2,
-            fees: { totalFees: rawTotalFees },
-            token: checkout.config.networkMap.get(from.network)?.nativeCurrency,
-        };
-        setEstimates(gasEstimateResult);
-        const estimatedAmount = utils.formatUnits(gasEstimateResult?.fees.totalFees || 0, DEFAULT_TOKEN_DECIMALS);
-        setGasFee(estimatedAmount);
-        setGasFeeFiatValue(calculateCryptoToFiat(estimatedAmount, gasEstimateResult?.token?.symbol || '', cryptoFiatState.conversions));
-    }, [checkout, tokenBridge]);
-    useInterval(() => fetchGasEstimate(), DEFAULT_QUOTE_REFRESH_INTERVAL);
-    useEffect(() => {
-        (async () => {
-            setLoading(true);
-            await fetchGasEstimate();
-            setLoading(false);
-        })();
-    }, []);
-    const submitBridge = useCallback(async () => {
-        if (!approveTransaction || !transaction)
-            return;
-        track({
-            userJourney: UserJourney.BRIDGE,
-            screen: 'Summary',
-            control: 'Submit',
-            controlType: 'Button',
-            extras: {
-                fromWalletAddress: fromAddress,
-                fromNetwork,
-                fromWallet: {
-                    address: fromAddress,
-                    isPassportWallet: isPassportProvider(from?.web3Provider),
-                    isMetaMask: isMetaMaskProvider(from?.web3Provider),
-                },
-                toWalletAddress: toAddress,
-                toNetwork,
-                toWallet: {
-                    address: toAddress,
-                    isPassportWallet: isPassportProvider(to?.web3Provider),
-                    isMetaMask: isMetaMaskProvider(to?.web3Provider),
-                },
-                amount,
-                fiatAmount: fromFiatAmount,
-                tokenAddress: token?.address,
-            },
-        });
-        viewDispatch({
-            payload: {
-                type: ViewActions.UPDATE_VIEW,
-                view: {
-                    type: BridgeWidgetViews.APPROVE_TRANSACTION,
-                    approveTransaction,
-                    transaction,
-                },
-            },
-        });
-    }, [viewDispatch, approveTransaction, transaction]);
-    return (jsxs(Box, { testId: testId, sx: bridgeReviewWrapperStyles, children: [jsx(Heading, { testId: `${testId}-heading`, size: "small", weight: "regular", sx: bridgeReviewHeadingStyles, children: t('views.BRIDGE_REVIEW.heading') }), jsxs(MenuItem, { testId: `${testId}-from-amount`, size: "small", emphasized: true, sx: topMenuItemStyles, children: [jsx(MenuItem.Label, { size: "small", sx: { marginBottom: 'base.spacing.x4', fontWeight: 'bold' }, children: t('views.BRIDGE_REVIEW.fromLabel.amountHeading') }), jsx(MenuItem.Caption, {}), jsx(MenuItem.PriceDisplay, { use: jsx(Heading, { size: "xSmall", weight: "light" }), price: displayAmount ?? '-', fiatAmount: `${t('views.BRIDGE_REVIEW.fiatPricePrefix')}${fromFiatAmount}` })] }), jsxs(MenuItem, { testId: `${testId}-from-address`, size: "xSmall", emphasized: true, sx: bottomMenuItemStyles, children: [fromWalletProviderName && (jsx(MenuItem.FramedLogo, { logo: logo[fromWalletProviderName], sx: { backgroundColor: 'base.color.translucent.standard.200' } })), jsxs(MenuItem.Label, { children: [jsx("strong", { children: t('views.BRIDGE_REVIEW.fromLabel.heading') }), ' ', jsx(Body, { size: "small", sx: {
-                                    color: 'base.color.text.secondary',
-                                }, children: abbreviateAddress(fromAddress ?? '') })] }), fromNetwork && (jsx(MenuItem.IntentIcon, { icon: networkIcon[fromNetwork], sx: networkIconStyles(fromNetwork) }))] }), jsx(Box, { sx: arrowIconWrapperStyles, children: jsx(Icon, { icon: "ArrowBackward", sx: arrowIconStyles }) }), jsxs(MenuItem, { testId: `${testId}-to-address`, size: "xSmall", emphasized: true, sx: topMenuItemStyles, children: [toWalletProviderName && (jsx(MenuItem.FramedLogo, { logo: logo[toWalletProviderName], sx: { backgroundColor: 'base.color.translucent.standard.200' } })), jsxs(MenuItem.Label, { children: [jsx("strong", { children: t('views.BRIDGE_REVIEW.toLabel.heading') }), ' ', jsx(Body, { size: "small", sx: {
-                                    color: 'base.color.text.secondary',
-                                }, children: abbreviateAddress(toAddress ?? '') })] }), toNetwork && (jsx(MenuItem.IntentIcon, { icon: networkIcon[toNetwork], sx: networkIconStyles(toNetwork) }))] }), gasFee && (jsxs(Accordion, { targetClickOveride: () => setShowFeeBreakdown(true), sx: bottomMenuItemStyles, children: [jsx(Accordion.TargetLeftSlot, { children: jsx(Body, { size: "medium", sx: gasAmountHeadingStyles, children: t('views.BRIDGE_REVIEW.fees.heading') }) }), jsx(Accordion.TargetRightSlot, { children: jsx(PriceDisplay, { testId: `${testId}-gas-amount__priceDisplay`, fiatAmount: `${t('views.BRIDGE_REVIEW.fiatPricePrefix')}${gasFeeFiatValue}`, price: `${estimates?.token?.symbol} ${tokenValueFormat(gasFee)}` ?? '-' }) })] })), jsx(Box, { sx: {
-                    flex: 1,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'flex-end',
-                    paddingY: 'base.spacing.x6',
-                    width: '100%',
-                }, children: jsx(Button, { size: "large", sx: { width: '100%' }, onClick: submitBridge, disabled: loading, testId: `${testId}__submit-button`, children: loading ? (jsx(Button.Icon, { icon: "Loading", sx: bridgeButtonIconLoadingStyle })) : t('views.BRIDGE_REVIEW.submitButton.buttonText') }) }), jsx(FeesBreakdown, { totalFiatAmount: `${t('views.BRIDGE_REVIEW.fiatPricePrefix')}${gasFeeFiatValue}`, totalAmount: gasFee, tokenSymbol: estimates?.token?.symbol || '', fees: [
-                    {
-                        label: t('drawers.feesBreakdown.fees.gas.label'),
-                        fiatAmount: `${t('views.BRIDGE_REVIEW.fiatPricePrefix')}${gasFeeFiatValue}`,
-                        amount: gasFee,
-                    },
-                ], visible: showFeeBreakdown, onCloseDrawer: () => setShowFeeBreakdown(false) })] }));
-}
-
-function BridgeReview() {
-    const { t } = useTranslation();
-    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
-    const { page } = useAnalytics();
-    useEffect(() => {
-        page({
-            userJourney: UserJourney.BRIDGE,
-            screen: 'Review',
-        });
-    }, []);
-    return (jsx(SimpleLayout, { testId: "bridge-review", header: (jsx(HeaderNavigation, { showBack: true, title: t('views.BRIDGE_REVIEW.layoutHeading'), onCloseButtonClick: () => sendBridgeWidgetCloseEvent(eventTarget) })), footer: (jsx(FooterLogo, {})), children: jsx(BridgeReviewSummary, {}) }));
-}
-
-function RocketHero({ environment, }) {
-    const { RiveComponent } = useRive({
-        src: `${CHECKOUT_CDN_BASE_URL[environment]}/v1/blob/img/rocket.riv`,
-        autoplay: true,
-        layout: new Layout({ fit: Fit.Cover }),
-        stateMachines: 'State Machine 1',
-    });
-    return (jsx(Box, { sx: { ...heroBackGroundStyles, background: 'base.color.translucent.emphasis.100' }, children: jsx(Box, { sx: heroImageStyles, rc: jsx(RiveComponent, {}) }) }));
-}
-
-function MoveInProgress({ transactionHash }) {
-    const { t } = useTranslation();
-    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
-    const { page } = useAnalytics();
-    const { cryptoFiatState } = useContext(CryptoFiatContext);
-    const { viewDispatch } = useContext(ViewContext);
-    const { bridgeState: { checkout, from, to, token, amount, }, } = useContext(BridgeContext);
-    useEffect(() => {
-        sendBridgeTransactionSentEvent(eventTarget, transactionHash);
-        const fiatAmount = calculateCryptoToFiat(amount, token?.symbol ?? '', cryptoFiatState.conversions);
-        page({
-            userJourney: UserJourney.BRIDGE,
-            screen: 'InProgress',
-            extras: {
-                fromWalletAddress: from?.walletAddress,
-                toWalletAddress: to?.walletAddress,
-                amount,
-                fiatAmount,
-                tokenAddress: token?.address,
-            },
-        });
-    }, []);
-    return (jsx(SimpleLayout, { testId: "move-in-progress-view", header: (jsx(HeaderNavigation, { transparent: true, onCloseButtonClick: () => sendBridgeWidgetCloseEvent(eventTarget), rightActions: (jsxs(Fragment, { children: [jsx(ButtCon, { icon: "Minting", sx: ButtonNavigationStyles(), onClick: () => {
-                            viewDispatch({
-                                payload: {
-                                    type: ViewActions.UPDATE_VIEW,
-                                    view: { type: BridgeWidgetViews.TRANSACTIONS },
-                                },
-                            });
-                        }, testId: "settings-button" }), jsx(Badge, { isAnimated: true, variant: "guidance", sx: {
-                            position: 'absolute',
-                            right: 'base.spacing.x14',
-                            top: 'base.spacing.x1',
-                        } })] })) })), footer: (jsx(FooterLogo, {})), heroContent: jsx(RocketHero, { environment: checkout.config.environment }), floatHeader: true, children: jsxs(SimpleTextBody, { heading: t('views.IN_PROGRESS.heading'), children: [t('views.IN_PROGRESS.body1'), jsx("br", {}), jsx("br", {}), t('views.IN_PROGRESS.body2')] }) }));
-}
-
-function ApproveTransaction({ approveTransaction, transaction }) {
-    const { t } = useTranslation();
-    const { bridgeState } = useContext(BridgeContext);
-    const { checkout, from, } = bridgeState;
-    const { viewDispatch } = useContext(ViewContext);
-    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
-    const { page } = useAnalytics();
-    useEffect(() => {
-        page({
-            userJourney: UserJourney.BRIDGE,
-            screen: 'ApproveTransaction',
-        });
-    }, []);
-    // Local state
-    const [actionDisabled, setActionDisabled] = useState(false);
-    const [txProcessing, setTxProcessing] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const [rejectedBridge, setRejectedBridge] = useState(false);
-    // Common error view function
-    const showErrorView = useCallback(() => {
-        viewDispatch({
-            payload: {
-                type: ViewActions.UPDATE_VIEW,
-                view: {
-                    type: SharedViews.ERROR_VIEW,
-                    error: new Error('No checkout object or no provider object found'),
-                },
-            },
-        });
-    }, [viewDispatch]);
-    const goBack = useCallback(() => {
-        viewDispatch({
-            payload: {
-                type: ViewActions.GO_BACK,
-            },
-        });
-    }, [viewDispatch]);
-    const handleExceptions = (err) => {
-        if (err.type === CheckoutErrorType.UNPREDICTABLE_GAS_LIMIT) {
-            viewDispatch({
-                payload: {
-                    type: ViewActions.UPDATE_VIEW,
-                    view: {
-                        type: BridgeWidgetViews.BRIDGE_FAILURE,
-                        reason: 'Unpredictable gas limit',
-                    },
-                },
-            });
-            return;
-        }
-        if (err.type === CheckoutErrorType.TRANSACTION_FAILED
-            || err.type === CheckoutErrorType.INSUFFICIENT_FUNDS
-            || (err.receipt && err.receipt.status === 0)) {
-            let reason = 'Transaction failed';
-            if (err.type === CheckoutErrorType.INSUFFICIENT_FUNDS)
-                reason = 'Insufficient funds';
-            if (err.receipt && err.receipt.status === 0)
-                reason = 'Transaction failed to settle on chain';
-            viewDispatch({
-                payload: {
-                    type: ViewActions.UPDATE_VIEW,
-                    view: {
-                        type: BridgeWidgetViews.BRIDGE_FAILURE,
-                        reason,
-                    },
-                },
-            });
-            return;
-        }
-        viewDispatch({
-            payload: {
-                type: ViewActions.UPDATE_VIEW,
-                view: {
-                    type: SharedViews.ERROR_VIEW,
-                    error: err,
-                },
-            },
-        });
-    };
-    const handleApproveBridgeClick = useCallback(async () => {
-        let bridgeRejected = false;
-        if (!checkout || !from?.web3Provider || !transaction) {
-            showErrorView();
-            return;
-        }
-        if (actionDisabled)
-            return;
-        setActionDisabled(true);
-        // Approvals as required
-        if (approveTransaction.unsignedTx) {
-            try {
-                setTxProcessing(true);
-                const approveSpendingResult = await checkout.sendTransaction({
-                    provider: from.web3Provider,
-                    transaction: approveTransaction.unsignedTx,
-                });
-                const approvalReceipt = await approveSpendingResult.transactionResponse.wait();
-                if (approvalReceipt.status !== 1) {
-                    viewDispatch({
-                        payload: {
-                            type: ViewActions.UPDATE_VIEW,
-                            view: {
-                                type: BridgeWidgetViews.BRIDGE_FAILURE,
-                                reason: 'Transaction failed to settle on chain',
-                            },
-                        },
-                    });
-                    return;
-                }
-            }
-            catch (error) {
-                setTxProcessing(false);
-                if (error.type === CheckoutErrorType.USER_REJECTED_REQUEST_ERROR) {
-                    setRejectedBridge(true);
-                    bridgeRejected = true;
-                }
-                else {
-                    handleExceptions(error);
-                }
-            }
-            finally {
-                setActionDisabled(false);
-            }
-        }
-        try {
-            if (bridgeRejected)
-                return;
-            setTxProcessing(true);
-            const sendResult = await checkout.sendTransaction({
-                provider: from.web3Provider,
-                transaction: transaction.unsignedTx,
-            });
-            setLoading(true);
-            const receipt = await sendResult.transactionResponse.wait();
-            if (receipt.status === 0) {
-                viewDispatch({
-                    payload: {
-                        type: ViewActions.UPDATE_VIEW,
-                        view: {
-                            type: BridgeWidgetViews.BRIDGE_FAILURE,
-                            reason: 'Approval transaction failed to settle on chain',
-                        },
-                    },
-                });
-                return;
-            }
-            viewDispatch({
-                payload: {
-                    type: ViewActions.UPDATE_VIEW,
-                    view: {
-                        type: BridgeWidgetViews.IN_PROGRESS,
-                        transactionHash: receipt.transactionHash,
-                    },
-                },
-            });
-        }
-        catch (error) {
-            if (error.type === CheckoutErrorType.USER_REJECTED_REQUEST_ERROR) {
-                setRejectedBridge(true);
-            }
-            else {
-                handleExceptions(error);
-            }
-        }
-        finally {
-            setLoading(false);
-            setTxProcessing(false);
-            setActionDisabled(false);
-        }
-    }, [
-        checkout,
-        from,
-        showErrorView,
-        viewDispatch,
-        transaction,
-        approveTransaction,
-        actionDisabled,
-    ]);
-    return (jsxs(Fragment, { children: [loading && (jsx(LoadingView, { loadingText: t('views.APPROVE_TRANSACTION.loadingView.text'), showFooterLogo: true })), !loading && (jsx(SimpleLayout, { header: (jsx(HeaderNavigation, { transparent: true, showBack: true, onCloseButtonClick: () => sendBridgeWidgetCloseEvent(eventTarget), onBackButtonClick: goBack })), floatHeader: true, heroContent: jsx(WalletApproveHero, {}), footer: (jsxs(Box, { sx: { width: '100%', flexDirection: 'column' }, children: [jsx(FooterButton, { loading: txProcessing, actionText: t(`views.APPROVE_TRANSACTION.${rejectedBridge ? 'footer.retryText' : 'footer.buttonText'}`), onActionClick: handleApproveBridgeClick }), jsx(FooterLogo, {})] })), children: jsx(SimpleTextBody, { heading: t('views.APPROVE_TRANSACTION.content.heading'), children: jsx(Box, { children: t('views.APPROVE_TRANSACTION.content.body') }) }) }))] }));
-}
-
-const containerStyles = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    paddingTop: 'base.spacing.x6',
-    paddingBottom: 'base.spacing.x1',
-    height: '100%',
-};
-const contentTextStyles = {
-    color: 'base.color.text.secondary',
-    fontFamily: 'base.font.family.heading.secondary',
-    textAlign: 'center',
-    marginTop: '15px',
-};
-const actionButtonContainerStyles = {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    gap: 'base.spacing.x2',
-    height: '100%',
-    width: '100%',
-};
-const actionButtonStyles = {
-    width: '100%',
-    height: 'base.spacing.x16',
-};
-
-function NotEnoughEthToWithdraw({ visible, onClose, onChangeAccount, }) {
-    const { t } = useTranslation();
-    const { bridgeState: { checkout } } = useContext(BridgeContext);
-    const ethLogo = getEthTokenImage(checkout.config.environment);
-    return (jsx(Drawer, { headerBarTitle: undefined, size: "full", onCloseDrawer: onClose, visible: visible, showHeaderBar: false, children: jsx(Drawer.Content, { children: jsxs(Box, { testId: "not-enough-eth-drawer", sx: containerStyles, children: [jsx(CloudImage, { imageUrl: ethLogo, sx: { w: 'base.icon.size.600', h: 'base.icon.size.600' } }), jsx(Heading, { size: "small", sx: contentTextStyles, testId: "not-enough-gas-heading", children: `${t('drawers.notEnoughEthWithdrawal.content.heading1')} ${ETH_TOKEN_SYMBOL} ${t('drawers.notEnoughEthWithdrawal.content.heading2')}` }), jsx(Body, { sx: contentTextStyles, children: `${t('drawers.notEnoughEthWithdrawal.content.body1')} ${ETH_TOKEN_SYMBOL} ${t('drawers.notEnoughEthWithdrawal.content.body2')}` }), jsxs(Box, { sx: actionButtonContainerStyles, children: [jsx(Button, { testId: "not-enough-eth-drawer-retry-button", sx: actionButtonStyles, variant: "tertiary", onClick: onChangeAccount, children: t('drawers.notEnoughEthWithdrawal.buttons.retry') }), jsx(Button, { sx: actionButtonStyles, variant: "tertiary", onClick: onClose, testId: "not-enough-eth-drawer-dismiss-button", children: t('drawers.notEnoughEthWithdrawal.buttons.dismiss') })] })] }) }) }));
-}
-
-function ClaimWithdrawal({ transaction }) {
-    const { t } = useTranslation();
-    const { bridgeState: { checkout, tokenBridge, from } } = useContext(BridgeContext);
-    const { viewDispatch } = useContext(ViewContext);
-    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
-    const { page } = useAnalytics();
-    useEffect(() => {
-        page({
-            userJourney: UserJourney.BRIDGE,
-            screen: 'ClaimWithdrawal',
-        });
-    }, []);
-    const [txProcessing, setTxProcessing] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const [hasWithdrawError, setHasWithdrawError] = useState(false);
-    const [withdrawalResponse, setWithdrawalResponse] = useState();
-    const [showNotEnoughEthDrawer, setShowNotEnoughEthDrawer] = useState(false);
-    const goBack = useCallback(() => {
-        viewDispatch({
-            payload: {
-                type: ViewActions.GO_BACK,
-            },
-        });
-    }, [viewDispatch]);
-    /**
-      * This effect should load the transaction that should be ready to be withdrawn.
-      * There should be a receiver -> details.to_address AND
-      * there should be an index ->  details.current_status.index
-      */
-    useEffect(() => {
-        const getWithdrawalTxn = async () => {
-            if (!tokenBridge || !transaction || transaction.details.current_status?.index === undefined)
-                return;
-            // get withdrawal transaction from the token bridge by receipient address and index
-            setLoading(true);
-            try {
-                const flowRateWithdrawTxnResponse = await tokenBridge?.getFlowRateWithdrawTx({
-                    recipient: transaction.details.to_address,
-                    index: transaction.details.current_status.index,
-                });
-                setWithdrawalResponse(flowRateWithdrawTxnResponse);
-            }
-            catch (err) {
-                // eslint-disable-next-line no-console
-                console.log(err);
-            }
-            finally {
-                setLoading(false);
-            }
-        };
-        getWithdrawalTxn();
-    }, [tokenBridge, transaction]);
-    const handleWithdrawalClaimClick = useCallback(async ({ forceChangeAccount }) => {
-        if (!checkout || !tokenBridge || !from?.web3Provider || !withdrawalResponse)
-            return;
-        if (!withdrawalResponse.pendingWithdrawal.canWithdraw || !withdrawalResponse.unsignedTx) {
-            // eslint-disable-next-line max-len, no-console
-            console.log(`Unable to process withdrawal transaction as it is not ready yet. Delay timeout at ${withdrawalResponse.pendingWithdrawal.timeoutEnd} `);
-            return;
-        }
-        let providerToUse = from?.web3Provider;
-        const l1ChainId = getL1ChainId(checkout.config);
-        setTxProcessing(true);
-        if (isPassportProvider(from?.web3Provider) || forceChangeAccount) {
-            // user should switch to MetaMask
-            try {
-                const createProviderResult = await checkout.createProvider({ walletProviderName: WalletProviderName.METAMASK });
-                const connectResult = await checkout.connect({
-                    provider: createProviderResult.provider,
-                    requestWalletPermissions: true,
-                });
-                providerToUse = connectResult.provider;
-                setShowNotEnoughEthDrawer(false);
-            }
-            catch (err) {
-                // eslint-disable-next-line no-console
-                console.log(err);
-                setHasWithdrawError(true);
-                setTxProcessing(false);
-                return;
-            }
-        }
-        /**
-         * Gas fee estimation and balance checks are done on a best effort basis.
-         * If for some reason the balance calls fail or gas fee data calls fail
-         * don't block the transaction from being submitted.
-         */
-        let gasEstimate;
-        let ethGasCostWei = null;
-        try {
-            try {
-                gasEstimate = await providerToUse.estimateGas(withdrawalResponse.unsignedTx);
-            }
-            catch (err) {
-                gasEstimate = BigNumber.from(WITHDRAWAL_CLAIM_GAS_LIMIT);
-            }
-            let feeData = null;
-            try {
-                feeData = await providerToUse.getFeeData();
-            }
-            catch (err) {
-                // eslint-disable-next-line no-console
-                console.log(err);
-            }
-            let gasPriceInWei = null;
-            if (feeData && feeData.lastBaseFeePerGas && feeData.maxPriorityFeePerGas) {
-                gasPriceInWei = feeData.lastBaseFeePerGas.add(feeData.maxPriorityFeePerGas);
-            }
-            else if (feeData && feeData.gasPrice) {
-                gasPriceInWei = feeData.gasPrice;
-            }
-            if (gasPriceInWei) {
-                ethGasCostWei = gasEstimate.mul(gasPriceInWei);
-            }
-        }
-        catch (err) {
-            // eslint-disable-next-line no-console
-            console.log(err);
-        }
-        // get L1 balances and do check for enough ETH to cover gas
-        try {
-            const balancesResult = await checkout.getAllBalances({
-                provider: providerToUse,
-                chainId: l1ChainId,
-            });
-            const ethBalance = balancesResult.balances.find((balance) => isNativeToken(balance.token.address));
-            if (!ethBalance || ethBalance.balance.lt(ethGasCostWei)) {
-                setShowNotEnoughEthDrawer(true);
-                setTxProcessing(false);
-                return;
-            }
-        }
-        catch (err) {
-            // eslint-disable-next-line no-console
-            console.log(err);
-        }
-        // check that provider is connected to L1
-        const network = await providerToUse.getNetwork();
-        if (network.chainId !== l1ChainId) {
-            try {
-                const switchNetworkResult = await checkout.switchNetwork({
-                    provider: providerToUse,
-                    chainId: l1ChainId,
-                });
-                providerToUse = switchNetworkResult.provider;
-            }
-            catch (err) {
-                setHasWithdrawError(true);
-                setLoading(false);
-                // eslint-disable-next-line no-console
-                console.log(err);
-                return;
-            }
-        }
-        // send transaction to wallet for signing
-        try {
-            const response = await checkout.sendTransaction({
-                provider: providerToUse,
-                transaction: withdrawalResponse.unsignedTx,
-            });
-            viewDispatch({
-                payload: {
-                    type: ViewActions.UPDATE_VIEW,
-                    view: {
-                        type: BridgeWidgetViews.CLAIM_WITHDRAWAL_IN_PROGRESS,
-                        transactionResponse: response.transactionResponse,
-                    },
-                },
-            });
-        }
-        catch (err) {
-            // eslint-disable-next-line no-console
-            console.log(err);
-            setHasWithdrawError(true);
-            setTxProcessing(false);
-        }
-        finally {
-            setTxProcessing(false);
-        }
-    }, [tokenBridge, from, withdrawalResponse]);
-    return (jsxs(SimpleLayout, { testId: "claim-withdrawal", header: (jsx(HeaderNavigation, { transparent: true, showBack: true, onCloseButtonClick: () => sendBridgeWidgetCloseEvent(eventTarget), onBackButtonClick: goBack })), floatHeader: true, heroContent: jsx(WalletApproveHero, {}), footer: (jsxs(Box, { sx: {
-                width: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-            }, children: [jsx(Box, { sx: {
-                        pb: 'base.spacing.x5',
-                        px: 'base.spacing.x6',
-                        width: '100%',
-                        display: 'flex',
-                        flexDirection: 'column',
-                    }, children: jsx(Button, { testId: "claim-withdrawal-continue-button", size: "large", variant: "primary", disabled: loading, onClick: () => ((txProcessing || loading)
-                            ? undefined
-                            : 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, }) {
-    const { t } = useTranslation();
-    const { environment, isOnRampEnabled, isSwapEnabled, isBridgeEnabled, } = config;
-    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
-    const { page } = useAnalytics();
-    const [viewState, viewDispatch] = useReducer(viewReducer, {
-        ...initialViewState,
-        view: { type: BridgeWidgetViews.WALLET_NETWORK_SELECTION },
-        history: [{ type: BridgeWidgetViews.WALLET_NETWORK_SELECTION }],
-    });
-    const [bridgeState, bridgeDispatch] = useReducer(bridgeReducer, {
-        ...initialBridgeState,
-        checkout,
-        web3Provider: web3Provider ?? null,
-        tokenBridge: (() => {
-            let bridgeInstance = ETH_SEPOLIA_TO_ZKEVM_TESTNET;
-            if (checkout.config.isDevelopment)
-                bridgeInstance = ETH_SEPOLIA_TO_ZKEVM_DEVNET;
-            if (checkout.config.isProduction)
-                bridgeInstance = ETH_MAINNET_TO_ZKEVM_MAINNET;
-            // Root provider is always L1
-            const rootProvider = new JsonRpcProvider(checkout.config.networkMap.get(getL1ChainId(checkout.config))?.rpcUrls[0]);
-            // Child provider is always L2
-            const childProvider = new JsonRpcProvider(checkout.config.networkMap.get(getL2ChainId(checkout.config))?.rpcUrls[0]);
-            const bridgeConfiguration = new BridgeConfiguration({
-                baseConfig: new ImmutableConfiguration({ environment: checkout.config.environment }),
-                bridgeInstance,
-                rootProvider,
-                childProvider,
-            });
-            return new TokenBridge(bridgeConfiguration);
-        })(),
-    });
-    const viewReducerValues = useMemo(() => ({ viewState, viewDispatch }), [viewState, viewDispatch]);
-    const bridgeReducerValues = useMemo(() => ({ bridgeState, bridgeDispatch }), [bridgeState, bridgeDispatch]);
-    const goBackToWalletNetworkSelectorClearState = useCallback(() => {
-        bridgeDispatch({
-            payload: {
-                type: BridgeActions.SET_WALLETS_AND_NETWORKS,
-                from: null,
-                to: null,
-            },
-        });
-        bridgeDispatch({
-            payload: {
-                type: BridgeActions.SET_TOKEN_AND_AMOUNT,
-                amount: '',
-                token: null,
-            },
-        });
-        viewDispatch({
-            payload: {
-                type: ViewActions.GO_BACK_TO,
-                view: { type: BridgeWidgetViews.WALLET_NETWORK_SELECTION },
-            },
-        });
-    }, [viewDispatch]);
-    const goBackToWalletNetworkSelector = useCallback(() => {
-        viewDispatch({
-            payload: {
-                type: ViewActions.GO_BACK_TO,
-                view: { type: BridgeWidgetViews.WALLET_NETWORK_SELECTION },
-            },
-        });
-    }, [viewDispatch]);
-    const updateToTransactionsPage = useCallback(() => {
-        viewDispatch({
-            payload: {
-                type: ViewActions.UPDATE_VIEW,
-                view: {
-                    type: BridgeWidgetViews.TRANSACTIONS,
-                },
-            },
-        });
-    }, [viewDispatch]);
-    const goBackToReview = useCallback(() => {
-        viewDispatch({
-            payload: {
-                type: ViewActions.GO_BACK_TO,
-                view: { type: BridgeWidgetViews.BRIDGE_REVIEW },
-            },
-        });
-    }, [viewDispatch]);
-    useEffect(() => {
-        (async () => {
-            bridgeDispatch({
-                payload: {
-                    type: BridgeActions.SET_PROVIDER,
-                    web3Provider: web3Provider ?? null,
-                },
-            });
-        })();
-    }, [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 })), viewState.view.type === BridgeWidgetViews.BRIDGE_REVIEW && (jsx(BridgeReview, {})), viewState.view.type === BridgeWidgetViews.IN_PROGRESS && (jsx(MoveInProgress, { transactionHash: viewState.view.transactionHash })), 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) {
-                                    reason = viewState.view.reason;
-                                }
-                                page({
-                                    userJourney: UserJourney.BRIDGE,
-                                    screen: 'Failed',
-                                    extras: {
-                                        reason,
-                                    },
-                                });
-                                sendBridgeFailedEvent(eventTarget, reason);
-                            } })), viewState.view.type === BridgeWidgetViews.APPROVE_TRANSACTION && (jsx(ApproveTransaction, { approveTransaction: viewState.view.approveTransaction, transaction: viewState.view.transaction })), viewState.view.type === BridgeWidgetViews.TRANSACTIONS && (jsx(Transactions, { onBackButtonClick: goBackToWalletNetworkSelector })), viewState.view.type === BridgeWidgetViews.CLAIM_WITHDRAWAL && (jsx(ClaimWithdrawal, { transaction: viewState.view.transaction })), viewState.view.type === SharedViews.ERROR_VIEW && (jsx(ErrorView, { actionText: t('views.ERROR_VIEW.actionText'), onActionClick: goBackToWalletNetworkSelectorClearState, onCloseClick: () => sendBridgeWidgetCloseEvent(eventTarget), errorEventAction: () => {
-                            page({
-                                userJourney: UserJourney.BRIDGE,
-                                screen: 'Error',
-                            });
-                        } })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx(TopUpView, { analytics: { userJourney: UserJourney.BRIDGE }, widgetEvent: IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT, checkout: checkout, provider: web3Provider, showOnrampOption: isOnRampEnabled, showSwapOption: isSwapEnabled, showBridgeOption: isBridgeEnabled, onCloseButtonClick: () => sendBridgeWidgetCloseEvent(eventTarget) })), viewState.view.type === BridgeWidgetViews.CLAIM_WITHDRAWAL_IN_PROGRESS && (jsx(ClaimWithdrawalInProgress, { transactionResponse: viewState.view.transactionResponse })), viewState.view.type === BridgeWidgetViews.CLAIM_WITHDRAWAL_SUCCESS && (jsx(StatusView, { statusText: t('views.CLAIM_WITHDRAWAL.IN_PROGRESS.success.text'), actionText: t('views.CLAIM_WITHDRAWAL.IN_PROGRESS.success.actionText'), onRenderEvent: () => {
-                            page({
-                                userJourney: UserJourney.BRIDGE,
-                                screen: 'ClaimWithdrawalSuccess',
-                            });
-                            sendBridgeClaimWithdrawalSuccessEvent(eventTarget, viewState.view.transactionHash);
-                        }, onActionClick: updateToTransactionsPage, statusType: StatusType.SUCCESS, testId: "claim-withdrawal-success-view" })), viewState.view.type === BridgeWidgetViews.CLAIM_WITHDRAWAL_FAILURE && (jsx(StatusView, { statusText: t('views.CLAIM_WITHDRAWAL.IN_PROGRESS.failure.text'), actionText: t('views.CLAIM_WITHDRAWAL.IN_PROGRESS.failure.actionText'), onRenderEvent: () => {
-                            let reason = '';
-                            if (viewState.view.type === BridgeWidgetViews.CLAIM_WITHDRAWAL_FAILURE) {
-                                reason = viewState.view.reason;
-                            }
-                            page({
-                                userJourney: UserJourney.BRIDGE,
-                                screen: 'ClaimWithdrawalFailure',
-                                extras: {
-                                    reason,
-                                },
-                            });
-                            sendBridgeClaimWithdrawalFailedEvent(eventTarget, viewState.view.transactionHash, 'Transaction failed');
-                        }, onActionClick: updateToTransactionsPage, statusType: StatusType.FAILURE, onCloseClick: () => sendBridgeWidgetCloseEvent(eventTarget), testId: "claim-withdrawal-fail-view" }))] }) }) }));
-}
-
-var BridgeWidget$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: BridgeWidget
-});
-
-export { BridgeWidget as B, BridgeWidget$1 as a, getChainNameById as g };