@lifi/widget 1.32.3 → 1.32.5

package/AppDrawer.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { KeyboardArrowLeft as KeyboardArrowLeftIcon, KeyboardArrowRight as KeyboardArrowRightIcon, } from '@mui/icons-material';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import { Drawer } from '@mui/material';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { useTranslation } from 'react-i18next';

package/cjs/AppDrawer.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DrawerButtonText = exports.AppDrawer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const KeyboardArrowLeft_1 = require("@mui/icons-material/KeyboardArrowLeft");
+const KeyboardArrowRight_1 = require("@mui/icons-material/KeyboardArrowRight");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
@@ -34,7 +35,7 @@ exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, config }, ref)
             height: '100%',
         },
     }), [config]);
-    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: drawerConfig, children: [(0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowLeft, {}), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen })] }), (0, jsx_runtime_1.jsx)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: drawerConfig, children: [(0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {}) : (0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {}), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen })] }), (0, jsx_runtime_1.jsx)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',

package/cjs/components/ActiveSwaps/ActiveSwapItem.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActiveSwapItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const ArrowForward_1 = require("@mui/icons-material/ArrowForward");
+const ErrorRounded_1 = require("@mui/icons-material/ErrorRounded");
+const InfoRounded_1 = require("@mui/icons-material/InfoRounded");
 const material_1 = require("@mui/material");
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
@@ -33,9 +35,9 @@ const ActiveSwapItem = ({ routeId, dense }) => {
     const getStatusComponent = () => {
         switch (lastActiveProcess?.status) {
             case 'ACTION_REQUIRED':
-                return (0, jsx_runtime_1.jsx)(icons_material_1.InfoRounded, { color: "info", fontSize: "small" });
+                return (0, jsx_runtime_1.jsx)(InfoRounded_1.default, { color: "info", fontSize: "small" });
             case 'FAILED':
-                return (0, jsx_runtime_1.jsx)(icons_material_1.ErrorRounded, { color: "error", fontSize: "small" });
+                return (0, jsx_runtime_1.jsx)(ErrorRounded_1.default, { color: "error", fontSize: "small" });
             default:
                 return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 500, children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: lastActiveStep, hideInProgress: true }) }));
         }
@@ -46,6 +48,6 @@ const ActiveSwapItem = ({ routeId, dense }) => {
                         alignItems: 'center',
                         marginLeft: 2,
                         height: 16,
-                    }, children: [route.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { paddingX: 0.5 } }), route.toToken.symbol] }), secondary: status !== stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2, children: title })) : null }), getStatusComponent()] }));
+                    }, children: [route.fromToken.symbol, (0, jsx_runtime_1.jsx)(ArrowForward_1.default, { sx: { paddingX: 0.5 } }), route.toToken.symbol] }), secondary: status !== stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2, children: title })) : null }), getStatusComponent()] }));
 };
 exports.ActiveSwapItem = ActiveSwapItem;

package/cjs/components/ChainSelect/useChainSelect.js

@@ -17,7 +17,7 @@ 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/cjs/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GasSufficiencyMessage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const WarningAmberRounded_1 = require("@mui/icons-material/WarningAmberRounded");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
@@ -13,7 +13,7 @@ const GasSufficiencyMessage = ({ route, ...props }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const recommendedRoute = (0, stores_1.useRecommendedRouteStore)((state) => state.recommendedRoute);
     const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(route ?? recommendedRoute);
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: Boolean(insufficientFunds || insufficientGas?.length), unmountOnExit: true, mountOnEnter: true, appear: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ...props, children: (0, jsx_runtime_1.jsxs)(GasSufficiencyMessage_style_1.MessageCard, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.WarningAmberRounded, { sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: Boolean(insufficientFunds || insufficientGas?.length), unmountOnExit: true, mountOnEnter: true, appear: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ...props, children: (0, jsx_runtime_1.jsxs)(GasSufficiencyMessage_style_1.MessageCard, { children: [(0, jsx_runtime_1.jsx)(WarningAmberRounded_1.default, { sx: {
                             marginTop: 2,
                             marginLeft: 2,
                         } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [insufficientGas?.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pb: insufficientGas?.length ? 0 : 2, pt: insufficientGas?.length ? 1 : 2, children: insufficientFunds

package/cjs/components/Header/NavigationHeader.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavigationHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const ArrowBack_1 = require("@mui/icons-material/ArrowBack");
+const ReceiptLongRounded_1 = require("@mui/icons-material/ReceiptLongRounded");
+const SettingsOutlined_1 = require("@mui/icons-material/SettingsOutlined");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
@@ -63,8 +65,8 @@ const NavigationHeader = () => {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, { elevation: 0, children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) })) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() }), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory), children: (0, jsx_runtime_1.jsx)(icons_material_1.ReceiptLongRounded, {}) }) })) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
+    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, { elevation: 0, children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) })) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() }), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory), children: (0, jsx_runtime_1.jsx)(ReceiptLongRounded_1.default, {}) }) })) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
                                             marginRight: -1.25,
