@lifi/widget 1.31.0 → 1.32.0

package/components/SwapRoutes/SwapRoutes.js

@@ -18,7 +18,7 @@ export const SwapRoutes = (props) => {
     const navigate = useNavigate();
     const { isValid, isValidating } = useFormState();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
-    const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
+    const currentRoute = routes?.[0];
     useSetRecommendedRoute(currentRoute, isFetching);
     if (!currentRoute && !isLoading && !isFetching && !isFetched) {
         return null;
@@ -28,15 +28,15 @@ export const SwapRoutes = (props) => {
     };
     const routeNotFound = !currentRoute && !isLoading && !isFetching;
     const onlyRecommendedRoute = variant === 'refuel' || useRecommendedRoute;
-    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: {
+    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, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(Stack, Object.assign({ direction: "row", spacing: 2, my: 2, ml: 2, mr: onlyRecommendedRoute || routeNotFound ? 2 : 1, sx: {
+                } }), _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, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !onlyRecommendedRoute && !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })));
+                        }, 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 })] })] }));
 };

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

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

package/components/SwapRoutes/SwapRoutesExpanded.d.ts

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

package/components/SwapRoutes/SwapRoutesExpanded.js

@@ -19,7 +19,7 @@ export const SwapRoutesExpanded = () => {
             element: null,
         },
     ]);
-    return (_jsx(CollapseContainer, { children: _jsx(Collapse, Object.assign({ timeout: timeout, in: !!element, orientation: "horizontal" }, { children: _jsx(Grow, Object.assign({ timeout: timeout, in: !!element, mountOnEnter: true, unmountOnExit: true }, { children: _jsx("div", { children: _jsx(SwapRoutesExpandedElement, {}) }) })) })) }));
+    return (_jsx(CollapseContainer, { children: _jsx(Collapse, { timeout: timeout, in: !!element, orientation: "horizontal", children: _jsx(Grow, { timeout: timeout, in: !!element, mountOnEnter: true, unmountOnExit: true, children: _jsx("div", { children: _jsx(SwapRoutesExpandedElement, {}) }) }) }) }));
 };
 export const SwapRoutesExpandedElement = () => {
     const { t } = useTranslation();
@@ -28,7 +28,7 @@ export const SwapRoutesExpandedElement = () => {
     const { containerStyle } = useWidgetConfig();
     const { isValid, isValidating } = useFormState();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
-    const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
+    const currentRoute = routes?.[0];
     useSetRecommendedRoute(currentRoute, isFetching);
     const handleRouteClick = (route) => {
         if (isValid && !isValidating) {
@@ -40,5 +40,5 @@ export const SwapRoutesExpandedElement = () => {
     };
     const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched);
     const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-    return (_jsx(Collapse, Object.assign({ timeout: timeout.enter, in: expanded, orientation: "horizontal" }, { children: _jsx(Grow, Object.assign({ timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true }, { children: _jsx(Container, Object.assign({ sx: containerStyle, enableColorScheme: true }, { 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 ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, { variant: "stretched" }, index)))) : (routes === null || routes === void 0 ? void 0 : routes.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "stretched", expanded: (routes === null || routes === void 0 ? void 0 : routes.length) <= 2 }, route.id)))) }))] }) })) })) })));
+    return (_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)))) })] }) }) }) }));
 };

package/components/TextFitter/TextFitter.js

@@ -26,7 +26,7 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
         }
         setViewBox(box);
         // setTextRect(textRef.current.getBoundingClientRect());
-        onFit === null || onFit === void 0 ? void 0 : onFit();
+        onFit?.();
     }, [cropBottom, cropTop, onFit]);
     useLayoutEffect(() => {
         calculateBox();
@@ -38,11 +38,11 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
             });
         }
     }, [calculateBox]);
-    return (_jsx("svg", Object.assign({ style: svgStyle, viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`, width: width, height: height, 
+    return (_jsx("svg", { style: svgStyle, viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`, width: width, height: height, 
         // height={
         //   textRect.height && maxHeight && textRect.height >= maxHeight
         //     ? maxHeight
         //     : height
         // }
-        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary }, { children: _jsx("text", Object.assign({ x: 0, y: 0, style: textStyle, ref: textRef }, { children: children })) })));
+        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary, children: _jsx("text", { x: 0, y: 0, style: textStyle, ref: textRef, children: children }) }));
 };

package/components/Token/Token.js

@@ -1,14 +1,3 @@
-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 { Box, Skeleton } from '@mui/material';
 import { useTranslation } from 'react-i18next';
