@lifi/widget 1.31.1 → 1.32.1

package/cjs/pages/ActiveSwapsPage/ActiveSwapsPage.js

@@ -24,15 +24,15 @@ const ActiveSwapsPage = () => {
     }, []);
     (0, react_1.useEffect)(() => {
         if (executingRoutes.length) {
-            return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ 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)(icons_material_1.DeleteOutline, {}) }));
         }
     }, [executingRoutes.length, toggleDialog]);
     if (!executingRoutes.length) {
         return (0, jsx_runtime_1.jsx)(ActiveSwapsEmpty_1.ActiveSwapsEmpty, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                     paddingLeft: 1.5,
                     paddingRight: 1.5,
-                } }, { children: executingRoutes.map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwapItem, { routeId: routeId }, routeId))) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteActiveSwaps') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteActiveSwaps') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: () => deleteRoutes('active'), autoFocus: true }, { children: t('button.delete') }))] })] }))] })));
+                }, children: executingRoutes.map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwapItem, { routeId: routeId }, routeId))) }), (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.deleteActiveSwaps') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteActiveSwaps') }) }), (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: () => deleteRoutes('active'), autoFocus: true, children: t('button.delete') })] })] })] }));
 };
 exports.ActiveSwapsPage = ActiveSwapsPage;

package/cjs/pages/MainPage/MainPage.js

@@ -18,6 +18,6 @@ const MainPage = () => {
     const expandable = (0, hooks_1.useExpandableVariant)();
     const { variant } = (0, providers_1.useWidgetConfig)();
     const nft = variant === 'nft';
-    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), nft ? (0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mx: 3, mt: 1, mb: 1 }) : null, (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), !nft ? (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from", mx: 3, mb: 3 }) : null, !expandable ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }) : null, (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), nft ? (0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mx: 3, mt: 1, mb: 1 }) : null, (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), !nft ? (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from", mx: 3, mb: 3 }) : null, !expandable ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }) : null, (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mx: 3, mb: 1, children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] })] })] }));
 };
 exports.MainPage = MainPage;

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

@@ -6,6 +6,6 @@ export declare const FormContainer: import("@emotion/styled").StyledComponent<{
     fixed?: boolean | undefined;
     maxWidth?: false | import("@mui/material").Breakpoint | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & 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" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/pages/MainPage/MainSwapButton.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MainSwapButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -22,15 +13,15 @@ const MainSwapButton = () => {
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const { routes: swapRoutes, isLoading, isFetching } = (0, hooks_1.useSwapRoutes)();
-    const currentRoute = swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes[0];
-    const handleClick = () => __awaiter(void 0, void 0, void 0, function* () {
+    const currentRoute = swapRoutes?.[0];
+    const handleClick = async () => {
         if (currentRoute) {
             setExecutableRoute(currentRoute);
             navigate(utils_1.navigationRoutes.swapExecution, {
                 state: { routeId: currentRoute.id },
             });
         }
-    });
+    };
     return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, disabled: currentRoute && (isLoading || isFetching || isValidating || !isValid) }));
 };
 exports.MainSwapButton = MainSwapButton;

package/cjs/pages/SelectChainPage/SelectChainPage.js

@@ -1,26 +1,18 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectChainPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const ChainSelect_1 = require("../../components/ChainSelect");
+const ListItemButton_1 = require("../../components/ListItemButton");
+const ListItemText_1 = require("../../components/ListItemText");
 const TokenList_1 = require("../../components/TokenList");
 const hooks_1 = require("../../hooks");
