@lifi/widget 1.31.1 → 1.32.1

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;

package/cjs/pages/SwapPage/ExchangeRateBottomSheet.js

@@ -16,60 +16,55 @@ exports.ExchangeRateBottomSheet = (0, react_1.forwardRef)(({ onContinue, onCance
     const bottomSheetRef = (0, react_1.useRef)(null);
     const resolverRef = (0, react_1.useRef)();
     const handleContinue = () => {
-        var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close(true);
-        onContinue === null || onContinue === void 0 ? void 0 : onContinue();
+        ref.current?.close(true);
+        onContinue?.();
     };
     const handleCancel = (0, react_1.useCallback)(() => {
-        var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close(false);
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        ref.current?.close(false);
+        onCancel?.();
     }, [onCancel, ref]);
     const handleClose = (0, react_1.useCallback)(() => {
-        var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close(false, false);
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        ref.current?.close(false, false);
+        onCancel?.();
     }, [onCancel, ref]);
     (0, react_1.useImperativeHandle)(ref, () => ({
-        isOpen: () => { var _a; return (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.isOpen(); },
+        isOpen: () => bottomSheetRef.current?.isOpen(),
         open: (resolver, data) => {
-            var _a;
             setData(data);
             resolverRef.current = resolver;
-            (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open();
+            bottomSheetRef.current?.open();
         },
         close: (value = false, bottomSheetClose = true) => {
-            var _a, _b;
-            (_a = resolverRef.current) === null || _a === void 0 ? void 0 : _a.call(resolverRef, value);
+            resolverRef.current?.(value);
             if (bottomSheetClose) {
-                (_b = bottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.close();
+                bottomSheetRef.current?.close();
             }
         },
     }), []);
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: bottomSheetRef, onClose: handleClose }, { children: (0, jsx_runtime_1.jsx)(ExchangeRateBottomSheetContent, { data: data, onContinue: handleContinue, onCancel: handleCancel }) })));
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, { ref: bottomSheetRef, onClose: handleClose, children: (0, jsx_runtime_1.jsx)(ExchangeRateBottomSheetContent, { data: data, onContinue: handleContinue, onCancel: handleCancel }) }));
 });
 const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const ref = (0, react_1.useRef)();
     (0, hooks_1.useSetContentHeight)(ref);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3, ref: ref }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: "warning", mb: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.WarningRounded, { color: "warning" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: t('swap.warning.title.rateChanged') }))] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: t('swap.warning.message.rateChanged') })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.quotedAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: [t('format.number', {
-                                value: (0, utils_1.formatTokenAmount)(data === null || data === void 0 ? void 0 : data.oldToAmount, data === null || data === void 0 ? void 0 : data.toToken.decimals, 5),
-                            }), ' ', data === null || data === void 0 ? void 0 : data.toToken.symbol] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.currentAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: [t('format.number', {
-                                value: (0, utils_1.formatTokenAmount)(data === null || data === void 0 ? void 0 : data.newToAmount, data === null || data === void 0 ? void 0 : data.toToken.decimals, 5),
-                            }), ' ', data === null || data === void 0 ? void 0 : data.toToken.symbol] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.rateChange') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: [(0, big_js_1.default)((data === null || data === void 0 ? void 0 : data.newToAmount) || 0)
-                                .div((0, big_js_1.default)((data === null || data === void 0 ? void 0 : data.oldToAmount) || 0))
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(icons_material_1.WarningRounded, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.rateChanged') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('swap.warning.message.rateChanged') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.quotedAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
+                                value: (0, utils_1.formatTokenAmount)(data?.oldToAmount, data?.toToken.decimals, 5),
+                            }), ' ', data?.toToken.symbol] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.currentAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
+                                value: (0, utils_1.formatTokenAmount)(data?.newToAmount, data?.toToken.decimals, 5),
+                            }), ' ', data?.toToken.symbol] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.rateChange') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [(0, big_js_1.default)(data?.newToAmount || 0)
+                                .div((0, big_js_1.default)(data?.oldToAmount || 0))
                                 .minus(1)
                                 .mul(100)
                                 .round(2, big_js_1.default.roundUp)