@@ -18,35 +7,32 @@ import { SmallAvatar } from '../SmallAvatar';
 import { TextFitter } from '../TextFitter';
 import { TokenAvatar } from '../TokenAvatar';
 import { TextSecondary, TextSecondaryContainer } from './Token.style';
-export const Token = (_a) => {
-    var { token } = _a, other = __rest(_a, ["token"]);
-    if (!(token === null || token === void 0 ? void 0 : token.priceUSD) || !token.logoURI) {
-        return _jsx(TokenFallback, Object.assign({ token: token }, other));
+export const Token = ({ token, ...other }) => {
+    if (!token?.priceUSD || !token.logoURI) {
+        return _jsx(TokenFallback, { token: token, ...other });
     }
-    return _jsx(TokenBase, Object.assign({ token: token }, other));
+    return _jsx(TokenBase, { token: token, ...other });
 };
-export const TokenFallback = (_a) => {
-    var { token, connected, step, disableDescription, isLoading } = _a, other = __rest(_a, ["token", "connected", "step", "disableDescription", "isLoading"]);
-    const { token: chainToken, isLoading: isLoadingToken } = useToken(token === null || token === void 0 ? void 0 : token.chainId, token === null || token === void 0 ? void 0 : token.address);
-    return (_jsx(TokenBase, Object.assign({ token: Object.assign(Object.assign({}, token), chainToken), isLoading: isLoading || isLoadingToken }, other)));
+export const TokenFallback = ({ token, connected, step, disableDescription, isLoading, ...other }) => {
+    const { token: chainToken, isLoading: isLoadingToken } = useToken(token?.chainId, token?.address);
+    return (_jsx(TokenBase, { token: { ...token, ...chainToken }, isLoading: isLoading || isLoadingToken, ...other }));
 };
-export const TokenBase = (_a) => {
-    var { token, connected, step, disableDescription, isLoading } = _a, other = __rest(_a, ["token", "connected", "step", "disableDescription", "isLoading"]);
+export const TokenBase = ({ token, connected, step, disableDescription, isLoading, ...other }) => {
     const { t } = useTranslation();
-    const { chain } = useChain(token === null || token === void 0 ? void 0 : token.chainId);
-    const formattedTokenAmount = formatTokenAmount(token === null || token === void 0 ? void 0 : token.amount, token === null || token === void 0 ? void 0 : token.decimals);
-    const formattedTokenPrice = formatTokenPrice(formattedTokenAmount, token === null || token === void 0 ? void 0 : token.priceUSD);
-    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [_jsx(TokenAvatar, { token: token, chain: chain, isLoading: isLoading, sx: { marginRight: 2 } }), isLoading ? (_jsx(Skeleton, { width: 112, height: 32, variant: "text" })) : (_jsx(TextFitter, Object.assign({ height: 30, textStyle: {
+    const { chain } = useChain(token?.chainId);
+    const formattedTokenAmount = formatTokenAmount(token?.amount, token?.decimals);
+    const formattedTokenPrice = formatTokenPrice(formattedTokenAmount, token?.priceUSD);
+    return (_jsxs(Box, { flex: 1, ...other, children: [_jsxs(Box, { display: "flex", flex: 1, alignItems: "center", children: [_jsx(TokenAvatar, { token: token, chain: chain, isLoading: isLoading, sx: { marginRight: 2 } }), isLoading ? (_jsx(Skeleton, { width: 112, height: 32, variant: "text" })) : (_jsx(TextFitter, { height: 30, textStyle: {
                             fontWeight: 700,
-                        } }, { children: t('format.number', {
+                        }, children: t('format.number', {
                             value: formattedTokenAmount,
-                        }) })))] })), _jsxs(TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [isLoading ? (_jsx(Skeleton, { width: 48, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : (_jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`format.currency`, {
+                        }) }))] }), _jsxs(TextSecondaryContainer, { connected: connected, component: "span", children: [isLoading ? (_jsx(Skeleton, { width: 48, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : (_jsx(TextSecondary, { connected: connected, children: t(`format.currency`, {
                             value: formattedTokenPrice,
-                        }) }))), !disableDescription ? (_jsx(TextSecondary, Object.assign({ connected: connected, px: 0.5, dot: true }, { children: "\u2022" }))) : null, !step && !disableDescription ? (isLoading ? (_jsx(Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : (_jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
-                            tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
-                            chainName: chain === null || chain === void 0 ? void 0 : chain.name,
-                        }) })))) : null, step ? (_jsxs(Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [_jsx(Box, Object.assign({ pr: 0.75 }, { children: _jsx(SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
+                        }) })), !disableDescription ? (_jsx(TextSecondary, { connected: connected, px: 0.5, dot: true, children: "\u2022" })) : null, !step && !disableDescription ? (isLoading ? (_jsx(Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : (_jsx(TextSecondary, { connected: connected, children: t(`swap.tokenOnChain`, {
+                            tokenSymbol: token?.symbol,
+                            chainName: chain?.name,
+                        }) }))) : null, step ? (_jsxs(Box, { display: "flex", alignItems: "flex-end", height: 12, mt: 0.5, children: [_jsx(Box, { pr: 0.75, children: _jsx(SmallAvatar, { src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
                                         border: 0,
                                         marginBottom: -0.25,
-                                    } }, { children: step.toolDetails.name[0] })) })), _jsx(TextSecondary, Object.assign({ connected: true }, { children: step.toolDetails.name }))] }))) : null] }))] })));
+                                    }, children: step.toolDetails.name[0] }) }), _jsx(TextSecondary, { connected: true, children: step.toolDetails.name })] })) : null] })] }));
 };

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

