@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/hooks/useAvailableChains.ts

@@ -0,0 +1,39 @@
+import type { ExtendedChain } from '@lifi/sdk';
+import { ChainType, config, getChains } from '@lifi/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback } from 'react';
+
+export const useAvailableChains = () => {
+  const { data, isLoading } = useQuery({
+    queryKey: ['chains'],
+    queryFn: async () => {
+      const chains = await getChains({
+        chainTypes: [ChainType.EVM, ChainType.SVM],
+      });
+      config.setChains(chains);
+      return chains;
+    },
+    refetchInterval: 300000,
+    staleTime: 300000,
+  });
+
+  const getChainById = useCallback(
+    (chainId?: number, chains: ExtendedChain[] | undefined = data) => {
+      if (!chainId) {
+        return;
+      }
+      const chain = chains?.find((chain) => chain.id === chainId);
+      // if (!chain) {
+      //   throw new Error('Chain not found or chainId is invalid.');
+      // }
+      return chain;
+    },
+    [data],
+  );
+
+  return {
+    chains: data,
+    getChainById,
+    isLoading,
+  };
+};

package/src/hooks/useChain.ts

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import { useAvailableChains } from './useAvailableChains';
+
+export const useChain = (chainId?: number) => {
+  const { isLoading, getChainById } = useAvailableChains();
+
+  const chain = useMemo(() => getChainById(chainId), [chainId, getChainById]);
+
+  return {
+    chain,
+    isLoading,
+  };
+};

package/src/hooks/useChains.ts

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import { isItemAllowed, useWidgetConfig } from '../providers';
+import { useAvailableChains } from './useAvailableChains';
+
+export const useChains = () => {
+  const { chains } = useWidgetConfig();
+  const {
+    chains: availableChains,
+    isLoading: isLoadingAvailableChains,
+    getChainById,
+  } = useAvailableChains();
+
+  const filteredChains = useMemo(() => {
+    const filteredChains = availableChains?.filter((chain) =>
+      isItemAllowed(chain.id, chains),
+    );
+    return filteredChains;
+  }, [availableChains, chains]);
+
+  return {
+    chains: filteredChains,
+    getChainById,
+    isLoading: isLoadingAvailableChains,
+  };
+};

package/src/hooks/useContentHeight.ts

@@ -0,0 +1,53 @@
+import type { MutableRefObject } from 'react';
+import { useLayoutEffect, useState } from 'react';
+import { ElementId, createElementId } from '../utils';
+import { useDefaultElementId } from './useDefaultElementId';
+import { getScrollableContainer } from './useScrollableContainer';
+
+const getContentHeight = (elementId: string) => {
+  const containerElement = document.getElementById(
+    createElementId(ElementId.ScrollableContainer, elementId),
+  );
+  const headerElement = document.getElementById(
+    createElementId(ElementId.Header, elementId),
+  );
+  if (!containerElement || !headerElement) {
+    console.warn(
+      `Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`,
+    );
+    return 0;
+  }
+  const { height: containerHeight } = containerElement.getBoundingClientRect();
+  const { height: headerHeight } = headerElement.getBoundingClientRect();
+  return containerHeight - headerHeight;
+};
+
+export const useContentHeight = () => {
+  const elementId = useDefaultElementId();
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  useLayoutEffect(() => {
+    setContentHeight(getContentHeight(elementId));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return contentHeight;
+};
+
+export const useSetContentHeight = (
+  ref: MutableRefObject<HTMLElement | undefined>,
+) => {
+  const elementId = useDefaultElementId();
+  useLayoutEffect(() => {
+    const scrollableContainer = getScrollableContainer(elementId);
+    if (
+      !scrollableContainer ||
+      !ref.current ||
+      ref.current?.clientHeight <= scrollableContainer?.clientHeight
+    ) {
+      return;
+    }
+    scrollableContainer.style.height = `${ref.current.clientHeight}px`;
+    return () => {
+      scrollableContainer.style.removeProperty('height');
+    };
+  }, [elementId, ref]);
+};

package/src/hooks/useDebouncedWatch.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react';
+import { useWatch } from 'react-hook-form';
+
+export const useDebouncedWatch = (name: any, delay: number) => {
+  const watchedValue = useWatch({
+    name,
+  });
+  const [debouncedValue, setDebouncedValue] = useState(watchedValue);
+  const debouncedValueRef = useRef<any>();
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (isMounted.current) {
+      const hasWatchedValue = Array.isArray(watchedValue)
+        ? watchedValue.some((value) => value)
+        : Boolean(watchedValue);
+      if (hasWatchedValue) {
+        const handler = setTimeout(() => {
+          setDebouncedValue(watchedValue);
+        }, delay);
+        return () => clearTimeout(handler);
+      }
+      debouncedValueRef.current = watchedValue;
+      setDebouncedValue(watchedValue);
+      return undefined;
+    }
+    isMounted.current = true;
+    return undefined;
+  }, [delay, watchedValue]);
+
+  return debouncedValue;
+};

