@lifi/widget 1.18.8 → 1.19.0

package/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -11,35 +11,32 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { WarningAmber as WarningIcon } from '@mui/icons-material';
-import { Box, Typography } from '@mui/material';
+import { Box, Collapse, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useGasSufficiency } from '../../hooks';
-import { useSelectedRouteStore } from '../../stores';
+import { useRecommendedRouteStore } from '../../stores';
 import { CardTitle } from '../Card';
 import { MessageCard } from './GasSufficiencyMessage.style';
 export const GasSufficiencyMessage = (_a) => {
     var { route } = _a, props = __rest(_a, ["route"]);
     const { t } = useTranslation();
-    const selectedRoute = useSelectedRouteStore((state) => state.selectedRoute);
-    const { insufficientFunds, insufficientGas } = useGasSufficiency(route !== null && route !== void 0 ? route : selectedRoute);
-    if (!insufficientFunds && !(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)) {
-        return null;
-    }
-    return (_jsxs(MessageCard, Object.assign({}, props, { children: [_jsx(WarningIcon, { sx: {
-                    marginTop: 2,
-                    marginLeft: 2,
-                } }), _jsxs(Box, { children: [(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? (_jsx(CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 0 : 2, pt: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 1 : 2 }, { children: insufficientFunds
-                            ? t(`swap.warning.message.insufficientFunds`)
-                            : null }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)
-                        ? insufficientGas.map((item, index) => {
-                            var _a, _b;
-                            return (_jsx(Typography
-                            // eslint-disable-next-line react/no-array-index-key
-                            , Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {
-                                    amount: (_a = item.insufficientAmount) === null || _a === void 0 ? void 0 : _a.toString(),
-                                    tokenSymbol: item.token.symbol,
-                                    chainName: (_b = item.chain) === null || _b === void 0 ? void 0 : _b.name,
-                                }) }), index));
-                        })
-                        : null] })] })));
+    const recommendedRoute = useRecommendedRouteStore((state) => state.recommendedRoute);
+    const { insufficientFunds, insufficientGas } = useGasSufficiency(route !== null && route !== void 0 ? route : recommendedRoute);
+    return (_jsx(Collapse, Object.assign({ timeout: 225, in: Boolean(insufficientFunds || (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)), unmountOnExit: true, mountOnEnter: true, appear: true }, { children: _jsx(Box, Object.assign({}, props, { children: _jsxs(MessageCard, { children: [_jsx(WarningIcon, { sx: {
+                            marginTop: 2,
+                            marginLeft: 2,
+                        } }), _jsxs(Box, { children: [(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? (_jsx(CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 0 : 2, pt: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 1 : 2 }, { children: insufficientFunds
+                                    ? t(`swap.warning.message.insufficientFunds`)
+                                    : null }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)
+                                ? insufficientGas.map((item, index) => {
+                                    var _a, _b;
+                                    return (_jsx(Typography
+                                    // eslint-disable-next-line react/no-array-index-key
+                                    , Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {
+                                            amount: (_a = item.insufficientAmount) === null || _a === void 0 ? void 0 : _a.toString(),
+                                            tokenSymbol: item.token.symbol,
+                                            chainName: (_b = item.chain) === null || _b === void 0 ? void 0 : _b.name,
+                                        }) }), index));
+                                })
+                                : null] })] }) })) })));
 };

package/components/Header/NavigationHeader.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowBack as ArrowBackIcon, History as HistoryIcon, SettingsOutlined as SettingsIcon, } from '@mui/icons-material';
-import { Box, IconButton, Typography } from '@mui/material';
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { useNavigateBack } from '../../hooks';
@@ -46,5 +46,5 @@ export const NavigationHeader = () => {
                 return t(`header.swap`);
         }
     };
-    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: navigateBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "swap-history", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory) }, { children: _jsx(HistoryIcon, {}) }))) : null, _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: () => navigate(navigationRoutes.settings) }, { children: _jsx(SettingsIcon, {}) }))] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] })));
+    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsx(IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory) }, { children: _jsx(HistoryIcon, {}) })) }))) : null, _jsx(Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsx(IconButton, Object.assign({ size: "medium", edge: "end", onClick: () => navigate(navigationRoutes.settings) }, { children: _jsx(SettingsIcon, {}) })) }))] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] })));
 };

