@lifi/widget 1.32.8 → 2.0.0-alpha.1

package/cjs/components/SwapRouteCard/SwapRouteCard.style.js

@@ -1,43 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = exports.Label = void 0;
+exports.IconTypography = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
-const utils_1 = require("../../utils");
-exports.Label = (0, styles_1.styled)(material_1.Typography, {
-    shouldForwardProp: (prop) => prop !== 'active',
-})(({ theme, active }) => ({
-    backgroundColor: active ? theme.palette.secondary.main : 'transparent',
-    border: '1px solid',
-    borderColor: active
-        ? theme.palette.secondary.main
-        : theme.palette.mode === 'light'
-            ? theme.palette.grey[300]
-            : theme.palette.grey[800],
-    borderRadius: theme.shape.borderRadiusSecondary,
-    color: active
-        ? (0, utils_1.getContrastTextColor)(theme, theme.palette.secondary.main)
-        : theme.palette.text.secondary,
-    padding: theme.spacing(0.75),
-    fontSize: 12,
-    lineHeight: 1,
-    fontWeight: '600',
-    height: 24,
-    letterSpacing: '0.05rem',
-    textTransform: 'uppercase',
-    display: 'inline-flex',
-    userSelect: 'none',
+exports.IconTypography = (0, styles_1.styled)(material_1.Typography)(({ theme }) => ({
+    color: theme.palette.mode === 'light'
+        ? (0, styles_1.alpha)(theme.palette.common.black, 0.24)
+        : (0, styles_1.alpha)(theme.palette.common.white, 0.32),
+    lineHeight: 0,
+    marginRight: theme.spacing(0.5),
 }));
-exports.IconButton = (0, styles_1.styled)(material_1.IconButton, {
-    shouldForwardProp: (prop) => prop !== 'active',
-})(({ theme, active }) => {
-    const backgroundColor = theme.palette.mode === 'light'
-        ? theme.palette.common.black
-        : theme.palette.common.white;
-    return {
-        backgroundColor: (0, styles_1.alpha)(backgroundColor, 0.04),
-        '&:hover': {
-            backgroundColor: (0, styles_1.alpha)(backgroundColor, 0.08),
-        },
-    };
-});

package/cjs/components/SwapRouteCard/SwapRouteCardEssentials.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SwapRouteCardEssentialsProps } from './types';
+export declare const SwapRouteCardEssentials: React.FC<SwapRouteCardEssentialsProps>;

package/cjs/components/SwapRouteCard/SwapRouteCardEssentials.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapRouteCardEssentials = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AccessTimeFilled_1 = require("@mui/icons-material/AccessTimeFilled");
+const EvStation_1 = require("@mui/icons-material/EvStation");
+const Layers_1 = require("@mui/icons-material/Layers");
+const MonetizationOn_1 = require("@mui/icons-material/MonetizationOn");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const SwapRouteCard_style_1 = require("./SwapRouteCard.style");
+const utils_1 = require("./utils");
+const SwapRouteCardEssentials = ({ route, dense }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const executionTimeMinutes = Math.ceil(route.steps
+        .map((step) => step.estimate.executionDuration)
+        .reduce((duration, x) => duration + x, 0) / 60);
+    const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
+    const gasCosts = (0, utils_1.getGasCostsBreakdown)(route);
+    const feeCosts = (0, utils_1.getFeeCostsBreakdown)(route, false);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 11, children: [gas.amount?.toFixed(9), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(EvStation_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 11, children: [fee.amount?.toFixed(9), " ", fee.token.symbol, " (", t(`format.currency`, { value: fee.amountUSD }), ")"] }, `${fee.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(MonetizationOn_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
+                                value: feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0),
+                            }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(AccessTimeFilled_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
+                                value: executionTimeMinutes,
+                            }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(Layers_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })] }));
+};
+exports.SwapRouteCardEssentials = SwapRouteCardEssentials;

package/cjs/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -6,10 +6,10 @@ const material_1 = require("@mui/material");
 const providers_1 = require("../../providers");
 const Card_1 = require("../Card");
 const SwapRouteCardSkeleton = ({ variant, ...other }) => {
-    const { variant: widgetVariant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
-    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 118, height: 24, sx: (theme) => ({
-                            borderRadius: `${theme.shape.borderRadiusSecondary}px`,
-                        }) }), variant === 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 32, height: 24 })] })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { mr: 2, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }) }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 32 })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 6, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] })] }), variant !== 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 })] })) : null] }));
-    return widgetVariant === 'refuel' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { indented: true, ...other, children: cardContent }));
+    const { variant: widgetVariant } = (0, providers_1.useWidgetConfig)();
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' ? ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", alignItems: "center", mb: 2, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 112, height: 24, sx: (theme) => ({
+                        borderRadius: `${theme.shape.borderRadius}px`,
+                    }) }) })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { mr: 2, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }) }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 32 })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 6, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 102, height: 16 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 32, height: 20 })] })] }));
+    return widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { indented: true, ...other, children: cardContent }));
 };
 exports.SwapRouteCardSkeleton = SwapRouteCardSkeleton;

package/cjs/components/SwapRouteCard/types.d.ts

@@ -1,7 +1,7 @@
 import type { Route } from '@lifi/sdk';
 export interface SwapRouteCardProps {
     route: Route;
-    variant?: 'default' | 'stretched' | 'dense';
+    variant?: 'default' | 'cardless';
     active?: boolean;
     expanded?: boolean;
 }
@@ -10,5 +10,5 @@ export interface SwapRouteCardEssentialsProps {
     dense?: boolean;
 }
 export interface SwapRouteCardSkeletonProps {
-    variant?: 'default' | 'stretched' | 'dense';
+    variant?: 'default' | 'cardless';
 }

package/cjs/components/SwapRouteCard/utils.d.ts

@@ -5,3 +5,8 @@ export declare const getGasCostsBreakdown: (route: Route) => {
     amountUSD: number;
     token: Token;
 }[];
+export declare const getFeeCostsBreakdown: (route: Route, included?: boolean) => {
+    amount: Big;
+    amountUSD: number;
+    token: Token;
+}[];

package/cjs/components/SwapRouteCard/utils.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getGasCostsBreakdown = void 0;
+exports.getFeeCostsBreakdown = exports.getGasCostsBreakdown = void 0;
 const big_js_1 = require("big.js");
 const getGasCostsBreakdown = (route) => {
     return Object.values(route.steps.reduce((groupedGasCosts, step) => {
-        if (step.estimate.gasCosts) {
+        if (step.estimate.gasCosts?.length) {
             const { token } = step.estimate.gasCosts[0];
             const gasCostAmount = step.estimate.gasCosts
                 .reduce((amount, gasCost) => amount.plus((0, big_js_1.default)(gasCost.amount || 0)), (0, big_js_1.default)(0))
@@ -28,3 +28,33 @@ const getGasCostsBreakdown = (route) => {
     }, {}));
 };
 exports.getGasCostsBreakdown = getGasCostsBreakdown;
+const getFeeCostsBreakdown = (route, included) => {
+    return Object.values(route.steps.reduce((groupedFeeCosts, step) => {
+        let feeCosts = step.estimate.feeCosts;
+        if (typeof included === 'boolean') {
+            feeCosts = feeCosts?.filter((feeCost) => feeCost.included === included);
+        }
+        if (feeCosts?.length) {
+            const { token } = feeCosts[0];
+            const feeCostAmount = feeCosts
+                .reduce((amount, feeCost) => amount.plus((0, big_js_1.default)(feeCost.amount || 0)), (0, big_js_1.default)(0))
+                .div(10 ** token.decimals);
+            const feeCostAmountUSD = feeCosts.reduce((amount, feeCost) => amount + parseFloat(feeCost.amountUSD || '0'), 0);
+            const groupedFeeCost = groupedFeeCosts[token.chainId];
+            const amount = groupedFeeCost
+                ? groupedFeeCost.amount.plus(feeCostAmount)
+                : feeCostAmount;
+            const amountUSD = groupedFeeCost
+                ? groupedFeeCost.amountUSD + feeCostAmountUSD
+                : feeCostAmountUSD;
+            groupedFeeCosts[token.chainId] = {
+                amount,
+                amountUSD,
+                token,
+            };
+            return groupedFeeCosts;
+        }
+        return groupedFeeCosts;
+    }, {}));
+};
+exports.getFeeCostsBreakdown = getFeeCostsBreakdown;

package/cjs/components/SwapRoutes/SwapRoutes.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapRoutes = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const KeyboardArrowRight_1 = require("@mui/icons-material/KeyboardArrowRight");
 const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
@@ -13,16 +12,13 @@ const SwapRouteCard_1 = require("../../components/SwapRouteCard");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
-const SwapRoutes_style_1 = require("./SwapRoutes.style");
-const useSetRecommendedRoute_1 = require("./useSetRecommendedRoute");
 const SwapRoutes = (props) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
     const navigate = (0, react_router_dom_1.useNavigate)();
+    const { variant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const currentRoute = routes?.[0];
-    (0, useSetRecommendedRoute_1.useSetRecommendedRoute)(currentRoute, isFetching);
     if (!currentRoute && !isLoading && !isFetching && !isFetched) {
         return null;
     }
@@ -31,16 +27,11 @@ const SwapRoutes = (props) => {
     };
     const routeNotFound = !currentRoute && !isLoading && !isFetching;
     const onlyRecommendedRoute = variant === 'refuel' || useRecommendedRoute;
+    const showAll = !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1;
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
                     position: 'absolute',
                     top: 8,
                     right: 8,
-                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Stack, { direction: "row", spacing: 2, my: 2, ml: 2, mr: onlyRecommendedRoute || routeNotFound ? 2 : 1, sx: {
-                            borderRightWidth: !onlyRecommendedRoute &&
-                                !routeNotFound &&
-                                (isFetching || (routes && routes.length > 1))
-                                ? 1
-                                : 0,
-                        }, children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: !onlyRecommendedRoute ? '80%' : '100%', variant: "dense" }), !onlyRecommendedRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })) : null] })) : !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: !onlyRecommendedRoute && routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), !onlyRecommendedRoute && routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: !onlyRecommendedRoute && !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, { py: 1, pr: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid, children: (0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {}) }) })) : null })] })] }));
+                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { p: 2, children: [isLoading ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { variant: "cardless" })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: currentRoute, variant: "cardless", active: true })), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: showAll, unmountOnExit: true, mountOnEnter: true, appear: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleCardClick, disabled: isValidating || !isValid, fullWidth: true, children: t('button.showAll') }) }) })] })] }));
 };
 exports.SwapRoutes = SwapRoutes;

package/cjs/components/SwapRoutes/SwapRoutesExpanded.js

@@ -12,17 +12,11 @@ const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const ProgressToNextUpdate_1 = require("../ProgressToNextUpdate");
 const SwapRouteCard_1 = require("../SwapRouteCard");
-const SwapRoutes_style_1 = require("./SwapRoutes.style");
-const useSetRecommendedRoute_1 = require("./useSetRecommendedRoute");
+const SwapRoutesExpanded_style_1 = require("./SwapRoutesExpanded.style");
 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, { timeout: timeout, in: !!element, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout, in: !!element, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(exports.SwapRoutesExpandedElement, {}) }) }) }) }));
+    const element = (0, react_router_dom_1.useMatch)('/');
+    return ((0, jsx_runtime_1.jsx)(SwapRoutesExpanded_style_1.CollapseContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout, in: !!element, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { 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 = () => {
@@ -33,7 +27,6 @@ const SwapRoutesExpandedElement = () => {
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const currentRoute = routes?.[0];
-    (0, useSetRecommendedRoute_1.useSetRecommendedRoute)(currentRoute, isFetching);
     const handleRouteClick = (route) => {
         if (isValid && !isValidating) {
             setExecutableRoute(route);
@@ -44,6 +37,6 @@ const SwapRoutesExpandedElement = () => {
     };
     const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched);
     const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Container, { 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, { 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, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { variant: "stretched" }, index)))) : (routes?.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "stretched", expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(SwapRoutesExpanded_style_1.Container, { sx: containerStyle, enableColorScheme: true, children: (0, jsx_runtime_1.jsxs)(SwapRoutesExpanded_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(SwapRoutesExpanded_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { 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, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
 };
 exports.SwapRoutesExpandedElement = SwapRoutesExpandedElement;

package/cjs/components/SwapRoutes/{SwapRoutes.style.d.ts → SwapRoutesExpanded.style.d.ts}

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

package/cjs/components/SwapRoutes/{SwapRoutes.style.js → SwapRoutesExpanded.style.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Stack = exports.Header = exports.Container = exports.ScrollableContainer = exports.CollapseContainer = void 0;
+exports.Header = exports.Container = exports.ScrollableContainer = exports.CollapseContainer = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const AppContainer_1 = require("../AppContainer");
@@ -35,14 +35,3 @@ exports.Header = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     top: 0,
     zIndex: 1200,
 }));
-exports.Stack = (0, styles_1.styled)(material_1.Stack)(({ theme }) => ({
-    alignItems: 'stretch',
-    display: 'flex',
-    flex: 1,
-    flexWrap: 'nowrap',
-    overflow: 'hidden',
-    borderRight: `solid ${theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800]}`,
-    width: 'calc(100% - 48px)',
-}));

package/cjs/components/Switch.js

@@ -31,8 +31,8 @@ exports.Switch = (0, styles_1.styled)(material_1.Switch)(({ theme }) => ({
         },
         [`&.${Switch_1.switchClasses.disabled} .${Switch_1.switchClasses.thumb}`]: {
             color: theme.palette.mode === 'light'
-                ? theme.palette.grey[100]
-                : theme.palette.grey[600],
+                ? (0, styles_1.alpha)(theme.palette.common.black, 0.12)
+                : (0, styles_1.alpha)(theme.palette.common.white, 0.12),
         },
         [`&.${Switch_1.switchClasses.disabled} + .${Switch_1.switchClasses.track}`]: {
             opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
@@ -46,8 +46,8 @@ exports.Switch = (0, styles_1.styled)(material_1.Switch)(({ theme }) => ({
     [`.${Switch_1.switchClasses.track}`]: {
         borderRadius: 24 / 2,
         backgroundColor: theme.palette.mode === 'light'
-            ? theme.palette.grey[300]
-            : theme.palette.grey[800],
+            ? (0, styles_1.alpha)(theme.palette.common.black, 0.16)
+            : (0, styles_1.alpha)(theme.palette.common.white, 0.16),
         opacity: 1,
         transition: theme.transitions.create(['background-color'], {
             duration: theme.transitions.duration.standard,

package/cjs/components/Token/Token.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import type { Step, TokenAmount } from '@lifi/sdk';
+import type { LifiStep, TokenAmount } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 interface TokenProps {
     token?: TokenAmount;
     connected?: boolean;
-    step?: Step;
+    step?: LifiStep;
     disableDescription?: boolean;
     isLoading?: boolean;
 }

package/cjs/components/Token/Token.style.d.ts

@@ -17,8 +17,8 @@ export declare const TextSecondary: import("@emotion/styled").StyledComponent<im
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides> | undefined;
+    variantMapping?: Partial<Record<import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides>, string>> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {

package/cjs/components/TokenList/TokenList.style.d.ts

@@ -17,7 +17,7 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
     button?: false | undefined;
 } & import("@mui/material").ListItemBaseProps & {
@@ -35,4 +35,4 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "button" | "className" | "style" | "classes" | "autoFocus" | "children" | "disabled" | "sx" | "alignItems" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/config/theme.js

@@ -22,7 +22,7 @@ const palette = {
         main: '#0AA65B',
     },
     warning: {
-        main: '#FFE668',
+        main: '#FFCC00',
     },
     error: {
         main: '#E5452F',

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.32.8";
+export declare const version = "2.0.0-alpha.1";

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.32.8';
+exports.version = '2.0.0-alpha.1';

package/cjs/hooks/index.d.ts

@@ -5,7 +5,11 @@ export * from './useDebouncedWatch';
 export * from './useDefaultElementId';
 export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
+export * from './useFundsSufficiency';
+export * from './useGasRecommendation';
+export * from './useGasRefuel';
 export * from './useGasSufficiency';
+export * from './useGetTokenBalancesWithRetry';
 export * from './useInitializer';
 export * from './useNavigateBack';
 export * from './useProcessMessage';

package/cjs/hooks/index.js

@@ -21,7 +21,11 @@ __exportStar(require("./useDebouncedWatch"), exports);
 __exportStar(require("./useDefaultElementId"), exports);
 __exportStar(require("./useExpandableVariant"), exports);
 __exportStar(require("./useFeaturedTokens"), exports);
+__exportStar(require("./useFundsSufficiency"), exports);
+__exportStar(require("./useGasRecommendation"), exports);
+__exportStar(require("./useGasRefuel"), exports);
 __exportStar(require("./useGasSufficiency"), exports);
+__exportStar(require("./useGetTokenBalancesWithRetry"), exports);
 __exportStar(require("./useInitializer"), exports);
 __exportStar(require("./useNavigateBack"), exports);
 __exportStar(require("./useProcessMessage"), exports);

package/cjs/hooks/useChains.js

@@ -7,13 +7,13 @@ const react_hook_form_1 = require("react-hook-form");
 const providers_1 = require("../providers");
 const stores_1 = require("../stores");
 const useChains = () => {
-    const { disabledChains, chains } = (0, providers_1.useWidgetConfig)();
+    const { chains } = (0, providers_1.useWidgetConfig)();
     const lifi = (0, providers_1.useLiFi)();
     const { getValues, setValue } = (0, react_hook_form_1.useFormContext)();
     const initializeChains = (0, stores_1.useChainOrderStore)((state) => state.initializeChains);
     const { data, isLoading } = (0, react_query_1.useQuery)(['chains'], async () => {
         const availableChains = await lifi.getChains();
-        const filteredChains = availableChains.filter((chain) => (0, providers_1.isItemAllowed)(chain.id, chains, disabledChains));
+        const filteredChains = availableChains.filter((chain) => (0, providers_1.isItemAllowed)(chain.id, chains));
         const chainOrder = initializeChains(filteredChains.map((chain) => chain.id));
         const [fromChainValue, toChainValue] = getValues([
             providers_1.SwapFormKey.FromChain,

package/cjs/hooks/useFeaturedTokens.d.ts

@@ -1 +1 @@
-export declare const useFeaturedTokens: (selectedChainId?: number) => import("@lifi/types").Token[];
+export declare const useFeaturedTokens: (selectedChainId?: number) => import("@lifi/types").Token[] | undefined;

package/cjs/hooks/useFeaturedTokens.js

@@ -4,7 +4,7 @@ exports.useFeaturedTokens = void 0;
 const react_1 = require("react");
 const providers_1 = require("../providers");
 const useFeaturedTokens = (selectedChainId) => {
-    const { featuredTokens, tokens } = (0, providers_1.useWidgetConfig)();
-    return (0, react_1.useMemo)(() => [...(tokens?.featured ?? []), ...(featuredTokens ?? [])].filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId, tokens?.featured]);
+    const { tokens } = (0, providers_1.useWidgetConfig)();
+    return (0, react_1.useMemo)(() => tokens?.featured?.filter((token) => token.chainId === selectedChainId), [selectedChainId, tokens?.featured]);
 };
 exports.useFeaturedTokens = useFeaturedTokens;

package/cjs/hooks/useFundsSufficiency.d.ts

@@ -0,0 +1,5 @@
+import type { Route } from '@lifi/sdk';
+export declare const useFundsSufficiency: (route?: Route) => {
+    insufficientFunds: boolean | undefined;
+    isInitialLoading: boolean;
+};

package/cjs/hooks/useFundsSufficiency.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFundsSufficiency = void 0;
+const react_query_1 = require("@tanstack/react-query");
+const big_js_1 = require("big.js");
+const react_hook_form_1 = require("react-hook-form");
+const providers_1 = require("../providers");
+const stores_1 = require("../stores");
+const useGetTokenBalancesWithRetry_1 = require("./useGetTokenBalancesWithRetry");
+const useTokenAddressBalance_1 = require("./useTokenAddressBalance");
+const refetchInterval = 30000;
+const useFundsSufficiency = (route) => {
+    const { account, provider } = (0, providers_1.useWallet)();
+    const getTokenBalancesWithRetry = (0, useGetTokenBalancesWithRetry_1.useGetTokenBalancesWithRetry)(provider);
+    const [fromChainId, fromTokenAddress, fromAmount] = (0, react_hook_form_1.useWatch)({
+        name: [
+            providers_1.SwapFormKey.FromChain,
+            providers_1.SwapFormKey.FromToken,
+            providers_1.SwapFormKey.FromAmount,
+        ],
+    });
+    let chainId = fromChainId;
+    let tokenAddress = fromTokenAddress;
+    if (route) {
+        chainId = route.fromToken.chainId;
+        tokenAddress = route.fromToken.address;
+    }
+    const { token, isLoading } = (0, useTokenAddressBalance_1.useTokenAddressBalance)(chainId, tokenAddress);
+    const { data: insufficientFunds, isInitialLoading } = (0, react_query_1.useQuery)([
+        'funds-sufficiency-check',
+        account.address,
+        chainId,
+        tokenAddress,
+        route?.id ?? fromAmount,
+    ], async () => {
+        if (!account.address || !token) {
+            return;
+        }
+        let currentTokenBalance = (0, big_js_1.default)(token?.amount || 0);
+        if (!route || (0, stores_1.isRouteDone)(route)) {
+            const insufficientFunds = currentTokenBalance.lt((0, big_js_1.default)(fromAmount || 0));
+            return insufficientFunds;
+        }
+        const currentAction = route.steps.filter((step) => !step.execution || step.execution.status !== 'DONE')[0]?.action;
+        if (token.chainId === currentAction.fromToken.chainId &&
+            token.address === currentAction.fromToken.address &&
+            currentTokenBalance.gt(0)) {
+            const insufficientFunds = (0, big_js_1.default)(route.fromAmount)
+                .div(10 ** route.fromToken.decimals)
+                .gt(currentTokenBalance);
+            return insufficientFunds;
+        }
+        const tokenBalances = await getTokenBalancesWithRetry(account.address, [
+            currentAction.fromToken,
+        ]);
+        currentTokenBalance = (0, big_js_1.default)(tokenBalances?.[0]?.amount || 0);
+        const insufficientFunds = (0, big_js_1.default)(currentAction.fromAmount)
+            .div(10 ** currentAction.fromToken.decimals)
+            .gt(currentTokenBalance);
+        return insufficientFunds;
+    }, {
+        enabled: Boolean(account.address && token && !isLoading),
+        refetchInterval,
+        staleTime: refetchInterval,
+        cacheTime: refetchInterval,
+        keepPreviousData: true,
+    });
+    return {
+        insufficientFunds,
+        isInitialLoading,
+    };
+};
+exports.useFundsSufficiency = useFundsSufficiency;

package/cjs/hooks/useGasRecommendation.d.ts

@@ -0,0 +1,2 @@
+import type { ChainId } from '@lifi/sdk';
+export declare const useGasRecommendation: (chainId: ChainId, fromChain?: ChainId, fromToken?: string) => import("@tanstack/react-query").UseQueryResult<import("@lifi/sdk").GasRecommendationResponse, unknown>;

package/cjs/hooks/useGasRecommendation.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGasRecommendation = void 0;
+const react_query_1 = require("@tanstack/react-query");
+const providers_1 = require("../providers");
+const refetchInterval = 60000;
+const useGasRecommendation = (chainId, fromChain, fromToken) => {
+    const lifi = (0, providers_1.useLiFi)();
+    return (0, react_query_1.useQuery)(['gas-recommendation', chainId, fromChain, fromToken], async ({ queryKey: [_, chainId, fromChain, fromToken] }) => {
+        const gasRecommendation = await lifi.getGasRecommendation({
+            chainId: chainId,
+            fromChain: fromChain,
+            fromToken: fromToken,
+        });
+        return gasRecommendation;
+    }, {
+        enabled: Boolean(chainId),
+        refetchInterval,
+        staleTime: refetchInterval,
+        cacheTime: refetchInterval,
+    });
+};
+exports.useGasRecommendation = useGasRecommendation;

package/cjs/hooks/useGasRefuel.d.ts

@@ -0,0 +1,7 @@
+export declare const useGasRefuel: () => {
+    enabled: boolean;
+    availble: boolean | undefined;
+    isLoading: boolean;
+    chain: import("@lifi/types").ExtendedChain | undefined;
+    gasRecommendation: import("@lifi/types").GasRecommendationResponse | undefined;
+};