@lifi/widget 1.32.7 → 2.0.0-alpha.0

package/cjs/components/SwapRoutes/SwapRoutes.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapRoutes = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const KeyboardArrowRight_1 = require("@mui/icons-material/KeyboardArrowRight");
 const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
@@ -13,16 +12,13 @@ const SwapRouteCard_1 = require("../../components/SwapRouteCard");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
-const SwapRoutes_style_1 = require("./SwapRoutes.style");
-const useSetRecommendedRoute_1 = require("./useSetRecommendedRoute");
 const SwapRoutes = (props) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
     const navigate = (0, react_router_dom_1.useNavigate)();
+    const { variant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const currentRoute = routes?.[0];
-    (0, useSetRecommendedRoute_1.useSetRecommendedRoute)(currentRoute, isFetching);
     if (!currentRoute && !isLoading && !isFetching && !isFetched) {
         return null;
     }
@@ -31,16 +27,11 @@ const SwapRoutes = (props) => {
     };
     const routeNotFound = !currentRoute && !isLoading && !isFetching;
     const onlyRecommendedRoute = variant === 'refuel' || useRecommendedRoute;
+    const showAll = !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1;
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
                     position: 'absolute',
                     top: 8,
                     right: 8,
-                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(SwapRoutes_style_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: !onlyRecommendedRoute ? '80%' : '100%', variant: "dense" }), !onlyRecommendedRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })) : null] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: !onlyRecommendedRoute && routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), !onlyRecommendedRoute && routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: !onlyRecommendedRoute && !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, { py: 1, pr: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid, children: (0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {}) }) })) : null })] })] }));
+                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { p: 2, children: [isLoading ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { variant: "cardless" })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: currentRoute, variant: "cardless", active: true })), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: showAll, unmountOnExit: true, mountOnEnter: true, appear: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleCardClick, disabled: isValidating || !isValid, fullWidth: true, children: t('button.showAll') }) }) })] })] }));
 };
 exports.SwapRoutes = SwapRoutes;

package/cjs/components/SwapRoutes/SwapRoutesExpanded.js

@@ -12,8 +12,7 @@ const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const ProgressToNextUpdate_1 = require("../ProgressToNextUpdate");
 const SwapRouteCard_1 = require("../SwapRouteCard");
