@lifi/widget 0.0.0-preview-6cc63bac

package/src/hooks/useSettingMonitor.ts

@@ -0,0 +1,93 @@
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { defaultConfigurableSettings } from '../stores/settings/createSettingsStore.js'
+import { useSettingsStore } from '../stores/settings/SettingsStore.js'
+import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
+import { useTools } from './useTools.js'
+
+export const useSettingMonitor = (): {
+  isBridgesChanged: boolean
+  isExchangesChanged: boolean
+  isSlippageChanged: boolean
+  isSlippageNotRecommended: boolean
+  isSlippageOutsideRecommendedLimits: boolean
+  isSlippageUnderRecommendedLimits: boolean
+  isRoutePriorityChanged: boolean
+  isGasPriceChanged: boolean
+  isCustomRouteSettings: boolean
+  isRouteSettingsWithWarnings: boolean
+  reset: () => void
+} => {
+  const [
+    disabledBridges,
+    disabledExchanges,
+    routePriority,
+    slippage,
+    gasPrice,
+  ] = useSettingsStore((state) => [
+    state.disabledBridges,
+    state.disabledExchanges,
+    state.routePriority,
+    state.slippage,
+    state.gasPrice,
+  ])
+  const { tools } = useTools()
+  const config = useWidgetConfig()
+  const { setDefaultSettings, resetSettings } = useSettingsActions()
+
+  const isSlippageChanged = config.slippage
+    ? Number(slippage) !== config.slippage * 100
+    : slippage !== defaultConfigurableSettings.slippage
+
+  const isSlippageOutsideRecommendedLimits =
+    isSlippageChanged && !!slippage && Number(slippage) > 1
+
+  const isSlippageUnderRecommendedLimits =
+    isSlippageChanged && !!slippage && Number(slippage) < 0.1
+
+  const isSlippageNotRecommended = Boolean(
+    isSlippageOutsideRecommendedLimits || isSlippageUnderRecommendedLimits
+  )
+
+  const isRoutePriorityChanged = config.routePriority
+    ? routePriority !== config.routePriority
+    : routePriority !== defaultConfigurableSettings.routePriority
+
+  const isGasPriceChanged = gasPrice !== defaultConfigurableSettings.gasPrice
+
+  const isBridgesChanged = Boolean(disabledBridges.length)
+  const isExchangesChanged = Boolean(disabledExchanges.length)
+
+  const isCustomRouteSettings =
+    isBridgesChanged ||
+    isExchangesChanged ||
+    isSlippageChanged ||
+    isRoutePriorityChanged ||
+    isGasPriceChanged
+
+  const isRouteSettingsWithWarnings = isSlippageNotRecommended
+
+  const reset = () => {
+    if (tools) {
+      resetSettings(
+        tools.bridges.map((tool) => tool.key),
+        tools.exchanges.map((tool) => tool.key)
+      )
+
+      setDefaultSettings(config)
+    }
+  }
+
+  return {
+    isBridgesChanged,
+    isExchangesChanged,
+    isSlippageChanged,
+    isSlippageNotRecommended,
+    isSlippageOutsideRecommendedLimits,
+    isSlippageUnderRecommendedLimits,
+    isRoutePriorityChanged,
+    isGasPriceChanged,
+    isCustomRouteSettings,
+    isRouteSettingsWithWarnings,
+    reset,
+  }
+}

package/src/hooks/useSwapOnly.ts

@@ -0,0 +1,6 @@
+import { useSplitModeStore } from '../stores/settings/useSplitModeStore.js'
+
+export const useSwapOnly = (): boolean => {
+  const state = useSplitModeStore((state) => state.state)
+  return state === 'swap'
+}

package/src/hooks/useToAddressAutoPopulate.ts

