@lifi/widget 1.17.1 → 1.18.0

package/components/SwapRouteCard/SwapRouteCard.style.d.ts

@@ -14,3 +14,33 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
 }, 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> & {
     active?: boolean | undefined;
 }, {}, {}>;
+export declare const IconButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    active?: boolean | undefined;
+}, {}, {}>;

package/components/SwapRouteCard/SwapRouteCard.style.js

@@ -1,5 +1,5 @@
-import { Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { IconButton as MuiIconButton, Typography } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
 import { getContrastTextColor } from '../../utils';
 export const Label = styled(Typography, {
     shouldForwardProp: (prop) => prop !== 'active',
@@ -9,8 +9,8 @@ export const Label = styled(Typography, {
     borderColor: active
         ? theme.palette.secondary.main
         : theme.palette.mode === 'light'
-            ? theme.palette.grey[500]
-            : theme.palette.grey[600],
+            ? theme.palette.grey[300]
+            : theme.palette.grey[700],
     borderRadius: theme.shape.borderRadiusSecondary,
     color: active
         ? getContrastTextColor(theme, theme.palette.secondary.main)
@@ -25,3 +25,16 @@ export const Label = styled(Typography, {
     display: 'inline-flex',
     userSelect: 'none',
 }));
+export const IconButton = styled(MuiIconButton, {
+    shouldForwardProp: (prop) => prop !== 'active',
+})(({ theme, active }) => {
+    const backgroundColor = theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white;
+    return {
+        backgroundColor: alpha(backgroundColor, 0.04),
+        '&:hover': {
+            backgroundColor: alpha(backgroundColor, 0.08),
+        },
+    };
+});

package/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -13,16 +13,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Skeleton } from '@mui/material';
 import { Card } from '../Card';
 export const SwapRouteCardSkeleton = (_a) => {
-    var { dense } = _a, other = __rest(_a, ["dense"]);
-    return (_jsxs(Card, Object.assign({ dense: dense, indented: true }, other, { children: [_jsx(Skeleton, { variant: "rectangular", width: 120, height: 24, sx: { borderRadius: 0.5 } }), _jsxs(Box, Object.assign({ my: 2 }, { children: [_jsxs(Box, Object.assign({ sx: {
-                            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 })] })), _jsx(Box, Object.assign({ ml: 6 }, { children: _jsx(Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }) }))] })), _jsxs(Box, Object.assign({ sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                } }, { children: [_jsxs(Box, { children: [_jsx(Skeleton, { variant: "text", width: 56, height: 20 }), _jsx(Skeleton, { variant: "text", width: 52, height: 16 })] }), _jsxs(Box, Object.assign({ sx: {
-                            display: 'flex',
-                            alignItems: 'flex-end',
-                            flexDirection: 'column',
-                        } }, { children: [_jsx(Skeleton, { variant: "text", width: 40, height: 20 }), _jsx(Skeleton, { variant: "text", width: 48, height: 16 })] }))] }))] })));
+    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] })));
 };

package/components/SwapRouteCard/SwapRouteNotFoundCard.d.ts

@@ -1,4 +1,2 @@
 /// <reference types="react" />
-import type { BoxProps } from '@mui/material';
-import type { SwapRouteCardSkeletonProps } from './types';
-export declare const SwapRouteNotFoundCard: React.FC<SwapRouteCardSkeletonProps & BoxProps>;
+export declare const SwapRouteNotFoundCard: React.FC;