-                                .toString(), "%"] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", mt: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: onCancel, fullWidth: true }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", p: 1 }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: onContinue, fullWidth: true }, { children: t('button.continue') }))] }))] })));
+                                .toString(), "%"] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mt: 3, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", p: 1 }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
 };
 const getTokenValueLossThreshold = (route) => {
     if (!route) {
         return false;
     }
-    const fromAmountUSD = (0, big_js_1.default)((route === null || route === void 0 ? void 0 : route.fromAmountUSD) || 0);
-    const toAmountUSD = (0, big_js_1.default)((route === null || route === void 0 ? void 0 : route.toAmountUSD) || 0);
-    const gasCostUSD = (0, big_js_1.default)((route === null || route === void 0 ? void 0 : route.gasCostUSD) || 0);
+    const fromAmountUSD = (0, big_js_1.default)(route?.fromAmountUSD || 0);
+    const toAmountUSD = (0, big_js_1.default)(route?.toAmountUSD || 0);
+    const gasCostUSD = (0, big_js_1.default)(route?.gasCostUSD || 0);
     if (fromAmountUSD.eq(0) && toAmountUSD.eq(0)) {
         return false;
     }

package/cjs/pages/SwapPage/StartSwapButton.js

@@ -6,6 +6,6 @@ const SwapButton_1 = require("../../components/SwapButton");
 const hooks_1 = require("../../hooks");
 const StartSwapButton = ({ onClick, currentRoute, text, }) => {
     const { insufficientFunds, insufficientGas, isLoading: isGasSufficiencyLoading, } = (0, hooks_1.useGasSufficiency)(currentRoute);
-    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: onClick, text: text, currentRoute: currentRoute, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length), loading: isGasSufficiencyLoading }));
+    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: onClick, text: text, currentRoute: currentRoute, disabled: insufficientFunds || !!insufficientGas?.length, loading: isGasSufficiencyLoading }));
 };
 exports.StartSwapButton = StartSwapButton;

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -16,13 +16,17 @@ const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
 const StatusBottomSheet = ({ status, route, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { navigateBack, navigate } = (0, hooks_1.useNavigateBack)();
     const ref = (0, react_1.useRef)(null);
     const { getChainById } = (0, hooks_1.useChains)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
-    const toToken = Object.assign(Object.assign({}, ((_c = (_b = (_a = route.steps.at(-1)) === null || _a === void 0 ? void 0 : _a.execution) === null || _b === void 0 ? void 0 : _b.toToken) !== null && _c !== void 0 ? _c : route.toToken)), { amount: (_h = (_f = (_e = (_d = route.steps.at(-1)) === null || _d === void 0 ? void 0 : _d.execution) === null || _e === void 0 ? void 0 : _e.toAmount) !== null && _f !== void 0 ? _f : (_g = route.steps.at(-1)) === null || _g === void 0 ? void 0 : _g.estimate.toAmount) !== null && _h !== void 0 ? _h : route.toAmount });
+    const toToken = {
+        ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
+        amount: route.steps.at(-1)?.execution?.toAmount ??
+            route.steps.at(-1)?.estimate.toAmount ??
+            route.toAmount,
+    };
     const { token, refetch, refetchNewBalance, refetchAllBalances } = (0, hooks_1.useTokenBalance)(toToken, route.toAddress);
     const clearFromAmount = () => {
         refetchAllBalances();
@@ -49,9 +53,8 @@ const StatusBottomSheet = ({ status, route, }) => {
         navigateBack();
     };
     const handleClose = () => {
-        var _a;
         clearFromAmount();
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+        ref.current?.close();
     };
     const handleSeeDetails = () => {
         handleClose();
@@ -71,7 +74,7 @@ const StatusBottomSheet = ({ status, route, }) => {
                 primaryMessage = t('swap.success.message.swapSuccessful', {
                     amount: token.amount,
                     tokenSymbol: token.symbol,
-                    chainName: (_j = getChainById(token.chainId)) === null || _j === void 0 ? void 0 : _j.name,
+                    chainName: getChainById(token.chainId)?.name,
                     walletAddress: (0, utils_1.shortenWalletAddress)(route.toAddress),
                 });
             }
@@ -81,14 +84,14 @@ const StatusBottomSheet = ({ status, route, }) => {
         case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Partial: {
             title = t('swap.success.title.swapPartiallySuccessful');
             primaryMessage = t('swap.success.message.swapPartiallySuccessful', {
-                tool: (_k = route.steps.at(-1)) === null || _k === void 0 ? void 0 : _k.toolDetails.name,
-                tokenSymbol: (_l = route.steps.at(-1)) === null || _l === void 0 ? void 0 : _l.action.toToken.symbol,
+                tool: route.steps.at(-1)?.toolDetails.name,
+                tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
             });
             if (token) {
                 secondaryMessage = t('swap.success.message.swapSuccessful', {
                     amount: token.amount,
                     tokenSymbol: token.symbol,
-                    chainName: (_m = getChainById(token.chainId)) === null || _m === void 0 ? void 0 : _m.name,
+                    chainName: getChainById(token.chainId)?.name,
                     walletAddress: (0, utils_1.shortenWalletAddress)(route.toAddress),
                 });
             }
@@ -98,22 +101,22 @@ const StatusBottomSheet = ({ status, route, }) => {
         case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Refunded: {
             title = t('swap.success.title.refundIssued');
             primaryMessage = t('swap.success.message.swapPartiallySuccessful', {
-                tool: (_o = route.steps.at(-1)) === null || _o === void 0 ? void 0 : _o.toolDetails.name,
-                tokenSymbol: (_p = route.steps.at(-1)) === null || _p === void 0 ? void 0 : _p.action.toToken.symbol,
+                tool: route.steps.at(-1)?.toolDetails.name,
+                tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
             });
             if (token) {
                 secondaryMessage = t('swap.success.message.swapSuccessful', {
                     amount: token.amount,
                     tokenSymbol: token.symbol,
-                    chainName: (_q = getChainById(token.chainId)) === null || _q === void 0 ? void 0 : _q.name,
+                    chainName: getChainById(token.chainId)?.name,
                     walletAddress: (0, utils_1.shortenWalletAddress)(route.toAddress),
                 });
             }
             break;
         }
         case stores_1.RouteExecutionStatus.Failed: {
-            const step = route.steps.find((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
-            const process = (_r = step === null || step === void 0 ? void 0 : step.execution) === null || _r === void 0 ? void 0 : _r.process.find((process) => process.status === 'FAILED');
+            const step = route.steps.find((step) => step.execution?.status === 'FAILED');
+            const process = step?.execution?.process.find((process) => process.status === 'FAILED');
             if (!step || !process) {
                 break;
             }
@@ -127,22 +130,21 @@ const StatusBottomSheet = ({ status, route, }) => {
             break;
     }
     (0, react_1.useEffect)(() => {
-        var _a, _b;
         const hasSuccessFlag = (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done);
         if ((hasSuccessFlag || (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Failed)) &&
-            !((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isOpen())) {
+            !ref.current?.isOpen()) {
             if (hasSuccessFlag) {
                 refetchNewBalance();
                 refetch();
             }
-            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.open();
+            ref.current?.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(icons_material_1.InfoRounded, { color: "primary" })) : null, status === stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Partial) ||
-                                    (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Refunded) ? ((0, jsx_runtime_1.jsx)(icons_material_1.WarningRounded, { color: "warning" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Failed) ? ((0, jsx_runtime_1.jsx)(icons_material_1.ErrorRounded, { color: "error" })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, py: 1, disableDescription: true })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: primaryMessage })), secondaryMessage ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: secondaryMessage }))) : null, (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", fullWidth: true, onClick: handlePrimaryButton }, { children: [status === stores_1.RouteExecutionStatus.Idle ? t('button.ok') : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done)
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, { ref: ref, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, { status: status, mb: 1, children: [status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(icons_material_1.InfoRounded, { color: "primary" })) : null, status === stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Partial) ||
+                                    (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Refunded) ? ((0, jsx_runtime_1.jsx)(icons_material_1.WarningRounded, { color: "warning" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Failed) ? ((0, jsx_runtime_1.jsx)(icons_material_1.ErrorRounded, { color: "error" })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }), (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, py: 1, disableDescription: true })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: primaryMessage }), secondaryMessage ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: secondaryMessage })) : null, (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsxs)(material_1.Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === stores_1.RouteExecutionStatus.Idle ? t('button.ok') : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done)
                                 ? t('button.done')
                                 : null, status === stores_1.RouteExecutionStatus.Failed
                                 ? t('button.seeDetails')
-                                : null] })) })), (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleSeeDetails, fullWidth: true }, { children: t('button.seeDetails') })) }))) : null] })) })));
+                                : null] }) }), (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: handleSeeDetails, fullWidth: true, children: t('button.seeDetails') }) })) : null] }) }));
 };
 exports.StatusBottomSheet = StatusBottomSheet;

