@lifi/widget 1.17.2 → 1.18.0

package/components/SendToWallet/SendToWallet.js

@@ -9,27 +9,24 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isAddress } from '@ethersproject/address';
-import { FormHelperText } from '@mui/material';
-import { useEffect } from 'react';
+import { Collapse, FormHelperText } from '@mui/material';
+import { forwardRef, useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapFormKey, useWallet } from '../../providers';
-import { useSettings } from '../../stores';
 import { Card, CardTitle } from '../Card';
 import { FormControl, Input } from './SendToWallet.style';
-export const SendToWallet = (props) => {
+import { useSendToWalletStore } from './store';
+export const SendToWallet = forwardRef((props, ref) => {
     var _a;
     const { t } = useTranslation();
-    const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+    const showSendToWallet = useSendToWalletStore((state) => state.showSendToWallet);
     const { account, provider } = useWallet();
     const { register, trigger, formState: { errors }, } = useFormContext();
     useEffect(() => {
         trigger(SwapFormKey.ToAddress);
     }, [account.chainId, trigger]);
-    if (!showDestinationWallet) {
-        return null;
-    }
-    const { onChange, onBlur, name, ref } = register(SwapFormKey.ToAddress, {
+    const { onChange, onBlur, name, ref: inputRef, } = register(SwapFormKey.ToAddress, {
         validate: (value) => __awaiter(void 0, void 0, void 0, function* () {
             try {
                 if (!value) {
@@ -45,5 +42,5 @@ export const SendToWallet = (props) => {
         }),
         onBlur: () => trigger(SwapFormKey.ToAddress),
     });
-    return (_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.sendToWallet') }), _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(Input, { ref: ref, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns') }), _jsx(FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message }))] }))] })));
-};
+    return (_jsx(Collapse, Object.assign({ timeout: 225, in: showSendToWallet }, { children: _jsxs(Card, Object.assign({}, props, { ref: ref }, { children: [_jsx(CardTitle, { children: t('swap.sendToWallet') }), _jsxs(FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [_jsx(Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns') }), _jsx(FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message }))] }))] })) })));
+});

package/components/SendToWallet/SendToWalletButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SendToWalletButton: React.FC;

package/components/SendToWallet/SendToWalletButton.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WalletOutlined as WalletOutlinedIcon } from '@mui/icons-material';
+import { Button, Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useWallet } from '../../providers';
+import { useSettings } from '../../stores';
+import { useSendToWalletStore } from './store';
+export const SendToWalletButton = () => {
+    const { t } = useTranslation();
+    const { account } = useWallet();
+    const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+    const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
+    if (!showDestinationWallet || !account.isActive) {
+        return null;
+    }
+    return (_jsx(Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 500, enterNextDelay: 500, arrow: true }, { children: _jsx(Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: toggleSendToWallet, sx: {
+                minWidth: 48,
+                marginLeft: 1,
+            } }, { children: _jsx(WalletOutlinedIcon, {}) })) })));
+};

package/components/SendToWallet/index.d.ts

@@ -1 +1,2 @@
 export * from './SendToWallet';
+export * from './SendToWalletButton';

package/components/SendToWallet/index.js

@@ -1 +1,2 @@
 export * from './SendToWallet';
+export * from './SendToWalletButton';

package/components/SendToWallet/store.d.ts

@@ -0,0 +1,4 @@
+import type { SendToWalletStore } from './types';
+export declare const useSendToWalletStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<SendToWalletStore>, "setState"> & {
+    setState(nextStateOrUpdater: SendToWalletStore | Partial<SendToWalletStore> | ((state: import("immer/dist/internal").WritableDraft<SendToWalletStore>) => void), shouldReplace?: boolean | undefined): void;
+}>;

package/components/SendToWallet/store.js

@@ -0,0 +1,10 @@
+import create from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+export const useSendToWalletStore = create()(immer((set) => ({
+    showSendToWallet: false,
+    toggleSendToWallet: () => {
+        set((state) => {
+            state.showSendToWallet = !state.showSendToWallet;
+        });
+    },
+})));

package/components/SendToWallet/types.d.ts

@@ -0,0 +1,6 @@
+export interface SendToWalletState {
+    showSendToWallet: boolean;
+}
+export interface SendToWalletStore extends SendToWalletState {
+    toggleSendToWallet(): void;
+}

package/components/Step/CircularProgress.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Status } from '@lifi/sdk';
 export declare function CircularProgress({ status }: {
     status: Status;

package/components/StepActions/StepActions.style.js

@@ -51,6 +51,6 @@ export const StepContent = styled(MuiStepContent, {
     },
 }));
 export const StepAvatar = styled(Avatar)(({ theme, variant }) => ({
-    color: variant === 'square' ? theme.palette.text.primary : theme.palette.grey[900],
+    color: theme.palette.text.primary,
     backgroundColor: 'transparent',
 }));

package/components/SwapButton/ButtonTooltip.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const ButtonTooltip: ({ title, children, }: {
     title?: string | undefined;
     children: JSX.Element;

package/components/SwapButton/SwapButton.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { SwapButtonProps } from './types';
-export declare const SwapButton: React.FC<SwapButtonProps>;
+export declare const SwapButton: import("react").ForwardRefExoticComponent<SwapButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/components/SwapButton/SwapButton.js

@@ -9,12 +9,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@mui/material';
+import { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useGasSufficiency } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
-export const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
+export const SwapButton = forwardRef(({ onClick, currentRoute, text, disable }, ref) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const config = useWidgetConfig();
@@ -42,5 +43,5 @@ export const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
         }
         return t(`button.connectWallet`);
     };
-    return (_jsx(Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, fullWidth: true }, { children: getButtonText() })));
-};
+    return (_jsx(Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, fullWidth: true, ref: ref }, { children: getButtonText() })));
+});

