@lifi/widget 0.0.0-preview-6cc63bac

package/src/hooks/useChains.ts

@@ -0,0 +1,50 @@
+import type { ChainType, ExtendedChain } from '@lifi/sdk'
+import { useMemo } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import type { FormType } from '../stores/form/types.js'
+import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
+import { useAvailableChains } from './useAvailableChains.js'
+
+export const useChains = (
+  type?: FormType,
+  chainTypes?: ChainType[]
+): {
+  chains: ExtendedChain[] | undefined
+  getChainById: (
+    chainId?: number,
+    chains?: ExtendedChain[]
+  ) => ExtendedChain | undefined
+  isLoading: boolean
+} => {
+  const { chains } = useWidgetConfig()
+  const {
+    chains: availableChains,
+    isLoading: isLoadingAvailableChains,
+    getChainById,
+  } = useAvailableChains()
+
+  const filteredChains = useMemo(() => {
+    const chainsConfigSets = getConfigItemSets(
+      chains,
+      (chains) => new Set(chains),
+      type
+    )
+    const filteredChains = type
+      ? availableChains?.filter(
+          (chain) =>
+            isFormItemAllowed(chain.id, chainsConfigSets, type) &&
+            // Check against chain types if they are provided
+            (chainTypes?.includes(chain.chainType) ?? true)
+        )
+      : availableChains?.filter((chain) =>
+          isFormItemAllowed(chain.id, chainsConfigSets)
+        )
+    return filteredChains
+  }, [availableChains, chainTypes, chains, type])
+
+  return {
+    chains: filteredChains,
+    getChainById,
+    isLoading: isLoadingAvailableChains,
+  }
+}

package/src/hooks/useContactSupport.ts

@@ -0,0 +1,16 @@
+import { WidgetEvent } from '../types/events.js'
+import { useWidgetEvents } from './useWidgetEvents.js'
+
+export const useContactSupport = (supportId?: string): (() => void) => {
+  const widgetEvents = useWidgetEvents()
+
+  const handleContactSupport = () => {
+    if (widgetEvents.listenerCount(WidgetEvent.ContactSupport) === 0) {
+      window.open('https://help.li.fi', '_blank', 'nofollow noreferrer')
+    } else {
+      widgetEvents.emit(WidgetEvent.ContactSupport, { supportId })
+    }
+  }
+
+  return handleContactSupport
+}