-                                        }, children: (0, jsx_runtime_1.jsx)(icons_material_1.SettingsOutlined, {}) }) })] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] }));
+                                        }, children: (0, jsx_runtime_1.jsx)(SettingsOutlined_1.default, {}) }) })] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] }));
 };
 exports.NavigationHeader = NavigationHeader;

package/cjs/components/Header/WalletHeader.js

@@ -2,7 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WalletHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const ContentCopy_1 = require("@mui/icons-material/ContentCopy");
+const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
+const OpenInNewOutlined_1 = require("@mui/icons-material/OpenInNewOutlined");
+const PowerSettingsNewRounded_1 = require("@mui/icons-material/PowerSettingsNewRounded");
+const WalletOutlined_1 = require("@mui/icons-material/WalletOutlined");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
@@ -30,7 +34,7 @@ const ConnectButton = () => {
         }
         navigate(utils_1.navigationRoutes.selectWallet);
     };
-    return ((0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, { endIcon: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, {}), onClick: !pathname.includes(utils_1.navigationRoutes.selectWallet) ? connect : undefined, sx: {
+    return ((0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, { endIcon: (0, jsx_runtime_1.jsx)(WalletOutlined_1.default, {}), onClick: !pathname.includes(utils_1.navigationRoutes.selectWallet) ? connect : undefined, sx: {
             marginRight: -1.25,
         }, children: t(`button.connectWallet`) }));
 };
@@ -54,9 +58,9 @@ const ConnectedButton = () => {
         await navigator.clipboard.writeText(account.address ?? '');
         handleClose();
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, { endIcon: (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}), startIcon: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: chain?.logoURI, alt: chain?.key, sx: { width: 24, height: 24 }, children: chain?.name[0] }), sx: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, { endIcon: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}), startIcon: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: chain?.logoURI, alt: chain?.key, sx: { width: 24, height: 24 }, children: chain?.name[0] }), sx: {
                     marginRight: -1.25,
-                }, onClick: handleClick, children: walletAddress }), (0, jsx_runtime_1.jsxs)(WalletMenu_1.WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, {}), t(`button.copyAddress`)] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", children: [(0, jsx_runtime_1.jsx)(icons_material_1.OpenInNewOutlined, {}), t(`button.viewOnExplorer`)] }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleDisconnect, fullWidth: true, startIcon: (0, jsx_runtime_1.jsx)(icons_material_1.PowerSettingsNewRounded, {}), sx: {
+                }, onClick: handleClick, children: walletAddress }), (0, jsx_runtime_1.jsxs)(WalletMenu_1.WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)(ContentCopy_1.default, {}), t(`button.copyAddress`)] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", children: [(0, jsx_runtime_1.jsx)(OpenInNewOutlined_1.default, {}), t(`button.viewOnExplorer`)] }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleDisconnect, fullWidth: true, startIcon: (0, jsx_runtime_1.jsx)(PowerSettingsNewRounded_1.default, {}), sx: {
                             marginTop: 1,
                         }, children: t(`button.disconnect`) })] })] }));
 };

package/cjs/components/NotFound.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotFound = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const Block_1 = require("@mui/icons-material/Block");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const NotFound = () => {
@@ -14,6 +14,6 @@ const NotFound = () => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(icons_material_1.Block, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('tooltip.notFound.title') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('tooltip.notFound.text') })] }));
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(Block_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('tooltip.notFound.title') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('tooltip.notFound.text') })] }));
 };
 exports.NotFound = NotFound;

package/cjs/components/ReverseTokensButton/ReverseTokensButton.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReverseTokensButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const SwapHoriz_1 = require("@mui/icons-material/SwapHoriz");
+const SwapVert_1 = require("@mui/icons-material/SwapVert");
 const react_hook_form_1 = require("react-hook-form");
 const providers_1 = require("../../providers");
 const ReverseTokensButton_style_1 = require("./ReverseTokensButton.style");
@@ -21,6 +22,6 @@ const ReverseTokensButton = ({ vertical, }) => {
         setValue(providers_1.SwapFormKey.ToChain, fromChain, { shouldTouch: true });
         setValue(providers_1.SwapFormKey.ToToken, fromToken, { shouldTouch: true });
     };
