@lifi/widget 0.0.0-preview-6cc63bac

package/src/hooks/useGasSufficiency.ts

@@ -0,0 +1,233 @@
+import type { EVMChain, RouteExtended, Token, TokenAmount } from '@lifi/sdk'
+import { ChainType } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getQueryKey } from '../utils/queries.js'
+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
+): {
+  insufficientGas: GasSufficiency[] | undefined
+  isLoading: boolean
+} => {
+  const { getChainById } = useAvailableChains()
+  const { account: EVMAccount, accounts } = useAccount({
+    chainType: ChainType.EVM,
+  })
+  const { keyPrefix, hiddenUI } = useWidgetConfig()
+  const sdkClient = useSDKClient()
+
+  const { relevantAccounts, relevantAccountsQueryKey } = useMemo(() => {
+    const chainTypes = route?.steps.reduce((acc, step) => {
+      const chainType = getChainById(step.action.fromChainId)?.chainType
+      if (chainType) {
+        acc.add(chainType)
+      }
+      return acc
+    }, new Set<ChainType>())
+
+    const relevantAccounts = accounts.filter(
+      (account) =>
+        account.isConnected &&
+        account.address &&
+        chainTypes?.has(account.chainType)
+    )
+    return {
+      relevantAccounts,
+      relevantAccountsQueryKey: relevantAccounts
+        .map((account) => account.address)
+        .join(','),
+    }
+  }, [accounts, route?.steps, getChainById])
+
+  const { isContractAddress, isLoading: isContractAddressLoading } =
+    useIsContractAddress(
+      EVMAccount.address,
+      route?.fromChainId,
+      EVMAccount.chainType
+    )
+
+  const { data: insufficientGas, isLoading } = useQuery<GasSufficiency[]>({
+    queryKey: [
+      getQueryKey('gas-sufficiency-check', keyPrefix),
+      relevantAccountsQueryKey,
+      route?.id,
+      isContractAddress,
+    ] as const,
+    queryFn: async () => {
+      if (!route) {
+        return []
+      }
+
+      // Filter out steps that are relayer steps or have primaryType 'Permit' or 'Order'
+      const filteredSteps = route.steps.filter(
+        (step) =>
+          !step.typedData?.some(
+            (t) => t.primaryType === 'Permit' || t.primaryType === 'Order'
+          )
+      )
+
+      // If all steps are filtered out, we don't need to check for gas sufficiency
+      if (!filteredSteps.length) {
+        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 = filteredSteps
+        .filter((step) => 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
+              )
+              if (gasCostAmount > 0n) {
+                groupedGasCosts[token.chainId] = {
+                  gasAmount: groupedGasCosts[token.chainId]
+                    ? groupedGasCosts[token.chainId].gasAmount + gasCostAmount
+                    : gasCostAmount,
+                  token,
+                  chain: getChainById(token.chainId),
+                }
+              }
+            }
+            // 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
+              )
+              if (feeCostAmount > 0n) {
+                groupedGasCosts[token.chainId] = {
+                  gasAmount: groupedGasCosts[token.chainId]
+                    ? groupedGasCosts[token.chainId].gasAmount + feeCostAmount
+                    : feeCostAmount,
+                  token,
+                  chain: getChainById(token.chainId),
+                }
+              }
+            }
+            return groupedGasCosts
+          },
+          {} as Record<string, 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 gasCostsValues = Object.values(gasCosts)
+
+      const balanceChecks = await Promise.allSettled(
+        relevantAccounts.map((account) => {
+          const relevantTokens = gasCostsValues
+            .filter((gasCost) => gasCost.chain?.chainType === account.chainType)
+            .map((item) => item.token)
+
+          return getTokenBalancesWithRetry(
+            sdkClient,
+            account.address!,
+            relevantTokens
+          )
+        })
+      )
+
+      const tokenBalances = balanceChecks
+        .filter(
+          (result): result is PromiseFulfilledResult<TokenAmount[]> =>
+            result.status === 'fulfilled' && Boolean(result.value)
+        )
+        .flatMap((result) => result.value)
+
+      if (!tokenBalances?.length) {
+        return []
+      }
+
+      Object.keys(gasCosts).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(Number(chainId)) : undefined,
+          }
+        }
+      })
+
+      const gasCostResult = Object.values(gasCosts).filter(
+        (gasCost) => gasCost.insufficient
+      )
+
+      return gasCostResult
+    },
+
+    enabled: Boolean(
+      !isContractAddress &&
+        !isContractAddressLoading &&
+        relevantAccounts.length > 0 &&
+        route &&
+        !hiddenUI?.insufficientGasMessage
+    ),
+    refetchInterval,
+    staleTime: refetchInterval,
+  })
+
+  return {
+    insufficientGas,
+    isLoading,
+  }
+}

package/src/hooks/useHasChainExpansion.ts

