@lifi/widget 0.0.0-preview-6cc63bac

package/src/hooks/timer/useExecutionTimer.ts

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { formatTimer } from '../../utils/timer.js'
+import { useTimer } from './useTimer.js'
+
+export const useExecutionTimer = (
+  expiryTimestamp: Date
+): { formatted: string | null; isTimerExpired: boolean } => {
+  const { i18n } = useTranslation()
+  const [isExpired, setExpired] = useState(false)
+  const { days, hours, minutes, seconds } = useTimer({
+    autoStart: true,
+    expiryTimestamp,
+    onExpire: () => setExpired(true),
+  })
+  const isTimerExpired = isExpired || (!minutes && !seconds)
+  const formatted = isTimerExpired
+    ? null
+    : formatTimer({ locale: i18n.language, days, hours, minutes, seconds })
+  return { formatted, isTimerExpired }
+}

package/src/hooks/timer/useInterval.ts

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react'
+
+export function useInterval(callback: () => void, delay: number | null): void {
+  const callbackRef = useRef(callback)
+
+  // update callback function with current render callback that has access to latest props and state
+  useEffect(() => {
+    callbackRef.current = callback
+  })
+
+  useEffect(() => {
+    if (!delay) {
+      return () => {}
+    }
+
+    const interval = setInterval(() => {
+      callbackRef?.current?.()
+    }, delay)
+    return () => clearInterval(interval)
+  }, [delay])
+}

package/src/hooks/timer/useTimer.ts

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useState } from 'react'
+import {
+  getMillisecondsFromExpiry,
+  getTimeFromMilliseconds,
+  type TimeFromMillisecondsType,
+} from './time.js'
+import { useInterval } from './useInterval.js'
+import { validateExpiryTimestamp, validateOnExpire } from './validate.js'
+
+const SECOND_INTERVAL = 1000
+
+type useTimerSettingsType = {
+  expiryTimestamp: Date
+  onExpire?: () => void
+  autoStart?: boolean
+  interval?: number
+}
+
+type useTimerResultType = TimeFromMillisecondsType & {
+  start: () => void
+  pause: () => void
+  resume: () => void
+  restart: (newExpiryTimestamp: Date, newAutoStart?: boolean) => void
+  isRunning: boolean
+}
+
+/**
+ * `useTimer` from https://github.com/amrlabib/react-timer-hook
+ */
+export function useTimer({
+  expiryTimestamp: expiry,
+  onExpire = () => {},
+  autoStart = true,
+  interval: customInterval = SECOND_INTERVAL,
+}: useTimerSettingsType): useTimerResultType {
+  const [expiryTimestamp, setExpiryTimestamp] = useState(expiry)
+  const [milliseconds, setMilliseconds] = useState(
+    getMillisecondsFromExpiry(expiryTimestamp)
+  )
+  const [isRunning, setIsRunning] = useState(autoStart)
+  const [didStart, setDidStart] = useState(autoStart)
+  const [interval, setInterval] = useState<number | null>(customInterval)
+
+  const handleExpire = useCallback(() => {
+    if (validateOnExpire(onExpire)) {
+      onExpire()
+    }
+    setIsRunning(false)
+    setInterval(null)
+  }, [onExpire])
+
+  const pause = useCallback(() => {
+    setIsRunning(false)
+  }, [])
+
+  const restart = useCallback(
+    (newExpiryTimestamp: Date, newAutoStart = true) => {
+      setInterval(customInterval)
+      setDidStart(newAutoStart)
+      setIsRunning(newAutoStart)
+      setExpiryTimestamp(newExpiryTimestamp)
+      setMilliseconds(getMillisecondsFromExpiry(newExpiryTimestamp))
+    },
+    [customInterval]
+  )
+
+  const resume = useCallback(() => {
+    const time = new Date()
+    time.setMilliseconds(time.getMilliseconds() + milliseconds)
+    restart(time)
+  }, [milliseconds, restart])
+
+  const start = useCallback(() => {
+    if (didStart) {
+      setMilliseconds(getMillisecondsFromExpiry(expiryTimestamp))
+      setIsRunning(true)
+    } else {
+      resume()
+    }
+  }, [expiryTimestamp, didStart, resume])
+
+  useInterval(
+    () => {
+      const millisecondsValue = getMillisecondsFromExpiry(expiryTimestamp)
+      setMilliseconds(millisecondsValue)
+      if (millisecondsValue <= 0) {
+        handleExpire()
+      } else if (interval && millisecondsValue < interval) {
+        setInterval(millisecondsValue)
+      }
+    },
+    isRunning ? interval : null
+  )
+
+  useEffect(() => {
+    validateExpiryTimestamp(expiryTimestamp)
+  }, [expiryTimestamp])
+
+  return {
+    ...getTimeFromMilliseconds(milliseconds),
+    start,
+    pause,
+    resume,
+    restart,
+    isRunning,
+  }
+}

