@lifi/widget 1.32.4 → 1.32.5

package/cjs/hooks/useTokenSearch.js

@@ -12,11 +12,13 @@ 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;
     }, {

package/cjs/i18n/index.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.zh = exports.uk = exports.tr = exports.ko = exports.it = exports.id = exports.fr = exports.es = exports.en = exports.de = void 0;
-/* eslint-disable camelcase */
 const de_json_1 = require("./de.json");
 exports.de = de_json_1.default;
 const en_json_1 = require("./en.json");

package/cjs/pages/ActiveSwapsPage/ActiveSwapsEmpty.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActiveSwapsEmpty = 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 material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const ActiveSwapsEmpty = () => {
@@ -14,6 +14,6 @@ const ActiveSwapsEmpty = () => {
             alignItems: 'center',
             justifyContent: 'center',
             paddingY: 12,
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(icons_material_1.SwapHoriz, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.emptyActiveSwaps') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.emptyActiveSwaps') })] }));
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(SwapHoriz_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.emptyActiveSwaps') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.emptyActiveSwaps') })] }));
 };
 exports.ActiveSwapsEmpty = ActiveSwapsEmpty;

package/cjs/pages/ActiveSwapsPage/ActiveSwapsPage.js

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActiveSwapsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable consistent-return */
-const icons_material_1 = require("@mui/icons-material");
+const DeleteOutline_1 = require("@mui/icons-material/DeleteOutline");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
@@ -24,7 +23,7 @@ const ActiveSwapsPage = () => {
     }, []);
     (0, react_1.useEffect)(() => {
         if (executingRoutes.length) {
-            return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) }));
+            return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
         }
     }, [executingRoutes.length, toggleDialog]);
     if (!executingRoutes.length) {

package/cjs/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.js

@@ -2,7 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectEnabledToolsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const CheckBox_1 = require("@mui/icons-material/CheckBox");
+const CheckBoxOutlineBlankOutlined_1 = require("@mui/icons-material/CheckBoxOutlineBlankOutlined");
+const CheckBoxOutlined_1 = require("@mui/icons-material/CheckBoxOutlined");
+const IndeterminateCheckBoxOutlined_1 = require("@mui/icons-material/IndeterminateCheckBoxOutlined");
 const material_1 = require("@mui/material");
 const Header_1 = require("../../components/Header");
 const react_1 = require("react");
@@ -41,11 +44,11 @@ const SelectEnabledToolsPage = ({ type }) => {
                 setTools(type, toolKeys, toolKeys);
             }
         };
-        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? ((0, jsx_runtime_1.jsx)(icons_material_1.CheckBoxOutlined, {})) : enabledTools.length ? ((0, jsx_runtime_1.jsx)(icons_material_1.IndeterminateCheckBoxOutlined, {})) : ((0, jsx_runtime_1.jsx)(icons_material_1.CheckBoxOutlineBlankOutlined, {})) }));
+        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? ((0, jsx_runtime_1.jsx)(CheckBoxOutlined_1.default, {})) : enabledTools.length ? ((0, jsx_runtime_1.jsx)(IndeterminateCheckBoxOutlined_1.default, {})) : ((0, jsx_runtime_1.jsx)(CheckBoxOutlineBlankOutlined_1.default, {})) }));
     }, [enabledTools.length, setTools, tools, type, typeKey]);
     return ((0, jsx_runtime_1.jsx)(material_1.Container, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                 paddingLeft: 1.5,
                 paddingRight: 1.5,
-            }, children: tools?.[typeKey].map((tool) => ((0, jsx_runtime_1.jsxs)(SelectEnabledToolsPage_style_1.ListItemButton, { onClick: () => handleClick(tool.key), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: tool.logoURI, alt: tool.name, children: tool.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: tool.name }), enabledTools?.includes(tool.key) ? ((0, jsx_runtime_1.jsx)(icons_material_1.CheckBox, { color: "primary" })) : ((0, jsx_runtime_1.jsx)(icons_material_1.CheckBoxOutlineBlankOutlined, {}))] }, tool.name))) }) }));
+            }, children: tools?.[typeKey].map((tool) => ((0, jsx_runtime_1.jsxs)(SelectEnabledToolsPage_style_1.ListItemButton, { onClick: () => handleClick(tool.key), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: tool.logoURI, alt: tool.name, children: tool.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: tool.name }), enabledTools?.includes(tool.key) ? ((0, jsx_runtime_1.jsx)(CheckBox_1.default, { color: "primary" })) : ((0, jsx_runtime_1.jsx)(CheckBoxOutlineBlankOutlined_1.default, {}))] }, tool.name))) }) }));
 };
 exports.SelectEnabledToolsPage = SelectEnabledToolsPage;