-    return ((0, jsx_runtime_1.jsx)(ReverseTokensButton_style_1.IconButton, { onClick: handleClick, size: "small", children: vertical ? (0, jsx_runtime_1.jsx)(icons_material_1.SwapVert, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.SwapHoriz, {}) }));
+    return ((0, jsx_runtime_1.jsx)(ReverseTokensButton_style_1.IconButton, { onClick: handleClick, size: "small", children: vertical ? (0, jsx_runtime_1.jsx)(SwapVert_1.default, {}) : (0, jsx_runtime_1.jsx)(SwapHoriz_1.default, {}) }));
 };
 exports.ReverseTokensButton = ReverseTokensButton;

package/cjs/components/SendToWallet/SendToWalletButton.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SendToWalletButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const WalletOutlined_1 = require("@mui/icons-material/WalletOutlined");
 const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
@@ -31,6 +31,6 @@ const SendToWalletButton = () => {
     return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
                 minWidth: 48,
                 marginLeft: 1,
-            }, children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, {}) }) }));
+            }, children: (0, jsx_runtime_1.jsx)(WalletOutlined_1.default, {}) }) }));
 };
 exports.SendToWalletButton = SendToWalletButton;

package/cjs/components/Step/CircularProgress.js

@@ -2,22 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CircularProgress = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const Done_1 = require("@mui/icons-material/Done");
+const ErrorRounded_1 = require("@mui/icons-material/ErrorRounded");
+const InfoRounded_1 = require("@mui/icons-material/InfoRounded");
+const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
 const styles_1 = require("@mui/material/styles");
 const CircularProgress_style_1 = require("./CircularProgress.style");
 function CircularProgress({ process }) {
-    return ((0, jsx_runtime_1.jsxs)(CircularProgress_style_1.CircularIcon, { status: process.status, substatus: process.substatus, children: [process.status === 'STARTED' || process.status === 'PENDING' ? ((0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularProgressPending, { size: 32, thickness: 3 })) : null, process.status === 'ACTION_REQUIRED' ? ((0, jsx_runtime_1.jsx)(icons_material_1.InfoRounded, { color: "info", sx: {
+    return ((0, jsx_runtime_1.jsxs)(CircularProgress_style_1.CircularIcon, { status: process.status, substatus: process.substatus, children: [process.status === 'STARTED' || process.status === 'PENDING' ? ((0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularProgressPending, { size: 32, thickness: 3 })) : null, process.status === 'ACTION_REQUIRED' ? ((0, jsx_runtime_1.jsx)(InfoRounded_1.default, { color: "info", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
                 } })) : null, process.status === 'DONE' &&
-                (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? ((0, jsx_runtime_1.jsx)(icons_material_1.WarningRounded, { sx: (theme) => ({
+                (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? ((0, jsx_runtime_1.jsx)(WarningRounded_1.default, { sx: (theme) => ({
                     position: 'absolute',
                     fontSize: '1rem',
                     color: (0, styles_1.darken)(theme.palette.warning.main, 0.32),
-                }) })) : process.status === 'DONE' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success", sx: {
+                }) })) : process.status === 'DONE' ? ((0, jsx_runtime_1.jsx)(Done_1.default, { color: "success", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
-                } })) : null, process.status === 'FAILED' ? ((0, jsx_runtime_1.jsx)(icons_material_1.ErrorRounded, { color: "error", sx: {
+                } })) : null, process.status === 'FAILED' ? ((0, jsx_runtime_1.jsx)(ErrorRounded_1.default, { color: "error", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
                 } })) : null] }));

package/cjs/components/Step/DestinationWalletAddress.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DestinationWalletAddress = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const LinkRounded_1 = require("@mui/icons-material/LinkRounded");
+const WalletOutlined_1 = require("@mui/icons-material/WalletOutlined");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const CircularProgress_style_1 = require("./CircularProgress.style");
@@ -13,7 +14,7 @@ const DestinationWalletAddress = ({ step, toAddress, toAddressLink }) => {
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 2, py: 1, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
-            }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, { color: isDone ? 'success' : 'inherit', sx: {
+            }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: (0, jsx_runtime_1.jsx)(WalletOutlined_1.default, { color: isDone ? 'success' : 'inherit', sx: {
                             position: 'absolute',
                             fontSize: '1rem',
                         } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 14, fontWeight: 400, children: isDone
@@ -26,6 +27,6 @@ const DestinationWalletAddress = ({ step, toAddress, toAddressLink }) => {
                         display: 'flex',
                         flex: 1,
                         justifyContent: 'flex-end',
-                    }, children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, { size: "small", edge: "end", LinkComponent: material_1.Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer", children: (0, jsx_runtime_1.jsx)(icons_material_1.LinkRounded, {}) }) })] }) }));
+                    }, children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, { size: "small", edge: "end", LinkComponent: material_1.Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer", children: (0, jsx_runtime_1.jsx)(LinkRounded_1.default, {}) }) })] }) }));
 };
 exports.DestinationWalletAddress = DestinationWalletAddress;

package/cjs/components/Step/GasStepProcess.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GasStepProcess = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const EvStationOutlined_1 = require("@mui/icons-material/EvStationOutlined");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const CircularProgress_style_1 = require("./CircularProgress.style");
@@ -12,7 +12,7 @@ const GasStepProcess = ({ step }) => {
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 2, py: 1, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
-            }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { color: isDone ? 'success' : 'inherit', sx: {
+            }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: (0, jsx_runtime_1.jsx)(EvStationOutlined_1.default, { color: isDone ? 'success' : 'inherit', sx: {
                             position: 'absolute',
                             fontSize: '1rem',
                         } }) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { ml: 2, fontSize: 14, fontWeight: 400, children: [t('format.currency', {

package/cjs/components/Step/StepProcess.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepProcess = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const LinkRounded_1 = require("@mui/icons-material/LinkRounded");
 const material_1 = require("@mui/material");
 const hooks_1 = require("../../hooks");
 const CircularProgress_1 = require("./CircularProgress");
@@ -16,6 +16,6 @@ const StepProcess = ({ step, process }) => {
                             display: 'flex',
                             flex: 1,
                             justifyContent: 'flex-end',
-                        }, children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, { size: "small", edge: "end", LinkComponent: material_1.Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: (0, jsx_runtime_1.jsx)(icons_material_1.LinkRounded, {}) }) })) : null] }), message ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary", children: message })) : null] }));
+                        }, children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, { size: "small", edge: "end", LinkComponent: material_1.Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: (0, jsx_runtime_1.jsx)(LinkRounded_1.default, {}) }) })) : null] }), message ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary", children: message })) : null] }));
 };
 exports.StepProcess = StepProcess;

