@lifi/widget 1.32.7 → 2.0.0-alpha.0

package/components/SwapRouteCard/SwapRouteCard.js

@@ -1,26 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import EvStationOutlinedIcon from '@mui/icons-material/EvStationOutlined';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
-import { Box, Collapse, Tooltip, Typography } from '@mui/material';
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
+import { Box, Collapse } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../../providers';
-import { Card } from '../Card';
+import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
 import { StepActions } from '../StepActions';
 import { Token } from '../Token';
-import { IconButton, Label } from './SwapRouteCard.style';
-import { getGasCostsBreakdown } from './utils';
+import { SwapRouteCardEssentials } from './SwapRouteCardEssentials';
 export const SwapRouteCard = ({ route, active, variant = 'default', expanded, ...other }) => {
     const { t } = useTranslation();
-    const { variant: widgetVariant, useRecommendedRoute } = useWidgetConfig();
-    const [cardExpanded, setCardExpanded] = useState(variant === 'default' || expanded);
-    const alternativeTag = t(`swap.tags.ALTERNATIVE`);
-    const label = route.tags?.length
-        ? t(`swap.tags.${route.tags[0]}`)
-        : alternativeTag;
+    const { variant: widgetVariant } = useWidgetConfig();
+    const [cardExpanded, setCardExpanded] = useState(expanded);
+    const insurable = route.insurance?.state === 'INSURABLE';
     const handleExpand = (e) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
@@ -28,17 +22,8 @@ export const SwapRouteCard = ({ route, active, variant = 'default', expanded, ..
     const token = widgetVariant === 'nft'
         ? { ...route.fromToken, amount: route.fromAmount }
         : { ...route.toToken, amount: route.toAmount };
-    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? (_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Label, { active: active ?? label !== alternativeTag, children: label }), variant === 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] })) : null, _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsx(Token, { token: token, step: variant === 'stretched' ? route.steps[0] : undefined, disableDescription: variant === 'dense' && widgetVariant !== 'refuel' }), variant === 'stretched' && !expanded ? (_jsx(IconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) }), variant !== 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] }));
-    return widgetVariant === 'refuel' ? (cardContent) : (_jsx(Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
-};
-export const SwapRouteCardEssentials = ({ route, dense }) => {
-    const { t } = useTranslation();
-    const executionTimeMinutes = Math.ceil(route.steps
-        .map((step) => step.estimate.executionDuration)
-        .reduce((duration, x) => duration + x, 0) / 60);
-    const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
-    const gasCosts = getGasCostsBreakdown(route);
-    return (_jsxs(Box, { display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => (_jsxs(Typography, { fontSize: 11, children: [gas.amount?.toFixed(6), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${gas.token.symbol}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(EvStationOutlinedIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _jsx(Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
-                                value: executionTimeMinutes,
-                            }) })] }) }), !dense ? (_jsx(Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(LayersOutlinedIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })) : null] }));
+    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? (_jsxs(Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? (_jsxs(CardLabel, { type: route.tags?.length && !cardExpanded
+                            ? 'insurance-icon'
+                            : 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? (_jsx(CardLabelTypography, { type: "icon", children: t(`swap.tags.insurable`) })) : null] })) : null, route.tags?.length ? (_jsx(CardLabel, { type: active ? 'active' : undefined, children: _jsx(CardLabelTypography, { children: t(`swap.tags.${route.tags[0].toLowerCase()}`) }) })) : null] })) : null, _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [_jsx(Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) }), _jsx(SwapRouteCardEssentials, { route: route })] }));
+    return widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : (_jsx(Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
 };

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

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

package/components/SwapRouteCard/SwapRouteCard.style.js

@@ -1,40 +1,9 @@
-import { IconButton as MuiIconButton, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
-import { getContrastTextColor } from '../../utils';
-export const Label = styled(Typography, {
-    shouldForwardProp: (prop) => prop !== 'active',
-})(({ theme, active }) => ({
-    backgroundColor: active ? theme.palette.secondary.main : 'transparent',
-    border: '1px solid',
-    borderColor: active
-        ? theme.palette.secondary.main
-        : theme.palette.mode === 'light'
-            ? theme.palette.grey[300]
-            : theme.palette.grey[800],
-    borderRadius: theme.shape.borderRadiusSecondary,
-    color: active
-        ? getContrastTextColor(theme, theme.palette.secondary.main)
-        : theme.palette.text.secondary,
-    padding: theme.spacing(0.75),
-    fontSize: 12,
-    lineHeight: 1,
-    fontWeight: '600',
-    height: 24,
-    letterSpacing: '0.05rem',
-    textTransform: 'uppercase',
-    display: 'inline-flex',
-    userSelect: 'none',
+export const IconTypography = styled(Typography)(({ theme }) => ({
+    color: theme.palette.mode === 'light'
+        ? alpha(theme.palette.common.black, 0.24)
+        : alpha(theme.palette.common.white, 0.32),
+    lineHeight: 0,
+    marginRight: theme.spacing(0.5),
 }));
-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/SwapRouteCardEssentials.d.ts

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

package/components/SwapRouteCard/SwapRouteCardEssentials.js

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

package/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -3,9 +3,9 @@ import { Box, Skeleton } from '@mui/material';
 import { useWidgetConfig } from '../../providers';
 import { Card } from '../Card';
 export const SwapRouteCardSkeleton = ({ variant, ...other }) => {
-    const { variant: widgetVariant, useRecommendedRoute } = useWidgetConfig();
-    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? (_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Skeleton, { variant: "rectangular", width: 118, height: 24, sx: (theme) => ({
-                            borderRadius: `${theme.shape.borderRadiusSecondary}px`,
-                        }) }), variant === 'stretched' ? (_jsxs(Box, { 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] })) : null, _jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Box, { mr: 2, children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) }), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] }), _jsxs(Box, { ml: 6, display: "flex", alignItems: "center", children: [_jsx(Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? (_jsx(Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] })] }), variant !== 'stretched' ? (_jsxs(Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [_jsx(Skeleton, { variant: "text", width: 48, height: 24 }), _jsx(Skeleton, { variant: "text", width: 48, height: 24 })] })) : null] }));
-    return widgetVariant === 'refuel' ? (cardContent) : (_jsx(Card, { indented: true, ...other, children: cardContent }));
+    const { variant: widgetVariant } = useWidgetConfig();
+    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' ? (_jsx(Box, { display: "flex", alignItems: "center", mb: 2, children: _jsx(Skeleton, { variant: "rectangular", width: 112, height: 24, sx: (theme) => ({
+                        borderRadius: `${theme.shape.borderRadius}px`,
+                    }) }) })) : null, _jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Box, { mr: 2, children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) }), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] }), _jsxs(Box, { ml: 6, display: "flex", alignItems: "center", children: [_jsx(Skeleton, { variant: "text", width: 102, height: 16 }), _jsx(Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })] })] }), _jsxs(Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [_jsx(Skeleton, { variant: "text", width: 64, height: 20 }), _jsx(Skeleton, { variant: "text", width: 64, height: 20 }), _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), _jsx(Skeleton, { variant: "text", width: 32, height: 20 })] })] }));
+    return widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : (_jsx(Card, { indented: true, ...other, children: cardContent }));
 };