-const SelectChainPage_style_1 = require("./SelectChainPage.style");
 const SelectChainPage = ({ formType, selectNativeToken, }) => {
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { chains, setCurrentChain } = (0, ChainSelect_1.useChainSelect)(formType);
     const selectToken = (0, TokenList_1.useTokenSelect)(formType, navigateBack);
-    const handleClick = (chain) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleClick = async (chain) => {
         if (selectNativeToken) {
             selectToken(chain.nativeToken.address, chain.id);
         }
@@ -28,10 +20,10 @@ const SelectChainPage = ({ formType, selectNativeToken, }) => {
             setCurrentChain(chain.id);
             navigateBack();
         }
-    });
-    return ((0, jsx_runtime_1.jsx)(material_1.Container, Object.assign({ disableGutters: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ sx: {
+    };
+    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: chains === null || chains === void 0 ? void 0 : chains.map((chain) => ((0, jsx_runtime_1.jsxs)(SelectChainPage_style_1.ListItemButton, Object.assign({ onClick: () => handleClick(chain), disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] })) }), (0, jsx_runtime_1.jsx)(SelectChainPage_style_1.ListItemText, { primary: chain.name })] }), chain.id))) })) })));
+            }, children: chains?.map((chain) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => handleClick(chain), disableRipple: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: chain.logoURI, alt: chain.name, children: chain.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: chain.name })] }, chain.id))) }) }));
 };
 exports.SelectChainPage = SelectChainPage;

package/cjs/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SelectEnabledToolsPage: React.FC<{
+    type: 'Bridges' | 'Exchanges';
+}>;

package/cjs/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.js

@@ -0,0 +1,51 @@
+"use strict";
+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 material_1 = require("@mui/material");
+const Header_1 = require("../../components/Header");
+const react_1 = require("react");
+const shallow_1 = require("zustand/shallow");
+const ListItemText_1 = require("../../components/ListItemText");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const SelectEnabledToolsPage_style_1 = require("./SelectEnabledToolsPage.style");
+const SelectEnabledToolsPage = ({ type }) => {
+    const typeKey = type.toLowerCase();
+    const { tools } = (0, hooks_1.useTools)();
+    const [enabledTools, setTools] = (0, stores_1.useSettingsStore)((state) => [state[`enabled${type}`], state.setTools], shallow_1.shallow);
+    const handleClick = (key) => {
+        if (!tools) {
+            return;
+        }
+        const toolKeys = tools[typeKey].map((tool) => tool.key);
+        if (enabledTools?.includes(key)) {
+            setTools(type, enabledTools.filter((toolKey) => toolKey !== key), toolKeys);
+        }
+        else {
+            setTools(type, [...enabledTools, key], toolKeys);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const allToolsSelected = tools?.[typeKey].length === enabledTools.length;
+        const toggleCheckboxes = () => {
+            if (!tools) {
+                return;
+            }
+            const toolKeys = tools[typeKey].map((tool) => tool.key);
+            if (allToolsSelected) {
+                setTools(type, [], toolKeys);
+            }
+            else {
+                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, {})) }));
+    }, [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), disableRipple: true, 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))) }) }));
+};
+exports.SelectEnabledToolsPage = SelectEnabledToolsPage;

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/cjs/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.style.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemButton = void 0;
+const styles_1 = require("@mui/material/styles");
+const ListItemButton_1 = require("../../components/ListItemButton");
+exports.ListItemButton = (0, styles_1.styled)(ListItemButton_1.ListItemButton)(({ theme }) => ({
+    paddingRight: theme.spacing(1),
+}));

package/cjs/pages/SelectEnabledToolsPage/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectEnabledToolsPage';

package/cjs/pages/SelectEnabledToolsPage/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SelectEnabledToolsPage"), exports);

package/cjs/pages/SelectNativeTokenPage/SelectNativeTokenPage.js

@@ -4,18 +4,19 @@ exports.SelectNativeTokenPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
+const ListItemButton_1 = require("../../components/ListItemButton");
+const ListItemText_1 = require("../../components/ListItemText");
 const TokenAvatar_1 = require("../../components/TokenAvatar");
 const TokenList_1 = require("../../components/TokenList");
 const hooks_1 = require("../../hooks");
-const SelectNativeTokenPage_style_1 = require("./SelectNativeTokenPage.style");
 const SelectNativeTokenPage = ({ formType, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { chains } = (0, hooks_1.useChains)();
     const selectToken = (0, TokenList_1.useTokenSelect)(formType, navigateBack);
-    return ((0, jsx_runtime_1.jsx)(material_1.Container, Object.assign({ disableGutters: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ sx: {
+    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: chains === null || chains === void 0 ? void 0 : chains.map((chain) => ((0, jsx_runtime_1.jsxs)(SelectNativeTokenPage_style_1.ListItemButton, Object.assign({ onClick: () => selectToken(chain.nativeToken.address, chain.id), disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: chain.nativeToken, chain: chain }) }), (0, jsx_runtime_1.jsx)(SelectNativeTokenPage_style_1.ListItemText, { primary: chain.nativeToken.symbol, secondary: t('swap.onChain', { chainName: chain.name }) })] }), chain.id))) })) })));
+            }, children: chains?.map((chain) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => selectToken(chain.nativeToken.address, chain.id), disableRipple: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: chain.nativeToken, chain: chain }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: chain.nativeToken.symbol, secondary: t('swap.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
 };
 exports.SelectNativeTokenPage = SelectNativeTokenPage;

