@lifi/widget 2.0.0-beta.1 → 2.0.0-beta.11

package/cjs/components/SwapRoutes/SwapRoutesExpanded.js

@@ -23,7 +23,7 @@ const SwapRoutesExpandedElement = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
-    const { containerStyle } = (0, providers_1.useWidgetConfig)();
+    const { variant, 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?.[0];
@@ -37,6 +37,6 @@ const SwapRoutesExpandedElement = () => {
     };
     const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched);
     const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(SwapRoutesExpanded_style_1.Container, { sx: containerStyle, enableColorScheme: true, children: (0, jsx_runtime_1.jsxs)(SwapRoutesExpanded_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(SwapRoutesExpanded_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: "700", flex: 1, noWrap: true, children: t('swap.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_1.Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(SwapRoutesExpanded_style_1.Container, { sx: containerStyle, enableColorScheme: true, children: (0, jsx_runtime_1.jsxs)(SwapRoutesExpanded_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(SwapRoutesExpanded_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: "700", flex: 1, noWrap: true, children: variant === 'nft' ? t('swap.fromAmount') : t('header.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
 };
 exports.SwapRoutesExpandedElement = SwapRoutesExpandedElement;

package/cjs/components/SwapRoutes/SwapRoutesExpanded.style.js

@@ -11,6 +11,7 @@ exports.CollapseContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) =>
 exports.ScrollableContainer = (0, styles_1.styled)(material_1.Box)({
     overflowY: 'auto',
     height: '100%',
+    width: '100%',
     flex: 1,
     display: 'flex',
     flexDirection: 'column',

package/cjs/components/Token/Token.js

@@ -17,7 +17,7 @@ const Token = ({ token, ...other }) => {
     return (0, jsx_runtime_1.jsx)(exports.TokenBase, { token: token, ...other });
 };
 exports.Token = Token;
-const TokenFallback = ({ token, connected, step, disableDescription, isLoading, ...other }) => {
+const TokenFallback = ({ token, 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 }));
 };

package/cjs/components/TokenAvatar/TokenAvatar.d.ts

@@ -1,19 +1,19 @@
 /// <reference types="react" />
-import type { Chain, Token } from '@lifi/sdk';
+import type { Chain, StaticToken } from '@lifi/sdk';
 import type { SxProps, Theme } from '@mui/material';
 export declare const TokenAvatarFallback: React.FC<{
-    token?: Token;
+    token?: StaticToken;
     isLoading?: boolean;
     sx?: SxProps<Theme>;
 }>;
 export declare const TokenAvatarBase: React.FC<{
-    token?: Token;
+    token?: StaticToken;
     chain?: Chain;
     isLoading?: boolean;
     sx?: SxProps<Theme>;
 }>;
 export declare const TokenAvatar: React.FC<{
-    token?: Token;
+    token?: StaticToken;
     chain?: Chain;
     isLoading?: boolean;
     sx?: SxProps<Theme>;

package/cjs/components/TokenList/TokenList.js

@@ -8,8 +8,8 @@ const react_hook_form_1 = require("react-hook-form");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const TokenNotFound_1 = require("./TokenNotFound");
-const useTokenSelect_1 = require("./useTokenSelect");
 const VirtualizedTokenList_1 = require("./VirtualizedTokenList");
+const useTokenSelect_1 = require("./useTokenSelect");
 const TokenList = ({ formType, height, onClick, }) => {
     const parentRef = (0, react_1.useRef)(null);
     const { account } = (0, providers_1.useWallet)();
@@ -17,8 +17,11 @@ const TokenList = ({ formType, height, onClick, }) => {
         name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
     });
     const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.SwapFormKey.TokenSearchFilter], 320);
+    const { chain, isLoading: isChainLoading } = (0, hooks_1.useChain)(selectedChainId);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = (0, hooks_1.useTokenBalances)(selectedChainId);
-    let filteredTokens = (tokensWithBalance ?? chainTokens ?? []);
+    let filteredTokens = (tokensWithBalance ??
+        chainTokens ??
+        []);
     const searchFilter = tokenSearchFilter?.toUpperCase() ?? '';
     filteredTokens = tokenSearchFilter
         ? filteredTokens.filter((token) => token.name.toUpperCase().includes(searchFilter) ||
@@ -30,13 +33,15 @@ const TokenList = ({ formType, height, onClick, }) => {
         !!tokenSearchFilter &&
         !!selectedChainId;
     const { token: searchedToken, isLoading: isSearchedTokenLoading } = (0, hooks_1.useTokenSearch)(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
-    const isLoading = isTokensLoading || (tokenSearchEnabled && isSearchedTokenLoading);
+    const isLoading = isTokensLoading ||
+        isChainLoading ||
+        (tokenSearchEnabled && isSearchedTokenLoading);
     const tokens = filteredTokens.length
         ? filteredTokens
         : searchedToken
             ? [searchedToken]
             : filteredTokens;
     const handleTokenClick = (0, useTokenSelect_1.useTokenSelect)(formType, onClick);
-    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 })] }));
+    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, chain: chain, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
 };
 exports.TokenList = TokenList;

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+import type { StyledComponent } from '@emotion/styled';
+import type { ButtonProps, LinkProps } from '@mui/material';
+export declare const ListItemButton: StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
     children?: import("react").ReactNode;