package/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -1,20 +1,8 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Route as RouteIcon } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-export const SwapRouteNotFoundCard = (_a) => {
-    var { dense } = _a, other = __rest(_a, ["dense"]);
+export const SwapRouteNotFoundCard = () => {
     const { t } = useTranslation();
     return (_jsxs(Box, Object.assign({ sx: {
             display: 'flex',

package/components/SwapRouteCard/types.d.ts

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

package/components/SwapRoutes/SwapRoutes.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
+import { Box, IconButton } from '@mui/material';
+import { useEffect } from 'react';
+import { useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardTitle } from '../../components/Card';
+import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
+import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
+import { useSwapRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { useSelectedRouteStore } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { Stack } from './SwapRoutes.style';
+export const SwapRoutes = (props) => {
+    const { t } = useTranslation();
+    const { variant } = useWidgetConfig();
+    const navigate = useNavigate();
+    const { isValid, isValidating } = useFormState();
+    const setSelectedRoute = useSelectedRouteStore((state) => state.setSelectedRoute);
+    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
+    const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
+    useEffect(() => {
+        setSelectedRoute(!isFetching ? currentRoute : undefined);
+        return () => setSelectedRoute(undefined);
+    }, [currentRoute, isFetching, setSelectedRoute]);
+    if (!currentRoute && !isLoading && !isFetching && !isFetched) {
+        return null;
+    }
+    const handleCardClick = () => {
+        navigate(navigationRoutes.swapRoutes);
+    };
+    const routeNotFound = !currentRoute && !isLoading && !isFetching;
+    if (variant === 'expandable') {
+        return null;
+    }
+    return (_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.routes') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
+                    position: 'absolute',
+                    top: 8,
+                    right: 8,
+                } }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(Stack, Object.assign({ direction: "row", spacing: 2, my: 2, ml: 2, mr: routeNotFound ? 2 : 1, sx: {
+                            borderWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
+                                ? 1
+                                : 0,
+                        } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, {})) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense" })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes", disabled: isValidating || !isValid }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })));
+};

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

@@ -0,0 +1,43 @@
+/// <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;
+    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>, {}, {}>;
+export declare const ScrollableContainer: 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>, {}, {}>;
+export declare const Container: 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>, {}, {}>;
+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;
+    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>, {}, {}>;

package/components/SwapRoutes/SwapRoutes.style.js

@@ -0,0 +1,44 @@
+import { Box, Stack as MuiStack } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+import { maxHeight } from '../AppContainer';
+export const Stack = styled(MuiStack)(({ 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)',
+}));
+export const CollapseContainer = styled(Box)(({ theme }) => ({
+    height: maxHeight,
+}));
+export const ScrollableContainer = styled(Box)({
+    overflowY: 'auto',
+    height: '100%',
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+});
+export const Container = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    overflow: 'auto',
+    width: 436,
+    maxHeight,
+    marginLeft: theme.spacing(3),
+    display: 'flex',
+    flexDirection: 'column',
+}));
+export const Header = styled(Box)(({ theme }) => ({
+    backgroundColor: alpha(theme.palette.background.default, 0.84),
+    backdropFilter: 'blur(12px)',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: theme.spacing(1.5, 3),
+    position: 'sticky',
+    top: 0,
+    zIndex: 1200,
+}));

package/components/SwapRoutes/SwapRoutesExpanded.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SwapRoutesExpanded: () => JSX.Element;

package/components/SwapRoutes/SwapRoutesExpanded.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapse, Grow, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useSwapRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { useSetExecutableRoute } from '../../stores';
+import { navigationRoutes, navigationRoutesValues } from '../../utils';
+import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
+import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../SwapRouteCard';
+import { CollapseContainer, Container, Header, ScrollableContainer, } from './SwapRoutes.style';
+export const SwapRoutesExpanded = () => {
+    const { t } = useTranslation();
+    const { containerStyle } = useWidgetConfig();
+    const navigate = useNavigate();
+    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
+    const setExecutableRoute = useSetExecutableRoute();
+    const { pathname } = useLocation();
+    const cleanedPathname = pathname.endsWith('/')
+        ? pathname.slice(0, -1)
+        : pathname;
+    const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
+    const hasPath = navigationRoutesValues.includes(path);
+    const handleRouteClick = (route) => {
+        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)))) }))] }) })) })) })) }));
+};

package/components/SwapRoutes/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SwapRoutes';
+export * from './SwapRoutesExpanded';

package/components/SwapRoutes/index.js

@@ -0,0 +1,2 @@
+export * from './SwapRoutes';
+export * from './SwapRoutesExpanded';

package/components/Token/Token.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import type { TokenAmount } from '@lifi/sdk';
+import type { Step, TokenAmount } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 export declare const Token: React.FC<{
     token: TokenAmount;
     connected?: boolean;
+    step?: Step;
 } & BoxProps>;

package/components/Token/Token.js

@@ -10,22 +10,26 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
 import { formatTokenAmount } from '../../utils';