package/src/hooks/timer/validate.ts

@@ -0,0 +1,15 @@
+export function validateExpiryTimestamp(expiryTimestamp: Date): boolean {
+  const isValid = new Date(expiryTimestamp).getTime() > 0
+  if (!isValid) {
+    console.warn('useTimer Invalid expiryTimestamp settings', expiryTimestamp)
+  }
+  return isValid
+}
+
+export function validateOnExpire(onExpire: () => void): boolean {
+  const isValid = onExpire && typeof onExpire === 'function'
+  if (onExpire && !isValid) {
+    console.warn('useTimer Invalid onExpire settings function', onExpire)
+  }
+  return isValid
+}

package/src/hooks/useAccountsBalancesData.ts

@@ -0,0 +1,104 @@
+import type { ChainType, TokenExtended } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+import { useMemo } from 'react'
+import type { FormType } from '../stores/form/types.js'
+import { useChains } from './useChains.js'
+import { useFilteredTokensByBalance } from './useFilteredByTokenBalances.js'
+
+export const useAccountsBalancesData = (
+  selectedChainId?: number,
+  formType?: FormType,
+  isAllNetworks?: boolean,
+  allTokens?: Record<number, TokenExtended[]>
+): {
+  data: Record<string, Record<number, TokenExtended[]>> | undefined
+  isLoading: boolean
+} => {
+  const { data: accountsWithTokens, isLoading: isAccountsLoading } =
+    useAccountsData(selectedChainId, formType, isAllNetworks, allTokens)
+
+  // Filter out EVM tokens that do not have balances
+  const { data: filteredTokens, isLoading: isCachedBalancesLoading } =
+    useFilteredTokensByBalance(accountsWithTokens, formType)
+
+  return {
+    data: filteredTokens,
+    isLoading: isAccountsLoading || isCachedBalancesLoading,
+  }
+}
+
+const useAccountsData = (
+  selectedChainId?: number,
+  formType?: FormType,
+  isAllNetworks?: boolean,
+  allTokens?: Record<number, TokenExtended[]>
+) => {
+  const {
+    chains: allChains,
+    isLoading: isChainsLoading,
+    getChainById,
+  } = useChains(formType)
+  const currentChain = useMemo(() => {
+    return selectedChainId
+      ? getChainById(selectedChainId, allChains)
+      : undefined
+  }, [selectedChainId, allChains, getChainById])
+  const chains = useMemo(() => {
+    return isAllNetworks ? allChains : currentChain ? [currentChain] : undefined
+  }, [allChains, isAllNetworks, currentChain])
+
+  const { accounts: allAccounts, account: currentAccount } = useAccount(
+    isAllNetworks ? undefined : { chainType: currentChain?.chainType }
+  )
+  const accounts = useMemo(() => {
+    return isAllNetworks
+      ? allAccounts
+      : currentAccount
+        ? [currentAccount]
+        : undefined
+  }, [allAccounts, currentAccount, isAllNetworks])
+
+  const accountsWithTokens = useMemo(() => {
+    if (!chains || !allTokens || !accounts?.length) {
+      return undefined
+    }
+    return accounts
+      ?.filter((account) => account.address)
+      .reduce(
+        (acc, account) => {
+          if (account.address) {
+            const accountChains = chains?.filter(
+              (chain) => account.chainType === chain?.chainType
+            )
+            if (accountChains) {
+              const chainIdSet = new Set(accountChains.map((chain) => chain.id))
+              const filteredTokens = Object.entries(allTokens).reduce(
+                (tokenAcc, [chainIdStr, tokens]) => {
+                  const chainId = Number(chainIdStr)
+                  if (chainIdSet.has(chainId)) {
+                    tokenAcc[chainId] = tokens
+                  }
+                  return tokenAcc
+                },
+                {} as { [chainId: number]: TokenExtended[] }
+              )
+              acc[account.address] = {
+                chainType: account.chainType,
+                tokens: filteredTokens,
+              }
+            }
+          }
+          return acc
+        },
+        {} as Record<
+          string,
+          { chainType: ChainType; tokens: Record<number, TokenExtended[]> }
+        >
+      )
+  }, [accounts, chains, allTokens])
+
+  return {
+    data: accountsWithTokens,
+    isLoading: isChainsLoading,
+  }
+}

