@openocean.finance/widget 1.0.0

package/src/hooks/timer/useStopwatch.ts

@@ -0,0 +1,65 @@
+import { useCallback, useState } from 'react'
+import { useInterval } from './useInterval.js'
+import { getSecondsFromPrevTime, getTimeFromSeconds } from './utils.js'
+
+const DEFAULT_DELAY = 1000
+
+interface UseStopwatchProps {
+  offsetTimestamp: Date
+  autoStart?: boolean
+}
+
+// This implementation was taken from the common js project - https://www.npmjs.com/package/react-timer-hook
+// modified to work in the Widget codebase with Typescript
+export function useStopwatch({
+  autoStart,
+  offsetTimestamp,
+}: UseStopwatchProps) {
+  const [passedSeconds, setPassedSeconds] = useState(
+    getSecondsFromPrevTime(offsetTimestamp, true) || 0
+  )
+  const [prevTime, setPrevTime] = useState(new Date())
+  const [seconds, setSeconds] = useState(
+    passedSeconds + getSecondsFromPrevTime(prevTime, true)
+  )
+  const [isRunning, setIsRunning] = useState(autoStart)
+
+  const start = useCallback(() => {
+    const newPrevTime = new Date()
+    setPrevTime(newPrevTime)
+    setIsRunning(true)
+    setSeconds(passedSeconds + getSecondsFromPrevTime(newPrevTime, true))
+  }, [passedSeconds])
+
+  const pause = useCallback(() => {
+    setPassedSeconds(seconds)
+    setIsRunning(false)
+  }, [seconds])
+
+  const reset = useCallback(
+    (offset = offsetTimestamp, newAutoStart = true) => {
+      const newPassedSeconds = getSecondsFromPrevTime(offset, true) || 0
+      const newPrevTime = new Date()
+      setPrevTime(newPrevTime)
+      setPassedSeconds(newPassedSeconds)
+      setIsRunning(newAutoStart)
+      setSeconds(newPassedSeconds + getSecondsFromPrevTime(newPrevTime, true))
+    },
+    [offsetTimestamp]
+  )
+
+  useInterval(
+    () => {
+      setSeconds(passedSeconds + getSecondsFromPrevTime(prevTime, true))
+    },
+    isRunning ? DEFAULT_DELAY : 0
+  )
+
+  return {
+    ...getTimeFromSeconds(seconds),
+    start,
+    pause,
+    reset,
+    isRunning,
+  }
+}

package/src/hooks/timer/useTimer.ts

@@ -0,0 +1,93 @@
+import { useCallback, useState } from 'react'
+import { useInterval } from './useInterval.js'
+import {
+  getDelayFromExpiryTimestamp,
+  getSecondsFromExpiry,
+  getTimeFromSeconds,
+  validateOnExpire,
+} from './utils.js'
+
+const DEFAULT_DELAY = 1000
+
+interface UseTimerProps {
+  expiryTimestamp: Date
+  onExpire: () => void
+  autoStart?: boolean
+}
+
+// This implementation was taken from the common js project - https://www.npmjs.com/package/react-timer-hook
+// modified to work in the Widget codebase with Typescript
+export function useTimer({
+  expiryTimestamp: expiry,
+  onExpire,
+  autoStart = true,
+}: UseTimerProps) {
+  const [expiryTimestamp, setExpiryTimestamp] = useState(expiry)
+  const [seconds, setSeconds] = useState(() =>
+    getSecondsFromExpiry(expiryTimestamp)
+  )
+  const [isRunning, setIsRunning] = useState(autoStart)
+  const [didStart, setDidStart] = useState(autoStart)
+  const [delay, setDelay] = useState(() =>
+    getDelayFromExpiryTimestamp(expiryTimestamp, DEFAULT_DELAY)
+  )
+
+  const handleExpire = useCallback(() => {
+    validateOnExpire(onExpire) && onExpire()
+    setIsRunning(false)
+    setDelay(0)
+  }, [onExpire])
+
+  const pause = useCallback(() => {
+    setIsRunning(false)
+  }, [])
+
+  const restart = useCallback(
+    (newExpiryTimestamp: Date, newAutoStart = true) => {
+      setDelay(getDelayFromExpiryTimestamp(newExpiryTimestamp, DEFAULT_DELAY))
+      setDidStart(newAutoStart)
+      setIsRunning(newAutoStart)
+      setExpiryTimestamp(newExpiryTimestamp)
+      setSeconds(getSecondsFromExpiry(newExpiryTimestamp))
+    },
+    []
+  )
+
+  const resume = useCallback(() => {
+    const time = new Date()
+    time.setMilliseconds(time.getMilliseconds() + seconds * 1000)
+    restart(time)
+  }, [seconds, restart])
+
+  const start = useCallback(() => {
+    if (didStart) {
+      setSeconds(getSecondsFromExpiry(expiryTimestamp))
+      setIsRunning(true)
+    } else {
+      resume()
+    }
+  }, [expiryTimestamp, didStart, resume])
+
+  useInterval(
+    () => {
+      if (delay !== DEFAULT_DELAY) {
+        setDelay(DEFAULT_DELAY)
+      }
+      const secondsValue = getSecondsFromExpiry(expiryTimestamp)
+      setSeconds(secondsValue)
+      if (secondsValue <= 0) {
+        handleExpire()
+      }
+    },
+    isRunning ? delay : 0
+  )
+
+  return {
+    ...getTimeFromSeconds(seconds),
+    start,
+    pause,
+    resume,
+    restart,
+    isRunning,
+  }
+}

