@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.6

package/_esm/components/Header/NavigationHeader.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { default as ArrowBackIcon } from '@mui/icons-material/ArrowBack';
+import { default as ReceiptLongIcon } from '@mui/icons-material/ReceiptLong';
+import { Box, Tooltip, Typography } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import { useTranslation } from 'react-i18next';
+import { Route, Routes, useLocation } from 'react-router-dom';
+import { useAccount, useNavigateBack } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { useHeaderStore } from '../../stores';
+import { HiddenUI } from '../../types';
+import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../../utils';
+import { HeaderAppBar, HeaderControlsContainer } from './Header.style';
+import { NavigationTabs } from './NavigationTabs';
+import { SettingsButton } from './SettingsButton';
+import { WalletMenuButton } from './WalletHeader';
+export const TransactionHistoryButton = () => {
+    const { t } = useTranslation();
+    const { navigate } = useNavigateBack();
+    return (_jsx(Tooltip, { title: t(`header.transactionHistory`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.transactionHistory), children: _jsx(ReceiptLongIcon, {}) }) }));
+};
+export const NavigationHeader = () => {
+    const { t } = useTranslation();
+    const { subvariant, hiddenUI, variant } = useWidgetConfig();
+    const { navigateBack } = useNavigateBack();
+    const { account } = useAccount();
+    const { element, title } = useHeaderStore((state) => state);
+    const { pathname } = useLocation();
+    const cleanedPathname = pathname.endsWith('/')
+        ? pathname.slice(0, -1)
+        : pathname;
+    const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
+    const hasPath = navigationRoutesValues.includes(path);
+    const splitSubvariant = subvariant === 'split' && !hasPath;
+    const handleHeaderTitle = () => {
+        switch (path) {
+            case navigationRoutes.selectWallet:
+                return t(`header.selectWallet`);
+            case navigationRoutes.settings:
+                return t(`header.settings`);
+            case navigationRoutes.bridges:
+                return t(`settings.enabledBridges`);
+            case navigationRoutes.exchanges:
+                return t(`settings.enabledExchanges`);
+            case navigationRoutes.languages:
+                return t(`language.title`);
+            case navigationRoutes.transactionHistory:
+                return t(`header.transactionHistory`);
+            case navigationRoutes.fromToken: {
+                if (subvariant === 'nft') {
+                    return t(`header.payWith`);
+                }
+                return t(`header.from`);
+            }
+            case navigationRoutes.toToken:
+                return t(`header.to`);
+            case navigationRoutes.fromChain:
+            case navigationRoutes.toChain:
+            case navigationRoutes.toTokenNative:
+                return t(`header.selectChain`);
+            case navigationRoutes.routes:
+                return t(`header.youGet`);
+            case navigationRoutes.activeTransactions:
+                return t(`header.activeTransactions`);
+            case navigationRoutes.transactionExecution: {
+                if (subvariant === 'nft') {
+                    return t(`header.purchase`);
+                }
+                return t(`header.exchange`);
+            }
+            case navigationRoutes.transactionDetails: {
+                if (subvariant === 'nft') {
+                    return t(`header.purchaseDetails`);
+                }
+                return t(`header.transactionDetails`);
+            }
+            default: {
+                switch (subvariant) {
+                    case 'nft':
+                        return t(`header.checkout`);
+                    case 'refuel':
+                        return t(`header.gas`);
+                    default:
+                        return t(`header.exchange`);
+                }
+            }
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(HeaderAppBar, { elevation: 0, children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: _jsx(ArrowBackIcon, {}) })) : null, splitSubvariant ? (_jsx(Box, { flex: 1, children: !hiddenUI?.includes(HiddenUI.WalletMenu) ? (_jsx(WalletMenuButton, {})) : null })) : (_jsx(Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: title || handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(HeaderControlsContainer, { paddingRight: variant === 'drawer' && subvariant === 'split' ? 5 : 0, children: [account.isConnected &&
+                                            !hiddenUI?.includes(HiddenUI.History) ? (_jsx(TransactionHistoryButton, {})) : null, _jsx(SettingsButton, {})] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] }), splitSubvariant ? _jsx(NavigationTabs, {}) : null] }));
+};

