@lifi/widget 1.14.1 → 1.16.0

package/cjs/pages/SelectTokenPage/SelectTokenPage.js

@@ -4,24 +4,20 @@ exports.SelectTokenPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
+const ChainSelect_1 = require("../../components/ChainSelect");
 const TokenList_1 = require("../../components/TokenList");
 const hooks_1 = require("../../hooks");
-const ChainSelect_1 = require("./ChainSelect");
 const SearchTokenInput_1 = require("./SearchTokenInput");
-const SelectTokenPage = ({ formType, }) => {
+const SelectTokenPage = ({ formType }) => {
     (0, hooks_1.useScrollableOverflowHidden)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const headerRef = (0, react_1.useRef)(null);
     const contentHeight = (0, hooks_1.useContentHeight)();
     const [headerHeight, setHeaderHeight] = (0, react_1.useState)(0);
-    const handleTokenClick = () => {
-        navigate(-1);
-    };
     (0, react_1.useLayoutEffect)(() => {
         var _a, _b;
         setHeaderHeight(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0));
     }, [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: headerHeight, onClick: handleTokenClick, formType: formType })] })));
+    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: headerHeight, onClick: navigateBack, formType: formType })] })));
 };
 exports.SelectTokenPage = SelectTokenPage;

package/cjs/pages/SelectWalletPage/SelectWalletPage.js

@@ -15,20 +15,20 @@ const wallet_management_1 = require("@lifi/wallet-management");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
-const react_router_dom_1 = require("react-router-dom");
 const Dialog_1 = require("../../components/Dialog");
-const WalletProvider_1 = require("../../providers/WalletProvider");
+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 navigate = (0, react_router_dom_1.useNavigate)();
-    const { connect } = (0, WalletProvider_1.useWallet)();
+    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 })));
     };
-    const handleConnect = (0, react_1.useCallback)((event, wallet) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleConnect = (0, react_1.useCallback)((wallet) => __awaiter(void 0, void 0, void 0, function* () {
         const { ethereum } = window;
         const identityCheckPassed = wallet.checkProviderIdentity({
             provider: ethereum,
@@ -40,13 +40,13 @@ const SelectWalletPage = () => {
             });
             return;
         }
-        navigate(-1);
+        navigateBack();
         yield connect(wallet);
-    }), [connect, navigate]);
+    }), [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: {
-                    paddingLeft: 2,
-                    paddingRight: 2,
-                } }, { children: wallet_management_1.supportedWallets.map((wallet) => ((0, jsx_runtime_1.jsxs)(SelectWalletPage_style_1.WalletListItemButton, Object.assign({ onClick: (event) => handleConnect(event, 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.WalletListItemText, { 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', {
+                    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({ onClick: closeDialog, autoFocus: true }, { children: t('button.ok') })) })] }))] })));
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const WalletListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
     children?: import("react").ReactNode;
@@ -18,29 +18,4 @@ export declare const WalletListItemButton: import("@emotion/styled").StyledCompo
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     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 WalletListItem: import("@emotion/styled").StyledComponent<{
-    button?: false | undefined;
-} & import("@mui/material").ListItemBaseProps & {
-    components?: {
-        Root?: import("react").ElementType<any> | undefined;
-    } | undefined;
-    componentsProps?: {
-        root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
-    } | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const WalletListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const WalletIdentityPopoverContent: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("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") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & 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/SelectWalletPage/SelectWalletPage.style.js

@@ -1,30 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WalletIdentityPopoverContent = exports.WalletListItemText = exports.WalletListItem = exports.WalletListItemButton = void 0;
+exports.ListItemText = exports.ListItemButton = void 0;
 const material_1 = require("@mui/material");
-const ListItemSecondaryAction_1 = require("@mui/material/ListItemSecondaryAction");
 const ListItemText_1 = require("@mui/material/ListItemText");
 const styles_1 = require("@mui/material/styles");
 const utils_1 = require("../../utils");
-exports.WalletListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
+exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusSecondary,
     paddingLeft: theme.spacing(1.5),
-    height: 64,
+    height: 56,
     '&:hover': {
         backgroundColor: (0, utils_1.getContrastAlphaColor)(theme, '4%'),
     },
 }));
