@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/components/GasMessage/GasSufficiencyMessage.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import EvStationIcon from '@mui/icons-material/EvStation';
 import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
 import { WarningMessageCard, WarningMessageCardTitle, } from './GasMessage.style';
 export const GasSufficiencyMessage = ({ insufficientGas, }) => {
     const { t } = useTranslation();
@@ -10,7 +11,7 @@ export const GasSufficiencyMessage = ({ insufficientGas, }) => {
                         } }), _jsx(Typography, { variant: "body2", fontWeight: 700, children: t(`warning.title.insufficientGas`) })] }), _jsx(Typography, { variant: "body2", px: 2, pt: 1, children: t(`warning.message.insufficientGas`) }), insufficientGas?.map((item, index) => (_jsx(Typography
             // eslint-disable-next-line react/no-array-index-key
             , { variant: "body2", px: 2, pb: insufficientGas?.length - 1 === index ? 2 : 0, pt: 0.5, children: t(`main.tokenOnChainAmount`, {
-                    amount: item.insufficientAmount?.toString(),
+                    amount: formatUnits(item.insufficientAmount ?? 0n, item.token.decimals),
                     tokenSymbol: item.token.symbol,
                     chainName: item.chain?.name,
                 }) }, index)))] }));

package/components/Header/Header.style.d.ts

@@ -13,3 +13,11 @@ export declare const WalletButton: import("@emotion/styled").StyledComponent<imp
 export declare const DrawerWalletContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const HeaderControlsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SplitTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "className" | "style" | "classes" | "action" | "children" | "sx" | "aria-label" | "aria-labelledby" | "onChange" | "variant" | "value" | "slots" | "slotProps" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
+    component?: import("react").ElementType<any> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/Header/Header.style.js

@@ -1,6 +1,7 @@
-import { AppBar, Box, Button } from '@mui/material';
+import { AppBar, Box, Button, badgeClasses } from '@mui/material';
 import { buttonClasses } from '@mui/material/Button';
 import { alpha, styled } from '@mui/material/styles';
+import { Tabs } from '../Tabs';
 export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
     backgroundColor: 'transparent',
     color: theme.palette.text.primary,
@@ -42,6 +43,11 @@ export const WalletButton = styled(Button)(({ theme }) => ({
     [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {
         fontSize: '24px',
     },
+    [`&:hover .${badgeClasses.badge} > div`]: {
+        borderColor: theme.palette.mode === 'light'
+            ? alpha(theme.palette.common.black, 0.04)
+            : alpha(theme.palette.common.white, 0.08),
+    },
 }));
 export const DrawerWalletContainer = styled(Box)(() => ({
     width: '100%',
@@ -51,3 +57,12 @@ export const DrawerWalletContainer = styled(Box)(() => ({
         marginLeft: '-0.5rem',
     },
 }));
+export const HeaderControlsContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(0.5),
+}));
+export const SplitTabs = styled(Tabs)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'dark'
+        ? theme.palette.background.paper
+        : alpha(theme.palette.common.black, 0.04),
+}));

package/components/Header/NavigationHeader.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
+export declare const TransactionHistoryButton: () => import("react/jsx-runtime").JSX.Element;
 export declare const NavigationHeader: React.FC;

package/components/Header/NavigationHeader.js

@@ -1,23 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
-import SettingsIcon from '@mui/icons-material/Settings';
 import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
-import { useNavigateBack } from '../../hooks';
-import { useWallet, useWidgetConfig } from '../../providers';
+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 } from './Header.style';
+import { HeaderAppBar, HeaderControlsContainer } from './Header.style';
 import { NavigationTabs } from './NavigationTabs';
 import { WalletMenuButton } from './WalletHeader';
+import { SettingsButton } from './SettingsButton';
+import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
+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 { navigate, navigateBack } = useNavigateBack();
-    const { account } = useWallet();
+    const { navigateBack } = useNavigateBack();
+    const { account } = useAccount();
     const { element, title } = useHeaderStore((state) => state);
     const { pathname } = useLocation();
     const cleanedPathname = pathname.endsWith('/')
@@ -36,6 +41,8 @@ export const NavigationHeader = () => {
                 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: {
@@ -78,7 +85,6 @@ export const NavigationHeader = () => {
             }
         }
     };
-    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(Box, { paddingRight: variant === 'drawer' && subvariant === 'split' ? 5 : 0, children: [account.isActive && !hiddenUI?.includes(HiddenUI.History) ? (_jsx(Tooltip, { title: t(`header.transactionHistory`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.transactionHistory), children: _jsx(ReceiptLongIcon, {}) }) })) : null, _jsx(Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", onClick: () => navigate(navigationRoutes.settings), sx: {
-                                                    marginRight: -1.25,
-                                                }, children: _jsx(SettingsIcon, {}) }) })] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] }), splitSubvariant ? _jsx(NavigationTabs, {}) : null] }));
+    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/components/Header/NavigationTabs.js

