@openocean.finance/widget 1.0.0

package/src/hooks/useGasRecommendation.ts

@@ -0,0 +1,46 @@
+import { type ChainId, getGasRecommendation } from '@lifi/sdk'
+import { useQuery } from '@tanstack/react-query'
+import { useAvailableChains } from './useAvailableChains.js'
+
+const refetchInterval = 60_000
+
+export const useGasRecommendation = (
+  toChainId?: ChainId,
+  fromChain?: ChainId,
+  fromToken?: string
+) => {
+  const { chains } = useAvailableChains()
+
+  const checkRecommendationLiFuel =
+    Boolean(toChainId) &&
+    Boolean(fromChain) &&
+    Boolean(fromToken) &&
+    Boolean(chains?.length)
+
+  const checkRecommendationMaxButton =
+    Boolean(toChainId) && !fromChain && !fromToken && Boolean(chains?.length)
+
+  return useQuery({
+    queryKey: ['gas-recommendation', toChainId, fromChain, fromToken],
+    queryFn: async ({
+      queryKey: [_, toChainId, fromChain, fromToken],
+      signal,
+    }) => {
+      if (!chains?.some((chain) => chain.id === toChainId)) {
+        return null
+      }
+      const gasRecommendation = await getGasRecommendation(
+        {
+          chainId: toChainId as ChainId,
+          fromChain: fromChain as ChainId,
+          fromToken: fromToken as string,
+        },
+        { signal }
+      )
+      return gasRecommendation
+    },
+    enabled: checkRecommendationLiFuel || checkRecommendationMaxButton,
+    refetchInterval,
+    staleTime: refetchInterval,
+  })
+}

package/src/hooks/useGasRefuel.ts

@@ -0,0 +1,88 @@
+import { useAccount } from '@openocean.finance/wallet-management'
+import { useMemo } from 'react'
+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 = () => {
+  const { getChainById } = useAvailableChains()
+
+  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
+    ) {
+      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,
+  ])
+
+  return {
+    enabled: enabled,
+    availble: gasRecommendation?.available,
+    isLoading: isLoading,
+    chain: toChain,
+    fromAmount: gasRecommendation?.available
+      ? gasRecommendation.fromAmount
+      : undefined,
+  }
+}

package/src/hooks/useGasSufficiency.ts

