@lifi/widget 1.31.0 → 1.32.0

package/pages/SelectChainPage/SelectChainPage.js

@@ -1,23 +1,15 @@
-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());
-    });
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Container, List, ListItemAvatar } from '@mui/material';
 import { useChainSelect } from '../../components/ChainSelect';
+import { ListItemButton } from '../../components/ListItemButton';
+import { ListItemText } from '../../components/ListItemText';
 import { useTokenSelect } from '../../components/TokenList';
 import { useNavigateBack } from '../../hooks';
-import { ListItemButton, ListItemText } from './SelectChainPage.style';
 export const SelectChainPage = ({ formType, selectNativeToken, }) => {
     const { navigateBack } = useNavigateBack();
     const { chains, setCurrentChain } = useChainSelect(formType);
     const selectToken = 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);
         }
@@ -25,9 +17,9 @@ export const SelectChainPage = ({ formType, selectNativeToken, }) => {
             setCurrentChain(chain.id);
             navigateBack();
         }
-    });
-    return (_jsx(Container, Object.assign({ disableGutters: true }, { children: _jsx(List, Object.assign({ sx: {
+    };
+    return (_jsx(Container, { disableGutters: true, children: _jsx(List, { sx: {
                 paddingLeft: 1.5,
                 paddingRight: 1.5,
-            } }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(ListItemButton, Object.assign({ onClick: () => handleClick(chain), disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] })) }), _jsx(ListItemText, { primary: chain.name })] }), chain.id))) })) })));
+            }, children: chains?.map((chain) => (_jsxs(ListItemButton, { onClick: () => handleClick(chain), disableRipple: true, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: chain.logoURI, alt: chain.name, children: chain.name[0] }) }), _jsx(ListItemText, { primary: chain.name })] }, chain.id))) }) }));
 };

package/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.d.ts

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

package/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckBox, CheckBoxOutlineBlankOutlined, CheckBoxOutlined, IndeterminateCheckBoxOutlined, } from '@mui/icons-material';
+import { Avatar, Container, IconButton, List, ListItemAvatar, } from '@mui/material';
+import { useHeaderActionStore } from '../../components/Header';
+import { useEffect } from 'react';
+import { shallow } from 'zustand/shallow';
+import { ListItemText } from '../../components/ListItemText';
+import { useTools } from '../../hooks';
+import { useSettingsStore } from '../../stores';
+import { ListItemButton } from './SelectEnabledToolsPage.style';
+export const SelectEnabledToolsPage = ({ type }) => {
+    const typeKey = type.toLowerCase();
+    const { tools } = useTools();
+    const [enabledTools, setTools] = useSettingsStore((state) => [state[`enabled${type}`], state.setTools], 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);
+        }
+    };
+    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 useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? (_jsx(CheckBoxOutlined, {})) : enabledTools.length ? (_jsx(IndeterminateCheckBoxOutlined, {})) : (_jsx(CheckBoxOutlineBlankOutlined, {})) }));
+    }, [enabledTools.length, setTools, tools, type, typeKey]);
+    return (_jsx(Container, { disableGutters: true, children: _jsx(List, { sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            }, children: tools?.[typeKey].map((tool) => (_jsxs(ListItemButton, { onClick: () => handleClick(tool.key), disableRipple: true, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: tool.logoURI, alt: tool.name, children: tool.name[0] }) }), _jsx(ListItemText, { primary: tool.name }), enabledTools?.includes(tool.key) ? (_jsx(CheckBox, { color: "primary" })) : (_jsx(CheckBoxOutlineBlankOutlined, {}))] }, tool.name))) }) }));
+};

package/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/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.style.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/material/styles';
+import { ListItemButton as ListItemButtonBase } from '../../components/ListItemButton';
+export const ListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
+    paddingRight: theme.spacing(1),
+}));

package/pages/SelectEnabledToolsPage/index.d.ts

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

package/pages/SelectEnabledToolsPage/index.js

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

package/pages/SelectNativeTokenPage/SelectNativeTokenPage.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Container, List, ListItemAvatar } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { ListItemButton } from '../../components/ListItemButton';
+import { ListItemText } from '../../components/ListItemText';
 import { TokenAvatar } from '../../components/TokenAvatar';
 import { useTokenSelect } from '../../components/TokenList';
 import { useChains, useNavigateBack } from '../../hooks';
