@lifi/widget 1.18.9 → 1.20.0

package/cjs/components/SwapInput/SwapInput.js

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

package/cjs/components/SwapInput/SwapInputAdornment.js

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

package/cjs/components/SwapInput/SwapInputAdornment.style.js

@@ -4,20 +4,8 @@ exports.Button = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 exports.Button = (0, styles_1.styled)(material_1.Button)(({ 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'
-            ? (0, styles_1.lighten)(theme.palette.primary.main, 0.5)
-            : theme.palette.text.secondary,
-    },
 }));

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -34,17 +34,18 @@ const SwapRouteCard = (_a) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
     };
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}) }))) : null] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ mountOnEnter: true, unmountOnExit: true, in: cardExpanded }, { children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}) }))) : null] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true }, { children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
 };
 exports.SwapRouteCard = SwapRouteCard;
 const SwapRouteCardEssentials = ({ route, dense }) => {
     var _a;
     const { t } = (0, react_i18next_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", pr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.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 }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", pr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.AccessTime, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
-                            value: executionTime,
-                        }) }))] })), !dense ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.LayersOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.estimatedNetworkFee`), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`swap.currency`, { value: gasCostUSD }) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.AccessTime, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
+                                value: executionTimeMinutes,
+                            }) }))] })) })), !dense ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.LayersOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] })) }))) : null] })));
 };
 exports.SwapRouteCardEssentials = SwapRouteCardEssentials;

package/cjs/components/SwapRoutes/SwapRoutes.js

@@ -13,14 +13,14 @@ const SwapRouteCard_1 = require("../../components/SwapRouteCard");
 const hooks_1 = require("../../hooks");
 const utils_1 = require("../../utils");
 const SwapRoutes_style_1 = require("./SwapRoutes.style");
-const useSetSelectedRoute_1 = require("./useSetSelectedRoute");
+const useSetRecommendedRoute_1 = require("./useSetRecommendedRoute");
 const SwapRoutes = (props) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
-    (0, useSetSelectedRoute_1.useSetSelectedRoute)(currentRoute, isFetching);
+    (0, useSetRecommendedRoute_1.useSetRecommendedRoute)(currentRoute, isFetching);
     if (!currentRoute && !isLoading && !isFetching && !isFetched) {
         return null;
     }
@@ -33,9 +33,9 @@ const SwapRoutes = (props) => {
                     top: 8,
                     right: 8,
                 } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(SwapRoutes_style_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" }), (0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense" })) : null] })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ py: 1, pr: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes", disabled: isValidating || !isValid }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) })) }))) : null }))] }))] })));
+                        } }, { children: isLoading || isFetching ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" }), (0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense" })) : null] })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ py: 1, pr: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) })) }))) : null }))] }))] })));
 };
 exports.SwapRoutes = SwapRoutes;

package/cjs/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/cjs/components/SwapRoutes/SwapRoutesExpanded.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapRoutesExpanded = void 0;
+exports.SwapRoutesExpandedElement = exports.SwapRoutesExpanded = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
@@ -13,8 +13,19 @@ const utils_1 = require("../../utils");
 const ProgressToNextUpdate_1 = require("../ProgressToNextUpdate");
 const SwapRouteCard_1 = require("../SwapRouteCard");
 const SwapRoutes_style_1 = require("./SwapRoutes.style");
-const useSetSelectedRoute_1 = require("./useSetSelectedRoute");
+const useSetRecommendedRoute_1 = require("./useSetRecommendedRoute");
+const timeout = { enter: 225, exit: 225, appear: 0 };
 const SwapRoutesExpanded = () => {
+    const element = (0, react_router_dom_1.useRoutes)([
+        {
+            path: '/',
+            element: null,
+        },
+    ]);
+    return ((0, jsx_runtime_1.jsx)(SwapRoutes_style_1.CollapseContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: timeout, in: !!element, orientation: "horizontal" }, { children: (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ timeout: timeout, in: !!element, mountOnEnter: true, unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(exports.SwapRoutesExpandedElement, {}) }) })) })) }));
+};
+exports.SwapRoutesExpanded = SwapRoutesExpanded;
+const SwapRoutesExpandedElement = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
@@ -22,13 +33,7 @@ const SwapRoutesExpanded = () => {
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
-    (0, useSetSelectedRoute_1.useSetSelectedRoute)(currentRoute, isFetching);
-    const { pathname } = (0, react_router_dom_1.useLocation)();
-    const cleanedPathname = pathname.endsWith('/')
-        ? pathname.slice(0, -1)
-        : pathname;
-    const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
-    const hasPath = utils_1.navigationRoutesValues.includes(path);
+    (0, useSetRecommendedRoute_1.useSetRecommendedRoute)(currentRoute, isFetching);
     const handleRouteClick = (route) => {
         if (isValid && !isValidating) {
             setExecutableRoute(route);
@@ -37,8 +42,8 @@ const SwapRoutesExpanded = () => {
             });
         }
     };
-    const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched) && !hasPath;
+    const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched);
     const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-    return ((0, jsx_runtime_1.jsx)(SwapRoutes_style_1.CollapseContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ appear: true, timeout: 225, in: expanded, orientation: "horizontal" }, { children: (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ appear: true, timeout: 225, in: expanded }, { children: (0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Container, Object.assign({ sx: containerStyle, enableColorScheme: true }, { children: (0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: "700", flex: 1, noWrap: true }, { children: t('swap.routes') })), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3 }, { children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { variant: "stretched" }, index)))) : (routes === null || routes === void 0 ? void 0 : routes.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.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 ((0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: timeout.enter, in: expanded, orientation: "horizontal" }, { children: (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Container, Object.assign({ sx: containerStyle, enableColorScheme: true }, { children: (0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: "700", flex: 1, noWrap: true }, { children: t('swap.routes') })), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3 }, { children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { variant: "stretched" }, index)))) : (routes === null || routes === void 0 ? void 0 : routes.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "stretched", expanded: (routes === null || routes === void 0 ? void 0 : routes.length) <= 2 }, route.id)))) }))] }) })) })) })));
 };
-exports.SwapRoutesExpanded = SwapRoutesExpanded;
+exports.SwapRoutesExpandedElement = SwapRoutesExpandedElement;

package/cjs/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/cjs/components/SwapRoutes/useSetRecommendedRoute.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSetRecommendedRoute = void 0;
+const react_1 = require("react");
+const stores_1 = require("../../stores");
+const useSetRecommendedRoute = (currentRoute, isFetching) => {
+    const setRecommendedRoute = (0, stores_1.useRecommendedRouteStore)((state) => state.setRecommendedRoute);
+    (0, react_1.useEffect)(() => {
+        setRecommendedRoute(!isFetching ? currentRoute : undefined);
+        return () => setRecommendedRoute(undefined);
+    }, [currentRoute, isFetching, setRecommendedRoute]);
+};
+exports.useSetRecommendedRoute = useSetRecommendedRoute;

package/cjs/components/TokenList/TokenList.js

@@ -39,23 +39,26 @@ const TokenList = ({ formType, height, onClick, }) => {
             : filteredTokens;
     const handleTokenClick = (0, react_1.useCallback)((tokenAddress) => {
         setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
-            shouldDirty: true,
+            shouldTouch: true,
+        });
+        // Set chain again to trigger URL builder update
+        setValue(providers_1.SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
+            shouldTouch: true,
         });
         setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
-        const [selectedOppositeToken, selectedOppositeChain, selectedChain] = getValues([
+        const [selectedOppositeToken, selectedOppositeChainId] = getValues([
             providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType),
             providers_1.SwapFormKeyHelper.getChainKey(oppositeFormType),
-            providers_1.SwapFormKeyHelper.getChainKey(formType),
         ]);
         if (selectedOppositeToken === tokenAddress &&
-            selectedOppositeChain === selectedChain) {
+            selectedOppositeChainId === selectedChainId) {
             setValue(providers_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? ((0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, { formType: formType })) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.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 })] })));
 };
 exports.TokenList = TokenList;

package/cjs/config/theme.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = void 0;
+const LoadingButton_1 = require("@mui/lab/LoadingButton");
 const colors_1 = require("@mui/material/colors");
 const DialogActions_1 = require("@mui/material/DialogActions");
 const styles_1 = require("@mui/material/styles");
@@ -48,6 +49,9 @@ 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 = (0, styles_1.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 = (0, styles_1.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 = (0, styles_1.getContrastRatio)(colors_1.common.white, primaryMainColor) >= 3
+        ? colors_1.common.white
+        : colors_1.common.black;
     return (0, styles_1.createTheme)({
         typography: Object.assign({ fontFamily: 'Inter var, Inter, sans-serif' }, theme.typography),
         palette: Object.assign(Object.assign(Object.assign({ mode }, palette), { primary: {
@@ -83,13 +87,25 @@ 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',
                         },
+                        [`&.${LoadingButton_1.loadingButtonClasses.loading}.Mui-disabled`]: {
+                            backgroundColor: primaryMainColor,
+                            color: contrastButtonColor,
+                            cursor: 'auto',
+                            pointerEvents: 'auto',
+                        },
+                        [`.${LoadingButton_1.loadingButtonClasses.loadingIndicator}`]: {
+                            color: contrastButtonColor,
+                        },
+                        [`&.${LoadingButton_1.loadingButtonClasses.root}.${LoadingButton_1.loadingButtonClasses.loading}`]: {
+                            color: 'transparent',
+                        },
                     }, text: {
                         backgroundColor: (0, styles_1.alpha)(primaryMainColor, 0.08),
                         '&:hover': {
@@ -97,9 +113,7 @@ const createTheme = (mode, theme = {}) => {
                         },
                     }, contained: {
                         '&:hover': {
-                            color: (0, styles_1.getContrastRatio)(colors_1.common.white, primaryMainColor) >= 3
-                                ? colors_1.common.white
-                                : colors_1.common.black,
+                            color: contrastButtonColor,
                         },
                     }, sizeMedium: {
                         padding: '10px 16px',
@@ -117,10 +131,10 @@ const createTheme = (mode, theme = {}) => {
                             },
                         },
                         text: {
-                            backgroundColor: paletteDark.background.paper,
+                            backgroundColor: (0, styles_1.lighten)(paletteDark.background.paper, 0.08),
                             color: colors_1.common.white,
                             '&:hover': {
-                                backgroundColor: (0, styles_1.lighten)(paletteDark.background.paper, 0.02),
+                                backgroundColor: (0, styles_1.lighten)(paletteDark.background.paper, 0.12),
                             },
                         },
                     }

package/cjs/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/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.18.9';
+exports.version = '1.20.0';

package/cjs/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';

package/cjs/hooks/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./useChain"), exports);
 __exportStar(require("./useChains"), exports);
 __exportStar(require("./useContentHeight"), exports);
 __exportStar(require("./useDebouncedWatch"), exports);
+__exportStar(require("./useExpandableVariant"), exports);
 __exportStar(require("./useFeaturedTokens"), exports);
 __exportStar(require("./useGasSufficiency"), exports);
 __exportStar(require("./useInitializer"), exports);

package/cjs/hooks/useContentHeight.d.ts

@@ -1 +1,3 @@
+import type { MutableRefObject } from 'react';
 export declare const useContentHeight: () => number;
+export declare const useSetContentHeight: (ref: MutableRefObject<HTMLElement | undefined>) => void;

package/cjs/hooks/useContentHeight.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useContentHeight = void 0;
+exports.useSetContentHeight = exports.useContentHeight = void 0;
 const react_1 = require("react");
 const utils_1 = require("../utils");
+const useScrollableContainer_1 = require("./useScrollableContainer");
 const getContentHeight = () => {
     const headerElement = document.getElementById(utils_1.ElementId.Header);
     const containerElement = document.getElementById(utils_1.ElementId.ScrollableContainer);
@@ -25,3 +26,19 @@ const useContentHeight = () => {
     return contentHeight;
 };
 exports.useContentHeight = useContentHeight;
+const useSetContentHeight = (ref) => {
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        const scrollableContainer = (0, useScrollableContainer_1.getScrollableContainer)();
+        if (!scrollableContainer ||
+            !ref.current ||
+            ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight) <= (scrollableContainer === null || scrollableContainer === void 0 ? void 0 : scrollableContainer.clientHeight)) {
+            return;
+        }
+        scrollableContainer.style.height = `${ref.current.clientHeight}px`;
+        return () => {
+            scrollableContainer.style.removeProperty('height');
+        };
+    }, [ref]);
+};
+exports.useSetContentHeight = useSetContentHeight;

package/cjs/hooks/useExpandableVariant.d.ts

@@ -0,0 +1 @@
+export declare const useExpandableVariant: () => boolean;

package/cjs/hooks/useExpandableVariant.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExpandableVariant = void 0;
+const material_1 = require("@mui/material");
+const providers_1 = require("../providers");
+const defaultExpandableWidth = 852;
+const useExpandableVariant = () => {
+    const { variant } = (0, providers_1.useWidgetConfig)();
+    const expandableAllowed = (0, material_1.useMediaQuery)((theme) => {
+        return theme.breakpoints.up(defaultExpandableWidth);
+    });
+    return variant === 'expandable' && expandableAllowed;
+};
+exports.useExpandableVariant = useExpandableVariant;

package/cjs/hooks/useGasSufficiency.d.ts

@@ -9,7 +9,8 @@ interface GasSufficiency {
     chain?: EVMChain;
 }
 export declare const useGasSufficiency: (route?: Route) => {
-    insufficientGas: GasSufficiency[] | undefined;
-    insufficientFunds: boolean;
+    insufficientGas: GasSufficiency[] | null | undefined;
+    insufficientFunds: boolean | null | undefined;
+    isLoading: boolean;
 };
 export {};

package/cjs/hooks/useGasSufficiency.js

@@ -10,23 +10,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGasSufficiency = void 0;
+const react_query_1 = require("@tanstack/react-query");
 const big_js_1 = require("big.js");
-const react_1 = require("react");
 const _1 = require(".");
 const providers_1 = require("../providers");
+const stores_1 = require("../stores");
 const useTokenBalance_1 = require("./useTokenBalance");
+const refetchInterval = 30000;
 const useGasSufficiency = (route) => {
     const { account } = (0, providers_1.useWallet)();
     const { getChainById } = (0, _1.useChains)();
     const { token: fromToken, getTokenBalancesWithRetry } = (0, useTokenBalance_1.useTokenBalance)(route === null || route === void 0 ? void 0 : route.fromToken);
-    const [insufficientGas, setInsufficientGas] = (0, react_1.useState)();
-    const checkInsufficientGas = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+    const { data: insufficientGas, isInitialLoading: insufficientGasLoading } = (0, react_query_1.useQuery)(['gas-sufficiency-check', account.address, route === null || route === void 0 ? void 0 : route.id], () => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         if (!account.address || !route) {
-            setInsufficientGas(undefined);
-            return;
+            return null;
         }
-        const gasCosts = route.steps.reduce((groupedGasCosts, step) => {
+        const gasCosts = route.steps
+            .filter((step) => !step.execution || step.execution.status !== 'DONE')
+            .reduce((groupedGasCosts, step) => {
             if (step.estimate.gasCosts) {
                 const { token } = step.estimate.gasCosts[0];
                 const gasCostAmount = step.estimate.gasCosts
@@ -40,7 +42,6 @@ const useGasSufficiency = (route) => {
                     gasAmount,
                     tokenAmount: gasAmount,
                     token,
-                    chain: getChainById(token.chainId),
                 };
                 return groupedGasCosts;
             }
@@ -51,42 +52,65 @@ const useGasSufficiency = (route) => {
         }
         const tokenBalances = yield getTokenBalancesWithRetry(account.address, Object.values(gasCosts).map((item) => item.token));
         if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
-            setInsufficientGas(undefined);
-            return;
+            return null;
         }
         [route.fromChainId, route.toChainId].forEach((chainId) => {
             var _a, _b, _c, _d, _e, _f;
             if (gasCosts[chainId]) {
                 const gasTokenBalance = (0, big_js_1.default)((_b = (_a = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find((t) => t.chainId === gasCosts[chainId].token.chainId &&
                     t.address === gasCosts[chainId].token.address)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
-                const insufficientFromChainGas = gasTokenBalance.lte(0) ||
+                const insufficient = gasTokenBalance.lte(0) ||
                     gasTokenBalance.lt((_c = gasCosts[chainId].gasAmount) !== null && _c !== void 0 ? _c : (0, big_js_1.default)(0)) ||
                     gasTokenBalance.lt((_d = gasCosts[chainId].tokenAmount) !== null && _d !== void 0 ? _d : (0, big_js_1.default)(0));
-                const insufficientFromChainGasAmount = insufficientFromChainGas
+                const insufficientAmount = insufficient
                     ? (_f = (_e = gasCosts[chainId].tokenAmount) === null || _e === void 0 ? void 0 : _e.minus(gasTokenBalance)) !== null && _f !== void 0 ? _f : gasCosts[chainId].gasAmount.minus(gasTokenBalance)
                     : undefined;
-                gasCosts[chainId] = Object.assign(Object.assign({}, gasCosts[chainId]), { insufficient: insufficientFromChainGas, insufficientAmount: insufficientFromChainGasAmount === null || insufficientFromChainGasAmount === void 0 ? void 0 : insufficientFromChainGasAmount.round(5, big_js_1.default.roundUp) });
+                gasCosts[chainId] = Object.assign(Object.assign({}, gasCosts[chainId]), { insufficient, insufficientAmount: insufficientAmount === null || insufficientAmount === void 0 ? void 0 : insufficientAmount.round(5, big_js_1.default.roundUp), chain: insufficient ? getChainById(chainId) : undefined });
             }
         });
         const gasCostResult = Object.values(gasCosts).filter((gasCost) => gasCost.insufficient);
-        setInsufficientGas(gasCostResult);
-    }), [account.address, getChainById, getTokenBalancesWithRetry, route]);
-    const insufficientFunds = (0, react_1.useMemo)(() => {
-        var _a;
-        if (!account.isActive || !fromToken || !route) {
-            return false;
+        return gasCostResult;
+    }), {
+        enabled: Boolean(account.address && route),
+        refetchIntervalInBackground: true,
+        refetchInterval,
+        staleTime: refetchInterval,
+        cacheTime: refetchInterval,
+    });
+    const { data: insufficientFunds, isInitialLoading: insufficientFundsLoading, } = (0, react_query_1.useQuery)(['funds-sufficiency-check', account.address, route === null || route === void 0 ? void 0 : route.id], () => __awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d, _e, _f;
+        if (!account.address || !fromToken || !route || (0, stores_1.isRouteCompleted)(route)) {
+            return null;
+        }
+        let currentTokenBalance = (0, big_js_1.default)((_c = fromToken === null || fromToken === void 0 ? void 0 : fromToken.amount) !== null && _c !== void 0 ? _c : 0);
+        const currentAction = (_d = route.steps.filter((step) => !step.execution || step.execution.status !== 'DONE')[0]) === null || _d === void 0 ? void 0 : _d.action;
+        if (fromToken.chainId === currentAction.fromToken.chainId &&
+            fromToken.address === currentAction.fromToken.address &&
+            currentTokenBalance.gt(0)) {
+            const insufficientFunds = (0, big_js_1.default)(route.fromAmount)
+                .div(Math.pow(10, route.fromToken.decimals))
+                .gt(currentTokenBalance);
+            return insufficientFunds;
         }
-        const balance = (0, big_js_1.default)((_a = fromToken === null || fromToken === void 0 ? void 0 : fromToken.amount) !== null && _a !== void 0 ? _a : 0);
-        return (0, big_js_1.default)(route.fromAmount)
-            .div(Math.pow(10, route.fromToken.decimals))
-            .gt(balance);
-    }, [account.isActive, fromToken, route]);
-    (0, react_1.useEffect)(() => {
-        checkInsufficientGas();
-    }, [checkInsufficientGas]);
+        const tokenBalances = yield getTokenBalancesWithRetry(account.address, [
+            currentAction.fromToken,
+        ]);
+        currentTokenBalance = (0, big_js_1.default)((_f = (_e = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances[0]) === null || _e === void 0 ? void 0 : _e.amount) !== null && _f !== void 0 ? _f : 0);
+        const insufficientFunds = (0, big_js_1.default)(currentAction.fromAmount)
+            .div(Math.pow(10, currentAction.fromToken.decimals))
+            .gt(currentTokenBalance);
+        return insufficientFunds;
+    }), {
+        enabled: Boolean(account.address && route && fromToken),
+        refetchIntervalInBackground: true,
+        refetchInterval,
+        staleTime: refetchInterval,
+        cacheTime: refetchInterval,
+    });
     return {
         insufficientGas,
         insufficientFunds,
+        isLoading: insufficientGasLoading || insufficientFundsLoading,
     };
 };
 exports.useGasSufficiency = useGasSufficiency;

package/cjs/hooks/useSwapRoutes.js

@@ -77,16 +77,18 @@ const useSwapRoutes = () => {
         catch (_d) {
             toWalletAddress = (0, address_1.isAddress)(toAddress) ? toAddress : fromAddress;
         }
+        const fromAmount = (0, big_js_1.default)(Number(fromTokenAmount) * Math.pow(10, ((_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 0))).toString();
+        const formattedSlippage = parseFloat(slippage) / 100;
         return lifi.getRoutes({
             fromChainId,
-            fromAmount: (0, big_js_1.default)(Number(fromTokenAmount) * Math.pow(10, ((_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 0))).toString(),
+            fromAmount,
             fromTokenAddress,
             toChainId,
             toTokenAddress,
             fromAddress,
             toAddress: toWalletAddress,
             options: {
-                slippage: slippage / 100,
+                slippage: formattedSlippage,
                 bridges: {
                     allow: enabledBridges,
                 },

package/cjs/hooks/useTokenBalance.js

@@ -24,12 +24,12 @@ const useTokenBalance = (token, accountAddress) => {
         try {
             const tokenBalances = yield lifi.getTokenBalances(accountAddress, tokens);
             if (!tokenBalances.every((token) => token.blockNumber)) {
-                if (depth > 5) {
+                if (depth > 10) {
                     console.warn('Token balance backoff depth exceeded.');
                     return undefined;
                 }
                 yield new Promise((resolve) => {
-                    setTimeout(resolve, depth * 100);
+                    setTimeout(resolve, Math.pow(1.5, depth) * 100);
                 });
                 return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
             }