package/components/Header/WalletHeader.js

@@ -23,7 +23,7 @@ export const WalletHeader = () => {
                         display: 'flex',
                         flex: 1,
                         flexDirection: 'column',
-                    }, mr: 0.5 }, { children: [_jsx(Typography, Object.assign({ variant: "caption", align: "right" }, { children: t(`header.walletConnected`) })), _jsx(Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600" }, { children: walletAddress }))] })), _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: disconnect }, { children: _jsx(LogoutIcon, {}) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600", flex: 1, mr: 0.5 }, { children: t(`header.connectWallet`) })), _jsx(ConnectButton, {})] })) })));
+                    }, mr: 0.5 }, { children: [_jsx(Typography, Object.assign({ variant: "caption", align: "right" }, { children: t(`header.walletConnected`) })), _jsx(Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600" }, { children: walletAddress }))] })), _jsx(IconButton, Object.assign({ size: "medium", edge: "end", onClick: disconnect }, { children: _jsx(LogoutIcon, {}) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600", flex: 1, mr: 0.5 }, { children: t(`header.connectWallet`) })), _jsx(ConnectButton, {})] })) })));
 };
 const ConnectButton = () => {
     const { pathname } = useLocation();
@@ -37,5 +37,5 @@ const ConnectButton = () => {
         }
         navigate(navigationRoutes.selectWallet);
     });
-    return (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined }, { children: _jsx(WalletOutlinedIcon, {}) })));
+    return (_jsx(IconButton, Object.assign({ size: "medium", edge: "end", onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined }, { children: _jsx(WalletOutlinedIcon, {}) })));
 };

package/components/PoweredBy/PoweredBy.js