-import { ListItemButton, ListItemText } from './SelectNativeTokenPage.style';
 export const SelectNativeTokenPage = ({ formType, }) => {
     const { t } = useTranslation();
     const { navigateBack } = useNavigateBack();
     const { chains } = useChains();
     const selectToken = useTokenSelect(formType, navigateBack);
-    return (_jsx(Container, Object.assign({ disableGutters: true }, { children: _jsx(List, Object.assign({ sx: {
+    return (_jsx(Container, { disableGutters: true, children: _jsx(List, { sx: {
                 paddingLeft: 1.5,
                 paddingRight: 1.5,
-            } }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(ListItemButton, Object.assign({ onClick: () => selectToken(chain.nativeToken.address, chain.id), disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(TokenAvatar, { token: chain.nativeToken, chain: chain }) }), _jsx(ListItemText, { primary: chain.nativeToken.symbol, secondary: t('swap.onChain', { chainName: chain.name }) })] }), chain.id))) })) })));
+            }, children: chains?.map((chain) => (_jsxs(ListItemButton, { onClick: () => selectToken(chain.nativeToken.address, chain.id), disableRipple: true, children: [_jsx(ListItemAvatar, { children: _jsx(TokenAvatar, { token: chain.nativeToken, chain: chain }) }), _jsx(ListItemText, { primary: chain.nativeToken.symbol, secondary: t('swap.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
 };

package/pages/SelectTokenPage/SearchTokenInput.d.ts

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

package/pages/SelectTokenPage/SearchTokenInput.js

@@ -13,5 +13,8 @@ export const SearchTokenInput = () => {
     useEffect(() => () => {
         setValue(SwapFormKey.TokenSearchFilter, '');
     }, [setValue]);
-    return (_jsx(Card, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(SearchIcon, {}) })), inputProps: Object.assign({ inputMode: 'search' }, register(SwapFormKey.TokenSearchFilter)), autoComplete: "off" }) })) }));
+    return (_jsx(Card, { children: _jsx(FormControl, { fullWidth: true, children: _jsx(Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(SearchIcon, {}) }), inputProps: {
+                    inputMode: 'search',
+                    ...register(SwapFormKey.TokenSearchFilter),
+                }, autoComplete: "off" }) }) }));
 };

package/pages/SelectTokenPage/SelectTokenPage.js

@@ -13,8 +13,7 @@ export const SelectTokenPage = ({ formType }) => {
     const contentHeight = useContentHeight();
     const [tokenListHeight, setTokenListHeight] = useState(0);
     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 (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SearchTokenInput, {}) }))] })), _jsx(TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] })));
+    return (_jsxs(Container, { disableGutters: true, children: [_jsxs(Box, { pt: 1, pb: 2, px: 3, ref: headerRef, children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, { mt: 2, children: _jsx(SearchTokenInput, {}) })] }), _jsx(TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] }));
 };

package/pages/SelectWalletPage/SelectWalletPage.d.ts

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

package/pages/SelectWalletPage/SelectWalletPage.js

@@ -1,31 +1,25 @@
-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());
-    });
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { supportedWallets } from '@lifi/wallet-management';
 import { Avatar, Button, Container, DialogActions, DialogContent, DialogContentText, List, ListItemAvatar, } from '@mui/material';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dialog } from '../../components/Dialog';
+import { ListItemButton } from '../../components/ListItemButton';
+import { ListItemText } from '../../components/ListItemText';
 import { useNavigateBack } from '../../hooks';
 import { useWallet } from '../../providers';