@@ -18,7 +20,7 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
 }, "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" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const ListItem: import("@emotion/styled").StyledComponent<{
+export declare const ListItem: StyledComponent<{
     button?: false | undefined;
 } & import("@mui/material").ListItemBaseProps & {
     components?: {
@@ -36,3 +38,4 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
 } & 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" | "autoFocus" | "children" | "disabled" | "sx" | "alignItems" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const LinkButton: StyledComponent<ButtonProps & LinkProps>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListItem = exports.ListItemButton = void 0;
+exports.LinkButton = exports.ListItem = exports.ListItemButton = void 0;
 const material_1 = require("@mui/material");
 const ListItemSecondaryAction_1 = require("@mui/material/ListItemSecondaryAction");
 const ListItemText_1 = require("@mui/material/ListItemText");
@@ -29,3 +29,22 @@ exports.ListItem = (0, styles_1.styled)(material_1.ListItem)(({ theme }) => ({
         whiteSpace: 'nowrap',
     },
 }));
+exports.LinkButton = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
+    lineHeight: 1,
+    fontSize: '0.75rem',
+    fontWeight: 400,
+    padding: theme.spacing(0.375, 0.75),
+    color: 'inherit',
+    backgroundColor: 'unset',
+    '&:hover': {
+        backgroundColor: theme.palette.mode === 'light'
+            ? (0, styles_1.alpha)(theme.palette.common.black, 0.04)
+            : (0, styles_1.alpha)(theme.palette.common.white, 0.08),
+    },
+    [`.${material_1.buttonClasses.endIcon}`]: {
+        marginLeft: theme.spacing(0.25),
+    },
+    [`.${material_1.buttonClasses.endIcon} > *:nth-of-type(1)`]: {
+        fontSize: '0.75rem',
+    },
+}));

package/cjs/components/TokenList/TokenListItem.d.ts

@@ -2,5 +2,5 @@
 import type { TokenListItemButtonProps, TokenListItemProps } from './types';
 export declare const TokenListItem: React.FC<TokenListItemProps>;
 export declare const TokenListItemButton: React.FC<TokenListItemButtonProps>;
-export declare const TokenListItemSkeleton: () => JSX.Element;
+export declare const TokenListItemSkeleton: () => import("react/jsx-runtime").JSX.Element;
 export declare const TokenAmountSkeleton: React.FC;

package/cjs/components/TokenList/TokenListItem.js

