@lifi/widget 1.32.3 → 1.32.5

package/cjs/pages/SwapRoutesPage/SwapRoutesPage.style.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 export declare const Stack: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    ref?: import("react").Ref<unknown> | undefined;
     children?: import("react").ReactNode;
     direction?: import("@mui/system").ResponsiveStyleValue<"column" | "column-reverse" | "row" | "row-reverse"> | undefined;
     spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
@@ -8,4 +7,4 @@ export declare const Stack: import("@emotion/styled").StyledComponent<import("@m
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & 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;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "direction" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "direction" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/ActiveSwaps/ActiveSwapItem.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowForward as ArrowForwardIcon, ErrorRounded as ErrorIcon, InfoRounded as InfoIcon, } from '@mui/icons-material';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
 import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { useProcessMessage, useRouteExecution } from '../../hooks';
@@ -30,9 +32,9 @@ export const ActiveSwapItem = ({ routeId, dense }) => {
     const getStatusComponent = () => {
         switch (lastActiveProcess?.status) {
             case 'ACTION_REQUIRED':
-                return _jsx(InfoIcon, { color: "info", fontSize: "small" });
+                return _jsx(InfoRoundedIcon, { color: "info", fontSize: "small" });
             case 'FAILED':
-                return _jsx(ErrorIcon, { color: "error", fontSize: "small" });
+                return _jsx(ErrorRoundedIcon, { color: "error", fontSize: "small" });
             default:
                 return (_jsx(Typography, { fontSize: 14, fontWeight: 500, children: _jsx(StepTimer, { step: lastActiveStep, hideInProgress: true }) }));
         }

package/components/ChainSelect/useChainSelect.js

@@ -14,7 +14,7 @@ export const useChainSelect = (formType) => {
         }
         const selectedChains = chainOrder
             .map((chainId) => chains.find((chain) => chain.id === chainId))
-            .filter((chain) => chain);
+            .filter(Boolean);
         return selectedChains;
     };
     const setCurrentChain = (chainId) => {

package/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { WarningAmberRounded as WarningIcon } from '@mui/icons-material';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
 import { Box, Collapse, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useGasSufficiency } from '../../hooks';
@@ -10,7 +10,7 @@ export const GasSufficiencyMessage = ({ route, ...props }) => {
     const { t } = useTranslation();
     const recommendedRoute = useRecommendedRouteStore((state) => state.recommendedRoute);
     const { insufficientFunds, insufficientGas } = useGasSufficiency(route ?? recommendedRoute);
-    return (_jsx(Collapse, { timeout: 225, in: Boolean(insufficientFunds || insufficientGas?.length), unmountOnExit: true, mountOnEnter: true, appear: true, children: _jsx(Box, { ...props, children: _jsxs(MessageCard, { children: [_jsx(WarningIcon, { sx: {
+    return (_jsx(Collapse, { timeout: 225, in: Boolean(insufficientFunds || insufficientGas?.length), unmountOnExit: true, mountOnEnter: true, appear: true, children: _jsx(Box, { ...props, children: _jsxs(MessageCard, { children: [_jsx(WarningAmberRoundedIcon, { sx: {
                             marginTop: 2,
                             marginLeft: 2,
                         } }), _jsxs(Box, { children: [insufficientGas?.length ? (_jsx(CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? (_jsx(Typography, { variant: "body2", px: 2, pb: insufficientGas?.length ? 0 : 2, pt: insufficientGas?.length ? 1 : 2, children: insufficientFunds

package/components/Header/NavigationHeader.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowBack as ArrowBackIcon, ReceiptLongRounded as HistoryIcon, SettingsOutlined as SettingsIcon, } from '@mui/icons-material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ReceiptLongRoundedIcon from '@mui/icons-material/ReceiptLongRounded';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
@@ -60,7 +62,7 @@ export const NavigationHeader = () => {
             }
         }
     };
-    return (_jsxs(HeaderAppBar, { elevation: 0, children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: _jsx(ArrowBackIcon, {}) })) : null, _jsx(Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() }), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory), children: _jsx(HistoryIcon, {}) }) })) : null, _jsx(Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", onClick: () => navigate(navigationRoutes.settings), sx: {
+    return (_jsxs(HeaderAppBar, { elevation: 0, children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: _jsx(ArrowBackIcon, {}) })) : null, _jsx(Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() }), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory), children: _jsx(ReceiptLongRoundedIcon, {}) }) })) : 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 }) })] })] }));
+                                        }, children: _jsx(SettingsOutlinedIcon, {}) }) })] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] }));
 };

