@lifi/widget 2.0.0-beta.7 → 2.0.0-beta.8

package/components/SelectChainAndToken.js

@@ -4,10 +4,10 @@ import { useWatch } from 'react-hook-form';
 import { ReverseTokensButton } from '../components/ReverseTokensButton';
 import { SelectTokenButton } from '../components/SelectTokenButton';
 import { SwapFormKey, useWidgetConfig } from '../providers';
-import { DisabledUI } from '../types';
+import { DisabledUI, HiddenUI } from '../types';
 export const SelectChainAndToken = (props) => {
     const prefersNarrowView = useMediaQuery((theme) => theme.breakpoints.down('sm'));
-    const { disabledUI, variant } = useWidgetConfig();
+    const { disabledUI, hiddenUI, variant } = useWidgetConfig();
     const [fromChain, toChain, fromToken, toToken] = useWatch({
         name: [
             SwapFormKey.FromChain,
@@ -16,19 +16,20 @@ export const SelectChainAndToken = (props) => {
             SwapFormKey.ToToken,
         ],
     });
-    const disabledReverse = variant === 'refuel' ||
+    const hiddenReverse = variant === 'refuel' ||
         disabledUI?.includes(DisabledUI.FromToken) ||
-        disabledUI?.includes(DisabledUI.ToToken);
-    const nftVariant = variant === 'nft';
+        disabledUI?.includes(DisabledUI.ToToken) ||
+        hiddenUI?.includes(HiddenUI.ToToken);
+    const hiddenToToken = variant === 'nft' || hiddenUI?.includes(HiddenUI.ToToken);
     const isCompact = fromChain &&
         toChain &&
         fromToken &&
         toToken &&
         !prefersNarrowView &&
-        !nftVariant;
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [_jsx(SelectTokenButton, { formType: "from", compact: isCompact }), !nftVariant ? (_jsx(Box, { sx: {
+        !hiddenToToken;
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [_jsx(SelectTokenButton, { formType: "from", compact: isCompact }), !hiddenToToken ? (_jsx(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
-                }, m: !disabledReverse ? -1.125 : 1, children: !disabledReverse ? (_jsx(ReverseTokensButton, { vertical: !isCompact })) : null })) : null, !nftVariant ? (_jsx(SelectTokenButton, { formType: "to", compact: isCompact })) : null] }));
+                }, m: !hiddenReverse ? -1.125 : 1, children: !hiddenReverse ? (_jsx(ReverseTokensButton, { vertical: !isCompact })) : null })) : null, !hiddenToToken ? (_jsx(SelectTokenButton, { formType: "to", compact: isCompact })) : null] }));
 };

package/components/SendToWallet/SendToWallet.js