-exports.WalletListItem = (0, styles_1.styled)(material_1.ListItem)(({ theme }) => ({
-    padding: theme.spacing(1.5),
-    [`.${ListItemSecondaryAction_1.listItemSecondaryActionClasses.root}`]: {
-        right: theme.spacing(3),
-    },
-}));
-exports.WalletListItemText = (0, styles_1.styled)(material_1.ListItemText)(({ theme }) => ({
+exports.ListItemText = (0, styles_1.styled)(material_1.ListItemText)(({ theme }) => ({
     [`.${ListItemText_1.listItemTextClasses.primary}`]: {
         fontWeight: 400,
     },
 }));
-exports.WalletIdentityPopoverContent = (0, styles_1.styled)(material_1.Typography)({
-    maxWidth: 400,
-});

package/cjs/pages/SettingsPage/AdvancedPreferences.js

@@ -15,10 +15,10 @@ const AdvancedPreferences = () => {
     const handleAdvancedPreferences = (_, checked) => {
         setValue('advancedPreferences', checked);
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 3, pt: 3 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 3, pt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ 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.advancedPreferences`) })) })), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { checked: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(EnabledBridgesSelect_1.EnabledBridgesSelect, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(EnabledExchangesSelect_1.EnabledExchangesSelect, {}) }))] })))] })));
+                } }, { 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.advancedPreferences`) })) })), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { checked: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(EnabledBridgesSelect_1.EnabledBridgesSelect, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(EnabledExchangesSelect_1.EnabledExchangesSelect, {}) }))] })))] })));
 };
 exports.AdvancedPreferences = AdvancedPreferences;

package/cjs/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -5,12 +5,12 @@ 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 WidgetProvider_1 = require("../../providers/WidgetProvider");
+const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const ColorSchemeButtonGroup_style_1 = require("./ColorSchemeButtonGroup.style");
 const ColorSchemeButtonGroup = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { disableAppearance } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { disableAppearance } = (0, providers_1.useWidgetConfig)();
     const [appearance, setAppearance] = (0, stores_1.useAppearance)();
     if (disableAppearance) {
         return null;

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

@@ -11,7 +11,7 @@ export declare const ToggleButton: import("@emotion/styled").StyledComponent<{
     selected?: boolean | undefined;
     size?: "small" | "medium" | "large" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    value: unknown;
+    value: {};
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/cjs/pages/SettingsPage/EnabledBridgesSelect.js

@@ -14,17 +14,14 @@ const Select_1 = require("../../components/Select");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const EnabledBridgesSelect = () => {
-    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { tools, formattedTools } = (0, hooks_1.useTools)();
     const [enabledBridges, setTools] = (0, stores_1.useSettingsStore)((state) => [state.enabledBridges, state.setTools], shallow_1.default);
-    return (tools === null || tools === void 0 ? void 0 : tools.bridges.length) ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.enabledBridges`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), MenuProps: { elevation: 2 }, IconComponent: icons_material_1.KeyboardArrowDown, value: enabledBridges !== null && enabledBridges !== void 0 ? enabledBridges : [], onChange: (event) => {
-                        if (tools === null || tools === void 0 ? void 0 : tools.bridges) {
-                            setTools('Bridges', event.target.value, tools.bridges);
-                        }
+    return (tools === null || tools === void 0 ? void 0 : tools.bridges.length) ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.enabledBridges`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), MenuProps: { elevation: 2, PaperProps: { sx: { maxHeight: 320 } } }, IconComponent: icons_material_1.KeyboardArrowDown, value: enabledBridges !== null && enabledBridges !== void 0 ? enabledBridges : [], onChange: (event) => {
+                        setTools('Bridges', event.target.value, tools.bridges);
                     }, renderValue: (selected) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => {
                             var _a, _b, _c;
                             return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (_c = (_b = (_a = formattedTools.bridges) === null || _a === void 0 ? void 0 : _a[value]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : value }, value));
-                        }) }))) }, { children: (_a = tools === null || tools === void 0 ? void 0 : tools.bridges) === null || _a === void 0 ? void 0 : _a.map((bridge) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: bridge.key }, { children: bridge.name }), bridge.key))) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
+                        }) }))) }, { children: tools.bridges.map((bridge) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: bridge.key, sx: { paddingTop: 0, paddingBottom: 0 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: enabledBridges === null || enabledBridges === void 0 ? void 0 : enabledBridges.includes(bridge.key) }), bridge.name] }), bridge.key))) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
 };
 exports.EnabledBridgesSelect = EnabledBridgesSelect;