-const SwapRoutes_style_1 = require("./SwapRoutes.style");
-const useSetRecommendedRoute_1 = require("./useSetRecommendedRoute");
+const SwapRoutesExpanded_style_1 = require("./SwapRoutesExpanded.style");
 const timeout = { enter: 225, exit: 225, appear: 0 };
 const SwapRoutesExpanded = () => {
     const element = (0, react_router_dom_1.useRoutes)([
@@ -22,7 +21,7 @@ const SwapRoutesExpanded = () => {
             element: null,
         },
     ]);
-    return ((0, jsx_runtime_1.jsx)(SwapRoutes_style_1.CollapseContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout, in: !!element, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout, in: !!element, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(exports.SwapRoutesExpandedElement, {}) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(SwapRoutesExpanded_style_1.CollapseContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout, in: !!element, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout, in: !!element, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(exports.SwapRoutesExpandedElement, {}) }) }) }) }));
 };
 exports.SwapRoutesExpanded = SwapRoutesExpanded;
 const SwapRoutesExpandedElement = () => {
@@ -33,7 +32,6 @@ const SwapRoutesExpandedElement = () => {
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const currentRoute = routes?.[0];
-    (0, useSetRecommendedRoute_1.useSetRecommendedRoute)(currentRoute, isFetching);
     const handleRouteClick = (route) => {
         if (isValid && !isValidating) {
             setExecutableRoute(route);
@@ -44,6 +42,6 @@ const SwapRoutesExpandedElement = () => {
     };
     const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched);
     const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Container, { sx: containerStyle, enableColorScheme: true, children: (0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: "700", flex: 1, noWrap: true, children: t('swap.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { variant: "stretched" }, index)))) : (routes?.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "stretched", expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(SwapRoutesExpanded_style_1.Container, { sx: containerStyle, enableColorScheme: true, children: (0, jsx_runtime_1.jsxs)(SwapRoutesExpanded_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(SwapRoutesExpanded_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: "700", flex: 1, noWrap: true, children: t('swap.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
 };
 exports.SwapRoutesExpandedElement = SwapRoutesExpandedElement;

package/cjs/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/cjs/components/SwapRoutes/{SwapRoutes.style.js → SwapRoutesExpanded.style.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Stack = exports.Header = exports.Container = exports.ScrollableContainer = exports.CollapseContainer = void 0;
+exports.Header = exports.Container = exports.ScrollableContainer = exports.CollapseContainer = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const AppContainer_1 = require("../AppContainer");
@@ -35,14 +35,3 @@ exports.Header = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     top: 0,
     zIndex: 1200,
 }));
-exports.Stack = (0, styles_1.styled)(material_1.Stack)(({ theme }) => ({
-    alignItems: 'stretch',
-    display: 'flex',
-    flex: 1,
-    flexWrap: 'nowrap',
-    overflow: 'hidden',
-    borderRight: `solid ${theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800]}`,
-    width: 'calc(100% - 48px)',
-}));

package/cjs/components/Switch.js

@@ -31,8 +31,8 @@ exports.Switch = (0, styles_1.styled)(material_1.Switch)(({ theme }) => ({
         },
         [`&.${Switch_1.switchClasses.disabled} .${Switch_1.switchClasses.thumb}`]: {
             color: theme.palette.mode === 'light'
-                ? theme.palette.grey[100]
-                : theme.palette.grey[600],
+                ? (0, styles_1.alpha)(theme.palette.common.black, 0.12)
+                : (0, styles_1.alpha)(theme.palette.common.white, 0.12),
         },
         [`&.${Switch_1.switchClasses.disabled} + .${Switch_1.switchClasses.track}`]: {
             opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
@@ -46,8 +46,8 @@ exports.Switch = (0, styles_1.styled)(material_1.Switch)(({ theme }) => ({
     [`.${Switch_1.switchClasses.track}`]: {
         borderRadius: 24 / 2,
         backgroundColor: theme.palette.mode === 'light'
-            ? theme.palette.grey[300]
-            : theme.palette.grey[800],
+            ? (0, styles_1.alpha)(theme.palette.common.black, 0.16)
+            : (0, styles_1.alpha)(theme.palette.common.white, 0.16),
         opacity: 1,
         transition: theme.transitions.create(['background-color'], {
             duration: theme.transitions.duration.standard,

package/cjs/components/TextFitter/TextFitter.js

@@ -4,6 +4,7 @@ exports.TextFitter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const react_1 = require("react");
+const react_intersection_observer_1 = require("react-intersection-observer");
 const initialState = {
     x: 0,
     y: 0,
@@ -14,7 +15,13 @@ const TextFitter = ({ children, width = '100%', height, maxHeight, preserveAspec
     const theme = (0, styles_1.useTheme)();
     const textRef = (0, react_1.useRef)(null);
     const [viewBox, setViewBox] = (0, react_1.useState)(initialState);
-    // const [textRect, setTextRect] = useState<Partial<DOMRect>>(initialState);
+    const [ref] = (0, react_intersection_observer_1.useInView)({
+        onChange(inView) {
+            if (inView) {
+                calculateBox();
+            }
+        },
+    });
     const calculateBox = (0, react_1.useCallback)(() => {
         if (!textRef.current) {
             return;
@@ -28,7 +35,6 @@ const TextFitter = ({ children, width = '100%', height, maxHeight, preserveAspec
             box.height -= box.height * cropBottom;
         }
         setViewBox(box);
-        // setTextRect(textRef.current.getBoundingClientRect());
         onFit?.();
     }, [cropBottom, cropTop, onFit]);
     (0, react_1.useLayoutEffect)(() => {
@@ -47,6 +53,6 @@ const TextFitter = ({ children, width = '100%', height, maxHeight, preserveAspec
         //     ? maxHeight
         //     : height
         // }
-        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary, children: (0, jsx_runtime_1.jsx)("text", { x: 0, y: 0, style: textStyle, ref: textRef, children: children }) }));
+        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary, ref: ref, children: (0, jsx_runtime_1.jsx)("text", { x: 0, y: 0, style: textStyle, ref: textRef, children: children }) }));
 };
 exports.TextFitter = TextFitter;

package/cjs/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/cjs/config/theme.js

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

package/cjs/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/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.32.7';
+exports.version = '2.0.0-alpha.0';

package/cjs/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/cjs/hooks/index.js

@@ -21,7 +21,11 @@ __exportStar(require("./useDebouncedWatch"), exports);
 __exportStar(require("./useDefaultElementId"), exports);
 __exportStar(require("./useExpandableVariant"), exports);
 __exportStar(require("./useFeaturedTokens"), exports);
+__exportStar(require("./useFundsSufficiency"), exports);
+__exportStar(require("./useGasRecommendation"), exports);
+__exportStar(require("./useGasRefuel"), exports);
 __exportStar(require("./useGasSufficiency"), exports);
+__exportStar(require("./useGetTokenBalancesWithRetry"), exports);
 __exportStar(require("./useInitializer"), exports);
 __exportStar(require("./useNavigateBack"), exports);
 __exportStar(require("./useProcessMessage"), exports);

package/cjs/hooks/useChains.js

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

package/cjs/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/cjs/hooks/useFeaturedTokens.js

@@ -4,7 +4,7 @@ exports.useFeaturedTokens = void 0;
 const react_1 = require("react");
 const providers_1 = require("../providers");
 const useFeaturedTokens = (selectedChainId) => {
-    const { featuredTokens, tokens } = (0, providers_1.useWidgetConfig)();
-    return (0, react_1.useMemo)(() => [...(tokens?.featured ?? []), ...(featuredTokens ?? [])].filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId, tokens?.featured]);
+    const { tokens } = (0, providers_1.useWidgetConfig)();
+    return (0, react_1.useMemo)(() => tokens?.featured?.filter((token) => token.chainId === selectedChainId), [selectedChainId, tokens?.featured]);
 };
 exports.useFeaturedTokens = useFeaturedTokens;

package/cjs/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;
+};

package/cjs/hooks/useFundsSufficiency.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFundsSufficiency = void 0;
+const react_query_1 = require("@tanstack/react-query");
+const big_js_1 = require("big.js");
+const react_hook_form_1 = require("react-hook-form");
+const providers_1 = require("../providers");
+const stores_1 = require("../stores");
+const useGetTokenBalancesWithRetry_1 = require("./useGetTokenBalancesWithRetry");
+const useTokenAddressBalance_1 = require("./useTokenAddressBalance");
+const refetchInterval = 30000;
+const useFundsSufficiency = (route) => {
+    const { account, provider } = (0, providers_1.useWallet)();
+    const getTokenBalancesWithRetry = (0, useGetTokenBalancesWithRetry_1.useGetTokenBalancesWithRetry)(provider);
+    const [fromChainId, fromTokenAddress, fromAmount] = (0, react_hook_form_1.useWatch)({
+        name: [
+            providers_1.SwapFormKey.FromChain,
+            providers_1.SwapFormKey.FromToken,
+            providers_1.SwapFormKey.FromAmount,
+        ],
+    });
+    let chainId = fromChainId;
+    let tokenAddress = fromTokenAddress;
+    if (route) {
+        chainId = route.fromToken.chainId;
+        tokenAddress = route.fromToken.address;
+    }
+    const { token, isLoading } = (0, useTokenAddressBalance_1.useTokenAddressBalance)(chainId, tokenAddress);
+    const { data: insufficientFunds, isInitialLoading } = (0, react_query_1.useQuery)([
+        'funds-sufficiency-check',
+        account.address,
+        chainId,
+        tokenAddress,
+        route?.id ?? fromAmount,
+    ], async () => {
+        if (!account.address || !token) {
+            return;
+        }
+        let currentTokenBalance = (0, big_js_1.default)(token?.amount || 0);
+        if (!route || (0, stores_1.isRouteDone)(route)) {
+            const insufficientFunds = currentTokenBalance.lt((0, big_js_1.default)(fromAmount || 0));
+            return insufficientFunds;
+        }
+        const currentAction = route.steps.filter((step) => !step.execution || step.execution.status !== 'DONE')[0]?.action;
+        if (token.chainId === currentAction.fromToken.chainId &&
+            token.address === currentAction.fromToken.address &&
+            currentTokenBalance.gt(0)) {
+            const insufficientFunds = (0, big_js_1.default)(route.fromAmount)
+                .div(10 ** route.fromToken.decimals)
+                .gt(currentTokenBalance);
+            return insufficientFunds;
+        }
+        const tokenBalances = await getTokenBalancesWithRetry(account.address, [
+            currentAction.fromToken,
+        ]);
+        currentTokenBalance = (0, big_js_1.default)(tokenBalances?.[0]?.amount || 0);
+        const insufficientFunds = (0, big_js_1.default)(currentAction.fromAmount)
+            .div(10 ** currentAction.fromToken.decimals)
+            .gt(currentTokenBalance);
+        return insufficientFunds;
+    }, {
+        enabled: Boolean(account.address && token && !isLoading),
+        refetchInterval,
+        staleTime: refetchInterval,
+        cacheTime: refetchInterval,
+        keepPreviousData: true,
+    });
+    return {
+        insufficientFunds,
+        isInitialLoading,
+    };
+};
+exports.useFundsSufficiency = useFundsSufficiency;

package/cjs/hooks/useGasRecommendation.d.ts

@@ -0,0 +1,2 @@
+import type { ChainId } from '@lifi/sdk';
+export declare const useGasRecommendation: (chainId: ChainId, fromChain?: ChainId, fromToken?: string) => import("@tanstack/react-query").UseQueryResult<import("@lifi/sdk").GasRecommendationResponse, unknown>;

package/cjs/hooks/useGasRecommendation.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGasRecommendation = void 0;
+const react_query_1 = require("@tanstack/react-query");
+const providers_1 = require("../providers");
+const refetchInterval = 60000;
+const useGasRecommendation = (chainId, fromChain, fromToken) => {
+    const lifi = (0, providers_1.useLiFi)();
+    return (0, react_query_1.useQuery)(['gas-recommendation', chainId, fromChain, fromToken], async ({ queryKey: [_, chainId, fromChain, fromToken] }) => {
+        const gasRecommendation = await lifi.getGasRecommendation({
+            chainId: chainId,
+            fromChain: fromChain,
+            fromToken: fromToken,
+        });
+        return gasRecommendation;
+    }, {
+        enabled: Boolean(chainId),
+        refetchInterval,
+        staleTime: refetchInterval,
+        cacheTime: refetchInterval,
+    });
+};
+exports.useGasRecommendation = useGasRecommendation;

package/cjs/hooks/useGasRefuel.d.ts

@@ -0,0 +1,7 @@
+export declare const useGasRefuel: () => {
+    enabled: boolean;
+    availble: boolean | undefined;
+    isLoading: boolean;
+    chain: import("@lifi/types").ExtendedChain | undefined;
+    gasRecommendation: import("@lifi/types").GasRecommendationResponse | undefined;
+};

package/cjs/hooks/useGasRefuel.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGasRefuel = void 0;
+const big_js_1 = require("big.js");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const _1 = require(".");
+const providers_1 = require("../providers");
+const useGasRecommendation_1 = require("./useGasRecommendation");
+const useTokenBalance_1 = require("./useTokenBalance");
+const useGasRefuel = () => {
+    const { getChainById } = (0, _1.useChains)();
+    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, toAddress] = (0, react_hook_form_1.useWatch)({
+        name: [
+            providers_1.SwapFormKey.FromChain,
+            providers_1.SwapFormKey.FromToken,
+            providers_1.SwapFormKey.ToChain,
+            providers_1.SwapFormKey.ToToken,
+            providers_1.SwapFormKey.ToAddress,
+        ],
+    });
+    const toChain = getChainById(toChainId);
+    const { token: nativeToken } = (0, useTokenBalance_1.useTokenBalance)(toChainId && toChain?.nativeToken, toAddress);
+    const { data: gasRecommendation, isLoading } = (0, useGasRecommendation_1.useGasRecommendation)(toChainId, fromChainId, fromTokenAddress);
+    const enabled = (0, react_1.useMemo)(() => {
+        if (
+        // We don't allow same chain refuel.
+        // If a user runs out of gas, he can't send a source chain transaction.
+        fromChainId === toChainId ||
+            // We don't want to apply auto refuel when swapping to native tokens
+            toChain?.nativeToken.address === toTokenAddress ||
+            !gasRecommendation?.available ||
+            !gasRecommendation.recommended ||
+            !nativeToken) {
+            return false;
+        }
+        const tokenBalance = (0, big_js_1.default)(nativeToken.amount ?? 0);
+        // check if the user balance < 50% of the recommended amount
+        const recommendedAmount = (0, big_js_1.default)(gasRecommendation.recommended.amount)
+            .div(10 ** gasRecommendation.recommended.token.decimals)
+            .div(2);
+        const insufficientGas = tokenBalance.lt(recommendedAmount);
+        return insufficientGas;
+    }, [
+        fromChainId,
+        gasRecommendation?.available,
+        gasRecommendation?.recommended,
+        nativeToken,
+        toChain?.nativeToken.address,
+        toChainId,
+        toTokenAddress,
+    ]);
+    return {
+        enabled: enabled,
+        availble: gasRecommendation?.available,
+        isLoading: isLoading,
+        chain: toChain,
+        gasRecommendation,
+    };
+};
+exports.useGasRefuel = useGasRefuel;

package/cjs/hooks/useGasSufficiency.d.ts

@@ -9,7 +9,6 @@ export interface GasSufficiency {
     chain?: EVMChain;
 }
 export declare const useGasSufficiency: (route?: Route) => {
-    insufficientGas: GasSufficiency[] | null | undefined;
-    insufficientFunds: boolean | null | undefined;
-    isLoading: boolean;
+    insufficientGas: GasSufficiency[] | undefined;
+    isInitialLoading: boolean;
 };

package/cjs/hooks/useGasSufficiency.js

@@ -5,16 +5,14 @@ const react_query_1 = require("@tanstack/react-query");
 const big_js_1 = require("big.js");
 const _1 = require(".");
 const providers_1 = require("../providers");
-const stores_1 = require("../stores");
-const useTokenBalance_1 = require("./useTokenBalance");
 const refetchInterval = 30000;
 const useGasSufficiency = (route) => {
-    const { account } = (0, providers_1.useWallet)();
+    const { account, provider } = (0, providers_1.useWallet)();
     const { getChainById } = (0, _1.useChains)();
-    const { token: fromToken, getTokenBalancesWithRetry } = (0, useTokenBalance_1.useTokenBalance)(route?.fromToken);
-    const { data: insufficientGas, isInitialLoading: insufficientGasLoading } = (0, react_query_1.useQuery)(['gas-sufficiency-check', account.address, route?.id], async () => {
+    const getTokenBalancesWithRetry = (0, _1.useGetTokenBalancesWithRetry)(provider);
+    const { data: insufficientGas, isInitialLoading } = (0, react_query_1.useQuery)(['gas-sufficiency-check', account.address, route?.id], async () => {
         if (!account.address || !route) {
-            return null;
+            return;
         }
         const gasCosts = route.steps
             .filter((step) => !step.execution || step.execution.status !== 'DONE')
@@ -42,7 +40,7 @@ const useGasSufficiency = (route) => {
         }
         const tokenBalances = await getTokenBalancesWithRetry(account.address, Object.values(gasCosts).map((item) => item.token));
         if (!tokenBalances?.length) {
-            return null;
+            return;
         }
         [route.fromChainId, route.toChainId].forEach((chainId) => {
             if (gasCosts[chainId]) {
@@ -71,38 +69,9 @@ const useGasSufficiency = (route) => {
         staleTime: refetchInterval,
         cacheTime: refetchInterval,
     });
-    const { data: insufficientFunds, isInitialLoading: insufficientFundsLoading, } = (0, react_query_1.useQuery)(['funds-sufficiency-check', account.address, route?.id], async () => {
-        if (!account.address || !fromToken || !route || (0, stores_1.isRouteDone)(route)) {
-            return null;
-        }
-        let currentTokenBalance = (0, big_js_1.default)(fromToken?.amount ?? 0);
-        const currentAction = route.steps.filter((step) => !step.execution || step.execution.status !== 'DONE')[0]?.action;
-        if (fromToken.chainId === currentAction.fromToken.chainId &&
-            fromToken.address === currentAction.fromToken.address &&
-            currentTokenBalance.gt(0)) {
-            const insufficientFunds = (0, big_js_1.default)(route.fromAmount)
-                .div(10 ** route.fromToken.decimals)
-                .gt(currentTokenBalance);
-            return insufficientFunds;
-        }
-        const tokenBalances = await getTokenBalancesWithRetry(account.address, [
-            currentAction.fromToken,
-        ]);
-        currentTokenBalance = (0, big_js_1.default)(tokenBalances?.[0]?.amount ?? 0);
-        const insufficientFunds = (0, big_js_1.default)(currentAction.fromAmount)
-            .div(10 ** currentAction.fromToken.decimals)
-            .gt(currentTokenBalance);
-        return insufficientFunds;
-    }, {
-        enabled: Boolean(account.address && route && fromToken),
-        refetchInterval,
-        staleTime: refetchInterval,
-        cacheTime: refetchInterval,
-    });
     return {
         insufficientGas,
-        insufficientFunds,
-        isLoading: insufficientGasLoading || insufficientFundsLoading,
+        isInitialLoading,
     };
 };
 exports.useGasSufficiency = useGasSufficiency;

package/cjs/hooks/useGetTokenBalancesWithRetry.d.ts

@@ -0,0 +1,3 @@
+import type { Provider } from '@ethersproject/providers';
+import type { Token, TokenAmount } from '@lifi/sdk';
+export declare const useGetTokenBalancesWithRetry: (provider?: Provider) => (accountAddress: string, tokens: Token[], depth?: number) => Promise<TokenAmount[] | undefined>;

package/cjs/hooks/useGetTokenBalancesWithRetry.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetTokenBalancesWithRetry = void 0;
+const address_1 = require("@ethersproject/address");
+const react_1 = require("react");
+const providers_1 = require("../providers");
+const useGetTokenBalancesWithRetry = (provider) => {
+    const lifi = (0, providers_1.useLiFi)();
+    const getTokenBalancesWithRetry = (0, react_1.useCallback)(async (accountAddress, tokens, depth = 0) => {
+        try {
+            const walletAddress = (0, address_1.isAddress)(accountAddress)
+                ? accountAddress
+                : await provider?.resolveName(accountAddress);
+            const tokenBalances = await lifi.getTokenBalances(walletAddress, tokens);
+            if (!tokenBalances.every((token) => token.blockNumber)) {
+                if (depth > 10) {
+                    console.warn('Token balance backoff depth exceeded.');
+                    return undefined;
+                }
+                await new Promise((resolve) => {
+                    setTimeout(resolve, 1.5 ** depth * 100);
+                });
+                return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
+            }
+            return tokenBalances;
+        }
+        catch (error) {
+            //
+        }
+    }, [lifi, provider]);
+    return getTokenBalancesWithRetry;
+};
+exports.useGetTokenBalancesWithRetry = useGetTokenBalancesWithRetry;

package/cjs/hooks/useSwapRoutes.d.ts

@@ -1,10 +1,15 @@
 import type { Route, RoutesResponse } from '@lifi/sdk';
-export declare const useSwapRoutes: () => {
+interface SwapRoutesProps {
+    onSettled?: (data?: RoutesResponse) => void;
+    insurableRoute?: Route;
+}
+export declare const useSwapRoutes: ({ onSettled, insurableRoute, }?: SwapRoutesProps) => {
     routes: Route[] | undefined;
     isLoading: boolean;
     isFetching: boolean;
     isFetched: boolean;
     dataUpdatedAt: number;
     refetchTime: number;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<RoutesResponse, any>>;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<RoutesResponse, unknown>>;
 };
+export {};