@@ -4,7 +4,7 @@ export declare const TextSecondaryContainer: import("@emotion/styled").StyledCom
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & 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> & {
     connected?: boolean | undefined;
@@ -19,7 +19,7 @@ export declare const TextSecondary: import("@emotion/styled").StyledComponent<im
     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;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+} & 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> & {
     connected?: boolean | undefined;
@@ -30,6 +30,6 @@ export declare const TokenDivider: import("@emotion/styled").StyledComponent<imp
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & 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>, {}, {}>;

package/components/TokenAvatar/TokenAvatar.js

@@ -4,20 +4,19 @@ import { useChain, useToken } from '../../hooks';
 import { SmallAvatar, SmallAvatarSkeleton } from '../SmallAvatar';
 import { AvatarDefault, AvatarDefaultBadge } from './TokenAvatar.style';
 export const TokenAvatarFallback = ({ token, isLoading, sx }) => {
-    const { chain } = useChain(token === null || token === void 0 ? void 0 : token.chainId);
-    const { token: chainToken, isLoading: isLoadingToken } = useToken(token === null || token === void 0 ? void 0 : token.chainId, token === null || token === void 0 ? void 0 : token.address);
-    return (_jsx(TokenAvatarBase, { token: chainToken !== null && chainToken !== void 0 ? chainToken : token, isLoading: isLoading || isLoadingToken, chain: chain, sx: sx }));
+    const { chain } = useChain(token?.chainId);
+    const { token: chainToken, isLoading: isLoadingToken } = useToken(token?.chainId, token?.address);
+    return (_jsx(TokenAvatarBase, { token: chainToken ?? token, isLoading: isLoading || isLoadingToken, chain: chain, sx: sx }));
 };
 export const TokenAvatarBase = ({ token, chain, isLoading, sx }) => {
-    var _a;
-    return (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain && !isLoading ? (_jsx(SmallAvatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] }))) : (_jsx(SmallAvatarSkeleton, {})), sx: sx }, { children: isLoading ? (_jsx(Skeleton, { width: 32, height: 32, variant: "circular" })) : (_jsx(Avatar, Object.assign({ src: token === null || token === void 0 ? void 0 : token.logoURI, alt: token === null || token === void 0 ? void 0 : token.symbol }, { children: (_a = token === null || token === void 0 ? void 0 : token.symbol) === null || _a === void 0 ? void 0 : _a[0] }))) })));
+    return (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain && !isLoading ? (_jsx(SmallAvatar, { src: chain.logoURI, alt: chain.name, children: chain.name[0] })) : (_jsx(SmallAvatarSkeleton, {})), sx: sx, children: isLoading ? (_jsx(Skeleton, { width: 32, height: 32, variant: "circular" })) : (_jsx(Avatar, { src: token?.logoURI, alt: token?.symbol, children: token?.symbol?.[0] })) }));
 };
 export const TokenAvatar = ({ token, chain, isLoading, sx }) => {
-    if (!chain || !(token === null || token === void 0 ? void 0 : token.logoURI)) {
+    if (!chain || !token?.logoURI) {
         return _jsx(TokenAvatarFallback, { token: token, isLoading: isLoading, sx: sx });
     }
     return (_jsx(TokenAvatarBase, { token: token, chain: chain, isLoading: isLoading, sx: sx }));
 };
 export const TokenAvatarDefault = ({ sx }) => {
-    return (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(AvatarDefaultBadge, { width: 16, height: 16 }), sx: sx }, { children: _jsx(AvatarDefault, { width: 32, height: 32 }) })));
+    return (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(AvatarDefaultBadge, { width: 16, height: 16 }), sx: sx, children: _jsx(AvatarDefault, { width: 32, height: 32 }) }));
 };