@@ -3,8 +3,8 @@ import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { FormKey } from '../../providers';
 import { useSplitSubvariantStore } from '../../stores';
-import { HeaderAppBar } from './Header.style';
-import { NavbarTab, NavbarTabs } from './NavigationTabs.style';
+import { HeaderAppBar, SplitTabs } from './Header.style';
+import { Tab } from '../Tabs';
 export const NavigationTabs = () => {
     const { t } = useTranslation();
     const [state, setState] = useSplitSubvariantStore((state) => [
@@ -18,5 +18,5 @@ export const NavigationTabs = () => {
         setValue(FormKey.ToToken, '');
         setState(value === 0 ? 'swap' : 'bridge');
     };
-    return (_jsx(HeaderAppBar, { elevation: 0, sx: { py: 1 }, children: _jsxs(NavbarTabs, { value: state === 'swap' ? 0 : 1, onChange: handleChange, "aria-label": "tabs", indicatorColor: "primary", children: [_jsx(NavbarTab, { label: t('header.swap'), disableRipple: true }), _jsx(NavbarTab, { label: t('header.bridge'), disableRipple: true })] }) }));
+    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/components/Header/SettingsButton.d.ts

@@ -0,0 +1 @@
+export declare const SettingsButton: () => import("react/jsx-runtime").JSX.Element;

package/components/Header/SettingsButton.js

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

package/components/Header/SettingsButton.style.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const SettingsIconBadge: import("@emotion/styled").StyledComponent<import("@mui/material").BadgeOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "className" | "style" | "classes" | "children" | "sx" | "color" | "variant" | "max" | "components" | "componentsProps" | "slots" | "slotProps" | "invisible" | "anchorOrigin" | "badgeContent" | "overlap" | "showZero"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+interface SettingsIconButtonProps {
+    notification?: 'info' | 'warning';
+}
+export declare const SettingsIconButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & SettingsIconButtonProps, {}, {}>;
+export {};

package/components/Header/SettingsButton.style.js

@@ -0,0 +1,40 @@
+import { IconButton, Badge as MuiBadge } from '@mui/material';
+import { badgeClasses } from '@mui/material/Badge';
+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 !== 'notification',
+})(({ theme, notification }) => {
+    const notificationStyles = {
+        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,
+        ...notificationStyles[notification ?? 'default'],
+    };
+});

package/components/Header/WalletHeader.js

@@ -1,38 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
-import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNewRounded';
 import WalletIcon from '@mui/icons-material/Wallet';
-import { Avatar, Button, MenuItem } from '@mui/material';
+import { Avatar, Badge } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useChain } from '../../hooks';
-import { useWallet, useWidgetConfig } from '../../providers';
+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 } = useWallet();
+    const { account } = useAccount();
     const { variant } = useWidgetConfig();
     if (variant === 'drawer') {
-        return (_jsx(DrawerWalletContainer, { children: account.isActive ? _jsx(ConnectedButton, {}) : _jsx(ConnectButton, {}) }));
+        return (_jsx(DrawerWalletContainer, { children: account.isConnected ? (_jsx(ConnectedButton, { account: account })) : (_jsx(ConnectButton, {})) }));
     }
-    return account.isActive ? _jsx(ConnectedButton, {}) : _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 { connect: connectWallet } = useWallet();
     const navigate = useNavigate();
     const connect = async () => {
         if (walletManagement) {
-            await connectWallet();
+            await walletManagement.connect();
             return;
         }
         navigate(navigationRoutes.selectWallet);
@@ -42,31 +40,20 @@ const ConnectButton = () => {
             marginLeft: subvariant === 'split' ? -1.25 : 0,
         }, children: t(`button.connectWallet`) }));
 };
-const ConnectedButton = () => {
-    const { t } = useTranslation();
+const ConnectedButton = ({ account }) => {
     const { subvariant } = useWidgetConfig();
-    const { account, disconnect } = useWallet();
-    const walletAddress = shortenAddress(account.address);
     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 handleDisconnect = () => {
-        disconnect();
-        handleClose();
-    };
-    const handleCopyAddress = async () => {
-        await navigator.clipboard.writeText(account.address ?? '');
-        handleClose();
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(WalletButton, { endIcon: _jsx(ExpandMoreIcon, {}), startIcon: _jsx(Avatar, { src: chain?.logoURI, alt: chain?.key, sx: { width: 24, height: 24 }, children: chain?.name[0] }), sx: {
+    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 }), _jsxs(WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [_jsxs(MenuItem, { onClick: handleCopyAddress, children: [_jsx(ContentCopyIcon, {}), t(`button.copyAddress`)] }), _jsxs(MenuItem, { component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", children: [_jsx(OpenInNewIcon, {}), t(`button.viewOnExplorer`)] }), _jsx(Button, { onClick: handleDisconnect, fullWidth: true, startIcon: _jsx(PowerSettingsNewIcon, {}), sx: {
-                            marginTop: 1,
-                        }, children: t(`button.disconnect`) })] })] }));
+                }, onClick: handleClick, children: walletAddress }), _jsx(WalletMenuContainer, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: _jsx(WalletMenu, { onClose: handleClose }) })] }));
 };