@@ -0,0 +1,164 @@
+import type { EVMChain, RouteExtended, Token } from '@lifi/sdk'
+import { isRelayerStep } from '@lifi/sdk'
+import { useAccount } from '@openocean.finance/wallet-management'
+import { useQuery } from '@tanstack/react-query'
+import { useAvailableChains } from './useAvailableChains.js'
+import { useIsContractAddress } from './useIsContractAddress.js'
+import { getTokenBalancesWithRetry } from './useTokenBalance.js'
+
+export interface GasSufficiency {
+  gasAmount: bigint
+  tokenAmount?: bigint
+  insufficientAmount?: bigint
+  insufficient?: boolean
+  token: Token
+  chain?: EVMChain
+}
+
+const refetchInterval = 30_000
+
+export const useGasSufficiency = (route?: RouteExtended) => {
+  const { getChainById } = useAvailableChains()
+  const { account } = useAccount({
+    chainType: getChainById(route?.fromChainId)?.chainType,
+  })
+
+  const { isContractAddress, isLoading: isContractAddressLoading } =
+    useIsContractAddress(account.address, route?.fromChainId, account.chainType)
+
+  const { data: insufficientGas, isLoading } = useQuery({
+    queryKey: [
+      'gas-sufficiency-check',
+      account.address,
+      route?.id,
+      isContractAddress,
+    ] as const,
+    queryFn: async ({ queryKey: [, accountAddress] }) => {
+      if (!route) {
+        return []
+      }
+
+      // If we have a relayer step with a permit (EIP-2612) for the from token, we don't need to check for gas sufficiency
+      if (
+        isRelayerStep(route.steps[0]) &&
+        route.steps[0].typedData.some((t) => t.primaryType === 'Permit')
+      ) {
+        return []
+      }
+
+      // We assume that LI.Fuel protocol always refuels the destination chain
+      const hasRefuelStep = route.steps
+        .flatMap((step) => step.includedSteps)
+        .some((includedStep) => includedStep.tool === 'gasZip')
+
+      const gasCosts = route.steps
+        .filter((step) => !step.execution || step.execution.status !== 'DONE')
+        .reduce(
+          (groupedGasCosts, step) => {
+            // We need to avoid destination chain step sufficiency check if we have LI.Fuel protocol sub-step
+            const skipDueToRefuel =
+              step.action.fromChainId === route.toChainId && hasRefuelStep
+            if (step.estimate.gasCosts && !skipDueToRefuel) {
+              const { token } = step.estimate.gasCosts[0]
+              const gasCostAmount = step.estimate.gasCosts.reduce(
+                (amount, gasCost) =>
+                  amount + BigInt(Number(gasCost.amount).toFixed(0)),
+                0n
+              )
+              groupedGasCosts[token.chainId] = {
+                gasAmount: groupedGasCosts[token.chainId]
+                  ? groupedGasCosts[token.chainId].gasAmount + gasCostAmount
+                  : gasCostAmount,
+                token,
+              }
+            }
+            // Add fees paid in native tokens to gas sufficiency check (included: false)
+            const nonIncludedFeeCosts = step.estimate.feeCosts?.filter(
+              (feeCost) => !feeCost.included
+            )
+            if (nonIncludedFeeCosts?.length) {
+              const { token } = nonIncludedFeeCosts[0]
+              const feeCostAmount = nonIncludedFeeCosts.reduce(
+                (amount, feeCost) =>
+                  amount + BigInt(Number(feeCost.amount).toFixed(0)),
+                0n
+              )
+              groupedGasCosts[token.chainId] = {
+                gasAmount: groupedGasCosts[token.chainId]
+                  ? groupedGasCosts[token.chainId].gasAmount + feeCostAmount
+                  : feeCostAmount,
+                token,
+              } as any
+            }
+            return groupedGasCosts
+          },
+          {} as Record<number, GasSufficiency>
+        )
+
+      // Check whether we are sending a native token
+      // For native tokens we want to check for the total amount, including the network fee
+      if (
+        route.fromToken.address === gasCosts[route.fromChainId]?.token.address
+      ) {
+        gasCosts[route.fromChainId].tokenAmount =
+          gasCosts[route.fromChainId]?.gasAmount + BigInt(route.fromAmount)
+      }
+
+      const tokenBalances = await getTokenBalancesWithRetry(
+        accountAddress!,
+        Object.values(gasCosts).map((item) => item.token)
+      )
+
+      if (!tokenBalances?.length) {
+        return []
+      }
+      ;[route.fromChainId, route.toChainId].forEach((chainId) => {
+        if (gasCosts[chainId]) {
+          const gasTokenBalance =
+            tokenBalances?.find(
+              (t) =>
+                t.chainId === gasCosts[chainId].token.chainId &&
+                t.address === gasCosts[chainId].token.address
+            )?.amount ?? 0n
+          
+          const insufficient =
+            gasTokenBalance <= 0n ||
+            gasTokenBalance < gasCosts[chainId].gasAmount ||
+            gasTokenBalance < (gasCosts[chainId].tokenAmount ?? 0n)
+
+          const insufficientAmount = insufficient
+            ? gasCosts[chainId].tokenAmount
+              ? gasCosts[chainId].tokenAmount! - gasTokenBalance
+              : gasCosts[chainId].gasAmount - gasTokenBalance
+            : undefined
+
+          gasCosts[chainId] = {
+            ...gasCosts[chainId],
+            insufficient,
+            insufficientAmount,
+            chain: insufficient ? getChainById(chainId) : undefined,
+          }
+        }
+      })
+
+      const gasCostResult = Object.values(gasCosts).filter(
+        (gasCost) => gasCost.insufficient
+      )
+
+      return gasCostResult
+    },
+
+    enabled: Boolean(
+      !isContractAddress &&
+        !isContractAddressLoading &&
+        account.address &&
+        route
+    ),
+    refetchInterval,
+    staleTime: refetchInterval,
+  })
+  return {
+    insufficientGas,
+    isLoading,
+  }
+}

package/src/hooks/useHeader.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react'
+import { useEffect } from 'react'
+import { useHeaderStore } from '../stores/header/useHeaderStore.js'
+
+export function useHeader(title: string, action?: ReactNode) {
+  const { setTitle, setAction } = useHeaderStore((state) => state)
+
+  useEffect(() => {
+    const removeTitle = setTitle(title)
+    const removeAction = action ? setAction(action) : undefined
+    return () => {
+      removeTitle()
+      if (removeAction) {
+        removeAction()
+      }
+    }
+  }, [setTitle, setAction, action, title])
+}

package/src/hooks/useInitializer.ts

@@ -0,0 +1,16 @@
+import { checkPackageUpdates } from '@lifi/sdk'
+import { useEffect } from 'react'
+import { name, version } from '../config/version.js'
+import { useTools } from './useTools.js'
+
+let checkedPackageUpdates = false
+
+export const useInitializer = () => {
+  useTools()
+  useEffect(() => {
+    if (!checkedPackageUpdates && process.env.NODE_ENV === 'development') {
+      checkedPackageUpdates = true
+      checkPackageUpdates(name, version)
+    }
+  }, [])
+}