@@ -0,0 +1,95 @@
+import { useAccount } from '@lifi/wallet-management'
+import { useChainTypeFromAddress } from '@lifi/widget-provider'
+import { useCallback } from 'react'
+import { useBookmarkActions } from '../stores/bookmarks/useBookmarkActions.js'
+import type { FormType } from '../stores/form/types.js'
+import { useFieldActions } from '../stores/form/useFieldActions.js'
+import { useAvailableChains } from './useAvailableChains.js'
+
+type UpdateToAddressArgs = {
+  formType: FormType
+  selectedToAddress?: string
+  selectedChainId?: number
+  selectedOppositeTokenAddress?: string
+  selectedOppositeChainId?: number
+}
+
+/**
+ * Automatically populates toAddress field if bridging across ecosystems and compatible wallet is connected
+ */
+export const useToAddressAutoPopulate = (): ((
+  args: UpdateToAddressArgs
+) => string | undefined) => {
+  const { setFieldValue } = useFieldActions()
+  const { setSelectedBookmark } = useBookmarkActions()
+  const { getChainById } = useAvailableChains()
+  const { accounts } = useAccount()
+  const { getChainTypeFromAddress } = useChainTypeFromAddress()
+
+  return useCallback(
+    ({
+      formType,
+      selectedToAddress,
+      selectedChainId,
+      selectedOppositeTokenAddress,
+      selectedOppositeChainId,
+    }: UpdateToAddressArgs) => {
+      if (
+        !selectedOppositeTokenAddress ||
+        !selectedOppositeChainId ||
+        !selectedChainId ||
+        !accounts?.length
+      ) {
+        return
+      }
+      const selectedChain = getChainById?.(selectedChainId)
+      const selectedOppositeChain = getChainById?.(selectedOppositeChainId)
+      // Proceed if both chains are defined and of different ecosystem types (indicating cross-ecosystem bridging)
+      if (
+        !selectedChain ||
+        !selectedOppositeChain ||
+        selectedChain.chainType === selectedOppositeChain.chainType
+      ) {
+        return
+      }
+      // Identify the destination chain type based on the bridge direction ('from' or 'to')
+      const destinationChainType =
+        formType === 'from'
+          ? selectedOppositeChain.chainType
+          : selectedChain.chainType
+      // If toAddress is already selected, verify that it matches the destination chain type
+      if (selectedToAddress) {
+        const selectedToAddressChainType =
+          getChainTypeFromAddress(selectedToAddress)
+        if (destinationChainType === selectedToAddressChainType) {
+          return
+        }
+      }
+      // Find connected account compatible with the destination chain type
+      const destinationAccount = accounts?.find(
+        (account) => account.chainType === destinationChainType
+      )
+      // If a compatible destination account is found, set toAddress as if selecting it from the "Send to Wallet" connected wallets page
+      if (destinationAccount?.address) {
+        setFieldValue('toAddress', destinationAccount.address, {
+          isDirty: false,
+          isTouched: true,
+        })
+        setSelectedBookmark({
+          name: destinationAccount.connector?.name,
+          address: destinationAccount.address,
+          chainType: destinationAccount.chainType,
+          isConnectedAccount: true,
+        })
+        return destinationAccount.address
+      }
+    },
+    [
+      accounts,
+      getChainById,
+      setFieldValue,
+      setSelectedBookmark,
+      getChainTypeFromAddress,
+    ]
+  )
+}

package/src/hooks/useToAddressRequirements.ts

@@ -0,0 +1,103 @@
+import type { ChainType, RouteExtended } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+import { useEthereumContext } from '@lifi/widget-provider'
+import { useChain } from '../hooks/useChain.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { useIsContractAddress } from './useIsContractAddress.js'
+
+export const useToAddressRequirements = (
+  route?: RouteExtended
+): {
+  requiredToAddress: boolean
+  requiredToChainType: ChainType | undefined
+  accountNotDeployedAtDestination: boolean
+  accountDeployedAtDestination: boolean
+  toAddress: string | undefined
+  isFromContractAddress: boolean | undefined
+  isToContractAddress: boolean | undefined
+  isLoading: boolean
+  isFetched: boolean
+} => {
+  const { requiredUI, hiddenUI } = useWidgetConfig()
+  const [formFromChainId, formToChainId, formToAddress] = useFieldValues(
+    'fromChain',
+    'toChain',
+    'toAddress'
+  )
+  const { isDelegationDesignatorCode } = useEthereumContext()
+
+  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(account.address, fromChainId, account.chainType)
+  const {
+    isContractAddress: isToContractAddress,
+    isLoading: isToContractLoading,
+    isFetched: isToContractFetched,
+  } = useIsContractAddress(toAddress, toChainId, toChain?.chainType)
+
+  const isDifferentChainType =
+    fromChain && toChain && fromChain.chainType !== toChain.chainType
+
+  // We don't want to block transfers for EIP-7702 accounts since they are designed
+  // to maintain EOA-like properties while delegating execution.
+  const fromContractCodeHasDelegationIndicator =
+    isDelegationDesignatorCode?.(fromContractCode)
+
+  const isCrossChainContractAddress =
+    isFromContractAddress &&
+    fromChainId !== toChainId &&
+    !fromContractCodeHasDelegationIndicator
+
+  const requiredToAddress = Boolean(
+    (isDifferentChainType ||
+      isCrossChainContractAddress ||
+      requiredUI?.toAddress) &&
+      !hiddenUI?.toAddress
+  )
+
+  const accountNotDeployedAtDestination = Boolean(
+    isFromContractAddress &&
+      !fromContractCodeHasDelegationIndicator &&
+      !isToContractAddress &&
+      fromAddress?.toLowerCase() === toAddress?.toLowerCase()
+  )
+
+  const accountDeployedAtDestination = Boolean(
+    isFromContractAddress &&
+      isToContractAddress &&
+      !fromContractCodeHasDelegationIndicator &&
+      fromAddress?.toLowerCase() === toAddress?.toLowerCase()
+  )
+
+  return {
+    requiredToAddress,
+    requiredToChainType: toChain?.chainType,
+    accountNotDeployedAtDestination,
+    accountDeployedAtDestination,
+    toAddress,
+    isFromContractAddress,
+    isToContractAddress,
+    isLoading: isFromContractLoading || isToContractLoading,
+    isFetched: isFromContractFetched && isToContractFetched,
+  }
+}

