@lifi/widget 1.27.1 → 1.28.0

package/components/Token/Token.d.ts

@@ -2,7 +2,7 @@
 import type { Step, TokenAmount } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 interface TokenProps {
-    token: TokenAmount;
+    token?: TokenAmount;
     connected?: boolean;
     step?: Step;
     disableDescription?: boolean;

package/components/Token/Token.js

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

package/components/TokenAvatar/TokenAvatar.d.ts

@@ -2,18 +2,20 @@
 import type { Chain, Token } from '@lifi/sdk';
 import type { SxProps, Theme } from '@mui/material';
 export declare const TokenAvatarFallback: React.FC<{
-    token: Token;
+    token?: Token;
+    isLoading?: boolean;
     sx?: SxProps<Theme>;
 }>;
 export declare const TokenAvatarBase: React.FC<{
-    token: Token;
+    token?: Token;
     chain?: Chain;
     isLoading?: boolean;
     sx?: SxProps<Theme>;
 }>;
 export declare const TokenAvatar: React.FC<{
-    token: Token;
+    token?: Token;
     chain?: Chain;
+    isLoading?: boolean;
     sx?: SxProps<Theme>;
 }>;
 export declare const TokenAvatarDefault: React.FC<{

package/components/TokenAvatar/TokenAvatar.js

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

package/components/TokenList/TokenList.style.js

@@ -1,5 +1,6 @@
 import { ListItem as MuiListItem, ListItemButton as MuiListItemButton, } from '@mui/material';
 import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
+import { listItemTextClasses } from '@mui/material/ListItemText';
 import { styled } from '@mui/material/styles';
 import { getContrastAlphaColor } from '../../utils';
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
@@ -23,4 +24,9 @@ export const ListItem = styled(MuiListItem)(({ theme }) => ({
     [`.${listItemSecondaryActionClasses.root}`]: {
         right: theme.spacing(3),
     },
+    [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+    },
 }));

package/components/TokenList/VirtualizedTokenList.js

@@ -36,8 +36,10 @@ export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollEleme
         getItemKey: (index) => { var _a; return (_a = tokens[index].address) !== null && _a !== void 0 ? _a : index; },
     });
     useEffect(() => {
-        scrollToIndex(0, { align: 'start' });
-    }, [scrollToIndex, chainId]);
+        if (getVirtualItems().length) {
+            scrollToIndex(0, { align: 'start' });
+        }
+    }, [scrollToIndex, chainId, getVirtualItems]);
     if (isLoading) {
         return (_jsx(List, Object.assign({ disablePadding: true }, { children: Array.from({ length: 3 }).map((_, index) => (
             // eslint-disable-next-line react/no-array-index-key

package/config/theme.js

@@ -42,7 +42,7 @@ const shape = {
     borderRadiusSecondary: 6,
 };
 export 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;
+    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 = 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 = 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);
@@ -147,14 +147,12 @@ export const createTheme = (mode, theme = {}) => {
                     },
                 },
             },
-            MuiAvatar: {
-                styleOverrides: {
+            MuiAvatar: Object.assign({ styleOverrides: {
                     root: {
                         height: 32,
                         width: 32,
                     },
-                },
-            },
+                } }, (_w = theme.components) === null || _w === void 0 ? void 0 : _w.MuiAvatar),
             MuiListItemAvatar: {
                 styleOverrides: {
                     root: {

package/config/version.d.ts

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

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.27.1';
+export const version = '1.28.0';

package/hooks/useSwapRoutes.d.ts

@@ -1,9 +1,12 @@
+import type { Route } from '@lifi/sdk';
 export declare const useSwapRoutes: () => {
-    routes: import("@lifi/sdk").Route[] | undefined;
+    routes: Route[] | undefined;
     isLoading: boolean;
     isFetching: boolean;
     isFetched: boolean;
     dataUpdatedAt: number;
     refetchTime: number;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/sdk").RoutesResponse, any>>;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/sdk").RoutesResponse | {
+        routes: Route[];
+    }, any>>;
 };

package/hooks/useSwapRoutes.js

@@ -12,6 +12,7 @@ import { LifiErrorCode } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import Big from 'big.js';
 import { useWatch } from 'react-hook-form';
+import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedWatch, useToken } from '.';
 import { SwapFormKey, useLiFi, useWallet, useWidgetConfig } from '../providers';
 import { useSettings } from '../stores';
@@ -28,36 +29,47 @@ export const useSwapRoutes = () => {
         'enabledBridges',
         'enabledExchanges',
     ]);
-    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, toAddress] = useWatch({
+    const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 320);
+    const [fromChainId, fromTokenAddress, toAddress, toTokenAmount, toChainId, toContractAddress, toContractCallData, toContractGasLimit, toTokenAddress,] = useWatch({
         name: [
             SwapFormKey.FromChain,
             SwapFormKey.FromToken,
+            SwapFormKey.ToAddress,
+            SwapFormKey.ToAmount,
             SwapFormKey.ToChain,
+            SwapFormKey.ToContractAddress,
+            SwapFormKey.ToContractCallData,
+            SwapFormKey.ToContractGasLimit,
             SwapFormKey.ToToken,
-            SwapFormKey.ToAddress,
         ],
     });
-    const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 320);
     const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
     const { token: toToken } = useToken(toChainId, toTokenAddress);
-    const isEnabled = 
-    // Boolean(account.address) &&
-    !isNaN(fromChainId) &&
+    const hasAmount = (!isNaN(fromTokenAmount) && Number(fromTokenAmount) > 0) ||
+        (!isNaN(toTokenAmount) && Number(toTokenAmount) > 0);
+    const contractCallQuoteEnabled = variant === 'nft'
+        ? Boolean(toContractAddress && toContractCallData && toContractGasLimit)
+        : true;
+    const isEnabled = !isNaN(fromChainId) &&
         !isNaN(toChainId) &&
         Boolean(fromToken === null || fromToken === void 0 ? void 0 : fromToken.address) &&
         Boolean(toToken === null || toToken === void 0 ? void 0 : toToken.address) &&
-        !isNaN(fromTokenAmount) &&
-        Number(fromTokenAmount) > 0 &&
-        !Number.isNaN(slippage);
+        !Number.isNaN(slippage) &&
+        hasAmount &&
+        contractCallQuoteEnabled;
     const queryKey = [
         'routes',
         account.address,
         fromChainId,
         fromToken === null || fromToken === void 0 ? void 0 : fromToken.address,
         fromTokenAmount,
+        toAddress,
         toChainId,
         toToken === null || toToken === void 0 ? void 0 : toToken.address,
-        toAddress,
+        toTokenAmount,
+        toContractAddress,
+        toContractCallData,
+        toContractGasLimit,
         slippage,
         enabledBridges,
         enabledExchanges,
@@ -69,20 +81,58 @@ export const useSwapRoutes = () => {
     const refetchInterval = previousDataUpdatedAt
         ? Math.min(Math.abs(refetchTime - (Date.now() - previousDataUpdatedAt)), refetchTime)
         : refetchTime;
-    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = useQuery(queryKey, ({ queryKey: [_, fromAddress, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, toAddress, slippage, enabledBridges, enabledExchanges, routePriority, variant, allowSwitchChain,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
+    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = useQuery(queryKey, ({ queryKey: [_, fromAddress, fromChainId, fromTokenAddress, fromTokenAmount, toAddress, toChainId, toTokenAddress, toTokenAmount, toContractAddress, toContractCallData, toContractGasLimit, slippage, enabledBridges, enabledExchanges, routePriority, variant, allowSwitchChain,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d, _e;
         let toWalletAddress;
         try {
             toWalletAddress =
                 (_c = (yield (provider === null || provider === void 0 ? void 0 : provider.resolveName(toAddress)))) !== null && _c !== void 0 ? _c : (isAddress(toAddress) ? toAddress : fromAddress);
         }
-        catch (_e) {
+        catch (_f) {
             toWalletAddress = isAddress(toAddress) ? toAddress : fromAddress;
         }
-        const fromAmount = Big(fromTokenAmount)
+        const fromAmount = Big(fromTokenAmount || 0)
             .mul(Math.pow(10, ((_d = fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals) !== null && _d !== void 0 ? _d : 0)))
             .toString();
+        // const toAmount = Big(toTokenAmount || 0)
+        //   .mul(10 ** (toToken?.decimals ?? 0))
+        //   .toString();
         const formattedSlippage = parseFloat(slippage) / 100;
+        if (variant === 'nft') {
+            const contractCallQuote = yield lifi.getContractCallQuote({
+                fromAddress,
+                fromChain: fromChainId,
+                fromToken: fromTokenAddress,
+                toAmount: toTokenAmount,
+                toChain: toChainId,
+                toToken: toTokenAddress,
+                toContractAddress,
+                toContractCallData,
+                toContractGasLimit,
+                // toFallbackAddress: toAddress,
+                slippage: formattedSlippage,
+            }, { signal });
+            contractCallQuote.estimate.toAmount = toTokenAmount;
+            contractCallQuote.estimate.toAmountMin = toTokenAmount;
+            contractCallQuote.action.toToken = toToken;
+            const route = {
+                id: uuidv4(),
+                fromChainId: contractCallQuote.action.fromChainId,
+                fromAmountUSD: contractCallQuote.estimate.fromAmountUSD || '',
+                fromAmount: contractCallQuote.action.fromAmount,
+                fromToken: contractCallQuote.action.fromToken,
+                fromAddress: contractCallQuote.action.fromAddress,
+                toChainId: contractCallQuote.action.toChainId,
+                toAmountUSD: contractCallQuote.estimate.toAmountUSD || '',
+                toAmount: toTokenAmount,
+                toAmountMin: toTokenAmount,
+                toToken: toToken,
+                toAddress: toAddress,
+                gasCostUSD: (_e = contractCallQuote.estimate.gasCosts) === null || _e === void 0 ? void 0 : _e[0].amountUSD,
+                steps: [contractCallQuote],
+            };
+            return { routes: [route] };
+        }
         return lifi.getRoutes({
             fromChainId,
             fromAmount,

package/hooks/useToken.d.ts

@@ -1,4 +1,4 @@
-export declare const useToken: (chainId: number, tokenAddress: string) => {
+export declare const useToken: (chainId?: number, tokenAddress?: string) => {
     token: import("..").Token | undefined;
     isLoading: boolean;
 };

package/hooks/useTokenSearch.d.ts

@@ -1,5 +1,5 @@
 import type { Token } from '../types';
-export declare const useTokenSearch: (chainId: number, token: string, enabled?: boolean) => {
+export declare const useTokenSearch: (chainId?: number, token?: string, enabled?: boolean) => {
     token: Token | undefined;
     isLoading: boolean;
 };