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

package/dist/browser/checkout/WalletWidget-9c4c62e4.js

@@ -1,760 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useEffect, useMemo, useCallback, useReducer } from 'react';
-import { TokenFilterTypes, IMTBLWidgetEvents, CheckoutErrorType, NetworkFilterTypes } from '@imtbl/checkout-sdk';
-import { V as ViewContext, b as ViewActions, W as WalletWidgetViews, C as ConnectLoaderContext, u as useAnalytics, h as formatZeroAmount, E as EventTargetContext, j as isPassportProvider, k as getL2ChainId, l as getL1ChainId, t as tokenValueFormat, U as UserJourney, o as orchestrationEvents, Z as ZERO_BALANCE_STRING, m as isNativeToken, n as sendNetworkSwitchEvent, S as SharedViews, p as sortNetworksCompareFn, q as networkIcon, r as logoColour, D as DEFAULT_BALANCE_RETRY_POLICY, w as sortTokensByAmount, x as calculateCryptoToFiat, a as SimpleLayout, H as HeaderNavigation, B as ButtonNavigationStyles, y as sendWalletWidgetCloseEvent, F as FooterLogo, z as sendDisconnectWalletEvent, A as heroBackGroundStyles, G as heroImageStyles, I as heroImageBottomAlign, c as SimpleTextBody, J as FAQS_LINK, v as viewReducer, i as initialViewState, L as LoadingView, K as ErrorView } from './index-4511315b.js';
-import { useTranslation } from 'react-i18next';
-import { Box, Body, ButtCon, MenuItem, Heading, HorizontalMenu, Button, Link } from '@biom3/react';
-import { C as CryptoFiatContext, a as CryptoFiatActions, b as CryptoFiatProvider, T as TopUpView } from './TopUpView-590c2c4c.js';
-import { r as retry, u as useInterval } from './retry-254e3478.js';
-import '@biom3/design-tokens';
-import '@imtbl/react-analytics';
-import 'react-dom/client';
-import '@ethersproject/providers';
-import 'i18next';
-import '@imtbl/config';
-import 'ethers';
-import 'i18next-browser-languagedetector';
-import '@imtbl/cryptofiat';
-
-const initialWalletState = {
-    walletProviderName: null,
-    network: null,
-    tokenBalances: [],
-    supportedTopUps: null,
-};
-var WalletActions;
-(function (WalletActions) {
-    WalletActions["SET_WALLET_PROVIDER_NAME"] = "SET_WALLET_PROVIDER_NAME";
-    WalletActions["SET_NETWORK"] = "SET_NETWORK";
-    WalletActions["SET_TOKEN_BALANCES"] = "SET_TOKEN_BALANCES";
-    WalletActions["SET_SUPPORTED_TOP_UPS"] = "SUPPORTED_TOP_UPS";
-})(WalletActions || (WalletActions = {}));
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const WalletContext = createContext({
-    walletState: initialWalletState,
-    walletDispatch: () => { },
-});
-WalletContext.displayName = 'WalletContext'; // help with debugging Context in browser
-const walletReducer = (state, action) => {
-    switch (action.payload.type) {
-        case WalletActions.SET_WALLET_PROVIDER_NAME:
-            return {
-                ...state,
-                walletProviderName: action.payload.walletProviderName,
-            };
-        case WalletActions.SET_NETWORK:
-            return {
-                ...state,
-                network: action.payload.network,
-            };
-        case WalletActions.SET_TOKEN_BALANCES:
-            return {
-                ...state,
-                tokenBalances: action.payload.tokenBalances,
-            };
-        case WalletActions.SET_SUPPORTED_TOP_UPS:
-            return {
-                ...state,
-                supportedTopUps: {
-                    isSwapEnabled: action.payload.supportedTopUps.isSwapEnabled ?? true,
-                    isOnRampEnabled: action.payload.supportedTopUps.isOnRampEnabled ?? true,
-                    isBridgeEnabled: action.payload.supportedTopUps.isBridgeEnabled ?? true,
-                    isSwapAvailable: action.payload.supportedTopUps.isSwapAvailable ?? true,
-                },
-            };
-        default:
-            return state;
-    }
-};
-
-const fetchTokenSymbols = async (checkout, chainId) => {
-    const tokenAllowList = await checkout.getTokenAllowList({
-        type: TokenFilterTypes.ALL,
-        chainId,
-    });
-    const symbolSet = new Set();
-    tokenAllowList.tokens.forEach((token) => {
-        symbolSet.add(token.symbol);
-    });
-    return Array.from(symbolSet);
-};
-
-const totalTokenBalanceStyle = {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingX: 'base.spacing.x3',
-    paddingY: 'base.spacing.x2',
-};
-const totalTokenBalanceValueStyle = {
-    display: 'flex',
-    direction: 'row',
-    columnGap: 'base.spacing.x1',
-    alignItems: 'center',
-};
-const coinInfoButtonStyle = {
-    height: 'base.icon.size.250',
-    width: 'base.icon.size.250',
-    minWidth: 'base.icon.size.250',
-    fill: 'base.color.accent.4',
-    cursor: 'pointer',
-};
-
-function TotalTokenBalance(props) {
-    const { t } = useTranslation();
-    const { viewDispatch } = useContext(ViewContext);
-    const { totalBalance, loading } = props;
-    return (jsxs(Box, { sx: totalTokenBalanceStyle, children: [jsxs(Box, { sx: totalTokenBalanceValueStyle, children: [jsx(Body, { size: "medium", children: t('views.WALLET_BALANCES.totalTokenBalance.heading') }), jsx(Box, { sx: { pl: 'base.spacing.x1' }, children: jsx(ButtCon, { testId: "coin-info-icon", variant: "tertiary", icon: "Information", sx: coinInfoButtonStyle, onClick: () => viewDispatch({
-                                payload: {
-                                    type: ViewActions.UPDATE_VIEW,
-                                    view: { type: WalletWidgetViews.COIN_INFO },
-                                },
-                            }) }) })] }), jsxs(Box, { sx: totalTokenBalanceValueStyle, children: [jsx(Body, { testId: "total-token-balance-value", weight: "bold", shimmer: loading ? 1 : 0, shimmerSx: { minw: '100px' }, children: t('views.WALLET_BALANCES.totalTokenBalance.totalHeading') }), !loading && (jsxs(Body, { testId: "total-token-balance", weight: "bold", children: ["\u2248 USD $", totalBalance.toFixed(2)] }))] })] }));
-}
-
-const ShowMenuItem = (show) => ({
-    display: show ? '' : 'none',
-});
-
-function BalanceItem({ balanceInfo, bridgeToL2OnClick, }) {
-    const { connectLoaderState } = useContext(ConnectLoaderContext);
-    const { track } = useAnalytics();
-    const { checkout, provider } = connectLoaderState;
-    const fiatAmount = `≈ USD $${formatZeroAmount(balanceInfo.fiatAmount)}`;
-    const { walletState } = useContext(WalletContext);
-    const { supportedTopUps, network } = walletState;
-    const [isOnRampEnabled, setIsOnRampEnabled] = useState();
-    const [isBridgeEnabled, setIsBridgeEnabled] = useState();
-    const [isSwapEnabled, setIsSwapEnabled] = useState();
-    const { eventTargetState: { eventTarget }, } = useContext(EventTargetContext);
-    const [onRampAllowedTokens, setOnRampAllowedTokens] = useState([]);
-    const isPassport = isPassportProvider(provider);
-    useEffect(() => {
-        const getOnRampAllowedTokens = async () => {
-            if (!checkout)
-                return;
-            const onRampAllowedTokensResult = await checkout.getTokenAllowList({
-                type: TokenFilterTypes.ONRAMP,
-                chainId: getL2ChainId(checkout.config),
-            });
-            setOnRampAllowedTokens(onRampAllowedTokensResult.tokens);
-        };
-        getOnRampAllowedTokens();
-    }, [checkout]);
-    useEffect(() => {
-        if (!network || !supportedTopUps || !checkout)
-            return;
-        const enableAddCoin = network.chainId === getL2ChainId(checkout.config)
-            && (supportedTopUps?.isOnRampEnabled ?? true);
-        setIsOnRampEnabled(enableAddCoin);
-        const enableMoveCoin = (network.chainId === getL1ChainId(checkout.config)
-            || network.chainId === getL2ChainId(checkout.config))
-            && (supportedTopUps?.isBridgeEnabled ?? true);
-        setIsBridgeEnabled(enableMoveCoin);
-        const enableSwapCoin = network.chainId === getL2ChainId(checkout.config)
-            && (supportedTopUps?.isSwapEnabled ?? true)
-            && (supportedTopUps?.isSwapAvailable ?? true);
-        setIsSwapEnabled(enableSwapCoin);
-    }, [network, supportedTopUps, checkout, isPassport]);
-    const showAddMenuItem = useMemo(() => Boolean(isOnRampEnabled
-        && onRampAllowedTokens.length > 0
-        && onRampAllowedTokens.find((token) => token.address?.toLowerCase() === balanceInfo.address?.toLowerCase())), [isOnRampEnabled, onRampAllowedTokens]);
-    return (jsxs(MenuItem, { testId: `balance-item-${balanceInfo.symbol}`, emphasized: true, children: [jsx(MenuItem.FramedIcon, { icon: "Coins", circularFrame: true }), jsx(MenuItem.Label, { children: balanceInfo.symbol }), jsx(MenuItem.Caption, { children: balanceInfo.description }), jsx(MenuItem.PriceDisplay, { testId: `balance-item-${balanceInfo.symbol}`, use: jsx(Heading, { size: "xSmall" }), price: tokenValueFormat(balanceInfo.balance), fiatAmount: fiatAmount }), (isOnRampEnabled || isSwapEnabled || isBridgeEnabled) && (jsxs(MenuItem.OverflowPopoverMenu, { size: "small", testId: "token-menu", onClick: () => {
-                    track({
-                        userJourney: UserJourney.WALLET,
-                        screen: 'WalletBalances',
-                        control: 'BalanceItem',
-                        controlType: 'Button',
-                        extras: {
-                            tokenSymbol: balanceInfo.symbol,
-                            tokenAddress: balanceInfo.address,
-                        },
-                    });
-                }, children: [jsxs(MenuItem, { testId: "balance-item-add-option", sx: ShowMenuItem(showAddMenuItem), onClick: () => {
-                            track({
-                                userJourney: UserJourney.WALLET,
-                                screen: 'WalletBalances',
-                                control: 'AddTokens',
-                                controlType: 'Button',
-                                extras: {
-                                    tokenSymbol: balanceInfo.symbol,
-                                    tokenAddress: balanceInfo.address,
-                                },
-                            });
-                            orchestrationEvents.sendRequestOnrampEvent(eventTarget, IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, {
-                                tokenAddress: balanceInfo.address ?? '',
-                                amount: '',
-                            });
-                        }, children: [jsx(MenuItem.Icon, { icon: "Add" }), jsx(MenuItem.Label, { children: `Add ${balanceInfo.symbol}` })] }), jsxs(MenuItem, { testId: "balance-item-swap-option", sx: ShowMenuItem(isSwapEnabled), onClick: () => {
-                            track({
-                                userJourney: UserJourney.WALLET,
-                                screen: 'WalletBalances',
-                                control: 'SwapTokens',
-                                controlType: 'Button',
-                                extras: {
-                                    tokenSymbol: balanceInfo.symbol,
-                                    tokenAddress: balanceInfo.address,
-                                },
-                            });
-                            orchestrationEvents.sendRequestSwapEvent(eventTarget, IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, {
-                                fromTokenAddress: balanceInfo.address ?? '',
-                                toTokenAddress: '',
-                                amount: '',
-                            });
-                        }, children: [jsx(MenuItem.Icon, { icon: "Exchange" }), jsx(MenuItem.Label, { children: `Swap ${balanceInfo.symbol}` })] }), jsxs(MenuItem, { testId: "balance-item-move-option", sx: ShowMenuItem(isBridgeEnabled), onClick: () => {
-                            track({
-                                userJourney: UserJourney.WALLET,
-                                screen: 'WalletBalances',
-                                control: 'MoveTokens',
-                                controlType: 'Button',
-                                extras: {
-                                    tokenSymbol: balanceInfo.symbol,
-                                    tokenAddress: balanceInfo.address,
-                                },
-                            });
-                            bridgeToL2OnClick(balanceInfo.address);
-                        }, children: [jsx(MenuItem.Icon, { icon: "Minting" }), jsx(MenuItem.Label, { children: `Move ${balanceInfo.symbol}` })] })] }))] }));
-}
-
-const tokenBalanceListStyle = {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    rowGap: 'base.spacing.x2',
-};
-const noTokensStyle = {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-};
-
-const filterZeroBalances = (balanceInfoItems) => balanceInfoItems.filter((balance) => balance.balance !== ZERO_BALANCE_STRING || isNativeToken(balance.address));
-function TokenBalanceList({ balanceInfoItems, bridgeToL2OnClick, }) {
-    const { t } = useTranslation();
-    const filteredBalances = filterZeroBalances(balanceInfoItems);
-    return (jsxs(Box, { sx: tokenBalanceListStyle, children: [filteredBalances.length === 0
-                && (jsx(Box, { sx: noTokensStyle, children: jsx(Body, { testId: "no-tokens-found", children: t('views.WALLET_BALANCES.tokenBalancesList.noTokensFound') }) })), filteredBalances.map((balance) => (jsx(BalanceItem, { balanceInfo: balance, bridgeToL2OnClick: bridgeToL2OnClick }, balance.id)))] }));
-}
-
-const networkMenuStyles = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    paddingTop: 'base.spacing.x4',
-};
-const activeNetworkButtonStyle = {
-    fontWeight: 'base.text.caption.small.bold.fontWeight',
-    borderColor: 'base.color.translucent.emphasis.1000',
-    borderStyle: 'solid',
-    borderWidth: 'base.border.size.200',
-};
-const networkButtonStyle = {
-    fontWeight: 'base.text.caption.small.bold.fontWeight',
-};
-const logoStyle = (logoColor, isActive) => ({
-    paddingRight: 'base.spacing.x1',
-    width: '22px',
-    fill: isActive ? logoColor : 'base.color.brand.4',
-});
-const networkHeadingStyle = {
-    paddingX: 'base.spacing.x3',
-    paddingY: 'base.spacing.x2',
-};
-
-function NetworkMenu() {
-    const { t } = useTranslation();
-    const { connectLoaderState } = useContext(ConnectLoaderContext);
-    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
-    const { checkout, provider } = connectLoaderState;
-    const { viewDispatch } = useContext(ViewContext);
-    const { walletState, walletDispatch } = useContext(WalletContext);
-    const { network } = walletState;
-    const [allowedNetworks, setNetworks] = useState([]);
-    const { track } = useAnalytics();
-    const switchNetwork = useCallback(async (chainId) => {
-        if (!checkout || !provider || !network || network.chainId === chainId)
-            return;
-        track({
-            userJourney: UserJourney.WALLET,
-            screen: 'WalletBalances',
-            control: 'SwitchNetwork',
-            controlType: 'Button',
-            extras: {
-                chainId,
-            },
-        });
-        try {
-            const switchNetworkResult = await checkout.switchNetwork({
-                provider,
-                chainId,
-            });
-            sendNetworkSwitchEvent(eventTarget, switchNetworkResult.provider, switchNetworkResult.network);
-        }
-        catch (err) {
-            if (err.type === CheckoutErrorType.USER_REJECTED_REQUEST_ERROR) ;
-            else {
-                viewDispatch({
-                    payload: {
-                        type: ViewActions.UPDATE_VIEW,
-                        view: { type: SharedViews.ERROR_VIEW, error: err },
-                    },
-                });
-            }
-        }
-    }, [checkout, provider, network, walletDispatch, viewDispatch]);
-    useEffect(() => {
-        (async () => {
-            if (checkout) {
-                const allowedNetworksResponse = await checkout.getNetworkAllowList({
-                    type: NetworkFilterTypes.ALL,
-                });
-                setNetworks(allowedNetworksResponse?.networks ?? []);
-            }
-            else {
-                setNetworks([]);
-            }
-        })();
-    }, [checkout]);
-    return (jsxs(Box, { testId: "network-menu", sx: networkMenuStyles, children: [jsx(Body, { testId: "network-heading", size: "medium", sx: networkHeadingStyle, children: t('views.WALLET_BALANCES.networkStatus.heading') }), jsx(HorizontalMenu, { children: checkout
-                    && allowedNetworks
-                        ?.sort((a, b) => sortNetworksCompareFn(a, b, checkout.config))
-                        .map((networkItem) => (jsxs(HorizontalMenu.Button, { testId: `${networkItem.name}-network-button`, sx: networkItem.chainId === network?.chainId
-                            ? activeNetworkButtonStyle
-                            : networkButtonStyle, size: "small", onClick: () => switchNetwork(networkItem.chainId), children: [jsx(Button.Icon, { icon: networkIcon[networkItem.chainId], iconVariant: "bold", sx: logoStyle(logoColour[networkItem.chainId], networkItem.chainId === network?.chainId) }), networkItem.name] }, networkItem.chainId))) })] }));
-}
-
-const walletBalanceOuterContainerStyles = {
-    display: 'flex',
-    flexDirection: 'column',
-    rowGap: 'base.spacing.x2',
-    paddingX: 'base.spacing.x2',
-    flex: 1,
-};
-const walletBalanceContainerStyles = {
-    backgroundColor: 'base.color.neutral.800',
-    paddingX: 'base.spacing.x1',
-    borderRadius: 'base.borderRadius.x6',
-    flex: 1,
-};
-const walletBalanceLoadingIconStyles = {
-    display: 'flex',
-    flexDirection: 'column',
-    rowGap: 'base.spacing.x2',
-};
-const walletBalanceListContainerStyles = (showNetworkMenu, showAddCoins) => {
-    /**
-     * Need fixed height set to enable vertical scrolling within div
-     * */
-    let height = 460;
-    if (showNetworkMenu) {
-        height -= 104; // - network menu height
-    }
-    if (showAddCoins) {
-        height -= 98; // - add coins button height
-    }
-    const heightpx = `${height}px`;
-    return {
-        height: heightpx,
-        overflowY: 'auto',
-        borderRadius: 'base.borderRadius.x6',
-    };
-};
-
-const getTokenBalances = async (checkout, provider, chainId) => {
-    if (!checkout || !provider || !chainId)
-        return [];
-    const walletAddress = await provider.getSigner().getAddress();
-    // Do not catch the error so that the caller can decide
-    // how to handle the experience.
-    const getAllBalancesResult = await retry(() => checkout.getAllBalances({
-        provider,
-        walletAddress,
-        chainId,
-    }), DEFAULT_BALANCE_RETRY_POLICY);
-    if (!getAllBalancesResult)
-        return [];
-    const sortedTokens = sortTokensByAmount(checkout.config, getAllBalancesResult.balances, chainId);
-    return sortedTokens;
-};
-const formatTokenId = (chainId, symbol, address) => {
-    if (!address)
-        return `${chainId.toString()}-${symbol.toLowerCase()}`;
-    return `${chainId.toString()}-${symbol.toLowerCase()}-${address.toLowerCase()}`;
-};
-const mapTokenBalancesWithConversions = (chainId, balances, conversions) => balances.map((balance) => ({
-    id: formatTokenId(chainId, balance.token.symbol, balance.token.address),
-    balance: balance.formattedBalance,
-    fiatAmount: calculateCryptoToFiat(balance.formattedBalance, balance.token.symbol, conversions),
-    symbol: balance.token.symbol,
-    address: balance.token.address,
-    description: balance.token.name,
-}));
-
-function WalletBalances({ balancesLoading, }) {
-    const { t } = useTranslation();
-    const { connectLoaderState } = useContext(ConnectLoaderContext);
-    const { checkout, provider } = connectLoaderState;
-    const { cryptoFiatState, cryptoFiatDispatch } = useContext(CryptoFiatContext);
-    const { walletState } = useContext(WalletContext);
-    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
-    const { viewDispatch } = useContext(ViewContext);
-    const [totalFiatAmount, setTotalFiatAmount] = useState(0.0);
-    const { network, supportedTopUps, tokenBalances, } = walletState;
-    const { conversions } = cryptoFiatState;
-    const isPassport = isPassportProvider(provider);
-    const showNetworkMenu = !isPassport;
-    const { track, page } = useAnalytics();
-    const balanceInfos = useMemo(() => mapTokenBalancesWithConversions(network?.chainId, tokenBalances, conversions), [tokenBalances, conversions, network?.chainId]);
-    useEffect(() => {
-        page({
-            userJourney: UserJourney.WALLET,
-            screen: 'WalletBalances',
-        });
-    }, []);
-    useEffect(() => {
-        (async () => {
-            if (!checkout)
-                return;
-            if (!cryptoFiatDispatch)
-                return;
-            if (!network)
-                return;
-            const tokenSymbols = await fetchTokenSymbols(checkout, network.chainId);
-            cryptoFiatDispatch({
-                payload: {
-                    type: CryptoFiatActions.SET_TOKEN_SYMBOLS,
-                    tokenSymbols,
-                },
-            });
-        })();
-    }, [checkout, cryptoFiatDispatch, network?.chainId]);
-    useEffect(() => {
-        let totalAmount = 0.0;
-        balanceInfos.forEach((balance) => {
-            const fiatAmount = parseFloat(balance.fiatAmount);
-            if (!Number.isNaN(fiatAmount))
-                totalAmount += fiatAmount;
-        });
-        setTotalFiatAmount(totalAmount);
-    }, [balanceInfos]);
-    const showAddCoins = useMemo(() => {
-        if (!checkout || !network)
-            return false;
-        return (network.chainId === getL2ChainId(checkout.config)
-            && Boolean(supportedTopUps?.isBridgeEnabled
-                || supportedTopUps?.isSwapEnabled
-                || supportedTopUps?.isOnRampEnabled));
-    }, [checkout, network, supportedTopUps]);
-    const handleAddCoinsClick = () => {
-        track({
-            userJourney: UserJourney.WALLET,
-            screen: 'WalletBalances',
-            control: 'AddCoins',
-            controlType: 'Button',
-        });
-        viewDispatch({
-            payload: {
-                type: ViewActions.UPDATE_VIEW,
-                view: { type: SharedViews.TOP_UP_VIEW },
-            },
-        });
-    };
-    const handleBridgeToL2OnClick = (address) => {
-        orchestrationEvents.sendRequestBridgeEvent(eventTarget, IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, {
-            tokenAddress: address ?? '',
-            amount: '',
-        });
-    };
-    return (jsx(SimpleLayout, { testId: "wallet-balances", header: (jsx(HeaderNavigation, { title: t('views.WALLET_BALANCES.header.title'), rightActions: (jsx(ButtCon, { icon: "SettingsCog", sx: ButtonNavigationStyles(), iconVariant: "bold", onClick: () => {
-                    track({
-                        userJourney: UserJourney.WALLET,
-                        screen: 'WalletBalances',
-                        control: 'Settings',
-                        controlType: 'Button',
-                    });
-                    viewDispatch({
-                        payload: {
-                            type: ViewActions.UPDATE_VIEW,
-                            view: { type: WalletWidgetViews.SETTINGS },
-                        },
-                    });
-                }, testId: "settings-button" })), onCloseButtonClick: () => sendWalletWidgetCloseEvent(eventTarget) })), footer: jsx(FooterLogo, {}), children: jsxs(Box, { sx: walletBalanceOuterContainerStyles, children: [jsxs(Box, { sx: walletBalanceContainerStyles, children: [showNetworkMenu && jsx(NetworkMenu, {}), jsx(TotalTokenBalance, { totalBalance: totalFiatAmount, loading: balancesLoading }), jsxs(Box, { sx: walletBalanceListContainerStyles(showNetworkMenu, showAddCoins), children: [balancesLoading && (jsxs(Box, { sx: walletBalanceLoadingIconStyles, children: [jsx(MenuItem, { shimmer: true, emphasized: true, testId: "balance-item-shimmer--1" }), jsx(MenuItem, { shimmer: true, emphasized: true, testId: "balance-item-shimmer--2" }), jsx(MenuItem, { shimmer: true, emphasized: true, testId: "balance-item-shimmer--3" })] })), !balancesLoading && (jsx(TokenBalanceList, { balanceInfoItems: balanceInfos, bridgeToL2OnClick: handleBridgeToL2OnClick }))] })] }), showAddCoins && (jsxs(MenuItem, { testId: "add-coins", emphasized: true, onClick: handleAddCoinsClick, children: [jsx(MenuItem.FramedIcon, { icon: "Add" }), jsx(MenuItem.Label, { children: t('views.WALLET_BALANCES.addCoins') })] }))] }) }));
-}
-
-const walletAddressContainerStyle = {
-    width: '100%',
-    height: '88px',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    padding: '24px 11px 24px 32px',
-    backgroundColor: 'base.color.translucent.emphasis.400',
-    borderRadius: 'base.borderRadius.x6',
-};
-const walletAddressLayoutStyle = {
-    width: '100%',
-    display: 'flex',
-};
-const walletAddressTextLayoutStyle = {
-    width: '318px',
-    display: 'flex',
-    flexDirection: 'column',
-};
-const truncatedTextStyle = {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-};
-
-const isCopiedStyle = {
-    background: 'base.color.status.success.bright',
-    fill: 'base.color.status.success.bright',
-};
-
-function CopyButton({ textToCopy, }) {
-    const [isCopied, setIsCopied] = useState(false);
-    const { track } = useAnalytics();
-    const handleCopy = () => {
-        if (textToCopy != null) {
-            track({
-                userJourney: UserJourney.WALLET,
-                screen: 'Settings',
-                control: 'CopyWalletAddress',
-                controlType: 'Button',
-            });
-            navigator.clipboard.writeText(textToCopy);
-        }
-        setIsCopied(true);
-        setTimeout(() => {
-            setIsCopied(false);
-        }, 3000);
-    };
-    return (jsx(Box, { children: textToCopy && (jsx(Box, { sx: {
-                cursor: 'pointer',
-            }, children: jsx(ButtCon, { sx: isCopied
-                    ? isCopiedStyle
-                    : {}, onClick: handleCopy, size: "small", icon: isCopied ? 'Tick' : 'CopyText' }) })) }));
-}
-
-function WalletAddress({ provider }) {
-    const [walletAddress, setWalletAddress] = useState('');
-    useEffect(() => {
-        if (!provider)
-            return;
-        (async () => {
-            const address = await provider.getSigner().getAddress();
-            setWalletAddress(address);
-        })();
-    }, [provider]);
-    return (jsx(Box, { sx: walletAddressContainerStyle, children: jsxs(Box, { sx: walletAddressLayoutStyle, children: [jsxs(Box, { sx: walletAddressTextLayoutStyle, children: [jsx(Heading, { size: "xSmall", children: "Wallet address" }), jsx(Body, { testId: "wallet-address", size: "xSmall", sx: truncatedTextStyle, children: walletAddress })] }), jsx(CopyButton, { textToCopy: walletAddress })] }) }));
-}
-
-const settingsBoxStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    rowGap: 'base.spacing.x2',
-    marginX: 'base.spacing.x2',
-};
-const settingsDisconnectButtonStyle = { marginTop: '32px' };
-
-function Settings() {
-    const { t } = useTranslation();
-    const { connectLoaderState } = useContext(ConnectLoaderContext);
-    const { provider } = connectLoaderState;
-    const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
-    const { page } = useAnalytics();
-    useEffect(() => {
-        page({
-            userJourney: UserJourney.WALLET,
-            screen: 'Settings',
-        });
-    }, []);
-    return (jsx(SimpleLayout, { testId: "wallet-balances", header: (jsx(HeaderNavigation, { showBack: true, title: t('views.SETTINGS.header.title'), onCloseButtonClick: () => sendWalletWidgetCloseEvent(eventTarget) })), footer: jsx(FooterLogo, {}), children: jsxs(Box, { sx: settingsBoxStyle, children: [jsx(WalletAddress, { provider: provider }), jsx(Button, { testId: "disconnect-button", variant: "secondary", sx: settingsDisconnectButtonStyle, onClick: () => sendDisconnectWalletEvent(eventTarget), children: t('views.SETTINGS.disconnectButton.label') })] }) }));
-}
-
-function IMXCoinsHero() {
-    return (jsx(Box, { sx: { ...heroBackGroundStyles, background: 'base.color.translucent.emphasis.100' }, children: jsx(Box, { sx: { ...heroImageStyles, ...heroImageBottomAlign }, children: jsxs("svg", { width: "430", height: "211", viewBox: "0 0 430 211", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M213 120C132.857 120 65.7181 139.009 1 175.641V211H431V178.515C365.165 140.107 295.216 120 213 120Z", fill: "url(#paint0_linear_4525_125520)" }), jsx("path", { d: "M428.5 210.5H383C383 123 114 113.5 236 120.5C333.6 126.1 405 163.833 428.5 182V210.5Z", fill: "#2D0034", fillOpacity: "0.2" }), jsx("path", { d: "M131.005 34.0566L130.576 32.4244L128.944 32.8537L129.373 34.4858L131.005 34.0566Z", fill: "white" }), jsx("path", { d: "M77.1152 45.7678L76.5627 43.6667L74.4617 44.2193L75.0142 46.3203L77.1152 45.7678Z", fill: "white" }), jsx("path", { d: "M264.238 30.1945L262.093 29.8494L261.748 31.9942L263.893 32.3394L264.238 30.1945Z", fill: "white" }), jsx("path", { d: "M348.157 2.3323L348.776 1.04626L347.49 0.427149L346.871 1.71319L348.157 2.3323Z", fill: "white" }), jsx("path", { d: "M342.606 56.5062L342.054 54.4052L339.953 54.9577L340.505 57.0587L342.606 56.5062Z", fill: "white" }), jsx("path", { d: "M348.381 55.0847L349 53.7986L347.714 53.1795L347.095 54.4656L348.381 55.0847Z", fill: "white" }), jsx("path", { d: "M107.606 18.8096L106.681 17.7229L105.594 18.6483L106.52 19.735L107.606 18.8096Z", fill: "white" }), jsx("path", { d: "M233.14 2.3323L233.759 1.04626L232.473 0.427149L231.854 1.71319L233.14 2.3323Z", fill: "white" }), jsx("path", { d: "M2.97844e-07 176.149C62.5366 139.802 135.143 119 212.584 119C292.029 119 366.384 140.892 430 179", stroke: "black" }), jsx("path", { d: "M70.97 142.773C76.3142 146.15 87.6289 137.839 96.242 124.208C104.855 110.578 107.505 96.7911 102.161 93.414C96.8167 90.037 85.5021 98.3487 76.889 111.979C68.2758 125.609 65.6258 139.396 70.97 142.773Z", fill: "#F191FA", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M76.8602 112.001C79.353 108.055 82.0686 104.564 84.8088 101.664L94.3989 126.977C86.0698 138.949 75.925 145.933 70.9515 142.793C65.6033 139.413 68.2536 125.631 76.8692 111.994L76.8602 112.001Z", fill: "black" }), jsx("path", { d: "M96.2211 124.237C104.836 110.608 107.486 96.8249 102.138 93.4455L109.009 97.785C114.357 101.164 111.707 114.947 103.092 128.576C94.4778 142.205 83.1639 150.512 77.8146 147.141L70.9434 142.801C76.2916 146.181 87.6066 137.866 96.2211 124.237Z", fill: "#D8EFF4", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M98.2141 120.884C99.3274 118.901 100.309 116.925 101.153 115.003L108.025 119.342C107.181 121.264 106.2 123.233 105.085 125.224L98.2141 120.884Z", fill: "#F191FA" }), jsx("path", { d: "M102.311 112.191C104.156 107.325 105.052 102.898 104.877 99.4899L111.748 103.829C111.923 107.238 111.035 111.665 109.182 116.531L102.311 112.191Z", fill: "black" }), jsx("path", { d: "M96.2211 124.237C104.836 110.608 107.486 96.8249 102.138 93.4455L109.009 97.785C114.357 101.164 111.707 114.947 103.092 128.576C94.4778 142.205 83.1639 150.512 77.8146 147.141L70.9434 142.801C76.2916 146.181 87.6066 137.866 96.2211 124.237Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M341.833 142.899C353.278 131.542 356.039 115.768 348 107.668C339.962 99.5669 324.167 102.207 312.723 113.564C301.278 124.921 298.517 140.695 306.555 148.795C314.594 156.896 330.388 154.256 341.833 142.899Z", fill: "#F191FA", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M341.813 142.853C353.26 131.495 356.014 115.719 347.977 107.616L352.129 111.801C360.166 119.903 357.412 135.68 345.965 147.037C334.519 158.395 318.726 161.037 310.688 152.934L306.536 148.75C314.574 156.852 330.375 154.211 341.813 142.853Z", fill: "#96DAF4", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M344.451 139.969C345.913 138.216 347.189 136.39 348.264 134.524L352.416 138.709C351.341 140.575 350.065 142.4 348.603 144.153L344.451 139.969Z", fill: "#D8EFF4" }), jsx("path", { d: "M349.72 131.746C352.022 126.818 352.967 121.785 352.442 117.302L356.594 121.486C357.119 125.97 356.174 131.002 353.872 135.93L349.72 131.746Z", fill: "black" }), jsx("path", { d: "M341.813 142.853C353.26 131.495 356.014 115.719 347.977 107.616L352.129 111.801C360.166 119.903 357.412 135.68 345.965 147.037C334.519 158.395 318.726 161.037 310.688 152.934L306.536 148.75C314.574 156.852 330.375 154.211 341.813 142.853Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M155.769 157.057C169.703 165.169 185.654 163.751 191.396 153.888C197.138 144.026 190.497 129.454 176.563 121.342C162.629 113.229 146.679 114.648 140.937 124.51C135.195 134.373 141.836 148.944 155.769 157.057Z", fill: "#F191FA", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M155.809 157.026C169.744 165.14 185.695 163.714 191.439 153.852L188.473 158.946C182.729 168.808 166.778 170.234 152.843 162.12C138.908 154.006 132.266 139.436 138.01 129.574L140.976 124.48C135.232 134.342 141.876 148.919 155.809 157.026Z", fill: "#96DAF4", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M159.278 158.826C161.349 159.785 163.443 160.544 165.524 161.099L162.558 166.193C160.477 165.639 158.383 164.879 156.311 163.921L159.278 158.826Z", fill: "#D8EFF4" }), jsx("path", { d: "M168.585 161.786C173.941 162.733 179.047 162.342 183.241 160.674L180.275 165.768C176.08 167.436 170.975 167.827 165.619 166.88L168.585 161.786Z", fill: "black" }), jsx("path", { d: "M155.809 157.026C169.744 165.14 185.695 163.714 191.439 153.852L188.473 158.946C182.729 168.808 166.778 170.234 152.843 162.12C138.908 154.006 132.266 139.436 138.01 129.574L140.976 124.48C135.232 134.342 141.876 148.919 155.809 157.026Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M234.03 133.525C249.631 129.452 260.983 121.192 259.386 115.075C257.79 108.959 243.848 107.301 228.248 111.374C212.647 115.446 201.294 123.706 202.891 129.823C204.488 135.94 218.429 137.597 234.03 133.525Z", fill: "#F191FA", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M234.031 133.533C249.63 129.462 260.98 121.198 259.388 115.083L261.44 122.943C263.04 129.058 251.682 137.322 236.083 141.393C220.484 145.464 206.542 143.808 204.942 137.685L202.89 129.825C204.49 135.94 218.433 137.604 234.031 133.533Z", fill: "#D8EFF4", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M237.663 132.44C239.836 131.754 241.896 130.986 243.826 130.154L245.878 138.014C243.948 138.838 241.888 139.606 239.715 140.3L237.663 132.44Z", fill: "#F191FA" }), jsx("path", { d: "M246.588 128.896C251.257 126.601 254.941 123.976 257.13 121.367L259.182 129.227C256.985 131.836 253.309 134.461 248.64 136.756L246.588 128.896Z", fill: "black" }), jsx("path", { d: "M234.031 133.533C249.63 129.462 260.98 121.198 259.388 115.083L261.44 122.943C263.04 129.058 251.682 137.322 236.083 141.393C220.484 145.464 206.542 143.808 204.942 137.685L202.89 129.825C204.49 135.94 218.433 137.604 234.031 133.533Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M189.995 60.1335C175.063 54.0502 161.025 53.8648 158.64 59.7194C156.255 65.5739 166.426 75.2515 181.358 81.3348C196.29 87.418 210.328 87.6034 212.713 81.7488C215.098 75.8943 204.927 66.2167 189.995 60.1335Z", fill: "#F191FA", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M181.375 81.3031C196.307 87.3891 210.345 87.5729 212.731 81.7174L209.667 89.2437C207.281 95.0992 193.243 94.9154 178.311 88.8293C163.379 82.7433 153.208 73.0653 155.594 67.2098L158.658 59.6835C156.272 65.5391 166.443 75.217 181.375 81.3031Z", fill: "#D8EFF4", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M185.032 82.6694C187.186 83.4191 189.294 84.0389 191.339 84.5366L188.275 92.0629C186.23 91.5652 184.122 90.9454 181.968 90.1957L185.032 82.6694Z", fill: "#96DAF4" }), jsx("path", { d: "M194.301 85.1776C199.418 86.1391 203.932 86.2438 207.256 85.4671L204.192 92.9934C200.868 93.762 196.353 93.6654 191.237 92.7038L194.301 85.1776Z", fill: "black" }), jsx("path", { d: "M181.375 81.3031C196.307 87.3891 210.345 87.5729 212.731 81.7174L209.667 89.2437C207.281 95.0992 193.243 94.9154 178.311 88.8293C163.379 82.7433 153.208 73.0653 155.594 67.2098L158.658 59.6835C156.272 65.5391 166.443 75.217 181.375 81.3031Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M331.022 121.427C326.722 126.062 313.654 120.93 301.833 109.965C290.012 99 283.915 86.3538 288.214 81.719C292.513 77.0841 305.581 82.2158 317.402 93.1808C329.223 104.146 335.321 116.792 331.022 121.427Z", fill: "#F191FA", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M317.436 93.1948C314.014 90.0206 310.494 87.3431 307.102 85.2426L304.325 112.168C315.446 121.604 327.043 125.752 331.044 121.441C335.347 116.803 329.25 104.162 317.425 93.1905L317.436 93.1948Z", fill: "black" }), jsx("path", { d: "M301.861 109.987C290.039 99.0235 283.942 86.3817 288.244 81.7437L282.716 87.7004C278.413 92.3385 284.51 104.98 296.332 115.944C308.154 126.907 321.22 132.035 325.526 127.404L331.054 121.447C326.752 126.085 313.683 120.951 301.861 109.987Z", fill: "#D8EFF4", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M299.075 107.258C297.49 105.627 296.034 103.969 294.725 102.327L289.197 108.284C290.506 109.926 291.959 111.577 293.546 113.215L299.075 107.258Z", fill: "#F191FA" }), jsx("path", { d: "M292.885 99.9066C289.854 95.6761 287.853 91.6272 287.147 88.2883L281.619 94.2451C282.324 97.584 284.318 101.636 287.357 105.863L292.885 99.9066Z", fill: "black" }), jsx("path", { d: "M301.861 109.987C290.039 99.0235 283.942 86.3817 288.244 81.7437L282.716 87.7004C278.413 92.3385 284.51 104.98 296.332 115.944C308.154 126.907 321.22 132.035 325.526 127.404L331.054 121.447C326.752 126.085 313.683 120.951 301.861 109.987Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_4525_125520", x1: "191", y1: "124.403", x2: "247.716", y2: "304.676", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#AD48BA" }), jsx("stop", { offset: "0.65625", stopColor: "#D178FF", stopOpacity: "0.24" })] }) })] }) }) }));
-}
-
-function CoinInfo() {
-    const { t } = useTranslation();
-    const { connectLoaderState: { provider } } = useContext(ConnectLoaderContext);
-    const isPassport = isPassportProvider(provider);
-    const { page } = useAnalytics();
-    useEffect(() => {
-        page({
-            userJourney: UserJourney.WALLET,
-            screen: 'CoinInfo',
-        });
-    }, []);
-    return (jsxs(SimpleLayout, { testId: "coin-info", header: jsx(HeaderNavigation, { showBack: true, transparent: true }), footer: jsx(FooterLogo, {}), heroContent: jsx(IMXCoinsHero, {}), floatHeader: true, children: [!isPassport && (jsx(SimpleTextBody, { heading: t('views.COIN_INFO.metamask.heading'), children: t('views.COIN_INFO.metamask.body') })), isPassport && (jsxs(SimpleTextBody, { heading: t('views.COIN_INFO.passport.heading'), children: [t('views.COIN_INFO.passport.body1'), jsx(Link, { onClick: () => window.open(FAQS_LINK), children: t('views.COIN_INFO.passport.linkText') }), t('views.COIN_INFO.passport.body2')] }))] }));
-}
-
-const REFRESH_BALANCE_INTERVAL_MS = 30000; // 30 seconds -- keep app less chatty
-const useBalance = ({ checkout, provider, refreshCallback, errorCallback, }) => {
-    const [balancesLoading, setBalancesLoading] = useState(true);
-    const refreshBalances = useCallback(async (
-    // If silent is true, the balances will not be set to loading
-    silent = false) => {
-        if (!checkout || !provider)
-            return;
-        try {
-            const network = await checkout.getNetworkInfo({
-                provider,
-            });
-            /* If the provider's network is not supported, return out of this and let the
-            connect loader handle the switch network functionality */
-            if (!network.isSupported) {
-                return;
-            }
-            if (!silent) {
-                setBalancesLoading(true);
-            }
-            const balances = await getTokenBalances(checkout, provider, network.chainId);
-            if (!silent) {
-                setBalancesLoading(false);
-            }
-            refreshCallback(balances);
-            // Ignore errors given that this is a background refresh
-            // and the logic will retry anyways.
-        }
-        catch (error) {
-            if (DEFAULT_BALANCE_RETRY_POLICY.nonRetryable(error)) {
-                errorCallback(error);
-            }
-            if (!silent) {
-                setBalancesLoading(false);
-            }
-        }
-    }, [checkout, provider]);
-    useInterval(() => refreshBalances(true), REFRESH_BALANCE_INTERVAL_MS);
-    return {
-        balancesLoading,
-        refreshBalances,
-    };
-};
-
-function WalletWidget(props) {
-    const { t } = useTranslation();
-    const errorActionText = t('views.ERROR_VIEW.actionText');
-    const loadingText = t('views.LOADING_VIEW.text');
-    const { eventTargetState: { eventTarget }, } = useContext(EventTargetContext);
-    const { config: { environment, isOnRampEnabled, isSwapEnabled, isBridgeEnabled, }, } = props;
-    const { connectLoaderState: { checkout, provider }, } = useContext(ConnectLoaderContext);
-    const [viewState, viewDispatch] = useReducer(viewReducer, {
-        ...initialViewState,
-        history: [],
-    });
-    const [walletState, walletDispatch] = useReducer(walletReducer, initialWalletState);
-    const walletReducerValues = useMemo(() => ({ walletState, walletDispatch }), [walletState, walletDispatch]);
-    const viewReducerValues = useMemo(() => ({ viewState, viewDispatch }), [viewState, viewDispatch]);
-    const { balancesLoading, refreshBalances } = useBalance({
-        checkout,
-        provider,
-        refreshCallback: (balances) => {
-            walletDispatch({
-                payload: {
-                    type: WalletActions.SET_TOKEN_BALANCES,
-                    tokenBalances: balances,
-                },
-            });
-        },
-        errorCallback: (error) => {
-            // eslint-disable-next-line no-console
-            console.error(error);
-            viewDispatch({
-                payload: {
-                    type: ViewActions.UPDATE_VIEW,
-                    view: {
-                        type: SharedViews.ERROR_VIEW,
-                        error: new Error('Unable to fetch balances'),
-                    },
-                },
-            });
-        },
-    });
-    /* Set Config into WalletState */
-    useEffect(() => {
-        (async () => {
-            if (!checkout)
-                return;
-            let checkSwapAvailable;
-            try {
-                checkSwapAvailable = await checkout.isSwapAvailable();
-            }
-            catch (err) {
-                checkSwapAvailable = false;
-            }
-            walletDispatch({
-                payload: {
-                    type: WalletActions.SET_SUPPORTED_TOP_UPS,
-                    supportedTopUps: {
-                        isBridgeEnabled,
-                        isSwapEnabled,
-                        isOnRampEnabled,
-                        isSwapAvailable: checkSwapAvailable,
-                    },
-                },
-            });
-        })();
-    }, [isBridgeEnabled, isSwapEnabled, isOnRampEnabled, environment]);
-    const initialiseWallet = async () => {
-        if (!checkout || !provider)
-            return;
-        try {
-            const network = await checkout.getNetworkInfo({
-                provider,
-            });
-            /* If the provider's network is not supported, return out of this and let the
-            connect loader handle the switch network functionality */
-            if (!network.isSupported) {
-                return;
-            }
-            /** Fetch the user's balances based on their connected provider and correct network */
-            refreshBalances();
-            viewDispatch({
-                payload: {
-                    type: ViewActions.UPDATE_VIEW,
-                    view: { type: WalletWidgetViews.WALLET_BALANCES },
-                },
-            });
-            walletDispatch({
-                payload: {
-                    type: WalletActions.SET_NETWORK,
-                    network,
-                },
-            });
-        }
-        catch (error) {
-            viewDispatch({
-                payload: {
-                    type: ViewActions.UPDATE_VIEW,
-                    view: {
-                        type: SharedViews.ERROR_VIEW,
-                        error,
-                    },
-                },
-            });
-        }
-    };
-    useEffect(() => {
-        if (!checkout || !provider)
-            return;
-        initialiseWallet();
-    }, [checkout, provider]);
-    const errorAction = async () => {
-        viewDispatch({
-            payload: {
-                type: ViewActions.UPDATE_VIEW,
-                view: { type: WalletWidgetViews.WALLET_BALANCES },
-            },
-        });
-        await initialiseWallet();
-    };
-    return (jsx(ViewContext.Provider, { value: viewReducerValues, children: jsx(CryptoFiatProvider, { environment: environment, children: jsxs(WalletContext.Provider, { value: walletReducerValues, children: [viewState.view.type === SharedViews.LOADING_VIEW && (jsx(LoadingView, { loadingText: loadingText })), viewState.view.type === WalletWidgetViews.WALLET_BALANCES && (jsx(WalletBalances, { balancesLoading: balancesLoading })), viewState.view.type === WalletWidgetViews.SETTINGS && jsx(Settings, {}), viewState.view.type === WalletWidgetViews.COIN_INFO && (jsx(CoinInfo, {})), viewState.view.type === SharedViews.ERROR_VIEW && (jsx(ErrorView, { actionText: errorActionText, onActionClick: errorAction, onCloseClick: () => sendWalletWidgetCloseEvent(eventTarget) })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx(TopUpView, { analytics: { userJourney: UserJourney.WALLET }, widgetEvent: IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, checkout: checkout, provider: provider, showOnrampOption: isOnRampEnabled, showSwapOption: isSwapEnabled, showBridgeOption: isBridgeEnabled, onCloseButtonClick: () => sendWalletWidgetCloseEvent(eventTarget) }))] }) }) }));
-}
-
-export { WalletWidget as default };