@lifi/widget 3.0.0-alpha.3 → 3.0.0-alpha.30

package/hooks/useTokenBalance.ts

@@ -0,0 +1,129 @@
+import type { ExtendedChain } from '@lifi/sdk';
+import { getTokenBalances, type Token, type TokenAmount } from '@lifi/sdk';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useMemo } from 'react';
+import { useAccount } from './useAccount.js';
+
+const defaultRefetchInterval = 30_000;
+
+export const useTokenBalance = (
+  accountAddress?: string,
+  token?: Token,
+  chain?: ExtendedChain,
+) => {
+  const { account } = useAccount(
+    // When we provide chain we want to be sure that account address used is from the same ecosystem as token
+    chain ? { chainType: chain.chainType } : undefined,
+  );
+  const queryClient = useQueryClient();
+  const walletAddress = accountAddress || account.address;
+
+  const tokenBalanceQueryKey = useMemo(
+    () =>
+      ['token-balance', walletAddress, token?.chainId, token?.address] as const,
+    [token?.address, token?.chainId, walletAddress],
+  );
+
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: tokenBalanceQueryKey,
+    queryFn: async ({
+      queryKey: [, accountAddress, tokenChainId, tokenAddress],
+    }) => {
+      const tokenBalances = await getTokenBalancesWithRetry(
+        accountAddress as string,
+        [token!],
+      );
+
+      if (!tokenBalances?.length) {
+        throw Error('Could not get tokens balance.');
+      }
+
+      const cachedTokenAmount =
+        queryClient.getQueryData<TokenAmount>(tokenBalanceQueryKey);
+
+      const tokenAmount = tokenBalances[0].amount;
+
+      if (cachedTokenAmount?.amount !== tokenAmount) {
+        queryClient.setQueryDefaults(tokenBalanceQueryKey, {
+          refetchInterval: defaultRefetchInterval,
+          staleTime: defaultRefetchInterval,
+        });
+      }
+
+      queryClient.setQueriesData<TokenAmount[]>(
+        { queryKey: ['token-balances', accountAddress, tokenChainId] },
+        (data) => {
+          if (data) {
+            const clonedData = [...data];
+            const index = clonedData.findIndex(
+              (dataToken) => dataToken.address === tokenAddress,
+            );
+            clonedData[index] = {
+              ...clonedData[index],
+              amount: tokenAmount,
+            };
+            return clonedData;
+          }
+        },
+      );
+
+      return {
+        ...tokenBalances[0],
+        amount: tokenAmount,
+      } as TokenAmount;
+    },
+
+    enabled: Boolean(walletAddress && token),
+    refetchInterval: defaultRefetchInterval,
+    staleTime: defaultRefetchInterval,
+  });
+
+  const refetchAllBalances = () => {
+    queryClient.refetchQueries({
+      queryKey: ['token-balances', accountAddress, token?.chainId],
+      exact: false,
+    });
+  };
+
+  const refetchNewBalance = useCallback(() => {
+    queryClient.setQueryDefaults(tokenBalanceQueryKey, {
+      refetchInterval: 250,
+      staleTime: 250,
+    });
+  }, [queryClient, tokenBalanceQueryKey]);
+
+  return {
+    token: data,
+    isLoading,
+    refetch,
+    refetchNewBalance,
+    refetchAllBalances,
+    getTokenBalancesWithRetry,
+  };
+};
+
+export const getTokenBalancesWithRetry = async (
+  accountAddress: string,
+  tokens: Token[],
+  depth = 0,
+): Promise<TokenAmount[] | undefined> => {
+  try {
+    const tokenBalances = await getTokenBalances(
+      accountAddress as string,
+      tokens,
+    );
+    if (!tokenBalances.every((token) => token.blockNumber)) {
+      if (depth > 10) {
+        console.warn('Token balance backoff depth exceeded.');
+        return undefined;
+      }
+      await new Promise((resolve) => {
+        setTimeout(resolve, 1.5 ** depth * 100);
+      });
+      return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1);
+    }
+    return tokenBalances;
+  } catch (error) {
+    //
+  }
+};

package/hooks/useTokenBalances.ts