package/_esm/components/Header/NavigationTabs.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { FormKey } from '../../providers';
+import { useSplitSubvariantStore } from '../../stores';
+import { HeaderAppBar, SplitTabs } from './Header.style';
+import { Tab } from '../Tabs';
+export const NavigationTabs = () => {
+    const { t } = useTranslation();
+    const [state, setState] = useSplitSubvariantStore((state) => [
+        state.state,
+        state.setState,
+    ]);
+    const { setValue } = useFormContext();
+    const handleChange = (_, value) => {
+        setValue(FormKey.FromAmount, '');
+        setValue(FormKey.FromToken, '');
+        setValue(FormKey.ToToken, '');
+        setState(value === 0 ? 'swap' : 'bridge');
+    };
+    return (_jsx(HeaderAppBar, { elevation: 0, sx: { py: 1 }, children: _jsxs(SplitTabs, { value: state === 'swap' ? 0 : 1, onChange: handleChange, "aria-label": "tabs", indicatorColor: "primary", children: [_jsx(Tab, { label: t('header.swap'), disableRipple: true }), _jsx(Tab, { label: t('header.bridge'), disableRipple: true })] }) }));
+};

package/_esm/components/Header/SettingsButton.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { default as SettingsIcon } from '@mui/icons-material/Settings';
+import { Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigateBack, useSettingMonitor } from '../../hooks';
+import { navigationRoutes } from '../../utils';
+import { SettingsIconBadge, SettingsIconButton } from './SettingsButton.style';
+export const SettingsButton = () => {
+    const { t } = useTranslation();
+    const { navigate } = useNavigateBack();
+    const { isCustomRouteSettings, isRouteSettingsWithWarnings } = useSettingMonitor();
+    const variant = isRouteSettingsWithWarnings
+        ? 'warning'
+        : isCustomRouteSettings
+            ? 'info'
+            : undefined;
+    const tooltipMessage = variant
+        ? t(`tooltip.settingsModified`)
+        : t(`header.settings`);
+    return (_jsx(Tooltip, { title: tooltipMessage, enterDelay: 400, arrow: true, children: _jsx(SettingsIconButton, { size: "medium", onClick: () => navigate(navigationRoutes.settings), variant: variant, children: variant ? (_jsx(SettingsIconBadge, { variant: "dot", color: variant, children: _jsx(SettingsIcon, {}) })) : (_jsx(SettingsIcon, {})) }) }));
+};

package/_esm/components/Header/SettingsButton.style.js

@@ -0,0 +1,41 @@
+import { Badge as MuiBadge } from '@mui/material';
+import { badgeClasses } from '@mui/material/Badge';
+import IconButton from '@mui/material/IconButton';
+import { darken, styled } from '@mui/material/styles';
+import { getInfoBackgroundColor, getWarningBackgroundColor } from '../../utils';
+export const SettingsIconBadge = styled(MuiBadge)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1.25),
+    [`.${badgeClasses.badge}`]: {
+        width: 10,
+        height: 10,
+        borderRadius: '50%',
+        transform: 'translate(70%, -70%)',
+    },
+}));
+export const SettingsIconButton = styled(IconButton, {
+    shouldForwardProp: (props) => props !== 'variant',
+})(({ theme, variant }) => {
+    const variantStyles = {
+        info: {
+            backgroundColor: getInfoBackgroundColor(theme),
+            '&:hover': {
+                backgroundColor: darken(getInfoBackgroundColor(theme), 0.2),
+            },
+        },
+        warning: {
+            backgroundColor: getWarningBackgroundColor(theme),
+            '&:hover': {
+                backgroundColor: darken(getWarningBackgroundColor(theme), 0.2),
+            },
+        },
+        default: {
+            marginRight: theme.spacing(-1.25),
+        },
+    };
+    return {
+        borderRadius: 20,
+        ...variantStyles[variant ?? 'default'],
+    };
+});