package/cjs/pages/SelectTokenPage/SearchTokenInput.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchTokenInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const Search_1 = require("@mui/icons-material/Search");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
@@ -16,7 +16,7 @@ const SearchTokenInput = () => {
     (0, react_1.useEffect)(() => () => {
         setValue(providers_1.SwapFormKey.TokenSearchFilter, '');
     }, [setValue]);
-    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(SearchTokenInput_style_1.Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(icons_material_1.Search, {}) }), inputProps: {
+    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(SearchTokenInput_style_1.Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(Search_1.default, {}) }), inputProps: {
                     inputMode: 'search',
                     ...register(providers_1.SwapFormKey.TokenSearchFilter),
                 }, autoComplete: "off" }) }) }));

package/cjs/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorSchemeButtonGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const Brightness4_1 = require("@mui/icons-material/Brightness4");
+const DarkMode_1 = require("@mui/icons-material/DarkMode");
+const LightMode_1 = require("@mui/icons-material/LightMode");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const providers_1 = require("../../providers");
@@ -20,6 +22,6 @@ const ColorSchemeButtonGroup = () => {
                 if (value) {
                     setAppearance(value);
                 }
-            }, exclusive: true, fullWidth: true, children: [(0, jsx_runtime_1.jsxs)(ColorSchemeButtonGroup_style_1.ToggleButton, { value: "light", children: [(0, jsx_runtime_1.jsx)(icons_material_1.LightMode, { sx: { marginRight: 1 } }), t('button.light')] }), (0, jsx_runtime_1.jsxs)(ColorSchemeButtonGroup_style_1.ToggleButton, { value: "dark", children: [(0, jsx_runtime_1.jsx)(icons_material_1.DarkMode, { sx: { marginRight: 1 } }), t('button.dark')] }), (0, jsx_runtime_1.jsxs)(ColorSchemeButtonGroup_style_1.ToggleButton, { value: "auto", children: [(0, jsx_runtime_1.jsx)(icons_material_1.Brightness4, { sx: { marginRight: 1 } }), t('button.auto')] })] }) }));
+            }, exclusive: true, fullWidth: true, children: [(0, jsx_runtime_1.jsxs)(ColorSchemeButtonGroup_style_1.ToggleButton, { value: "light", children: [(0, jsx_runtime_1.jsx)(LightMode_1.default, { sx: { marginRight: 1 } }), t('button.light')] }), (0, jsx_runtime_1.jsxs)(ColorSchemeButtonGroup_style_1.ToggleButton, { value: "dark", children: [(0, jsx_runtime_1.jsx)(DarkMode_1.default, { sx: { marginRight: 1 } }), t('button.dark')] }), (0, jsx_runtime_1.jsxs)(ColorSchemeButtonGroup_style_1.ToggleButton, { value: "auto", children: [(0, jsx_runtime_1.jsx)(Brightness4_1.default, { sx: { marginRight: 1 } }), t('button.auto')] })] }) }));
 };
 exports.ColorSchemeButtonGroup = ColorSchemeButtonGroup;

package/cjs/pages/SettingsPage/EnabledToolsButton.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EnabledToolsButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const ChevronRight_1 = require("@mui/icons-material/ChevronRight");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
@@ -15,11 +15,11 @@ const EnabledToolsButton = ({ type }) => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const [enabledTools, tools] = (0, stores_1.useSettingsStore)((state) => {
         const enabledTools = Object.values(state[`_enabled${type}`] ?? {});
-        return [enabledTools.filter((tool) => tool).length, enabledTools.length];
+        return [enabledTools.filter(Boolean).length, enabledTools.length];
     }, shallow_1.shallow);
     const handleClick = () => {
         navigate(utils_1.navigationRoutes[type.toLowerCase()]);
     };
-    return ((0, jsx_runtime_1.jsxs)(EnabledToolsButton_style_1.ListItemButton, { onClick: handleClick, children: [(0, jsx_runtime_1.jsx)(EnabledToolsButton_style_1.ListItemText, { primary: t(`settings.enabled${type}`) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(EnabledToolsButton_style_1.ListItemText, { primary: `${enabledTools}/${tools}` }), (0, jsx_runtime_1.jsx)(icons_material_1.ChevronRight, {})] })] }));
+    return ((0, jsx_runtime_1.jsxs)(EnabledToolsButton_style_1.ListItemButton, { onClick: handleClick, children: [(0, jsx_runtime_1.jsx)(EnabledToolsButton_style_1.ListItemText, { primary: t(`settings.enabled${type}`) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(EnabledToolsButton_style_1.ListItemText, { primary: `${enabledTools}/${tools}` }), (0, jsx_runtime_1.jsx)(ChevronRight_1.default, {})] })] }));
 };
 exports.EnabledToolsButton = EnabledToolsButton;

