@lifi/widget 1.18.1 → 1.18.2

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -23,18 +23,18 @@ const Token_1 = require("../Token");
 const SwapRouteCard_style_1 = require("./SwapRouteCard.style");
 const SwapRouteCard = (_a) => {
     var _b;
-    var { route, active, variant = 'default' } = _a, other = __rest(_a, ["route", "active", "variant"]);
+    var { route, active, variant = 'default', expanded } = _a, other = __rest(_a, ["route", "active", "variant", "expanded"]);
     const { t } = (0, react_i18next_1.useTranslation)();
-    const [expanded, setExpanded] = (0, react_1.useState)(variant === 'default');
+    const [cardExpanded, setCardExpanded] = (0, react_1.useState)(variant === 'default' || expanded);
     const alternativeTag = t(`swap.tags.ALTERNATIVE`);
     const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
         ? t(`swap.tags.${route.tags[0]}`)
         : alternativeTag;
     const handleExpand = (e) => {
         e.stopPropagation();
-        setExpanded((expanded) => !expanded);
+        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 === 'extended' ? ((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 === 'extended' ? route.steps[0] : undefined }), variant === 'extended' ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: expanded ? (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: expanded }, { children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'extended' ? ((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({ 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] })));
 };
 exports.SwapRouteCard = SwapRouteCard;
 const SwapRouteCardEssentials = ({ route, dense }) => {

package/cjs/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -17,6 +17,6 @@ const material_1 = require("@mui/material");
 const Card_1 = require("../Card");
 const SwapRouteCardSkeleton = (_a) => {
     var { variant } = _a, other = __rest(_a, ["variant"]);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 118, height: 24, sx: { borderRadius: 0.5 } }), variant === 'extended' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ 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] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ 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, Object.assign({ 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 === 'extended' ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] })), variant !== 'extended' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ 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 ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 118, height: 24, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ 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] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ 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, Object.assign({ 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, Object.assign({ 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] })));
 };
 exports.SwapRouteCardSkeleton = SwapRouteCardSkeleton;

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

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

package/cjs/components/SwapRoutes/SwapRoutesExpanded.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
@@ -17,6 +18,7 @@ const SwapRoutesExpanded = () => {
     const { containerStyle } = (0, providers_1.useWidgetConfig)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
+    const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const cleanedPathname = pathname.endsWith('/')
@@ -25,14 +27,16 @@ const SwapRoutesExpanded = () => {
     const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
     const hasPath = utils_1.navigationRoutesValues.includes(path);
     const handleRouteClick = (route) => {
-        setExecutableRoute(route);
-        navigate(utils_1.navigationRoutes.swapExecution, {
-            state: { routeId: route.id },
-        });
+        if (isValid && !isValidating) {
+            setExecutableRoute(route);
+            navigate(utils_1.navigationRoutes.swapExecution, {
+                state: { routeId: route.id },
+            });
+        }
     };
     const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
     const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched) && !hasPath;
     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 }, { 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: "extended" }, 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: "extended" }, route.id)))) }))] }) })) })) })) }));
+    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 }, { 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;

package/cjs/config/version.d.ts

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

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

package/components/SwapRouteCard/SwapRouteCard.js

@@ -20,18 +20,18 @@ import { Token } from '../Token';
 import { IconButton, Label } from './SwapRouteCard.style';
 export const SwapRouteCard = (_a) => {
     var _b;
-    var { route, active, variant = 'default' } = _a, other = __rest(_a, ["route", "active", "variant"]);
+    var { route, active, variant = 'default', expanded } = _a, other = __rest(_a, ["route", "active", "variant", "expanded"]);
     const { t } = useTranslation();
-    const [expanded, setExpanded] = useState(variant === 'default');
+    const [cardExpanded, setCardExpanded] = useState(variant === 'default' || expanded);
     const alternativeTag = t(`swap.tags.ALTERNATIVE`);
     const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
         ? t(`swap.tags.${route.tags[0]}`)
         : alternativeTag;
     const handleExpand = (e) => {
         e.stopPropagation();
-        setExpanded((expanded) => !expanded);
+        setCardExpanded((expanded) => !expanded);
     };
-    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'extended' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'extended' ? route.steps[0] : undefined }), variant === 'extended' ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: expanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ mountOnEnter: true, unmountOnExit: true, in: expanded }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'extended' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
+    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ mountOnEnter: true, unmountOnExit: true, in: cardExpanded }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
 };
 export const SwapRouteCardEssentials = ({ route, dense }) => {
     var _a;

package/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -14,5 +14,5 @@ import { Box, Skeleton } from '@mui/material';
 import { Card } from '../Card';
 export const SwapRouteCardSkeleton = (_a) => {
     var { variant } = _a, other = __rest(_a, ["variant"]);
-    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Skeleton, { variant: "rectangular", width: 118, height: 24, sx: { borderRadius: 0.5 } }), variant === 'extended' ? (_jsxs(Box, Object.assign({ display: "flex" }, { children: [_jsx(Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 32, height: 24 })] }))) : null] })), _jsxs(Box, Object.assign({ mt: 2 }, { children: [_jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Box, Object.assign({ mr: 2 }, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) })), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] })), _jsxs(Box, Object.assign({ ml: 6, display: "flex", alignItems: "center" }, { children: [_jsx(Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'extended' ? (_jsx(Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] })), variant !== 'extended' ? (_jsxs(Box, Object.assign({ mt: 2, display: "flex", justifyContent: "space-between" }, { children: [_jsx(Skeleton, { variant: "text", width: 48, height: 24 }), _jsx(Skeleton, { variant: "text", width: 48, height: 24 })] }))) : null] })));
+    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Skeleton, { variant: "rectangular", width: 118, height: 24, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? (_jsxs(Box, Object.assign({ display: "flex" }, { children: [_jsx(Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 32, height: 24 })] }))) : null] })), _jsxs(Box, Object.assign({ mt: 2 }, { children: [_jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Box, Object.assign({ mr: 2 }, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) })), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] })), _jsxs(Box, Object.assign({ ml: 6, display: "flex", alignItems: "center" }, { children: [_jsx(Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? (_jsx(Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] })), variant !== 'stretched' ? (_jsxs(Box, Object.assign({ mt: 2, display: "flex", justifyContent: "space-between" }, { children: [_jsx(Skeleton, { variant: "text", width: 48, height: 24 }), _jsx(Skeleton, { variant: "text", width: 48, height: 24 })] }))) : null] })));
 };

package/components/SwapRouteCard/types.d.ts

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

package/components/SwapRoutes/SwapRoutesExpanded.js

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

package/config/version.d.ts

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

package/config/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.18.1",
+  "version": "1.18.2",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",