package/components/SwapRouteCard/types.d.ts

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

package/components/SwapRouteCard/utils.d.ts

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

package/components/SwapRouteCard/utils.js

@@ -1,7 +1,7 @@
 import Big from 'big.js';
 export const getGasCostsBreakdown = (route) => {
     return Object.values(route.steps.reduce((groupedGasCosts, step) => {
-        if (step.estimate.gasCosts) {
+        if (step.estimate.gasCosts?.length) {
             const { token } = step.estimate.gasCosts[0];
             const gasCostAmount = step.estimate.gasCosts
                 .reduce((amount, gasCost) => amount.plus(Big(gasCost.amount || 0)), Big(0))
@@ -24,3 +24,32 @@ export const getGasCostsBreakdown = (route) => {
         return groupedGasCosts;
     }, {}));
 };
+export const getFeeCostsBreakdown = (route, included) => {
+    return Object.values(route.steps.reduce((groupedFeeCosts, step) => {
+        let feeCosts = step.estimate.feeCosts;
+        if (typeof included === 'boolean') {
+            feeCosts = feeCosts?.filter((feeCost) => feeCost.included === included);
+        }
+        if (feeCosts?.length) {
+            const { token } = feeCosts[0];
+            const feeCostAmount = feeCosts
+                .reduce((amount, feeCost) => amount.plus(Big(feeCost.amount || 0)), Big(0))
+                .div(10 ** token.decimals);
+            const feeCostAmountUSD = feeCosts.reduce((amount, feeCost) => amount + parseFloat(feeCost.amountUSD || '0'), 0);
+            const groupedFeeCost = groupedFeeCosts[token.chainId];
+            const amount = groupedFeeCost
+                ? groupedFeeCost.amount.plus(feeCostAmount)
+                : feeCostAmount;
+            const amountUSD = groupedFeeCost
+                ? groupedFeeCost.amountUSD + feeCostAmountUSD
+                : feeCostAmountUSD;
+            groupedFeeCosts[token.chainId] = {
+                amount,
+                amountUSD,
+                token,
+            };
+            return groupedFeeCosts;
+        }
+        return groupedFeeCosts;
+    }, {}));
+};

package/components/SwapRoutes/SwapRoutes.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import { Box, IconButton } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Collapse } from '@mui/material';
 import { useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -10,16 +9,13 @@ import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '..
 import { useSwapRoutes } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
-import { Stack } from './SwapRoutes.style';
-import { useSetRecommendedRoute } from './useSetRecommendedRoute';
 export const SwapRoutes = (props) => {
     const { t } = useTranslation();
-    const { variant, useRecommendedRoute } = useWidgetConfig();
     const navigate = useNavigate();
+    const { variant, useRecommendedRoute } = useWidgetConfig();
     const { isValid, isValidating } = useFormState();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const currentRoute = routes?.[0];
-    useSetRecommendedRoute(currentRoute, isFetching);
     if (!currentRoute && !isLoading && !isFetching && !isFetched) {
         return null;
     }
@@ -28,15 +24,10 @@ export const SwapRoutes = (props) => {
     };
     const routeNotFound = !currentRoute && !isLoading && !isFetching;
     const onlyRecommendedRoute = variant === 'refuel' || useRecommendedRoute;
+    const showAll = !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1;
     return (_jsxs(Card, { ...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, { sx: { display: 'flex' }, children: [_jsx(Stack, { direction: "row", spacing: 2, my: 2, ml: 2, mr: onlyRecommendedRoute || routeNotFound ? 2 : 1, sx: {
-                            borderRightWidth: !onlyRecommendedRoute &&
-                                !routeNotFound &&
-                                (isFetching || (routes && routes.length > 1))
-                                ? 1
-                                : 0,
-                        }, children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: !onlyRecommendedRoute ? '80%' : '100%', variant: "dense" }), !onlyRecommendedRoute ? (_jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })) : null] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, {})) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: !onlyRecommendedRoute && routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), !onlyRecommendedRoute && routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) }), _jsx(Box, { sx: { display: 'flex', alignItems: 'center' }, children: !onlyRecommendedRoute && !routeNotFound ? (_jsx(Box, { py: 1, pr: 1, children: _jsx(IconButton, { onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid, children: _jsx(KeyboardArrowRightIcon, {}) }) })) : null })] })] }));
+                } }), _jsxs(Box, { p: 2, children: [isLoading ? (_jsx(SwapRouteCardSkeleton, { variant: "cardless" })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, {})) : (_jsx(SwapRouteCard, { route: currentRoute, variant: "cardless", active: true })), _jsx(Collapse, { timeout: 225, in: showAll, unmountOnExit: true, mountOnEnter: true, appear: true, children: _jsx(Box, { mt: 2, children: _jsx(Button, { onClick: handleCardClick, disabled: isValidating || !isValid, fullWidth: true, children: t('button.showAll') }) }) })] })] }));
 };