package/src/hooks/useIsBatchingSupported.ts

@@ -0,0 +1,24 @@
+import { ChainType, isBatchingSupported } from '@lifi/sdk'
+import type { ExtendedChain } from '@lifi/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+export function useIsBatchingSupported(
+  chain?: ExtendedChain,
+  address?: string
+) {
+  const enabled = chain && chain.chainType === ChainType.EVM && !!address
+  const { data, isLoading } = useQuery({
+    queryKey: ['isBatchingSupported', chain?.id, address],
+    queryFn: () => {
+      return isBatchingSupported({ chainId: chain!.id })
+    },
+    enabled,
+    staleTime: 3_600_000,
+    retry: false,
+  })
+
+  return {
+    isBatchingSupported: data,
+    isBatchingSupportedLoading: enabled && isLoading,
+  }
+}

package/src/hooks/useIsCompatibleDestinationAccount.ts

@@ -0,0 +1,58 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { useAccount } from '@openocean.finance/wallet-management'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { isDelegationDesignatorCode } from '../utils/eip7702.js'
+import { useChain } from './useChain.js'
+import { useIsContractAddress } from './useIsContractAddress.js'
+
+export const useIsCompatibleDestinationAccount = (route?: RouteExtended) => {
+  const [formFromChainId, formToChainId, formToAddress] = useFieldValues(
+    'fromChain',
+    'toChain',
+    'toAddress'
+  )
+
+  const fromChainId = route?.fromChainId ?? formFromChainId
+  const toChainId = route?.toChainId ?? formToChainId
+
+  const { chain: fromChain } = useChain(fromChainId)
+  const { chain: toChain } = useChain(toChainId)
+  const { account } = useAccount({
+    chainType: fromChain?.chainType,
+  })
+
+  const fromAddress = route?.fromAddress ?? account.address
+  const toAddress = route
+    ? route.fromAddress !== route.toAddress
+      ? route.toAddress
+      : formToAddress
+    : formToAddress
+
+  const {
+    isContractAddress: isFromContractAddress,
+    contractCode: fromContractCode,
+    isLoading: isFromContractLoading,
+    isFetched: isFromContractFetched,
+  } = useIsContractAddress(fromAddress, fromChainId, fromChain?.chainType)
+  const {
+    isContractAddress: isToContractAddress,
+    isLoading: isToContractLoading,
+    isFetched: isToContractFetched,
+  } = useIsContractAddress(toAddress, toChainId, toChain?.chainType)
+
+  const accountNotDeployedAtDestination =
+    isFromContractAddress &&
+    // We don't want to block transfers for EIP-7702 accounts since they are designed
+    // to maintain EOA-like properties while delegating execution.
+    !isDelegationDesignatorCode(fromContractCode) &&
+    !isToContractAddress &&
+    fromAddress?.toLowerCase() === toAddress?.toLowerCase()
+
+  return {
+    isCompatibleDestinationAccount: !accountNotDeployedAtDestination,
+    isFromContractAddress,
+    isToContractAddress,
+    isLoading: isFromContractLoading || isToContractLoading,
+    isFetched: isFromContractFetched && isToContractFetched,
+  }
+}

package/src/hooks/useIsContractAddress.ts

@@ -0,0 +1,30 @@
+import { ChainType } from '@lifi/sdk'
+import type { Address } from 'viem'
+import { useBytecode } from 'wagmi'
+
+export const useIsContractAddress = (
+  address?: string,
+  chainId?: number,
+  chainType?: ChainType
+) => {
+  const {
+    data: contractCode,
+    isLoading,
+    isFetched,
+  } = useBytecode({
+    address: address as Address,
+    chainId: chainId,
+    query: {
+      refetchInterval: 300_000,
+      staleTime: 300_000,
+      enabled: Boolean(chainType === ChainType.EVM && chainId),
+    },
+  })
+
+  return {
+    isContractAddress: !!contractCode,
+    contractCode,
+    isLoading,
+    isFetched,
+  }
+}

package/src/hooks/useLanguages.ts

