@lifi/widget 1.27.2 → 1.28.0

package/cjs/components/Token/Token.js

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

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

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

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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");
 const styles_1 = require("@mui/material/styles");
 const utils_1 = require("../../utils");
 exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
@@ -26,4 +27,9 @@ exports.ListItem = (0, styles_1.styled)(material_1.ListItem)(({ theme }) => ({
     [`.${ListItemSecondaryAction_1.listItemSecondaryActionClasses.root}`]: {
         right: theme.spacing(3),
     },
+    [`& .${ListItemText_1.listItemTextClasses.primary}, & .${ListItemText_1.listItemTextClasses.secondary}`]: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+    },
 }));

package/cjs/components/TokenList/VirtualizedTokenList.js

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

package/cjs/config/version.d.ts

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

package/cjs/config/version.js

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

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

@@ -15,6 +15,7 @@ const sdk_1 = require("@lifi/sdk");
 const react_query_1 = require("@tanstack/react-query");
 const big_js_1 = require("big.js");
 const react_hook_form_1 = require("react-hook-form");
+const uuid_1 = require("uuid");
 const _1 = require(".");
 const providers_1 = require("../providers");
 const stores_1 = require("../stores");
@@ -31,36 +32,47 @@ const useSwapRoutes = () => {
         'enabledBridges',
         'enabledExchanges',
     ]);
-    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, toAddress] = (0, react_hook_form_1.useWatch)({
+    const [fromTokenAmount] = (0, _1.useDebouncedWatch)([providers_1.SwapFormKey.FromAmount], 320);
+    const [fromChainId, fromTokenAddress, toAddress, toTokenAmount, toChainId, toContractAddress, toContractCallData, toContractGasLimit, toTokenAddress,] = (0, react_hook_form_1.useWatch)({
         name: [
             providers_1.SwapFormKey.FromChain,
             providers_1.SwapFormKey.FromToken,
+            providers_1.SwapFormKey.ToAddress,
+            providers_1.SwapFormKey.ToAmount,
             providers_1.SwapFormKey.ToChain,
+            providers_1.SwapFormKey.ToContractAddress,
+            providers_1.SwapFormKey.ToContractCallData,
+            providers_1.SwapFormKey.ToContractGasLimit,
             providers_1.SwapFormKey.ToToken,
-            providers_1.SwapFormKey.ToAddress,
         ],
     });
-    const [fromTokenAmount] = (0, _1.useDebouncedWatch)([providers_1.SwapFormKey.FromAmount], 320);
     const { token: fromToken } = (0, _1.useToken)(fromChainId, fromTokenAddress);
     const { token: toToken } = (0, _1.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,
@@ -72,20 +84,58 @@ const useSwapRoutes = () => {
     const refetchInterval = previousDataUpdatedAt
         ? Math.min(Math.abs(refetchTime - (Date.now() - previousDataUpdatedAt)), refetchTime)
         : refetchTime;
-    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = (0, react_query_1.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 } = (0, react_query_1.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 : ((0, address_1.isAddress)(toAddress) ? toAddress : fromAddress);
         }
-        catch (_e) {
+        catch (_f) {
             toWalletAddress = (0, address_1.isAddress)(toAddress) ? toAddress : fromAddress;
         }
-        const fromAmount = (0, big_js_1.default)(fromTokenAmount)
+        const fromAmount = (0, big_js_1.default)(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: (0, uuid_1.v4)(),
+                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/cjs/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/cjs/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;
 };