-import { ListItemButton, ListItemText } from './SelectWalletPage.style';
 export const SelectWalletPage = () => {
-    var _a;
     const { t } = useTranslation();
     const { navigateBack } = useNavigateBack();
     const { connect } = useWallet();
     const [walletIdentity, setWalletIdentity] = useState({ show: false });
     const closeDialog = () => {
-        setWalletIdentity((state) => (Object.assign(Object.assign({}, state), { show: false })));
+        setWalletIdentity((state) => ({
+            ...state,
+            show: false,
+        }));
     };
-    const handleConnect = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleConnect = useCallback(async (wallet) => {
         const { ethereum } = window;
         const identityCheckPassed = wallet.checkProviderIdentity({
             provider: ethereum,
@@ -38,12 +32,12 @@ export const SelectWalletPage = () => {
             return;
         }
         navigateBack();
-        yield connect(wallet);
-    }), [connect, navigateBack]);
-    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsx(List, Object.assign({ sx: {
+        await connect(wallet);
+    }, [connect, navigateBack]);
+    return (_jsxs(Container, { disableGutters: true, children: [_jsx(List, { sx: {
                     paddingLeft: 1.5,
                     paddingRight: 1.5,
-                } }, { children: supportedWallets.map((wallet) => (_jsxs(ListItemButton, Object.assign({ onClick: () => handleConnect(wallet), disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: wallet.icon.src || wallet.icon, alt: wallet.name }, { children: wallet.name[0] })) }), _jsx(ListItemText, { primary: wallet.name })] }), wallet.name))) })), _jsxs(Dialog, Object.assign({ open: walletIdentity.show, onClose: closeDialog }, { children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('wallet.extensionNotFound', {
-                                name: (_a = walletIdentity.wallet) === null || _a === void 0 ? void 0 : _a.name,
-                            }) }) }), _jsx(DialogActions, { children: _jsx(Button, Object.assign({ variant: "contained", onClick: closeDialog, autoFocus: true }, { children: t('button.ok') })) })] }))] })));
+                }, children: supportedWallets.map((wallet) => (_jsxs(ListItemButton, { onClick: () => handleConnect(wallet), disableRipple: true, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: wallet.icon.src || wallet.icon, alt: wallet.name, children: wallet.name[0] }) }), _jsx(ListItemText, { primary: wallet.name })] }, wallet.name))) }), _jsxs(Dialog, { open: walletIdentity.show, onClose: closeDialog, children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('wallet.extensionNotFound', {
+                                name: walletIdentity.wallet?.name,
+                            }) }) }), _jsx(DialogActions, { children: _jsx(Button, { variant: "contained", onClick: closeDialog, autoFocus: true, children: t('button.ok') }) })] })] }));
 };

package/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -10,12 +10,12 @@ export const ColorSchemeButtonGroup = () => {
     const { t } = useTranslation();
     const { disableAppearance, hiddenUI } = useWidgetConfig();
     const [appearance, setAppearance] = useAppearance();
-    if (disableAppearance || (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.Appearance))) {
+    if (disableAppearance || hiddenUI?.includes(HiddenUI.Appearance)) {
         return null;
     }
-    return (_jsx(Box, Object.assign({ pb: 2 }, { children: _jsxs(ToggleButtonGroup, Object.assign({ color: "primary", value: appearance, onChange: (_, value) => {
+    return (_jsx(Box, { pb: 2, children: _jsxs(ToggleButtonGroup, { color: "primary", value: appearance, onChange: (_, value) => {
                 if (value) {
                     setAppearance(value);
                 }
-            }, exclusive: true, fullWidth: true }, { children: [_jsxs(ToggleButton, Object.assign({ value: "light" }, { children: [_jsx(LightModeIcon, { sx: { marginRight: 1 } }), t('button.light')] })), _jsxs(ToggleButton, Object.assign({ value: "dark" }, { children: [_jsx(DarkModeIcon, { sx: { marginRight: 1 } }), t('button.dark')] })), _jsxs(ToggleButton, Object.assign({ value: "auto" }, { children: [_jsx(Brightness4Icon, { sx: { marginRight: 1 } }), t('button.auto')] }))] })) })));
+            }, exclusive: true, fullWidth: true, children: [_jsxs(ToggleButton, { value: "light", children: [_jsx(LightModeIcon, { sx: { marginRight: 1 } }), t('button.light')] }), _jsxs(ToggleButton, { value: "dark", children: [_jsx(DarkModeIcon, { sx: { marginRight: 1 } }), t('button.dark')] }), _jsxs(ToggleButton, { value: "auto", children: [_jsx(Brightness4Icon, { sx: { marginRight: 1 } }), t('button.auto')] })] }) }));
 };

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