package/components/SwapRoutes/SwapRoutesExpanded.js

@@ -9,8 +9,7 @@ import { useSetExecutableRoute } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../SwapRouteCard';
-import { CollapseContainer, Container, Header, ScrollableContainer, } from './SwapRoutes.style';
-import { useSetRecommendedRoute } from './useSetRecommendedRoute';
+import { CollapseContainer, Container, Header, ScrollableContainer, } from './SwapRoutesExpanded.style';
 const timeout = { enter: 225, exit: 225, appear: 0 };
 export const SwapRoutesExpanded = () => {
     const element = useRoutes([
@@ -29,7 +28,6 @@ export const SwapRoutesExpandedElement = () => {
     const { isValid, isValidating } = useFormState();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const currentRoute = routes?.[0];
-    useSetRecommendedRoute(currentRoute, isFetching);
     const handleRouteClick = (route) => {
         if (isValid && !isValidating) {
             setExecutableRoute(route);
@@ -40,5 +38,5 @@ export const SwapRoutesExpandedElement = () => {
     };
     const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched);
     const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-    return (_jsx(Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: _jsx(Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: _jsx(Container, { sx: containerStyle, enableColorScheme: true, children: _jsxs(ScrollableContainer, { children: [_jsxs(Header, { children: [_jsx(Typography, { 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, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, { variant: "stretched" }, index)))) : (routes?.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "stretched", expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
+    return (_jsx(Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: _jsx(Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: _jsx(Container, { sx: containerStyle, enableColorScheme: true, children: _jsxs(ScrollableContainer, { children: [_jsxs(Header, { children: [_jsx(Typography, { 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, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
 };

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

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

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

@@ -1,4 +1,4 @@
-import { Box, ScopedCssBaseline, Stack as MuiStack } from '@mui/material';
+import { Box, ScopedCssBaseline } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
 import { maxHeight } from '../AppContainer';
 export const CollapseContainer = styled(Box)(({ theme }) => ({
@@ -32,14 +32,3 @@ export const Header = styled(Box)(({ theme }) => ({
     top: 0,
     zIndex: 1200,
 }));
-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)',
-}));

package/components/Switch.js

@@ -1,5 +1,5 @@
 import { Switch as MuiSwitch } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import { switchClasses } from '@mui/material/Switch';
 export const Switch = styled(MuiSwitch)(({ theme }) => ({
     width: 42,
@@ -28,8 +28,8 @@ export const Switch = styled(MuiSwitch)(({ theme }) => ({
         },
         [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
             color: theme.palette.mode === 'light'
-                ? theme.palette.grey[100]
-                : theme.palette.grey[600],
+                ? alpha(theme.palette.common.black, 0.12)
+                : alpha(theme.palette.common.white, 0.12),
         },
         [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
             opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
@@ -43,8 +43,8 @@ export const Switch = styled(MuiSwitch)(({ theme }) => ({
     [`.${switchClasses.track}`]: {
         borderRadius: 24 / 2,
         backgroundColor: theme.palette.mode === 'light'
-            ? theme.palette.grey[300]
-            : theme.palette.grey[800],
+            ? alpha(theme.palette.common.black, 0.16)
+            : alpha(theme.palette.common.white, 0.16),
         opacity: 1,
         transition: theme.transitions.create(['background-color'], {
             duration: theme.transitions.duration.standard,

package/components/TextFitter/TextFitter.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from '@mui/material/styles';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
 const initialState = {
     x: 0,
     y: 0,
@@ -11,7 +12,13 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
     const theme = useTheme();
     const textRef = useRef(null);
     const [viewBox, setViewBox] = useState(initialState);
-    // const [textRect, setTextRect] = useState<Partial<DOMRect>>(initialState);
+    const [ref] = useInView({
+        onChange(inView) {
+            if (inView) {
+                calculateBox();
+            }
+        },
+    });
     const calculateBox = useCallback(() => {
         if (!textRef.current) {
             return;
@@ -25,7 +32,6 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
             box.height -= box.height * cropBottom;
         }
         setViewBox(box);
-        // setTextRect(textRef.current.getBoundingClientRect());
         onFit?.();
     }, [cropBottom, cropTop, onFit]);
     useLayoutEffect(() => {
@@ -44,5 +50,5 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
         //     ? maxHeight
         //     : height
         // }
-        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary, children: _jsx("text", { x: 0, y: 0, style: textStyle, ref: textRef, children: children }) }));
+        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary, ref: ref, children: _jsx("text", { x: 0, y: 0, style: textStyle, ref: textRef, children: children }) }));
 };

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

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

package/config/theme.js

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

package/config/version.d.ts

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

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.32.7';
+export const version = '2.0.0-alpha.0';

package/hooks/index.d.ts

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

package/hooks/index.js

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

package/hooks/useChains.js

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

package/hooks/useFeaturedTokens.d.ts

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

package/hooks/useFeaturedTokens.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useWidgetConfig } from '../providers';
 export const useFeaturedTokens = (selectedChainId) => {
-    const { featuredTokens, tokens } = useWidgetConfig();
-    return useMemo(() => [...(tokens?.featured ?? []), ...(featuredTokens ?? [])].filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId, tokens?.featured]);
+    const { tokens } = useWidgetConfig();
+    return useMemo(() => tokens?.featured?.filter((token) => token.chainId === selectedChainId), [selectedChainId, tokens?.featured]);
 };

package/hooks/useFundsSufficiency.d.ts

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