package/cjs/pages/SettingsPage/GasPriceSelect.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GasPriceSelect = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const KeyboardArrowDown_1 = require("@mui/icons-material/KeyboardArrowDown");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const Card_1 = require("../../components/Card");
@@ -12,6 +12,6 @@ const GasPriceSelect = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     const { gasPrice } = (0, stores_1.useSettings)(['gasPrice']);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { flex: 1, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.gasPrice.title`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsxs)(Select_1.Select, { MenuProps: { elevation: 2 }, value: gasPrice, onChange: (event) => setValue('gasPrice', event.target.value), IconComponent: icons_material_1.KeyboardArrowDown, dense: true, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "slow", children: t(`settings.gasPrice.slow`) }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "normal", children: t(`settings.gasPrice.normal`) }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "fast", children: t(`settings.gasPrice.fast`) })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { flex: 1, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.gasPrice.title`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsxs)(Select_1.Select, { MenuProps: { elevation: 2 }, value: gasPrice, onChange: (event) => setValue('gasPrice', event.target.value), IconComponent: KeyboardArrowDown_1.default, dense: true, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "slow", children: t(`settings.gasPrice.slow`) }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "normal", children: t(`settings.gasPrice.normal`) }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "fast", children: t(`settings.gasPrice.fast`) })] }) })] }));
 };
 exports.GasPriceSelect = GasPriceSelect;

package/cjs/pages/SettingsPage/LanguageSelect.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LanguageSelect = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const KeyboardArrowDown_1 = require("@mui/icons-material/KeyboardArrowDown");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const Card_1 = require("../../components/Card");
@@ -30,7 +30,7 @@ const LanguageSelect = () => {
     const value = filteredLanguages.includes(language || i18n.resolvedLanguage)
         ? language || i18n.resolvedLanguage
         : languages?.default || languages?.allow?.[0];
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { mb: 2, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`language.title`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(Select_1.Select, { MenuProps: { elevation: 2 }, value: value, onChange: handleChangeLanguage, IconComponent: icons_material_1.KeyboardArrowDown, dense: true, children: filteredLanguages.map((lng) => {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { mb: 2, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`language.title`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(Select_1.Select, { MenuProps: { elevation: 2 }, value: value, onChange: handleChangeLanguage, IconComponent: KeyboardArrowDown_1.default, dense: true, children: filteredLanguages.map((lng) => {
                         return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: lng, children: t('language.name', { lng }) }, lng));
                     }) }) })] }));
 };

package/cjs/pages/SettingsPage/RoutePrioritySelect.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RoutePrioritySelect = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@lifi/sdk");
-const icons_material_1 = require("@mui/icons-material");
+const KeyboardArrowDown_1 = require("@mui/icons-material/KeyboardArrowDown");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const Card_1 = require("../../components/Card");
@@ -14,7 +14,7 @@ const RoutePrioritySelect = () => {
     const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     const { routePriority } = (0, stores_1.useSettings)(['routePriority']);
     const value = routePriority ?? '';
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.routePriority`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(Select_1.Select, { MenuProps: { elevation: 2 }, value: value, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: icons_material_1.KeyboardArrowDown, dense: true, children: sdk_1.Orders.map((order) => {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.routePriority`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(Select_1.Select, { MenuProps: { elevation: 2 }, value: value, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDown_1.default, dense: true, children: sdk_1.Orders.map((order) => {
                         const tag = t(`swap.tags.${order.toUpperCase()}`);
                         const tagName = `${tag[0]}${tag.slice(1).toLowerCase()}`;
                         return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: order, children: tagName }, order));

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapDetailsPage = 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 DeleteOutline_1 = require("@mui/icons-material/DeleteOutline");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
@@ -40,7 +41,7 @@ const SwapDetailsPage = () => {
         await navigator.clipboard.writeText(supportId);
     };
     (0, react_1.useEffect)(() => {
-        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) }));
+        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
     }, [toggleDialog]);
     const startedAt = new Date(routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0);
     return ((0, jsx_runtime_1.jsxs)(SwapDetailsPage_style_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
@@ -52,6 +53,6 @@ const SwapDetailsPage = () => {
                         }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                             display: 'flex',
                             flex: 1,
-                        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('swap.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
+                        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('swap.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(ContentCopy_1.default, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
 };
 exports.SwapDetailsPage = SwapDetailsPage;

package/cjs/pages/SwapHistoryPage/SwapHistoryEmpty.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapHistoryEmpty = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const ReceiptLongRounded_1 = require("@mui/icons-material/ReceiptLongRounded");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const SwapHistoryEmpty = () => {
@@ -14,6 +14,6 @@ const SwapHistoryEmpty = () => {
             alignItems: 'center',
             justifyContent: 'center',
             paddingY: 12,
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(icons_material_1.ReceiptLongRounded, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.emptySwapHistory') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.emptySwapHistory') })] }));
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(ReceiptLongRounded_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.emptySwapHistory') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.emptySwapHistory') })] }));
 };
 exports.SwapHistoryEmpty = SwapHistoryEmpty;

