@lifi/widget 1.18.9 → 1.20.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, 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, 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, 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, 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: 24, 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),
-    lineHeight: 1,
+    padding: theme.spacing(0.5, 1, 0.625, 1),
+    lineHeight: 1.0715,
     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,15 +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();
-    const executionTime = (route.steps
+    const executionTimeMinutes = Math.ceil(route.steps
         .map((step) => step.estimate.executionDuration)
-        .reduce((duration, x) => duration + x) / 60).toFixed(0) || 1;
-    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.01 }) }))] })), _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: t('swap.estimatedTime', {
-                            value: executionTime,
-                        }) }))] })), !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] })));
+        .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, 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, 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, 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/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, 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)))) }))] }) })) })) })) }));
+    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]);
+};

package/components/TokenList/TokenList.js

@@ -36,22 +36,25 @@ export const TokenList = ({ formType, height, onClick, }) => {
             : filteredTokens;
     const handleTokenClick = useCallback((tokenAddress) => {
         setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
-            shouldDirty: true,
+            shouldTouch: true,
+        });
+        // Set chain again to trigger URL builder update
+        setValue(SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
+            shouldTouch: true,
         });
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
-        const [selectedOppositeToken, selectedOppositeChain, selectedChain] = getValues([
+        const [selectedOppositeToken, selectedOppositeChainId] = getValues([
             SwapFormKeyHelper.getTokenKey(oppositeFormType),
             SwapFormKeyHelper.getChainKey(oppositeFormType),
-            SwapFormKeyHelper.getChainKey(formType),
         ]);
         if (selectedOppositeToken === tokenAddress &&
-            selectedOppositeChain === selectedChain) {
+            selectedOppositeChainId === selectedChainId) {
             setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
-                shouldDirty: false,
+                shouldTouch: true,
             });
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
-    }, [formType, getValues, onClick, setValue]);
+    }, [formType, getValues, onClick, selectedChainId, setValue]);
     return (_jsxs(Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
 };

package/config/theme.js

@@ -1,3 +1,4 @@
+import { loadingButtonClasses } from '@mui/lab/LoadingButton';
 import { common } from '@mui/material/colors';
 import { dialogActionsClasses } from '@mui/material/DialogActions';
 import { alpha, createTheme as createMuiTheme, darken, getContrastRatio, lighten, } from '@mui/material/styles';
@@ -45,6 +46,9 @@ export const createTheme = (mode, theme = {}) => {
     const primaryMainColor = (_c = (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : palette.primary.main;
     const primaryLightColor = lighten((_f = (_e = (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : palette.primary.main, 0.5);
     const primaryDarkColor = darken((_j = (_h = (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h.main) !== null && _j !== void 0 ? _j : palette.primary.main, 0.2);
+    const contrastButtonColor = getContrastRatio(common.white, primaryMainColor) >= 3
+        ? common.white
+        : common.black;
     return createMuiTheme({
         typography: Object.assign({ fontFamily: 'Inter var, Inter, sans-serif' }, theme.typography),
         palette: Object.assign(Object.assign(Object.assign({ mode }, palette), { primary: {
@@ -80,13 +84,25 @@ export const createTheme = (mode, theme = {}) => {
                         borderRadius: (_v = (_u = theme.shape) === null || _u === void 0 ? void 0 : _u.borderRadiusSecondary) !== null && _v !== void 0 ? _v : shape.borderRadiusSecondary,
                         textTransform: 'none',
                         fontSize: '1rem',
-                        '&.Mui-disabled, &.Mui-disabled:hover': {
+                        [`&.Mui-disabled, &.Mui-disabled:hover`]: {
                             color: mode === 'light'
-                                ? 'rgb(0 0 0 / 70%)'
-                                : 'rgb(255 255 255 / 70%)',
+                                ? 'rgb(0 0 0 / 56%)'
+                                : 'rgb(255 255 255 / 56%)',
                             cursor: 'not-allowed',
                             pointerEvents: 'auto',
                         },
+                        [`&.${loadingButtonClasses.loading}.Mui-disabled`]: {
+                            backgroundColor: primaryMainColor,
+                            color: contrastButtonColor,
+                            cursor: 'auto',
+                            pointerEvents: 'auto',
+                        },
+                        [`.${loadingButtonClasses.loadingIndicator}`]: {
+                            color: contrastButtonColor,
+                        },
+                        [`&.${loadingButtonClasses.root}.${loadingButtonClasses.loading}`]: {
+                            color: 'transparent',
+                        },
                     }, text: {
                         backgroundColor: alpha(primaryMainColor, 0.08),
                         '&:hover': {
@@ -94,9 +110,7 @@ export const createTheme = (mode, theme = {}) => {
                         },
                     }, contained: {
                         '&:hover': {
-                            color: getContrastRatio(common.white, primaryMainColor) >= 3
-                                ? common.white
-                                : common.black,
+                            color: contrastButtonColor,
                         },
                     }, sizeMedium: {
                         padding: '10px 16px',
@@ -114,10 +128,10 @@ export const createTheme = (mode, theme = {}) => {
                             },
                         },
                         text: {
-                            backgroundColor: paletteDark.background.paper,
+                            backgroundColor: lighten(paletteDark.background.paper, 0.08),
                             color: common.white,
                             '&:hover': {
-                                backgroundColor: lighten(paletteDark.background.paper, 0.02),
+                                backgroundColor: lighten(paletteDark.background.paper, 0.12),
                             },
                         },
                     }

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.18.9";
+export declare const version = "1.20.0";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.18.9';
+export const version = '1.20.0';

package/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
+export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
 export * from './useInitializer';