@lifi/widget 1.31.0 → 1.32.0

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

@@ -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;

package/cjs/pages/SettingsPage/SettingsPage.js

@@ -3,14 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const AdvancedPreferences_1 = require("./AdvancedPreferences");
 const ColorSchemeButtonGroup_1 = require("./ColorSchemeButtonGroup");
+const EnabledToolsButton_1 = require("./EnabledToolsButton");
 const GasPriceSelect_1 = require("./GasPriceSelect");
 const LanguageSelect_1 = require("./LanguageSelect");
+const ResetSettingsButton_1 = require("./ResetSettingsButton");
 const RoutePrioritySelect_1 = require("./RoutePrioritySelect");
 const ShowDestinationWallet_1 = require("./ShowDestinationWallet");
 const SlippageInput_1 = require("./SlippageInput");
 const SettingsPage = () => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 3, pt: 1 }, { children: [(0, jsx_runtime_1.jsx)(ColorSchemeButtonGroup_1.ColorSchemeButtonGroup, {}), (0, jsx_runtime_1.jsx)(LanguageSelect_1.LanguageSelect, {}), (0, jsx_runtime_1.jsx)(RoutePrioritySelect_1.RoutePrioritySelect, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mt: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 2, flex: 1 }, { children: (0, jsx_runtime_1.jsx)(SlippageInput_1.SlippageInput, {}) })), (0, jsx_runtime_1.jsx)(GasPriceSelect_1.GasPriceSelect, {})] }))] })), (0, jsx_runtime_1.jsx)(ShowDestinationWallet_1.ShowDestinationWallet, {}), (0, jsx_runtime_1.jsx)(AdvancedPreferences_1.AdvancedPreferences, {})] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { px: 3, pt: 1, children: [(0, jsx_runtime_1.jsx)(ColorSchemeButtonGroup_1.ColorSchemeButtonGroup, {}), (0, jsx_runtime_1.jsx)(LanguageSelect_1.LanguageSelect, {}), (0, jsx_runtime_1.jsx)(RoutePrioritySelect_1.RoutePrioritySelect, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, mt: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { pr: 2, flex: 1, children: (0, jsx_runtime_1.jsx)(SlippageInput_1.SlippageInput, {}) }), (0, jsx_runtime_1.jsx)(GasPriceSelect_1.GasPriceSelect, {})] })] }), (0, jsx_runtime_1.jsx)(ShowDestinationWallet_1.ShowDestinationWallet, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, { px: 1.5, children: [(0, jsx_runtime_1.jsx)(EnabledToolsButton_1.EnabledToolsButton, { type: "Bridges" }), (0, jsx_runtime_1.jsx)(EnabledToolsButton_1.EnabledToolsButton, { type: "Exchanges" })] }), (0, jsx_runtime_1.jsx)(ResetSettingsButton_1.ResetSettingsButton, {})] }));
 };
 exports.SettingsPage = SettingsPage;

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

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

package/cjs/pages/SettingsPage/ShowDestinationWallet.js

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

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

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

package/cjs/pages/SettingsPage/SlippageInput.js

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

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.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.SwapDetailsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -25,11 +16,10 @@ const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const SwapDetailsPage_style_1 = require("./SwapDetailsPage.style");
 const SwapDetailsPage = () => {
-    var _a, _b, _c, _d, _e, _f;
     const { t, i18n } = (0, react_i18next_1.useTranslation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { state } = (0, react_router_dom_1.useLocation)();
-    const [routeExecution, deleteRoute] = (0, stores_1.useRouteExecutionStore)((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow_1.shallow);
+    const [routeExecution, deleteRoute] = (0, stores_1.useRouteExecutionStore)((store) => [store.routes[state?.routeId], store.deleteRoute], shallow_1.shallow);
     const [open, setOpen] = (0, react_1.useState)(false);
     const toggleDialog = (0, react_1.useCallback)(() => {
         setOpen((open) => !open);
@@ -40,26 +30,28 @@ 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);
+    };
     (0, react_1.useEffect)(() => {
-        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, {}) }));
     }, [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 ((0, jsx_runtime_1.jsxs)(SwapDetailsPage_style_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+    const startedAt = new Date(routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0);
+    return ((0, jsx_runtime_1.jsxs)(SwapDetailsPage_style_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
-                }, pb: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, {
+                }, pb: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) }))] })), (0, Step_1.getStepList)(routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route), (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ mt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                             display: 'flex',
                             flex: 1,
-                        } }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ flex: 1 }, { children: t('swap.supportId') })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mr: 1, mt: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: copySupportId }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, { fontSize: "small" }) })) }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' } }, { children: supportId }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true }, { children: t('button.contactSupport') })) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
+                        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('swap.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
 };
 exports.SwapDetailsPage = SwapDetailsPage;