package/cjs/pages/SelectTokenPage/SearchTokenInput.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SearchTokenInput: () => JSX.Element;

package/cjs/pages/SelectTokenPage/SearchTokenInput.js

@@ -16,6 +16,9 @@ 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, Object.assign({ 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, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Search, {}) })), inputProps: Object.assign({ inputMode: 'search' }, register(providers_1.SwapFormKey.TokenSearchFilter)), autoComplete: "off" }) })) }));
+    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: {
+                    inputMode: 'search',
+                    ...register(providers_1.SwapFormKey.TokenSearchFilter),
+                }, autoComplete: "off" }) }) }));
 };
 exports.SearchTokenInput = SearchTokenInput;

package/cjs/pages/SelectTokenPage/SelectTokenPage.js

@@ -16,9 +16,8 @@ const SelectTokenPage = ({ formType }) => {
     const contentHeight = (0, hooks_1.useContentHeight)();
     const [tokenListHeight, setTokenListHeight] = (0, react_1.useState)(0);
     (0, react_1.useLayoutEffect)(() => {
-        var _a, _b;
-        setTokenListHeight(Math.max(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0), minTokenListHeight));
+        setTokenListHeight(Math.max(contentHeight - (headerRef.current?.offsetHeight ?? 0), minTokenListHeight));
     }, [contentHeight]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) }))] })), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { pt: 1, pb: 2, px: 3, ref: headerRef, children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) })] }), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] }));
 };
 exports.SelectTokenPage = SelectTokenPage;

package/cjs/pages/SelectWalletPage/SelectWalletPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SelectWalletPage: () => JSX.Element;

package/cjs/pages/SelectWalletPage/SelectWalletPage.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectWalletPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -16,19 +7,22 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const Dialog_1 = require("../../components/Dialog");
+const ListItemButton_1 = require("../../components/ListItemButton");
+const ListItemText_1 = require("../../components/ListItemText");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
-const SelectWalletPage_style_1 = require("./SelectWalletPage.style");
 const SelectWalletPage = () => {
-    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { connect } = (0, providers_1.useWallet)();
     const [walletIdentity, setWalletIdentity] = (0, react_1.useState)({ show: false });
     const closeDialog = () => {
-        setWalletIdentity((state) => (Object.assign(Object.assign({}, state), { show: false })));
+        setWalletIdentity((state) => ({
+            ...state,
+            show: false,
+        }));
     };
-    const handleConnect = (0, react_1.useCallback)((wallet) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleConnect = (0, react_1.useCallback)(async (wallet) => {
         const { ethereum } = window;
         const identityCheckPassed = wallet.checkProviderIdentity({
             provider: ethereum,
@@ -41,13 +35,13 @@ const SelectWalletPage = () => {
             return;
         }
         navigateBack();
-        yield connect(wallet);
-    }), [connect, navigateBack]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ sx: {
+        await connect(wallet);
+    }, [connect, navigateBack]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(material_1.List, { sx: {
                     paddingLeft: 1.5,
                     paddingRight: 1.5,
-                } }, { children: wallet_management_1.supportedWallets.map((wallet) => ((0, jsx_runtime_1.jsxs)(SelectWalletPage_style_1.ListItemButton, Object.assign({ onClick: () => handleConnect(wallet), disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: wallet.icon.src || wallet.icon, alt: wallet.name }, { children: wallet.name[0] })) }), (0, jsx_runtime_1.jsx)(SelectWalletPage_style_1.ListItemText, { primary: wallet.name })] }), wallet.name))) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ open: walletIdentity.show, onClose: closeDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('wallet.extensionNotFound', {
-                                name: (_a = walletIdentity.wallet) === null || _a === void 0 ? void 0 : _a.name,
-                            }) }) }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: closeDialog, autoFocus: true }, { children: t('button.ok') })) })] }))] })));
+                }, children: wallet_management_1.supportedWallets.map((wallet) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => handleConnect(wallet), disableRipple: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: wallet.icon.src || wallet.icon, alt: wallet.name, children: wallet.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: wallet.name })] }, wallet.name))) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: walletIdentity.show, onClose: closeDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('wallet.extensionNotFound', {
+                                name: walletIdentity.wallet?.name,
+                            }) }) }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: closeDialog, autoFocus: true, children: t('button.ok') }) })] })] }));
 };
 exports.SelectWalletPage = SelectWalletPage;