package/components/TokenAvatar/TokenAvatar.style.d.ts

@@ -5,7 +5,7 @@ export declare const AvatarDefault: import("@emotion/styled").StyledComponent<im
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & 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 AvatarDefaultBadge: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
@@ -13,6 +13,6 @@ export declare const AvatarDefaultBadge: import("@emotion/styled").StyledCompone
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & 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>, {}, {}>;

package/components/TokenList/TokenList.js

@@ -8,7 +8,6 @@ import { TokenNotFound } from './TokenNotFound';
 import { useTokenSelect } from './useTokenSelect';
 import { VirtualizedTokenList } from './VirtualizedTokenList';
 export const TokenList = ({ formType, height, onClick, }) => {
-    var _a, _b;
     const parentRef = useRef(null);
     const { account } = useWallet();
     const [selectedChainId] = useWatch({
@@ -16,8 +15,8 @@ export const TokenList = ({ formType, height, onClick, }) => {
     });
     const [tokenSearchFilter] = useDebouncedWatch([SwapFormKey.TokenSearchFilter], 320);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = useTokenBalances(selectedChainId);
-    let filteredTokens = ((_a = tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : chainTokens) !== null && _a !== void 0 ? _a : []);
-    const searchFilter = (_b = tokenSearchFilter === null || tokenSearchFilter === void 0 ? void 0 : tokenSearchFilter.toUpperCase()) !== null && _b !== void 0 ? _b : '';
+    let filteredTokens = (tokensWithBalance ?? chainTokens ?? []);
+    const searchFilter = tokenSearchFilter?.toUpperCase() ?? '';
     filteredTokens = tokenSearchFilter
         ? filteredTokens.filter((token) => token.name.toUpperCase().includes(searchFilter) ||
             token.symbol.toUpperCase().includes(searchFilter) ||
@@ -35,5 +34,5 @@ export const TokenList = ({ formType, height, onClick, }) => {
             ? [searchedToken]
             : filteredTokens;
     const handleTokenClick = useTokenSelect(formType, onClick);
-    return (_jsxs(Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
+    return (_jsxs(Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens?.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
 };

package/components/TokenList/TokenList.style.d.ts

@@ -15,7 +15,7 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     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").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "classes"> & 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;
 }, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
@@ -33,6 +33,6 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     slots?: {
         root?: import("react").ElementType<any> | undefined;
     } | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
 }, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "slotProps" | "slots" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/TokenList/TokenList.style.js

@@ -1,17 +1,13 @@
-import { ListItem as MuiListItem, ListItemButton as MuiListItemButton, } from '@mui/material';
+import { ListItem as MuiListItem } from '@mui/material';
 import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
 import { listItemTextClasses } from '@mui/material/ListItemText';
 import { styled } from '@mui/material/styles';
-import { getContrastAlphaColor } from '../../utils';
-export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
-    borderRadius: theme.shape.borderRadius,
+import { ListItemButton as ListItemButtonBase } from '../ListItemButton';
+export const ListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
     paddingLeft: theme.spacing(1.5),
     paddingRight: theme.spacing(1.5),
     height: 64,
     width: '100%',
-    '&:hover': {
-        backgroundColor: getContrastAlphaColor(theme, '4%'),
-    },
 }));
 export const ListItem = styled(MuiListItem)(({ theme }) => ({
     position: 'absolute',

package/components/TokenList/TokenListItem.js

@@ -5,28 +5,28 @@ import { useTranslation } from 'react-i18next';
 import { formatTokenPrice } from '../../utils';
 import { ListItem, ListItemButton } from './TokenList.style';
 export const TokenListItem = memo(({ onClick, size, start, token, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
-    const handleClick = () => onClick === null || onClick === void 0 ? void 0 : onClick(token.address);
-    return (_jsxs(ListItem, Object.assign({ disablePadding: true, style: {
+    const handleClick = () => onClick?.(token.address);
+    return (_jsxs(ListItem, { disablePadding: true, style: {
             height: `${size}px`,
             transform: `translateY(${start}px)`,
-        } }, { children: [startAdornment, _jsx(TokenListItemButton, { token: token, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] })));
+        }, children: [startAdornment, _jsx(TokenListItemButton, { token: token, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] }));
 });
 export const TokenListItemButton = ({ onClick, token, showBalance, isBalanceLoading, }) => {
     const { t } = useTranslation();
     const tokenPrice = formatTokenPrice(token.amount, token.priceUSD);
-    return (_jsxs(ListItemButton, Object.assign({ onClick: onClick, dense: true, disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] })) }), _jsx(ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (isBalanceLoading ? (_jsx(TokenAmountSkeleton, {})) : (_jsxs(Box, Object.assign({ sx: { textAlign: 'right' } }, { children: [Number(token.amount) ? (_jsx(Typography, Object.assign({ variant: "body1", noWrap: true }, { children: t('format.number', {
+    return (_jsxs(ListItemButton, { onClick: onClick, dense: true, disableRipple: true, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: token.logoURI, alt: token.symbol, children: token.symbol[0] }) }), _jsx(ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (isBalanceLoading ? (_jsx(TokenAmountSkeleton, {})) : (_jsxs(Box, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? (_jsx(Typography, { variant: "body1", noWrap: true, children: t('format.number', {
                             value: token.amount,
-                        }) }))) : null, tokenPrice ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD }, { children: t(`format.currency`, {
+                        }) })) : null, tokenPrice ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD, children: t(`format.currency`, {
                             value: tokenPrice,
-                        }) }))) : null] })))) : null] })));
+                        }) })) : null] }))) : null] }));
 };
 export const TokenListItemSkeleton = () => {
-    return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [_jsx(ListItemAvatar, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 1.5, marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), secondary: _jsx(Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
+    return (_jsxs(ListItem, { secondaryAction: _jsx(TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' }, children: [_jsx(ListItemAvatar, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 1.5, marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), secondary: _jsx(Skeleton, { variant: "text", width: 96, height: 20 }) })] }));
 };
 export const TokenAmountSkeleton = () => {
-    return (_jsxs(Box, Object.assign({ sx: {
+    return (_jsxs(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'flex-end',
-        } }, { children: [_jsx(Skeleton, { variant: "text", width: 56, height: 24 }), _jsx(Skeleton, { variant: "text", width: 48, height: 18 })] })));
+        }, children: [_jsx(Skeleton, { variant: "text", width: 56, height: 24 }), _jsx(Skeleton, { variant: "text", width: 48, height: 18 })] }));
 };

package/components/TokenList/TokenNotFound.js

@@ -6,20 +6,19 @@ import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers';
 export const TokenNotFound = ({ formType }) => {
-    var _a;
     const { t } = useTranslation();
     const [selectedChainId] = useWatch({
         name: [SwapFormKeyHelper.getChainKey(formType)],
     });
     const { getChainById } = useChains();
-    return (_jsxs(Box, Object.assign({ sx: {
+    return (_jsxs(Box, { sx: {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48, lineHeight: 1 }, { children: _jsx(SearchOffIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2 }, { children: t('swap.info.message.emptyTokenList', {
-                    chainName: (_a = getChainById(selectedChainId)) === null || _a === void 0 ? void 0 : _a.name,
-                }) }))] })));
+        }, children: [_jsx(Typography, { fontSize: 48, lineHeight: 1, children: _jsx(SearchOffIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2, children: t('swap.info.message.emptyTokenList', {
+                    chainName: getChainById(selectedChainId)?.name,
+                }) })] }));
 };

package/components/TokenList/VirtualizedTokenList.js

@@ -7,7 +7,7 @@ import { TokenListItem, TokenListItemSkeleton } from './TokenListItem';
 export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef, chainId, isLoading, isBalanceLoading, showBalance, showFeatured, onClick, }) => {
     const { t } = useTranslation();
     const hasFeaturedTokens = !!featuredTokensLength && showFeatured;
-    const featuredTokensLastIndex = (featuredTokensLength !== null && featuredTokensLength !== void 0 ? featuredTokensLength : 0) - 1;
+    const featuredTokensLastIndex = (featuredTokensLength ?? 0) - 1;
     const tokensLastIndex = tokens.length - 1;
     const { getVirtualItems, getTotalSize, scrollToIndex } = useVirtualizer({
         count: tokens.length,
@@ -15,25 +15,24 @@ export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollEleme
         overscan: 10,
         paddingEnd: 12,
         estimateSize: (index) => {
-            var _a, _b;
             // heigth of TokenListItem
             let size = 64;
             if (!hasFeaturedTokens) {
                 return size;
             }
-            if (index === 0 && ((_a = tokens[index]) === null || _a === void 0 ? void 0 : _a.featured)) {
+            if (index === 0 && tokens[index]?.featured) {
                 // height of startAdornment
                 size += 24;
             }
             if (index === featuredTokensLastIndex &&
                 index !== tokensLastIndex &&
-                ((_b = tokens[index]) === null || _b === void 0 ? void 0 : _b.featured)) {
+                tokens[index]?.featured) {
                 // height of endAdornment
                 size += 32;
             }
             return size;
         },
-        getItemKey: (index) => { var _a; return (_a = tokens[index].address) !== null && _a !== void 0 ? _a : index; },
+        getItemKey: (index) => tokens[index].address ?? index,
     });
     useEffect(() => {
         if (getVirtualItems().length) {
@@ -41,15 +40,15 @@ export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollEleme
         }
     }, [scrollToIndex, chainId, getVirtualItems]);
     if (isLoading) {
-        return (_jsx(List, Object.assign({ disablePadding: true }, { children: Array.from({ length: 3 }).map((_, index) => (
+        return (_jsx(List, { disablePadding: true, children: Array.from({ length: 3 }).map((_, index) => (
             // eslint-disable-next-line react/no-array-index-key
-            _jsx(TokenListItemSkeleton, {}, index))) })));
+            _jsx(TokenListItemSkeleton, {}, index))) }));
     }
-    return (_jsx(List, Object.assign({ style: { height: getTotalSize() }, disablePadding: true }, { children: getVirtualItems().map((item) => {
+    return (_jsx(List, { style: { height: getTotalSize() }, disablePadding: true, children: getVirtualItems().map((item) => {
             const token = tokens[item.index];
-            return (_jsx(TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? (_jsx(Typography, Object.assign({ fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25 }, { children: t('swap.featuredTokens') }))) : null, endAdornment: hasFeaturedTokens &&
+            return (_jsx(TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25, children: t('swap.featuredTokens') })) : null, endAdornment: hasFeaturedTokens &&
                     token.featured &&
                     item.index === featuredTokensLastIndex &&
-                    item.index !== tokensLastIndex ? (_jsx(Typography, Object.assign({ fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25 }, { children: t('swap.otherTokens') }))) : null }, item.key));
-        }) })));
+                    item.index !== tokensLastIndex ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25, children: t('swap.otherTokens') })) : null }, item.key));
+        }) }));
 };