package/cjs/pages/SettingsPage/EnabledExchangesSelect.js

@@ -18,12 +18,10 @@ const EnabledExchangesSelect = () => {
     const { tools, formattedTools } = (0, hooks_1.useTools)();
     const [enabledExchanges, setTools] = (0, stores_1.useSettingsStore)((state) => [state.enabledExchanges, state.setTools], shallow_1.default);
     return (tools === null || tools === void 0 ? void 0 : tools.exchanges.length) ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.enabledExchanges`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledExchanges`), value: enabledExchanges !== null && enabledExchanges !== void 0 ? enabledExchanges : [], onChange: (event) => {
-                        if (tools === null || tools === void 0 ? void 0 : tools.exchanges) {
-                            setTools('Exchanges', event.target.value, tools.exchanges);
-                        }
-                    }, MenuProps: { elevation: 2 }, IconComponent: icons_material_1.KeyboardArrowDown, renderValue: (selected) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => {
+                        setTools('Exchanges', event.target.value, tools.exchanges);
+                    }, MenuProps: { elevation: 2, PaperProps: { sx: { maxHeight: 320 } } }, IconComponent: icons_material_1.KeyboardArrowDown, renderValue: (selected) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => {
                             var _a, _b, _c;
                             return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (_c = (_b = (_a = formattedTools.exchanges) === null || _a === void 0 ? void 0 : _a[value]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : value }, value));
-                        }) }))) }, { children: tools === null || tools === void 0 ? void 0 : tools.exchanges.map((exchange) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: exchange.key }, { children: exchange.key }), exchange.key))) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
+                        }) }))) }, { children: tools.exchanges.map((exchange) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: exchange.key, sx: { paddingTop: 0, paddingBottom: 0 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: enabledExchanges === null || enabledExchanges === void 0 ? void 0 : enabledExchanges.includes(exchange.key) }), exchange.name] }), exchange.key))) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
 };
 exports.EnabledExchangesSelect = EnabledExchangesSelect;

package/cjs/pages/SettingsPage/RoutePrioritySelect.js

@@ -13,6 +13,10 @@ const RoutePrioritySelect = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const [setValue] = (0, stores_1.useSetSettings)();
     const { routePriority } = (0, stores_1.useSettings)(['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: routePriority, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: icons_material_1.KeyboardArrowDown, dense: true }, { children: sdk_1.Orders.map((order) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: order }, { children: t(`swap.tags.${order.toLowerCase()}`) }), order))) })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.routePriority`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ MenuProps: { elevation: 2 }, value: routePriority, 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));
+                    }) })) }))] }));
 };
 exports.RoutePrioritySelect = RoutePrioritySelect;

package/cjs/pages/SettingsPage/SettingsPage.js

@@ -7,8 +7,9 @@ const AdvancedPreferences_1 = require("./AdvancedPreferences");
 const ColorSchemeButtonGroup_1 = require("./ColorSchemeButtonGroup");
 const GasPriceSelect_1 = require("./GasPriceSelect");
 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)(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)(AdvancedPreferences_1.AdvancedPreferences, {})] })));
+    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)(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, {})] })));
 };
 exports.SettingsPage = SettingsPage;

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

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

package/cjs/pages/SettingsPage/ShowDestinationWallet.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowDestinationWallet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const Switch_1 = require("../../components/Switch");
+const stores_1 = require("../../stores");
+const ShowDestinationWallet = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [setValue] = (0, stores_1.useSetSettings)();
+    const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
+    const onChange = (_, checked) => {
+        setValue('showDestinationWallet', checked);
+    };
+    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: {
+                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 })] })) })));
+};
+exports.ShowDestinationWallet = ShowDestinationWallet;

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -25,12 +25,13 @@ const Dialog_1 = require("../../components/Dialog");
 const Header_1 = require("../../components/Header");
 const Step_1 = require("../../components/Step");
 const StepDivider_1 = require("../../components/StepDivider");