package/cjs/components/StepActions/StepActions.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapStepDetailsLabel = exports.CrossStepDetailsLabel = exports.CustomStepDetailsLabel = exports.StepDetailsContent = exports.StepActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const ArrowForward_1 = require("@mui/icons-material/ArrowForward");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
@@ -52,7 +52,7 @@ const StepDetailsContent = ({ step, variant }) => {
     return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex", children: [t('format.number', {
                 value: (0, utils_1.formatTokenAmount)(step.estimate.fromAmount, step.action.fromToken.decimals),
             }), ' ', step.action.fromToken.symbol, !((step.type === 'custom' || step.tool === 'custom') &&
-                variant === 'nft') ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
+                variant === 'nft') ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ArrowForward_1.default, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
                         value: (0, utils_1.formatTokenAmount)(step.execution?.toAmount ?? step.estimate.toAmount, step.execution?.toToken?.decimals ?? step.action.toToken.decimals),
                     }), ' ', step.execution?.toToken?.symbol ?? step.action.toToken.symbol] })) : null] }));
 };

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -2,7 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapRouteCardEssentials = exports.SwapRouteCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const AccessTime_1 = require("@mui/icons-material/AccessTime");
+const EvStationOutlined_1 = require("@mui/icons-material/EvStationOutlined");
+const ExpandLess_1 = require("@mui/icons-material/ExpandLess");
+const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
+const LayersOutlined_1 = require("@mui/icons-material/LayersOutlined");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
@@ -27,7 +31,7 @@ const SwapRouteCard = ({ route, active, variant = 'default', expanded, ...other
     const token = widgetVariant === 'nft'
         ? { ...route.fromToken, amount: route.fromAmount }
         : { ...route.toToken, amount: route.toAmount };
-    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, { active: active ?? label !== alternativeTag, children: label }), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: variant === 'stretched' ? route.steps[0] : undefined, disableDescription: variant === 'dense' && widgetVariant !== 'refuel' }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) }), variant !== 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] }));
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, { active: active ?? label !== alternativeTag, children: label }), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: variant === 'stretched' ? route.steps[0] : undefined, disableDescription: variant === 'dense' && widgetVariant !== 'refuel' }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) }), variant !== 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] }));
     return widgetVariant === 'refuel' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
 };
 exports.SwapRouteCard = SwapRouteCard;