@@ -0,0 +1,93 @@
+import { getTokenBalances } from '@lifi/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { formatUnits } from 'viem';
+import type { TokenAmount } from '../types/token.js';
+import { useAccount } from './useAccount.js';
+import { useTokens } from './useTokens.js';
+
+const defaultRefetchInterval = 32_000;
+
+export const useTokenBalances = (selectedChainId?: number) => {
+  const { tokens, featuredTokens, popularTokens, chain, isLoading } =
+    useTokens(selectedChainId);
+  const { account } = useAccount({ chainType: chain?.chainType });
+
+  const isBalanceLoadingEnabled =
+    Boolean(account.address) &&
+    Boolean(tokens?.length) &&
+    Boolean(selectedChainId);
+
+  const {
+    data: tokensWithBalance,
+    isLoading: isBalanceLoading,
+    refetch,
+  } = useQuery({
+    queryKey: [
+      'token-balances',
+      account.address,
+      selectedChainId,
+      tokens?.length,
+    ],
+    queryFn: async ({ queryKey: [, accountAddress] }) => {
+      const tokensWithBalance: TokenAmount[] = await getTokenBalances(
+        accountAddress as string,
+        tokens!,
+      );
+
+      if (!tokensWithBalance?.length) {
+        return tokens as TokenAmount[];
+      }
+
+      const sortFn = (a: TokenAmount, b: TokenAmount) =>
+        parseFloat(formatUnits(b.amount ?? 0n, b.decimals)) *
+          parseFloat(b.priceUSD ?? '0') -
+        parseFloat(formatUnits(a.amount ?? 0n, a.decimals)) *
+          parseFloat(a.priceUSD ?? '0');
+
+      const featuredTokens: TokenAmount[] = [];
+      const tokensWithAmount: TokenAmount[] = [];
+      const popularTokens: TokenAmount[] = [];
+      const allTokens: TokenAmount[] = [];
+
+      tokensWithBalance.forEach((token) => {
+        if (token.amount) {
+          token.featured = false;
+          token.popular = false;
+        }
+        if (token.featured) {
+          featuredTokens.push(token);
+        } else if (token.amount) {
+          tokensWithAmount.push(token);
+        } else if (token.popular) {
+          popularTokens.push(token);
+        } else {
+          allTokens.push(token);
+        }
+      });
+
+      tokensWithAmount.sort(sortFn);
+
+      const result = [
+        ...featuredTokens,
+        ...tokensWithAmount,
+        ...popularTokens,
+        ...allTokens,
+      ];
+      return result;
+    },
+    enabled: isBalanceLoadingEnabled,
+    refetchInterval: defaultRefetchInterval,
+    staleTime: defaultRefetchInterval,
+  });
+
+  return {
+    tokens,
+    tokensWithBalance,
+    featuredTokens,
+    popularTokens,
+    chain,
+    isLoading,
+    isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
+    refetch,
+  };
+};

package/hooks/useTokenSearch.ts

@@ -0,0 +1,45 @@
+import { getToken, type ChainId, type TokensResponse } from '@lifi/sdk';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import type { TokenAmount } from '../types/token.js';
+
+export const useTokenSearch = (
+  chainId?: number,
+  tokenQuery?: string,
+  enabled?: boolean,
+) => {
+  const queryClient = useQueryClient();
+  const { data, isLoading } = useQuery({
+    queryKey: ['token-search', chainId, tokenQuery],
+    queryFn: async ({ queryKey: [, chainId, tokenQuery], signal }) => {
+      const token = await getToken(chainId as ChainId, tokenQuery as string, {
+        signal,
+      });
+
+      if (token) {
+        queryClient.setQueriesData<TokensResponse>(
+          { queryKey: ['tokens'] },
+          (data) => {
+            if (
+              data &&
+              !data.tokens[chainId as number]?.some(
+                (t) => t.address === token.address,
+              )
+            ) {
+              const clonedData = { ...data };
+              clonedData.tokens[chainId as number]?.push(token as TokenAmount);
+              return clonedData;
+            }
+          },
+        );
+      }
+      return token as TokenAmount;
+    },
+
+    enabled: Boolean(chainId && tokenQuery && enabled),
+    retry: false,
+  });
+  return {
+    token: data,
+    isLoading,
+  };
+};

package/hooks/useTokens.ts