package/src/hooks/timer/utils.ts

@@ -0,0 +1,64 @@
+export function getTimeFromSeconds(secs: number) {
+  const totalSeconds = Math.ceil(secs)
+  const days = Math.floor(totalSeconds / (60 * 60 * 24))
+  const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60))
+  const minutes = Math.floor((totalSeconds % (60 * 60)) / 60)
+  const seconds = Math.floor(totalSeconds % 60)
+
+  return {
+    totalSeconds,
+    seconds,
+    minutes,
+    hours,
+    days,
+  }
+}
+
+export function getSecondsFromExpiry(expiry: Date, shouldRound?: boolean) {
+  const now = new Date().getTime()
+  const milliSecondsDistance = expiry.getTime() - now
+  if (milliSecondsDistance > 0) {
+    const val = milliSecondsDistance / 1000
+    return shouldRound ? Math.round(val) : val
+  }
+  return 0
+}
+
+export function getSecondsFromPrevTime(prevTime: Date, shouldRound?: boolean) {
+  const now = new Date().getTime()
+  const milliSecondsDistance = now - prevTime.getTime()
+  if (milliSecondsDistance > 0) {
+    const val = milliSecondsDistance / 1000
+    return shouldRound ? Math.round(val) : val
+  }
+  return 0
+}
+
+export function validateExpiryTimestamp(expiryTimestamp: Date) {
+  const isValid = new Date(expiryTimestamp).getTime() > 0
+  if (!isValid) {
+    console.warn('useTimer Invalid expiryTimestamp settings', expiryTimestamp)
+  }
+  return isValid
+}
+
+export function validateOnExpire(onExpire: () => void) {
+  const isValid = onExpire && typeof onExpire === 'function'
+  if (onExpire && !isValid) {
+    console.warn('useTimer Invalid onExpire settings function', onExpire)
+  }
+  return isValid
+}
+
+export function getDelayFromExpiryTimestamp(
+  expiryTimestamp: Date,
+  defaultDelay: number
+) {
+  if (!validateExpiryTimestamp(expiryTimestamp)) {
+    return 0
+  }
+
+  const seconds = getSecondsFromExpiry(expiryTimestamp)
+  const extraMilliSeconds = Math.floor((seconds - Math.floor(seconds)) * 1000)
+  return extraMilliSeconds > 0 ? extraMilliSeconds : defaultDelay
+}

package/src/hooks/useAddressActivity.ts

@@ -0,0 +1,39 @@
+import type { Address } from 'viem'
+import { isAddress } from 'viem'
+import { useTransactionCount } from 'wagmi'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+
+interface AddressActivity {
+  hasActivity: boolean
+  isLoading: boolean
+  isFetched: boolean
+  toAddress: string | undefined
+}
+
+export const useAddressActivity = (chainId?: number): AddressActivity => {
+  const [toAddress, toChainId] = useFieldValues('toAddress', 'toChain')
+
+  const destinationChainId = chainId ?? toChainId
+
+  const {
+    data: transactionCount,
+    isLoading,
+    isFetched,
+    error,
+  } = useTransactionCount({
+    address: toAddress as Address,
+    chainId: destinationChainId,
+    query: {
+      enabled: Boolean(toAddress && destinationChainId && isAddress(toAddress)),
+      refetchInterval: 300_000,
+      staleTime: 300_000,
+    },
+  })
+
+  return {
+    toAddress,
+    hasActivity: Boolean(transactionCount && transactionCount > 0),
+    isLoading,
+    isFetched: isFetched && !error,
+  }
+}

package/src/hooks/useAddressValidation.ts