+import { SmallAvatar } from '../SmallAvatar';
 import { TextFitter } from '../TextFitter';
 import { TokenAvatar } from '../TokenAvatar';
 import { TextSecondary } from './Token.style';
 export const Token = (_a) => {
     var _b;
-    var { token, connected } = _a, other = __rest(_a, ["token", "connected"]);
+    var { token, connected, step } = _a, other = __rest(_a, ["token", "connected", "step"]);
     const { t } = useTranslation();
     const { getChainById } = useChains();
-    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1 }, { children: [_jsx(TokenAvatar, { token: token, sx: { marginRight: 2 } }), _jsx(TextFitter, Object.assign({ height: 32, textStyle: {
+    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [_jsx(TokenAvatar, { token: token, sx: { marginRight: 2 } }), _jsx(TextFitter, Object.assign({ height: 30, textStyle: {
                             fontWeight: 700,
-                        } }, { children: formatTokenAmount(token.amount, token.decimals) }))] })), _jsx(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,
-                }) }))] })));
+                        } }, { children: formatTokenAmount(token.amount, token.decimals) }))] })), _jsxs(Box, Object.assign({ display: "flex" }, { children: [_jsx(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 ? (_jsxs(Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [_jsx(Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary", px: 1 }, { children: "\u2022" })), _jsx(Box, Object.assign({ pr: 0.75 }, { children: _jsx(SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
+                                        border: 0,
+                                        marginBottom: -0.25,
+                                    } }, { children: step.toolDetails.name[0] })) })), _jsx(Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary" }, { children: step.toolDetails.name }))] }))) : null] }))] })));
 };

package/components/Token/Token.style.js

@@ -18,6 +18,8 @@ export const TextSecondary = styled(Typography, {
     padding: connected
         ? theme.spacing(0, 0, 0, 3.875)
         : theme.spacing(0, 0, 0, 0),
+    display: 'flex',
+    alignItems: 'flex-start',
 }));
 export const TokenDivider = styled(Box)(({ theme }) => ({
     height: 12,

package/components/TokenList/TokenList.js

@@ -23,7 +23,10 @@ export const TokenList = ({ formType, height, onClick, }) => {
             token.symbol.toUpperCase().includes(searchFilter) ||
             token.address.toUpperCase().includes(searchFilter))
         : filteredTokens;
-    const tokenSearchEnabled = !filteredTokens.length && !isTokensLoading;
+    const tokenSearchEnabled = !isTokensLoading &&
+        !!filteredTokens.length &&
+        !!tokenSearchFilter &&
+        !!selectedChainId;
     const { token: searchedToken, isLoading: isSearchedTokenLoading } = useTokenSearch(tokenSearchFilter, selectedChainId, tokenSearchEnabled);
     const isLoading = isTokensLoading || (tokenSearchEnabled && isSearchedTokenLoading);
     const tokens = filteredTokens.length

package/config/theme.js

@@ -25,6 +25,17 @@ const palette = {
         main: '#297EFF',
     },
 };
+const paletteLight = {
+    text: {
+        primary: '#000000',
+        secondary: '#747474',
+    },
+};
+const paletteDark = {
+    background: {
+        paper: '#212121',
+    },
+};
 const shape = {
     borderRadius: 12,
     borderRadiusSecondary: 6,
@@ -44,27 +55,7 @@ export const createTheme = (mode, theme = {}) => {
                 main: (_m = (_l = (_k = theme.palette) === null || _k === void 0 ? void 0 : _k.secondary) === null || _l === void 0 ? void 0 : _l.main) !== null && _m !== void 0 ? _m : palette.secondary.main,
                 light: lighten((_q = (_p = (_o = theme.palette) === null || _o === void 0 ? void 0 : _o.secondary) === null || _p === void 0 ? void 0 : _p.main) !== null && _q !== void 0 ? _q : palette.secondary.main, 0.5),
                 dark: darken((_t = (_s = (_r = theme.palette) === null || _r === void 0 ? void 0 : _r.secondary) === null || _s === void 0 ? void 0 : _s.main) !== null && _t !== void 0 ? _t : palette.secondary.main, 0.2),
-            } }), (mode === 'light'
-            ? {
-                text: {
-                    primary: '#000',
-                    secondary: '#52575b',
-                },
-                grey: {
-                    100: '#F4F5F6',
-                    200: '#EFF1F2',
-                    300: '#E3E7E9',
-                    400: '#C6C9CD',
-                    500: '#AEB3B7',
-                    600: '#798086',
-                    700: '#57595C',
-                },
-            }
-            : {
-                background: {
-                    paper: '#212121',
-                },
-            })),
+            } }), (mode === 'light' ? paletteLight : paletteDark)),
         shape: Object.assign(Object.assign({}, shape), theme.shape),
         breakpoints: {
             values: {
@@ -96,6 +87,11 @@ export const createTheme = (mode, theme = {}) => {
                             cursor: 'not-allowed',
                             pointerEvents: 'auto',
                         },
+                    }, text: {
+                        backgroundColor: alpha(primaryMainColor, 0.08),
+                        '&:hover': {
+                            backgroundColor: alpha(primaryMainColor, 0.12),
+                        },
                     }, contained: {
                         '&:hover': {
                             color: getContrastRatio(common.white, primaryMainColor) >= 3
@@ -118,10 +114,10 @@ export const createTheme = (mode, theme = {}) => {
                             },
                         },
                         text: {
-                            color: primaryLightColor,
+                            backgroundColor: paletteDark.background.paper,
+                            color: common.white,
                             '&:hover': {
-                                backgroundColor: alpha(primaryLightColor, 0.08),
-                                borderColor: primaryLightColor,
+                                backgroundColor: lighten(paletteDark.background.paper, 0.02),
                             },
                         },
                     }

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useChains.js

@@ -11,7 +11,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { isItemAllowed, SwapFormKey, useLiFi, useWidgetConfig, } from '../providers';
-import { useChainOrderStore } from '../stores/chains';
+import { useChainOrderStore } from '../stores';
 export const useChains = () => {
     const { disabledChains, chains } = useWidgetConfig();
     const lifi = useLiFi();

package/hooks/useGasSufficiency.js

@@ -9,27 +9,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import Big from 'big.js';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useWatch } from 'react-hook-form';
-import { useChains, useDebouncedWatch } from '.';
-import { SwapFormKey, SwapFormKeyHelper, useLiFi, useWallet, } from '../providers';
+import { useChains } from '.';
+import { useLiFi, useWallet } from '../providers';
 import { useTokenBalances } from './useTokenBalances';
 export const useGasSufficiency = (route) => {
     const lifi = useLiFi();
     const { account } = useWallet();
-    const [fromChainId, toChainId, fromToken] = useWatch({
-        name: [
-            SwapFormKeyHelper.getChainKey('from'),
-            SwapFormKeyHelper.getChainKey('to'),
-            SwapFormKey.FromToken,
-        ],
-    });
-    const fromAmount = useDebouncedWatch(SwapFormKey.FromAmount, 250);
     const { getChainById } = useChains();
-    const { tokensWithBalance: fromChainTokenBalances } = useTokenBalances(fromChainId);
+    const { tokensWithBalance: fromChainTokenBalances } = useTokenBalances(route === null || route === void 0 ? void 0 : route.fromChainId);
     const [insufficientGas, setInsufficientGas] = useState();
     const checkInsufficientGas = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        if (!account.isActive || !route || !fromAmount) {
+        var _a, _b;
+        if (!account.isActive || !route) {
             setInsufficientGas(undefined);
             return;
         }
@@ -53,16 +44,15 @@ export const useGasSufficiency = (route) => {
             }
             return groupedGasCosts;
         }, {});
-        if (gasCosts[fromChainId] &&
-            route.fromToken.address === gasCosts[fromChainId].token.address) {
-            gasCosts[fromChainId].tokenAmount = (_a = gasCosts[fromChainId]) === null || _a === void 0 ? void 0 : _a.gasAmount.plus(Big(fromAmount));
+        if (route.fromToken.address === ((_a = gasCosts[route.fromChainId]) === null || _a === void 0 ? void 0 : _a.token.address)) {
+            gasCosts[route.fromChainId].tokenAmount = (_b = gasCosts[route.fromChainId]) === null || _b === void 0 ? void 0 : _b.gasAmount.plus(Big(route.fromAmount).div(Math.pow(10, route.fromToken.decimals)));
         }
         const tokenBalances = yield lifi.getTokenBalances(account.address, Object.values(gasCosts).map((item) => item.token));
         if (!(tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.length)) {
             setInsufficientGas(undefined);
             return;
         }
-        [fromChainId, toChainId].forEach((chainId) => {
+        [route.fromChainId, route.toChainId].forEach((chainId) => {
             var _a, _b, _c, _d, _e, _f;
             if (gasCosts[chainId]) {
                 const gasTokenBalance = Big((_b = (_a = tokenBalances === null || tokenBalances === void 0 ? void 0 : tokenBalances.find((t) => t.chainId === gasCosts[chainId].token.chainId &&
@@ -78,27 +68,17 @@ export const useGasSufficiency = (route) => {
         });
         const gasCostResult = Object.values(gasCosts).filter((gasCost) => gasCost.insufficient);
         setInsufficientGas(gasCostResult);
-    }), [
-        account.address,
-        account.isActive,
-        fromAmount,
-        fromChainId,
-        getChainById,
-        lifi,
-        route,
-        toChainId,
-    ]);
+    }), [account.address, account.isActive, getChainById, lifi, route]);
     const insufficientFunds = useMemo(() => {
         var _a, _b;
-        if (!account.isActive ||
-            !fromToken ||
-            !fromAmount ||
-            !fromChainTokenBalances) {
+        if (!account.isActive || !fromChainTokenBalances || !route) {
             return false;
         }
-        const balance = Big((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === fromToken)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
-        return Big(fromAmount).gt(balance);
-    }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
+        const balance = Big((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === (route === null || route === void 0 ? void 0 : route.fromToken.address))) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
+        return Big(route.fromAmount)
+            .div(Math.pow(10, route.fromToken.decimals))
+            .gt(balance);
+    }, [account.isActive, fromChainTokenBalances, route]);
     useEffect(() => {
         checkInsufficientGas();
     }, [checkInsufficientGas]);