package/components/Header/WalletHeader.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ContentCopy as ContentCopyIcon, ExpandMore as ExpandMoreIcon, OpenInNewOutlined as OpenInNewOutlinedIcon, PowerSettingsNewRounded as PowerSettingsIcon, WalletOutlined as WalletOutlinedIcon, } from '@mui/icons-material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import OpenInNewOutlinedIcon from '@mui/icons-material/OpenInNewOutlined';
+import PowerSettingsNewRoundedIcon from '@mui/icons-material/PowerSettingsNewRounded';
+import WalletOutlinedIcon from '@mui/icons-material/WalletOutlined';
 import { Avatar, Button, MenuItem } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -52,7 +56,7 @@ const ConnectedButton = () => {
     };
     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: {
                     marginRight: -1.25,
-                }, 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(OpenInNewOutlinedIcon, {}), t(`button.viewOnExplorer`)] }), _jsx(Button, { onClick: handleDisconnect, fullWidth: true, startIcon: _jsx(PowerSettingsIcon, {}), sx: {
+                }, 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(OpenInNewOutlinedIcon, {}), t(`button.viewOnExplorer`)] }), _jsx(Button, { onClick: handleDisconnect, fullWidth: true, startIcon: _jsx(PowerSettingsNewRoundedIcon, {}), sx: {
                             marginTop: 1,
                         }, children: t(`button.disconnect`) })] })] }));
 };

package/components/NotFound.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Block as BlockIcon } from '@mui/icons-material';
+import BlockIcon from '@mui/icons-material/Block';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 export const NotFound = () => {

package/components/ReverseTokensButton/ReverseTokensButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SwapHoriz as SwapHorizIcon, SwapVert as SwapVertIcon, } from '@mui/icons-material';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+import SwapVertIcon from '@mui/icons-material/SwapVert';
 import { useFormContext } from 'react-hook-form';
 import { SwapFormKey } from '../../providers';
 import { IconButton } from './ReverseTokensButton.style';

package/components/SendToWallet/SendToWalletButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { WalletOutlined as WalletOutlinedIcon } from '@mui/icons-material';
+import WalletOutlinedIcon from '@mui/icons-material/WalletOutlined';
 import { Button, Tooltip } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';

package/components/Step/CircularProgress.js

@@ -1,20 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Done as DoneIcon, ErrorRounded as ErrorIcon, InfoRounded as InfoIcon, WarningRounded as WarningIcon } from '@mui/icons-material';
+import DoneIcon from '@mui/icons-material/Done';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { darken } from '@mui/material/styles';
-import { CircularIcon, CircularProgressPending } from './CircularProgress.style';
+import { CircularIcon, CircularProgressPending, } from './CircularProgress.style';
 export function CircularProgress({ process }) {
-    return (_jsxs(CircularIcon, { status: process.status, substatus: process.substatus, children: [process.status === 'STARTED' || process.status === 'PENDING' ? (_jsx(CircularProgressPending, { size: 32, thickness: 3 })) : null, process.status === 'ACTION_REQUIRED' ? (_jsx(InfoIcon, { color: "info", sx: {
+    return (_jsxs(CircularIcon, { status: process.status, substatus: process.substatus, children: [process.status === 'STARTED' || process.status === 'PENDING' ? (_jsx(CircularProgressPending, { size: 32, thickness: 3 })) : null, process.status === 'ACTION_REQUIRED' ? (_jsx(InfoRoundedIcon, { color: "info", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
                 } })) : null, process.status === 'DONE' &&
-                (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? (_jsx(WarningIcon, { sx: (theme) => ({
+                (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? (_jsx(WarningRoundedIcon, { sx: (theme) => ({
                     position: 'absolute',
                     fontSize: '1rem',
                     color: darken(theme.palette.warning.main, 0.32),
                 }) })) : process.status === 'DONE' ? (_jsx(DoneIcon, { color: "success", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
-                } })) : null, process.status === 'FAILED' ? (_jsx(ErrorIcon, { color: "error", sx: {
+                } })) : null, process.status === 'FAILED' ? (_jsx(ErrorRoundedIcon, { color: "error", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
                 } })) : null] }));

package/components/Step/DestinationWalletAddress.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LinkRounded as LinkIcon, WalletOutlined as WalletOutlinedIcon } from '@mui/icons-material';
+import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
+import WalletOutlinedIcon from '@mui/icons-material/WalletOutlined';
 import { Box, Link, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CircularIcon } from './CircularProgress.style';
@@ -23,5 +24,5 @@ export const DestinationWalletAddress = ({ step, toAddress, toAddressLink }) =>
                         display: 'flex',
                         flex: 1,
                         justifyContent: 'flex-end',
-                    }, children: _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkIcon, {}) }) })] }) }));
+                    }, children: _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkRoundedIcon, {}) }) })] }) }));
 };