package/cjs/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/cjs/pages/SwapHistoryPage/SwapHistoryEmpty.js

@@ -7,13 +7,13 @@ const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const SwapHistoryEmpty = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { sx: {
             display: 'flex',
             flex: 1,
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
             paddingY: 12,
-        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ReceiptLongRounded, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptySwapHistory') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptySwapHistory') }))] })));
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(icons_material_1.ReceiptLongRounded, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.emptySwapHistory') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.emptySwapHistory') })] }));
 };
 exports.SwapHistoryEmpty = SwapHistoryEmpty;

package/cjs/pages/SwapHistoryPage/SwapHistoryItem.js

@@ -9,7 +9,6 @@ const Card_1 = require("../../components/Card");
 const Token_1 = require("../../components/Token");
 const utils_1 = require("../../utils");
 const SwapHistoryItem = ({ route }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { i18n } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const handleClick = () => {
@@ -17,15 +16,18 @@ const SwapHistoryItem = ({ route }) => {
             state: { routeId: route.id },
         });
     };
-    const startedAt = new Date((_b = (_a = route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0);
-    const fromToken = Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount });
-    const toToken = Object.assign(Object.assign({}, ((_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toToken) !== null && _e !== void 0 ? _e : route.toToken)), { amount: (_h = (_g = (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.execution) === null || _g === void 0 ? void 0 : _g.toAmount) !== null && _h !== void 0 ? _h : route.toAmount });
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ onClick: handleClick }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+    const startedAt = new Date(route.steps[0].execution?.process[0].startedAt ?? 0);
+    const fromToken = { ...route.fromToken, amount: route.fromAmount };
+    const toToken = {
+        ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
+        amount: route.steps.at(-1)?.execution?.toAmount ?? route.toAmount,
+    };
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { onClick: handleClick, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
-                }, pt: 1.75, px: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(i18n.language, {
+                }, pt: 1.75, px: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ py: 1 }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: fromToken, px: 2, pt: 1, connected: true }), (0, jsx_runtime_1.jsx)(Token_1.TokenDivider, {}), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, px: 2, pt: 0.5, pb: 1 })] }))] })));
+                        }).format(startedAt) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { py: 1, children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: fromToken, px: 2, pt: 1, connected: true }), (0, jsx_runtime_1.jsx)(Token_1.TokenDivider, {}), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, px: 2, pt: 0.5, pb: 1 })] })] }));
 };
 exports.SwapHistoryItem = SwapHistoryItem;

package/cjs/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -25,12 +25,12 @@ const SwapHistoryPage = () => {
     }, []);
     (0, react_1.useEffect)(() => {
         if (swaps.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, {}) }));
         }
     }, [swaps.length, toggleDialog]);
     if (!swaps.length) {
         return (0, jsx_runtime_1.jsx)(SwapHistoryEmpty_1.SwapHistoryEmpty, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => ((0, jsx_runtime_1.jsx)(SwapHistoryItem_1.SwapHistoryItem, { route: route }, route.id)))) : ((0, jsx_runtime_1.jsx)(SwapHistoryEmpty_1.SwapHistoryEmpty, {})) })), (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.deleteSwapHistory') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: () => deleteRoutes('completed'), autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, mt: 1, children: swaps.length ? (swaps.map(({ route }) => ((0, jsx_runtime_1.jsx)(SwapHistoryItem_1.SwapHistoryItem, { route: route }, route.id)))) : ((0, jsx_runtime_1.jsx)(SwapHistoryEmpty_1.SwapHistoryEmpty, {})) }), (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.deleteSwapHistory') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => deleteRoutes('completed'), autoFocus: true, children: t('button.delete') })] })] })] }));
 };
 exports.SwapHistoryPage = SwapHistoryPage;