@@ -2,23 +2,46 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TokenAmountSkeleton = exports.TokenListItemSkeleton = exports.TokenListItemButton = exports.TokenListItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const OpenInNewRounded_1 = require("@mui/icons-material/OpenInNewRounded");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 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, }) => {
+exports.TokenListItem = (0, react_1.memo)(({ onClick, size, start, token, chain, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
     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, chain: chain, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] }));
 });
-const TokenListItemButton = ({ onClick, token, showBalance, isBalanceLoading, }) => {
+const TokenListItemButton = ({ onClick, token, chain, 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, { onClick: onClick, dense: 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,
+    const container = (0, react_1.useRef)(null);
+    const timeoutId = (0, react_1.useRef)();
+    const [showAddress, setShowAddress] = (0, react_1.useState)(false);
+    const onMouseEnter = () => {
+        timeoutId.current = setTimeout(() => setShowAddress(true), 350);
+    };
+    const onMouseLeave = () => {
+        clearTimeout(timeoutId.current);
+        if (showAddress) {
+            setShowAddress(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItemButton, { onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, dense: 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, secondaryTypographyProps: {
+                    component: 'div',
+                    sx: {
+                        overflow: 'auto',
+                        marginLeft: -0.75,
+                    },
+                }, secondary: (0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", height: 18, ref: container, children: [(0, jsx_runtime_1.jsx)(material_1.Slide, { direction: "down", in: !showAddress, container: container.current, style: {
+                                position: 'absolute',
+                            }, appear: false, children: (0, jsx_runtime_1.jsx)(material_1.Box, { pl: 0.75, children: token.name }) }), (0, jsx_runtime_1.jsx)(material_1.Slide, { direction: "up", in: showAddress, container: container.current, style: {
+                                position: 'absolute',
+                            }, appear: false, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(TokenList_style_1.LinkButton, { size: "small", LinkComponent: material_1.Link, href: `${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`, target: "_blank", rel: "nofollow noreferrer", onClick: (e) => e.stopPropagation(), endIcon: (0, jsx_runtime_1.jsx)(OpenInNewRounded_1.default, {}), children: (0, utils_1.shortenAddress)(token.address) }) })] }) }), 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: (0, utils_1.formatTokenAmount)(token.amount),
                         }) })) : 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] }));

package/cjs/components/TokenList/VirtualizedTokenList.js

@@ -7,7 +7,7 @@ const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const TokenListItem_1 = require("./TokenListItem");
-const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef, chainId, isLoading, isBalanceLoading, showBalance, showFeatured, onClick, }) => {
+const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef, chainId, chain, isLoading, isBalanceLoading, showBalance, showFeatured, onClick, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const hasFeaturedTokens = !!featuredTokensLength && showFeatured;
     const featuredTokensLastIndex = (featuredTokensLength ?? 0) - 1;
@@ -35,7 +35,7 @@ const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef,
             }
             return size;
         },
-        getItemKey: (index) => tokens[index].address ?? index,
+        getItemKey: (index) => `${tokens[index].address}-${index}`,
     });
     (0, react_1.useEffect)(() => {
         if (getVirtualItems().length) {
@@ -49,7 +49,7 @@ const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef,
     }
     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, { 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, chain: chain, 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, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25, children: t('swap.otherTokens') })) : null }, item.key));

package/cjs/components/TokenList/types.d.ts

@@ -1,19 +1,20 @@
-import type { TokenAmount } from '@lifi/sdk';
+import type { ExtendedChain } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
 import type { SwapFormType } from '../../providers';