package/src/hooks/useDefaultElementId.ts

@@ -0,0 +1,6 @@
+import { useWidgetConfig } from '../providers';
+
+export const useDefaultElementId = () => {
+  const { elementId } = useWidgetConfig();
+  return elementId;
+};

package/src/hooks/useExpandableVariant.ts

@@ -0,0 +1,13 @@
+import type { Theme } from '@mui/material';
+import { useMediaQuery } from '@mui/material';
+import { useWidgetConfig } from '../providers';
+
+const defaultExpandableWidth = 852;
+
+export const useExpandableVariant = () => {
+  const { variant, useRecommendedRoute } = useWidgetConfig();
+  const expandableAllowed = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.up(defaultExpandableWidth),
+  );
+  return variant === 'expandable' && expandableAllowed && !useRecommendedRoute;
+};

package/src/hooks/useFeaturedTokens.ts

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+import { useWidgetConfig } from '../providers';
+
+export const useFeaturedTokens = (selectedChainId?: number) => {
+  const { tokens } = useWidgetConfig();
+
+  return useMemo(
+    () =>
+      tokens?.featured?.filter((token) => token.chainId === selectedChainId),
+    [selectedChainId, tokens?.featured],
+  );
+};

package/src/hooks/useFromTokenSufficiency.ts

@@ -0,0 +1,83 @@
+import type { RouteExtended } from '@lifi/sdk';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { useWatch } from 'react-hook-form';
+import { parseUnits } from 'viem';
+import { FormKey } from '../providers';
+import { isRouteDone } from '../stores';
+import { useAccount } from './useAccount';
+import { useTokenAddressBalance } from './useTokenAddressBalance';
+import { getTokenBalancesWithRetry } from './useTokenBalance';
+
+const refetchInterval = 30_000;
+
+export const useFromTokenSufficiency = (route?: RouteExtended) => {
+  const { account } = useAccount();
+  const [fromChainId, fromTokenAddress, fromAmount] = useWatch({
+    name: [FormKey.FromChain, FormKey.FromToken, FormKey.FromAmount],
+  });
+
+  let chainId = fromChainId;
+  let tokenAddress = fromTokenAddress;
+  if (route) {
+    chainId = route.fromToken.chainId;
+    tokenAddress = route.fromToken.address;
+  }
+
+  const { token, isLoading: isTokenAddressBalanceLoading } =
+    useTokenAddressBalance(chainId, tokenAddress);
+
+  const { data: insufficientFromToken, isLoading } = useQuery({
+    queryKey: [
+      'from-token-sufficiency-check',
+      account.address,
+      chainId,
+      tokenAddress,
+      route?.id ?? fromAmount,
+    ],
+    queryFn: async () => {
+      if (!account.address || !token) {
+        return;
+      }
+      const parsedFromAmount = parseUnits(fromAmount, token.decimals);
+      let currentTokenBalance = token.amount ?? 0n;
+
+      if (!route || isRouteDone(route)) {
+        const insufficientFunds = currentTokenBalance < parsedFromAmount;
+        return insufficientFunds;
+      }
+
+      const currentAction = route.steps.filter(
+        (step) => !step.execution || step.execution.status !== 'DONE',
+      )[0]?.action;
+
+      if (
+        token.chainId === currentAction.fromToken.chainId &&
+        token.address === currentAction.fromToken.address &&
+        currentTokenBalance > 0
+      ) {
+        const insufficientFunds =
+          BigInt(route.fromAmount) > currentTokenBalance;
+        return insufficientFunds;
+      }
+
+      const tokenBalances = await getTokenBalancesWithRetry(account.address, [
+        currentAction.fromToken,
+      ]);
+
+      currentTokenBalance = tokenBalances?.[0]?.amount ?? 0n;
+      const insufficientFunds =
+        BigInt(currentAction.fromAmount) > currentTokenBalance;
+      return insufficientFunds;
+    },
+
+    enabled: Boolean(account.address && token && !isTokenAddressBalanceLoading),
+    refetchInterval,
+    staleTime: refetchInterval,
+    placeholderData: keepPreviousData,
+  });
+
+  return {
+    insufficientFromToken,
+    isLoading,
+  };
+};