@@ -15,5 +15,5 @@ export const PoweredBy = () => {
             display: 'flex',
             alignItems: 'flex-end',
             justifyContent: 'flex-end',
-        } }, { children: _jsx(Tooltip, Object.assign({ title: `v${version}`, placement: "top", enterDelay: 5000, arrow: true }, { children: _jsxs(Link, Object.assign({ href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary" }, { children: [_jsx(Typography, Object.assign({ color: "text.secondary", fontSize: 12, px: 0.5 }, { children: "Powered by" })), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] })) })) })));
+        } }, { children: _jsx(Tooltip, Object.assign({ title: `v${version}`, placement: "top", enterDelay: 3000, arrow: true }, { children: _jsxs(Link, Object.assign({ href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary" }, { children: [_jsx(Typography, Object.assign({ color: "text.secondary", fontSize: 12, px: 0.5 }, { children: "Powered by" })), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] })) })) })));
 };

package/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -39,7 +39,7 @@ export const ProgressToNextUpdate = (_a) => {
     }, [isLoading]);
     return (_jsx(IconButton, Object.assign({ onClick: onClick, disabled: isLoading }, other, { children: _jsx(Tooltip, Object.assign({ title: t('tooltip.progressToNextUpdate', {
                 value: getSecondsToUpdate(updatedAt, timeToUpdate),
-            }), placement: "top", enterDelay: 250, arrow: true }, { children: _jsxs(Box, Object.assign({ sx: {
+            }), placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ sx: {
                     display: 'grid',
                     position: 'relative',
                     placeItems: 'center',

package/components/ReverseTokensButton/ReverseTokensButton.js

@@ -12,11 +12,11 @@ export const ReverseTokensButton = ({ vertical, }) => {
             SwapFormKey.ToChain,
             SwapFormKey.ToToken,
         ]);
-        setValue(SwapFormKey.FromAmount, '');
-        setValue(SwapFormKey.FromChain, toChain);
-        setValue(SwapFormKey.FromToken, toToken);
-        setValue(SwapFormKey.ToChain, fromChain);
-        setValue(SwapFormKey.ToToken, fromToken);
+        setValue(SwapFormKey.FromAmount, '', { shouldTouch: true });
+        setValue(SwapFormKey.FromChain, toChain, { shouldTouch: true });
+        setValue(SwapFormKey.FromToken, toToken, { shouldTouch: true });
+        setValue(SwapFormKey.ToChain, fromChain, { shouldTouch: true });
+        setValue(SwapFormKey.ToToken, fromToken, { shouldTouch: true });
     };
-    return (_jsx(IconButton, Object.assign({ onClick: handleClick, size: "small", "aria-label": "swap-destinations" }, { children: vertical ? _jsx(SwapVertIcon, {}) : _jsx(SwapHorizIcon, {}) })));
+    return (_jsx(IconButton, Object.assign({ onClick: handleClick, size: "small" }, { children: vertical ? _jsx(SwapVertIcon, {}) : _jsx(SwapHorizIcon, {}) })));
 };

package/components/SelectTokenButton/SelectTokenButton.style.d.ts

@@ -15,7 +15,7 @@ export declare const SelectTokenCardHeader: import("@emotion/styled").StyledComp
     }> | undefined;
 } & 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;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "disableTypography" | "avatar" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     selected?: boolean | undefined;
     compact?: boolean | undefined;
 }, {}, {}>;

package/components/SendToWallet/SendToWallet.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
 export declare const SendToWallet: React.FC<BoxProps>;
+export declare const SendToWalletFormHelperText: React.FC;

package/components/SendToWallet/SendToWallet.js

@@ -11,18 +11,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isAddress } from '@ethersproject/address';
 import { Collapse, FormHelperText } from '@mui/material';
 import { forwardRef, useEffect } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapFormKey, useWallet } from '../../providers';
 import { Card, CardTitle } from '../Card';
 import { FormControl, Input } from './SendToWallet.style';
 import { useSendToWalletStore } from './store';
 export const SendToWallet = forwardRef((props, ref) => {
-    var _a;
     const { t } = useTranslation();
     const showSendToWallet = useSendToWalletStore((state) => state.showSendToWallet);
     const { account, provider } = useWallet();
-    const { register, trigger, formState: { errors }, } = useFormContext();
+    const { register, trigger } = useFormContext();
     useEffect(() => {
         trigger(SwapFormKey.ToAddress);
     }, [account.chainId, trigger]);
@@ -36,11 +35,16 @@ export const SendToWallet = forwardRef((props, ref) => {
                 return (isAddress(address || value) ||
                     t('swap.error.title.walletAddressInvalid'));
             }
-            catch (_b) {
+            catch (_a) {
                 return t('swap.error.title.walletEnsAddressInvalid');
             }
         }),
         onBlur: () => trigger(SwapFormKey.ToAddress),
     });
-    return (_jsx(Collapse, Object.assign({ timeout: 225, unmountOnExit: true, mountOnEnter: true, in: showSendToWallet }, { children: _jsxs(Card, Object.assign({}, props, { ref: ref }, { children: [_jsx(CardTitle, { children: t('swap.sendToWallet') }), _jsxs(FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [_jsx(Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns'), autoFocus: true }), _jsx(FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message }))] }))] })) })));
+    return (_jsx(Collapse, Object.assign({ timeout: 225, in: showSendToWallet, mountOnEnter: true, unmountOnExit: true }, { children: _jsxs(Card, Object.assign({}, props, { ref: ref }, { children: [_jsx(CardTitle, { children: t('swap.sendToWallet') }), _jsxs(FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [_jsx(Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns'), autoFocus: true }), _jsx(SendToWalletFormHelperText, {})] }))] })) })));
 });
+export const SendToWalletFormHelperText = () => {
+    var _a;
+    const { errors } = useFormState();
+    return (_jsx(FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message })));
+};

package/components/SendToWallet/SendToWalletButton.js

@@ -17,11 +17,11 @@ export const SendToWalletButton = () => {
     }
     const handleClick = () => {
         if (showSendToWallet) {
-            setValue(SwapFormKey.ToAddress, '');
+            setValue(SwapFormKey.ToAddress, '', { shouldTouch: true });
         }
         toggleSendToWallet();
     };
-    return (_jsx(Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 500, enterNextDelay: 500, arrow: true }, { children: _jsx(Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
+    return (_jsx(Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsx(Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
                 minWidth: 48,
                 marginLeft: 1,
             } }, { children: _jsx(WalletOutlinedIcon, {}) })) })));

package/components/Step/StepProcess.js

@@ -13,5 +13,5 @@ export const StepProcess = ({ step, process }) => {
                             display: 'flex',
                             flex: 1,
                             justifyContent: 'flex-end',
-                        } }, { children: _jsx(LinkButton, Object.assign({ size: "small", "aria-label": "settings", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer" }, { children: _jsx(LinkIcon, {}) })) }))) : null] })), message ? (_jsx(Typography, Object.assign({ ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary" }, { children: message }))) : null] })));
+                        } }, { children: _jsx(LinkButton, Object.assign({ size: "small", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer" }, { children: _jsx(LinkIcon, {}) })) }))) : null] })), message ? (_jsx(Typography, Object.assign({ ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary" }, { children: message }))) : null] })));
 };

package/components/SwapButton/SwapButton.js

@@ -8,19 +8,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
 import { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useGasSufficiency } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
-export const SwapButton = forwardRef(({ onClick, currentRoute, text, disable }, ref) => {
+export const SwapButton = forwardRef(({ onClick, currentRoute, text, disable, enableLoading, loading }, ref) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const config = useWidgetConfig();
     const { account, connect } = useWallet();
-    const { insufficientFunds, insufficientGas } = useGasSufficiency(currentRoute);
+    const { insufficientFunds, insufficientGas, isLoading: isGasSufficiencyLoading, } = useGasSufficiency(currentRoute);
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
             if (config.walletManagement) {
@@ -43,5 +43,5 @@ export const SwapButton = forwardRef(({ onClick, currentRoute, text, disable },
         }
         return t(`button.connectWallet`);
     };
-    return (_jsx(Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, fullWidth: true, ref: ref }, { children: getButtonText() })));
+    return (_jsx(LoadingButton, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, loading: enableLoading && (loading || isGasSufficiencyLoading), loadingPosition: "center", fullWidth: true, ref: ref }, { children: getButtonText() })));
 });

package/components/SwapButton/types.d.ts

@@ -4,4 +4,6 @@ export interface SwapButtonProps {
     currentRoute?: Route;
     text?: string;
     disable?: boolean;
+    loading?: boolean;
+    enableLoading?: boolean;
 }

package/components/SwapInput/SwapInput.js

@@ -27,11 +27,15 @@ export const SwapInput = ({ formType }) => {
     const isSelected = !!(chain && token);
     const handleChange = (event) => {
         const { value } = event.target;
-        setValue(amountKey, formatAmount(value, true));
+        const formattedAmount = formatAmount(value, true);
+        setValue(amountKey, formattedAmount, {
+            shouldTouch: true,
+        });
     };
     const handleBlur = (event) => {
         const { value } = event.target;
-        setValue(amountKey, formatAmount(value));
+        const formattedAmount = formatAmount(value);
+        setValue(amountKey, formattedAmount);
     };
     useLayoutEffect(() => {
         fitInputText(maxInputFontSize, minInputFontSize, ref.current);

package/components/SwapInput/SwapInputAdornment.js

@@ -17,7 +17,9 @@ export const SwapInputAdornment = ({ formType }) => {
     const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
     const handleMax = () => {
         var _a;
-        setValue(SwapFormKeyHelper.getAmountKey(formType), (_a = token === null || token === void 0 ? void 0 : token.amount) !== null && _a !== void 0 ? _a : '');
+        setValue(SwapFormKeyHelper.getAmountKey(formType), (_a = token === null || token === void 0 ? void 0 : token.amount) !== null && _a !== void 0 ? _a : '', {
+            shouldTouch: true,
+        });
     };
-    return (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "rectangular", width: 46, height: 20, sx: { borderRadius: 0.5 } })) : formType === 'from' && (token === null || token === void 0 ? void 0 : token.amount) ? (_jsx(Button, Object.assign({ onClick: handleMax, variant: "outlined" }, { children: t('button.max') }))) : null })));
+    return (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "rectangular", width: 46, height: 20, sx: { borderRadius: 0.5 } })) : formType === 'from' && (token === null || token === void 0 ? void 0 : token.amount) ? (_jsx(Button, Object.assign({ onClick: handleMax }, { children: t('button.max') }))) : null })));
 };

package/components/SwapInput/SwapInputAdornment.style.js

@@ -1,20 +1,8 @@
 import { Button as MuiButton } from '@mui/material';
-import { lighten, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 export const Button = styled(MuiButton)(({ theme }) => ({
-    borderColor: theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
-    color: theme.palette.text.secondary,
-    padding: theme.spacing(0.125, 1, 0.375, 1),
+    padding: theme.spacing(0.5, 1, 0.625, 1),
     lineHeight: 1,
     fontSize: '0.875rem',
     minWidth: 'unset',
-    '&:hover': {
-        color: theme.palette.mode === 'light'
-            ? theme.palette.primary.main
-            : theme.palette.text.primary,
-        borderColor: theme.palette.mode === 'light'
-            ? lighten(theme.palette.primary.main, 0.5)
-            : theme.palette.text.secondary,
-    },
 }));

package/components/SwapRouteCard/SwapRouteCard.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AccessTime as AccessTimeIcon, EvStationOutlined as EvStationIcon, ExpandLess as ExpandLessIcon, ExpandMore as ExpandMoreIcon, LayersOutlined as LayersIcon, } from '@mui/icons-material';
-import { Box, Collapse, Typography } from '@mui/material';
+import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '../Card';
@@ -31,12 +31,16 @@ export const SwapRouteCard = (_a) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
     };
-    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ mountOnEnter: true, unmountOnExit: true, in: cardExpanded }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
+    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
 };
 export const SwapRouteCardEssentials = ({ route, dense }) => {
     var _a;
     const { t } = useTranslation();
-    return (_jsxs(Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [_jsxs(Box, Object.assign({ display: "flex", alignItems: "center", pr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`swap.currency`, { value: (_a = route.gasCostUSD) !== null && _a !== void 0 ? _a : 0 }) }))] })), _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", pr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: `${(route.steps
-                            .map((step) => step.estimate.executionDuration)
-                            .reduce((duration, x) => duration + x) / 60).toFixed(0)}m` }))] })), !dense ? (_jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(LayersIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] }))) : null] })));
+    const executionTimeMinutes = Math.ceil(route.steps
+        .map((step) => step.estimate.executionDuration)
+        .reduce((duration, x) => duration + x, 0) / 60);
+    const gasCostUSD = parseFloat((_a = route.gasCostUSD) !== null && _a !== void 0 ? _a : '') || 0.01;
+    return (_jsxs(Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [_jsx(Tooltip, Object.assign({ title: t(`tooltip.estimatedNetworkFee`), placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`swap.currency`, { value: gasCostUSD }) }))] })) })), _jsx(Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
+                                value: executionTimeMinutes,
+                            }) }))] })) })), !dense ? (_jsx(Tooltip, Object.assign({ title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, enterNextDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(LayersIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] })) }))) : null] })));
 };

package/components/SwapRoutes/SwapRoutes.js

@@ -10,14 +10,14 @@ import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '..
 import { useSwapRoutes } from '../../hooks';
 import { navigationRoutes } from '../../utils';
 import { Stack } from './SwapRoutes.style';
-import { useSetSelectedRoute } from './useSetSelectedRoute';
+import { useSetRecommendedRoute } from './useSetRecommendedRoute';
 export const SwapRoutes = (props) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const { isValid, isValidating } = useFormState();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
-    useSetSelectedRoute(currentRoute, isFetching);
+    useSetRecommendedRoute(currentRoute, isFetching);
     if (!currentRoute && !isLoading && !isFetching && !isFetched) {
         return null;
     }
@@ -30,8 +30,8 @@ export const SwapRoutes = (props) => {
                     top: 8,
                     right: 8,
                 } }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(Stack, Object.assign({ direction: "row", spacing: 2, my: 2, ml: 2, mr: routeNotFound ? 2 : 1, sx: {
-                            borderWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
+                            borderRightWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
                                 ? 1
                                 : 0,
-                        } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, {})) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense" })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes", disabled: isValidating || !isValid }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })));
+                        } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, {})) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense" })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })));
 };

package/components/SwapRoutes/SwapRoutes.style.d.ts

@@ -1,14 +1,4 @@
 /// <reference types="react" />
-export declare const Stack: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    ref?: import("react").Ref<unknown> | undefined;
-    children?: import("react").ReactNode;
-    direction?: import("@mui/system").ResponsiveStyleValue<"row" | "column" | "column-reverse" | "row-reverse"> | undefined;
-    spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
-    divider?: import("react").ReactNode;
-    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>> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "direction" | ("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") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const CollapseContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;
@@ -25,14 +15,14 @@ export declare const ScrollableContainer: import("@emotion/styled").StyledCompon
 } & 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;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "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<import("@mui/material").Theme>, {}, {}>;
-export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+export declare const Container: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
-    component?: import("react").ElementType<any> | undefined;
-    ref?: import("react").Ref<unknown> | undefined;
+    classes?: Partial<import("@mui/material").ScopedCssBaselineClasses> | undefined;
+    enableColorScheme?: boolean | 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>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "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<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "enableColorScheme"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const Header: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;
@@ -41,3 +31,13 @@ export declare const Header: import("@emotion/styled").StyledComponent<import("@
 } & 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;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "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<import("@mui/material").Theme>, {}, {}>;
+export declare const Stack: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    ref?: import("react").Ref<unknown> | undefined;
+    children?: import("react").ReactNode;
+    direction?: import("@mui/system").ResponsiveStyleValue<"row" | "column" | "column-reverse" | "row-reverse"> | undefined;
+    spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
+    divider?: import("react").ReactNode;
+    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>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "direction" | ("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") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/SwapRoutes/SwapRoutes.style.js

@@ -1,17 +1,6 @@
-import { Box, Stack as MuiStack } from '@mui/material';
+import { Box, ScopedCssBaseline, Stack as MuiStack } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
 import { maxHeight } from '../AppContainer';
-export const Stack = styled(MuiStack)(({ theme }) => ({
-    alignItems: 'stretch',
-    display: 'flex',
-    flex: 1,
-    flexWrap: 'nowrap',
-    overflow: 'hidden',
-    borderRight: `solid ${theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800]}`,
-    width: 'calc(100% - 48px)',
-}));
 export const CollapseContainer = styled(Box)(({ theme }) => ({
     height: maxHeight,
 }));
@@ -22,7 +11,7 @@ export const ScrollableContainer = styled(Box)({
     display: 'flex',
     flexDirection: 'column',
 });
-export const Container = styled(Box)(({ theme }) => ({
+export const Container = styled(ScopedCssBaseline)(({ theme }) => ({
     backgroundColor: theme.palette.background.default,
     overflow: 'auto',
     width: 436,
@@ -42,3 +31,14 @@ export const Header = styled(Box)(({ theme }) => ({
     top: 0,
     zIndex: 1200,
 }));
+export const Stack = styled(MuiStack)(({ theme }) => ({
+    alignItems: 'stretch',
+    display: 'flex',
+    flex: 1,
+    flexWrap: 'nowrap',
+    overflow: 'hidden',
+    borderRight: `solid ${theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800]}`,
+    width: 'calc(100% - 48px)',
+}));

package/components/SwapRoutes/SwapRoutesExpanded.d.ts

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

package/components/SwapRoutes/SwapRoutesExpanded.js

@@ -2,16 +2,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapse, Grow, Stack, Typography } from '@mui/material';
 import { useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate, useRoutes } from 'react-router-dom';
 import { useSwapRoutes } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { useSetExecutableRoute } from '../../stores';
-import { navigationRoutes, navigationRoutesValues } from '../../utils';
+import { navigationRoutes } from '../../utils';
 import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../SwapRouteCard';
 import { CollapseContainer, Container, Header, ScrollableContainer, } from './SwapRoutes.style';
-import { useSetSelectedRoute } from './useSetSelectedRoute';
+import { useSetRecommendedRoute } from './useSetRecommendedRoute';
+const timeout = { enter: 225, exit: 225, appear: 0 };
 export const SwapRoutesExpanded = () => {
+    const element = useRoutes([
+        {
+            path: '/',
+            element: null,
+        },
+    ]);
+    return (_jsx(CollapseContainer, { children: _jsx(Collapse, Object.assign({ timeout: timeout, in: !!element, orientation: "horizontal" }, { children: _jsx(Grow, Object.assign({ timeout: timeout, in: !!element, mountOnEnter: true, unmountOnExit: true }, { children: _jsx("div", { children: _jsx(SwapRoutesExpandedElement, {}) }) })) })) }));
+};
+export const SwapRoutesExpandedElement = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const setExecutableRoute = useSetExecutableRoute();
@@ -19,13 +29,7 @@ export const SwapRoutesExpanded = () => {
     const { isValid, isValidating } = useFormState();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
-    useSetSelectedRoute(currentRoute, isFetching);
-    const { pathname } = useLocation();
-    const cleanedPathname = pathname.endsWith('/')
-        ? pathname.slice(0, -1)
-        : pathname;
-    const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
-    const hasPath = navigationRoutesValues.includes(path);
+    useSetRecommendedRoute(currentRoute, isFetching);
     const handleRouteClick = (route) => {
         if (isValid && !isValidating) {
             setExecutableRoute(route);
@@ -34,7 +38,7 @@ export const SwapRoutesExpanded = () => {
             });
         }
     };
-    const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched) && !hasPath;
+    const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched);
     const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-    return (_jsx(CollapseContainer, { children: _jsx(Collapse, Object.assign({ appear: true, timeout: 225, in: expanded, orientation: "horizontal" }, { children: _jsx(Grow, Object.assign({ appear: true, timeout: 225, in: expanded }, { children: _jsx(Container, Object.assign({ sx: containerStyle }, { children: _jsxs(ScrollableContainer, { children: [_jsxs(Header, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "700", flex: 1, noWrap: true }, { children: t('swap.routes') })), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), _jsx(Stack, Object.assign({ direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, { variant: "stretched" }, index)))) : (routes === null || routes === void 0 ? void 0 : routes.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "stretched", expanded: (routes === null || routes === void 0 ? void 0 : routes.length) <= 2 }, route.id)))) }))] }) })) })) })) }));
+    return (_jsx(Collapse, Object.assign({ timeout: timeout.enter, in: expanded, orientation: "horizontal" }, { children: _jsx(Grow, Object.assign({ timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true }, { children: _jsx(Container, Object.assign({ sx: containerStyle, enableColorScheme: true }, { children: _jsxs(ScrollableContainer, { children: [_jsxs(Header, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "700", flex: 1, noWrap: true }, { children: t('swap.routes') })), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), _jsx(Stack, Object.assign({ direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, { variant: "stretched" }, index)))) : (routes === null || routes === void 0 ? void 0 : routes.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "stretched", expanded: (routes === null || routes === void 0 ? void 0 : routes.length) <= 2 }, route.id)))) }))] }) })) })) })));
 };

package/components/SwapRoutes/useSetRecommendedRoute.d.ts

@@ -0,0 +1,2 @@
+import type { Route } from '@lifi/sdk';
+export declare const useSetRecommendedRoute: (currentRoute?: Route, isFetching?: boolean) => void;

package/components/SwapRoutes/useSetRecommendedRoute.js

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import { useRecommendedRouteStore } from '../../stores';
+export const useSetRecommendedRoute = (currentRoute, isFetching) => {
+    const setRecommendedRoute = useRecommendedRouteStore((state) => state.setRecommendedRoute);
+    useEffect(() => {
+        setRecommendedRoute(!isFetching ? currentRoute : undefined);
+        return () => setRecommendedRoute(undefined);
+    }, [currentRoute, isFetching, setRecommendedRoute]);
+};