package/components/TokenList/useTokenSelect.js

@@ -8,7 +8,7 @@ export const useTokenSelect = (formType, onClick) => {
     return useCallback((tokenAddress, chainId) => {
         onChange(tokenAddress);
         onBlur();
-        const selectedChainId = chainId !== null && chainId !== void 0 ? chainId : getValues(SwapFormKeyHelper.getChainKey(formType));
+        const selectedChainId = chainId ?? getValues(SwapFormKeyHelper.getChainKey(formType));
         // Set chain again to trigger URL builder update
         setValue(SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
             shouldDirty: true,
@@ -27,6 +27,6 @@ export const useTokenSelect = (formType, onClick) => {
                 shouldTouch: true,
             });
         }
-        onClick === null || onClick === void 0 ? void 0 : onClick();
+        onClick?.();
     }, [formType, getValues, onBlur, onChange, onClick, setValue]);
 };

package/config/env.js

@@ -1,3 +1,3 @@
 export const env = {
-    LIFI_API_URL: 'https://li.quest/v1/', // 'https://developkub.li.finance/v1/',
+    LIFI_API_URL: 'https://li.quest/v1/', // 'https://develop.li.quest/v1/',
 };

package/config/sentry.js

@@ -1,20 +1,11 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { version } from './version';
 let sentryLoaded = false;
-export const initSentry = (enabled) => __awaiter(void 0, void 0, void 0, function* () {
+export const initSentry = async (enabled) => {
     if (process.env.NODE_ENV === 'development') {
         return;
     }
     if (enabled || sentryLoaded) {
-        const [Sentry, { CaptureConsole }, { BrowserTracing }] = yield Promise.all([
+        const [Sentry, { CaptureConsole }, { BrowserTracing }] = await Promise.all([
             import('@sentry/react'),
             import('@sentry/integrations'),
             import('@sentry/tracing'),
@@ -35,4 +26,4 @@ export const initSentry = (enabled) => __awaiter(void 0, void 0, void 0, functio
         });
         sentryLoaded = true;
     }
-});
+};