package/src/hooks/useGasRecommendation.ts

@@ -0,0 +1,46 @@
+import { getGasRecommendation, type ChainId } from '@lifi/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useAvailableChains } from './useAvailableChains';
+
+const refetchInterval = 60_000;
+
+export const useGasRecommendation = (
+  toChainId: ChainId,
+  fromChain?: ChainId,
+  fromToken?: string,
+) => {
+  const { chains } = useAvailableChains();
+
+  const checkRecommendationLiFuel =
+    Boolean(toChainId) &&
+    Boolean(fromChain) &&
+    Boolean(fromToken) &&
+    Boolean(chains?.length);
+
+  const checkRecommendationMaxButton =
+    Boolean(toChainId) && !fromChain && !fromToken && Boolean(chains?.length);
+
+  return useQuery({
+    queryKey: ['gas-recommendation', toChainId, fromChain, fromToken],
+    queryFn: async ({
+      queryKey: [_, toChainId, fromChain, fromToken],
+      signal,
+    }) => {
+      if (!chains?.some((chain) => chain.id === toChainId)) {
+        return null;
+      }
+      const gasRecommendation = await getGasRecommendation(
+        {
+          chainId: toChainId as ChainId,
+          fromChain: fromChain as ChainId,
+          fromToken: fromToken as string,
+        },
+        { signal },
+      );
+      return gasRecommendation;
+    },
+    enabled: checkRecommendationLiFuel || checkRecommendationMaxButton,
+    refetchInterval,
+    staleTime: refetchInterval,
+  });
+};

package/src/hooks/useGasRefuel.ts

@@ -0,0 +1,74 @@
+import { useMemo } from 'react';
+import { useWatch } from 'react-hook-form';
+import { useAvailableChains } from '.';
+import { FormKey } from '../providers';
+import { useGasRecommendation } from './useGasRecommendation';
+import { useTokenBalance } from './useTokenBalance';
+
+export const useGasRefuel = () => {
+  const { getChainById } = useAvailableChains();
+
+  const [fromChainId, fromTokenAddress, toChainId, toAddress] = useWatch({
+    name: [
+      FormKey.FromChain,
+      FormKey.FromToken,
+      FormKey.ToChain,
+      FormKey.ToAddress,
+    ],
+  });
+
+  const toChain = getChainById(toChainId);
+  const fromChain = getChainById(fromChainId);
+
+  const { token: nativeToken } = useTokenBalance(
+    toAddress,
+    toChainId && toChain?.nativeToken,
+    toChain,
+  );
+
+  const { data: gasRecommendation, isLoading } = useGasRecommendation(
+    toChainId,
+    fromChainId,
+    fromTokenAddress,
+  );
+
+  // When we bridge between ecosystems we need to be sure toAddress is set
+  const isChainTypeSatisfied =
+    fromChain?.chainType !== toChain?.chainType ? Boolean(toAddress) : true;
+
+  const enabled = useMemo(() => {
+    if (
+      // We don't allow same chain refuel.
+      // If a user runs out of gas, he can't send a source chain transaction.
+      fromChainId === toChainId ||
+      !gasRecommendation?.available ||
+      !nativeToken ||
+      !isChainTypeSatisfied
+    ) {
+      return false;
+    }
+    const tokenBalance = nativeToken.amount ?? 0n;
+
+    // Check if the user balance < 50% of the recommended amount
+    const recommendedAmount = BigInt(gasRecommendation.recommended.amount) / 2n;
+
+    const insufficientGas = tokenBalance < recommendedAmount;
+    return insufficientGas;
+  }, [
+    fromChainId,
+    gasRecommendation,
+    isChainTypeSatisfied,
+    nativeToken,
+    toChainId,
+  ]);
+
+  return {
+    enabled: enabled,
+    availble: gasRecommendation?.available,
+    isLoading: isLoading,
+    chain: toChain,
+    fromAmount: gasRecommendation?.available
+      ? gasRecommendation.fromAmount
+      : undefined,
+  };
+};