-import type { Token } from '../../types';
+import type { TokenAmount } from '../../types';
 export interface TokenListProps {
     formType: SwapFormType;
     height: number;
     onClick?(): void;
 }
 export interface VirtualizedTokenListProps {
-    tokens: Token[];
+    tokens: TokenAmount[];
     featuredTokensLength?: number;
     scrollElementRef: MutableRefObject<HTMLElement | null>;
     isLoading: boolean;
     isBalanceLoading: boolean;
     chainId: number;
+    chain?: ExtendedChain;
     showBalance?: boolean;
     showFeatured?: boolean;
     onClick(tokenAddress: string): void;
@@ -26,6 +27,7 @@ export interface TokenListItemBaseProps {
 export interface TokenListItemProps extends TokenListItemBaseProps {
     showBalance?: boolean;
     token: TokenAmount;
+    chain?: ExtendedChain;
     isBalanceLoading?: boolean;
     startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode;
@@ -34,5 +36,6 @@ export interface TokenListItemButtonProps {
     onClick?(): void;
     showBalance?: boolean;
     token: TokenAmount;
+    chain?: ExtendedChain;
     isBalanceLoading?: boolean;
 }

package/cjs/config/theme.js

@@ -3,10 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = void 0;
 const LoadingButton_1 = require("@mui/lab/LoadingButton");
 const ButtonBase_1 = require("@mui/material/ButtonBase");
-const colors_1 = require("@mui/material/colors");
 const DialogActions_1 = require("@mui/material/DialogActions");
+const colors_1 = require("@mui/material/colors");
 const styles_1 = require("@mui/material/styles");
-const system_1 = require("@mui/system");
 const palette = {
     primary: {
         main: '#3F49E1',
@@ -46,7 +45,7 @@ const shape = {
     borderRadius: 12,
     borderRadiusSecondary: 8,
 };
-const enterKeyframe = (0, system_1.keyframes) `
+const enterKeyframe = (0, styles_1.keyframes) `
   0% {
     transform: scale(0);
     opacity: 0.05;
@@ -226,6 +225,19 @@ const createTheme = (mode, theme = {}) => {
                     }),
                 },
             },
+            MuiTooltip: {
+                styleOverrides: {
+                    tooltip: ({ theme }) => ({
+                        backgroundColor: 'rgb(0 0 0 / 64%)',
+                        backdropFilter: 'blur(3px)',
+                        fontSize: '0.75rem',
+                        padding: theme.spacing(1, 1.5),
+                    }),
+                    arrow: {
+                        color: 'rgb(0 0 0 / 64%)',
+                    },
+                },
+            },
         },
     });
 };

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-beta.1";
+export declare const version = "2.0.0-beta.11";

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 = '2.0.0-beta.1';
+exports.version = '2.0.0-beta.11';

package/cjs/hooks/index.d.ts

@@ -15,12 +15,13 @@ export * from './useNavigateBack';
 export * from './useProcessMessage';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
+export * from './useSwapOnly';
 export * from './useSwapRoutes';
 export * from './useToken';
 export * from './useTokenAddressBalance';
 export * from './useTokenBalance';
 export * from './useTokenBalances';
-export * from './useTokens';
 export * from './useTokenSearch';
+export * from './useTokens';
 export * from './useTools';
 export * from './useWidgetEvents';

package/cjs/hooks/index.js

@@ -31,12 +31,13 @@ __exportStar(require("./useNavigateBack"), exports);
 __exportStar(require("./useProcessMessage"), exports);
 __exportStar(require("./useRouteExecution"), exports);
 __exportStar(require("./useScrollableContainer"), exports);
+__exportStar(require("./useSwapOnly"), exports);
 __exportStar(require("./useSwapRoutes"), exports);
 __exportStar(require("./useToken"), exports);
 __exportStar(require("./useTokenAddressBalance"), exports);
 __exportStar(require("./useTokenBalance"), exports);
 __exportStar(require("./useTokenBalances"), exports);
-__exportStar(require("./useTokens"), exports);
 __exportStar(require("./useTokenSearch"), exports);
+__exportStar(require("./useTokens"), exports);
 __exportStar(require("./useTools"), exports);
 __exportStar(require("./useWidgetEvents"), exports);

package/cjs/hooks/useContentHeight.js