package/src/hooks/useActionMessage.ts

@@ -0,0 +1,34 @@
+import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'
+import { useTranslation } from 'react-i18next'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getActionMessage } from '../utils/getActionMessage.js'
+import { getErrorMessage } from '../utils/getErrorMessage.js'
+import { useAvailableChains } from './useAvailableChains.js'
+
+export const useActionMessage = (
+  step?: LiFiStepExtended,
+  action?: ExecutionAction,
+  defaultLabelsOnly?: boolean
+): { title?: string; message?: string } => {
+  const { mode, modeOptions } = useWidgetConfig()
+  const { t } = useTranslation()
+  const { getChainById } = useAvailableChains()
+
+  if (!step || !action) {
+    return {}
+  }
+
+  if (action.status === 'FAILED') {
+    return getErrorMessage(t, getChainById, step, action)
+  }
+
+  return getActionMessage(
+    t,
+    step,
+    action.type,
+    action.status,
+    action.substatus,
+    defaultLabelsOnly ? undefined : mode,
+    defaultLabelsOnly ? undefined : modeOptions
+  )
+}

package/src/hooks/useAddressActivity.ts

@@ -0,0 +1,47 @@
+import { ChainType } from '@lifi/sdk'
+import { useEthereumContext } from '@lifi/widget-provider'
+import { useQuery } from '@tanstack/react-query'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { useAvailableChains } from './useAvailableChains.js'
+
+interface AddressActivity {
+  hasActivity: boolean
+  isLoading: boolean
+  isFetched: boolean
+  toAddress: string | undefined
+}
+export const useAddressActivity = (chainId?: number): AddressActivity => {
+  const { getChainById } = useAvailableChains()
+  const [toAddress, toChainId] = useFieldValues('toAddress', 'toChain')
+  const { getTransactionCount } = useEthereumContext()
+
+  const destinationChainId = chainId ?? toChainId
+  const toChain = getChainById(destinationChainId)
+
+  const {
+    data: transactionCount,
+    isLoading,
+    isFetched,
+    error,
+  } = useQuery({
+    queryKey: ['getTransactionCount', toAddress, destinationChainId],
+    queryFn: async () => {
+      const count = await getTransactionCount?.(destinationChainId!, toAddress!)
+      return count ?? null
+    },
+    refetchInterval: 300_000,
+    staleTime: 300_000,
+    enabled:
+      toChain?.chainType === ChainType.EVM &&
+      !!destinationChainId &&
+      !!toAddress &&
+      !!getTransactionCount,
+  })
+
+  return {
+    toAddress,
+    hasActivity: Boolean(transactionCount && transactionCount > 0),
+    isLoading,
+    isFetched: isFetched && !error,
+  }
+}

package/src/hooks/useAddressValidation.ts