package/src/hooks/useGasSufficiency.ts

@@ -0,0 +1,140 @@
+import { type EVMChain, type RouteExtended, type Token } from '@lifi/sdk';
+import { useQuery } from '@tanstack/react-query';
+import type { Connector } from 'wagmi';
+import { getTokenBalancesWithRetry, useAvailableChains, useGasRefuel } from '.';
+import { useSettings } from '../stores';
+import { useAccount } from './useAccount';
+
+export interface GasSufficiency {
+  gasAmount: bigint;
+  tokenAmount?: bigint;
+  insufficientAmount?: bigint;
+  insufficient?: boolean;
+  token: Token;
+  chain?: EVMChain;
+}
+
+const refetchInterval = 30_000;
+
+export const useGasSufficiency = (route?: RouteExtended) => {
+  const { account } = useAccount();
+  const { getChainById } = useAvailableChains();
+
+  const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
+  const { enabled, isLoading: isRefuelLoading } = useGasRefuel();
+  const enabledRefuel = enabled && enabledAutoRefuel;
+
+  const { data: insufficientGas, isLoading } = useQuery({
+    queryKey: ['gas-sufficiency-check', account.address, route?.id],
+    queryFn: async () => {
+      // TODO: include LI.Fuel into calculation once steps and tools are properly typed
+      // const refuelSteps = route.steps
+      //   .flatMap((step) => step.includedSteps)
+      //   .filter((includedStep) => includedStep.tool === 'lifuelProtocol');
+
+      const gasCosts = route!.steps
+        .filter((step) => !step.execution || step.execution.status !== 'DONE')
+        .reduce(
+          (groupedGasCosts, step) => {
+            if (
+              step.estimate.gasCosts &&
+              (account.connector as Connector)?.id !== 'safe'
+            ) {
+              const { token } = step.estimate.gasCosts[0];
+              const gasCostAmount = step.estimate.gasCosts.reduce(
+                (amount, gasCost) => amount + BigInt(gasCost.amount),
+                0n,
+              );
+              groupedGasCosts[token.chainId] = {
+                gasAmount: groupedGasCosts[token.chainId]
+                  ? groupedGasCosts[token.chainId].gasAmount + gasCostAmount
+                  : gasCostAmount,
+                token,
+              };
+            }
+            // Add fees paid in native tokens to gas sufficiency check (included: false)
+            const nonIncludedFeeCosts = step.estimate.feeCosts?.filter(
+              (feeCost) => !feeCost.included,
+            );
+            if (nonIncludedFeeCosts?.length) {
+              const { token } = nonIncludedFeeCosts[0];
+              const feeCostAmount = nonIncludedFeeCosts.reduce(
+                (amount, feeCost) => amount + BigInt(feeCost.amount),
+                0n,
+              );
+              groupedGasCosts[token.chainId] = {
+                gasAmount: groupedGasCosts[token.chainId]
+                  ? groupedGasCosts[token.chainId].gasAmount + feeCostAmount
+                  : feeCostAmount,
+                token,
+              } as any;
+            }
+            return groupedGasCosts;
+          },
+          {} as Record<number, GasSufficiency>,
+        );
+
+      if (
+        route!.fromToken.address === gasCosts[route!.fromChainId]?.token.address
+      ) {
+        gasCosts[route!.fromChainId].tokenAmount =
+          gasCosts[route!.fromChainId]?.gasAmount + BigInt(route!.fromAmount);
+      }
+
+      const tokenBalances = await getTokenBalancesWithRetry(
+        account.address!,
+        Object.values(gasCosts).map((item) => item.token),
+      );
+
+      if (!tokenBalances?.length) {
+        return [];
+      }
+
+      [route!.fromChainId, route!.toChainId].forEach((chainId) => {
+        if (gasCosts[chainId]) {
+          const gasTokenBalance =
+            tokenBalances?.find(
+              (t) =>
+                t.chainId === gasCosts[chainId].token.chainId &&
+                t.address === gasCosts[chainId].token.address,
+            )?.amount ?? 0n;
+          const insufficient =
+            gasTokenBalance <= 0n ||
+            gasTokenBalance < gasCosts[chainId].gasAmount ||
+            gasTokenBalance < (gasCosts[chainId].tokenAmount ?? 0n);
+
+          const insufficientAmount = insufficient
+            ? gasCosts[chainId].tokenAmount
+              ? gasCosts[chainId].tokenAmount! - gasTokenBalance
+              : gasCosts[chainId].gasAmount - gasTokenBalance
+            : undefined;
+
+          gasCosts[chainId] = {
+            ...gasCosts[chainId],
+            insufficient,
+            insufficientAmount,
+            chain: insufficient ? getChainById(chainId) : undefined,
+          };
+        }
+      });
+
+      const gasCostResult = Object.values(gasCosts).filter(
+        (gasCost) => gasCost.insufficient,
+      );
+
+      return gasCostResult;
+    },
+
+    enabled: Boolean(account.address && route),
+    refetchInterval,
+    staleTime: refetchInterval,
+  });
+
+  const isInsufficientGas =
+    Boolean(insufficientGas?.length) && !isRefuelLoading && !enabledRefuel;
+
+  return {
+    insufficientGas: isInsufficientGas ? insufficientGas : undefined,
+    isLoading,
+  };
+};