@@ -0,0 +1,120 @@
+import { ChainType, getTokens } from '@lifi/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import type { TokenAmount } from '../types/token.js';
+import { useChains } from './useChains.js';
+
+export const useTokens = (selectedChainId?: number) => {
+  const { tokens: configTokens } = useWidgetConfig();
+  const { data, isLoading } = useQuery({
+    queryKey: ['tokens'],
+    queryFn: () => getTokens({ chainTypes: [ChainType.EVM, ChainType.SVM] }),
+    refetchInterval: 3_600_000,
+  });
+  const {
+    chains,
+    isLoading: isSupportedChainsLoading,
+    getChainById,
+  } = useChains();
+
+  const filteredData = useMemo(() => {
+    if (isSupportedChainsLoading || !data) {
+      return;
+    }
+    const chain = getChainById(selectedChainId, chains);
+    const chainAllowed = selectedChainId && chain;
+    if (!chainAllowed) {
+      return;
+    }
+    let filteredTokens = data.tokens?.[selectedChainId] || [];
+    const includedTokens = configTokens?.include?.filter(
+      (token) => token.chainId === selectedChainId,
+    );
+    if (includedTokens?.length) {
+      filteredTokens = [...includedTokens, ...filteredTokens];
+    }
+
+    if (configTokens?.allow?.length || configTokens?.deny?.length) {
+      const allowedTokensSet = new Set(
+        configTokens?.allow
+          ?.filter((token) => token.chainId === selectedChainId)
+          .map((token) => token.address),
+      );
+
+      const deniedTokenAddressesSet = new Set(
+        configTokens?.deny
+          ?.filter((token) => token.chainId === selectedChainId)
+          .map((token) => token.address),
+      );
+
+      if (allowedTokensSet.size || deniedTokenAddressesSet.size) {
+        filteredTokens = filteredTokens.filter(
+          (token) =>
+            (!allowedTokensSet.size || allowedTokensSet.has(token.address)) &&
+            !deniedTokenAddressesSet.has(token.address),
+        );
+      }
+    }
+    const filteredTokensMap = new Map(
+      filteredTokens.map((token) => [token.address, token]),
+    );
+
+    const [popularTokens, featuredTokens] = (
+      ['popular', 'featured'] as ('popular' | 'featured')[]
+    ).map((tokenType) => {
+      const typedConfigTokens = configTokens?.[tokenType]?.filter(
+        (token) => token.chainId === selectedChainId,
+      );
+
+      const populatedConfigTokens = typedConfigTokens?.map((token) => {
+        // Mark token as popular
+        (token as TokenAmount)[tokenType] = true;
+        // Check if this token exists in the filteredTokensMap and add priceUSD if it does
+        const matchingFilteredToken = filteredTokensMap.get(token.address);
+        if (matchingFilteredToken?.priceUSD) {
+          (token as TokenAmount).priceUSD = matchingFilteredToken.priceUSD;
+        }
+        if (!token.logoURI && matchingFilteredToken) {
+          (token as TokenAmount).logoURI = matchingFilteredToken.logoURI;
+        }
+        return token;
+      }) as TokenAmount[];
+
+      if (populatedConfigTokens?.length) {
+        const configTokenAddresses = new Set(
+          populatedConfigTokens?.map((token) => token.address),
+        );
+        filteredTokens = filteredTokens.filter(
+          (token) => !configTokenAddresses.has(token.address),
+        );
+        populatedConfigTokens.push(...filteredTokens);
+        filteredTokens = populatedConfigTokens;
+      }
+
+      return populatedConfigTokens;
+    });
+
+    return {
+      tokens: filteredTokens,
+      featuredTokens,
+      popularTokens,
+      chain,
+    };
+  }, [
+    chains,
+    configTokens,
+    data,
+    getChainById,
+    isSupportedChainsLoading,
+    selectedChainId,
+  ]);
+
+  return {
+    tokens: filteredData?.tokens,
+    featuredTokens: filteredData?.featuredTokens,
+    popularTokens: filteredData?.popularTokens,
+    chain: filteredData?.chain,
+    isLoading,
+  };
+};

package/hooks/useTools.ts