@@ -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/pages/SettingsPage/EnabledToolsButton.d.ts

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

package/pages/SettingsPage/EnabledToolsButton.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight as ChevronRightIcon } from '@mui/icons-material';
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { shallow } from 'zustand/shallow';
+import { useSettingsStore } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { ListItemButton, ListItemText } from './EnabledToolsButton.style';
+export const EnabledToolsButton = ({ type }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [enabledTools, tools] = useSettingsStore((state) => {
+        const enabledTools = Object.values(state[`_enabled${type}`] ?? {});
+        return [enabledTools.filter((tool) => tool).length, enabledTools.length];
+    }, shallow);
+    const handleClick = () => {
+        navigate(navigationRoutes[type.toLowerCase()]);
+    };
+    return (_jsxs(ListItemButton, { onClick: handleClick, disableRipple: true, children: [_jsx(ListItemText, { primary: t(`settings.enabled${type}`) }), _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(ListItemText, { primary: `${enabledTools}/${tools}` }), _jsx(ChevronRightIcon, {})] })] }));
+};

package/{cjs/pages/SelectWalletPage/SelectWalletPage.style.d.ts → pages/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/pages/SettingsPage/EnabledToolsButton.style.js

@@ -0,0 +1,14 @@
+import { ListItemText as MuiListItemText } from '@mui/material';
+import { listItemTextClasses } from '@mui/material/ListItemText';
+import { styled } from '@mui/material/styles';
+import { ListItemButton as ListItemButtonBase } from '../../components/ListItemButton';
+export const ListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
+    height: 48,
+    paddingRight: theme.spacing(0.5),
+}));
+export const ListItemText = styled(MuiListItemText)({
+    [`.${listItemTextClasses.primary}`]: {
+        fontWeight: 400,
+        fontSize: '1rem',
+    },
+});

package/pages/SettingsPage/GasPriceSelect.d.ts

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

package/pages/SettingsPage/GasPriceSelect.js

@@ -9,5 +9,5 @@ export const GasPriceSelect = () => {
     const { t } = useTranslation();
     const setValue = useSettingsStore((state) => state.setValue);
     const { gasPrice } = useSettings(['gasPrice']);
-    return (_jsxs(Card, Object.assign({ flex: 1 }, { children: [_jsx(CardTitle, { children: t(`settings.gasPrice.title`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsxs(Select, Object.assign({ MenuProps: { elevation: 2 }, value: gasPrice, onChange: (event) => setValue('gasPrice', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: [_jsx(MenuItem, Object.assign({ value: "slow" }, { children: t(`settings.gasPrice.slow`) })), _jsx(MenuItem, Object.assign({ value: "normal" }, { children: t(`settings.gasPrice.normal`) })), _jsx(MenuItem, Object.assign({ value: "fast" }, { children: t(`settings.gasPrice.fast`) }))] })) }))] })));
+    return (_jsxs(Card, { flex: 1, children: [_jsx(CardTitle, { children: t(`settings.gasPrice.title`) }), _jsx(FormControl, { fullWidth: true, children: _jsxs(Select, { MenuProps: { elevation: 2 }, value: gasPrice, onChange: (event) => setValue('gasPrice', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true, children: [_jsx(MenuItem, { value: "slow", children: t(`settings.gasPrice.slow`) }), _jsx(MenuItem, { value: "normal", children: t(`settings.gasPrice.normal`) }), _jsx(MenuItem, { value: "fast", children: t(`settings.gasPrice.fast`) })] }) })] }));
 };

package/pages/SettingsPage/LanguageSelect.js

@@ -8,12 +8,11 @@ import { useWidgetConfig } from '../../providers';
 import { useSettings, useSettingsStore } from '../../stores';
 import { HiddenUI } from '../../types';
 export const LanguageSelect = () => {
-    var _a;
     const { t, i18n } = useTranslation();
     const { languages, hiddenUI } = useWidgetConfig();
     const setValue = useSettingsStore((state) => state.setValue);
     const { language } = useSettings(['language']);
-    if (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.Language)) {
+    if (hiddenUI?.includes(HiddenUI.Language)) {
         return null;
     }
     const handleChangeLanguage = (event) => {
@@ -27,8 +26,8 @@ export 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 (_jsxs(Card, Object.assign({ mb: 2 }, { children: [_jsx(CardTitle, { children: t(`language.title`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ MenuProps: { elevation: 2 }, value: value, onChange: handleChangeLanguage, IconComponent: KeyboardArrowDownIcon, dense: true }, { children: filteredLanguages.map((lng) => {
-                        return (_jsx(MenuItem, Object.assign({ value: lng }, { children: t('language.name', { lng }) }), lng));
-                    }) })) }))] })));
+        : languages?.default || languages?.allow?.[0];
+    return (_jsxs(Card, { mb: 2, children: [_jsx(CardTitle, { children: t(`language.title`) }), _jsx(FormControl, { fullWidth: true, children: _jsx(Select, { MenuProps: { elevation: 2 }, value: value, onChange: handleChangeLanguage, IconComponent: KeyboardArrowDownIcon, dense: true, children: filteredLanguages.map((lng) => {
+                        return (_jsx(MenuItem, { value: lng, children: t('language.name', { lng }) }, lng));
+                    }) }) })] }));
 };