package/src/hooks/useToAddressReset.ts

@@ -0,0 +1,39 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { useCallback } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useBookmarkActions } from '../stores/bookmarks/useBookmarkActions.js'
+import { useBookmarks } from '../stores/bookmarks/useBookmarks.js'
+import { useFieldActions } from '../stores/form/useFieldActions.js'
+
+export const useToAddressReset = (): {
+  tryResetToAddress: (toChain: ExtendedChain) => void
+} => {
+  const { requiredUI } = useWidgetConfig()
+  const { setFieldValue } = useFieldActions()
+  const { selectedBookmark } = useBookmarks()
+  const { setSelectedBookmark } = useBookmarkActions()
+
+  const tryResetToAddress = useCallback(
+    (toChain: ExtendedChain) => {
+      const requiredToAddress = requiredUI?.toAddress
+
+      const bookmarkSatisfiesToChainType =
+        selectedBookmark?.chainType === toChain?.chainType
+
+      const shouldResetToAddress =
+        !requiredToAddress && !bookmarkSatisfiesToChainType
+
+      // We reset toAddress on each chain change if it's no longer required, ensuring that
+      // switching chain types doesn't leave a stale toAddress from a different ecosystem.
+      if (shouldResetToAddress) {
+        setFieldValue('toAddress', '', { isTouched: true })
+        setSelectedBookmark()
+      }
+    },
+    [setFieldValue, setSelectedBookmark, requiredUI, selectedBookmark]
+  )
+
+  return {
+    tryResetToAddress,
+  }
+}

package/src/hooks/useToken.ts

@@ -0,0 +1,45 @@
+import type { TokenExtended } from '@lifi/sdk'
+import { useMemo } from 'react'
+import { useTokenSearch } from './useTokenSearch.js'
+import { useTokens } from './useTokens.js'
+
+export const useToken = (
+  chainId?: number,
+  tokenAddress?: string,
+  latest?: boolean
+): {
+  token: TokenExtended | undefined
+  isLoading: boolean
+} => {
+  const { allTokens, isLoading: isTokensLoading } = useTokens()
+
+  const token = useMemo(
+    () =>
+      chainId && tokenAddress
+        ? allTokens?.[chainId]?.find(
+            (t) => t.address.toLowerCase() === tokenAddress.toLowerCase()
+          )
+        : undefined,
+    [allTokens, chainId, tokenAddress]
+  )
+
+  const tokenSearchEnabled =
+    !!chainId && !!tokenAddress && (latest || (!isTokensLoading && !token))
+
+  const { token: searchedToken, isLoading: isSearchLoading } = useTokenSearch(
+    chainId,
+    tokenAddress,
+    tokenSearchEnabled
+  )
+
+  const resolvedToken = latest
+    ? (searchedToken ?? token)
+    : (token ?? searchedToken)
+
+  return {
+    token: resolvedToken,
+    isLoading:
+      !resolvedToken &&
+      (isTokensLoading || (tokenSearchEnabled && isSearchLoading)),
+  }
+}

package/src/hooks/useTokenAddressBalance.ts

@@ -0,0 +1,32 @@
+import type { ExtendedChain, TokenAmount } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+import { useChain } from './useChain.js'
+import { useToken } from './useToken.js'
+import { useTokenBalance } from './useTokenBalance.js'
+
+export const useTokenAddressBalance = (
+  chainId?: number,
+  tokenAddress?: string
+): {
+  token: TokenAmount
+  chain: ExtendedChain | undefined
+  isLoading: boolean
+  refetch: () => void
+} => {
+  const { chain, isLoading: isChainLoading } = useChain(chainId)
+  const { account } = useAccount({ chainType: chain?.chainType })
+  const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress)
+
+  const {
+    token: tokenBalance,
+    isLoading: isBalanceLoading,
+    refetch,
+  } = useTokenBalance(account?.address, token)
+
+  return {
+    token: tokenBalance ?? (token as TokenAmount),
+    chain,
+    isLoading: isBalanceLoading || isChainLoading || isTokenLoading,
+    refetch,
+  }
+}