@@ -0,0 +1,101 @@
+import type { Chain, ChainType } from '@lifi/sdk'
+import { getNameServiceAddress } from '@lifi/sdk'
+import { useChainTypeFromAddress } from '@lifi/widget-provider'
+import { useMutation } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
+
+export enum AddressType {
+  Address = 0,
+  NameService = 1,
+}
+
+type ValidationArgs = {
+  value: string
+  chainType?: ChainType
+  chain?: Chain
+}
+
+type ValidResponse = {
+  address: string
+  addressType: AddressType
+  chainType: ChainType
+  isValid: true
+}
+
+type InvalidResponse = {
+  error: string
+  isValid: false
+}
+
+export const useAddressValidation = (): {
+  validateAddress: (
+    args: ValidationArgs
+  ) => Promise<ValidResponse | InvalidResponse>
+  isValidating: boolean
+} => {
+  const { t } = useTranslation()
+  const { getChainTypeFromAddress } = useChainTypeFromAddress()
+  const sdkClient = useSDKClient()
+
+  const { mutateAsync: validateAddress, isPending: isValidating } = useMutation(
+    {
+      mutationFn: async ({
+        value,
+        chainType,
+        chain,
+      }: ValidationArgs): Promise<ValidResponse | InvalidResponse> => {
+        try {
+          if (!value) {
+            throw new Error()
+          }
+
+          const _chainType = getChainTypeFromAddress(value)
+          if (_chainType) {
+            return {
+              address: value,
+              addressType: AddressType.Address,
+              chainType: _chainType,
+              isValid: true,
+            }
+          }
+
+          const address = await getNameServiceAddress(
+            sdkClient,
+            value,
+            chainType
+          )
+
+          if (address) {
+            const _chainType = getChainTypeFromAddress(address)
+            if (_chainType) {
+              return {
+                address: address,
+                addressType: AddressType.NameService,
+                chainType: _chainType,
+                isValid: true,
+              }
+            }
+          }
+
+          throw new Error()
+        } catch (_) {
+          return {
+            isValid: false,
+            error: t(
+              'error.title.walletAddressInvalid',
+              chain?.name
+                ? { context: 'chain', chainName: chain.name }
+                : undefined
+            ),
+          }
+        }
+      },
+    }
+  )
+
+  return {
+    validateAddress,
+    isValidating,
+  }
+}

package/src/hooks/useAvailableChains.ts