package/pages/SettingsPage/ResetSettingsButton.d.ts

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

package/pages/SettingsPage/ResetSettingsButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, DialogActions, DialogContent, DialogContentText, DialogTitle, } from '@mui/material';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from '../../components/Dialog';
+import { useTools } from '../../hooks';
+import { useSettingsStore } from '../../stores';
+export const ResetSettingsButton = () => {
+    const { t } = useTranslation();
+    const { tools } = useTools();
+    const resetSettings = useSettingsStore((state) => state.reset);
+    const [open, setOpen] = useState(false);
+    const toggleDialog = useCallback(() => {
+        setOpen((open) => !open);
+    }, []);
+    const handleReset = () => {
+        if (tools) {
+            resetSettings(tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key));
+        }
+        toggleDialog();
+    };
+    return (_jsxs(Box, { px: 3, mt: 1.5, children: [_jsx(Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('swap.warning.title.resetSettings') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.resetSettings') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }));
+};

package/pages/SettingsPage/RoutePrioritySelect.js

@@ -10,10 +10,10 @@ export const RoutePrioritySelect = () => {
     const { t } = useTranslation();
     const setValue = useSettingsStore((state) => state.setValue);
     const { routePriority } = useSettings(['routePriority']);
-    const value = routePriority !== null && routePriority !== void 0 ? routePriority : '';
-    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.routePriority`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ MenuProps: { elevation: 2 }, value: value, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: Orders.map((order) => {
+    const value = routePriority ?? '';
+    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.routePriority`) }), _jsx(FormControl, { fullWidth: true, children: _jsx(Select, { MenuProps: { elevation: 2 }, value: value, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true, children: Orders.map((order) => {
                         const tag = t(`swap.tags.${order.toUpperCase()}`);
                         const tagName = `${tag[0]}${tag.slice(1).toLowerCase()}`;
-                        return (_jsx(MenuItem, Object.assign({ value: order }, { children: tagName }), order));
-                    }) })) }))] }));
+                        return (_jsx(MenuItem, { value: order, children: tagName }, order));
+                    }) }) })] }));
 };

package/pages/SettingsPage/SettingsPage.d.ts

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

package/pages/SettingsPage/SettingsPage.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Container } from '@mui/material';
-import { AdvancedPreferences } from './AdvancedPreferences';
 import { ColorSchemeButtonGroup } from './ColorSchemeButtonGroup';
+import { EnabledToolsButton } from './EnabledToolsButton';
 import { GasPriceSelect } from './GasPriceSelect';
 import { LanguageSelect } from './LanguageSelect';