package/_esm/components/Header/WalletHeader.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { default as ExpandMoreIcon } from '@mui/icons-material/ExpandMore';
+import { default as WalletIcon } from '@mui/icons-material/Wallet';
+import { Avatar, Badge } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useAccount, useChain } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { navigationRoutes, shortenAddress } from '../../utils';
+import { SmallAvatar } from '../SmallAvatar';
+import { DrawerWalletContainer, HeaderAppBar, WalletButton, } from './Header.style';
+import { WalletMenu } from './WalletMenu';
+import { WalletMenuContainer } from './WalletMenu.style';
+export const WalletHeader = () => {
+    return (_jsx(HeaderAppBar, { elevation: 0, sx: { justifyContent: 'flex-end' }, children: _jsx(WalletMenuButton, {}) }));
+};
+export const WalletMenuButton = () => {
+    const { account } = useAccount();
+    const { variant } = useWidgetConfig();
+    if (variant === 'drawer') {
+        return (_jsx(DrawerWalletContainer, { children: account.isConnected ? (_jsx(ConnectedButton, { account: account })) : (_jsx(ConnectButton, {})) }));
+    }
+    return account.isConnected ? (_jsx(ConnectedButton, { account: account })) : (_jsx(ConnectButton, {}));
+};
+const ConnectButton = () => {
+    const { t } = useTranslation();
+    const { pathname } = useLocation();
+    const { walletManagement, subvariant, variant } = useWidgetConfig();
+    const navigate = useNavigate();
+    const connect = async () => {
+        if (walletManagement) {
+            await walletManagement.connect();
+            return;
+        }
+        navigate(navigationRoutes.selectWallet);
+    };
+    return (_jsx(WalletButton, { endIcon: variant !== 'drawer' && subvariant !== 'split' ? (_jsx(WalletIcon, {})) : undefined, startIcon: variant === 'drawer' || subvariant === 'split' ? (_jsx(WalletIcon, { sx: { marginLeft: -0.25 } })) : undefined, onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined, sx: {
+            marginRight: subvariant === 'split' ? 0 : -1.25,
+            marginLeft: subvariant === 'split' ? -1.25 : 0,
+        }, children: t(`button.connectWallet`) }));
+};
+const ConnectedButton = ({ account }) => {
+    const { subvariant } = useWidgetConfig();
+    const { chain } = useChain(account.chainId);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const walletAddress = shortenAddress(account.address);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const avatar = (_jsx(Avatar, { src: account.connector?.icon, alt: account.connector?.name, sx: { width: 24, height: 24 }, children: account.connector?.name[0] }));
+    return (_jsxs(_Fragment, { children: [_jsx(WalletButton, { endIcon: _jsx(ExpandMoreIcon, {}), startIcon: chain?.logoURI ? (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(SmallAvatar, { src: chain?.logoURI, alt: chain?.name, children: chain?.name[0] }), children: avatar })) : (avatar), sx: {
+                    marginRight: subvariant === 'split' ? 0 : -1.25,
+                    marginLeft: subvariant === 'split' ? -1 : 0,
+                }, onClick: handleClick, children: walletAddress }), _jsx(WalletMenuContainer, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: _jsx(WalletMenu, { onClose: handleClose }) })] }));
+};

