@lifi/widget 3.0.0-alpha.2 → 3.0.0-alpha.21

package/hooks/useRouteExecution.ts

@@ -0,0 +1,202 @@
+/* eslint-disable no-console */
+import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk';
+import { executeRoute, resumeRoute, updateRouteExecution } from '@lifi/sdk';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useEffect, useRef } from 'react';
+import { shallow } from 'zustand/shallow';
+import {
+  getUpdatedProcess,
+  isRouteActive,
+  isRouteDone,
+  isRouteFailed,
+  useRouteExecutionStore,
+  useRouteExecutionStoreContext,
+} from '../stores';
+import { WidgetEvent } from '../types/events';
+import { useAccount } from './useAccount';
+import { useWidgetEvents } from './useWidgetEvents';
+
+interface RouteExecutionProps {
+  routeId: string;
+  executeInBackground?: boolean;
+  onAcceptExchangeRateUpdate?(
+    resolver: (value: boolean) => void,
+    data: ExchangeRateUpdateParams,
+  ): void;
+}
+
+export const useRouteExecution = ({
+  routeId,
+  executeInBackground,
+  onAcceptExchangeRateUpdate,
+}: RouteExecutionProps) => {
+  const queryClient = useQueryClient();
+  const { account } = useAccount();
+  const resumedAfterMount = useRef(false);
+  const emitter = useWidgetEvents();
+  const routeExecutionStoreContext = useRouteExecutionStoreContext();
+  const routeExecution = useRouteExecutionStore(
+    (state) => state.routes[routeId],
+  );
+  const [updateRoute, restartRoute, deleteRoute] = useRouteExecutionStore(
+    (state) => [state.updateRoute, state.restartRoute, state.deleteRoute],
+    shallow,
+  );
+
+  const updateRouteHook = (updatedRoute: Route) => {
+    const routeExecution =
+      routeExecutionStoreContext.getState().routes[updatedRoute.id];
+    if (!routeExecution) {
+      return;
+    }
+    const clonedUpdatedRoute = structuredClone(updatedRoute);
+    updateRoute(clonedUpdatedRoute);
+    const process = getUpdatedProcess(routeExecution.route, clonedUpdatedRoute);
+    if (process) {
+      emitter.emit(WidgetEvent.RouteExecutionUpdated, {
+        route: clonedUpdatedRoute,
+        process,
+      });
+    }
+
+    if (isRouteDone(clonedUpdatedRoute)) {
+      emitter.emit(WidgetEvent.RouteExecutionCompleted, clonedUpdatedRoute);
+    }
+    if (isRouteFailed(clonedUpdatedRoute) && process) {
+      emitter.emit(WidgetEvent.RouteExecutionFailed, {
+        route: clonedUpdatedRoute,
+        process,
+      });
+    }
+    console.log('Route updated.', clonedUpdatedRoute);
+  };
+
+  const acceptExchangeRateUpdateHook = async (
+    params: ExchangeRateUpdateParams,
+  ) => {
+    if (!onAcceptExchangeRateUpdate) {
+      return false;
+    }
+
+    const accepted = await new Promise<boolean>((resolve) =>
+      onAcceptExchangeRateUpdate(resolve, params),
+    );
+
+    return accepted;
+  };
+
+  const executeRouteMutation = useMutation({
+    mutationFn: () => {
+      if (!account.isConnected) {
+        throw Error('Account is not connected.');
+      }
+      if (!routeExecution?.route) {
+        throw Error('Execution route not found.');
+      }
+      queryClient.removeQueries({ queryKey: ['routes'], exact: false });
+      return executeRoute(routeExecution.route, {
+        updateRouteHook,
+        acceptExchangeRateUpdateHook,
+        infiniteApproval: false,
+        executeInBackground,
+      });
+    },
+    onMutate: () => {
+      console.log('Execution started.', routeId);
+      if (routeExecution) {
+        emitter.emit(WidgetEvent.RouteExecutionStarted, routeExecution.route);
+      }
+    },
+  });
+
+  const resumeRouteMutation = useMutation({
+    mutationFn: (resumedRoute?: Route) => {
+      if (!account.isConnected) {
+        throw Error('Account is not connected.');
+      }
+      if (!routeExecution?.route) {
+        throw Error('Execution route not found.');
+      }
+      return resumeRoute(resumedRoute ?? routeExecution.route, {
+        updateRouteHook,
+        acceptExchangeRateUpdateHook,
+        infiniteApproval: false,
+        executeInBackground,
+      });
+    },
+    onMutate: () => {
+      console.log('Resumed to execution.', routeId);
+    },
+  });
+
+  const _executeRoute = useCallback(() => {
+    executeRouteMutation.mutateAsync(undefined, {
+      onError: (error) => {
+        console.warn('Execution failed!', routeId, error);
+      },
+      onSuccess: (route: Route) => {
+        console.log('Executed successfully!', route);
+      },
+    });
+  }, [executeRouteMutation, routeId]);
+
+  const _resumeRoute = useCallback(
+    (route?: Route) => {
+      resumeRouteMutation.mutateAsync(route, {
+        onError: (error) => {
+          console.warn('Resumed execution failed.', routeId, error);
+        },
+        onSuccess: (route) => {
+          console.log('Resumed execution successful.', route);
+        },
+      });
+    },
+    [resumeRouteMutation, routeId],
+  );
+
+  const restartRouteMutation = useCallback(() => {
+    restartRoute(routeId);
+    _resumeRoute(routeExecution?.route);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [_resumeRoute, routeExecution?.route, routeId]);
+
+  const deleteRouteMutation = useCallback(() => {
+    deleteRoute(routeId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [routeId]);
+
+  // Resume route execution after page reload
+  useEffect(() => {
+    // Check if route is eligible for automatic resuming
+    const route = routeExecutionStoreContext.getState().routes[routeId]?.route;
+    if (
+      isRouteActive(route) &&
+      account.isConnected &&
+      !resumedAfterMount.current
+    ) {
+      resumedAfterMount.current = true;
+      _resumeRoute();
+    }
+
+    // Move execution to background on unmount
+    return () => {
+      const route =
+        routeExecutionStoreContext.getState().routes[routeId]?.route;
+      if (!route || !isRouteActive(route)) {
+        return;
+      }
+      updateRouteExecution(route, { executeInBackground: true });
+      console.log('Move route execution to background.', routeId);
+      resumedAfterMount.current = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [account.isConnected, routeExecutionStoreContext, routeId]);
+
+  return {
+    executeRoute: _executeRoute,
+    restartRoute: restartRouteMutation,
+    deleteRoute: deleteRouteMutation,
+    route: routeExecution?.route,
+    status: routeExecution?.status,
+  };
+};

package/hooks/useRoutes.ts

@@ -0,0 +1,322 @@
+import type { Route, RoutesResponse, Token } from '@lifi/sdk';
+import { LiFiErrorCode, getContractCallQuote, getRoutes } from '@lifi/sdk';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { v4 as uuidv4 } from 'uuid';
+import { parseUnits } from 'viem';
+import { useChain, useDebouncedWatch, useGasRefuel, useToken } from '.';
+import { useWidgetConfig } from '../providers';
+import { defaultSlippage, useFieldValues, useSettings } from '../stores';
+import { getChainTypeFromAddress } from '../utils';
+import { useAccount } from './useAccount';
+import { useSwapOnly } from './useSwapOnly';
+
+const refetchTime = 60_000;
+
+interface RoutesProps {
+  insurableRoute?: Route;
+}
+
+export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
+  const { subvariant, sdkConfig, insurance, contractTool } = useWidgetConfig();
+  const queryClient = useQueryClient();
+  const swapOnly = useSwapOnly();
+  const {
+    slippage,
+    enabledBridges,
+    enabledAutoRefuel,
+    enabledExchanges,
+    routePriority,
+  } = useSettings([
+    'slippage',
+    'routePriority',
+    'enabledAutoRefuel',
+    'enabledBridges',
+    'enabledExchanges',
+  ]);
+  const [fromTokenAmount] = useDebouncedWatch(320, 'fromAmount');
+  const [
+    fromChainId,
+    fromTokenAddress,
+    toAddress,
+    toTokenAmount,
+    toChainId,
+    toContractAddress,
+    toContractCallData,
+    toContractGasLimit,
+    toTokenAddress,
+  ] = useFieldValues(
+    'fromChain',
+    'fromToken',
+    'toAddress',
+    'toAmount',
+    'toChain',
+    'toContractAddress',
+    'toContractCallData',
+    'toContractGasLimit',
+    'toToken',
+  );
+  const { token: fromToken } = useToken(fromChainId, fromTokenAddress);
+  const { token: toToken } = useToken(toChainId, toTokenAddress);
+  const { chain: fromChain } = useChain(fromChainId);
+  const { chain: toChain } = useChain(toChainId);
+  const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } =
+    useGasRefuel();
+
+  const { account } = useAccount({ chainType: fromChain?.chainType });
+
+  const hasAmount = Number(fromTokenAmount) > 0 || Number(toTokenAmount) > 0;
+
+  const contractCallQuoteEnabled: boolean =
+    subvariant === 'nft'
+      ? Boolean(
+          toContractAddress &&
+            toContractCallData &&
+            toContractGasLimit &&
+            account.address,
+        )
+      : true;
+
+  // 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 && toChain && fromChain.chainType !== toChain.chainType
+      ? hasToAddressAndChainTypeSatisfied
+      : true;
+
+  const isEnabled =
+    Boolean(Number(fromChainId)) &&
+    Boolean(Number(toChainId)) &&
+    Boolean(fromToken?.address) &&
+    Boolean(toToken?.address) &&
+    !Number.isNaN(slippage) &&
+    hasAmount &&
+    isToAddressSatisfied &&
+    isChainTypeSatisfied &&
+    contractCallQuoteEnabled;
+
+  // Some values should be strictly typed and isEnabled ensures that
+  const queryKey = [
+    'routes',
+    account.address,
+    fromChainId as number,
+    fromToken?.address as string,
+    fromTokenAmount,
+    toAddress,
+    toChainId as number,
+    toToken?.address as string,
+    toTokenAmount,
+    toContractAddress,
+    toContractCallData,
+    toContractGasLimit,
+    slippage,
+    swapOnly ? [] : enabledBridges,
+    enabledExchanges,
+    routePriority,
+    subvariant,
+    sdkConfig?.routeOptions?.allowSwitchChain,
+    enabledRefuel && enabledAutoRefuel,
+    gasRecommendationFromAmount,
+    insurance,
+    insurableRoute?.id,
+  ] as const;
+
+  const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } =
+    useQuery({
+      queryKey,
+      queryFn: async ({
+        queryKey: [
+          _,
+          fromAddress,
+          fromChainId,
+          fromTokenAddress,
+          fromTokenAmount,
+          toAddress,
+          toChainId,
+          toTokenAddress,
+          toTokenAmount,
+          toContractAddress,
+          toContractCallData,
+          toContractGasLimit,
+          slippage = defaultSlippage,
+          enabledBridges,
+          enabledExchanges,
+          routePriority,
+          subvariant,
+          allowSwitchChain,
+          enabledRefuel,
+          gasRecommendationFromAmount,
+          insurance,
+          insurableRouteId,
+        ],
+        signal,
+      }) => {
+        const toWalletAddress = toAddress || fromAddress;
+        const fromAmount = parseUnits(
+          fromTokenAmount,
+          fromToken!.decimals,
+        ).toString();
+        const formattedSlippage = parseFloat(slippage) / 100;
+
+        const allowedBridges: string[] = insurableRoute
+          ? insurableRoute.steps.flatMap((step) =>
+              step.includedSteps
+                .filter((includedStep) => includedStep.type === 'cross')
+                .map((includedStep) => includedStep.toolDetails.key),
+            )
+          : enabledBridges;
+
+        const allowedExchanges: string[] = insurableRoute
+          ? insurableRoute.steps.flatMap((step) =>
+              step.includedSteps
+                .filter((includedStep) => includedStep.type === 'swap')
+                .map((includedStep) => includedStep.toolDetails.key),
+            )
+          : enabledExchanges;
+
+        if (subvariant === 'nft') {
+          const contractCallQuote = await getContractCallQuote(
+            {
+              // Contract calls are enabled only when fromAddress is set
+              fromAddress: fromAddress as string,
+              fromChain: fromChainId,
+              fromToken: fromTokenAddress,
+              toAmount: toTokenAmount,
+              toChain: toChainId,
+              toToken: toTokenAddress,
+              toContractAddress,
+              toContractCallData,
+              toContractGasLimit,
+              allowBridges: allowedBridges,
+              toFallbackAddress: toWalletAddress,
+              slippage: formattedSlippage,
+            },
+            { signal },
+          );
+
+          contractCallQuote.action.toToken = toToken!;
+
+          const customStep =
+            subvariant === 'nft'
+              ? contractCallQuote.includedSteps?.find(
+                  (step) => step.type === 'custom',
+                )
+              : undefined;
+
+          if (customStep && contractTool) {
+            const toolDetails = {
+              key: contractTool.name,
+              name: contractTool.name,
+              logoURI: contractTool.logoURI,
+            };
+            customStep.toolDetails = toolDetails;
+            contractCallQuote.toolDetails = toolDetails;
+          }
+
+          const route: 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: toWalletAddress,
+            gasCostUSD: contractCallQuote.estimate.gasCosts?.[0].amountUSD,
+            steps: [contractCallQuote],
+            insurance: { state: 'NOT_INSURABLE', feeAmountUsd: '0' },
+          };
+
+          return { routes: [route] } as RoutesResponse;
+        }
+
+        const data = await getRoutes(
+          {
+            fromAddress,
+            fromAmount,
+            fromChainId,
+            fromTokenAddress,
+            toAddress: toWalletAddress,
+            toChainId,
+            toTokenAddress,
+            fromAmountForGas:
+              enabledRefuel && gasRecommendationFromAmount
+                ? gasRecommendationFromAmount
+                : undefined,
+            options: {
+              slippage: formattedSlippage,
+              bridges: {
+                allow: allowedBridges,
+              },
+              exchanges: {
+                allow: allowedExchanges,
+              },
+              order: routePriority,
+              allowSwitchChain:
+                subvariant === 'refuel' ? false : allowSwitchChain,
+              insurance: insurance ? Boolean(insurableRoute) : undefined,
+            },
+          },
+          { signal },
+        );
+        if (data.routes[0] && fromAddress) {
+          // Update local tokens cache to keep priceUSD in sync
+          const { fromToken, toToken } = data.routes[0];
+          [fromToken, toToken].forEach((token) => {
+            queryClient.setQueriesData<Token[]>(
+              { queryKey: ['token-balances', fromAddress, token.chainId] },
+              (data) => {
+                if (data) {
+                  const clonedData = [...data];
+                  const index = clonedData.findIndex(
+                    (dataToken) => dataToken.address === token.address,
+                  );
+                  clonedData[index] = {
+                    ...clonedData[index],
+                    ...token,
+                  };
+                  return clonedData;
+                }
+              },
+            );
+          });
+        }
+        return data;
+      },
+      enabled: isEnabled,
+      staleTime: refetchTime,
+      refetchInterval(query) {
+        return Math.min(
+          Math.abs(refetchTime - (Date.now() - query.state.dataUpdatedAt)),
+          refetchTime,
+        );
+      },
+      retry(_, error: any) {
+        if (error?.code === LiFiErrorCode.NotFound) {
+          return false;
+        }
+        return true;
+      },
+    });
+
+  return {
+    routes: data?.routes,
+    isLoading: isEnabled && isLoading,
+    isFetching,
+    isFetched,
+    dataUpdatedAt,
+    refetchTime,
+    refetch,
+  };
+};

package/hooks/useToAddressRequirements.ts

@@ -0,0 +1,23 @@
+import { useChain } from '../hooks';
+import { useWidgetConfig } from '../providers';
+import { useFieldValues } from '../stores';
+import { RequiredUI } from '../types';
+
+export const useToAddressRequirements = () => {
+  const { requiredUI } = useWidgetConfig();
+  const [fromChainId, toChainId] = useFieldValues('fromChain', 'toChain');
+
+  const { chain: fromChain } = useChain(fromChainId);
+  const { chain: toChain } = useChain(toChainId);
+
+  const isDifferentChainType =
+    fromChain && toChain && fromChain.chainType !== toChain.chainType;
+
+  const requiredToAddress =
+    requiredUI?.includes(RequiredUI.ToAddress) || isDifferentChainType;
+
+  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/useTokenAddressBalance.ts

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import { useTokenBalances } from './useTokenBalances';
+
+export const useTokenAddressBalance = (
+  chainId?: number,
+  tokenAddress?: string,
+) => {
+  const { tokens, tokensWithBalance, chain, isBalanceLoading, refetch } =
+    useTokenBalances(chainId);
+
+  const token = useMemo(() => {
+    if (tokenAddress && chainId) {
+      const token = (tokensWithBalance ?? tokens)?.find(
+        (token) => token.address === tokenAddress && token.chainId === chainId,
+      );
+      return token;
+    }
+  }, [chainId, tokenAddress, tokens, tokensWithBalance]);
+
+  return {
+    token,
+    chain,
+    isLoading: isBalanceLoading,
+    refetch,
+  };
+};