@lifi/widget 1.18.7 → 1.18.9

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -40,8 +40,11 @@ exports.SwapRouteCard = SwapRouteCard;
 const SwapRouteCardEssentials = ({ route, dense }) => {
     var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
-    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 }) }))] })), (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: `${(route.steps
-                            .map((step) => step.estimate.executionDuration)
-                            .reduce((duration, x) => duration + x) / 60).toFixed(0)}m` }))] })), !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] })));
+    const executionTime = (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] })));
 };
 exports.SwapRouteCardEssentials = SwapRouteCardEssentials;

package/cjs/components/SwapRoutes/SwapRoutes.js

@@ -4,7 +4,6 @@ exports.SwapRoutes = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
-const react_1 = require("react");
 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");
@@ -12,22 +11,16 @@ const Card_1 = require("../../components/Card");
 const ProgressToNextUpdate_1 = require("../../components/ProgressToNextUpdate");
 const SwapRouteCard_1 = require("../../components/SwapRouteCard");
 const hooks_1 = require("../../hooks");
-const providers_1 = require("../../providers");
-const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const SwapRoutes_style_1 = require("./SwapRoutes.style");
+const useSetSelectedRoute_1 = require("./useSetSelectedRoute");
 const SwapRoutes = (props) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant } = (0, providers_1.useWidgetConfig)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
-    const setSelectedRoute = (0, stores_1.useSelectedRouteStore)((state) => state.setSelectedRoute);
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
-    (0, react_1.useEffect)(() => {
-        setSelectedRoute(!isFetching ? currentRoute : undefined);
-        return () => setSelectedRoute(undefined);
-    }, [currentRoute, isFetching, setSelectedRoute]);
+    (0, useSetSelectedRoute_1.useSetSelectedRoute)(currentRoute, isFetching);
     if (!currentRoute && !isLoading && !isFetching && !isFetched) {
         return null;
     }
@@ -35,9 +28,6 @@ const SwapRoutes = (props) => {
         navigate(utils_1.navigationRoutes.swapRoutes);
     };
     const routeNotFound = !currentRoute && !isLoading && !isFetching;
-    if (variant === 'expandable') {
-        return null;
-    }
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, 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,

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

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

package/cjs/components/SwapRoutes/SwapRoutes.style.js

@@ -1,20 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = exports.Container = exports.ScrollableContainer = exports.CollapseContainer = exports.Stack = void 0;
+exports.Stack = 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");
-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)',
-}));
 exports.CollapseContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     height: AppContainer_1.maxHeight,
 }));
@@ -25,7 +14,7 @@ exports.ScrollableContainer = (0, styles_1.styled)(material_1.Box)({
     display: 'flex',
     flexDirection: 'column',
 });
-exports.Container = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+exports.Container = (0, styles_1.styled)(material_1.ScopedCssBaseline)(({ theme }) => ({
     backgroundColor: theme.palette.background.default,
     overflow: 'auto',
     width: 436,
@@ -45,3 +34,14 @@ 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/SwapRoutes/SwapRoutesExpanded.js

@@ -13,13 +13,16 @@ 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 SwapRoutesExpanded = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    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 { containerStyle } = (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 === 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)
@@ -34,9 +37,8 @@ const SwapRoutesExpanded = () => {
             });
         }
     };
-    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: "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)(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)))) }))] }) })) })) })) }));
 };
 exports.SwapRoutesExpanded = SwapRoutesExpanded;

package/cjs/components/SwapRoutes/useSetSelectedRoute.d.ts

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

package/cjs/components/SwapRoutes/useSetSelectedRoute.js

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

package/cjs/components/Token/Token.js

@@ -28,12 +28,12 @@ const Token = (_a) => {
     const { getChainById } = (0, hooks_1.useChains)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(TextFitter_1.TextFitter, Object.assign({ height: 30, textStyle: {
                             fontWeight: 700,
-                        } }, { children: (0, utils_1.formatTokenAmount)(token.amount, token.decimals) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
+                        } }, { children: (0, utils_1.formatTokenAmount)(token.amount, token.decimals) }))] })), (0, jsx_runtime_1.jsxs)(Token_style_1.TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [(0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
                             tokenSymbol: token.symbol,
                             chainName: (_b = getChainById(token.chainId)) === null || _b === void 0 ? void 0 : _b.name,
-                        }) })), step ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary", px: 1 }, { children: "\u2022" })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 0.75 }, { children: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
-                                        border: 0,
-                                        marginBottom: -0.25,
-                                    } }, { children: step.toolDetails.name[0] })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary" }, { children: step.toolDetails.name }))] }))) : null] }))] })));
+                        }) })), step ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary", px: 1, mt: 0.5 }, { children: "\u2022" })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 0.75 }, { children: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
+                                                border: 0,
+                                                marginBottom: -0.25,
+                                            } }, { children: step.toolDetails.name[0] })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary" }, { children: step.toolDetails.name }))] }))] })) : null] }))] })));
 };
 exports.Token = Token;

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

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