package/cjs/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -13,13 +13,13 @@ const ColorSchemeButtonGroup = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { disableAppearance, hiddenUI } = (0, providers_1.useWidgetConfig)();
     const [appearance, setAppearance] = (0, stores_1.useAppearance)();
-    if (disableAppearance || (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(types_1.HiddenUI.Appearance))) {
+    if (disableAppearance || hiddenUI?.includes(types_1.HiddenUI.Appearance)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pb: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.ToggleButtonGroup, Object.assign({ color: "primary", value: appearance, onChange: (_, value) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { pb: 2, children: (0, jsx_runtime_1.jsxs)(material_1.ToggleButtonGroup, { color: "primary", value: appearance, onChange: (_, value) => {
                 if (value) {
                     setAppearance(value);
                 }
-            }, exclusive: true, fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(ColorSchemeButtonGroup_style_1.ToggleButton, Object.assign({ 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, Object.assign({ 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, Object.assign({ 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)(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')] })] }) }));
 };
 exports.ColorSchemeButtonGroup = ColorSchemeButtonGroup;

package/cjs/pages/SettingsPage/ColorSchemeButtonGroup.style.d.ts

@@ -2,7 +2,7 @@
 export declare const ToggleButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ToggleButtonClasses> | undefined;
-    color?: "success" | "warning" | "error" | "info" | "primary" | "secondary" | "standard" | undefined;
+    color?: "success" | "warning" | "error" | "primary" | "secondary" | "info" | "standard" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -28,6 +28,6 @@ export declare const ToggleButton: import("@emotion/styled").StyledComponent<{
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "onChange" | "onClick" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "fullWidth" | "size" | "value" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/pages/SettingsPage/EnabledToolsButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const EnabledToolsButton: React.FC<{
+    type: 'Bridges' | 'Exchanges';
+}>;

package/cjs/pages/SettingsPage/EnabledToolsButton.js

@@ -0,0 +1,25 @@
+"use strict";
+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 material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const shallow_1 = require("zustand/shallow");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const EnabledToolsButton_style_1 = require("./EnabledToolsButton.style");
+const EnabledToolsButton = ({ type }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    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];
+    }, shallow_1.shallow);
+    const handleClick = () => {
+        navigate(utils_1.navigationRoutes[type.toLowerCase()]);
+    };
+    return ((0, jsx_runtime_1.jsxs)(EnabledToolsButton_style_1.ListItemButton, { onClick: handleClick, disableRipple: true, 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, {})] })] }));
+};
+exports.EnabledToolsButton = EnabledToolsButton;

package/cjs/pages/{SelectChainPage/SelectChainPage.style.d.ts → SettingsPage/EnabledToolsButton.style.d.ts}

@@ -15,7 +15,7 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/pages/{SelectChainPage/SelectChainPage.style.js → SettingsPage/EnabledToolsButton.style.js}

@@ -4,17 +4,14 @@ exports.ListItemText = exports.ListItemButton = void 0;
 const material_1 = require("@mui/material");
 const ListItemText_1 = require("@mui/material/ListItemText");
 const styles_1 = require("@mui/material/styles");
-const utils_1 = require("../../utils");
-exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
-    borderRadius: theme.shape.borderRadius,
-    paddingLeft: theme.spacing(1.5),
-    height: 56,
-    '&:hover': {
-        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme, '4%'),
-    },
+const ListItemButton_1 = require("../../components/ListItemButton");
+exports.ListItemButton = (0, styles_1.styled)(ListItemButton_1.ListItemButton)(({ theme }) => ({
+    height: 48,
+    paddingRight: theme.spacing(0.5),
 }));
-exports.ListItemText = (0, styles_1.styled)(material_1.ListItemText)(({ theme }) => ({
+exports.ListItemText = (0, styles_1.styled)(material_1.ListItemText)({
     [`.${ListItemText_1.listItemTextClasses.primary}`]: {
         fontWeight: 400,
+        fontSize: '1rem',
     },
-}));
+});

package/cjs/pages/SettingsPage/GasPriceSelect.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const GasPriceSelect: () => JSX.Element;

package/cjs/pages/SettingsPage/GasPriceSelect.js

@@ -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, Object.assign({ flex: 1 }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.gasPrice.title`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsxs)(Select_1.Select, Object.assign({ 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, Object.assign({ value: "slow" }, { children: t(`settings.gasPrice.slow`) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: "normal" }, { children: t(`settings.gasPrice.normal`) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ 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: 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`) })] }) })] }));
 };
 exports.GasPriceSelect = GasPriceSelect;