+import { ResetSettingsButton } from './ResetSettingsButton';
 import { RoutePrioritySelect } from './RoutePrioritySelect';
 import { ShowDestinationWallet } from './ShowDestinationWallet';
 import { SlippageInput } from './SlippageInput';
 export const SettingsPage = () => {
-    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ px: 3, pt: 1 }, { children: [_jsx(ColorSchemeButtonGroup, {}), _jsx(LanguageSelect, {}), _jsx(RoutePrioritySelect, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mt: 2 }, { children: [_jsx(Box, Object.assign({ pr: 2, flex: 1 }, { children: _jsx(SlippageInput, {}) })), _jsx(GasPriceSelect, {})] }))] })), _jsx(ShowDestinationWallet, {}), _jsx(AdvancedPreferences, {})] })));
+    return (_jsxs(Container, { disableGutters: true, children: [_jsxs(Box, { px: 3, pt: 1, children: [_jsx(ColorSchemeButtonGroup, {}), _jsx(LanguageSelect, {}), _jsx(RoutePrioritySelect, {}), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, mt: 2, children: [_jsx(Box, { pr: 2, flex: 1, children: _jsx(SlippageInput, {}) }), _jsx(GasPriceSelect, {})] })] }), _jsx(ShowDestinationWallet, {}), _jsxs(Box, { px: 1.5, children: [_jsx(EnabledToolsButton, { type: "Bridges" }), _jsx(EnabledToolsButton, { type: "Exchanges" })] }), _jsx(ResetSettingsButton, {})] }));
 };

package/pages/SettingsPage/ShowDestinationWallet.d.ts

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

package/pages/SettingsPage/ShowDestinationWallet.js

@@ -11,16 +11,16 @@ export const ShowDestinationWallet = () => {
     const setSendToWallet = useSendToWalletStore((state) => state.setSendToWallet);
     const setValue = useSettingsStore((state) => state.setValue);
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
-    if (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.ToAddress)) {
+    if (hiddenUI?.includes(HiddenUI.ToAddress)) {
         return null;
     }
     const onChange = (_, checked) => {
         setValue('showDestinationWallet', checked);
         setSendToWallet(false);
     };
-    return (_jsx(Box, Object.assign({ px: 3, pt: 2 }, { children: _jsxs(Box, Object.assign({ sx: {
+    return (_jsx(Box, { px: 3, pt: 2, pb: 1.5, children: _jsxs(Box, { sx: {
                 display: 'flex',
                 justifyContent: 'space-between',
                 alignItems: 'center',
-            } }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: _jsx(Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.showDestinationWallet`) })) })), _jsx(Switch, { checked: showDestinationWallet, onChange: onChange })] })) })));
+            }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center' }, children: _jsx(Typography, { variant: "subtitle1", color: "text.primary", lineHeight: "normal", children: t(`settings.showDestinationWallet`) }) }), _jsx(Switch, { checked: showDestinationWallet, onChange: onChange })] }) }));
 };

package/pages/SettingsPage/SlippageInput.d.ts

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

package/pages/SettingsPage/SlippageInput.js

@@ -19,8 +19,8 @@ export const SlippageInput = () => {
         const { value } = event.target;
         setValue('slippage', formatSlippage(value, defaultValue.current));
     };
-    const value = slippage !== null && slippage !== void 0 ? slippage : '';
-    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.slippage`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Input, { size: "small", placeholder: t(`settings.slippage`), endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: "%" })), autoComplete: "off", inputProps: {
+    const value = slippage ?? '';
+    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`settings.slippage`) }), _jsx(FormControl, { fullWidth: true, children: _jsx(Input, { size: "small", placeholder: t(`settings.slippage`), endAdornment: _jsx(InputAdornment, { position: "end", children: "%" }), autoComplete: "off", inputProps: {
                         inputMode: 'decimal',
-                    }, onChange: handleChange, onBlur: handleBlur, value: value }) }))] }));
+                    }, onChange: handleChange, onBlur: handleBlur, value: value }) })] }));
 };

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -1,12 +1,3 @@
-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());
-    });
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ContentCopy as ContentCopyIcon, DeleteOutline as DeleteIcon, } from '@mui/icons-material';
 import { Box, Button, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Typography, } from '@mui/material';
