@lifi/widget 1.31.0 → 1.32.0

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>, {}, {}>;

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;

package/cjs/config/theme.js

@@ -45,10 +45,12 @@ const shape = {
     borderRadiusSecondary: 8,
 };
 const createTheme = (mode, theme = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-    const primaryMainColor = (_c = (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : palette.primary.main;
-    const primaryLightColor = (0, styles_1.lighten)((_f = (_e = (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : palette.primary.main, 0.5);
-    const primaryDarkColor = (0, styles_1.darken)((_j = (_h = (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h.main) !== null && _j !== void 0 ? _j : palette.primary.main, 0.2);
+    const primaryMainColor = theme.palette?.primary?.main ??
+        palette.primary.main;
+    const primaryLightColor = (0, styles_1.lighten)(theme.palette?.primary?.main ??
+        palette.primary.main, 0.5);
+    const primaryDarkColor = (0, styles_1.darken)(theme.palette?.primary?.main ??
+        palette.primary.main, 0.2);
     const contrastButtonColor = (0, styles_1.getContrastRatio)(colors_1.common.white, primaryMainColor) >= 3
         ? colors_1.common.white
         : colors_1.common.black;
@@ -56,17 +58,33 @@ const createTheme = (mode, theme = {}) => {
         ? colors_1.common.white
         : colors_1.common.black;
     return (0, styles_1.createTheme)({
-        typography: Object.assign({ fontFamily: 'Inter var, Inter, sans-serif' }, theme.typography),
-        palette: Object.assign(Object.assign(Object.assign(Object.assign({ mode }, palette), (mode === 'light' ? paletteLight : paletteDark)), theme.palette), { primary: {
+        typography: {
+            fontFamily: 'Inter var, Inter, sans-serif',
+            ...theme.typography,
+        },
+        palette: {
+            mode,
+            ...palette,
+            ...(mode === 'light' ? paletteLight : paletteDark),
+            ...theme.palette,
+            primary: {
                 main: primaryMainColor,
                 light: primaryLightColor,
                 dark: primaryDarkColor,
-            }, secondary: {
-                main: (_m = (_l = (_k = theme.palette) === null || _k === void 0 ? void 0 : _k.secondary) === null || _l === void 0 ? void 0 : _l.main) !== null && _m !== void 0 ? _m : palette.secondary.main,
-                light: (0, styles_1.lighten)((_q = (_p = (_o = theme.palette) === null || _o === void 0 ? void 0 : _o.secondary) === null || _p === void 0 ? void 0 : _p.main) !== null && _q !== void 0 ? _q : palette.secondary.main, 0.5),
-                dark: (0, styles_1.darken)((_t = (_s = (_r = theme.palette) === null || _r === void 0 ? void 0 : _r.secondary) === null || _s === void 0 ? void 0 : _s.main) !== null && _t !== void 0 ? _t : palette.secondary.main, 0.2),
-            } }),
-        shape: Object.assign(Object.assign({}, shape), theme.shape),
+            },
+            secondary: {
+                main: theme.palette?.secondary?.main ??
+                    palette.secondary.main,
+                light: (0, styles_1.lighten)(theme.palette?.secondary?.main ??
+                    palette.secondary.main, 0.5),
+                dark: (0, styles_1.darken)(theme.palette?.secondary?.main ??
+                    palette.secondary.main, 0.2),
+            },
+        },
+        shape: {
+            ...shape,
+            ...theme.shape,
+        },
         breakpoints: {
             values: {
                 xs: 0,
@@ -79,7 +97,14 @@ const createTheme = (mode, theme = {}) => {
         components: {
             MuiScopedCssBaseline: {
                 styleOverrides: {
-                    root: Object.assign(Object.assign({ fontFamily: 'Inter, sans-serif' }, theme.typography), { '@supports (font-variation-settings: normal)': Object.assign({ fontFamily: 'Inter var, sans-serif' }, theme.typography) }),
+                    root: {
+                        fontFamily: 'Inter, sans-serif',
+                        ...theme.typography,
+                        '@supports (font-variation-settings: normal)': {
+                            fontFamily: 'Inter var, sans-serif',
+                            ...theme.typography,
+                        },
+                    },
                 },
             },
             MuiButton: {
@@ -88,7 +113,7 @@ const createTheme = (mode, theme = {}) => {
                 },
                 styleOverrides: {
                     root: {
-                        borderRadius: (_v = (_u = theme.shape) === null || _u === void 0 ? void 0 : _u.borderRadiusSecondary) !== null && _v !== void 0 ? _v : shape.borderRadiusSecondary,
+                        borderRadius: theme.shape?.borderRadiusSecondary ?? shape.borderRadiusSecondary,
                         textTransform: 'none',
                         fontSize: '1rem',
                         [`&.Mui-disabled, &.Mui-disabled:hover`]: {
@@ -145,12 +170,15 @@ const createTheme = (mode, theme = {}) => {
                     },
                 },
             },
-            MuiAvatar: Object.assign({ styleOverrides: {
+            MuiAvatar: {
+                styleOverrides: {
                     root: {
                         height: 32,
                         width: 32,
                     },
-                } }, (_w = theme.components) === null || _w === void 0 ? void 0 : _w.MuiAvatar),
+                },
+                ...theme.components?.MuiAvatar,
+            },
             MuiListItemAvatar: {
                 styleOverrides: {
                     root: {

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.31.0";
+export declare const version = "1.32.0";

package/cjs/config/version.js

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

package/cjs/hooks/useChain.js

@@ -6,7 +6,7 @@ const useChains_1 = require("./useChains");
 const useChain = (chainId) => {
     const { chains, isLoading } = (0, useChains_1.useChains)();
     const chain = (0, react_1.useMemo)(() => {
-        const chain = chains === null || chains === void 0 ? void 0 : chains.find((chain) => chain.id === chainId);
+        const chain = chains?.find((chain) => chain.id === chainId);
         return chain;
     }, [chainId, chains]);
     return {

package/cjs/hooks/useChains.js

@@ -1,13 +1,4 @@
 "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.useChains = void 0;
 const react_query_1 = require("@tanstack/react-query");
@@ -20,8 +11,8 @@ const useChains = () => {
     const lifi = (0, providers_1.useLiFi)();
     const { getValues, setValue } = (0, react_hook_form_1.useFormContext)();
     const initializeChains = (0, stores_1.useChainOrderStore)((state) => state.initializeChains);
-    const { data, isLoading } = (0, react_query_1.useQuery)(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
-        const availableChains = yield lifi.getChains();
+    const { data, isLoading } = (0, react_query_1.useQuery)(['chains'], async () => {
+        const availableChains = await lifi.getChains();
         const filteredChains = availableChains.filter((chain) => (0, providers_1.isItemAllowed)(chain.id, chains, disabledChains));
         const chainOrder = initializeChains(filteredChains.map((chain) => chain.id));
         const [fromChainValue, toChainValue] = getValues([
@@ -35,17 +26,17 @@ const useChains = () => {
             setValue(providers_1.SwapFormKey.ToChain, chainOrder[0]);
         }
         return { availableChains, filteredChains };
-    }), {
+    }, {
         refetchInterval: 180000,
         staleTime: 180000,
     });
     const getChainById = (0, react_1.useCallback)((chainId) => {
-        const chain = data === null || data === void 0 ? void 0 : data.availableChains.find((chain) => chain.id === chainId);
+        const chain = data?.availableChains.find((chain) => chain.id === chainId);
         // if (!chain) {
         //   throw new Error('Chain not found or chainId is invalid.');
         // }
         return chain;
     }, [data]);
-    return { chains: data === null || data === void 0 ? void 0 : data.filteredChains, getChainById, isLoading };
+    return { chains: data?.filteredChains, getChainById, isLoading };
 };
 exports.useChains = useChains;

package/cjs/hooks/useContentHeight.js

@@ -31,11 +31,10 @@ exports.useContentHeight = useContentHeight;
 const useSetContentHeight = (ref) => {
     const elementId = (0, useDefaultElementId_1.useDefaultElementId)();
     (0, react_1.useLayoutEffect)(() => {
-        var _a;
         const scrollableContainer = (0, useScrollableContainer_1.getScrollableContainer)(elementId);
         if (!scrollableContainer ||
             !ref.current ||
-            ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight) <= (scrollableContainer === null || scrollableContainer === void 0 ? void 0 : scrollableContainer.clientHeight)) {
+            ref.current?.clientHeight <= scrollableContainer?.clientHeight) {
             return;
         }
         scrollableContainer.style.height = `${ref.current.clientHeight}px`;

package/cjs/hooks/useFeaturedTokens.js

@@ -5,9 +5,6 @@ const react_1 = require("react");
 const providers_1 = require("../providers");
 const useFeaturedTokens = (selectedChainId) => {
     const { featuredTokens, tokens } = (0, providers_1.useWidgetConfig)();
-    return (0, react_1.useMemo)(() => {
-        var _a;
-        return [...((_a = tokens === null || tokens === void 0 ? void 0 : tokens.featured) !== null && _a !== void 0 ? _a : []), ...(featuredTokens !== null && featuredTokens !== void 0 ? featuredTokens : [])].filter((token) => token.chainId === selectedChainId);
-    }, [featuredTokens, selectedChainId, tokens === null || tokens === void 0 ? void 0 : tokens.featured]);
+    return (0, react_1.useMemo)(() => [...(tokens?.featured ?? []), ...(featuredTokens ?? [])].filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId, tokens?.featured]);
 };
 exports.useFeaturedTokens = useFeaturedTokens;