package/_esm/components/Header/WalletMenu.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChainType } from '@lifi/sdk';
+import { default as ContentCopyIcon } from '@mui/icons-material/ContentCopyRounded';
+import { default as OpenInNewIcon } from '@mui/icons-material/OpenInNewRounded';
+import { default as PowerSettingsNewIcon } from '@mui/icons-material/PowerSettingsNewRounded';
+import { Avatar, Badge, Box, Button, IconButton, MenuItem, } from '@mui/material';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useDisconnect } from 'wagmi';
+import { useAccount, useAvailableChains } from '../../hooks';
+import { navigationRoutes, shortenAddress } from '../../utils';
+import { SmallAvatar } from '../SmallAvatar';
+export const WalletMenu = ({ onClose }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { pathname } = useLocation();
+    const { accounts } = useAccount();
+    const { getChainById } = useAvailableChains();
+    const connect = async () => {
+        navigate(navigationRoutes.selectWallet);
+        onClose();
+    };
+    return (_jsxs(Box, { children: [_jsx(Box, { display: "flex", flexDirection: "column", children: accounts
+                    .filter((account) => account.isConnected)
+                    .map((account) => {
+                    const chain = getChainById(account.chainId);
+                    const walletAddress = shortenAddress(account.address);
+                    const handleCopyAddress = async () => {
+                        await navigator.clipboard.writeText(account.address ?? '');
+                        onClose();
+                    };
+                    const avatar = (_jsx(Avatar, { src: account.connector?.icon, alt: account.connector?.name, sx: {
+                            width: 32,
+                            height: 32,
+                            marginRight: chain?.logoURI ? 0 : 1.5,
+                        }, children: account.connector?.name[0] }));
+                    return (_jsxs(MenuItem, { children: [_jsxs(Box, { flex: 1, display: "flex", alignItems: "center", children: [chain?.logoURI ? (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(SmallAvatar, { src: chain?.logoURI, alt: chain?.name, children: chain?.name[0] }), sx: { marginRight: 1.5 }, children: avatar })) : (avatar), walletAddress] }), _jsxs(Box, { ml: 1, children: [_jsx(IconButton, { size: "medium", onClick: handleCopyAddress, children: _jsx(ContentCopyIcon, {}) }), _jsx(IconButton, { size: "medium", component: "a", onClick: onClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", children: _jsx(OpenInNewIcon, {}) }), account.chainType === ChainType.EVM ? (_jsx(EVMDisconnectIconButton, { connector: account.connector })) : account.chainType === ChainType.SVM ? (_jsx(SVMDisconnectIconButton, {})) : null] })] }, account.address));
+                }) }), !pathname.includes(navigationRoutes.selectWallet) ? (_jsx(Button, { onClick: connect, fullWidth: true, startIcon: _jsx(PowerSettingsNewIcon, {}), sx: {
+                    marginTop: 1,
+                }, children: accounts.filter((account) => account.isConnected).length > 1
+                    ? t(`button.changeWallet`)
+                    : t(`button.connectWallet`) })) : null] }));
+};
+const EVMDisconnectIconButton = ({ connector }) => {
+    const { disconnect } = useDisconnect();
+    return (_jsx(IconButton, { size: "medium", onClick: (e) => {
+            e.stopPropagation();
+            disconnect({ connector });
+        }, children: _jsx(PowerSettingsNewIcon, {}) }));
+};
+const SVMDisconnectIconButton = () => {
+    const { disconnect } = useWallet();
+    return (_jsx(IconButton, { size: "medium", onClick: (e) => {
+            e.stopPropagation();
+            disconnect();
+        }, children: _jsx(PowerSettingsNewIcon, {}) }));
+};

package/_esm/components/Header/WalletMenu.style.js

@@ -0,0 +1,24 @@
+import { Menu as MuiMenu } from '@mui/material';
+import { menuClasses } from '@mui/material/Menu';
+import { menuItemClasses } from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
+import { svgIconClasses } from '@mui/material/SvgIcon';
+export const WalletMenuContainer = styled(MuiMenu)(({ theme }) => ({
+    [`& .${menuClasses.paper}`]: {
+        borderRadius: theme.shape.borderRadius,
+        color: theme.palette.text.primary,
+        boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',
+        padding: theme.spacing(2),
+        [`& .${menuClasses.list}`]: {
+            padding: 0,
+        },
+        [`& .${menuItemClasses.root}`]: {
+            borderRadius: theme.shape.borderRadiusSecondary,
+            padding: theme.spacing(1, 2, 1, 1),
+            [`& .${svgIconClasses.root}`]: {
+                fontSize: 20,
+                color: theme.palette.text.primary,
+            },
+        },
+    },
+}));

package/_esm/components/Initializer.js

@@ -0,0 +1,5 @@
+import { useInitializer } from '../hooks';
+export const Initializer = () => {
+    useInitializer();
+    return null;
+};

package/_esm/components/Input.js

@@ -0,0 +1,14 @@
+import { InputBase } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
+export const Input = styled(InputBase)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.background.paper,
+    paddingRight: theme.spacing(2),
+    [`.${inputBaseClasses.input}`]: {
+        padding: theme.spacing(1.5, 1, 1.5, 2),
+        height: '2.875em',
+        boxSizing: 'inherit',
+    },
+}));

package/_esm/components/Insurance/Insurance.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RouteExecutionStatus } from '../../stores';
+import { InsuranceCard } from './InsuranceCard';
+import { InsuranceCollapsed } from './InsuranceCollapsed';
+export const Insurance = ({ status, insurableRouteId, onChange, ...props }) => {
+    return status === RouteExecutionStatus.Idle ? (_jsx(InsuranceCollapsed, { status: status, insurableRouteId: insurableRouteId, onChange: onChange, ...props })) : (_jsx(InsuranceCard, { status: status, ...props }));
+};

package/_esm/components/Insurance/InsuranceCard.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { default as ExpandLessIcon } from '@mui/icons-material/ExpandLess';
+import { default as ExpandMoreIcon } from '@mui/icons-material/ExpandMore';
+import { default as VerifiedUserIcon } from '@mui/icons-material/VerifiedUser';
+import { Box, Collapse, Link, Typography } from '@mui/material';
+import { useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { InsuraceLogo } from '../../icons';
+import { RouteExecutionStatus } from '../../stores';
+import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
+import { Switch } from '../Switch';
+export const InsuranceCard = ({ status, feeAmountUsd, insuredAmount, insuredTokenSymbol, insuranceCoverageId, onChange, ...props }) => {
+    const { t } = useTranslation();
+    const [enabled, setEnabled] = useState(false);
+    const [cardExpanded, setCardExpanded] = useState(status === RouteExecutionStatus.Idle);
+    const handleExpand = (e) => {
+        e.stopPropagation();
+        setCardExpanded((expanded) => !expanded);
+    };
+    const handleSwitch = (_, checked) => {
+        setEnabled(checked);
+        onChange?.(checked);
+    };
+    return (_jsxs(Card, { selectionColor: "secondary", indented: true, ...props, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsxs(CardLabel, { type: 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), _jsx(CardLabelTypography, { type: "icon", children: status === RouteExecutionStatus.Idle
+                                    ? t('main.tags.insurance')
+                                    : t('main.tags.insured') })] }), status === RouteExecutionStatus.Idle ? (_jsx(Switch, { onChange: handleSwitch, value: enabled })) : (_jsx(Box, { my: -0.5, children: _jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }) }))] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { mt: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
+                                        value: feeAmountUsd,
+                                    }) }), _jsx(InsuraceLogo, {})] }), _jsxs(Box, { children: [_jsx(Typography, { fontSize: 14, children: _jsx(Trans, { i18nKey: status === RouteExecutionStatus.Idle
+                                            ? 'insurance.insure'
+                                            : 'insurance.insured', values: {
+                                            amount: insuredAmount,
+                                            tokenSymbol: insuredTokenSymbol,
+                                        }, components: [_jsx("strong", {})] }) }), _jsx(Collapse, { timeout: 225, in: enabled || status !== RouteExecutionStatus.Idle, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { sx: {
+                                            listStyleType: 'disc',
+                                            pl: 2,
+                                        }, children: [_jsx(Typography, { fontSize: 14, display: "list-item", children: t('insurance.bridgeExploits') }), _jsx(Typography, { fontSize: 14, display: "list-item", children: t('insurance.slippageError') })] }) }), _jsx(Link, { href: status === RouteExecutionStatus.Idle
+                                        ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
+                                        : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: _jsx(Typography, { pt: 0.5, color: "primary", fontSize: 14, fontWeight: 600, children: status === RouteExecutionStatus.Idle
+                                            ? t('button.learnMore')
+                                            : t('button.viewCoverage') }) })] })] }) })] }));
+};

