@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.6

package/src/hooks/useAvailableChains.ts

@@ -1,39 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

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

package/src/hooks/useExpandableVariant.ts

@@ -1,13 +0,0 @@
-import type { Theme } from '@mui/material';
-import useMediaQuery from '@mui/material/useMediaQuery';
-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

@@ -1,12 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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 };
-};