@lifi/widget 1.27.2 → 1.28.1

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.1";

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.1';

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

package/cjs/i18n/en.json

@@ -29,10 +29,11 @@
   },
   "format": {
     "currency": "{{value, currency(currency: USD)}}",
-    "number": "{{value, number(maximumFractionDigits: 4)}}"
+    "number": "{{value, number(maximumFractionDigits: 9)}}"
   },
   "header": {
     "activeSwaps": "Active swaps",
+    "checkout": "Checkout",
     "from": "Swap from",
     "gas": "Gas",
     "gasSwap": "Gas swap",
@@ -74,8 +75,8 @@
       "message": {
         "slippageThreshold": "The slippage is larger than the defined threshold. Please request a new route to get a fresh quote.",
         "transactionFailed": "Please check the block explorer for more information.",
-        "transactionNotSent": "Transaction was not sent. {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
-        "transactionRejected": "Your signature is required to complete the transaction. {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
+        "transactionNotSent": "Transaction was not sent. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
+        "transactionRejected": "Your signature is required to complete the transaction. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
         "unknown": "Please try again or contact support."
       },
       "title": {
@@ -115,8 +116,11 @@
         "routeNotFound": "No routes available"
       }
     },
+    "nftStepDetails": "Purchase NFT via {{tool}}",
     "onChain": "on {{chainName}}",
     "otherTokens": "Other tokens",
