@lifi/widget 3.0.0-alpha.16 → 3.0.0-alpha.19

package/hooks/useAddressValidation.ts

@@ -0,0 +1,79 @@
+import type { ChainType } from '@lifi/sdk';
+import { useMutation } from '@tanstack/react-query';
+import { getEnsAddress } from '@wagmi/core';
+import { useTranslation } from 'react-i18next';
+import { normalize } from 'viem/ens';
+import { useConfig } from 'wagmi';
+import { getChainTypeFromAddress } from '../utils';
+
+type AddressType = 'address' | 'ENS';
+
+type ValidResponse = {
+  address: string;
+  addressType: AddressType;
+  chainType: ChainType;
+  isValid: true;
+};
+
+type InvalidResponse = {
+  error: string;
+  isValid: false;
+};
+
+export const useAddressValidation = () => {
+  const { t } = useTranslation();
+  const config = useConfig();
+
+  const { mutateAsync: validateAddress, isPending: isValidating } = useMutation(
+    {
+      mutationFn: async (
+        value: string,
+      ): Promise<ValidResponse | InvalidResponse> => {
+        try {
+          if (!value) {
+            throw new Error();
+          }
+
+          const chainType = getChainTypeFromAddress(value);
+          if (chainType) {
+            return {
+              address: value,
+              addressType: 'address',
+              chainType,
+              isValid: true,
+            };
+          }
+
+          const address = await getEnsAddress(config, {
+            chainId: 1,
+            name: normalize(value),
+          });
+
+          if (address) {
+            const chainType = getChainTypeFromAddress(address);
+            if (chainType) {
+              return {
+                address: address,
+                addressType: 'ENS',
+                chainType,
+                isValid: true,
+              };
+            }
+          }
+
+          throw new Error();
+        } catch (_) {
+          return {
+            isValid: false,
+            error: t('error.title.walletAddressInvalid'),
+          };
+        }
+      },
+    },
+  );
+
+  return {
+    validateAddress,
+    isValidating,
+  };
+};

package/hooks/useFromTokenSufficiency.ts