@@ -0,0 +1,108 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { ChainType, createClient, getChains } from '@lifi/sdk'
+import { useQuery } from '@tanstack/react-query'
+import { useCallback, useEffect, useMemo } from 'react'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import type { WidgetConfig } from '../types/widget.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
+import { getQueryKey } from '../utils/queries.js'
+
+type GetChainById = (
+  chainId?: number,
+  chains?: ExtendedChain[]
+) => ExtendedChain | undefined
+
+const supportedChainTypes = [
+  ChainType.EVM,
+  ChainType.SVM,
+  ChainType.UTXO,
+  ChainType.MVM,
+  ChainType.TVM,
+]
+
+export const useAvailableChains = (
+  chainTypes?: ChainType[],
+  widgetConfig?: WidgetConfig
+): {
+  chains: ExtendedChain[] | undefined
+  getChainById: GetChainById
+  isLoading: boolean
+} => {
+  const { chains: internalChains, keyPrefix: internalKeyPrefix } =
+    useWidgetConfig()
+  const internalClient = useSDKClient()
+
+  const externalClient = useMemo(() => {
+    if (!widgetConfig) {
+      return undefined
+    }
+    return createClient({
+      ...widgetConfig.sdkConfig,
+      apiKey: widgetConfig.apiKey,
+      integrator: widgetConfig.integrator ?? window?.location.hostname,
+    })
+  }, [widgetConfig])
+
+  // Overwrite widget config if passed as param
+  const keyPrefix = widgetConfig?.keyPrefix ?? internalKeyPrefix
+  const chains = widgetConfig?.chains ?? internalChains
+
+  const { data, isLoading } = useQuery({
+    queryKey: [
+      getQueryKey('chains', keyPrefix),
+      chains?.types,
+      chains?.allow,
+      chains?.deny,
+      chains?.from,
+      chains?.to,
+      !!externalClient,
+    ] as const,
+    queryFn: async ({ queryKey: [, chainTypesConfig] }) => {
+      const chainsConfigSets = getConfigItemSets(
+        chainTypesConfig,
+        (chains) => new Set(chains)
+      )
+      const chainTypesRequest = supportedChainTypes.filter((chainType) =>
+        isItemAllowedForSets(chainType, chainsConfigSets)
+      )
+      const client = externalClient ?? internalClient
+      const availableChains = await getChains(client, {
+        chainTypes: chainTypes || chainTypesRequest,
+      })
+      client.setChains(availableChains)
+      return availableChains
+    },
+    refetchInterval: 300_000,
+    staleTime: 300_000,
+  })
+
+  // Ensure the current internal client always has chains, even when:
+  // - the query result came from cache (external call populated it first)
+  // - the client was recreated due to config changes (stale closure in queryFn)
+  useEffect(() => {
+    if (data && !externalClient) {
+      internalClient.setChains(data)
+    }
+  }, [data, externalClient, internalClient])
+
+  const getChainById: 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,24 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { useMemo } from 'react'
+import { useAvailableChains } from './useAvailableChains.js'
+
+export const useChain = (
+  chainId?: number
+): {
+  chain: ExtendedChain | undefined
+  isLoading: boolean
+  getChainById: (
+    chainId?: number,
+    chains?: ExtendedChain[]
+  ) => ExtendedChain | undefined
+} => {
+  const { isLoading, getChainById } = useAvailableChains()
+
+  const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])
+
+  return {
+    chain,
+    isLoading,
+    getChainById,
+  }
+}

package/src/hooks/useChainSearch.ts

@@ -0,0 +1,70 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { debounce } from '@mui/material'
+import type { RefObject } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import { useChainSelect } from '../components/ChainSelect/useChainSelect.js'
+import { FormKeyHelper, type FormType } from '../stores/form/types.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+
+export function useChainSearch(
+  formType: FormType,
+  listRef: RefObject<HTMLDivElement | null>,
+  inputRef: RefObject<HTMLInputElement | null>
+): {
+  filteredChains: ExtendedChain[]
+  isLoading: boolean
+  selectedChainId: number | undefined
+  onSelectChainFallback: (chain: ExtendedChain) => void
+  onChange: () => void
+  onClear: () => void
+} {
+  const { chains, isLoading, setCurrentChain } = useChainSelect(formType)
+  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType))
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState('')
+
+  const filteredChains = useMemo(() => {
+    const value = debouncedSearchValue.toLowerCase()
+    return value
+      ? (chains?.filter((chain) => chain.name.toLowerCase().includes(value)) ??
+          [])
+      : (chains ?? [])
+  }, [chains, debouncedSearchValue])
+
+  const debouncedFilterChains = useMemo(
+    () =>
+      debounce((value: string) => {
+        setDebouncedSearchValue(value)
+        listRef.current?.scrollTo(0, 0)
+      }, 250),
+    [listRef]
+  )
+
+  const onSelectChainFallback = useCallback(
+    (chain: ExtendedChain) => {
+      setCurrentChain(chain.id)
+    },
+    [setCurrentChain]
+  )
+
+  const onChange = useCallback(() => {
+    const value = inputRef.current?.value || ''
+    debouncedFilterChains(value)
+  }, [debouncedFilterChains, inputRef])
+
+  const onClear = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.value = ''
+    }
+    setDebouncedSearchValue('')
+    listRef.current?.scrollTo(0, 0)
+  }, [inputRef, listRef])
+
+  return {
+    filteredChains,
+    isLoading,
+    selectedChainId,
+    onSelectChainFallback,
+    onChange,
+    onClear,
+  }
+}