package/src/hooks/useDebouncedWatch.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react'
+import type { FormFieldArray, FormFieldNames } from '../stores/form/types.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+
+export const useDebouncedWatch = <T extends FormFieldNames[]>(
+  delay: number,
+  ...name: T
+): FormFieldArray<T> => {
+  const watchedValue = useFieldValues(...name)
+  const [debouncedValue, setDebouncedValue] = useState(watchedValue)
+  const debouncedValueRef = useRef<typeof watchedValue>(null)
+  const isMounted = useRef(false)
+
+  useEffect(() => {
+    if (isMounted.current) {
+      const hasWatchedValue = watchedValue.some((value) => value)
+      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/WidgetProvider/WidgetProvider.js'
+
+export const useDefaultElementId = (): string | undefined => {
+  const { elementId } = useWidgetConfig()
+  return elementId
+}

package/src/hooks/useExplorer.ts

@@ -0,0 +1,104 @@
+import type { Chain } from '@lifi/sdk'
+import { ChainId, ChainType, isHex } from '@lifi/sdk'
+import { useCallback } from 'react'
+import { internalExplorerUrl } from '../config/constants.js'
+import { useAvailableChains } from '../hooks/useAvailableChains.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+
+const sanitiseBaseUrl = (baseUrl: string) => baseUrl.trim().replace(/\/+$/, '')
+
+const explorerPathOverrides: Partial<
+  Record<ChainType | ChainId, { txPath: string; addressPath: string }>
+> = {
+  [ChainId.SUI]: { txPath: 'txblock', addressPath: 'coin' },
+  [ChainId.LTR]: { txPath: 'logs', addressPath: 'accounts' },
+  [ChainType.TVM]: { txPath: '#/transaction', addressPath: '#/address' },
+}
+
+type TransactionLinkProps = {
+  chain?: Chain | number
+  txHash?: string
+  txLink?: string
+}
+
+export const useExplorer = (): {
+  getTransactionLink: (props: TransactionLinkProps) => string | undefined
+  getAddressLink: (address: string, chain?: Chain | number) => string
+} => {
+  const { explorerUrls } = useWidgetConfig()
+  const { getChainById } = useAvailableChains()
+
+  const getExplorerConfig = useCallback(
+    (chain?: Chain | number) => {
+      const resolvedChain = Number.isFinite(chain)
+        ? getChainById(chain as number)
+        : (chain as Chain)
+
+      const explorerUrl =
+        (resolvedChain
+          ? (explorerUrls?.[resolvedChain.id]?.[0] ??
+            resolvedChain.metamask.blockExplorerUrls[0])
+          : explorerUrls?.internal?.[0]) || internalExplorerUrl
+
+      const baseUrl =
+        typeof explorerUrl === 'string' ? explorerUrl : explorerUrl.url
+
+      const overrides =
+        explorerPathOverrides[resolvedChain?.id as ChainId] ??
+        explorerPathOverrides[resolvedChain?.chainType as ChainType]
+
+      const defaultTxPath = overrides?.txPath ?? 'tx'
+      const defaultAddressPath = overrides?.addressPath ?? 'address'
+      const txPath =
+        typeof explorerUrl === 'string'
+          ? defaultTxPath
+          : explorerUrl.txPath || defaultTxPath
+      const addressPath =
+        typeof explorerUrl === 'string'
+          ? defaultAddressPath
+          : explorerUrl.addressPath || defaultAddressPath
+
+      return {
+        url: sanitiseBaseUrl(baseUrl),
+        txPath,
+        addressPath,
+        resolvedChain,
+        hasOverride: Boolean(overrides),
+      }
+    },
+    [explorerUrls, getChainById]
+  )
+
+  const getTransactionLink = useCallback(
+    ({ txHash, txLink, chain }: TransactionLinkProps): string | undefined => {
+      if (txHash) {
+        const config = getExplorerConfig(chain)
+        // For EVM chains, sanity-check the transaction hash as some relayers return custom task hashes that are not visible on-chain.
+        // Skip the check when a chain-specific path override is registered — that's an explicit signal the chain's
+        // explorer accepts a non-hex hash (e.g. Lighter, whose hash has no 0x prefix).
+        const validForEvm =
+          config.resolvedChain?.chainType !== ChainType.EVM ||
+          config.hasOverride ||
+          isHex(txHash, { strict: true })
+        if (validForEvm) {
+          return `${config.url}/${config.txPath}/${txHash}`
+        }
+      }
+      return txLink
+    },
+    [getExplorerConfig]
+  )
+
+  const getAddressLink = useCallback(
+    (address: string, chain?: Chain | number) => {
+      const config = getExplorerConfig(chain)
+      return `${config.url}/${config.addressPath}/${address}`
+    },
+    [getExplorerConfig]
+  )
+
+  return {
+    getTransactionLink,
+    getAddressLink,
+  }
+}

package/src/hooks/useFilteredByTokenBalances.ts

@@ -0,0 +1,140 @@
+import {
+  type BaseToken,
+  ChainType,
+  getWalletBalances,
+  type TokenExtended,
+  type WalletTokenExtended,
+} from '@lifi/sdk'
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import type { FormType } from '../stores/form/types.js'
+import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
+import { isSupportedToken } from '../utils/tokenList.js'
+
+export const useFilteredTokensByBalance = (
+  accountsWithTokens?: Record<
+    string,
+    { chainType: ChainType; tokens: Record<number, TokenExtended[]> }
+  >,
+  formType?: FormType
+): {
+  data: Record<string, Record<number, TokenExtended[]>> | undefined
+  isLoading: boolean
+} => {
+  const { tokens: configTokens } = useWidgetConfig()
+  const sdkClient = useSDKClient()
+
+  const evmAddress = useMemo(() => {
+    const evmAccount = Object.entries(accountsWithTokens ?? {}).find(
+      ([_, { chainType }]) => chainType === ChainType.EVM
+    )
+    return evmAccount?.[0]
+  }, [accountsWithTokens])
+
+  const { data: existingBalances, isLoading } = useQuery({
+    queryKey: ['existing-evm-balances', evmAddress],
+    queryFn: () => getWalletBalances(sdkClient, evmAddress ?? ''),
+    enabled: !!evmAddress,
+    refetchInterval: 30_000, // 30 seconds
+    staleTime: 30_000, // 30 seconds
+    retry: false,
+  })
+
+  const accountsWithFilteredTokens = useMemo(() => {
+    if (!accountsWithTokens) {
+      return undefined
+    }
+
+    // Early return if no existing balances - return all tokens
+    const result: Record<string, Record<number, TokenExtended[]>> = {}
+    if (!existingBalances) {
+      for (const [address, { tokens }] of Object.entries(accountsWithTokens)) {
+        result[address] = tokens
+      }
+      return result
+    }
+
+    for (const [address, { tokens }] of Object.entries(accountsWithTokens)) {
+      result[address] = {}
+
+      for (const [chainIdStr, chainTokens] of Object.entries(tokens)) {
+        const chainId = Number(chainIdStr)
+        // Get balances for this specific chain
+        const balances = existingBalances?.[chainId]
+        // If no balances, RPC all tokens of the chain
+        if (!balances?.length) {
+          if (chainTokens.length) {
+            result[address][chainId] = chainTokens
+          }
+          continue
+        }
+
+        // Optimize token matching with Set for O(1) lookup
+        const balanceSet = new Set(
+          balances.map((balance: WalletTokenExtended) =>
+            balance.address.toLowerCase()
+          )
+        )
+
+        // Get tokens that are in chainTokens and have balances
+        const filteredTokens = chainTokens.filter((token) => {
+          const tokenKey = token.address.toLowerCase()
+          return balanceSet.has(tokenKey)
+        })
+
+        // Get tokens that are in balances but not in chainTokens
+        const chainTokenSet = new Set(
+          chainTokens.map((token) => token.address.toLowerCase())
+        )
+
+        // Get allowed addresses from config tokens
+        const allowedAddressesConfig = getConfigItemSets(
+          configTokens,
+          (tokens: BaseToken[]) =>
+            new Set(
+              tokens
+                .filter((t) => Number(t.chainId) === chainId)
+                .map((t) => t.address.toLowerCase())
+            ),
+          formType
+        )
+
+        const additionalTokens = balances
+          .filter((balance: WalletTokenExtended) => {
+            const balanceKey = balance.address.toLowerCase()
+            return (
+              !chainTokenSet.has(balanceKey) &&
+              isSupportedToken(balance) &&
+              isFormItemAllowed(
+                balance,
+                allowedAddressesConfig,
+                formType,
+                (t) => t.address.toLowerCase()
+              )
+            )
+          })
+          // Mark tokens from wallet balances as unverified
+          .map((token: WalletTokenExtended) => ({
+            ...token,
+            verified: false,
+          })) as TokenExtended[]
+
+        // Combine both sets of tokens - convert WalletTokenExtended to TokenAmount
+        const allTokens = [
+          ...filteredTokens,
+          ...additionalTokens,
+        ] as TokenExtended[]
+
+        if (allTokens.length) {
+          result[address][chainId] = allTokens
+        }
+      }
+    }
+
+    return result
+  }, [accountsWithTokens, existingBalances, configTokens, formType])
+
+  return { data: accountsWithFilteredTokens, isLoading }
+}

package/src/hooks/useFromAmountThreshold.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { FormKeyHelper } from '../stores/form/types.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { formatTokenPrice } from '../utils/format.js'
+import { useToken } from './useToken.js'
+
+export const useFromAmountThreshold = (): {
+  belowMinFromAmountUSD: boolean
+  minFromAmountUSD: number | undefined
+} => {
+  const { minFromAmountUSD } = useWidgetConfig()
+
+  const [chainId, tokenAddress, fromAmount] = useFieldValues(
+    FormKeyHelper.getChainKey('from'),
+    FormKeyHelper.getTokenKey('from'),
+    FormKeyHelper.getAmountKey('from')
+  )
+  const { token } = useToken(chainId, tokenAddress)
+
+  const belowMinFromAmountUSD = useMemo(() => {
+    const fromAmountUSD = formatTokenPrice(
+      fromAmount,
+      token?.priceUSD,
+      token?.decimals
+    )
+
+    if (!minFromAmountUSD || !fromAmountUSD) {
+      return false
+    }
+    return fromAmountUSD < minFromAmountUSD
+  }, [minFromAmountUSD, fromAmount, token?.priceUSD, token?.decimals])
+
+  return {
+    belowMinFromAmountUSD,
+    minFromAmountUSD,
+  }
+}

package/src/hooks/useFromTokenSufficiency.ts

@@ -0,0 +1,98 @@
+import { parseUnits, type RouteExtended } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+import { keepPreviousData, useQuery } from '@tanstack/react-query'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { isRouteDone } from '../stores/routes/utils.js'
+import { getQueryKey } from '../utils/queries.js'
+import { useTokenAddressBalance } from './useTokenAddressBalance.js'
+import { getTokenBalancesWithRetry } from './useTokenBalance.js'
+
+const refetchInterval = 30_000
+
+export const useFromTokenSufficiency = (
+  route?: RouteExtended
+): {
+  insufficientFromToken: boolean | undefined
+  isLoading: boolean
+} => {
+  const [fromChainId, fromTokenAddress, fromAmount] = useFieldValues(
+    'fromChain',
+    'fromToken',
+    'fromAmount'
+  )
+  const { keyPrefix } = useWidgetConfig()
+  const sdkClient = useSDKClient()
+
+  let chainId = fromChainId
+  let tokenAddress = fromTokenAddress
+  if (route) {
+    chainId = route.fromToken.chainId
+    tokenAddress = route.fromToken.address
+  }
+
+  const {
+    token,
+    chain,
+    isLoading: isTokenAddressBalanceLoading,
+  } = useTokenAddressBalance(chainId, tokenAddress)
+
+  const { account } = useAccount({ chainType: chain?.chainType })
+
+  const { data: insufficientFromToken, isLoading } = useQuery({
+    queryKey: [
+      getQueryKey('from-token-sufficiency-check', keyPrefix),
+      account.address,
+      chainId,
+      tokenAddress,
+      route?.id ?? fromAmount,
+    ] as const,
+    queryFn: async ({ queryKey: [, accountAddress] }) => {
+      if (!accountAddress || !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?.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(
+        sdkClient,
+        accountAddress,
+        [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: account.address ? keepPreviousData : undefined,
+  })
+
+  return {
+    insufficientFromToken,
+    isLoading,
+  }
+}

package/src/hooks/useGasRecommendation.ts

@@ -0,0 +1,60 @@
+import { type ChainId, getGasRecommendation } from '@lifi/sdk'
+import type { UseQueryResult } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getQueryKey } from '../utils/queries.js'
+import { useAvailableChains } from './useAvailableChains.js'
+
+const refetchInterval = 60_000
+
+export const useGasRecommendation = (
+  toChainId?: ChainId,
+  fromChain?: ChainId,
+  fromToken?: string
+): UseQueryResult<Awaited<ReturnType<typeof getGasRecommendation>> | null> => {
+  const { chains } = useAvailableChains()
+  const { keyPrefix, hiddenUI } = useWidgetConfig()
+  const sdkClient = useSDKClient()
+
+  const checkRecommendationLiFuel =
+    Boolean(toChainId) &&
+    Boolean(fromChain) &&
+    Boolean(fromToken) &&
+    Boolean(chains?.length)
+
+  const checkRecommendationMaxButton =
+    Boolean(toChainId) && !fromChain && !fromToken && Boolean(chains?.length)
+
+  return useQuery({
+    queryKey: [
+      getQueryKey('gas-recommendation', keyPrefix),
+      toChainId,
+      fromChain,
+      fromToken,
+    ],
+    queryFn: async ({
+      queryKey: [_, toChainId, fromChain, fromToken],
+      signal,
+    }) => {
+      if (!chains?.some((chain) => chain.id === toChainId)) {
+        return null
+      }
+      const gasRecommendation = await getGasRecommendation(
+        sdkClient,
+        {
+          chainId: toChainId as ChainId,
+          fromChain: fromChain as ChainId,
+          fromToken: fromToken as string,
+        },
+        { signal }
+      )
+      return gasRecommendation
+    },
+    enabled:
+      (checkRecommendationLiFuel || checkRecommendationMaxButton) &&
+      !hiddenUI?.gasRefuelMessage,
+    refetchInterval,
+    staleTime: refetchInterval,
+  })
+}

package/src/hooks/useGasRefuel.ts

@@ -0,0 +1,98 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+import { useMemo } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { useAvailableChains } from './useAvailableChains.js'
+import { useGasRecommendation } from './useGasRecommendation.js'
+import { useIsContractAddress } from './useIsContractAddress.js'
+import { useTokenBalance } from './useTokenBalance.js'
+
+export const useGasRefuel = (): {
+  enabled: boolean
+  availble: boolean | undefined
+  isLoading: boolean
+  chain: ExtendedChain | undefined
+  fromAmount: string | undefined
+} => {
+  const { getChainById } = useAvailableChains()
+  const { hiddenUI } = useWidgetConfig()
+  const [fromChainId, fromTokenAddress, toChainId, toAddress] = useFieldValues(
+    'fromChain',
+    'fromToken',
+    'toChain',
+    'toAddress'
+  )
+
+  const toChain = getChainById(toChainId)
+  const fromChain = getChainById(fromChainId)
+
+  const { account: toAccount } = useAccount({ chainType: toChain?.chainType })
+
+  const effectiveToAddress = toAddress || toAccount?.address
+
+  const { isContractAddress: isToContractAddress } = useIsContractAddress(
+    effectiveToAddress,
+    toChainId,
+    toChain?.chainType
+  )
+
+  const { token: destinationNativeToken } = useTokenBalance(
+    effectiveToAddress,
+    toChainId ? toChain?.nativeToken : undefined
+  )
+
+  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
+
+  // We should not refuel to the contract address
+  const isToAddressSatisfied = effectiveToAddress && !isToContractAddress
+
+  const enabled = useMemo(() => {
+    if (
+      // Same chain refuel is not allowed since users need gas on source chain to initiate transaction
+      // We allow refuel when bridging to native token since bridging routes may require gas for destination swaps
+      fromChainId === toChainId ||
+      !gasRecommendation?.available ||
+      !gasRecommendation?.recommended ||
+      !destinationNativeToken ||
+      !isChainTypeSatisfied ||
+      !isToAddressSatisfied ||
+      hiddenUI?.gasRefuelMessage
+    ) {
+      return false
+    }
+    const tokenBalance = destinationNativeToken.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,
+    isToAddressSatisfied,
+    destinationNativeToken,
+    toChainId,
+    hiddenUI,
+  ])
+
+  return {
+    enabled: enabled,
+    availble: gasRecommendation?.available,
+    isLoading: isLoading,
+    chain: toChain,
+    fromAmount: gasRecommendation?.available
+      ? gasRecommendation.fromAmount
+      : undefined,
+  }
+}