@@ -0,0 +1,32 @@
+import { useLocation } from '@tanstack/react-router'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { ExpansionType } from '../types/widget.js'
+import { navigationRoutes } from '../utils/navigationRoutes.js'
+import { useSwapOnly } from './useSwapOnly.js'
+
+export const useHasChainExpansion = (): readonly [
+  boolean,
+  ExpansionType | null,
+] => {
+  const { hiddenUI } = useWidgetConfig()
+  const swapOnly = useSwapOnly()
+  const { pathname } = useLocation()
+
+  const expansionType =
+    pathname === navigationRoutes.home
+      ? ExpansionType.Routes
+      : pathname.endsWith(navigationRoutes.fromToken)
+        ? ExpansionType.FromChain
+        : pathname.endsWith(navigationRoutes.toToken)
+          ? ExpansionType.ToChain
+          : null
+
+  const withChainExpansion =
+    (expansionType === ExpansionType.FromChain ||
+      expansionType === ExpansionType.ToChain) &&
+    !(swapOnly && expansionType === ExpansionType.ToChain) &&
+    !hiddenUI?.chainSelect &&
+    !hiddenUI?.chainSidebar
+
+  return [withChainExpansion, expansionType] as const
+}

package/src/hooks/useHeader.ts

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

package/src/hooks/useInitializeSDKProviders.ts

@@ -0,0 +1,12 @@
+import { useSDKProviders } from '@lifi/widget-provider'
+import { useEffect } from 'react'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
+
+export const useInitializeSDKProviders = (): void => {
+  const sdkProviders = useSDKProviders()
+  const sdkClient = useSDKClient()
+
+  useEffect(() => {
+    sdkClient.setProviders(sdkProviders)
+  }, [sdkClient, sdkProviders])
+}

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 = (): void => {
+  useTools()
+  useEffect(() => {
+    if (!checkedPackageUpdates && process.env.NODE_ENV === 'development') {
+      checkedPackageUpdates = true
+      checkPackageUpdates(name, version)
+    }
+  }, [])
+}

package/src/hooks/useIsBatchingSupported.ts

@@ -0,0 +1,46 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { ChainType } from '@lifi/sdk'
+import { useEthereumContext } from '@lifi/widget-provider'
+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'
+
+export function useIsBatchingSupported(
+  chain?: ExtendedChain,
+  address?: string
+): {
+  isBatchingSupported: boolean | undefined
+  isBatchingSupportedLoading: boolean
+} {
+  const { keyPrefix } = useWidgetConfig()
+  const sdkClient = useSDKClient()
+  const { isBatchingSupported } = useEthereumContext()
+
+  const enabled = Boolean(
+    chain && chain.chainType === ChainType.EVM && !!address
+  )
+  const { data, isLoading } = useQuery({
+    queryKey: [
+      getQueryKey('isBatchingSupported', keyPrefix),
+      chain?.id,
+      address,
+    ],
+    queryFn: () => {
+      return (
+        isBatchingSupported?.(sdkClient, {
+          chainId: chain!.id,
+          skipReady: true,
+        }) ?? false
+      )
+    },
+    enabled,
+    staleTime: 3_600_000,
+    retry: false,
+  })
+
+  return {
+    isBatchingSupported: data,
+    isBatchingSupportedLoading: enabled && isLoading,
+  }
+}

package/src/hooks/useIsContractAddress.ts

@@ -0,0 +1,39 @@
+import { ChainType } from '@lifi/sdk'
+import { useEthereumContext } from '@lifi/widget-provider'
+import { useQuery } from '@tanstack/react-query'
+
+export const useIsContractAddress = (
+  address?: string,
+  chainId?: number,
+  chainType?: ChainType
+): {
+  isContractAddress: boolean
+  contractCode?: string
+  isLoading: boolean
+  isFetched: boolean
+} => {
+  const { getBytecode } = useEthereumContext()
+
+  const {
+    data: contractCode,
+    isLoading,
+    isFetched,
+  } = useQuery({
+    queryKey: ['getBytecode', address, chainId],
+    queryFn: async () => {
+      const code = await getBytecode?.(chainId!, address!)
+      return code ?? null
+    },
+    refetchInterval: 300_000,
+    staleTime: 300_000,
+    enabled:
+      chainType === ChainType.EVM && !!chainId && !!address && !!getBytecode,
+  })
+
+  return {
+    isContractAddress: !!contractCode,
+    contractCode: contractCode ?? undefined,
+    isLoading,
+    isFetched,
+  }
+}

package/src/hooks/useLanguages.ts