@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useSettings } from '../stores/settings/useSettings.js'
+import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
+
+export const useLanguages = () => {
+  const { t, i18n } = useTranslation()
+  const { languages } = useWidgetConfig()
+  const { language } = useSettings(['language'])
+  const { setValue } = useSettingsActions()
+
+  const sortedLanguages = Object.keys(i18n.store.data).sort()
+
+  const selectedLanguageCode = sortedLanguages.includes(
+    language || i18n.resolvedLanguage || ''
+  )
+    ? language || i18n.resolvedLanguage
+    : languages?.default || languages?.allow?.[0]
+
+  return {
+    availableLanguages: sortedLanguages,
+    selectedLanguageCode: selectedLanguageCode,
+    selectedLanguageDisplayName: t('language.name', {
+      lng: selectedLanguageCode,
+    }),
+    setLanguageWithCode: (code: string) => {
+      setValue('language', code)
+      i18n.changeLanguage(code)
+    },
+  }
+}

package/src/hooks/useListHeight.ts

@@ -0,0 +1,108 @@
+import { debounce, useTheme } from '@mui/material'
+import type { RefObject } from 'react'
+import { useLayoutEffect, useState } from 'react'
+import {
+  ElementId,
+  getAppContainer,
+  getHeaderElement,
+  getScrollableContainer,
+} from '../utils/elements.js'
+import { useDefaultElementId } from './useDefaultElementId.js'
+
+const getContentHeight = (
+  elementId: string,
+  listParentRef: RefObject<HTMLUListElement | HTMLDivElement | null>
+) => {
+  const containerElement = getScrollableContainer(elementId)
+
+  const headerElement = getHeaderElement(elementId)
+
+  const listParentElement = listParentRef?.current
+
+  let oldHeight: string | undefined = undefined
+
+  // This covers the case where in full height flex mode when the browser height is reduced
+  // - this allows a virtualised list to be made smaller
+  if (listParentElement) {
+    oldHeight = listParentElement.style.height
+    listParentElement.style.height = '0'
+  }
+
+  if (!containerElement || !headerElement) {
+    console.warn(
+      `Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`
+    )
+    return 0
+  }
+  const { height: containerHeight } = containerElement.getBoundingClientRect()
+  const { height: headerHeight } = headerElement.getBoundingClientRect()
+
+  // This covers the case where in full height flex mode when the browser height is reduced the
+  // - this allows a virtualised list to be set to minimum size
+  if (listParentElement && oldHeight) {
+    listParentElement.style.height = oldHeight
+  }
+
+  return containerHeight - headerHeight
+}
+
+interface UseContentHeightProps {
+  listParentRef: RefObject<HTMLUListElement | HTMLDivElement | null>
+  headerRef?: RefObject<HTMLElement | null>
+}
+
+export const defaultMinListHeight = 360
+export const minMobileListHeight = 160
+
+// NOTE: this hook is implicitly tied to the widget height functionality in the
+//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
+//   CSS changes in those components can have implications for the functionality in this hook
+
+export const useListHeight = ({
+  listParentRef,
+  headerRef,
+}: UseContentHeightProps) => {
+  const elementId = useDefaultElementId()
+  const [contentHeight, setContentHeight] = useState<number>(0)
+  const theme = useTheme()
+
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      setContentHeight(getContentHeight(elementId, listParentRef))
+    }
+
+    const processResize = debounce(() => handleResize(), 40)
+
+    // calling this on initial mount prevents the lists resizing appearing glitchy
+    handleResize()
+
+    const appContainer = getAppContainer(elementId)
+
+    let resizeObserver: ResizeObserver
+    if (appContainer) {
+      resizeObserver = new ResizeObserver(processResize)
+      resizeObserver.observe(appContainer)
+    }
+
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect()
+      }
+    }
+  }, [elementId, listParentRef])
+
+  const minListHeight =
+    theme.container?.height === '100%'
+      ? minMobileListHeight
+      : defaultMinListHeight
+
+  const listHeight = Math.max(
+    contentHeight - (headerRef?.current?.offsetHeight ?? 0),
+    minListHeight
+  )
+
+  return {
+    minListHeight,
+    listHeight,
+  }
+}

package/src/hooks/useNavigateBack.ts

@@ -0,0 +1,26 @@
+import { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+export const useNavigateBack = () => {
+  const navigate = useNavigate()
+
+  const navigateBack = useCallback(() => {
+    // TODO: find a better router with nested memory routers support
+    // https://github.com/remix-run/react-router/pull/9112
+    // https://github.com/remix-run/react-router/discussions/9601
+    //
+    // if (window.history.length > 2) {
+    navigate(-1)
+    // } else {
+    //   navigate(
+    //     window.location.pathname.substring(
+    //       0,
+    //       window.location.pathname.lastIndexOf('/'),
+    //     ) || '/',
+    //     { replace: true },
+    //   );
+    // }
+  }, [navigate])
+
+  return { navigateBack, navigate }
+}