package/_esm/components/Insurance/InsuranceCollapsed.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Collapse } from '@mui/material';
+import { useRoutes } from '../../hooks';
+import { RouteExecutionStatus, useRouteExecutionStore, useSetExecutableRoute, } from '../../stores';
+import { formatTokenAmount } from '../../utils';
+import { InsuranceCard } from './InsuranceCard';
+export const InsuranceCollapsed = ({ status, insurableRouteId, onChange, ...props }) => {
+    const setExecutableRoute = useSetExecutableRoute();
+    const routeExecution = useRouteExecutionStore((state) => state.routes[insurableRouteId]);
+    const { routes } = useRoutes({
+        insurableRoute: routeExecution?.route,
+    });
+    const insuredRoute = routes?.[0];
+    const toggleInsurance = (checked) => {
+        if (insuredRoute) {
+            if (checked) {
+                setExecutableRoute(insuredRoute, insurableRouteId);
+            }
+            onChange?.(checked ? insuredRoute.id : insurableRouteId);
+        }
+    };
+    if (!insuredRoute) {
+        return null;
+    }
+    return (_jsx(Collapse, { timeout: 225, in: insuredRoute.insurance.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === RouteExecutionStatus.Idle, children: _jsx(InsuranceCard, { ...props, status: status, insuredAmount: formatTokenAmount(BigInt(insuredRoute.toAmountMin), insuredRoute.toToken.decimals), insuredTokenSymbol: insuredRoute.toToken.symbol, onChange: toggleInsurance }) }));
+};