@@ -38,8 +42,8 @@ const SwapRouteCardEssentials = ({ route, dense }) => {
         .reduce((duration, x) => duration + x, 0) / 60);
     const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
     const gasCosts = (0, utils_1.getGasCostsBreakdown)(route);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => ((0, jsx_runtime_1.jsxs)(material_1.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: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { fontSize: dense ? 'medium' : 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: (0, jsx_runtime_1.jsx)(icons_material_1.AccessTime, { fontSize: dense ? 'medium' : 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => ((0, jsx_runtime_1.jsxs)(material_1.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: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: (0, jsx_runtime_1.jsx)(EvStationOutlined_1.default, { fontSize: dense ? 'medium' : 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: (0, jsx_runtime_1.jsx)(AccessTime_1.default, { fontSize: dense ? 'medium' : 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,
-                            }) })] }) }), !dense ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: (0, jsx_runtime_1.jsx)(icons_material_1.LayersOutlined, { fontSize: dense ? 'medium' : 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })) : null] }));
+                            }) })] }) }), !dense ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: (0, jsx_runtime_1.jsx)(LayersOutlined_1.default, { fontSize: dense ? 'medium' : 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })) : null] }));
 };
 exports.SwapRouteCardEssentials = SwapRouteCardEssentials;

package/cjs/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapRouteNotFoundCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const Route_1 = require("@mui/icons-material/Route");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const SwapRouteNotFoundCard = () => {
@@ -13,6 +13,6 @@ const SwapRouteNotFoundCard = () => {
             justifyContent: 'center',
             flexDirection: 'column',
             flex: 1,
-        }, py: 1.625, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(icons_material_1.Route, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.routeNotFound') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.routeNotFound') })] }));
+        }, py: 1.625, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(Route_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.routeNotFound') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.routeNotFound') })] }));
 };
 exports.SwapRouteNotFoundCard = SwapRouteNotFoundCard;

package/cjs/components/SwapRoutes/SwapRoutes.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapRoutes = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const KeyboardArrowRight_1 = require("@mui/icons-material/KeyboardArrowRight");
 const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
@@ -41,6 +41,6 @@ const SwapRoutes = (props) => {
                                 (isFetching || (routes && routes.length > 1))
                                 ? 1
                                 : 0,
-                        }, children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: !onlyRecommendedRoute ? '80%' : '100%', variant: "dense" }), !onlyRecommendedRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })) : null] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: !onlyRecommendedRoute && routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), !onlyRecommendedRoute && routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: !onlyRecommendedRoute && !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, { py: 1, pr: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid, children: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) }) })) : null })] })] }));
+                        }, children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: !onlyRecommendedRoute ? '80%' : '100%', variant: "dense" }), !onlyRecommendedRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })) : null] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: !onlyRecommendedRoute && routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), !onlyRecommendedRoute && routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: !onlyRecommendedRoute && !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, { py: 1, pr: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid, children: (0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {}) }) })) : null })] })] }));
 };
 exports.SwapRoutes = SwapRoutes;

package/cjs/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/cjs/components/TokenList/TokenNotFound.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TokenNotFound = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const SearchOff_1 = require("@mui/icons-material/SearchOff");
 const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
@@ -21,7 +21,7 @@ const TokenNotFound = ({ formType }) => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, lineHeight: 1, children: (0, jsx_runtime_1.jsx)(icons_material_1.SearchOff, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2, children: t('swap.info.message.emptyTokenList', {
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, lineHeight: 1, children: (0, jsx_runtime_1.jsx)(SearchOff_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2, children: t('swap.info.message.emptyTokenList', {
                     chainName: getChainById(selectedChainId)?.name,
                 }) })] }));
 };

package/cjs/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/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.32.3';
+exports.version = '1.32.5';

package/cjs/hooks/useRouteExecution.js

@@ -69,7 +69,7 @@ const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchangeRateU
         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/cjs/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/cjs/hooks/useSwapRoutes.js

@@ -154,6 +154,25 @@ 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/cjs/hooks/useTokenAddressBalance.js

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

package/cjs/hooks/useTokenBalance.js

@@ -54,15 +54,16 @@ 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],
@@ -74,11 +75,7 @@ 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 = (0, react_1.useCallback)(() => {
         queryClient.setQueryDefaults(tokenBalanceQueryKey, {

package/cjs/hooks/useTokenBalances.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTokenBalances = void 0;
-/* eslint-disable consistent-return */
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const providers_1 = require("../providers");