@@ -0,0 +1,93 @@
+import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { allLanguages } from '../providers/I18nProvider/constants.js'
+import { loadLocale } from '../providers/I18nProvider/i18n.js'
+import type {
+  LanguageKey,
+  LanguageResource,
+} from '../providers/I18nProvider/types.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useSettings } from '../stores/settings/useSettings.js'
+import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
+
+export const useLanguages = (): {
+  availableLanguages: LanguageKey[]
+  selectedLanguageCode: LanguageKey | string
+  setLanguageWithCode: (languageCode: LanguageKey) => void
+} => {
+  const { i18n } = useTranslation()
+  const { languages: languagesConfig, languageResources } = useWidgetConfig()
+  const { language } = useSettings(['language'])
+  const { setValues } = useSettingsActions()
+
+  const sortedLanguages = useMemo(() => {
+    const loadedLanguageKeys = Object.keys(i18n.store.data)
+    // NB: custom language resources added statically to i18n might not exist in allLanguages (language files)
+    const allLanguagesWithCustom = [
+      ...new Set([...allLanguages, ...loadedLanguageKeys]),
+    ]
+    let supportedLanguages: (LanguageKey | string)[] = []
+    if (!languagesConfig) {
+      supportedLanguages = allLanguagesWithCustom
+    } else {
+      const languagesConfigSets = getConfigItemSets(
+        languagesConfig,
+        (languages) => new Set(languages)
+      )
+      supportedLanguages = allLanguagesWithCustom.filter((language) =>
+        isItemAllowedForSets(language, languagesConfigSets)
+      )
+    }
+    return supportedLanguages.sort()
+  }, [languagesConfig, i18n.store.data])
+
+  const handleLanguageChange = useCallback(
+    async (languageKey: string) => {
+      // Cache the language resource to prevent blinking
+      // after switching languages and reloading the page.
+      let newLanguageCache: LanguageResource | undefined
+      if (
+        !i18n.hasResourceBundle(languageKey, 'translation') &&
+        languageKey !== 'en'
+      ) {
+        await loadLocale(
+          languageKey as LanguageKey,
+          languageResources?.[languageKey as LanguageKey]
+        ).then((languageResource) => {
+          i18n.addResourceBundle(
+            languageKey,
+            'translation',
+            languageResource,
+            true,
+            true
+          )
+          newLanguageCache = languageResource
+        })
+      } else {
+        // If the language is already loaded, just cache the existing resource
+        newLanguageCache = i18n.getResourceBundle(languageKey, 'translation')
+      }
+
+      // Set the new language and language cache to the settings store.
+      setValues({ language: languageKey, languageCache: newLanguageCache })
+
+      // Update the i18n instance to the new language.
+      if (languageKey !== i18n.language) {
+        await i18n.changeLanguage(languageKey)
+      }
+    },
+    [i18n, languageResources, setValues]
+  )
+
+  const selectedLanguage = language || i18n.resolvedLanguage || ''
+  const selectedLanguageCode = sortedLanguages.includes(selectedLanguage)
+    ? selectedLanguage
+    : languagesConfig?.default || 'en'
+
+  return {
+    availableLanguages: sortedLanguages as LanguageKey[],
+    selectedLanguageCode: selectedLanguageCode,
+    setLanguageWithCode: handleLanguageChange,
+  }
+}

package/src/hooks/useListHeight.ts

@@ -0,0 +1,107 @@
+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
+
+  // 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>
+}
+
+const defaultMinListHeight = 360
+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): { listHeight: number } => {
+  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 {
+    listHeight,
+  }
+}

package/src/hooks/useLongPress.ts

@@ -0,0 +1,60 @@
+import { useCallback, useRef } from 'react'
+
+export const useLongPress = (
+  callback: () => void = () => {},
+  ms: number = 500
+): {
+  onPointerDown: (e: React.PointerEvent) => void
+  onPointerUp: () => void
+  onPointerLeave: () => void
+  onPointerCancel: () => void
+  onPointerMove: (e: React.PointerEvent) => void
+} => {
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+  const isPressedRef = useRef(false)
+  const startPosRef = useRef<{ x: number; y: number } | null>(null)
+
+  const start = useCallback(
+    (e: React.PointerEvent) => {
+      isPressedRef.current = true
+      startPosRef.current = { x: e.clientX, y: e.clientY }
+      timerRef.current = setTimeout(() => {
+        if (isPressedRef.current) {
+          callback()
+        }
+      }, ms)
+    },
+    [callback, ms]
+  )
+
+  const clear = useCallback(() => {
+    isPressedRef.current = false
+    startPosRef.current = null
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  // Based on https://github.com/minwork/react/tree/main/packages/use-long-press
+  const move = useCallback(
+    (e: React.PointerEvent) => {
+      if (isPressedRef.current && startPosRef.current) {
+        const dx = Math.abs(e.clientX - startPosRef.current.x)
+        const dy = Math.abs(e.clientY - startPosRef.current.y)
+        const limit = 25
+        if (dx > limit || dy > limit) {
+          clear() // cancel on movement
+        }
+      }
+    },
+    [clear]
+  )
+
+  return {
+    onPointerDown: start,
+    onPointerUp: clear,
+    onPointerLeave: clear,
+    onPointerCancel: clear,
+    onPointerMove: move,
+  }
+}

package/src/hooks/useNavigateBack.ts

@@ -0,0 +1,17 @@
+import { useRouter } from '@tanstack/react-router'
+import { useCallback } from 'react'
+import { navigationRoutes } from '../utils/navigationRoutes.js'
+
+export const useNavigateBack = (): (() => void) => {
+  const router = useRouter()
+
+  const navigateBack = useCallback(() => {
+    if (router.history.length > 1) {
+      router.history.go(-1)
+    } else {
+      router.navigate({ to: navigationRoutes.home, replace: true })
+    }
+  }, [router])
+
+  return navigateBack
+}