+const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const SwapDetailsPage_style_1 = require("./SwapDetailsPage.style");
 const SwapDetailsPage = () => {
     var _a, _b;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const setHeaderAction = (0, Header_1.useSetHeaderAction)();
     const { state } = (0, react_router_dom_1.useLocation)();
     const [routeExecution, deleteRoute] = (0, stores_1.useRouteStore)((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow_1.default);
@@ -39,7 +40,7 @@ const SwapDetailsPage = () => {
         setOpen((open) => !open);
     }, []);
     const handleDeleteRoute = () => {
-        navigate(-1);
+        navigateBack();
         if (routeExecution) {
             deleteRoute(routeExecution.route.id);
         }
@@ -64,6 +65,6 @@ const SwapDetailsPage = () => {
             }), (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ mt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                             display: 'flex',
                             flex: 1,
-                        } }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ flex: 1 }, { children: t('swap.routeId') })), (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", "aria-label": "settings", onClick: copyRouteId }, { 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: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", 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.deleteSwap') }) }), (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({ onClick: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
+                        } }, { 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", "aria-label": "settings", onClick: copyRouteId }, { 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: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", 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.deleteSwap') }) }), (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({ onClick: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
 };
 exports.SwapDetailsPage = SwapDetailsPage;

package/cjs/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -8,14 +8,14 @@ const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const Dialog_1 = require("../../components/Dialog");
 const Header_1 = require("../../components/Header");
-const WalletProvider_1 = require("../../providers/WalletProvider");
+const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const route_1 = require("../../stores/route");
 const SwapHistoryEmpty_1 = require("./SwapHistoryEmpty");
 const SwapHistoryItem_1 = require("./SwapHistoryItem");
 const SwapHistoryPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { account } = (0, WalletProvider_1.useWallet)();
+    const { account } = (0, providers_1.useWallet)();
     const swaps = (0, route_1.useSwapHistory)(account.address);
     const deleteRoutes = (0, stores_1.useRouteStore)((store) => store.deleteRoutes);
     const setHeaderAction = (0, Header_1.useSetHeaderAction)();

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -7,69 +7,57 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
-const react_router_dom_1 = require("react-router-dom");
 const BottomSheet_1 = require("../../components/BottomSheet");
 const Token_1 = require("../../components/Token");
 const hooks_1 = require("../../hooks");
-const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const providers_1 = require("../../providers");
 const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
-const utils_1 = require("./utils");
 const StatusBottomSheet = ({ status, route, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const ref = (0, react_1.useRef)(null);
     const { getChainById } = (0, hooks_1.useChains)();
     const { token, refetch: refetchBalance } = (0, hooks_1.useTokenBalance)(route.toChainId, route.toToken.address);
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const clearFromAmount = () => {
         refetchBalance();
-        setValue(SwapFormProvider_1.SwapFormKey.FromAmount, '');
+        setValue(providers_1.SwapFormKey.FromAmount, '');
     };
     const handleDone = () => {
         clearFromAmount();
-        navigate(-1);
+        navigateBack();
     };
     const handleClose = () => {
         var _a;
         clearFromAmount();
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.closeDrawer();
     };
-    const { title, message } = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        switch (status) {
-            case 'success':
-                return {
-                    title: t('swap.success.title.fundsReceived'),
-                    message: t('swap.success.message.fundsReceived', {
-                        amount: token === null || token === void 0 ? void 0 : token.amount,
-                        tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
-                        chainName: (_a = getChainById(route.toChainId)) === null || _a === void 0 ? void 0 : _a.name,
-                    }),
-                };
-            case 'error': {
-                const step = route.steps.find((step) => {
-                    var _a;
-                    return (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process.some((process) => process.status === 'FAILED');
-                });
-                const process = (_b = step === null || step === void 0 ? void 0 : step.execution) === null || _b === void 0 ? void 0 : _b.process.find((process) => process.status === 'FAILED');
-                if (!step || !process) {
-                    return {};
-                }
-                return (0, utils_1.getProcessMessage)(t, getChainById, step, process);
+    let title;
+    let message;
+    switch (status) {
+        case 'success':
+            title = t('swap.success.title.fundsReceived');
+            message = t('swap.success.message.fundsReceived', {
+                amount: token === null || token === void 0 ? void 0 : token.amount,
+                tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
+                chainName: (_a = getChainById(route.toChainId)) === null || _a === void 0 ? void 0 : _a.name,
+            });
+            break;
+        case 'error': {
+            const step = route.steps.find((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
+            const process = (_b = step === null || step === void 0 ? void 0 : step.execution) === null || _b === void 0 ? void 0 : _b.process.find((process) => process.status === 'FAILED');
+            if (!step || !process) {
+                break;
             }
-            default:
-                return {};
+            const processMessage = (0, hooks_1.getProcessMessage)(t, getChainById, step, process);
+            title = processMessage.title;
+            message = processMessage.message;
+            break;
         }
-    }, [
-        getChainById,
-        route.steps,
-        route.toChainId,
-        status,
-        t,
-        token === null || token === void 0 ? void 0 : token.amount,
-        token === null || token === void 0 ? void 0 : token.symbol,
-    ]);
+        default:
+            break;
+    }
     (0, react_1.useEffect)(() => {
         var _a, _b;
         if ((status === 'success' || status === 'error') &&
@@ -78,6 +66,6 @@ const StatusBottomSheet = ({ status, route, }) => {
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.openDrawer();
         }
     }, [refetchBalance, 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 === 'idle' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'success' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'error' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error", sx: StatusBottomSheet_style_1.iconStyles })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_e = (_c = (_b = (_a = route.steps.at(-1)) === null || _a === void 0 ? void 0 : _a.execution) === null || _b === void 0 ? void 0 : _b.toAmount) !== null && _c !== void 0 ? _c : (_d = route.steps.at(-1)) === null || _d === void 0 ? void 0 : _d.estimate.toAmount) !== null && _e !== void 0 ? _e : route.toAmount }), py: 1 })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), (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: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })) })), status === 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleClose }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    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 === 'idle' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'success' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'error' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error", sx: StatusBottomSheet_style_1.iconStyles })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), (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: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })) })), status === 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleClose }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };
 exports.StatusBottomSheet = StatusBottomSheet;