@@ -22,11 +13,10 @@ import { useNavigateBack } from '../../hooks';
 import { useRouteExecutionStore } from '../../stores';
 import { Container } from './SwapDetailsPage.style';
 export const SwapDetailsPage = () => {
-    var _a, _b, _c, _d, _e, _f;
     const { t, i18n } = useTranslation();
     const { navigateBack } = useNavigateBack();
     const { state } = useLocation();
-    const [routeExecution, deleteRoute] = useRouteExecutionStore((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow);
+    const [routeExecution, deleteRoute] = useRouteExecutionStore((store) => [store.routes[state?.routeId], store.deleteRoute], shallow);
     const [open, setOpen] = useState(false);
     const toggleDialog = useCallback(() => {
         setOpen((open) => !open);
@@ -37,25 +27,27 @@ export const SwapDetailsPage = () => {
             deleteRoute(routeExecution.route.id);
         }
     };
-    let supportId = (_d = (_c = (_b = (_a = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process.find((process) => process.txHash)) === null || _b === void 0 ? void 0 : _b.txHash) !== null && _c !== void 0 ? _c : routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id) !== null && _d !== void 0 ? _d : '';
+    let supportId = routeExecution?.route.steps[0].execution?.process.find((process) => process.txHash)?.txHash ??
+        routeExecution?.route.id ??
+        '';
     if (process.env.NODE_ENV === 'development') {
-        supportId += `_${routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id}`;
+        supportId += `_${routeExecution?.route.id}`;
     }
-    const copySupportId = () => __awaiter(void 0, void 0, void 0, function* () {
-        yield navigator.clipboard.writeText(supportId);
-    });
+    const copySupportId = async () => {
+        await navigator.clipboard.writeText(supportId);
+    };
     useEffect(() => {
-        return useHeaderActionStore.getState().setAction(_jsx(IconButton, Object.assign({ size: "medium", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
+        return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
     }, [toggleDialog]);
-    const startedAt = new Date((_f = (_e = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps[0].execution) === null || _e === void 0 ? void 0 : _e.process[0].startedAt) !== null && _f !== void 0 ? _f : 0);
-    return (_jsxs(Container, { children: [_jsxs(Box, Object.assign({ sx: {
+    const startedAt = new Date(routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0);
+    return (_jsxs(Container, { children: [_jsxs(Box, { sx: {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
-                }, pb: 1 }, { children: [_jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), _jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, {
+                }, pb: 1, children: [_jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), _jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) }))] })), getStepList(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route), _jsxs(Card, Object.assign({ mt: 2 }, { children: [_jsxs(Box, Object.assign({ sx: {
+                        }).format(startedAt) })] }), getStepList(routeExecution?.route), _jsxs(Card, { mt: 2, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             flex: 1,
-                        } }, { children: [_jsx(CardTitle, Object.assign({ flex: 1 }, { children: t('swap.supportId') })), _jsx(Box, Object.assign({ mr: 1, mt: 1 }, { children: _jsx(IconButton, Object.assign({ size: "medium", onClick: copySupportId }, { children: _jsx(ContentCopyIcon, { fontSize: "small" }) })) }))] })), _jsx(Typography, Object.assign({ variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' } }, { children: supportId }))] })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true }, { children: t('button.contactSupport') })) })), _jsxs(Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwap') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), _jsx(Button, Object.assign({ variant: "contained", onClick: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
+                        }, children: [_jsx(CardTitle, { flex: 1, children: t('swap.supportId') }), _jsx(Box, { mr: 1, mt: 1, children: _jsx(IconButton, { size: "medium", onClick: copySupportId, children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }), _jsx(Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), _jsx(Box, { mt: 2, children: _jsx(Button, { href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwap') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
 };

package/pages/SwapDetailsPage/SwapDetailsPage.style.d.ts

@@ -6,6 +6,6 @@ export declare const Container: 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/pages/SwapHistoryPage/SwapHistoryEmpty.js

@@ -4,12 +4,12 @@ import { Container, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 export const SwapHistoryEmpty = () => {
     const { t } = useTranslation();
-    return (_jsxs(Container, Object.assign({ sx: {
+    return (_jsxs(Container, { sx: {
             display: 'flex',
             flex: 1,
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
             paddingY: 12,
-        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(HistoryIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptySwapHistory') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptySwapHistory') }))] })));
+        }, children: [_jsx(Typography, { fontSize: 48, children: _jsx(HistoryIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.emptySwapHistory') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.emptySwapHistory') })] }));
 };