package/cjs/pages/SwapPage/StatusBottomSheet.style.d.ts

@@ -7,7 +7,7 @@ export declare const IconContainer: import("@emotion/styled").StyledComponent<im
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
 export declare const IconCircle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
@@ -15,7 +15,7 @@ export declare const IconCircle: import("@emotion/styled").StyledComponent<impor
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
     status: StatusColor;

package/cjs/pages/SwapPage/SwapPage.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.SwapPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -28,7 +19,6 @@ const StatusBottomSheet_1 = require("./StatusBottomSheet");
 const SwapPage_style_1 = require("./SwapPage.style");
 const TokenValueBottomSheet_1 = require("./TokenValueBottomSheet");
 const SwapPage = () => {
-    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { variant } = (0, providers_1.useWidgetConfig)();
     const { state } = (0, react_router_dom_1.useLocation)();
@@ -37,23 +27,21 @@ const SwapPage = () => {
     const exchangeRateBottomSheetRef = (0, react_1.useRef)(null);
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { route, status, executeRoute, restartRoute, deleteRoute } = (0, hooks_1.useRouteExecution)({
-        routeId: state === null || state === void 0 ? void 0 : state.routeId,
-        onAcceptExchangeRateUpdate: (_a = exchangeRateBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open,
+        routeId: state?.routeId,
+        onAcceptExchangeRateUpdate: exchangeRateBottomSheetRef.current?.open,
     });
     const handleExecuteRoute = (0, react_1.useCallback)(() => {
-        var _a, _b;
-        if ((_a = tokenValueBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.isOpen()) {
-            (_b = tokenValueBottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.close();
+        if (tokenValueBottomSheetRef.current?.isOpen()) {
+            tokenValueBottomSheetRef.current?.close();
         }
         executeRoute();
         setValue(providers_1.SwapFormKey.FromAmount, '');
     }, [executeRoute, setValue]);
-    const handleSwapClick = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
+    const handleSwapClick = async () => {
         if (status === stores_1.RouteExecutionStatus.Idle) {
             const thresholdExceeded = (0, TokenValueBottomSheet_1.getTokenValueLossThreshold)(route);
             if (thresholdExceeded) {
-                (_b = tokenValueBottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.open();
+                tokenValueBottomSheetRef.current?.open();
             }
             else {
                 handleExecuteRoute();
@@ -62,7 +50,7 @@ const SwapPage = () => {
         if (status === stores_1.RouteExecutionStatus.Failed) {
             restartRoute();
         }
-    });
+    };
     const handleRemoveRoute = () => {
         navigateBack();
         deleteRoute();
@@ -80,9 +68,9 @@ const SwapPage = () => {
         }
     };
     return ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [(0, Step_1.getStepList)(route), status === stores_1.RouteExecutionStatus.Idle ||
-                status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(StartSwapButton_1.StartSwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route }), status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleRemoveRoute, sx: {
+                status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", children: [(0, jsx_runtime_1.jsx)(StartSwapButton_1.StartSwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route }), status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,
-                                    } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, {}) })) }))) : null] }))] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? ((0, jsx_runtime_1.jsx)(ExchangeRateBottomSheet_1.ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));
+                                    }, children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, {}) }) })) : null] })] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? ((0, jsx_runtime_1.jsx)(ExchangeRateBottomSheet_1.ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));
 };
 exports.SwapPage = SwapPage;

package/cjs/pages/SwapPage/SwapPage.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>, {}, {}>;