@lifi/widget 3.40.8 → 4.0.0-alpha.1

package/src/hooks/useHasChainExpansion.ts

@@ -1,19 +1,29 @@
+import { useLocation } from '@tanstack/react-router'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { ExpansionType, HiddenUI } from '../types/widget.js'
-import { useExpansionRoutes } from './useExpansionRoutes.js'
+import { navigationRoutes } from '../utils/navigationRoutes.js'
 import { useSwapOnly } from './useSwapOnly.js'
 
 export const useHasChainExpansion = () => {
   const { hiddenUI, subvariantOptions } = useWidgetConfig()
   const swapOnly = useSwapOnly()
-  const expansionType = useExpansionRoutes()
+  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?.includes(HiddenUI.ChainSelect) &&
-    !!subvariantOptions?.wide?.enableChainSidebar
+    !subvariantOptions?.wide?.disableChainSidebar
 
   return [withChainExpansion, expansionType] as const
 }

package/src/hooks/useInitializeSDKProviders.ts

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

package/src/hooks/useIsBatchingSupported.ts

@@ -1,6 +1,8 @@
 import type { ExtendedChain } from '@lifi/sdk'
-import { ChainType, isBatchingSupported } 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'
 
@@ -9,6 +11,8 @@ export function useIsBatchingSupported(
   address?: string
 ) {
   const { keyPrefix } = useWidgetConfig()
+  const sdkClient = useSDKClient()
+  const { isBatchingSupported } = useEthereumContext()
 
   const enabled = Boolean(
     chain && chain.chainType === ChainType.EVM && !!address
@@ -20,10 +24,12 @@ export function useIsBatchingSupported(
       address,
     ],
     queryFn: () => {
-      return isBatchingSupported({
-        chainId: chain!.id,
-        skipReady: true,
-      })
+      return (
+        isBatchingSupported?.(sdkClient, {
+          chainId: chain!.id,
+          skipReady: true,
+        }) ?? false
+      )
     },
     enabled,
     staleTime: 3_600_000,

package/src/hooks/useIsContractAddress.ts

@@ -1,6 +1,6 @@
 import { ChainType } from '@lifi/sdk'
-import type { Address } from 'viem'
-import { useBytecode } from 'wagmi'
+import { useEthereumContext } from '@lifi/widget-provider'
+import { useQuery } from '@tanstack/react-query'
 
 export const useIsContractAddress = (
   address?: string,
@@ -12,23 +12,27 @@ export const useIsContractAddress = (
   isLoading: boolean
   isFetched: boolean
 } => {
+  const { getBytecode } = useEthereumContext()
+
   const {
     data: contractCode,
     isLoading,
     isFetched,
-  } = useBytecode({
-    address: address as Address,
-    chainId: chainId,
-    query: {
-      refetchInterval: 300_000,
-      staleTime: 300_000,
-      enabled: chainType === ChainType.EVM && !!chainId && !!address,
+  } = 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: contractCode ?? undefined,
     isLoading,
     isFetched,
   }

package/src/hooks/useNavigateBack.ts

@@ -1,35 +1,17 @@
+import { useRouter } from '@tanstack/react-router'
 import { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { navigationRoutes } from '../utils/navigationRoutes'
 
 export const useNavigateBack = () => {
-  const navigate = useNavigate()
+  const router = useRouter()
 
-  const navigateBack = useCallback(
-    (toPathname?: string) => {
-      // 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 },
-      //   );
-      // }
+  const navigateBack = useCallback(() => {
+    if (router.history.length > 1) {
+      router.history.go(-1)
+    } else {
+      router.navigate({ to: navigationRoutes.home, replace: true })
+    }
+  }, [router])
 
-      if (toPathname) {
-        navigate(toPathname)
-      } else {
-        navigate(-1)
-      }
-    },
-    [navigate]
-  )
-
-  return { navigateBack, navigate }
+  return navigateBack
 }

package/src/hooks/useRouteExecution.ts

@@ -3,13 +3,14 @@ import { executeRoute, resumeRoute, updateRouteExecution } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useCallback, useEffect, useRef } from 'react'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import {
   useRouteExecutionStore,
   useRouteExecutionStoreContext,
 } from '../stores/routes/RouteExecutionStore.js'
 import {
-  getUpdatedProcess,
+  getUpdatedAction,
   isRouteActive,
   isRouteDone,
   isRouteFailed,
@@ -35,8 +36,8 @@ export const useRouteExecution = ({
   const queryClient = useQueryClient()
   const { account } = useAccount()
   const resumedAfterMount = useRef(false)
-  const { keyPrefix, sdkConfig, subvariant, subvariantOptions } =
-    useWidgetConfig()
+  const { keyPrefix } = useWidgetConfig()
+  const sdkClient = useSDKClient()
   const emitter = useWidgetEvents()
   const routeExecutionStoreContext = useRouteExecutionStoreContext()
   const routeExecution = useRouteExecutionStore(
@@ -55,11 +56,11 @@ export const useRouteExecution = ({
     }
     const clonedUpdatedRoute = structuredClone(updatedRoute)
     updateRoute(clonedUpdatedRoute)
-    const process = getUpdatedProcess(routeExecution.route, clonedUpdatedRoute)
-    if (process) {
+    const action = getUpdatedAction(routeExecution.route, clonedUpdatedRoute)
+    if (action) {
       emitter.emit(WidgetEvent.RouteExecutionUpdated, {
         route: clonedUpdatedRoute,
-        process,
+        action,
       })
     }
     const executionCompleted = isRouteDone(clonedUpdatedRoute)
@@ -67,10 +68,10 @@ export const useRouteExecution = ({
     if (executionCompleted) {
       emitter.emit(WidgetEvent.RouteExecutionCompleted, clonedUpdatedRoute)
     }
-    if (executionFailed && process) {
+    if (executionFailed && action) {
       emitter.emit(WidgetEvent.RouteExecutionFailed, {
         route: clonedUpdatedRoute,
-        process,
+        action,
       })
     }
     if (executionCompleted || executionFailed) {
@@ -128,14 +129,12 @@ export const useRouteExecution = ({
         queryKey: [getQueryKey('routes', keyPrefix)],
         exact: false,
       })
-      return executeRoute(routeExecution.route, {
+      return executeRoute(sdkClient, routeExecution.route, {
         updateRouteHook,
         acceptExchangeRateUpdateHook,
         infiniteApproval: false,
         executeInBackground,
-        adjustZeroOutputFromPreviousStep:
-          subvariant === 'custom' && subvariantOptions?.custom === 'fund',
-        ...sdkConfig?.executionOptions,
+        ...sdkClient.config?.executionOptions,
       })
     },
     onMutate: () => {
@@ -155,14 +154,11 @@ export const useRouteExecution = ({
       if (!routeExecution?.route) {
         throw new Error('Execution route not found.')
       }
-      return resumeRoute(resumedRoute ?? routeExecution.route, {
+      return resumeRoute(sdkClient, resumedRoute ?? routeExecution.route, {
         updateRouteHook,
         acceptExchangeRateUpdateHook,
         infiniteApproval: false,
         executeInBackground,
-        adjustZeroOutputFromPreviousStep:
-          subvariant === 'custom' && subvariantOptions?.custom === 'fund',
-        ...sdkConfig?.executionOptions,
       })
     },
     onMutate: () => {

package/src/hooks/useRoutes.ts

@@ -5,15 +5,17 @@ import {
   getContractCallsQuote,
   getRelayerQuote,
   getRoutes,
-  isGaslessStep,
   LiFiErrorCode,
-  PatcherMagicNumber,
-  patchContractCalls,
+  parseUnits,
 } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
+import {
+  useChainTypeFromAddress,
+  useEthereumContext,
+} from '@lifi/widget-provider'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useCallback, useMemo } from 'react'
-import { parseUnits } from 'viem'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
 import { useIntermediateRoutesStore } from '../stores/routes/useIntermediateRoutesStore.js'
@@ -22,7 +24,6 @@ import { defaultSlippage } from '../stores/settings/createSettingsStore.js'
 import { useSettings } from '../stores/settings/useSettings.js'
 import { WidgetEvent } from '../types/events.js'
 import type { TokensByChain } from '../types/token.js'
-import { getChainTypeFromAddress } from '../utils/chainType.js'
 import { getQueryKey } from '../utils/queries.js'
 import { updateTokenInCache } from '../utils/token.js'
 import { useChain } from './useChain.js'
@@ -43,7 +44,6 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   const {
     subvariant,
     subvariantOptions,
-    sdkConfig,
     contractTool,
     bridges,
     exchanges,
@@ -52,6 +52,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     useRelayerRoutes,
     keyPrefix,
   } = useWidgetConfig()
+  const sdkClient = useSDKClient()
   const setExecutableRoute = useSetExecutableRoute()
   const queryClient = useQueryClient()
   const emitter = useWidgetEvents()
@@ -97,7 +98,8 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   const { chain: toChain } = useChain(toChainId)
   const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } =
     useGasRefuel()
-
+  const { getChainTypeFromAddress } = useChainTypeFromAddress()
+  const { isGaslessStep, disableMessageSigning } = useEthereumContext()
   const { account } = useAccount({ chainType: fromChain?.chainType })
   const { isBatchingSupported, isBatchingSupportedLoading } =
     useIsBatchingSupported(fromChain, account.address)
@@ -105,7 +107,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   const hasAmount = Number(fromTokenAmount) > 0 || Number(toTokenAmount) > 0
 
   const contractCallQuoteEnabled: boolean =
-    subvariant === 'custom' ? Boolean(account.address) : true
+    subvariant === 'custom' ? Boolean(contractCalls && account.address) : true
 
   // When we bridge between ecosystems we need to be sure toAddress is set and has the same chainType as toChain
   // If toAddress is set, it must have the same chainType as toChain
@@ -128,9 +130,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     exchanges?.allow?.length || exchanges?.deny?.length
       ? enabledExchanges
       : undefined
-  const allowSwitchChain = sdkConfig?.routeOptions?.allowSwitchChain
-  const disableMessageSigning =
-    sdkConfig?.executionOptions?.disableMessageSigning
+  const allowSwitchChain = sdkClient.config?.routeOptions?.allowSwitchChain
 
   const isEnabled =
     Boolean(Number(fromChain?.id)) &&
@@ -282,59 +282,18 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           slippage: formattedSlippage,
         })
 
-        const contractCallsResult =
-          await sdkConfig?.executionOptions?.getContractCalls?.({
-            fromChainId,
-            toChainId,
-            fromTokenAddress,
-            toTokenAddress,
-            fromAddress: fromAddress!,
-            toAddress,
-            fromAmount,
-            toAmount,
-            slippage: formattedSlippage,
-          })
-
-        const _contractCalls = contractCalls?.length
-          ? contractCalls
-          : contractCallsResult?.contractCalls
-
-        if (_contractCalls?.length) {
-          if (contractCallsResult?.patcher) {
-            const patchedContractCalls = await patchContractCalls(
-              _contractCalls.map((call) => ({
-                chainId: toChainId,
-                fromTokenAddress: call.fromTokenAddress,
-                targetContractAddress: call.toContractAddress,
-                callDataToPatch: call.toContractCallData,
-                delegateCall: false,
-                patches: [
-                  {
-                    amountToReplace: PatcherMagicNumber.toString(),
-                  },
-                ],
-              })),
-              { signal }
-            )
-
-            _contractCalls.forEach((call, index) => {
-              call.toContractAddress = patchedContractCalls[index].target
-              call.toContractCallData = patchedContractCalls[index].callData
-            })
-          }
-
+        if (subvariant === 'custom' && contractCalls && toAmount) {
           const contractCallQuote = await getContractCallsQuote(
+            sdkClient,
             {
               // Contract calls are enabled only when fromAddress is set
               fromAddress: fromAddress as string,
               fromChain: fromChainId,
               fromToken: fromTokenAddress,
-              ...(toAmount
-                ? { toAmount: toAmount.toString() }
-                : { fromAmount: fromAmount.toString() }),
+              toAmount: toAmount.toString(),
               toChain: toChainId,
               toToken: toTokenAddress,
-              contractCalls: _contractCalls,
+              contractCalls,
               denyBridges: disabledBridges.length ? disabledBridges : undefined,
               denyExchanges: disabledExchanges.length
                 ? disabledExchanges
@@ -357,42 +316,33 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                 )
               : undefined
 
-          const _contractTool =
-            contractCallsResult?.contractTool || contractTool
-          if (customStep && _contractTool) {
+          if (customStep && contractTool) {
             const toolDetails = {
-              key: _contractTool.name,
-              name: _contractTool.name,
-              logoURI: _contractTool.logoURI,
+              key: contractTool.name,
+              name: contractTool.name,
+              logoURI: contractTool.logoURI,
             }
             customStep.toolDetails = toolDetails
             contractCallQuote.toolDetails = toolDetails
           }
 
-          const route: Route = convertQuoteToRoute(contractCallQuote, {
-            adjustZeroOutputFromPreviousStep:
-              subvariant === 'custom' && subvariantOptions?.custom === 'fund',
-          })
+          const route: Route = convertQuoteToRoute(contractCallQuote)
 
           return [route]
         }
 
         // Prevent sending a request for the same chain token combinations.
-        // Exception: proceed anyway if subvariant is custom and subvariantOptions is deposit or fund
+        // Exception: proceed anyway if subvariant is custom and subvariantOptions is deposit
         if (
           fromChainId === toChainId &&
           fromTokenAddress === toTokenAddress &&
-          !(
-            subvariant === 'custom' &&
-            (subvariantOptions?.custom === 'deposit' ||
-              subvariantOptions?.custom === 'fund')
-          )
+          !(subvariant === 'custom' && subvariantOptions?.custom === 'deposit')
         ) {
           return
         }
 
-        const isObservableRelayerRoute = observableRoute?.steps?.some((step) =>
-          isGaslessStep(step, fromChain)
+        const isObservableRelayerRoute = observableRoute?.steps?.some(
+          (step) => !!isGaslessStep?.(step, fromChain)
         )
 
         const shouldUseMainRoutes =
@@ -410,6 +360,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
 
         const mainRoutesPromise = shouldUseMainRoutes
           ? getRoutes(
+              sdkClient,
               {
                 fromAddress,
                 fromAmount: fromAmount.toString(),
@@ -455,6 +406,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
 
         const relayerQuotePromise = shouldUseRelayerQuote
           ? getRelayerQuote(
+              sdkClient,
               {
                 fromAddress,
                 fromAmount: fromAmount.toString(),

package/src/hooks/useToAddressAutoPopulate.ts

@@ -1,10 +1,10 @@
 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 { useSendToWalletActions } from '../stores/settings/useSendToWalletStore.js'
-import { getChainTypeFromAddress } from '../utils/chainType.js'
 import { useAvailableChains } from './useAvailableChains.js'
 
 type UpdateToAddressArgs = {
@@ -24,6 +24,7 @@ export const useToAddressAutoPopulate = () => {
   const { setSelectedBookmark } = useBookmarkActions()
   const { getChainById } = useAvailableChains()
   const { accounts } = useAccount()
+  const { getChainTypeFromAddress } = useChainTypeFromAddress()
 
   return useCallback(
     ({
@@ -90,6 +91,7 @@ export const useToAddressAutoPopulate = () => {
       setFieldValue,
       setSelectedBookmark,
       setSendToWallet,
+      getChainTypeFromAddress,
     ]
   )
 }

package/src/hooks/useToAddressRequirements.ts

@@ -1,6 +1,6 @@
 import type { RouteExtended } from '@lifi/sdk'
-import { isDelegationDesignatorCode } 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'
@@ -14,6 +14,7 @@ export const useToAddressRequirements = (route?: RouteExtended) => {
     'toChain',
     'toAddress'
   )
+  const { isDelegationDesignatorCode } = useEthereumContext()
 
   const fromChainId = route?.fromChainId ?? formFromChainId
   const toChainId = route?.toChainId ?? formToChainId
@@ -49,7 +50,7 @@ export const useToAddressRequirements = (route?: RouteExtended) => {
   // 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)
+    isDelegationDesignatorCode?.(fromContractCode)
 
   const isCrossChainContractAddress =
     isFromContractAddress &&

package/src/hooks/useTokenBalance.ts

@@ -1,6 +1,12 @@
-import { getTokenBalances, type Token, type TokenAmount } from '@lifi/sdk'
+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'
 
@@ -9,6 +15,7 @@ const defaultRefetchInterval = 30_000
 export const useTokenBalance = (accountAddress?: string, token?: Token) => {
   const queryClient = useQueryClient()
   const { keyPrefix } = useWidgetConfig()
+  const sdkClient = useSDKClient()
 
   const tokenBalanceQueryKey = useMemo(
     () =>
@@ -27,6 +34,7 @@ export const useTokenBalance = (accountAddress?: string, token?: Token) => {
       queryKey: [, accountAddress, tokenChainId, tokenAddress],
     }) => {
       const tokenBalances = await getTokenBalancesWithRetry(
+        sdkClient,
         accountAddress as string,
         [token!]
       )
@@ -98,12 +106,14 @@ export const useTokenBalance = (accountAddress?: string, token?: Token) => {
 }
 
 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
     )
@@ -115,10 +125,15 @@ export const getTokenBalancesWithRetry = async (
       await new Promise((resolve) => {
         setTimeout(resolve, 1.5 ** depth * 100)
       })
-      return getTokenBalancesWithRetry(accountAddress, tokens, depth + 1)
+      return getTokenBalancesWithRetry(
+        sdkClient,
+        accountAddress,
+        tokens,
+        depth + 1
+      )
     }
     return tokenBalances
   } catch (_error) {
-    //
+    console.warn(_error)
   }
 }