@lifi/widget 1.31.1 → 1.32.1

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

@@ -22,7 +22,7 @@ const SwapRoutesExpanded = () => {
             element: null,
         },
     ]);
-    return ((0, jsx_runtime_1.jsx)(SwapRoutes_style_1.CollapseContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: timeout, in: !!element, orientation: "horizontal" }, { children: (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ 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)(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, {}) }) }) }) }));
 };
 exports.SwapRoutesExpanded = SwapRoutesExpanded;
 const SwapRoutesExpandedElement = () => {
@@ -32,7 +32,7 @@ const SwapRoutesExpandedElement = () => {
     const { containerStyle } = (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 === null || routes === void 0 ? void 0 : routes[0];
+    const currentRoute = routes?.[0];
     (0, useSetRecommendedRoute_1.useSetRecommendedRoute)(currentRoute, isFetching);
     const handleRouteClick = (route) => {
         if (isValid && !isValidating) {
@@ -44,6 +44,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, Object.assign({ timeout: timeout.enter, in: expanded, orientation: "horizontal" }, { children: (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Container, Object.assign({ 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, Object.assign({ 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, Object.assign({ 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 === null || routes === void 0 ? void 0 : routes.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.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 ((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)))) })] }) }) }) }));
 };
 exports.SwapRoutesExpandedElement = SwapRoutesExpandedElement;

package/cjs/components/TextFitter/TextFitter.js

@@ -29,7 +29,7 @@ const TextFitter = ({ children, width = '100%', height, maxHeight, preserveAspec
         }
         setViewBox(box);
         // setTextRect(textRef.current.getBoundingClientRect());
-        onFit === null || onFit === void 0 ? void 0 : onFit();
+        onFit?.();
     }, [cropBottom, cropTop, onFit]);
     (0, react_1.useLayoutEffect)(() => {
         calculateBox();
@@ -41,12 +41,12 @@ const TextFitter = ({ children, width = '100%', height, maxHeight, preserveAspec
             });
         }
     }, [calculateBox]);