package/cjs/pages/SettingsPage/LanguageSelect.js

@@ -11,12 +11,11 @@ const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const types_1 = require("../../types");
 const LanguageSelect = () => {
-    var _a;
     const { t, i18n } = (0, react_i18next_1.useTranslation)();
     const { languages, hiddenUI } = (0, providers_1.useWidgetConfig)();
     const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     const { language } = (0, stores_1.useSettings)(['language']);
-    if (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(types_1.HiddenUI.Language)) {
+    if (hiddenUI?.includes(types_1.HiddenUI.Language)) {
         return null;
     }
     const handleChangeLanguage = (event) => {
@@ -30,9 +29,9 @@ const LanguageSelect = () => {
     }
     const value = filteredLanguages.includes(language || i18n.resolvedLanguage)
         ? language || i18n.resolvedLanguage
-        : (languages === null || languages === void 0 ? void 0 : languages.default) || ((_a = languages === null || languages === void 0 ? void 0 : languages.allow) === null || _a === void 0 ? void 0 : _a[0]);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`language.title`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ MenuProps: { elevation: 2 }, value: value, onChange: handleChangeLanguage, IconComponent: icons_material_1.KeyboardArrowDown, dense: true }, { children: filteredLanguages.map((lng) => {
-                        return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: lng }, { children: t('language.name', { lng }) }), lng));
-                    }) })) }))] })));
+        : 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.jsx)(material_1.MenuItem, { value: lng, children: t('language.name', { lng }) }, lng));
+                    }) }) })] }));
 };
 exports.LanguageSelect = LanguageSelect;

package/cjs/pages/SettingsPage/ResetSettingsButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ResetSettingsButton: React.FC;

package/cjs/pages/SettingsPage/ResetSettingsButton.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetSettingsButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const Dialog_1 = require("../../components/Dialog");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const ResetSettingsButton = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { tools } = (0, hooks_1.useTools)();
+    const resetSettings = (0, stores_1.useSettingsStore)((state) => state.reset);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const toggleDialog = (0, react_1.useCallback)(() => {
+        setOpen((open) => !open);
+    }, []);
+    const handleReset = () => {
+        if (tools) {
+            resetSettings(tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key));
+        }
+        toggleDialog();
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { px: 3, mt: 1.5, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), (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.resetSettings') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.resetSettings') }) }), (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: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }));
+};
+exports.ResetSettingsButton = ResetSettingsButton;

package/cjs/pages/SettingsPage/RoutePrioritySelect.js

@@ -13,11 +13,11 @@ const RoutePrioritySelect = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     const { routePriority } = (0, stores_1.useSettings)(['routePriority']);
-    const value = routePriority !== null && routePriority !== void 0 ? 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, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ 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) => {
+    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) => {
                         const tag = t(`swap.tags.${order.toUpperCase()}`);
                         const tagName = `${tag[0]}${tag.slice(1).toLowerCase()}`;
-                        return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: order }, { children: tagName }), order));
-                    }) })) }))] }));
+                        return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: order, children: tagName }, order));
+                    }) }) })] }));
 };
 exports.RoutePrioritySelect = RoutePrioritySelect;

package/cjs/pages/SettingsPage/SettingsPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SettingsPage: () => JSX.Element;