@openocean.finance/widget 1.0.0

package/src/hooks/useToAddressRequirements.ts

@@ -0,0 +1,52 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { useAccount } from '@openocean.finance/wallet-management'
+import { useChain } from '../hooks/useChain.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { RequiredUI } from '../types/widget.js'
+import { useIsContractAddress } from './useIsContractAddress.js'
+
+export const useToAddressRequirements = (route?: RouteExtended) => {
+  const { requiredUI } = useWidgetConfig()
+  const [formFromChainId, formToChainId, formToAddress] = useFieldValues(
+    'fromChain',
+    'toChain',
+    'toAddress'
+  )
+
+  const fromChainId = route?.fromChainId ?? formFromChainId
+  const toChainId = route?.toChainId ?? formToChainId
+  const toAddress = route
+    ? route.fromAddress !== route.toAddress
+      ? route.toAddress
+      : formToAddress
+    : formToAddress
+
+  const { chain: fromChain } = useChain(fromChainId)
+  const { chain: toChain } = useChain(toChainId)
+  const { account } = useAccount({
+    chainType: fromChain?.chainType,
+  })
+  const { isContractAddress: isFromContractAddress } = useIsContractAddress(
+    account.address,
+    fromChainId,
+    account.chainType
+  )
+
+  const isDifferentChainType =
+    fromChain && toChain && fromChain.chainType !== toChain.chainType
+
+  const isCrossChainContractAddress =
+    isFromContractAddress && fromChainId !== toChainId
+
+  const requiredToAddress =
+    requiredUI?.includes(RequiredUI.ToAddress) ||
+    isDifferentChainType ||
+    isCrossChainContractAddress
+
+  return {
+    requiredToAddress,
+    requiredToChainType: toChain?.chainType,
+    toAddress,
+  }
+}

package/src/hooks/useToAddressReset.ts

@@ -0,0 +1,45 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useBookmarkActions } from '../stores/bookmarks/useBookmarkActions.js'
+import { useBookmarks } from '../stores/bookmarks/useBookmarks.js'
+import { useFieldActions } from '../stores/form/useFieldActions.js'
+import { useSendToWalletActions } from '../stores/settings/useSendToWalletStore.js'
+import { RequiredUI } from '../types/widget.js'
+
+export const useToAddressReset = () => {
+  const { requiredUI } = useWidgetConfig()
+  const { setFieldValue, isDirty } = useFieldActions()
+  const { selectedBookmark } = useBookmarks()
+  const { setSelectedBookmark } = useBookmarkActions()
+  const { setSendToWallet } = useSendToWalletActions()
+
+  const tryResetToAddress = (toChain: ExtendedChain) => {
+    const requiredToAddress = requiredUI?.includes(RequiredUI.ToAddress)
+
+    const bookmarkSatisfiesToChainType =
+      selectedBookmark?.chainType === toChain?.chainType
+
+    const shouldResetToAddress =
+      !requiredToAddress && !bookmarkSatisfiesToChainType
+
+    // The toAddress field is required and always visible when bridging between
+    // different ecosystems (fromChain and toChain have different chain types).
+    // We reset toAddress on each chain change if it's no longer required, ensuring that
+    // switching chain types doesn't leave a previously set toAddress value when
+    // the "Send to Wallet" field is hidden.
+    if (shouldResetToAddress) {
+      setFieldValue('toAddress', '', { isTouched: true })
+      setSelectedBookmark()
+      // If toAddress was auto-filled (e.g., when making cross-ecosystem bridging and compatible destination wallet was connected)
+      // and not manually edited by the user, we need to hide "Send to Wallet".
+      const isToAddressDirty = isDirty('toAddress')
+      if (!isToAddressDirty) {
+        setSendToWallet(false)
+      }
+    }
+  }
+
+  return {
+    tryResetToAddress,
+  }
+}

package/src/hooks/useToken.ts

@@ -0,0 +1,39 @@
+import { useMemo } from 'react'
+import { useTokenSearch } from './useTokenSearch.js'
+import { useTokens } from './useTokens.js'
+import { useTokenPrice } from './useTokenPrice.js'
+import type { TokenAmount } from '../types/token.js'
+
+export const useToken = (chainId?: number, tokenAddress?: string) => {
+  const { tokens, isLoading } = useTokens(chainId)
+
+  const token = useMemo(() => {
+    const token = tokens?.find(
+      (token: TokenAmount) => token.address === tokenAddress && token.chainId === chainId
+    )
+    return token
+  }, [chainId, tokenAddress, tokens])
+
+  const tokenSearchEnabled = !isLoading && !token
+  const { token: searchedToken, isLoading: isSearchedTokenLoading } =
+    useTokenSearch(chainId, tokenAddress, tokenSearchEnabled)
+
+  // Get token price
+  const { price: latestPrice, isLoading: isPriceLoading } = useTokenPrice(chainId, token || searchedToken)
+
+  // Update token price
+  const updatedToken = useMemo(() => {
+    if (!latestPrice || (!token && !searchedToken)) {
+      return token || searchedToken
+    }
+    return {
+      ...(token || searchedToken),
+      priceUSD: latestPrice
+    }
+  }, [token, searchedToken, latestPrice])
+
+  return {
+    token: updatedToken,
+    isLoading: isLoading || (tokenSearchEnabled && isSearchedTokenLoading) || isPriceLoading,
+  }
+}