package/components/Header/WalletMenu.d.ts

@@ -1 +1,3 @@
-export declare const WalletMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const WalletMenu: ({ onClose }: {
+    onClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/components/Header/WalletMenu.js

@@ -1,25 +1,58 @@
-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 WalletMenu = 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,
-                marginRight: theme.spacing(1.5),
-            },
-        },
-    },
-}));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChainType } from '@lifi/sdk';
+import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
+import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
+import 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/components/Header/WalletMenu.style.d.ts

@@ -0,0 +1 @@
+export declare const WalletMenuContainer: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/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/components/Insurance/InsuranceCollapsed.js

@@ -22,5 +22,5 @@ export const InsuranceCollapsed = ({ status, insurableRouteId, onChange, ...prop
     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(insuredRoute.toAmountMin, insuredRoute.toToken.decimals), insuredTokenSymbol: insuredRoute.toToken.symbol, onChange: toggleInsurance }) }));
+    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/components/NFT/NFT.js

@@ -9,7 +9,9 @@ export const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, tok
         if (token) {
             setValue(FormKey.ToChain, token.chainId, { shouldTouch: true });
             setValue(FormKey.ToToken, token.address, { shouldTouch: true });
-            setValue(FormKey.ToAmount, token.amount, { shouldTouch: true });
+            setValue(FormKey.ToAmount, token.amount?.toString(), {
+                shouldTouch: true,
+            });
         }
         if (contract) {
             setValue(FormKey.ToContractAddress, contract.address, {

package/components/NFT/types.d.ts

@@ -6,7 +6,7 @@ export interface NFTBaseProps {
     assetName?: string;
     isLoading?: boolean;
     owner?: NFTOwner;
-    token?: TokenAmount;
+    token: TokenAmount;
 }
 export interface NFTProps extends NFTBaseProps {
     contract?: WidgetContract;

package/components/PoweredBy/PoweredBy.js

@@ -10,7 +10,8 @@ export const PoweredBy = () => {
     const { hiddenUI } = useWidgetConfig();
     const { pathname } = useLocation();
     if (pathname.includes(navigationRoutes.fromToken) ||
-        pathname.includes(navigationRoutes.toToken)) {
+        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: {

package/components/RouteCard/RouteCard.js

@@ -21,10 +21,10 @@ export const RouteCard = ({ route, active, variant = 'default', expanded, ...oth
         setCardExpanded((expanded) => !expanded);
     };
     const token = subvariant === 'nft'
-        ? { ...route.fromToken, amount: route.fromAmount }
-        : { ...route.toToken, amount: route.toAmount };
+        ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
+        : { ...route.toToken, amount: BigInt(route.toAmount) };
     const RecommendedTagTooltip = route.tags?.[0] === 'RECOMMENDED' ? RecommendedTooltip : Fragment;
-    const cardContent = (_jsxs(Box, { flex: 1, children: [subvariant !== 'refuel' && (insurable || route.tags?.length) ? (_jsxs(Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? (_jsx(InsuranceTooltip, { insuredAmount: formatTokenAmount(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, children: _jsxs(CardLabel, { type: route.tags?.length && !cardExpanded
+    const cardContent = (_jsxs(Box, { flex: 1, children: [subvariant !== 'refuel' && (insurable || route.tags?.length) ? (_jsxs(Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? (_jsx(InsuranceTooltip, { insuredAmount: formatTokenAmount(BigInt(route.toAmountMin), route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, children: _jsxs(CardLabel, { type: route.tags?.length && !cardExpanded
                                 ? 'insurance-icon'
                                 : 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? (_jsx(CardLabelTypography, { type: "icon", children: t(`main.tags.insurable`) })) : null] }) })) : null, route.tags?.length ? (_jsx(RecommendedTagTooltip, { children: _jsx(CardLabel, { type: active ? 'active' : undefined, children: _jsx(CardLabelTypography, { children: t(`main.tags.${route.tags[0].toLowerCase()}`) }) }) })) : null] })) : null, _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [_jsx(Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) }), _jsx(RouteCardEssentials, { route: route })] }));
     return subvariant === 'refuel' || variant === 'cardless' ? (cardContent) : (_jsx(Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));

package/components/RouteCard/RouteCardEssentials.js

@@ -5,6 +5,7 @@ import LayersIcon from '@mui/icons-material/Layers';
 import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
 import { Box, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
 import { IconTypography } from './RouteCard.style';
 import { getFeeCostsBreakdown, getGasCostsBreakdown } from './utils';
 export const RouteCardEssentials = ({ route, dense, }) => {
@@ -15,7 +16,7 @@ export const RouteCardEssentials = ({ route, dense, }) => {
     const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
     const gasCosts = getGasCostsBreakdown(route);
     const feeCosts = getFeeCostsBreakdown(route, false);
-    return (_jsxs(Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => (_jsxs(Typography, { fontSize: 12, fontWeight: "500", children: [gas.amount?.toFixed(9), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(EvStationIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => (_jsxs(Typography, { fontSize: 12, fontWeight: "500", children: [fee.amount?.toFixed(9), " ", fee.token.symbol, " (", t(`format.currency`, { value: fee.amountUSD }), ")"] }, `${fee.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(MonetizationOnIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
+    return (_jsxs(Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => (_jsxs(Typography, { fontSize: 12, fontWeight: "500", children: [parseFloat(formatUnits(gas.amount, gas.token.decimals))?.toFixed(9), ' ', gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(EvStationIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => (_jsxs(Typography, { fontSize: 12, fontWeight: "500", children: [parseFloat(formatUnits(fee.amount, fee.token.decimals))?.toFixed(9), ' ', fee.token.symbol, " (", t(`format.currency`, { value: fee.amountUSD }), ")"] }, `${fee.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(MonetizationOnIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
                                 value: feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0),
                             }) })] }) }), _jsx(Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(AccessTimeIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('main.estimatedTime', {
                                 value: executionTimeMinutes,

package/components/RouteCard/utils.d.ts

@@ -1,12 +1,11 @@
 import type { Route, Token } from '@lifi/sdk';
-import Big from 'big.js';
 export declare const getGasCostsBreakdown: (route: Route) => {
-    amount: Big;
+    amount: bigint;
     amountUSD: number;
     token: Token;
 }[];
 export declare const getFeeCostsBreakdown: (route: Route, included?: boolean) => {
-    amount: Big;
+    amount: bigint;
     amountUSD: number;
     token: Token;
 }[];

package/components/RouteCard/utils.js

@@ -1,15 +1,12 @@
-import Big from 'big.js';
 export const getGasCostsBreakdown = (route) => {
     return Object.values(route.steps.reduce((groupedGasCosts, step) => {
         if (step.estimate.gasCosts?.length) {
             const { token } = step.estimate.gasCosts[0];
-            const gasCostAmount = step.estimate.gasCosts
-                .reduce((amount, gasCost) => amount.plus(Big(gasCost.amount || 0)), Big(0))
-                .div(10 ** token.decimals);
+            const gasCostAmount = step.estimate.gasCosts.reduce((amount, gasCost) => amount + BigInt(gasCost.amount || 0), 0n);
             const gasCostAmountUSD = step.estimate.gasCosts.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0);
             const groupedGasCost = groupedGasCosts[token.chainId];
             const amount = groupedGasCost
-                ? groupedGasCost.amount.plus(gasCostAmount)
+                ? groupedGasCost.amount + gasCostAmount
                 : gasCostAmount;
             const amountUSD = groupedGasCost
                 ? groupedGasCost.amountUSD + gasCostAmountUSD
@@ -32,13 +29,11 @@ export const getFeeCostsBreakdown = (route, included) => {
         }
         if (feeCosts?.length) {
             const { token } = feeCosts[0];
-            const feeCostAmount = feeCosts
-                .reduce((amount, feeCost) => amount.plus(Big(feeCost.amount || 0)), Big(0))
-                .div(10 ** token.decimals);
+            const feeCostAmount = feeCosts.reduce((amount, feeCost) => amount + BigInt(feeCost.amount || 0), 0n);
             const feeCostAmountUSD = feeCosts.reduce((amount, feeCost) => amount + parseFloat(feeCost.amountUSD || '0'), 0);
             const groupedFeeCost = groupedFeeCosts[token.chainId];
             const amount = groupedFeeCost
-                ? groupedFeeCost.amount.plus(feeCostAmount)
+                ? groupedFeeCost.amount + feeCostAmount
                 : feeCostAmount;
             const amountUSD = groupedFeeCost
                 ? groupedFeeCost.amountUSD + feeCostAmountUSD