@@ -6,8 +6,8 @@ const utils_1 = require("../utils");
 const useDefaultElementId_1 = require("./useDefaultElementId");
 const useScrollableContainer_1 = require("./useScrollableContainer");
 const getContentHeight = (elementId) => {
-    const headerElement = document.getElementById((0, utils_1.createElementId)(utils_1.ElementId.Header, elementId));
     const containerElement = document.getElementById((0, utils_1.createElementId)(utils_1.ElementId.ScrollableContainer, elementId));
+    const headerElement = document.getElementById((0, utils_1.createElementId)(utils_1.ElementId.Header, elementId));
     if (!containerElement || !headerElement) {
         console.warn(`Can't find ${utils_1.ElementId.ScrollableContainer} or ${utils_1.ElementId.Header} id.`);
         return 0;
@@ -18,11 +18,9 @@ const getContentHeight = (elementId) => {
 };
 const useContentHeight = () => {
     const elementId = (0, useDefaultElementId_1.useDefaultElementId)();
-    const [contentHeight, setContentHeight] = (0, react_1.useState)(() => getContentHeight(elementId));
+    const [contentHeight, setContentHeight] = (0, react_1.useState)(0);
     (0, react_1.useLayoutEffect)(() => {
-        if (!contentHeight) {
-            setContentHeight(getContentHeight(elementId));
-        }
+        setContentHeight(getContentHeight(elementId));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return contentHeight;

package/cjs/hooks/useFeaturedTokens.d.ts

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

package/cjs/hooks/useFundsSufficiency.js

@@ -10,8 +10,8 @@ const useGetTokenBalancesWithRetry_1 = require("./useGetTokenBalancesWithRetry")
 const useTokenAddressBalance_1 = require("./useTokenAddressBalance");
 const refetchInterval = 30000;
 const useFundsSufficiency = (route) => {
-    const { account, provider } = (0, providers_1.useWallet)();
-    const getTokenBalancesWithRetry = (0, useGetTokenBalancesWithRetry_1.useGetTokenBalancesWithRetry)(provider);
+    const { account } = (0, providers_1.useWallet)();
+    const getTokenBalancesWithRetry = (0, useGetTokenBalancesWithRetry_1.useGetTokenBalancesWithRetry)(account.signer?.provider);
     const [fromChainId, fromTokenAddress, fromAmount] = (0, react_hook_form_1.useWatch)({
         name: [
             providers_1.SwapFormKey.FromChain,

package/cjs/hooks/useGasRefuel.d.ts

@@ -3,5 +3,5 @@ export declare const useGasRefuel: () => {
     availble: boolean | undefined;
     isLoading: boolean;
     chain: import("@lifi/types").ExtendedChain | undefined;
-    gasRecommendation: import("@lifi/types").GasRecommendationResponse | undefined;
+    fromAmount: string | undefined;
 };

package/cjs/hooks/useGasRefuel.js

@@ -10,12 +10,11 @@ const useGasRecommendation_1 = require("./useGasRecommendation");
 const useTokenBalance_1 = require("./useTokenBalance");
 const useGasRefuel = () => {
     const { getChainById } = (0, _1.useChains)();
-    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, toAddress] = (0, react_hook_form_1.useWatch)({
+    const [fromChainId, fromTokenAddress, toChainId, toAddress] = (0, react_hook_form_1.useWatch)({
         name: [
             providers_1.SwapFormKey.FromChain,
             providers_1.SwapFormKey.FromToken,
             providers_1.SwapFormKey.ToChain,
-            providers_1.SwapFormKey.ToToken,
             providers_1.SwapFormKey.ToAddress,
         ],
     });
@@ -27,10 +26,7 @@ const useGasRefuel = () => {
         // We don't allow same chain refuel.
         // If a user runs out of gas, he can't send a source chain transaction.
         fromChainId === toChainId ||
-            // We don't want to apply auto refuel when swapping to native tokens
-            toChain?.nativeToken.address === toTokenAddress ||
             !gasRecommendation?.available ||
-            !gasRecommendation.recommended ||
             !nativeToken) {
             return false;
         }
@@ -41,21 +37,15 @@ const useGasRefuel = () => {
             .div(2);
         const insufficientGas = tokenBalance.lt(recommendedAmount);
         return insufficientGas;
-    }, [
-        fromChainId,
-        gasRecommendation?.available,
-        gasRecommendation?.recommended,
-        nativeToken,
-        toChain?.nativeToken.address,
-        toChainId,
-        toTokenAddress,
-    ]);
+    }, [fromChainId, gasRecommendation, nativeToken, toChainId]);
     return {
         enabled: enabled,
         availble: gasRecommendation?.available,
         isLoading: isLoading,
         chain: toChain,
-        gasRecommendation,
+        fromAmount: gasRecommendation?.available
+            ? gasRecommendation.fromAmount
+            : undefined,
     };
 };
 exports.useGasRefuel = useGasRefuel;

package/cjs/hooks/useGasSufficiency.js

@@ -5,15 +5,23 @@ const react_query_1 = require("@tanstack/react-query");
 const big_js_1 = require("big.js");
 const _1 = require(".");
 const providers_1 = require("../providers");
+const stores_1 = require("../stores");
 const refetchInterval = 30000;
 const useGasSufficiency = (route) => {
-    const { account, provider } = (0, providers_1.useWallet)();
+    const { account } = (0, providers_1.useWallet)();
     const { getChainById } = (0, _1.useChains)();
-    const getTokenBalancesWithRetry = (0, _1.useGetTokenBalancesWithRetry)(provider);
+    const getTokenBalancesWithRetry = (0, _1.useGetTokenBalancesWithRetry)(account.signer?.provider);
+    const { enabledAutoRefuel } = (0, stores_1.useSettings)(['enabledAutoRefuel']);
+    const { enabled, isLoading: isRefuelLoading } = (0, _1.useGasRefuel)();
+    const enabledRefuel = enabled && enabledAutoRefuel;
     const { data: insufficientGas, isInitialLoading } = (0, react_query_1.useQuery)(['gas-sufficiency-check', account.address, route?.id], async () => {
         if (!account.address || !route) {
             return;
         }
+        // TODO: include LI.Fuel into calculation once steps and tools are properly typed
+        // const refuelSteps = route.steps
+        //   .flatMap((step) => step.includedSteps)
+        //   .filter((includedStep) => includedStep.tool === 'lifuelProtocol');
         const gasCosts = route.steps
             .filter((step) => !step.execution || step.execution.status !== 'DONE')
             .reduce((groupedGasCosts, step) => {
@@ -69,8 +77,9 @@ const useGasSufficiency = (route) => {
         staleTime: refetchInterval,
         cacheTime: refetchInterval,
     });
+    const isInsufficientGas = Boolean(insufficientGas?.length) && !isRefuelLoading && !enabledRefuel;
     return {
-        insufficientGas,
+        insufficientGas: isInsufficientGas ? insufficientGas : undefined,
         isInitialLoading,
     };
 };

package/cjs/hooks/useInitializer.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInitializer = void 0;
-/* eslint-disable no-underscore-dangle */
 const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
 const version_1 = require("../config/version");

package/cjs/hooks/useProcessMessage.d.ts

@@ -1,10 +1,11 @@
 import type { EVMChain, LifiStep, Process } from '@lifi/sdk';
 import type { TFunction } from 'i18next';
+import type { WidgetVariant } from '../types';
 export declare const useProcessMessage: (step?: LifiStep, process?: Process) => {
     title?: string | undefined;
     message?: string | undefined;
 };
-export declare function getProcessMessage(t: TFunction, getChainById: (chainId: number) => EVMChain | undefined, step: LifiStep, process: Process): {
+export declare function getProcessMessage(t: TFunction, getChainById: (chainId: number) => EVMChain | undefined, step: LifiStep, process: Process, variant?: WidgetVariant): {
     title?: string;
     message?: string;
 };