package/src/hooks/useTokenAddressBalance.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import type { TokenAmount } from '../types/token.js'
+import { useTokenBalances } from './useTokenBalances.js'
+
+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 as TokenAmount
+    }
+  }, [chainId, tokenAddress, tokens, tokensWithBalance])
+
+  return {
+    token,
+    chain,
+    isLoading: isBalanceLoading,
+    refetch,
+  }
+}

package/src/hooks/useTokenBalance.ts

@@ -0,0 +1,115 @@
+import { type Token, type TokenAmount, getTokenBalances } from '@lifi/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useCallback, useMemo } from 'react'
+
+const defaultRefetchInterval = 30_000
+
+export const useTokenBalance = (accountAddress?: string, token?: Token) => {
+  const queryClient = useQueryClient()
+
+  const tokenBalanceQueryKey = useMemo(
+    () =>
+      [
+        'token-balance',
+        accountAddress,
+        token?.chainId,
+        token?.address,
+      ] as const,
+    [token?.address, token?.chainId, accountAddress]
+  )
+
+  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 new 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(accountAddress && token),
+    refetchInterval: defaultRefetchInterval,
+    staleTime: defaultRefetchInterval,
+  })
+
+  const refetchNewBalance = useCallback(() => {
+    queryClient.setQueryDefaults(tokenBalanceQueryKey, {
+      refetchInterval: 250,
+      staleTime: 250,
+    })
+  }, [queryClient, tokenBalanceQueryKey])
+
+  return {
+    token: data,
+    isLoading,
+    refetch,
+    refetchNewBalance,
+    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/src/hooks/useTokenBalances.ts

@@ -0,0 +1,93 @@
+import { getTokenBalances } from '@lifi/sdk'
+import { useAccount } from '@openocean.finance/wallet-management'
+import { useQuery } from '@tanstack/react-query'
+import { formatUnits } from 'viem'
+import type { TokenAmount } from '../types/token.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) =>
+        Number.parseFloat(formatUnits(b.amount ?? 0n, b.decimals)) *
+          Number.parseFloat(b.priceUSD ?? '0') -
+        Number.parseFloat(formatUnits(a.amount ?? 0n, a.decimals)) *
+          Number.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/src/hooks/useTokenPrice.ts

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query'
+import { OpenOceanService } from '../services/OpenOceanService.js'
+import type { TokenAmount } from '../types/token.js'
+
+export const useTokenPrice = (chainId?: number, token?: TokenAmount) => {
+  const { data: price, isLoading } = useQuery({
+    queryKey: ['token-price', chainId, token?.address],
+    queryFn: async () => {
+      if (!chainId || !token?.address) {
+        return undefined
+      }
+      const prices = await OpenOceanService.getTokensPrice(chainId.toString(), [token.address])
+      return prices[token.address.toLowerCase()]
+    },
+    enabled: !!chainId && !!token?.address,
+    refetchInterval: 60_000, // 每分钟更新一次价格
+    staleTime: 60_000,
+  })
+
+  return {
+    price,
+    isLoading,
+  }
+} 

package/src/hooks/useTokenSearch.ts

@@ -0,0 +1,43 @@
+import { type ChainId, type TokensResponse } from '@lifi/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { OpenOceanService } from '../services/OpenOceanService.js'
+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 OpenOceanService.getTokenInfo(chainId?.toString() || '', tokenQuery as string)
+
+      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/src/hooks/useTokens.ts

@@ -0,0 +1,133 @@
+import { ChainType } 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'
+import { OpenOceanService } from '../services/OpenOceanService.js'
+
+export const useTokens = (selectedChainId?: number) => {
+  const { tokens: configTokens } = useWidgetConfig()
+  const { data, isLoading } = useQuery({
+    queryKey: ['tokens', selectedChainId],
+    queryFn: async () => {
+      if (!selectedChainId) {
+        return { tokens: {} as Record<number, TokenAmount[]> }
+      }
+      const tokens = await OpenOceanService.getTokenList(selectedChainId.toString())
+      return {
+        tokens: {
+          [selectedChainId]: tokens
+        }
+      }
+    },
+    enabled: !!selectedChainId,
+    refetchInterval: 3_600_000,
+    staleTime: 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[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.priceUSD = matchingFilteredToken.priceUSD
+        }
+        if (!token.logoURI && matchingFilteredToken) {
+          token.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/src/hooks/useTools.ts

@@ -0,0 +1,43 @@
+import { type ToolsResponse, getTools } 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',
+      bridges?.allow,
+      bridges?.deny,
+      exchanges?.allow,
+      exchanges?.deny,
+    ],
+    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: 180_000,
+    staleTime: 180_000,
+  })
+
+  return { tools: data }
+}

package/src/hooks/useTransactionDetails.ts

@@ -0,0 +1,76 @@
+import type { FullStatusData } from '@lifi/sdk'
+import { type StatusResponse, getStatus } from '@lifi/sdk'
+import { useAccount } from '@openocean.finance/wallet-management'
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
+
+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: 300_000,
+    enabled: account.isConnected && Boolean(transactionHash),
+    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,
+  }
+}