package/_esm/components/Insurance/types.js

@@ -0,0 +1 @@
+export {};

package/_esm/components/ListItemButton.js

@@ -0,0 +1,11 @@
+import { ListItemButton as MuiListItemButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../utils';
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadius,
+    paddingLeft: theme.spacing(1.5),
+    height: 56,
+    '&:hover': {
+        backgroundColor: getContrastAlphaColor(theme.palette.mode, '4%'),
+    },
+}));

package/_esm/components/ListItemText.js

@@ -0,0 +1,8 @@
+import { ListItemText as MuiListItemText } from '@mui/material';
+import { listItemTextClasses } from '@mui/material/ListItemText';
+import { styled } from '@mui/material/styles';
+export const ListItemText = styled(MuiListItemText)(({ theme }) => ({
+    [`.${listItemTextClasses.primary}`]: {
+        fontWeight: 400,
+    },
+}));

package/_esm/components/NFT/NFT.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { FormKey } from '../../providers';
+import { NFTBase } from './NFTBase';
+export const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, token, contract, }) => {
+    const { setValue } = useFormContext();
+    useEffect(() => {
+        if (token) {
+            setValue(FormKey.ToChain, token.chainId, { shouldTouch: true });
+            setValue(FormKey.ToToken, token.address, { shouldTouch: true });
+            setValue(FormKey.ToAmount, token.amount?.toString(), {
+                shouldTouch: true,
+            });
+        }
+        if (contract) {
+            setValue(FormKey.ToContractAddress, contract.address, {
+                shouldTouch: true,
+            });
+            setValue(FormKey.ToContractCallData, contract.callData, {
+                shouldTouch: true,
+            });
+            setValue(FormKey.ToContractGasLimit, contract.gasLimit, {
+                shouldTouch: true,
+            });
+        }
+    }, [contract, setValue, token]);
+    return (_jsx(NFTBase, { isLoading: isLoading, imageUrl: imageUrl, collectionName: collectionName, assetName: assetName, owner: owner, token: token }));
+};

package/_esm/components/NFT/NFT.style.js

@@ -0,0 +1,8 @@
+import { Avatar } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const PreviewAvatar = styled(Avatar)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    width: 96,
+    height: 96,
+    borderRadius: theme.shape.borderRadius,
+}));