package/cjs/pages/SwapPage/SwapPage.js

@@ -4,6 +4,7 @@ exports.SwapPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const GasSufficiencyMessage_1 = require("../../components/GasSufficiencyMessage");
@@ -11,20 +12,23 @@ const Step_1 = require("../../components/Step");
 const StepDivider_1 = require("../../components/StepDivider");
 const SwapButton_1 = require("../../components/SwapButton");
 const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const StatusBottomSheet_1 = require("./StatusBottomSheet");
 const SwapPage_style_1 = require("./SwapPage.style");
 const SwapPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { state } = (0, react_router_dom_1.useLocation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const { setValue, formState: { isValid, isValidating }, } = (0, react_hook_form_1.useFormContext)();
     const { route, status, executeRoute, restartRoute, deleteRoute } = (0, hooks_1.useRouteExecution)(state === null || state === void 0 ? void 0 : state.routeId);
     const handleRemoveRoute = () => {
-        navigate(-1);
+        navigateBack();
         deleteRoute();
     };
     const handleSwapClick = () => {
         if (status === 'idle') {
             executeRoute();
+            setValue(providers_1.SwapFormKey.FromAmount, '');
         }
         if (status === 'error') {
             restartRoute();
@@ -44,6 +48,6 @@ const SwapPage = () => {
                 return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: index === 0
                                 ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1
                                 ? Object.assign(Object.assign({}, step.action.toToken), { amount: (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
-            }), status === 'idle' ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route }) }))) : null, status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", onClick: handleRemoveRoute, fullWidth: true }, { children: t('button.removeSwap') })) }))) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null] }));
+            }), status === 'idle' ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, disable: status === 'idle' && (isValidating || !isValid) }) }))) : null, status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", onClick: handleRemoveRoute, fullWidth: true }, { children: t('button.removeSwap') })) }))) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null] }));
 };
 exports.SwapPage = SwapPage;

package/cjs/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -15,7 +15,7 @@ const SwapRoutesPage = () => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const setHeaderAction = (0, Header_1.useSetHeaderAction)();
-    const { routes: swapRoutes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
+    const { routes: swapRoutes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const handleRouteClick = (route) => {
         setExecutableRoute(route);

package/cjs/providers/SwapFormProvider/SwapFormProvider.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export declare const formDefaultValues: {
     fromAmount: string;
+    toAddress: string;
     tokenSearchFilter: string;
 };
 export declare const SwapFormProvider: React.FC<React.PropsWithChildren<{}>>;