@@ -0,0 +1,89 @@
+import type { Chain, ChainType } from '@lifi/sdk'
+import { getNameServiceAddress } from '@lifi/sdk'
+import { useMutation } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { getChainTypeFromAddress } from '../utils/chainType.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 = () => {
+  const { t } = useTranslation()
+
+  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(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,62 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { ChainType, config, getChains } from '@lifi/sdk'
+import { useQuery } from '@tanstack/react-query'
+import { useCallback } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { isItemAllowed } from '../utils/item.js'
+
+export type GetChainById = (
+  chainId?: number,
+  chains?: ExtendedChain[]
+) => ExtendedChain | undefined
+
+const supportedChainTypes = [ChainType.EVM, ChainType.SVM, ChainType.UTXO]
+
+export const useAvailableChains = (chainTypes?: ChainType[]) => {
+  const { chains } = useWidgetConfig()
+  // const { providers } = useHasExternalWalletProvider();
+  const { data, isLoading } = useQuery({
+    queryKey: [
+      'chains',
+      // providers,
+      chains?.types,
+      chains?.allow,
+      chains?.deny,
+      chains?.from,
+      chains?.to,
+    ] as const,
+    queryFn: async ({ queryKey: [, chainTypesConfig] }) => {
+      const chainTypesRequest = supportedChainTypes
+        // providers.length > 0 ? providers : supportedChainTypes
+        .filter((chainType) => isItemAllowed(chainType, chainTypesConfig))
+
+      const availableChains = await getChains({
+        chainTypes: chainTypes || chainTypesRequest,
+      })
+      config.setChains(availableChains)
+      return availableChains
+    },
+    refetchInterval: 300_000,
+    staleTime: 300_000,
+  })
+
+  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,14 @@
+import { useMemo } from 'react'
+import { useAvailableChains } from './useAvailableChains.js'
+
+export const useChain = (chainId?: number) => {
+  const { isLoading, getChainById } = useAvailableChains()
+
+  const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])
+
+  return {
+    chain,
+    isLoading,
+    getChainById,
+  }
+}

package/src/hooks/useChains.ts

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

package/src/hooks/useDebouncedWatch.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react'
+import type { FormFieldNames } from '../stores/form/types.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+
+export const useDebouncedWatch = <T extends FormFieldNames[]>(
+  delay: number,
+  ...name: 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 = () => {
+  const { elementId } = useWidgetConfig()
+  return elementId
+}

package/src/hooks/useExplorer.ts

@@ -0,0 +1,66 @@
+import type { Chain } from '@lifi/sdk'
+import { useAvailableChains } from '../hooks/useAvailableChains.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+
+const sanitiseBaseUrl = (baseUrl: string) => baseUrl.trim().replace(/\/+$/, '')
+
+export type TransactionLinkProps = { chain?: Chain | number } & (
+  | {
+      txHash: string
+      txLink?: never
+    }
+  | {
+      txHash?: never
+      txLink: string
+    }
+)
+
+export const useExplorer = () => {
+  const { explorerUrls } = useWidgetConfig()
+  const { getChainById } = useAvailableChains()
+
+  const getBaseUrl = (chain: Chain) => {
+    const baseUrl = explorerUrls?.[chain.id]
+      ? explorerUrls[chain.id][0]
+      : chain.metamask.blockExplorerUrls[0]
+
+    return sanitiseBaseUrl(baseUrl)
+  }
+
+  const resolveChain = (chain: Chain | number) =>
+    Number.isFinite(chain) ? getChainById(chain as number) : (chain as Chain)
+
+  const getTransactionLink = ({
+    txHash,
+    txLink,
+    chain,
+  }: TransactionLinkProps) => {
+    if (!txHash && txLink) {
+      return txLink
+    }
+    if (!chain) {
+      throw new Error('Chain parameter is required for getting transaction link')
+    }
+    const resolvedChain = resolveChain(chain)
+    if (!resolvedChain) {
+      throw new Error('Invalid chain')
+    }
+    return `${getBaseUrl(resolvedChain)}/tx/${txHash}`
+  }
+
+  const getAddressLink = (address: string, chain?: Chain | number) => {
+    if (!chain) {
+      throw new Error('Chain parameter is required for getting address link')
+    }
+    const resolvedChain = resolveChain(chain)
+    if (!resolvedChain) {
+      throw new Error('Invalid chain')
+    }
+    return `${getBaseUrl(resolvedChain)}/address/${address}`
+  }
+
+  return {
+    getTransactionLink,
+    getAddressLink,
+  }
+}

package/src/hooks/useFromTokenSufficiency.ts

@@ -0,0 +1,87 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { useAccount } from '@openocean.finance/wallet-management'
+import { keepPreviousData, useQuery } from '@tanstack/react-query'
+import { parseUnits } from 'viem'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { isRouteDone } from '../stores/routes/utils.js'
+import { useTokenAddressBalance } from './useTokenAddressBalance.js'
+import { getTokenBalancesWithRetry } from './useTokenBalance.js'
+
+const refetchInterval = 30_000
+
+export const useFromTokenSufficiency = (route?: RouteExtended) => {
+  const [fromChainId, fromTokenAddress, fromAmount] = useFieldValues(
+    'fromChain',
+    'fromToken',
+    'fromAmount'
+  )
+
+  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: [
+      'from-token-sufficiency-check',
+      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 || 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(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/useGasPrice.ts

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query'
+import { OpenOceanService } from '../services/OpenOceanService.js'
+import { useSettings } from '../stores/settings/useSettings.js'
+
+const gasKey: any = {
+  slow: 'standard',
+  normal: 'instant',
+  fast: 'fast',
+}
+export const useGasPrice = (chainName: string) => {
+  const { gasPrice } = useSettings(['gasPrice'])
+  const { data, isLoading } = useQuery({
+    queryKey: ['gasPrice'],
+    queryFn: () => OpenOceanService.getGasPrice(chainName.toLowerCase()),
+  })
+  return {
+    gasPrice: data?.[gasKey[gasPrice || 'Normal']],
+    isLoading,
+  }
+}