package/components/Step/GasStepProcess.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { EvStationOutlined as EvStationIcon } from '@mui/icons-material';
+import EvStationOutlinedIcon from '@mui/icons-material/EvStationOutlined';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CircularIcon } from './CircularProgress.style';
@@ -9,7 +9,7 @@ export const GasStepProcess = ({ step }) => {
     return (_jsx(Box, { px: 2, py: 1, children: _jsxs(Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
-            }, children: [_jsx(CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: _jsx(EvStationIcon, { color: isDone ? 'success' : 'inherit', sx: {
+            }, children: [_jsx(CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: _jsx(EvStationOutlinedIcon, { color: isDone ? 'success' : 'inherit', sx: {
                             position: 'absolute',
                             fontSize: '1rem',
                         } }) }), _jsxs(Typography, { ml: 2, fontSize: 14, fontWeight: 400, children: [t('format.currency', {

package/components/Step/StepProcess.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LinkRounded as LinkIcon } from '@mui/icons-material';
+import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
 import { Box, Link, Typography } from '@mui/material';
 import { useProcessMessage } from '../../hooks';
 import { CircularProgress } from './CircularProgress';
@@ -13,5 +13,5 @@ export const StepProcess = ({ step, process }) => {
                             display: 'flex',
                             flex: 1,
                             justifyContent: 'flex-end',
-                        }, children: _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkIcon, {}) }) })) : null] }), message ? (_jsx(Typography, { ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary", children: message })) : null] }));
+                        }, children: _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkRoundedIcon, {}) }) })) : null] }), message ? (_jsx(Typography, { ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary", children: message })) : null] }));
 };

package/components/StepActions/StepActions.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ArrowForward as ArrowForwardIcon } from '@mui/icons-material';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { Box, Step as MuiStep, Stepper, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';

package/components/SwapRouteCard/SwapRouteCard.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AccessTime as AccessTimeIcon, EvStationOutlined as EvStationIcon, ExpandLess as ExpandLessIcon, ExpandMore as ExpandMoreIcon, LayersOutlined as LayersIcon, } from '@mui/icons-material';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import EvStationOutlinedIcon from '@mui/icons-material/EvStationOutlined';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
 import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -34,7 +38,7 @@ export const SwapRouteCardEssentials = ({ route, dense }) => {
         .reduce((duration, x) => duration + x, 0) / 60);
     const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
     const gasCosts = getGasCostsBreakdown(route);
-    return (_jsxs(Box, { display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => (_jsxs(Typography, { fontSize: 11, children: [gas.amount?.toFixed(6), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${gas.token.symbol}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _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(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
+    return (_jsxs(Box, { display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => (_jsxs(Typography, { fontSize: 11, children: [gas.amount?.toFixed(6), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${gas.token.symbol}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(EvStationOutlinedIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _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(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,
-                            }) })] }) }), !dense ? (_jsx(Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(LayersIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })) : null] }));
+                            }) })] }) }), !dense ? (_jsx(Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(LayersOutlinedIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })) : null] }));
 };