package/cjs/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapHistoryPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable consistent-return */
-const icons_material_1 = require("@mui/icons-material");
+const DeleteOutline_1 = require("@mui/icons-material/DeleteOutline");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
@@ -25,7 +24,7 @@ const SwapHistoryPage = () => {
     }, []);
     (0, react_1.useEffect)(() => {
         if (swaps.length) {
-            return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) }));
+            return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
         }
     }, [swaps.length, toggleDialog]);
     if (!swaps.length) {

package/cjs/pages/SwapPage/ExchangeRateBottomSheet.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTokenValueLossThreshold = exports.ExchangeRateBottomSheet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
 const material_1 = require("@mui/material");
 const big_js_1 = require("big.js");
 const react_1 = require("react");
@@ -47,7 +47,7 @@ const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const ref = (0, react_1.useRef)();
     (0, hooks_1.useSetContentHeight)(ref);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(icons_material_1.WarningRounded, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.rateChanged') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('swap.warning.message.rateChanged') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.quotedAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.rateChanged') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('swap.warning.message.rateChanged') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.quotedAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: (0, utils_1.formatTokenAmount)(data?.oldToAmount, data?.toToken.decimals, 5),
                             }), ' ', data?.toToken.symbol] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.currentAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: (0, utils_1.formatTokenAmount)(data?.newToAmount, data?.toToken.decimals, 5),

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusBottomSheet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable consistent-return */
-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 material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
@@ -140,8 +142,8 @@ const StatusBottomSheet = ({ status, route, }) => {
             ref.current?.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, { ref: ref, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, { status: status, mb: 1, children: [status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(icons_material_1.InfoRounded, { color: "primary" })) : null, status === stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Partial) ||
-                                    (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Refunded) ? ((0, jsx_runtime_1.jsx)(icons_material_1.WarningRounded, { color: "warning" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Failed) ? ((0, jsx_runtime_1.jsx)(icons_material_1.ErrorRounded, { color: "error" })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }), (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, py: 1, disableDescription: true })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: primaryMessage }), secondaryMessage ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: secondaryMessage })) : null, (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsxs)(material_1.Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === stores_1.RouteExecutionStatus.Idle ? t('button.ok') : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done)
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, { ref: ref, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, { status: status, mb: 1, children: [status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(InfoRounded_1.default, { color: "primary" })) : null, status === stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(Done_1.default, { color: "success" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Partial) ||
+                                    (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Refunded) ? ((0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Failed) ? ((0, jsx_runtime_1.jsx)(ErrorRounded_1.default, { color: "error" })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }), (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, py: 1, disableDescription: true })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: primaryMessage }), secondaryMessage ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: secondaryMessage })) : null, (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsxs)(material_1.Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === stores_1.RouteExecutionStatus.Idle ? t('button.ok') : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done)
                                 ? t('button.done')
                                 : null, status === stores_1.RouteExecutionStatus.Failed
                                 ? t('button.seeDetails')

package/cjs/pages/SwapPage/SwapPage.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const Delete_1 = require("@mui/icons-material/Delete");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
@@ -71,6 +71,6 @@ const SwapPage = () => {
                 status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", children: [(0, jsx_runtime_1.jsx)(StartSwapButton_1.StartSwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route }), status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,
-                                    }, children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, {}) }) })) : null] })] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? ((0, jsx_runtime_1.jsx)(ExchangeRateBottomSheet_1.ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));
+                                    }, children: (0, jsx_runtime_1.jsx)(Delete_1.default, {}) }) })) : null] })] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? ((0, jsx_runtime_1.jsx)(ExchangeRateBottomSheet_1.ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));
 };
 exports.SwapPage = SwapPage;

package/cjs/pages/SwapPage/TokenValueBottomSheet.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTokenValueLossThreshold = exports.TokenValueBottomSheet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
 const material_1 = require("@mui/material");
 const big_js_1 = require("big.js");
 const react_1 = require("react");
@@ -21,7 +21,7 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const ref = (0, react_1.useRef)();
     (0, hooks_1.useSetContentHeight)(ref);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(icons_material_1.WarningRounded, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.highValueLoss') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('swap.warning.message.highValueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.swapping') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.gasCost') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.receiving') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.valueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [(0, big_js_1.default)(route.toAmountUSD || 0)
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.highValueLoss') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('swap.warning.message.highValueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.swapping') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.gasCost') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.receiving') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.valueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [(0, big_js_1.default)(route.toAmountUSD || 0)
                                 .div((0, big_js_1.default)(route.fromAmountUSD || 0).plus((0, big_js_1.default)(route.gasCostUSD || 0)))
                                 .minus(1)
                                 .mul(100)

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, {}) }) })] }) }));
 };