-    return ((0, jsx_runtime_1.jsx)("svg", Object.assign({ style: svgStyle, viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`, width: width, height: height, 
+    return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("text", Object.assign({ x: 0, y: 0, style: textStyle, ref: textRef }, { children: children })) })));
+        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary, 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.js

@@ -1,15 +1,4 @@
 "use strict";
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TokenBase = exports.TokenFallback = exports.Token = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -21,38 +10,35 @@ const SmallAvatar_1 = require("../SmallAvatar");
 const TextFitter_1 = require("../TextFitter");
 const TokenAvatar_1 = require("../TokenAvatar");
 const Token_style_1 = require("./Token.style");
-const Token = (_a) => {
-    var { token } = _a, other = __rest(_a, ["token"]);
-    if (!(token === null || token === void 0 ? void 0 : token.priceUSD) || !token.logoURI) {
-        return (0, jsx_runtime_1.jsx)(exports.TokenFallback, Object.assign({ token: token }, other));
+const Token = ({ token, ...other }) => {
+    if (!token?.priceUSD || !token.logoURI) {
+        return (0, jsx_runtime_1.jsx)(exports.TokenFallback, { token: token, ...other });
     }
-    return (0, jsx_runtime_1.jsx)(exports.TokenBase, Object.assign({ token: token }, other));
+    return (0, jsx_runtime_1.jsx)(exports.TokenBase, { token: token, ...other });
 };
 exports.Token = Token;
-const TokenFallback = (_a) => {
-    var { token, connected, step, disableDescription, isLoading } = _a, other = __rest(_a, ["token", "connected", "step", "disableDescription", "isLoading"]);
-    const { token: chainToken, isLoading: isLoadingToken } = (0, hooks_1.useToken)(token === null || token === void 0 ? void 0 : token.chainId, token === null || token === void 0 ? void 0 : token.address);
-    return ((0, jsx_runtime_1.jsx)(exports.TokenBase, Object.assign({ token: Object.assign(Object.assign({}, token), chainToken), isLoading: isLoading || isLoadingToken }, other)));
+const TokenFallback = ({ token, connected, step, disableDescription, isLoading, ...other }) => {
+    const { token: chainToken, isLoading: isLoadingToken } = (0, hooks_1.useToken)(token?.chainId, token?.address);
+    return ((0, jsx_runtime_1.jsx)(exports.TokenBase, { token: { ...token, ...chainToken }, isLoading: isLoading || isLoadingToken, ...other }));
 };
 exports.TokenFallback = TokenFallback;
-const TokenBase = (_a) => {
-    var { token, connected, step, disableDescription, isLoading } = _a, other = __rest(_a, ["token", "connected", "step", "disableDescription", "isLoading"]);
+const TokenBase = ({ token, connected, step, disableDescription, isLoading, ...other }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { chain } = (0, hooks_1.useChain)(token === null || token === void 0 ? void 0 : token.chainId);
-    const formattedTokenAmount = (0, utils_1.formatTokenAmount)(token === null || token === void 0 ? void 0 : token.amount, token === null || token === void 0 ? void 0 : token.decimals);
-    const formattedTokenPrice = (0, utils_1.formatTokenPrice)(formattedTokenAmount, token === null || token === void 0 ? void 0 : token.priceUSD);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, isLoading: isLoading, sx: { marginRight: 2 } }), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 112, height: 32, variant: "text" })) : ((0, jsx_runtime_1.jsx)(TextFitter_1.TextFitter, Object.assign({ height: 30, textStyle: {
+    const { chain } = (0, hooks_1.useChain)(token?.chainId);
+    const formattedTokenAmount = (0, utils_1.formatTokenAmount)(token?.amount, token?.decimals);
+    const formattedTokenPrice = (0, utils_1.formatTokenPrice)(formattedTokenAmount, token?.priceUSD);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, ...other, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flex: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, isLoading: isLoading, sx: { marginRight: 2 } }), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 112, height: 32, variant: "text" })) : ((0, jsx_runtime_1.jsx)(TextFitter_1.TextFitter, { height: 30, textStyle: {
                             fontWeight: 700,
-                        } }, { children: t('format.number', {
+                        }, children: t('format.number', {
                             value: formattedTokenAmount,
-                        }) })))] })), (0, jsx_runtime_1.jsxs)(Token_style_1.TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 48, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`format.currency`, {
+                        }) }))] }), (0, jsx_runtime_1.jsxs)(Token_style_1.TextSecondaryContainer, { connected: connected, component: "span", children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 48, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, { connected: connected, children: t(`format.currency`, {
                             value: formattedTokenPrice,
-                        }) }))), !disableDescription ? ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected, px: 0.5, dot: true }, { children: "\u2022" }))) : null, !step && !disableDescription ? (isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : ((0, jsx_runtime_1.jsx)(Token_style_1.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 ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 0.75 }, { children: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
+                        }) })), !disableDescription ? ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, { connected: connected, px: 0.5, dot: true, children: "\u2022" })) : null, !step && !disableDescription ? (isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, { connected: connected, children: t(`swap.tokenOnChain`, {
+                            tokenSymbol: token?.symbol,
+                            chainName: chain?.name,
+                        }) }))) : null, step ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "flex-end", height: 12, mt: 0.5, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { pr: 0.75, children: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
                                         border: 0,
                                         marginBottom: -0.25,
-                                    } }, { children: step.toolDetails.name[0] })) })), (0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: true }, { children: step.toolDetails.name }))] }))) : null] }))] })));
+                                    }, children: step.toolDetails.name[0] }) }), (0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, { connected: true, children: step.toolDetails.name })] })) : null] })] }));
 };
 exports.TokenBase = TokenBase;

package/cjs/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/cjs/components/TokenAvatar/TokenAvatar.js

@@ -7,24 +7,23 @@ const hooks_1 = require("../../hooks");
 const SmallAvatar_1 = require("../SmallAvatar");
 const TokenAvatar_style_1 = require("./TokenAvatar.style");
 const TokenAvatarFallback = ({ token, isLoading, sx }) => {
-    const { chain } = (0, hooks_1.useChain)(token === null || token === void 0 ? void 0 : token.chainId);
-    const { token: chainToken, isLoading: isLoadingToken } = (0, hooks_1.useToken)(token === null || token === void 0 ? void 0 : token.chainId, token === null || token === void 0 ? void 0 : token.address);
-    return ((0, jsx_runtime_1.jsx)(exports.TokenAvatarBase, { token: chainToken !== null && chainToken !== void 0 ? chainToken : token, isLoading: isLoading || isLoadingToken, chain: chain, sx: sx }));
+    const { chain } = (0, hooks_1.useChain)(token?.chainId);
+    const { token: chainToken, isLoading: isLoadingToken } = (0, hooks_1.useToken)(token?.chainId, token?.address);
+    return ((0, jsx_runtime_1.jsx)(exports.TokenAvatarBase, { token: chainToken ?? token, isLoading: isLoading || isLoadingToken, chain: chain, sx: sx }));
 };
 exports.TokenAvatarFallback = TokenAvatarFallback;
 const TokenAvatarBase = ({ token, chain, isLoading, sx }) => {
-    var _a;
-    return ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain && !isLoading ? ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] }))) : ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatarSkeleton, {})), sx: sx }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 32, height: 32, variant: "circular" })) : ((0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsx)(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain && !isLoading ? ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { src: chain.logoURI, alt: chain.name, children: chain.name[0] })) : ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatarSkeleton, {})), sx: sx, children: isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 32, height: 32, variant: "circular" })) : ((0, jsx_runtime_1.jsx)(material_1.Avatar, { src: token?.logoURI, alt: token?.symbol, children: token?.symbol?.[0] })) }));
 };
 exports.TokenAvatarBase = TokenAvatarBase;
 const TokenAvatar = ({ token, chain, isLoading, sx }) => {
-    if (!chain || !(token === null || token === void 0 ? void 0 : token.logoURI)) {
+    if (!chain || !token?.logoURI) {
         return (0, jsx_runtime_1.jsx)(exports.TokenAvatarFallback, { token: token, isLoading: isLoading, sx: sx });
     }
     return ((0, jsx_runtime_1.jsx)(exports.TokenAvatarBase, { token: token, chain: chain, isLoading: isLoading, sx: sx }));
 };
 exports.TokenAvatar = TokenAvatar;
 const TokenAvatarDefault = ({ sx }) => {
-    return ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarDefaultBadge, { width: 16, height: 16 }), sx: sx }, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarDefault, { width: 32, height: 32 }) })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarDefaultBadge, { width: 16, height: 16 }), sx: sx, children: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarDefault, { width: 32, height: 32 }) }));
 };
 exports.TokenAvatarDefault = TokenAvatarDefault;

package/cjs/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/cjs/components/TokenList/TokenList.js

@@ -11,7 +11,6 @@ const TokenNotFound_1 = require("./TokenNotFound");
 const useTokenSelect_1 = require("./useTokenSelect");
 const VirtualizedTokenList_1 = require("./VirtualizedTokenList");
 const TokenList = ({ formType, height, onClick, }) => {
-    var _a, _b;
     const parentRef = (0, react_1.useRef)(null);
     const { account } = (0, providers_1.useWallet)();
     const [selectedChainId] = (0, react_hook_form_1.useWatch)({
@@ -19,8 +18,8 @@ const TokenList = ({ formType, height, onClick, }) => {
     });
     const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.SwapFormKey.TokenSearchFilter], 320);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = (0, hooks_1.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) ||
@@ -38,6 +37,6 @@ const TokenList = ({ formType, height, onClick, }) => {
             ? [searchedToken]
             : filteredTokens;
     const handleTokenClick = (0, useTokenSelect_1.useTokenSelect)(formType, onClick);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? ((0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, { formType: formType })) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isLoading ? ((0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, { formType: formType })) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens?.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
 };
 exports.TokenList = TokenList;

package/cjs/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>, {}, {}>;
+}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/TokenList/TokenList.style.js

@@ -5,16 +5,12 @@ const material_1 = require("@mui/material");
 const ListItemSecondaryAction_1 = require("@mui/material/ListItemSecondaryAction");
 const ListItemText_1 = require("@mui/material/ListItemText");
 const styles_1 = require("@mui/material/styles");
-const utils_1 = require("../../utils");
-exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
-    borderRadius: theme.shape.borderRadius,
+const ListItemButton_1 = require("../ListItemButton");
+exports.ListItemButton = (0, styles_1.styled)(ListItemButton_1.ListItemButton)(({ theme }) => ({
     paddingLeft: theme.spacing(1.5),
     paddingRight: theme.spacing(1.5),
     height: 64,
     width: '100%',
-    '&:hover': {
-        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme, '4%'),
-    },
 }));
 exports.ListItem = (0, styles_1.styled)(material_1.ListItem)(({ theme }) => ({
     position: 'absolute',

package/cjs/components/TokenList/TokenListItem.js

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

package/cjs/components/TokenList/TokenNotFound.js

@@ -9,21 +9,20 @@ const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const TokenNotFound = ({ formType }) => {
-    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
     const [selectedChainId] = (0, react_hook_form_1.useWatch)({
         name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
     });
     const { getChainById } = (0, hooks_1.useChains)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48, lineHeight: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SearchOff, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.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: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, lineHeight: 1, children: (0, jsx_runtime_1.jsx)(icons_material_1.SearchOff, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2, children: t('swap.info.message.emptyTokenList', {
+                    chainName: getChainById(selectedChainId)?.name,
+                }) })] }));
 };
 exports.TokenNotFound = TokenNotFound;

package/cjs/components/TokenList/VirtualizedTokenList.js

@@ -10,7 +10,7 @@ const TokenListItem_1 = require("./TokenListItem");
 const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef, chainId, isLoading, isBalanceLoading, showBalance, showFeatured, onClick, }) => {
     const { t } = (0, react_i18next_1.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 } = (0, react_virtual_1.useVirtualizer)({
         count: tokens.length,
@@ -18,25 +18,24 @@ const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef,
         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,
     });
     (0, react_1.useEffect)(() => {
         if (getVirtualItems().length) {
@@ -44,16 +43,16 @@ const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef,
         }
     }, [scrollToIndex, chainId, getVirtualItems]);
     if (isLoading) {
-        return ((0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ disablePadding: true }, { children: Array.from({ length: 3 }).map((_, index) => (
+        return ((0, jsx_runtime_1.jsx)(material_1.List, { disablePadding: true, children: Array.from({ length: 3 }).map((_, index) => (
             // eslint-disable-next-line react/no-array-index-key
-            (0, jsx_runtime_1.jsx)(TokenListItem_1.TokenListItemSkeleton, {}, index))) })));
+            (0, jsx_runtime_1.jsx)(TokenListItem_1.TokenListItemSkeleton, {}, index))) }));
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ style: { height: getTotalSize() }, disablePadding: true }, { children: getVirtualItems().map((item) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.List, { style: { height: getTotalSize() }, disablePadding: true, children: getVirtualItems().map((item) => {
             const token = tokens[item.index];
-            return ((0, jsx_runtime_1.jsx)(TokenListItem_1.TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25 }, { children: t('swap.featuredTokens') }))) : null, endAdornment: hasFeaturedTokens &&
+            return ((0, jsx_runtime_1.jsx)(TokenListItem_1.TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? ((0, jsx_runtime_1.jsx)(material_1.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 ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25 }, { children: t('swap.otherTokens') }))) : null }, item.key));
-        }) })));
+                    item.index !== tokensLastIndex ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25, children: t('swap.otherTokens') })) : null }, item.key));
+        }) }));
 };
 exports.VirtualizedTokenList = VirtualizedTokenList;

package/cjs/components/TokenList/useTokenSelect.js

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

package/cjs/config/env.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.env = void 0;
 exports.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/cjs/config/sentry.js

@@ -1,23 +1,14 @@
 "use strict";
-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());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initSentry = void 0;
 const version_1 = require("./version");
 let sentryLoaded = false;
-const initSentry = (enabled) => __awaiter(void 0, void 0, void 0, function* () {
+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([
             Promise.resolve().then(() => require('@sentry/react')),
             Promise.resolve().then(() => require('@sentry/integrations')),
             Promise.resolve().then(() => require('@sentry/tracing')),
@@ -38,5 +29,5 @@ const initSentry = (enabled) => __awaiter(void 0, void 0, void 0, function* () {
         });
         sentryLoaded = true;
     }
-});
+};
 exports.initSentry = initSentry;