@@ -0,0 +1,37 @@
+import { getTools, type ToolsResponse } from '@lifi/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import { useSettingsStore } from '../stores/settings/useSettingsStore.js';
+import { isItemAllowed } from '../utils/item.js';
+
+export const useTools = () => {
+  const { bridges, exchanges } = useWidgetConfig();
+  const { data } = useQuery({
+    queryKey: ['tools'],
+    queryFn: async (): Promise<ToolsResponse> => {
+      const tools = await getTools();
+      const result = {
+        bridges: tools.bridges.filter((bridge) =>
+          isItemAllowed(bridge.key, bridges),
+        ),
+        exchanges: tools.exchanges.filter((exchange) =>
+          isItemAllowed(exchange.key, exchanges),
+        ),
+      };
+      const { initializeTools } = useSettingsStore.getState();
+      initializeTools(
+        'Bridges',
+        result.bridges.map((bridge) => bridge.key),
+      );
+      initializeTools(
+        'Exchanges',
+        result.exchanges.map((exchange) => exchange.key),
+      );
+      return result;
+    },
+    refetchInterval: 180000,
+    staleTime: 180000,
+  });
+
+  return { tools: data };
+};

package/hooks/useTransactionDetails.ts

@@ -0,0 +1,75 @@
+import type { FullStatusData } from '@lifi/sdk';
+import { getStatus, type StatusResponse } from '@lifi/sdk';
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { useAccount } from './useAccount.js';
+
+export const useTransactionDetails = (transactionHash: string) => {
+  const { account, accounts } = useAccount();
+  const queryClient = useQueryClient();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['transaction-history', transactionHash],
+    queryFn: async ({ queryKey: [, transactionHash], signal }) => {
+      if (transactionHash) {
+        for (const account of accounts) {
+          const cachedHistory = queryClient.getQueryData<StatusResponse[]>([
+            'transaction-history',
+            account.address,
+          ]);
+
+          const transaction = cachedHistory?.find(
+            (t) => t.sending.txHash === transactionHash,
+          );
+
+          if (transaction) {
+            return transaction;
+          }
+        }
+
+        const transaction = await getStatus(
+          {
+            txHash: transactionHash,
+          },
+          { signal },
+        );
+
+        const fromAddress = (transaction as FullStatusData)?.fromAddress;
+
+        if (fromAddress) {
+          queryClient.setQueryData<StatusResponse[]>(
+            ['transaction-history', fromAddress],
+            (data) => {
+              return [...data!, transaction!];
+            },
+          );
+        }
+
+        return transaction;
+      }
+    },
+    refetchInterval: 300000,
+    enabled: Boolean(account.isConnected),
+    initialData: () => {
+      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,
+  });
+
+  return {
+    transaction: data,
+    isLoading,
+  };
+};

package/hooks/useTransactionHistory.ts

@@ -0,0 +1,60 @@
+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';
+import { useAccount } from './useAccount.js';
+
+export const useTransactionHistory = () => {
+  const { accounts } = useAccount();
+
+  const { data, isLoading } = useQueries({
+    queries: accounts.map((account) => ({
+      queryKey: ['transaction-history', account.address],
+      queryFn: (async ({ queryKey: [, accountAddress], signal }) => {
+        if (!accountAddress) {
+          return [];
+        }
+        const date = new Date();
+        date.setFullYear(date.getFullYear() - 10);
+
+        const response = await getTransactionHistory(
+          {
+            wallet: accountAddress,
+            fromTimestamp: date.getTime() / 1000,
+            toTimestamp: Date.now() / 1000,
+          },
+          { signal },
+        );
+
+        return response.transfers;
+      }) as QueryFunction<StatusResponse[], (string | undefined)[], never>,
+      refetchInterval: 300000,
+      enabled: Boolean(account.address),
+    })),
+    combine: (results) => {
+      const data = results
+        .filter((result) => result.data)
+        .flatMap((result) => result.data)
+        .filter(
+          (transaction) =>
+            (transaction as FullStatusData)?.receiving?.chainId &&
+            transaction?.sending.chainId,
+        )
+        .sort((a, b) => {
+          return (
+            ((b?.sending as ExtendedTransactionInfo)?.timestamp ?? 0) -
+            ((a?.sending as ExtendedTransactionInfo)?.timestamp ?? 0)
+          );
+        }) as StatusResponse[];
+      return {
+        data: data,
+        isLoading: results.some((result) => result.isLoading),
+      };
+    },
+  });
+
+  return {
+    data,
+    isLoading,
+  };
+};

package/hooks/useWidgetEvents.ts

@@ -0,0 +1,10 @@
+import _mitt from 'mitt';
+import type { WidgetEvents } from '../types/events.js';
+// https://github.com/developit/mitt/issues/191
+const mitt = _mitt as unknown as typeof _mitt.default;
+
+export const widgetEvents = mitt<WidgetEvents>();
+
+export const useWidgetEvents = () => {
+  return widgetEvents;
+};