@@ -12,7 +12,7 @@ import { FormControl, Input } from './SendToWallet.style';
 export const SendToWallet = forwardRef((props, ref) => {
     const { t } = useTranslation();
     const { trigger, getValues, clearErrors } = useFormContext();
-    const { account, provider } = useWallet();
+    const { account } = useWallet();
     const { disabledUI, hiddenUI, requiredUI, toAddress } = useWidgetConfig();
     const { showSendToWallet, showSendToWalletDirty, setSendToWallet } = useSendToWalletStore();
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
@@ -30,7 +30,7 @@ export const SendToWallet = forwardRef((props, ref) => {
                     if (!value) {
                         return true;
                     }
-                    const address = await provider?.resolveName(value);
+                    const address = await account.signer?.provider?.resolveName(value);
                     return (isAddress(address || value) ||
                         t('swap.error.title.walletAddressInvalid'));
                 }

package/components/SmallAvatar.d.ts

@@ -33,4 +33,4 @@ export declare const SmallAvatarSkeletonContainer: import("@emotion/styled").Sty
 } & 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 SmallAvatarSkeleton: () => JSX.Element;
+export declare const SmallAvatarSkeleton: () => import("react/jsx-runtime").JSX.Element;

package/components/Step/CircularProgress.d.ts

@@ -1,4 +1,4 @@
 import type { Process } from '@lifi/sdk';
 export declare function CircularProgress({ process }: {
     process: Process;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/components/Step/Step.js

@@ -6,7 +6,7 @@ import { StepActions } from '../../components/StepActions';
 import { Token } from '../../components/Token';
 import { useChains } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
-import { shortenWalletAddress } from '../../utils';
+import { shortenAddress } from '../../utils';
 import { DestinationWalletAddress } from './DestinationWalletAddress';
 import { GasStepProcess } from './GasStepProcess';
 import { StepProcess } from './StepProcess';
@@ -40,7 +40,7 @@ export const Step = ({ step, fromToken, toToken, toAddress }) => {
                     : t('swap.stepSwap');
         }
     };
-    const formattedToAddress = shortenWalletAddress(toAddress);
+    const formattedToAddress = shortenAddress(toAddress);
     const toAddressLink = toAddress
         ? `${getChainById(step.action.toChainId)?.metamask.blockExplorerUrls[0]}address/${toAddress}`
         : undefined;

package/components/Step/StepList.d.ts

@@ -1,2 +1,2 @@
 import type { Route } from '@lifi/sdk';
-export declare const getStepList: (route?: Route) => JSX.Element[] | undefined;
+export declare const getStepList: (route?: Route) => import("react/jsx-runtime").JSX.Element[] | undefined;

package/components/SwapInput/SwapInputEndAdornment.d.ts

@@ -1,2 +1,2 @@
 import type { SwapFormTypeProps } from '../../providers';
-export declare const SwapInputEndAdornment: ({ formType }: SwapFormTypeProps) => JSX.Element;
+export declare const SwapInputEndAdornment: ({ formType }: SwapFormTypeProps) => import("react/jsx-runtime").JSX.Element;

package/components/SwapRoutes/SwapRoutesExpanded.d.ts

@@ -1,2 +1,2 @@
-export declare const SwapRoutesExpanded: () => JSX.Element;
-export declare const SwapRoutesExpandedElement: () => JSX.Element;
+export declare const SwapRoutesExpanded: () => import("react/jsx-runtime").JSX.Element;
+export declare const SwapRoutesExpandedElement: () => import("react/jsx-runtime").JSX.Element;

package/components/TokenList/TokenList.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { useRef } from 'react';
 import { useWatch } from 'react-hook-form';
-import { useDebouncedWatch, useTokenBalances, useTokenSearch, } from '../../hooks';
+import { useChain, useDebouncedWatch, useTokenBalances, useTokenSearch, } from '../../hooks';
 import { SwapFormKey, SwapFormKeyHelper, useWallet } from '../../providers';
 import { TokenNotFound } from './TokenNotFound';
 import { VirtualizedTokenList } from './VirtualizedTokenList';
@@ -14,6 +14,7 @@ export const TokenList = ({ formType, height, onClick, }) => {
         name: [SwapFormKeyHelper.getChainKey(formType)],
     });
     const [tokenSearchFilter] = useDebouncedWatch([SwapFormKey.TokenSearchFilter], 320);
+    const { chain, isLoading: isChainLoading } = useChain(selectedChainId);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = useTokenBalances(selectedChainId);
     let filteredTokens = (tokensWithBalance ??
         chainTokens ??
@@ -29,12 +30,14 @@ export const TokenList = ({ formType, height, onClick, }) => {
         !!tokenSearchFilter &&
         !!selectedChainId;
     const { token: searchedToken, isLoading: isSearchedTokenLoading } = 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 = useTokenSelect(formType, onClick);
-    return (_jsxs(Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens?.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
+    return (_jsxs(Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens?.length, scrollElementRef: parentRef, chainId: selectedChainId, chain: chain, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
 };

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

@@ -1,7 +1,7 @@
-import { ListItem as MuiListItem } from '@mui/material';
+import { Button, ListItem as MuiListItem, buttonClasses } from '@mui/material';
 import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
 import { listItemTextClasses } from '@mui/material/ListItemText';
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import { ListItemButton as ListItemButtonBase } from '../ListItemButton';
 export const ListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
     paddingLeft: theme.spacing(1.5),
@@ -26,3 +26,22 @@ export const ListItem = styled(MuiListItem)(({ theme }) => ({
         whiteSpace: 'nowrap',
     },
 }));
+export const LinkButton = styled(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'
+            ? alpha(theme.palette.common.black, 0.04)
+            : alpha(theme.palette.common.white, 0.08),
+    },
+    [`.${buttonClasses.endIcon}`]: {
+        marginLeft: theme.spacing(0.25),
+    },
+    [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
+        fontSize: '0.75rem',
+    },
+}));

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

@@ -1,20 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Box, ListItemAvatar, ListItemText, Skeleton, Typography, } from '@mui/material';
-import { memo } from 'react';
+import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
+import { Avatar, Box, Link, ListItemAvatar, ListItemText, Skeleton, Slide, Typography, } from '@mui/material';
+import { memo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { formatTokenPrice } from '../../utils';
-import { ListItem, ListItemButton } from './TokenList.style';
-export const TokenListItem = memo(({ onClick, size, start, token, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
+import { formatTokenPrice, shortenAddress } from '../../utils';
+import { LinkButton, ListItem, ListItemButton } from './TokenList.style';
+export const TokenListItem = memo(({ onClick, size, start, token, chain, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
     const handleClick = () => onClick?.(token.address);
     return (_jsxs(ListItem, { disablePadding: true, style: {
             height: `${size}px`,
             transform: `translateY(${start}px)`,
-        }, children: [startAdornment, _jsx(TokenListItemButton, { token: token, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] }));
+        }, children: [startAdornment, _jsx(TokenListItemButton, { token: token, chain: chain, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] }));
 });
-export const TokenListItemButton = ({ onClick, token, showBalance, isBalanceLoading, }) => {
+export const TokenListItemButton = ({ onClick, token, chain, showBalance, isBalanceLoading, }) => {
     const { t } = useTranslation();
     const tokenPrice = formatTokenPrice(token.amount, token.priceUSD);
-    return (_jsxs(ListItemButton, { onClick: onClick, dense: true, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: token.logoURI, alt: token.symbol, children: token.symbol[0] }) }), _jsx(ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (isBalanceLoading ? (_jsx(TokenAmountSkeleton, {})) : (_jsxs(Box, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? (_jsx(Typography, { variant: "body1", noWrap: true, children: t('format.number', {
+    const container = useRef(null);
+    const timeoutId = useRef();
+    const [showAddress, setShowAddress] = useState(false);
+    const onMouseEnter = () => {
+        timeoutId.current = setTimeout(() => setShowAddress(true), 350);
+    };
+    const onMouseLeave = () => {
+        clearTimeout(timeoutId.current);
+        if (showAddress) {
+            setShowAddress(false);
+        }
+    };
+    return (_jsxs(ListItemButton, { onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, dense: true, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: token.logoURI, alt: token.symbol, children: token.symbol[0] }) }), _jsx(ListItemText, { primary: token.symbol, secondaryTypographyProps: {
+                    component: 'div',
+                    sx: {
+                        overflow: 'auto',
+                        marginLeft: -0.75,
+                    },
+                }, secondary: _jsxs(Box, { position: "relative", height: 18, ref: container, children: [_jsx(Slide, { direction: "down", in: !showAddress, container: container.current, style: {
+                                position: 'absolute',
+                            }, appear: false, children: _jsx(Box, { pl: 0.75, children: token.name }) }), _jsx(Slide, { direction: "up", in: showAddress, container: container.current, style: {
+                                position: 'absolute',
+                            }, appear: false, mountOnEnter: true, children: _jsx(LinkButton, { size: "small", LinkComponent: Link, href: `${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`, target: "_blank", rel: "nofollow noreferrer", onClick: (e) => e.stopPropagation(), endIcon: _jsx(OpenInNewIcon, {}), children: shortenAddress(token.address) }) })] }) }), showBalance ? (isBalanceLoading ? (_jsx(TokenAmountSkeleton, {})) : (_jsxs(Box, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? (_jsx(Typography, { variant: "body1", noWrap: true, children: t('format.number', {
                             value: token.amount,
                         }) })) : null, tokenPrice ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD, children: t(`format.currency`, {
                             value: tokenPrice,

package/components/TokenList/VirtualizedTokenList.js

@@ -4,7 +4,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TokenListItem, TokenListItemSkeleton } from './TokenListItem';
-export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef, chainId, isLoading, isBalanceLoading, showBalance, showFeatured, onClick, }) => {
+export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef, chainId, chain, isLoading, isBalanceLoading, showBalance, showFeatured, onClick, }) => {
     const { t } = useTranslation();
     const hasFeaturedTokens = !!featuredTokensLength && showFeatured;
     const featuredTokensLastIndex = (featuredTokensLength ?? 0) - 1;
@@ -32,7 +32,7 @@ export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollEleme
             }
             return size;
         },
-        getItemKey: (index) => tokens[index].address ?? index,
+        getItemKey: (index) => `${tokens[index].address}-${index}`,
     });
     useEffect(() => {
         if (getVirtualItems().length) {
@@ -46,7 +46,7 @@ export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollEleme
     }
     return (_jsx(List, { style: { height: getTotalSize() }, disablePadding: true, children: getVirtualItems().map((item) => {
             const token = tokens[item.index];
-            return (_jsx(TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25, children: t('swap.featuredTokens') })) : null, endAdornment: hasFeaturedTokens &&
+            return (_jsx(TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, chain: chain, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25, children: t('swap.featuredTokens') })) : null, endAdornment: hasFeaturedTokens &&
                     token.featured &&
                     item.index === featuredTokensLastIndex &&
                     item.index !== tokensLastIndex ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25, children: t('swap.otherTokens') })) : null }, item.key));

package/components/TokenList/types.d.ts

@@ -1,3 +1,4 @@
+import type { ExtendedChain } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
 import type { SwapFormType } from '../../providers';
 import type { TokenAmount } from '../../types';
@@ -13,6 +14,7 @@ export interface VirtualizedTokenListProps {
     isLoading: boolean;
     isBalanceLoading: boolean;
     chainId: number;
+    chain?: ExtendedChain;
     showBalance?: boolean;
     showFeatured?: boolean;
     onClick(tokenAddress: string): void;
@@ -25,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;
@@ -33,5 +36,6 @@ export interface TokenListItemButtonProps {
     onClick?(): void;
     showBalance?: boolean;
     token: TokenAmount;
+    chain?: ExtendedChain;
     isBalanceLoading?: boolean;
 }

package/config/version.d.ts

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

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '2.0.0-beta.7';
+export const version = '2.0.0-beta.8';

package/hooks/useFundsSufficiency.js

@@ -7,8 +7,8 @@ import { useGetTokenBalancesWithRetry } from './useGetTokenBalancesWithRetry';
 import { useTokenAddressBalance } from './useTokenAddressBalance';
 const refetchInterval = 30000;
 export const useFundsSufficiency = (route) => {
-    const { account, provider } = useWallet();
-    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(provider);
+    const { account } = useWallet();
+    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
     const [fromChainId, fromTokenAddress, fromAmount] = useWatch({
         name: [
             SwapFormKey.FromChain,

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

@@ -7,12 +7,11 @@ import { useGasRecommendation } from './useGasRecommendation';
 import { useTokenBalance } from './useTokenBalance';
 export const useGasRefuel = () => {
     const { getChainById } = useChains();
-    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, toAddress] = useWatch({
+    const [fromChainId, fromTokenAddress, toChainId, toAddress] = useWatch({
         name: [
             SwapFormKey.FromChain,
             SwapFormKey.FromToken,
             SwapFormKey.ToChain,
-            SwapFormKey.ToToken,
             SwapFormKey.ToAddress,
         ],
     });
@@ -24,10 +23,7 @@ export 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;
         }
@@ -38,20 +34,14 @@ export 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,
     };
 };

package/hooks/useGasSufficiency.js

@@ -4,9 +4,9 @@ import { useChains, useGetTokenBalancesWithRetry } from '.';
 import { useWallet } from '../providers';
 const refetchInterval = 30000;
 export const useGasSufficiency = (route) => {
-    const { account, provider } = useWallet();
+    const { account } = useWallet();
     const { getChainById } = useChains();
-    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(provider);
+    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
     const { data: insufficientGas, isInitialLoading } = useQuery(['gas-sufficiency-check', account.address, route?.id], async () => {
         if (!account.address || !route) {
             return;

package/hooks/useRouteExecution.js

@@ -14,7 +14,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
     const routeExecutionStoreContext = useRouteExecutionStoreContext();
     const routeExecution = useRouteExecutionStore((state) => state.routes[routeId]);
     const [updateRoute, restartRoute, deleteRoute] = useRouteExecutionStore((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow);
-    const updateCallback = (updatedRoute) => {
+    const updateRouteHook = (updatedRoute) => {
         const routeExecution = routeExecutionStoreContext.getState().routes[updatedRoute.id];
         if (!routeExecution) {
             return;
@@ -68,7 +68,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
         }
         queryClient.removeQueries(['routes'], { exact: false });
         return lifi.executeRoute(account.signer, routeExecution.route, {
-            updateCallback,
+            updateRouteHook,
             switchChainHook,
             acceptExchangeRateUpdateHook,
             infiniteApproval: false,
@@ -90,7 +90,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
             throw Error('Execution route not found.');
         }
         return lifi.resumeRoute(account.signer, resumedRoute ?? routeExecution.route, {
-            updateCallback,
+            updateRouteHook,
             switchChainHook,
             acceptExchangeRateUpdateHook,
             infiniteApproval: false,

package/hooks/useSwapRoutes.js

@@ -12,7 +12,7 @@ const refetchTime = 60000;
 export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
     const lifi = useLiFi();
     const { variant, sdkConfig, insurance, contractTool } = useWidgetConfig();
-    const { account, provider } = useWallet();
+    const { account } = useWallet();
     const queryClient = useQueryClient();
     const swapOnly = useSwapOnly();
     const { slippage, enabledBridges, enabledAutoRefuel, enabledExchanges, routePriority, } = useSettings([
@@ -38,7 +38,7 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
     });
     const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
     const { token: toToken } = useToken(toChainId, toTokenAddress);
-    const { enabled: enabledRefuel, gasRecommendation } = useGasRefuel();
+    const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } = useGasRefuel();
     const hasAmount = (!isNaN(fromTokenAmount) && Number(fromTokenAmount) > 0) ||
         (!isNaN(toTokenAmount) && Number(toTokenAmount) > 0);
     const contractCallQuoteEnabled = variant === 'nft'
@@ -71,7 +71,7 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
         variant,
         sdkConfig?.defaultRouteOptions?.allowSwitchChain,
         enabledRefuel && enabledAutoRefuel,
-        gasRecommendation?.fromAmount,
+        gasRecommendationFromAmount,
         insurance,
         insurableRoute?.id,
     ];
@@ -79,7 +79,7 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
         let toWalletAddress;
         try {
             toWalletAddress =
-                (await provider?.resolveName(toAddress)) ??
+                (await account.signer?.provider?.resolveName(toAddress)) ??
                     (isAddress(toAddress) ? toAddress : fromAddress);
         }
         catch {

package/hooks/useTokenBalance.js

@@ -5,10 +5,10 @@ import { formatTokenAmount } from '../utils';
 import { useGetTokenBalancesWithRetry } from './useGetTokenBalancesWithRetry';
 const defaultRefetchInterval = 30000;
 export const useTokenBalance = (token, accountAddress) => {
-    const { account, provider } = useWallet();
+    const { account } = useWallet();
     const queryClient = useQueryClient();
     const walletAddress = accountAddress || account.address;
-    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(provider);
+    const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
     const tokenBalanceQueryKey = useMemo(() => ['token-balance', walletAddress, token?.chainId, token?.address], [token?.address, token?.chainId, walletAddress]);
     const { data, isLoading, refetch } = useQuery(tokenBalanceQueryKey, async ({ queryKey: [, accountAddress] }) => {
         const cachedToken = queryClient

package/i18n/en.json

@@ -217,7 +217,7 @@
     "to": "To",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
     "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}}",
-    "tokenSearch": "Search your token",
+    "tokenSearch": "Search by token name or address",
     "valueLoss": "Value loss",
     "walletAddressOrEns": "Wallet address or ENS name",
     "warning": {

package/icons/InsuraceLogo.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const InsuraceLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const InsuraceLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/icons/LiFiFullLogo.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const LiFiFullLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const LiFiFullLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/icons/LiFiLogo.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const LiFiLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const LiFiLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/icons/LiFiToolLogo.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const LiFiToolLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const LiFiToolLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.8",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -37,17 +37,17 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.10.8",
-    "@emotion/styled": "^11.10.8",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^2.0.0-beta.11",
-    "@lifi/wallet-management": "^2.0.0-beta.5",
+    "@lifi/sdk": "^2.0.0-beta.12",
+    "@lifi/wallet-management": "^2.0.0-beta.6",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.129",
-    "@mui/material": "^5.12.3",
+    "@mui/material": "^5.13.0",
     "@tanstack/react-query": "^4.29.5",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",

package/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

@@ -1 +1 @@
-export declare const ActiveSwapsPage: () => JSX.Element;
+export declare const ActiveSwapsPage: () => import("react/jsx-runtime").JSX.Element;

package/pages/SelectTokenPage/SearchTokenInput.d.ts

@@ -1 +1 @@
-export declare const SearchTokenInput: () => JSX.Element;
+export declare const SearchTokenInput: () => import("react/jsx-runtime").JSX.Element;

package/pages/SelectWalletPage/SelectWalletPage.d.ts

@@ -1 +1 @@
-export declare const SelectWalletPage: () => JSX.Element;
+export declare const SelectWalletPage: () => import("react/jsx-runtime").JSX.Element;

package/pages/SettingsPage/GasPriceSelect.d.ts

@@ -1 +1 @@
-export declare const GasPriceSelect: () => JSX.Element;
+export declare const GasPriceSelect: () => import("react/jsx-runtime").JSX.Element;

package/pages/SettingsPage/SettingsPage.d.ts

@@ -1 +1 @@
-export declare const SettingsPage: () => JSX.Element;
+export declare const SettingsPage: () => import("react/jsx-runtime").JSX.Element;

package/pages/SettingsPage/ShowDestinationWallet.d.ts

@@ -1 +1 @@
-export declare const ShowDestinationWallet: () => JSX.Element | null;
+export declare const ShowDestinationWallet: () => import("react/jsx-runtime").JSX.Element | null;

package/pages/SettingsPage/SlippageInput.d.ts

@@ -1 +1 @@
-export declare const SlippageInput: () => JSX.Element;
+export declare const SlippageInput: () => import("react/jsx-runtime").JSX.Element;

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -56,5 +56,5 @@ export const SwapDetailsPage = () => {
                         }).format(startedAt) })] }), getStepList(routeExecution?.route), variant === 'nft' ? _jsx(ContractComponent, { mt: 2 }) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? (_jsx(Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, _jsxs(Card, { mt: 2, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             flex: 1,
-                        }, children: [_jsx(CardTitle, { flex: 1, children: t('swap.supportId') }), _jsx(Box, { mr: 1, mt: 1, children: _jsx(IconButton, { size: "medium", onClick: copySupportId, children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }), _jsx(Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), _jsx(Box, { mt: 2, children: _jsx(Button, { href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwap') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
+                        }, children: [_jsx(CardTitle, { flex: 1, children: t('swap.supportId') }), _jsx(Box, { mr: 1, mt: 1, children: _jsx(IconButton, { size: "medium", onClick: copySupportId, children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }), _jsx(Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), _jsx(Box, { mt: 2, children: _jsx(Button, { href: "https://discord.gg/lifi", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwap') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
 };