package/src/hooks/useInitializer.ts

@@ -0,0 +1,16 @@
+import { checkPackageUpdates } from '@lifi/sdk';
+import { useEffect } from 'react';
+import { name, version } from '../config/version';
+import { useTools } from './useTools';
+
+let checkedPackageUpdates = false;
+
+export const useInitializer = () => {
+  useTools();
+  useEffect(() => {
+    if (!checkedPackageUpdates) {
+      checkedPackageUpdates = true;
+      checkPackageUpdates(name, version);
+    }
+  }, []);
+};

package/src/hooks/useLanguages.ts

@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next';
+import { useWidgetConfig } from '../providers';
+import { useSettings, useSettingsStore } from '../stores';
+
+export const useLanguages = () => {
+  const { t, i18n } = useTranslation();
+  const { languages } = useWidgetConfig();
+  const { language } = useSettings(['language']);
+  const setValue = useSettingsStore((state) => state.setValue);
+
+  const sortedLanguages = Object.keys(i18n.store.data).sort();
+
+  const selectedLanguageCode = sortedLanguages.includes(
+    language || i18n.resolvedLanguage || '',
+  )
+    ? language || i18n.resolvedLanguage
+    : languages?.default || languages?.allow?.[0];
+
+  return {
+    availableLanguages: sortedLanguages,
+    selectedLanguageCode: selectedLanguageCode,
+    selectedLanguageDisplayName: t('language.name', {
+      lng: selectedLanguageCode,
+    }),
+    setLanguageWithCode: (code: string) => {
+      setValue('language', code);
+      i18n.changeLanguage(code);
+    },
+  };
+};

package/src/hooks/useNavigateBack.ts

@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const useNavigateBack = () => {
+  const navigate = useNavigate();
+
+  const navigateBack = useCallback(() => {
+    // TODO: find a better router with nested memory routers support
+    // https://github.com/remix-run/react-router/pull/9112
+    // https://github.com/remix-run/react-router/discussions/9601
+    //
+    // if (window.history.length > 2) {
+    navigate(-1);
+    // } else {
+    //   navigate(
+    //     window.location.pathname.substring(
+    //       0,
+    //       window.location.pathname.lastIndexOf('/'),
+    //     ) || '/',
+    //     { replace: true },
+    //   );
+    // }
+  }, [navigate]);
+
+  return { navigateBack, navigate };
+};