package/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Route as RouteIcon } from '@mui/icons-material';
+import RouteIcon from '@mui/icons-material/Route';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 export const SwapRouteNotFoundCard = () => {

package/components/SwapRoutes/SwapRoutes.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import { Box, IconButton } from '@mui/material';
 import { useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';

package/components/SwapRoutes/SwapRoutes.style.d.ts

@@ -32,7 +32,6 @@ export declare const Header: import("@emotion/styled").StyledComponent<import("@
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const Stack: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    ref?: import("react").Ref<unknown> | undefined;
     children?: import("react").ReactNode;
     direction?: import("@mui/system").ResponsiveStyleValue<"column" | "column-reverse" | "row" | "row-reverse"> | undefined;
     spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
@@ -40,4 +39,4 @@ export declare const Stack: import("@emotion/styled").StyledComponent<import("@m
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & 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;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "direction" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "direction" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/TokenList/TokenNotFound.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SearchOff as SearchOffIcon } from '@mui/icons-material';
+import SearchOffIcon from '@mui/icons-material/SearchOff';
 import { Box, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.32.3";
+export declare const version = "1.32.5";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.32.3';
+export const version = '1.32.5';

package/hooks/useRouteExecution.js

@@ -66,7 +66,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
         if (!routeExecution?.route) {
             throw Error('Execution route not found.');
         }
-        queryClient.removeQueries(['routes']);
+        queryClient.removeQueries(['routes'], { exact: false });
         return lifi.executeRoute(account.signer, routeExecution.route, {
             updateCallback,
             switchChainHook,

package/hooks/useSwapRoutes.d.ts

@@ -1,4 +1,4 @@
-import type { Route } from '@lifi/sdk';
+import type { Route, RoutesResponse } from '@lifi/sdk';
 export declare const useSwapRoutes: () => {
     routes: Route[] | undefined;
     isLoading: boolean;
@@ -6,7 +6,5 @@ export declare const useSwapRoutes: () => {
     isFetched: boolean;
     dataUpdatedAt: number;
     refetchTime: number;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/sdk").RoutesResponse | {
-        routes: Route[];
-    }, any>>;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<RoutesResponse, any>>;
 };

package/hooks/useSwapRoutes.js

@@ -151,6 +151,25 @@ export const useSwapRoutes = () => {
             }
             return true;
         },
+        onSuccess(data) {
+            if (data.routes[0]) {
+                // Update local tokens cache to keep priceUSD in sync
+                const { fromToken, toToken } = data.routes[0];
+                [fromToken, toToken].forEach((token) => {
+                    queryClient.setQueriesData(['token-balances', account.address, token.chainId], (data) => {
+                        if (data) {
+                            const clonedData = [...data];
+                            const index = clonedData.findIndex((dataToken) => dataToken.address === token.address);
+                            clonedData[index] = {
+                                ...clonedData[index],
+                                ...token,
+                            };
+                            return clonedData;
+                        }
+                    });
+                });
+            }
+        },
     });
     return {
         routes: data?.routes,

package/hooks/useTokenAddressBalance.js

@@ -3,6 +3,7 @@ import { useTokenBalances } from './useTokenBalances';
 export const useTokenAddressBalance = (chainId, tokenAddress) => {
     const { tokens, tokensWithBalance, isBalanceLoading, refetch } = useTokenBalances(chainId);
     const token = useMemo(() => {
+        console.log('useTokenAddressBalance');
         const token = (tokensWithBalance ?? tokens)?.find((token) => token.address === tokenAddress && token.chainId === chainId);
         return token;
     }, [chainId, tokenAddress, tokens, tokensWithBalance]);

package/hooks/useTokenBalance.js

@@ -51,15 +51,16 @@ export const useTokenBalance = (token, accountAddress) => {
                 staleTime: defaultRefetchInterval,
             });
         }
-        queryClient.setQueryData(['token-balances', accountAddress, token.chainId], (data) => {
+        queryClient.setQueriesData(['token-balances', accountAddress, token.chainId], (data) => {
             if (data) {
-                const index = data.findIndex((dataToken) => dataToken.address === token.address);
-                data[index] = {
-                    ...data[index],
+                const clonedData = [...data];
+                const index = clonedData.findIndex((dataToken) => dataToken.address === token.address);
+                clonedData[index] = {
+                    ...clonedData[index],
                     amount: formattedAmount,
                 };
+                return clonedData;
             }
-            return data;
         });
         return {
             ...tokenBalances[0],
@@ -71,11 +72,7 @@ export const useTokenBalance = (token, accountAddress) => {
         staleTime: defaultRefetchInterval,
     });
     const refetchAllBalances = () => {
-        queryClient.refetchQueries([
-            'token-balances',
-            token?.chainId,
-            accountAddress,
-        ]);
+        queryClient.refetchQueries(['token-balances', accountAddress, token?.chainId], { exact: false });
     };
     const refetchNewBalance = useCallback(() => {
         queryClient.setQueryDefaults(tokenBalanceQueryKey, {

package/hooks/useTokenBalances.js

@@ -1,4 +1,3 @@
-/* eslint-disable consistent-return */
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useLiFi, useWallet } from '../providers';

package/hooks/useTokenSearch.js

@@ -9,11 +9,13 @@ export const useTokenSearch = (chainId, tokenQuery, enabled) => {
         });
         if (token) {
             queryClient.setQueriesData(['tokens'], (data) => {
-                if (!data?.tokens[chainId].some((t) => t.address === token.address)) {
-                    data?.tokens[chainId].push(token);
+                if (data &&
+                    !data.tokens[chainId].some((t) => t.address === token.address)) {
+                    const clonedData = { ...data };
+                    clonedData.tokens[chainId].push(token);
+                    return clonedData;
                 }
-                return data;
-            }, { updatedAt: Date.now() });
+            });
         }
         return token;
     }, {