@@ -9,7 +9,6 @@ import { getTokenBalancesWithRetry } from './useTokenBalance';
 const refetchInterval = 30_000;
 
 export const useFromTokenSufficiency = (route?: RouteExtended) => {
-  const { accounts } = useAccount();
   const [fromChainId, fromTokenAddress, fromAmount] = useFieldValues(
     'fromChain',
     'fromToken',
@@ -29,14 +28,12 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
     isLoading: isTokenAddressBalanceLoading,
   } = useTokenAddressBalance(chainId, tokenAddress);
 
-  const account = accounts.find(
-    (account) => account.chainType === chain?.chainType,
-  );
+  const { account } = useAccount({ chainType: chain?.chainType });
 
   const { data: insufficientFromToken, isLoading } = useQuery({
     queryKey: [
       'from-token-sufficiency-check',
-      account?.address,
+      account.address,
       chainId,
       tokenAddress,
       route?.id ?? fromAmount,
@@ -77,9 +74,7 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
       return insufficientFunds;
     },
 
-    enabled: Boolean(
-      account?.address && token && !isTokenAddressBalanceLoading,
-    ),
+    enabled: Boolean(account.address && token && !isTokenAddressBalanceLoading),
     refetchInterval,
     staleTime: refetchInterval,
     placeholderData: keepPreviousData,

package/hooks/useGasSufficiency.ts

@@ -17,20 +17,16 @@ export interface GasSufficiency {
 const refetchInterval = 30_000;
 
 export const useGasSufficiency = (route?: RouteExtended) => {
-  const { accounts } = useAccount();
   const { getChainById } = useAvailableChains();
-
+  const { account } = useAccount({
+    chainType: getChainById(route?.fromChainId)?.chainType,
+  });
   const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
   const { enabled, isLoading: isRefuelLoading } = useGasRefuel();
   const enabledRefuel = enabled && enabledAutoRefuel;
 
-  const account = accounts.find(
-    (account) =>
-      account.chainType === getChainById(route?.fromChainId)?.chainType,
-  );
-
   const { data: insufficientGas, isLoading } = useQuery({
-    queryKey: ['gas-sufficiency-check', account?.address, route?.id],
+    queryKey: ['gas-sufficiency-check', account.address, route?.id],
     queryFn: async ({ queryKey: [, accountAddress] }) => {
       // TODO: include LI.Fuel into calculation once steps and tools are properly typed
       // const refuelSteps = route.steps
@@ -43,7 +39,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
           (groupedGasCosts, step) => {
             if (
               step.estimate.gasCosts &&
-              (account?.connector as Connector)?.id !== 'safe'
+              (account.connector as Connector)?.id !== 'safe'
             ) {
               const { token } = step.estimate.gasCosts[0];
               const gasCostAmount = step.estimate.gasCosts.reduce(
@@ -130,7 +126,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
       return gasCostResult;
     },
 
-    enabled: Boolean(account?.address && route),
+    enabled: Boolean(account.address && route),
     refetchInterval,
     staleTime: refetchInterval,
   });

package/hooks/useRouteExecution.ts

@@ -31,7 +31,7 @@ export const useRouteExecution = ({
   onAcceptExchangeRateUpdate,
 }: RouteExecutionProps) => {
   const queryClient = useQueryClient();
-  const { isConnected } = useAccount();
+  const { account } = useAccount();
   const resumedAfterMount = useRef(false);
   const emitter = useWidgetEvents();
   const routeExecutionStoreContext = useRouteExecutionStoreContext();
@@ -87,7 +87,7 @@ export const useRouteExecution = ({
 
   const executeRouteMutation = useMutation({
     mutationFn: () => {
-      if (!isConnected) {
+      if (!account.isConnected) {
         throw Error('Account is not connected.');
       }
       if (!routeExecution?.route) {
@@ -111,7 +111,7 @@ export const useRouteExecution = ({
 
   const resumeRouteMutation = useMutation({
     mutationFn: (resumedRoute?: Route) => {
-      if (!isConnected) {
+      if (!account.isConnected) {
         throw Error('Account is not connected.');
       }
       if (!routeExecution?.route) {
@@ -169,7 +169,11 @@ export const useRouteExecution = ({
   useEffect(() => {
     // Check if route is eligible for automatic resuming
     const route = routeExecutionStoreContext.getState().routes[routeId]?.route;
-    if (isRouteActive(route) && isConnected && !resumedAfterMount.current) {
+    if (
+      isRouteActive(route) &&
+      account.isConnected &&
+      !resumedAfterMount.current
+    ) {
       resumedAfterMount.current = true;
       _resumeRoute();
     }
@@ -186,7 +190,7 @@ export const useRouteExecution = ({
       resumedAfterMount.current = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isConnected, routeExecutionStoreContext, routeId]);
+  }, [account.isConnected, routeExecutionStoreContext, routeId]);
 
   return {
     executeRoute: _executeRoute,

package/hooks/useRoutes.ts

@@ -1,15 +1,12 @@
 import type { Route, RoutesResponse, Token } from '@lifi/sdk';
 import { LiFiErrorCode, getContractCallQuote, getRoutes } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { getEnsAddress } from '@wagmi/core';
 import { v4 as uuidv4 } from 'uuid';
-import { isAddress as isEVMAddress, parseUnits } from 'viem';
-import { normalize } from 'viem/ens';
-import { useConfig } from 'wagmi';
+import { parseUnits } from 'viem';
 import { useChain, useDebouncedWatch, useGasRefuel, useToken } from '.';
 import { useWidgetConfig } from '../providers';
 import { defaultSlippage, useFieldValues, useSettings } from '../stores';
-import { isSVMAddress } from '../utils';
+import { getChainTypeFromAddress } from '../utils';
 import { useAccount } from './useAccount';
 import { useSwapOnly } from './useSwapOnly';
 
@@ -21,9 +18,7 @@ interface RoutesProps {
 
 export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
   const { subvariant, sdkConfig, insurance, contractTool } = useWidgetConfig();
-  const { accounts } = useAccount();
   const queryClient = useQueryClient();
-  const config = useConfig();
   const swapOnly = useSwapOnly();
   const {
     slippage,
@@ -67,10 +62,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
   const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } =
     useGasRefuel();
 
-  const accountAddress = fromChain?.chainType
-    ? accounts.find((account) => account.chainType === fromChain.chainType)
-        ?.address
-    : undefined;
+  const { account } = useAccount({ chainType: fromChain?.chainType });
 
   const hasAmount = Number(fromTokenAmount) > 0 || Number(toTokenAmount) > 0;
 
@@ -80,13 +72,24 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
           toContractAddress &&
             toContractCallData &&
             toContractGasLimit &&
-            accountAddress,
+            account.address,
         )
       : true;
 
-  // When we bridge between ecosystems we need to be sure toAddress is set
+  // If toAddress is set, it must have the same chainType as toChain
+  const hasToAddressAndChainTypeSatisfied =
+    toChain &&
+    Boolean(toAddress) &&
+    getChainTypeFromAddress(toAddress) === toChain.chainType;
+  // We need to check for toAddress only if it is set
+  const isToAddressSatisfied = toAddress
+    ? hasToAddressAndChainTypeSatisfied
+    : true;
+  // When we bridge between ecosystems we need to be sure toAddress is set and has the same chainType as toChain
   const isChainTypeSatisfied =
-    fromChain?.chainType !== toChain?.chainType ? Boolean(toAddress) : true;
+    fromChain && toChain && fromChain.chainType !== toChain.chainType
+      ? hasToAddressAndChainTypeSatisfied
+      : true;
 
   const isEnabled =
     Boolean(Number(fromChainId)) &&
@@ -95,13 +98,14 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     Boolean(toToken?.address) &&
     !Number.isNaN(slippage) &&
     hasAmount &&
+    isToAddressSatisfied &&
     isChainTypeSatisfied &&
     contractCallQuoteEnabled;
 
   // Some values should be strictly typed and isEnabled ensures that
   const queryKey = [
     'routes',
-    accountAddress,
+    account.address,
     fromChainId as number,
     fromToken?.address as string,
     fromTokenAmount,
@@ -154,21 +158,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
         ],
         signal,
       }) => {
-        let toWalletAddress = toAddress || fromAddress;
-        const isAddress = isEVMAddress(toAddress) || isSVMAddress(toAddress);
-        try {
-          // FIXME: resolve address in one place
-          toWalletAddress = !isAddress
-            ? (await getEnsAddress(config, {
-                chainId: toChainId,
-                name: normalize(toAddress),
-              })) || undefined
-            : isAddress
-              ? toAddress
-              : fromAddress;
-        } catch {
-          toWalletAddress = isAddress ? toAddress : fromAddress;
-        }
+        const toWalletAddress = toAddress || fromAddress;
         const fromAmount = parseUnits(
           fromTokenAmount,
           fromToken!.decimals,

package/hooks/{useRequiredToAddress.ts → useToAddressRequirements.ts}

@@ -1,20 +1,23 @@
 import { useChain } from '../hooks';
 import { useWidgetConfig } from '../providers';
-import { RequiredUI } from '../types';
 import { useFieldValues } from '../stores';
+import { RequiredUI } from '../types';
 
-export const useRequiredToAddress = () => {
+export const useToAddressRequirements = () => {
   const { requiredUI } = useWidgetConfig();
   const [fromChainId, toChainId] = useFieldValues('fromChain', 'toChain');
 
   const { chain: fromChain } = useChain(fromChainId);
   const { chain: toChain } = useChain(toChainId);
 
-  const differentChainType =
+  const isDifferentChainType =
     fromChain && toChain && fromChain.chainType !== toChain.chainType;
 
   const requiredToAddress =
-    requiredUI?.includes(RequiredUI.ToAddress) || differentChainType;
+    requiredUI?.includes(RequiredUI.ToAddress) || isDifferentChainType;
 
-  return requiredToAddress;
+  return {
+    requiredToAddress,
+    requiredToChainType: toChain?.chainType,
+  };
 };

package/hooks/useToAddressReset.ts

@@ -0,0 +1,36 @@
+import type { ExtendedChain } from '@lifi/sdk';
+import { useWidgetConfig } from '../providers';
+import { useBookmarkActions, useBookmarks, useFieldActions } from '../stores';
+import { RequiredUI } from '../types';
+
+export const useToAddressReset = () => {
+  const { requiredUI } = useWidgetConfig();
+  const { setFieldValue } = useFieldActions();
+  const { selectedBookmark } = useBookmarks();
+  const { setSelectedBookmark } = useBookmarkActions();
+
+  const tryResetToAddress = (toChain: ExtendedChain) => {
+    const requiredToAddress = requiredUI?.includes(RequiredUI.ToAddress);
+
+    const bookmarkSatisfiesToChainType =
+      selectedBookmark?.chainType === toChain?.chainType;
+
+    const shouldResetToAddress =
+      !requiredToAddress && !bookmarkSatisfiesToChainType;
+
+    // toAddress field is required (always visible) when bridging between
+    // two ecosystems (fromChain and toChain have different chain types).
+    // We clean up toAddress on every chain change if toAddress is not required.
+    // This is used when we switch between different chain ecosystems (chain types) and
+    // prevents cases when after we switch the chain from one type to another "Send to wallet" field hides,
+    // but it keeps toAddress value set for the previous chain pair.
+    if (shouldResetToAddress) {
+      setSelectedBookmark();
+      setFieldValue('toAddress', '');
+    }
+  };
+
+  return {
+    tryResetToAddress,
+  };
+};

package/hooks/useTokenBalance.ts

@@ -11,15 +11,12 @@ export const useTokenBalance = (
   token?: Token,
   chain?: ExtendedChain,
 ) => {
-  const { account, accounts } = useAccount();
-  const queryClient = useQueryClient();
-  const walletAddress =
-    accountAddress ||
+  const { account } = useAccount(
     // When we provide chain we want to be sure that account address used is from the same ecosystem as token
-    (chain
-      ? accounts.find((account) => account.chainType === chain.chainType)
-          ?.address
-      : account.address);
+    chain ? { chainType: chain.chainType } : undefined,
+  );
+  const queryClient = useQueryClient();
+  const walletAddress = accountAddress || account.address;
 
   const tokenBalanceQueryKey = useMemo(
     () =>

package/hooks/useTokenBalances.ts

@@ -9,15 +9,12 @@ import { useTokens } from './useTokens';
 const defaultRefetchInterval = 32_000;
 
 export const useTokenBalances = (selectedChainId?: number) => {
-  const { accounts } = useAccount();
   const featuredTokens = useFeaturedTokens(selectedChainId);
   const { tokens, chain, isLoading } = useTokens(selectedChainId);
+  const { account } = useAccount({ chainType: chain?.chainType });
 
-  const account = accounts.find(
-    (account) => account.chainType === chain?.chainType,
-  );
   const isBalanceLoadingEnabled =
-    Boolean(account?.address) &&
+    Boolean(account.address) &&
     Boolean(tokens?.length) &&
     Boolean(selectedChainId);
 
@@ -28,7 +25,7 @@ export const useTokenBalances = (selectedChainId?: number) => {
   } = useQuery({
     queryKey: [
       'token-balances',
-      account?.address,
+      account.address,
       selectedChainId,
       tokens?.length,
     ],

package/hooks/useTransactionDetails.ts

@@ -1,3 +1,4 @@
+import type { FullStatusData } from '@lifi/sdk';
 import { getStatus, type StatusResponse } from '@lifi/sdk';
 import {
   keepPreviousData,
@@ -7,42 +8,40 @@ import {
 import { useAccount } from './useAccount';
 
 export const useTransactionDetails = (transactionHash: string) => {
-  const { account } = useAccount();
+  const { account, accounts } = useAccount();
   const queryClient = useQueryClient();
 
   const { data, isLoading } = useQuery({
-    queryKey: ['transaction-history', account.address, transactionHash],
-    queryFn: async ({
-      queryKey: [, accountAddress, transactionHash],
-      signal,
-    }) => {
-      if (!accountAddress) {
-        return;
-      }
+    queryKey: ['transaction-history', transactionHash],
+    queryFn: async ({ queryKey: [, transactionHash], signal }) => {
       if (transactionHash) {
-        const cachedHistory = queryClient.getQueryData<StatusResponse[]>([
-          'transaction-history',
-          accountAddress,
-        ]);
+        for (const account of accounts) {
+          const cachedHistory = queryClient.getQueryData<StatusResponse[]>([
+            'transaction-history',
+            account.address,
+          ]);
 
-        let transaction = cachedHistory?.find(
-          (t) => t.sending.txHash === transactionHash,
-        );
+          const transaction = cachedHistory?.find(
+            (t) => t.sending.txHash === transactionHash,
+          );
 
-        if (transaction) {
-          return transaction;
+          if (transaction) {
+            return transaction;
+          }
         }
 
-        transaction = await getStatus(
+        const transaction = await getStatus(
           {
             txHash: transactionHash,
           },
           { signal },
         );
 
-        if (cachedHistory && transaction) {
+        const fromAddress = (transaction as FullStatusData)?.fromAddress;
+
+        if (fromAddress) {
           queryClient.setQueryData<StatusResponse[]>(
-            ['transaction-history', accountAddress],
+            ['transaction-history', fromAddress],
             (data) => {
               return [...data!, transaction!];
             },
@@ -53,17 +52,17 @@ export const useTransactionDetails = (transactionHash: string) => {
       }
     },
     refetchInterval: 300000,
-    enabled: Boolean(account.address),
+    enabled: Boolean(account.isConnected),
     initialData: () => {
-      const transaction = queryClient
-        .getQueryData<StatusResponse[]>([
-          'transaction-history',
-          account.address,
-        ])
-        ?.find((t) => t.sending.txHash === transactionHash);
-
-      if (transaction) {
-        return transaction;
+      for (const account of accounts) {
+        const transaction = queryClient
+          .getQueryData<
+            StatusResponse[]
+          >(['transaction-history', account.address])
+          ?.find((t) => t.sending.txHash === transactionHash);
+        if (transaction) {
+          return transaction;
+        }
       }
     },
     placeholderData: keepPreviousData,

package/hooks/useTransactionHistory.ts

@@ -1,4 +1,4 @@
-import type { StatusResponse } from '@lifi/sdk';
+import type { FullStatusData, StatusResponse } from '@lifi/sdk';
 import { getTransactionHistory, type ExtendedTransactionInfo } from '@lifi/sdk';
 import type { QueryFunction } from '@tanstack/react-query';
 import { useQueries } from '@tanstack/react-query';
@@ -37,7 +37,8 @@ export const useTransactionHistory = () => {
         .flatMap((result) => result.data)
         .filter(
           (transaction) =>
-            transaction?.receiving.chainId && transaction.sending.chainId,
+            (transaction as FullStatusData)?.receiving?.chainId &&
+            transaction?.sending.chainId,
         )
         .sort((a, b) => {
           return (

package/i18n/en.json

@@ -9,12 +9,15 @@
   },
   "button": {
     "auto": "Auto",
+    "bookmark": "Bookmark",
+    "bookmarks": "Bookmarks",
     "bridge": "Bridge",
     "buy": "Buy",
     "buyNow": "Buy now",
     "cancel": "Cancel",
     "changeWallet": "Change wallet",
     "close": "Close",
+    "confirm": "Confirm",
     "connectWallet": "Connect wallet",
     "contactSupport": "Contact support",
     "continue": "Continue",
@@ -32,6 +35,7 @@
     "light": "Light",
     "max": "max",
     "ok": "Ok",
+    "options": "Options",
     "removeTransaction": "Remove transaction",
     "reset": "Reset",
     "resetSettings": "Reset settings",
@@ -49,6 +53,7 @@
   },
   "header": {
     "activeTransactions": "Active transactions",
+    "bookmarkedWallets": "Bookmarked wallets",
     "bridge": "Bridge",
     "checkout": "Checkout",
     "exchange": "Exchange",
@@ -57,8 +62,10 @@
     "payWith": "Pay with",
     "purchase": "Purchase",
     "purchaseDetails": "Purchase details",
+    "recentWallets": "Recent wallets",
     "selectChain": "Select chain",
     "selectWallet": "Select your wallet",
+    "sendToWallet": "Send to wallet",
     "settings": "Settings",
     "swap": "Swap",
     "to": "Exchange to",
@@ -73,7 +80,8 @@
       "emptyActiveTransactions": "Transactions in progress will appear here. Once completed, find them in transaction history.",
       "emptyTokenList": "We couldn't find tokens on {{chainName}} chain or you don't have any. Please search by contract address if your token doesn't appear or choose another chain.",
       "emptyTransactionHistory": "Transaction history is only stored locally and will be deleted if you clear your browser data.",
-      "routeNotFound": "Reasons for that could be: low liquidity, amount selected is too low, gas costs are too high or there are no routes for the selected combination."
+      "routeNotFound": "Reasons for that could be: low liquidity, amount selected is too low, gas costs are too high or there are no routes for the selected combination.",
+      "fundsToExchange": "Funds sent to an exchange may be lost"
     },
     "title": {
       "autoRefuel": "Get gas",
@@ -131,22 +139,25 @@
       "unknown": "Please try again or contact support."
     },
     "title": {
+      "addressRequired": "Wallet address is required",
       "allowanceRequired": "Insufficient allowance",
       "balanceIsTooLow": "The balance is too low",
+      "bookmarkAlreadyExists": "Wallet is already bookmarked as {{name}}",
+      "bookmarkNameRequired": "Bookmark name is required",
       "chainSwitch": "Chain switch required",
+      "exchangeRateUpdateCanceled": "Exchange rate update canceled",
       "gasLimitIsTooLow": "The gas limit is too low",
       "insufficientFunds": "Insufficient funds",
       "signatureRejected": "Signature required",
       "slippageNotMet": "Slippage conditions not met",
       "transactionCanceled": "Transaction canceled",
-      "exchangeRateUpdateCanceled": "Exchange rate update canceled",
       "transactionFailed": "Transaction failed",
       "transactionUnderpriced": "Transaction is underpriced",
       "transactionUnprepared": "Unable to prepare transaction",
       "unknown": "Something went wrong",
-      "walletAddressInvalid": "Wallet address is invalid.",
+      "walletAddressInvalid": "Wallet address or ENS is invalid, or the network doesn't support ENS.",
       "walletAddressRequired": "Wallet address is required.",
-      "walletEnsAddressInvalid": "Wallet address or ENS is invalid, or the network doesn't support ENS."
+      "walletChainTypeInvalid": "Wallet address does not match the selected destination chain - {{chainName}}"
     }
   },
   "tooltip": {
@@ -246,8 +257,7 @@
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
     "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}}",
     "tokenSearch": "Search by token name or address",
-    "valueLoss": "Value loss",
-    "walletAddressOrEns": "Wallet address or ENS name"
+    "valueLoss": "Value loss"
   },
   "insurance": {
     "bridgeExploits": "Bridge malfunctions, hacks or exploits",
@@ -271,6 +281,17 @@
     "custom": "Custom",
     "resetSettings": "You're using custom setting limiting the number of available routes."
   },
+  "sendToWallet": {
+    "enterAddress": "Enter address or ENS",
+    "enterName": "Enter name",
+    "confirmWalletAddress": "Confirm wallet address",
+    "connectedWallets": "Connected wallets",
+    "bookmarkWallet": "Bookmark wallet",
+    "addBookmark": "Add bookmark",
+    "noBookmarkedWallets": "No bookmarked wallets",
+    "noConnectedWallets": "No connected wallets",
+    "noRecentWallets": "No recent wallets"
+  },
   "wallet": {
     "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."
   }