package/src/hooks/useTokenBalance.ts

@@ -0,0 +1,148 @@
+import {
+  getTokenBalances,
+  type SDKClient,
+  type Token,
+  type TokenAmount,
+} from '@lifi/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useCallback, useMemo } from 'react'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getQueryKey } from '../utils/queries.js'
+
+const defaultRefetchInterval = 30_000
+
+export const useTokenBalance = (
+  accountAddress?: string,
+  token?: Token
+): {
+  token: TokenAmount | undefined
+  isLoading: boolean
+  refetch: () => void
+  refetchNewBalance: () => void
+  getTokenBalancesWithRetry: typeof getTokenBalancesWithRetry
+} => {
+  const queryClient = useQueryClient()
+  const { keyPrefix } = useWidgetConfig()
+  const sdkClient = useSDKClient()
+
+  const tokenBalanceQueryKey = useMemo(
+    () =>
+      [
+        getQueryKey('token-balance', keyPrefix),
+        accountAddress,
+        token?.chainId,
+        token?.address,
+      ] as const,
+    [token?.address, token?.chainId, accountAddress, keyPrefix]
+  )
+
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: tokenBalanceQueryKey,
+    queryFn: async ({
+      queryKey: [, accountAddress, tokenChainId, tokenAddress],
+    }) => {
+      const tokenBalances = await getTokenBalancesWithRetry(
+        sdkClient,
+        accountAddress as string,
+        [token!]
+      )
+
+      if (!tokenBalances?.length) {
+        throw new Error('Could not get tokens balance.')
+      }
+
+      const cachedTokenAmount =
+        queryClient.getQueryData<TokenAmount>(tokenBalanceQueryKey)
+
+      const tokenAmount = tokenBalances[0].amount
+
+      if (cachedTokenAmount?.amount !== tokenAmount) {
+        queryClient.setQueryDefaults(tokenBalanceQueryKey, {
+          refetchInterval: defaultRefetchInterval,
+          staleTime: defaultRefetchInterval,
+        })
+      }
+
+      queryClient.setQueriesData<TokenAmount[]>(
+        {
+          queryKey: [
+            getQueryKey('token-balances', keyPrefix),
+            accountAddress,
+            tokenChainId,
+          ],
+        },
+        (data) => {
+          if (data) {
+            const clonedData = [...data]
+            const index = clonedData.findIndex(
+              (dataToken) => dataToken.address === tokenAddress
+            )
+            clonedData[index] = {
+              ...clonedData[index],
+              amount: tokenAmount,
+            }
+            return clonedData
+          }
+        }
+      )
+
+      return {
+        ...tokenBalances[0],
+        amount: tokenAmount,
+      } as TokenAmount
+    },
+
+    enabled: Boolean(accountAddress && token),
+    refetchInterval: defaultRefetchInterval,
+    staleTime: defaultRefetchInterval,
+  })
+
+  const refetchNewBalance = useCallback(() => {
+    queryClient.setQueryDefaults(tokenBalanceQueryKey, {
+      refetchInterval: 250,
+      staleTime: 250,
+    })
+  }, [queryClient, tokenBalanceQueryKey])
+
+  return {
+    token: data,
+    isLoading,
+    refetch,
+    refetchNewBalance,
+    getTokenBalancesWithRetry,
+  }
+}
+
+export const getTokenBalancesWithRetry = async (
+  sdkClient: SDKClient,
+  accountAddress: string,
+  tokens: Token[],
+  depth = 0
+): Promise<TokenAmount[] | undefined> => {
+  try {
+    const tokenBalances = await getTokenBalances(
+      sdkClient,
+      accountAddress as string,
+      tokens
+    )
+    if (!tokenBalances.every((token) => token.blockNumber)) {
+      if (depth > 10) {
+        console.warn('Token balance backoff depth exceeded.')
+        return undefined
+      }
+      await new Promise((resolve) => {
+        setTimeout(resolve, 1.5 ** depth * 100)
+      })
+      return getTokenBalancesWithRetry(
+        sdkClient,
+        accountAddress,
+        tokens,
+        depth + 1
+      )
+    }
+    return tokenBalances
+  } catch (_error) {
+    console.warn(_error)
+  }
+}