@lifi/widget 1.27.2 → 1.28.1

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

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

@@ -1,7 +1,9 @@
 import { App } from './App';
 import { AppDrawer } from './AppDrawer';
 import './fonts/inter.css';
+export * from './components/NFT';
 export { useWidgetEvents, widgetEvents } from './hooks';
+export { useWallet } from './providers/WalletProvider';
 export * from './types';
 // ClassNameGenerator.configure((componentName) =>
 //   componentName.replace('Mui', 'LiFi'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.27.2",
+  "version": "1.28.1",
   "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",
@@ -39,31 +39,33 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@lifi/sdk": "^1.7.2",
-    "@lifi/wallet-management": "^1.2.2",
+    "@lifi/wallet-management": "^1.2.4",
     "@mui/icons-material": "^5.11.0",
-    "@mui/lab": "^5.0.0-alpha.112",
-    "@mui/material": "^5.11.0",
-    "@sentry/integrations": "^7.26.0",
-    "@sentry/react": "^7.26.0",
-    "@sentry/tracing": "^7.26.0",
-    "@tanstack/react-query": "^4.20.4",
-    "@tanstack/react-virtual": "^3.0.0-beta.30",
+    "@mui/lab": "^5.0.0-alpha.114",
+    "@mui/material": "^5.11.3",
+    "@sentry/integrations": "^7.29.0",
+    "@sentry/react": "^7.29.0",
+    "@sentry/tracing": "^7.29.0",
+    "@tanstack/react-query": "^4.20.9",
+    "@tanstack/react-virtual": "^3.0.0-beta.34",
     "big.js": "^6.2.1",
-    "i18next": "22.4.5",
+    "i18next": "^22.4.8",
     "i18next-browser-languagedetector": "^7.0.1",
     "microdiff": "^1.3.1",
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.40.0",
+    "react-hook-form": "^7.41.5",
     "react-i18next": "^12.1.1",
-    "react-router-dom": "^6.4.5",
+    "react-router-dom": "^6.6.1",
     "react-timer-hook": "^3.0.5",
-    "zustand": "^4.1.5"
+    "uuid": "^9.0.0",
+    "zustand": "^4.2.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

package/pages/MainPage/MainPage.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ActiveSwaps } from '../../components/ActiveSwaps';
+import { ContractComponent } from '../../components/ContractComponent';
 import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken';
 import { SendToWallet, SendToWalletButton, } from '../../components/SendToWallet';
 import { SwapInput } from '../../components/SwapInput';
 import { SwapRoutes } from '../../components/SwapRoutes';
 import { useExpandableVariant } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
 import { FormContainer } from './MainPage.style';
 import { MainSwapButton } from './MainSwapButton';
 export const MainPage = () => {
     const expandable = useExpandableVariant();
-    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), !expandable ? _jsx(SwapRoutes, { mx: 3, mb: 3 }) : null, _jsx(GasSufficiencyMessage, { mx: 3, mb: 3 }), _jsxs(Box, Object.assign({ mx: 3, mb: 1 }, { children: [_jsx(SendToWallet, { mb: 3 }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(MainSwapButton, {}), _jsx(SendToWalletButton, {})] }))] }))] })));
+    const { variant } = useWidgetConfig();
+    const nft = variant === 'nft';
+    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), nft ? _jsx(ContractComponent, { mx: 3, mt: 1, mb: 1 }) : null, _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), !nft ? _jsx(SwapInput, { formType: "from", mx: 3, mb: 3 }) : null, !expandable ? _jsx(SwapRoutes, { mx: 3, mb: 3 }) : null, _jsx(GasSufficiencyMessage, { mx: 3, mb: 3 }), _jsxs(Box, Object.assign({ mx: 3, mb: 1 }, { children: [_jsx(SendToWallet, { mb: 3 }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(MainSwapButton, {}), _jsx(SendToWalletButton, {})] }))] }))] })));
 };

package/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/providers/SwapFormProvider/types.js

@@ -1,10 +1,15 @@
 export 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 || (SwapFormKey = {}));

package/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/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/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;