+    "ownedBy": "Owned by",
+    "payWith": "Pay with",
     "process": {
       "crossChain": {
         "actionRequired": "Please sign the transaction",
@@ -162,7 +166,7 @@
     "success": {
       "message": {
         "swapPartiallySuccessful": "We've tried to complete the swap, but {{tool}} ran out of liquidity for {{tokenSymbol}} token.",
-        "swapSuccessful": "There are now {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} in {{walletAddress}} wallet on {{chainName}} chain."
+        "swapSuccessful": "There are now {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} in {{walletAddress}} wallet on {{chainName}} chain."
       },
       "title": {
         "gasSwapSuccessful": "Gas swap successful",
@@ -183,7 +187,7 @@
     },
     "to": "To",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
-    "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} on {{chainName}}",
+    "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}}",
     "tokenSearch": "Search your token",
     "valueLoss": "Value loss",
     "walletAddressOrEns": "Wallet address or ENS name",

package/cjs/index.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import './fonts/inter.css';
 export type { WidgetDrawer } from './AppDrawer';
+export * from './components/NFT';
 export { useWidgetEvents, widgetEvents } from './hooks';
+export { useWallet } from './providers/WalletProvider';
 export * from './types';
 export declare const LiFiWidget: import("react").FC<import("./types").WidgetProps>;
 /**

package/cjs/index.js

@@ -14,13 +14,16 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LiFiWidgetDrawer = exports.LiFiWidget = exports.widgetEvents = exports.useWidgetEvents = void 0;
+exports.LiFiWidgetDrawer = exports.LiFiWidget = exports.useWallet = exports.widgetEvents = exports.useWidgetEvents = void 0;
 const App_1 = require("./App");
 const AppDrawer_1 = require("./AppDrawer");
 require("./fonts/inter.css");
+__exportStar(require("./components/NFT"), exports);
 var hooks_1 = require("./hooks");
 Object.defineProperty(exports, "useWidgetEvents", { enumerable: true, get: function () { return hooks_1.useWidgetEvents; } });
 Object.defineProperty(exports, "widgetEvents", { enumerable: true, get: function () { return hooks_1.widgetEvents; } });
+var WalletProvider_1 = require("./providers/WalletProvider");
+Object.defineProperty(exports, "useWallet", { enumerable: true, get: function () { return WalletProvider_1.useWallet; } });
 __exportStar(require("./types"), exports);
 // ClassNameGenerator.configure((componentName) =>
 //   componentName.replace('Mui', 'LiFi'),

package/cjs/pages/MainPage/MainPage.js

@@ -4,16 +4,20 @@ exports.MainPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const ActiveSwaps_1 = require("../../components/ActiveSwaps");
+const ContractComponent_1 = require("../../components/ContractComponent");
 const GasSufficiencyMessage_1 = require("../../components/GasSufficiencyMessage");
 const SelectChainAndToken_1 = require("../../components/SelectChainAndToken");
 const SendToWallet_1 = require("../../components/SendToWallet");
 const SwapInput_1 = require("../../components/SwapInput");
 const SwapRoutes_1 = require("../../components/SwapRoutes");
 const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const MainPage_style_1 = require("./MainPage.style");
 const MainSwapButton_1 = require("./MainSwapButton");
 const MainPage = () => {
     const expandable = (0, hooks_1.useExpandableVariant)();
-    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 3 }, { children: (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from" }) })), !expandable ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }) : null, (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] }))] }))] })));
+    const { variant } = (0, providers_1.useWidgetConfig)();
+    const nft = variant === 'nft';
+    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), nft ? (0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mx: 3, mt: 1, mb: 1 }) : null, (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), !nft ? (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from", mx: 3, mb: 3 }) : null, !expandable ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }) : null, (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] }))] }))] })));
 };
 exports.MainPage = MainPage;

package/cjs/providers/SwapFormProvider/types.d.ts

@@ -1,18 +1,28 @@
 export declare enum SwapFormKey {
+    ContractOutputsToken = "contractOutputsToken",
     FromAmount = "fromAmount",
     FromChain = "fromChain",
     FromToken = "fromToken",
     ToAddress = "toAddress",
+    ToAmount = "toAmount",
     ToChain = "toChain",
+    ToContractAddress = "toContractAddress",
+    ToContractCallData = "toContractCallData",
+    ToContractGasLimit = "ToContractGasLimit",
     ToToken = "toToken",
     TokenSearchFilter = "tokenSearchFilter"
 }
 export type SwapFormValues = {
+    [SwapFormKey.ContractOutputsToken]: string;
     [SwapFormKey.FromAmount]: string;
     [SwapFormKey.FromChain]: number;
     [SwapFormKey.FromToken]: string;
     [SwapFormKey.ToAddress]: string;
+    [SwapFormKey.ToAmount]: string;
     [SwapFormKey.ToChain]: number;
+    [SwapFormKey.ToContractAddress]: string;
+    [SwapFormKey.ToContractCallData]: string;
+    [SwapFormKey.ToContractGasLimit]: string;
     [SwapFormKey.ToToken]: string;
     [SwapFormKey.TokenSearchFilter]: string;
 };

package/cjs/providers/SwapFormProvider/types.js

@@ -3,11 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapFormKeyHelper = exports.SwapFormKey = void 0;
 var SwapFormKey;
 (function (SwapFormKey) {
+    SwapFormKey["ContractOutputsToken"] = "contractOutputsToken";
     SwapFormKey["FromAmount"] = "fromAmount";
     SwapFormKey["FromChain"] = "fromChain";
     SwapFormKey["FromToken"] = "fromToken";
     SwapFormKey["ToAddress"] = "toAddress";
+    SwapFormKey["ToAmount"] = "toAmount";
     SwapFormKey["ToChain"] = "toChain";
+    SwapFormKey["ToContractAddress"] = "toContractAddress";
+    SwapFormKey["ToContractCallData"] = "toContractCallData";
+    SwapFormKey["ToContractGasLimit"] = "ToContractGasLimit";
     SwapFormKey["ToToken"] = "toToken";
     SwapFormKey["TokenSearchFilter"] = "tokenSearchFilter";
 })(SwapFormKey = exports.SwapFormKey || (exports.SwapFormKey = {}));

package/cjs/stores/chains/useChainOrderStore.d.ts

@@ -6,7 +6,7 @@ export declare const useChainOrderStore: import("zustand").UseBoundStore<Omit<im
             chainOrder: number[];
         }>>) => void;
         clearStorage: () => void;
-        rehydrate: () => Promise<void>;
+        rehydrate: () => void | Promise<void>;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: ChainOrderStore) => void) => () => void;
         onFinishHydration: (fn: (state: ChainOrderStore) => void) => () => void;

package/cjs/stores/routes/useRouteExecutionStore.d.ts

@@ -5,7 +5,7 @@ export declare const useRouteExecutionStore: import("zustand").UseBoundStore<Omi
             routes: Partial<Record<string, import("./types").RouteExecution>>;
         }>>) => void;
         clearStorage: () => void;
-        rehydrate: () => Promise<void>;
+        rehydrate: () => void | Promise<void>;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: RouteExecutionStore) => void) => () => void;
         onFinishHydration: (fn: (state: RouteExecutionStore) => void) => () => void;

package/cjs/stores/settings/useSettingsStore.d.ts

@@ -20,7 +20,7 @@ export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<impo
             _enabledExchanges?: Record<string, boolean> | undefined;
         }>>) => void;
         clearStorage: () => void;
-        rehydrate: () => Promise<void>;
+        rehydrate: () => void | Promise<void>;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: SettingsStore) => void) => () => void;
         onFinishHydration: (fn: (state: SettingsStore) => void) => () => void;

package/cjs/types/widget.d.ts

@@ -4,7 +4,7 @@ import type { Components, PaletteMode, PaletteOptions, Shape, Theme } from '@mui
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { CSSProperties, ReactNode, RefObject } from 'react';
 import type { LanguageKey, LanguageResources } from '../providers';
-export type WidgetVariant = 'default' | 'expandable' | 'drawer' | 'refuel';
+export type WidgetVariant = 'default' | 'expandable' | 'drawer' | 'refuel' | 'nft';
 export declare enum DisabledUI {
     FromAmount = "fromAmount",
     FromToken = "fromToken",
@@ -37,10 +37,14 @@ export interface WidgetWalletManagement {
 export interface SDKConfig extends Omit<ConfigUpdate, 'defaultExecutionSettings' | 'defaultRouteOptions' | 'disableVersionCheck'> {
     defaultRouteOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>;
 }
+export interface WidgetContractTool {
+    logoURI: string;
+    name: string;
+}
 export interface WidgetContract {
-    address: string;
-    callData: string;
-    gasLimit: string;
+    address?: string;
+    callData?: string;
+    gasLimit?: string;
     approvalAddress?: string;
     outputToken?: string;
     fallbackAddress?: string;
@@ -56,6 +60,7 @@ export interface WidgetConfig {
     contract?: WidgetContract;
     contractComponent?: ReactNode;
     contractCompactComponent?: ReactNode;
+    contractTool?: WidgetContractTool;
     fee?: number;
     integrator?: string;
     referrer?: string;

package/cjs/types/widget.js

@@ -11,7 +11,9 @@ var DisabledUI;
 var HiddenUI;
 (function (HiddenUI) {
     HiddenUI["Appearance"] = "appearance";
+    // FromAmount = 'fromAmount',
     HiddenUI["Language"] = "language";
     HiddenUI["PoweredBy"] = "poweredBy";
     HiddenUI["ToAddress"] = "toAddress";
+    // ToToken = 'toToken',
 })(HiddenUI = exports.HiddenUI || (exports.HiddenUI = {}));

package/components/ContractComponent/ContractComponent.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
+export declare const ContractComponent: React.FC<BoxProps>;

package/components/ContractComponent/ContractComponent.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWidgetConfig } from '../../providers';
+import { Card } from '../Card';
+export const ContractComponent = (props) => {
+    const { contractComponent } = useWidgetConfig();
+    if (!contractComponent) {
+        return null;
+    }
+    return (_jsx(Card, Object.assign({ flex: 1 }, props, { children: contractComponent })));
+};

package/components/ContractComponent/index.d.ts

@@ -0,0 +1 @@
+export * from './ContractComponent';

package/components/ContractComponent/index.js

@@ -0,0 +1 @@
+export * from './ContractComponent';

package/components/Header/NavigationHeader.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowBack as ArrowBackIcon, ReceiptLongRounded as HistoryIcon, SettingsOutlined as SettingsIcon } from '@mui/icons-material';
+import { ArrowBack as ArrowBackIcon, ReceiptLongRounded as HistoryIcon, SettingsOutlined as SettingsIcon, } from '@mui/icons-material';
 import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { useNavigateBack } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
-import { backButtonRoutes, navigationRoutes, navigationRoutesValues } from '../../utils';
+import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 import { useHeaderActionStore } from './useHeaderActionStore';
 export const NavigationHeader = () => {
@@ -44,8 +44,16 @@ export const NavigationHeader = () => {
                 return t(`header.swap`);
             case navigationRoutes.swapDetails:
                 return t(`header.swapDetails`);
-            default:
-                return variant !== 'refuel' ? t(`header.swap`) : t(`header.gas`);
+            default: {
+                switch (variant) {
+                    case 'nft':
+                        return t(`header.checkout`);
+                    case 'refuel':
+                        return t(`header.gas`);
+                    default:
+                        return t(`header.swap`);
+                }
+            }
         }
     };
     return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, arrow: true }, { children: _jsx(IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory) }, { children: _jsx(HistoryIcon, {}) })) }))) : null, _jsx(Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, arrow: true }, { children: _jsx(IconButton, Object.assign({ size: "medium", onClick: () => navigate(navigationRoutes.settings), sx: {

package/components/Header/WalletHeader.js

@@ -62,5 +62,5 @@ const ConnectedButton = () => {
     });
     return (_jsxs(_Fragment, { children: [_jsx(WalletButton, Object.assign({ endIcon: _jsx(ExpandMoreIcon, {}), startIcon: _jsx(Avatar, Object.assign({ src: chain === null || chain === void 0 ? void 0 : chain.logoURI, alt: chain === null || chain === void 0 ? void 0 : chain.key, sx: { width: 24, height: 24 } }, { children: chain === null || chain === void 0 ? void 0 : chain.name[0] })), sx: {
                     marginRight: -1.25,
-                }, onClick: handleClick }, { children: walletAddress })), _jsxs(Menu, Object.assign({ elevation: 2, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(MenuItem, Object.assign({ onClick: handleCopyAddress, disableRipple: true, dense: true }, { children: [_jsx(ContentCopyIcon, {}), t(`button.copyAddress`)] })), _jsxs(MenuItem, Object.assign({ onClick: handleDisconnect, disableRipple: true, dense: true }, { children: [_jsx(PowerSettingsIcon, {}), t(`button.disconnectWallet`)] }))] }))] }));
+                }, onClick: handleClick }, { children: walletAddress })), _jsxs(Menu, Object.assign({ elevation: 2, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(MenuItem, Object.assign({ onClick: handleCopyAddress, disableRipple: true }, { children: [_jsx(ContentCopyIcon, {}), t(`button.copyAddress`)] })), _jsxs(MenuItem, Object.assign({ onClick: handleDisconnect, disableRipple: true }, { children: [_jsx(PowerSettingsIcon, {}), t(`button.disconnectWallet`)] }))] }))] }));
 };