package/components/SwapInput/SwapInputAdornment.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
 export declare const SwapInputAdornment: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/components/SwapRouteCard/SwapRouteCard.d.ts

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

package/components/SwapRouteCard/SwapRouteCard.js

@@ -10,30 +10,33 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '@mui/material';
+import { AccessTime as AccessTimeIcon, EvStationOutlined as EvStationIcon, ExpandLess as ExpandLessIcon, ExpandMore as ExpandMoreIcon, LayersOutlined as LayersIcon, } from '@mui/icons-material';
+import { Box, Collapse, Typography } from '@mui/material';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '../Card';
 import { StepActions } from '../StepActions';
 import { Token } from '../Token';
-import { Label } from './SwapRouteCard.style';
+import { IconButton, Label } from './SwapRouteCard.style';
 export const SwapRouteCard = (_a) => {
-    var _b, _c;
-    var { route, active, dense } = _a, other = __rest(_a, ["route", "active", "dense"]);
+    var _b;
+    var { route, active, variant = 'default' } = _a, other = __rest(_a, ["route", "active", "variant"]);
     const { t } = useTranslation();
+    const [expanded, setExpanded] = useState(variant === 'default');
     const alternativeTag = t(`swap.tags.ALTERNATIVE`);
     const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
         ? t(`swap.tags.${route.tags[0]}`)
         : alternativeTag;
-    return (_jsxs(Card, Object.assign({ dense: dense, indented: true }, other, { children: [_jsx(Box, Object.assign({ sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                }, mb: 2 }, { children: _jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })) })), _jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
-                ? route.steps.map((step) => (_jsx(StepActions, { step: step, mb: 2 }, step.id)))
-                : null, _jsxs(Box, Object.assign({ sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "500", lineHeight: 1, pt: 0.25 }, { children: t(`swap.currency`, { value: (_c = route.gasCostUSD) !== null && _c !== void 0 ? _c : 0 }) })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.5 }, { children: t(`swap.gas`) }))] }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end", lineHeight: 1, pt: 0.25 }, { children: ["~", (route.steps
-                                        .map((step) => step.estimate.executionDuration)
-                                        .reduce((duration, x) => duration + x) / 60).toFixed(0)] })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end", lineHeight: 1, mt: 0.5 }, { children: t(`swap.minutes`) }))] })] }))] })));
+    const handleExpand = (e) => {
+        e.stopPropagation();
+        setExpanded((expanded) => !expanded);
+    };
+    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'extended' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'extended' ? route.steps[0] : undefined }), variant === 'extended' ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: expanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ mountOnEnter: true, unmountOnExit: true, in: expanded }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'extended' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
+};
+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] })));
 };

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>;