package/_esm/components/NFT/NFTBase.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Link, Skeleton, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Token } from '../Token';
+import { PreviewAvatar } from './NFT.style';
+export const NFTBase = ({ imageUrl, isLoading, collectionName, assetName, owner, token, }) => {
+    const { t } = useTranslation();
+    return (_jsxs(Box, { p: 2, children: [_jsxs(Box, { display: "flex", children: [isLoading ? (_jsx(Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : (_jsx(PreviewAvatar, { src: imageUrl })), _jsxs(Box, { ml: 2, children: [isLoading ? (_jsx(Skeleton, { width: 144, height: 21, variant: "text" })) : (_jsx(Typography, { fontSize: 14, color: "text.secondary", children: collectionName })), isLoading ? (_jsx(Skeleton, { width: 112, height: 27, variant: "text" })) : (_jsx(Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? (_jsx(Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? (_jsxs(Typography, { fontSize: 14, color: "text.secondary", children: [t('main.ownedBy'), ' ', _jsx(Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), _jsx(Token, { token: token, isLoading: isLoading, mt: 2 })] }));
+};

package/_esm/components/NFT/types.js

@@ -0,0 +1 @@
+export {};

package/_esm/components/NotFound.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { default as BlockIcon } from '@mui/icons-material/Block';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+export const NotFound = () => {
+    const { t } = useTranslation();
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            flex: 1,
+            padding: 3,
+        }, children: [_jsx(Typography, { fontSize: 48, children: _jsx(BlockIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('tooltip.notFound.title') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('tooltip.notFound.text') })] }));
+};

package/_esm/components/PoweredBy/PoweredBy.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Tooltip, Typography } from '@mui/material';
+import { useLocation } from 'react-router-dom';
+import { version } from '../../config/version';
+import { useWidgetConfig } from '../../providers';
+import { HiddenUI } from '../../types';
+import { navigationRoutes } from '../../utils';
+import { Link } from './PoweredBy.style';
+export const PoweredBy = () => {
+    const { hiddenUI } = useWidgetConfig();
+    const { pathname } = useLocation();
+    if (pathname.includes(navigationRoutes.fromToken) ||
+        pathname.includes(navigationRoutes.toToken) ||
+        pathname.includes(navigationRoutes.transactionHistory)) {
+        return null;
+    }
+    return (_jsx(Box, { px: 3, pt: 1, pb: hiddenUI?.includes(HiddenUI.PoweredBy) ? 1 : 2, sx: {
+            display: 'flex',
+            alignItems: 'flex-end',
+            justifyContent: 'flex-end',
+        }, children: !hiddenUI?.includes(HiddenUI.PoweredBy) ? (_jsx(Tooltip, { title: `v${version}`, placement: "top", enterDelay: 1000, arrow: true, children: _jsxs(Link, { href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary", children: [_jsx(Typography, { color: "text.secondary", fontSize: 12, fontWeight: 500, px: 0.5, children: "Powered by" }), _jsx(Typography, { color: "text.primary", fontSize: 12, fontWeight: 500, children: "LI.FI" })] }) })) : null }));
+};

package/_esm/components/PoweredBy/PoweredBy.style.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Link: import("@emotion/styled").StyledComponent<import("@mui/material").LinkOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "style" | "className" | "align" | "classes" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping" | "TypographyClasses" | "underline"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/_esm/components/PoweredBy/PoweredBy.style.js

@@ -0,0 +1,10 @@
+import { Link as MuiLink } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const Link = styled(MuiLink)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    border: 'none',
+    ':hover': {
+        color: theme.palette.primary.main,
+    },
+}));

package/_esm/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CircularProgress, IconButton, Tooltip } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { Trans } from 'react-i18next';
+const getProgressValue = (updatedAt, timeToUpdate) => updatedAt
+    ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100)
+    : 0;
+const getSecondsToUpdate = (updatedAt, timeToUpdate) => Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0);
+export const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {
+    const [value, setValue] = useState(() => getProgressValue(updatedAt, timeToUpdate));
+    useEffect(() => {
+        setValue(getProgressValue(updatedAt, timeToUpdate));
+        const id = setInterval(() => {
+            const time = getProgressValue(updatedAt, timeToUpdate);
+            setValue(time);
+            if (time >= 100) {
+                clearInterval(id);
+            }
+        }, 1000);
+        return () => clearInterval(id);
+    }, [timeToUpdate, updatedAt]);
+    useEffect(() => {
+        if (isLoading) {
+            setValue(0);
+        }
+    }, [isLoading]);
+    return (_jsx(IconButton, { onClick: onClick, disabled: isLoading, ...other, children: _jsx(Tooltip, { title: _jsx(Trans, { i18nKey: "tooltip.progressToNextUpdate", values: {
+                    value: getSecondsToUpdate(updatedAt, timeToUpdate),
+                }, components: [_jsx("br", {})] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { sx: {
+                    display: 'grid',
+                    position: 'relative',
+                    placeItems: 'center',
+                    width: 24,
+                    height: 24,
+                }, children: [_jsx(CircularProgress, { variant: "determinate", size: 24, value: 100, sx: (theme) => ({
+                            position: 'absolute',
+                            color: theme.palette.mode === 'light'
+                                ? theme.palette.grey[300]
+                                : theme.palette.grey[800],
+                        }) }), _jsx(CircularProgress, { variant: isLoading ? 'indeterminate' : 'determinate', size: 24, value: value, sx: (theme) => ({
+                            opacity: value === 100 && !isLoading ? 0.5 : 1,
+                            color: theme.palette.mode === 'light'
+                                ? theme.palette.primary.main
+                                : theme.palette.primary.light,
+                        }) })] }) }) }));
+};