package/cjs/components/Token/Token.style.js

@@ -1,15 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TokenDivider = exports.TextSecondary = void 0;
+exports.TokenDivider = exports.TextSecondary = exports.TextSecondaryContainer = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
-exports.TextSecondary = (0, styles_1.styled)(material_1.Typography, {
+exports.TextSecondaryContainer = (0, styles_1.styled)(material_1.Box, {
     shouldForwardProp: (prop) => prop !== 'connected',
 })(({ theme, connected }) => ({
-    fontSize: 12,
-    lineHeight: 1,
-    fontWeight: 500,
-    color: theme.palette.text.secondary,
     borderLeftWidth: connected ? 2 : 0,
     borderLeftStyle: 'solid',
     borderColor: theme.palette.mode === 'light'
@@ -17,12 +13,22 @@ exports.TextSecondary = (0, styles_1.styled)(material_1.Typography, {
         : theme.palette.grey[800],
     margin: connected
         ? theme.spacing(0.5, 0, 0, 1.875)
-        : theme.spacing(0.5, 0, 0, 6),
+        : theme.spacing(0, 0, 0, 6),
     padding: connected
         ? theme.spacing(0, 0, 0, 3.875)
         : theme.spacing(0, 0, 0, 0),
     display: 'flex',
     alignItems: 'flex-start',
+    flexWrap: 'wrap',
+}));
+exports.TextSecondary = (0, styles_1.styled)(material_1.Typography, {
+    shouldForwardProp: (prop) => prop !== 'connected',
+})(({ theme, connected }) => ({
+    fontSize: 12,
+    lineHeight: 1,
+    fontWeight: 500,
+    color: theme.palette.text.secondary,
+    marginTop: connected ? 0 : theme.spacing(0.5),
 }));
 exports.TokenDivider = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     height: 12,

package/cjs/components/TokenList/TokenList.js

@@ -17,7 +17,7 @@ const TokenList = ({ formType, height, onClick, }) => {
     const [selectedChainId] = (0, react_hook_form_1.useWatch)({
         name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
     });
-    const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.SwapFormKey.TokenSearchFilter], 250);
+    const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.SwapFormKey.TokenSearchFilter], 320);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = (0, hooks_1.useTokenBalances)(selectedChainId);
     let filteredTokens = ((_a = tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : chainTokens) !== null && _a !== void 0 ? _a : []);
     const searchFilter = (_b = tokenSearchFilter === null || tokenSearchFilter === void 0 ? void 0 : tokenSearchFilter.toUpperCase()) !== null && _b !== void 0 ? _b : '';
@@ -27,10 +27,10 @@ const TokenList = ({ formType, height, onClick, }) => {
             token.address.toUpperCase().includes(searchFilter))
         : filteredTokens;
     const tokenSearchEnabled = !isTokensLoading &&
-        !!filteredTokens.length &&
+        !filteredTokens.length &&
         !!tokenSearchFilter &&
         !!selectedChainId;
-    const { token: searchedToken, isLoading: isSearchedTokenLoading } = (0, hooks_1.useTokenSearch)(tokenSearchFilter, selectedChainId, tokenSearchEnabled);
+    const { token: searchedToken, isLoading: isSearchedTokenLoading } = (0, hooks_1.useTokenSearch)(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
     const isLoading = isTokensLoading || (tokenSearchEnabled && isSearchedTokenLoading);
     const tokens = filteredTokens.length
         ? filteredTokens

package/cjs/config/version.d.ts

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

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

package/cjs/hooks/useDebouncedWatch.js

@@ -15,10 +15,7 @@ const useDebouncedWatch = (name, delay) => {
             const hasWatchedValue = Array.isArray(watchedValue)
                 ? watchedValue.some((value) => value)
                 : Boolean(watchedValue);
-            const hasDebouncedValue = Array.isArray(debouncedValueRef.current)
-                ? debouncedValueRef.current.some((value) => value)
-                : Boolean(debouncedValueRef.current);
-            if (hasWatchedValue && hasDebouncedValue) {
+            if (hasWatchedValue) {
                 const handler = setTimeout(() => {
                     setDebouncedValue(watchedValue);
                 }, delay);

package/cjs/hooks/useSwapRoutes.js

@@ -38,7 +38,7 @@ const useSwapRoutes = () => {
             providers_1.SwapFormKey.ToAddress,
         ],
     });
-    const [fromTokenAmount] = (0, _1.useDebouncedWatch)([providers_1.SwapFormKey.FromAmount], 250);
+    const [fromTokenAmount] = (0, _1.useDebouncedWatch)([providers_1.SwapFormKey.FromAmount], 320);
     const { token } = (0, _1.useToken)(fromChainId, fromTokenAddress);
     const isEnabled = 
     // Boolean(account.address) &&

package/cjs/hooks/useToken.js

@@ -3,15 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useToken = void 0;
 const react_1 = require("react");
 const useTokens_1 = require("./useTokens");
+const useTokenSearch_1 = require("./useTokenSearch");
 const useToken = (chainId, tokenAddress) => {
     const { tokens, isLoading } = (0, useTokens_1.useTokens)(chainId);
     const token = (0, react_1.useMemo)(() => {
         const token = tokens === null || tokens === void 0 ? void 0 : tokens.find((token) => token.address === tokenAddress && token.chainId === chainId);
         return token;
     }, [chainId, tokenAddress, tokens]);
+    const tokenSearchEnabled = !isLoading && !token;
+    const { token: searchedToken, isLoading: isSearchedTokenLoading } = (0, useTokenSearch_1.useTokenSearch)(chainId, tokenAddress, tokenSearchEnabled);
     return {
-        token,
-        isLoading,
+        token: token !== null && token !== void 0 ? token : searchedToken,
+        isLoading: isLoading || (tokenSearchEnabled && isSearchedTokenLoading),
     };
 };
 exports.useToken = useToken;

package/cjs/hooks/useTokenBalance.js

@@ -21,18 +21,23 @@ const useTokenBalance = (token, accountAddress) => {
     const queryClient = (0, react_query_1.useQueryClient)();
     const walletAddress = accountAddress !== null && accountAddress !== void 0 ? accountAddress : account.address;
     const getTokenBalancesWithRetry = (0, react_1.useCallback)((accountAddress, tokens, depth = 0) => __awaiter(void 0, void 0, void 0, function* () {
-        const tokenBalances = yield lifi.getTokenBalances(accountAddress, tokens);
-        if (!tokenBalances.every((token) => token.blockNumber)) {
-            if (depth > 5) {
-                console.warn('Token balance backoff depth exceeded.');
-                return undefined;
+        try {
+            const tokenBalances = yield lifi.getTokenBalances(accountAddress, tokens);
+            if (!tokenBalances.every((token) => token.blockNumber)) {
+                if (depth > 5) {
+                    console.warn('Token balance backoff depth exceeded.');
+                    return undefined;
+                }
+                yield new Promise((resolve) => {
+                    setTimeout(resolve, depth * 100);
+                });
+                return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
             }
-            yield new Promise((resolve) => {
-                setTimeout(resolve, depth * 100);
-            });
-            return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
+            return tokenBalances;
+        }
+        catch (error) {
+            //
         }
-        return tokenBalances;
     }), [lifi]);
     const tokenBalanceQueryKey = (0, react_1.useMemo)(() => ['token-balance', walletAddress, token === null || token === void 0 ? void 0 : token.chainId, token === null || token === void 0 ? void 0 : token.address], [token === null || token === void 0 ? void 0 : token.address, token === null || token === void 0 ? void 0 : token.chainId, walletAddress]);
     const { data, isLoading, refetch } = (0, react_query_1.useQuery)(tokenBalanceQueryKey, ({ queryKey: [, accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {

package/cjs/hooks/useTokenSearch.d.ts

@@ -1,7 +1,5 @@
 import type { Token } from '../types';
-export declare const useTokenSearch: (token: string, chainId: number, enabled?: boolean) => {
+export declare const useTokenSearch: (chainId: number, token: string, enabled?: boolean) => {
     token: Token | undefined;
     isLoading: boolean;
-    isFetching: boolean;
-    isFetched: boolean;
 };

package/cjs/hooks/useTokenSearch.js

@@ -12,10 +12,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTokenSearch = void 0;
 const react_query_1 = require("@tanstack/react-query");
 const providers_1 = require("../providers");
-const useTokenSearch = (token, chainId, enabled) => {
+const useTokenSearch = (chainId, token, enabled) => {
     const lifi = (0, providers_1.useLiFi)();
     const queryClient = (0, react_query_1.useQueryClient)();
-    const { data, isLoading, isFetching, isFetched } = (0, react_query_1.useQuery)(['token-search', chainId, token], ({ queryKey: [, chainId, token], signal }) => __awaiter(void 0, void 0, void 0, function* () {
+    const { data, isLoading } = (0, react_query_1.useQuery)(['token-search', chainId, token], ({ queryKey: [, chainId, token], signal }) => __awaiter(void 0, void 0, void 0, function* () {
         const data = yield lifi.getToken(chainId, token, {
             signal,
         });
@@ -29,14 +29,12 @@ const useTokenSearch = (token, chainId, enabled) => {
         }
         return data;
     }), {
-        enabled,
+        enabled: Boolean(chainId && token && enabled),
         retry: false,
     });
     return {
         token: data,
         isLoading,
-        isFetching,
-        isFetched,
     };
 };
 exports.useTokenSearch = useTokenSearch;

package/cjs/i18n/en/translation.json

@@ -58,7 +58,7 @@
     "stepSwap": "Swap",
     "stepBridge": "Bridge",
     "stepSwapAndBridge": "Swap and bridge",
-    "estimatedTime": "~{{value}} min.",
+    "estimatedTime": "{{value}}m",
     "crossStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
     "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",

package/cjs/pages/MainPage/MainPage.js

@@ -9,9 +9,11 @@ const SelectChainAndToken_1 = require("../../components/SelectChainAndToken");
 const SendToWallet_1 = require("../../components/SendToWallet");
 const SwapInput_1 = require("../../components/SwapInput");
 const SwapRoutes_1 = require("../../components/SwapRoutes");
+const providers_1 = require("../../providers");
 const MainPage_style_1 = require("./MainPage.style");
 const MainSwapButton_1 = require("./MainSwapButton");
 const MainPage = () => {
-    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 3 }, { children: (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from" }) })), (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] }))] }))] })));
+    const { variant } = (0, providers_1.useWidgetConfig)();
+    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 3 }, { children: (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from" }) })), variant !== 'expandable' ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }) : null, (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] }))] }))] })));
 };
 exports.MainPage = MainPage;

package/cjs/stores/routes/useRouteExecutionStore.js

@@ -82,6 +82,7 @@ exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persi
                     }
                 });
             }
+            localStorage.removeItem('routes');
         }
         catch (error) {
             console.log(error);

package/cjs/stores/settings/useSettingsStore.js

@@ -23,7 +23,7 @@ exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0
     appearance: 'auto',
     gasPrice: 'normal',
     routePriority: 'RECOMMENDED',
-    slippage: '3',
+    slippage: '0.5',
     setValue: (key, value) => set((state) => {
         state[key] = value;
     }),
@@ -68,7 +68,7 @@ exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0
     }),
 })), {
     name: 'li.fi-widget-settings',
-    version: 1,
+    version: 2,
     partialize: (state) => {
         const { enabledBridges, enabledExchanges } = state, partializedState = __rest(state, ["enabledBridges", "enabledExchanges"]);
         return partializedState;
@@ -86,6 +86,9 @@ exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0
         if (version === 0 && persistedState.appearance === 'system') {
             persistedState.appearance = 'auto';
         }
+        if (version === 1) {
+            persistedState.slippage = '0.5';
+        }
         return persistedState;
     },
 }));

package/components/SwapRouteCard/SwapRouteCard.js

@@ -36,7 +36,10 @@ export const SwapRouteCard = (_a) => {
 export const SwapRouteCardEssentials = ({ route, dense }) => {
     var _a;
     const { t } = useTranslation();
-    return (_jsxs(Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [_jsxs(Box, Object.assign({ display: "flex", alignItems: "center", pr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`swap.currency`, { value: (_a = route.gasCostUSD) !== null && _a !== void 0 ? _a : 0 }) }))] })), _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", pr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: `${(route.steps
-                            .map((step) => step.estimate.executionDuration)
-                            .reduce((duration, x) => duration + x) / 60).toFixed(0)}m` }))] })), !dense ? (_jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(LayersIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] }))) : null] })));
+    const executionTime = (route.steps
+        .map((step) => step.estimate.executionDuration)
+        .reduce((duration, x) => duration + x) / 60).toFixed(0) || 1;
+    return (_jsxs(Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [_jsxs(Box, Object.assign({ display: "flex", alignItems: "center", pr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`swap.currency`, { value: (_a = route.gasCostUSD) !== null && _a !== void 0 ? _a : 0.01 }) }))] })), _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", pr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
+                            value: executionTime,
+                        }) }))] })), !dense ? (_jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(LayersIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] }))) : null] })));
 };