@lifi/widget 4.0.0-beta.9 → 4.1.0

package/src/hooks/usePacedRouteExecution.ts

@@ -0,0 +1,45 @@
+import type { ExchangeRateUpdateParams, RouteExtended } from '@lifi/sdk'
+import { useMemo } from 'react'
+import { RouteExecutionStatus } from '../stores/routes/types.js'
+import { usePacedValue } from './usePacedValue.js'
+import { useRouteExecution } from './useRouteExecution.js'
+
+interface PacedRouteExecutionProps {
+  routeId: string
+  onAcceptExchangeRateUpdate?(
+    resolver: (value: boolean) => void,
+    data: ExchangeRateUpdateParams
+  ): void
+}
+
+/**
+ * Wraps {@link useRouteExecution} and paces `route`/`status` so the
+ * `ExecutionStatusCard` animation has time to play between updates. Only the
+ * display is paced — events and store writes happen at the SDK's real speed.
+ */
+export function usePacedRouteExecution({
+  routeId,
+  onAcceptExchangeRateUpdate,
+}: PacedRouteExecutionProps): {
+  executeRoute: () => void
+  restartRoute: () => void
+  deleteRoute: () => void
+  route: RouteExtended | undefined
+  status: RouteExecutionStatus | undefined
+} {
+  const { executeRoute, restartRoute, deleteRoute, route, status } =
+    useRouteExecution({ routeId, onAcceptExchangeRateUpdate })
+
+  // Pace route and status as one value so they always match. Skip pacing while
+  // Idle, so the review screen shows live data.
+  const live = useMemo(() => ({ route, status }), [route, status])
+  const display = usePacedValue(live, status !== RouteExecutionStatus.Idle)
+
+  return {
+    executeRoute,
+    restartRoute,
+    deleteRoute,
+    route: display.route,
+    status: display.status,
+  }
+}

package/src/hooks/usePacedValue.ts

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from 'react'
+
+/** Smallest gap between UI updates, in milliseconds. */
+const DISPLAY_INTERVAL = 1200
+
+/**
+ * Returns `live`, but changes it at most once every {@link DISPLAY_INTERVAL}
+ * milliseconds. If `live` changes several times within that window, only the
+ * newest value is shown.
+ *
+ * Set `paced` to `false` to turn this off and update on every change.
+ */
+export function usePacedValue<T>(live: T, paced = true): T {
+  const [value, setValue] = useState(live)
+
+  const shown = useRef(live)
+  // 0 so the first update shows immediately, then throttles.
+  const windowStart = useRef(0)
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  useEffect(() => {
+    if (live === shown.current) {
+      return
+    }
+    if (!paced) {
+      shown.current = live
+      setValue(live)
+      return
+    }
+    const show = () => {
+      windowStart.current = Date.now()
+      shown.current = live
+      setValue(live)
+    }
+    const remaining = windowStart.current + DISPLAY_INTERVAL - Date.now()
+    if (remaining <= 0) {
+      show()
+      return
+    }
+    timer.current = setTimeout(show, remaining)
+    return () => clearTimeout(timer.current)
+  }, [live, paced])
+
+  return value
+}

package/src/hooks/useRouteExecution.ts

@@ -1,4 +1,4 @@
-import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk'
+import type { ExchangeRateUpdateParams, Route, RouteExtended } from '@lifi/sdk'
 import { executeRoute, resumeRoute, updateRouteExecution } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
@@ -9,6 +9,7 @@ import {
   useRouteExecutionStore,
   useRouteExecutionStoreContext,
 } from '../stores/routes/RouteExecutionStore.js'
+import type { RouteExecutionStatus } from '../stores/routes/types.js'
 import {
   getUpdatedAction,
   isRouteActive,
@@ -32,7 +33,13 @@ export const useRouteExecution = ({
   routeId,
   executeInBackground,
   onAcceptExchangeRateUpdate,
-}: RouteExecutionProps) => {
+}: RouteExecutionProps): {
+  executeRoute: () => void
+  restartRoute: () => void
+  deleteRoute: () => void
+  route: RouteExtended | undefined
+  status: RouteExecutionStatus | undefined
+} => {
   const queryClient = useQueryClient()
   const { account } = useAccount()
   const resumedAfterMount = useRef(false)
@@ -132,7 +139,6 @@ export const useRouteExecution = ({
       return executeRoute(sdkClient, routeExecution.route, {
         updateRouteHook,
         acceptExchangeRateUpdateHook,
-        infiniteApproval: false,
         executeInBackground,
         ...sdkClient.config?.executionOptions,
       })
@@ -144,60 +150,59 @@ export const useRouteExecution = ({
         emitter.emit(WidgetEvent.RouteExecutionStarted, routeExecution.route)
       }
     },
+    onError: (error) => {
+      console.warn('Execution failed!', routeId, error)
+    },
+    onSuccess: (route: Route) => {
+      // biome-ignore lint/suspicious/noConsole: logs route information
+      console.log('Executed successfully!', route)
+    },
   })
 
   const resumeRouteMutation = useMutation({
-    mutationFn: (resumedRoute?: Route) => {
+    mutationFn: (args?: { route?: Route; executeInBackground?: boolean }) => {
       if (!account.isConnected) {
         throw new Error('Account is not connected.')
       }
       if (!routeExecution?.route) {
         throw new Error('Execution route not found.')
       }
-      return resumeRoute(sdkClient, resumedRoute ?? routeExecution.route, {
+      return resumeRoute(sdkClient, args?.route ?? routeExecution.route, {
         updateRouteHook,
         acceptExchangeRateUpdateHook,
-        infiniteApproval: false,
-        executeInBackground,
+        executeInBackground: args?.executeInBackground ?? executeInBackground,
       })
     },
     onMutate: () => {
       // biome-ignore lint/suspicious/noConsole: logs route information
       console.log('Resumed to execution.', routeId)
     },
+    onError: (error) => {
+      console.warn('Resumed execution failed.', routeId, error)
+    },
+    onSuccess: (route) => {
+      // biome-ignore lint/suspicious/noConsole: logs route information
+      console.log('Resumed execution successful.', route)
+    },
   })
 
   const _executeRoute = useCallback(() => {
-    executeRouteMutation.mutateAsync(undefined, {
-      onError: (error) => {
-        console.warn('Execution failed!', routeId, error)
-      },
-      onSuccess: (route: Route) => {
-        // biome-ignore lint/suspicious/noConsole: logs route information
-        console.log('Executed successfully!', route)
-      },
-    })
-  }, [executeRouteMutation, routeId])
+    executeRouteMutation.mutateAsync(undefined)
+  }, [executeRouteMutation])
 
   const _resumeRoute = useCallback(
     (route?: Route) => {
-      resumeRouteMutation.mutateAsync(route, {
-        onError: (error) => {
-          console.warn('Resumed execution failed.', routeId, error)
-        },
-        onSuccess: (route) => {
-          // biome-ignore lint/suspicious/noConsole: logs route information
-          console.log('Resumed execution successful.', route)
-        },
-      })
+      resumeRouteMutation.mutateAsync({ route })
     },
-    [resumeRouteMutation, routeId]
+    [resumeRouteMutation]
   )
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when routeId changes
   const restartRouteMutation = useCallback(() => {
-    _resumeRoute(routeExecution?.route)
-  }, [_resumeRoute, routeExecution?.route, routeId])
+    resumeRouteMutation.mutateAsync({
+      route: routeExecution?.route,
+      executeInBackground: false,
+    })
+  }, [resumeRouteMutation, routeExecution?.route])
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: run only when routeId changes
   const deleteRouteMutation = useCallback(() => {

package/src/hooks/useRouteExecutionMessage.ts

@@ -0,0 +1,100 @@
+import type { ExecutionActionType, RouteExtended } from '@lifi/sdk'
+import { useTranslation } from 'react-i18next'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { RouteExecutionStatus } from '../stores/routes/types.js'
+import { getActionMessage } from '../utils/getActionMessage.js'
+import { getErrorMessage } from '../utils/getErrorMessage.js'
+import { useAvailableChains } from './useAvailableChains.js'
+
+export const useRouteExecutionMessage = (
+  route: RouteExtended,
+  status: RouteExecutionStatus
+): { title: string | undefined; message: string | undefined } => {
+  const { mode, modeOptions } = useWidgetConfig()
+  const { t } = useTranslation()
+  const { getChainById } = useAvailableChains()
+
+  const transactionType =
+    route.fromChainId === route.toChainId ? 'swap' : 'bridge'
+
+  let title: string | undefined
+  let message: string | undefined
+
+  switch (status) {
+    case RouteExecutionStatus.Pending: {
+      // Use the first executing step, not the last one — in a multi-step route
+      // the active step is often not the last.
+      const activeStep =
+        route.steps.find(
+          (s) =>
+            s.execution?.status === 'PENDING' ||
+            s.execution?.status === 'ACTION_REQUIRED'
+        ) ?? route.steps.at(-1)
+      const lastAction = activeStep?.execution?.actions?.at(-1)
+      const actionMessage =
+        activeStep && lastAction
+          ? getActionMessage(
+              t,
+              activeStep,
+              lastAction.type,
+              lastAction.status,
+              lastAction.substatus,
+              mode,
+              modeOptions
+            )
+          : undefined
+      // Fall back to a generic title when the step has no action to describe yet
+      // (just after a restart, or before the first action exists).
+      title =
+        actionMessage?.title ?? t(`main.process.${transactionType}.pending`)
+      message = actionMessage?.message
+      break
+    }
+    case RouteExecutionStatus.Done: {
+      title =
+        mode === 'custom'
+          ? t(
+              `success.title.${modeOptions?.custom?.type ?? 'checkout'}Successful`
+            )
+          : t(`success.title.${transactionType}Successful`)
+      break
+    }
+    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial: {
+      title = t(`success.title.${transactionType}PartiallySuccessful`)
+      message = t('success.message.exchangePartiallySuccessful', {
+        tool: route.steps.at(-1)?.toolDetails.name,
+        tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
+      })
+      break
+    }
+    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded: {
+      title = t('success.title.refundIssued')
+      message = t('success.message.exchangePartiallySuccessful', {
+        tool: route.steps.at(-1)?.toolDetails.name,
+        tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
+      })
+      break
+    }
+    case RouteExecutionStatus.Failed: {
+      const step = route.steps.find(
+        (step) => step.execution?.status === 'FAILED'
+      )
+      if (!step) {
+        break
+      }
+      const action = step.execution?.actions?.find(
+        (action) => action.status === 'FAILED'
+      ) || {
+        status: 'FAILED',
+        type: 'EXECUTION' as ExecutionActionType,
+        error: step.execution?.error,
+      } // synthetic action to represent a failed execution with no actions
+      const actionMessage = getErrorMessage(t, getChainById, step, action)
+      title = actionMessage.title
+      message = actionMessage.message
+      break
+    }
+  }
+
+  return { title, message }
+}

package/src/hooks/useRouteRequiredAccountConnection.ts

@@ -7,7 +7,11 @@ import { useChain } from './useChain.js'
 export const useRouteRequiredAccountConnection = (
   route?: Route,
   chain?: ExtendedChain
-) => {
+): {
+  connected: boolean
+  missingChain?: ExtendedChain
+  missingAccountAddress?: string
+} => {
   const { account, accounts } = useAccount({ chainType: chain?.chainType })
   const [toAddress] = useFieldValues('toAddress')
   const { getChainById } = useChain()

package/src/hooks/useRoutes.ts

@@ -1,4 +1,4 @@
-import type { Route, Token } from '@lifi/sdk'
+import type { ExtendedChain, Route, Token } from '@lifi/sdk'
 import {
   ChainType,
   convertQuoteToRoute,
@@ -40,14 +40,27 @@ interface RoutesProps {
   observableRoute?: Route
 }
 
-export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
+export const useRoutes = ({
+  observableRoute,
+}: RoutesProps = {}): {
+  routes: Route[] | undefined
+  isLoading: boolean
+  isFetching: boolean
+  isFetched: boolean
+  dataUpdatedAt: number
+  refetchTime: number
+  refetch: () => void
+  fromChain: ExtendedChain | undefined
+  toChain: ExtendedChain | undefined
+  queryKey: readonly unknown[]
+  setReviewableRoute: (route: Route) => void
+} => {
   const {
-    subvariant,
-    subvariantOptions,
+    mode,
+    modeOptions,
     contractTool,
     bridges,
     exchanges,
-    fee,
     feeConfig,
     useRelayerRoutes,
     keyPrefix,
@@ -107,7 +120,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   const hasAmount = Number(fromTokenAmount) > 0 || Number(toTokenAmount) > 0
 
   const contractCallQuoteEnabled: boolean =
-    subvariant === 'custom' ? Boolean(contractCalls && account.address) : true
+    mode === '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
@@ -164,11 +177,11 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
         allowedBridges,
         allowedExchanges,
         routePriority,
-        subvariant,
+        mode,
         allowSwitchChain,
         enabledRefuel && enabledAutoRefuel,
         gasRecommendationFromAmount,
-        feeConfig?.fee || fee,
+        feeConfig?.fee,
         disableMessageSigning,
         !!isBatchingSupported,
         observableRoute?.id,
@@ -191,13 +204,12 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
       allowedBridges,
       allowedExchanges,
       routePriority,
-      subvariant,
+      mode,
       allowSwitchChain,
       enabledRefuel,
       enabledAutoRefuel,
       gasRecommendationFromAmount,
       feeConfig?.fee,
-      fee,
       disableMessageSigning,
       isBatchingSupported,
       observableRoute?.id,
@@ -229,11 +241,11 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           allowedBridges,
           allowedExchanges,
           routePriority,
-          subvariant,
+          mode,
           allowSwitchChain,
           enabledRefuel,
           gasRecommendationFromAmount,
-          fee,
+          configuredFee,
           disableMessageSigning,
           isBatchingSupported,
           // _observableRouteId must be the last element in the query key
@@ -282,7 +294,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           slippage: formattedSlippage,
         })
 
-        if (subvariant === 'custom' && contractCalls && toAmount) {
+        if (mode === 'custom' && contractCalls && toAmount) {
           const contractCallQuote = await getContractCallsQuote(
             sdkClient,
             {
@@ -302,7 +314,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
               allowExchanges,
               toFallbackAddress: toAddress,
               slippage: formattedSlippage,
-              fee: calculatedFee || fee,
+              fee: calculatedFee || configuredFee,
             },
             { signal }
           )
@@ -310,7 +322,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           contractCallQuote.action.toToken = toToken!
 
           const customStep =
-            subvariant === 'custom'
+            mode === 'custom'
               ? contractCallQuote.includedSteps?.find(
                   (step) => step.type === 'custom'
                 )
@@ -332,11 +344,11 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
         }
 
         // Prevent sending a request for the same chain token combinations.
-        // Exception: proceed anyway if subvariant is custom and subvariantOptions is deposit
+        // Exception: proceed anyway if mode is custom and modeOptions custom type is deposit
         if (
           fromChainId === toChainId &&
           fromTokenAddress === toTokenAddress &&
-          !(subvariant === 'custom' && subvariantOptions?.custom === 'deposit')
+          !(mode === 'custom' && modeOptions?.custom?.type === 'deposit')
         ) {
           return
         }
@@ -375,7 +387,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                     : undefined,
                 options: {
                   allowSwitchChain:
-                    subvariant === 'refuel' ? false : allowSwitchChain,
+                    mode === 'refuel' ? false : allowSwitchChain,
                   bridges:
                     allowBridges?.length || disabledBridges.length
                       ? {
@@ -396,7 +408,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                       : undefined,
                   order: routePriority,
                   slippage: formattedSlippage,
-                  fee: calculatedFee || fee,
+                  fee: calculatedFee || configuredFee,
                   executionType: disableMessageSigning ? 'transaction' : 'all',
                 },
               },
@@ -421,7 +433,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                     : undefined,
                 order: routePriority,
                 slippage: formattedSlippage,
-                fee: calculatedFee || fee,
+                fee: calculatedFee || configuredFee,
                 ...(allowBridges?.length || disabledBridges.length
                   ? {
                       allowBridges: allowBridges,

package/src/hooks/useScrollableContainer.ts

@@ -2,8 +2,8 @@ import { useCallback, useLayoutEffect, useState } from 'react'
 import { getScrollableContainer } from '../utils/elements.js'
 import { useDefaultElementId } from './useDefaultElementId.js'
 
-export const useGetScrollableContainer = () => {
-  const elementId = useDefaultElementId()
+export const useGetScrollableContainer = (): (() => HTMLElement | null) => {
+  const elementId = useDefaultElementId() ?? ''
   const getContainer = useCallback(
     () => getScrollableContainer(elementId),
     [elementId]
@@ -12,7 +12,9 @@ export const useGetScrollableContainer = () => {
   return getContainer
 }
 
-export const useScrollableContainer = (elementId: string) => {
+export const useScrollableContainer = (
+  elementId: string
+): HTMLElement | null => {
   const [containerElement, setContainerElement] = useState(() =>
     getScrollableContainer(elementId)
   )
@@ -25,18 +27,3 @@ export const useScrollableContainer = (elementId: string) => {
 
   return containerElement
 }
-
-export const useScrollableOverflowHidden = () => {
-  const elementId = useDefaultElementId()
-  useLayoutEffect(() => {
-    const element = getScrollableContainer(elementId)
-    if (element) {
-      element.style.overflowY = 'hidden'
-    }
-    return () => {
-      if (element) {
-        element.style.overflowY = 'auto'
-      }
-    }
-  }, [elementId])
-}

package/src/hooks/useSetContentHeight.ts

@@ -10,8 +10,8 @@ import { useDefaultElementId } from './useDefaultElementId.js'
 export const useSetContentHeight = (
   ref: RefObject<HTMLElement | null>,
   dependency?: unknown
-) => {
-  const elementId = useDefaultElementId()
+): void => {
+  const elementId = useDefaultElementId() ?? ''
   // biome-ignore lint/correctness/useExhaustiveDependencies: we use dependency to refresh height
   useLayoutEffect(() => {
     const relativeContainer = getRelativeContainer(elementId)

package/src/hooks/useSettingMonitor.ts

@@ -4,7 +4,19 @@ import { useSettingsStore } from '../stores/settings/SettingsStore.js'
 import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
 import { useTools } from './useTools.js'
 
-export const useSettingMonitor = () => {
+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,
@@ -27,10 +39,10 @@ export const useSettingMonitor = () => {
     : slippage !== defaultConfigurableSettings.slippage
 
   const isSlippageOutsideRecommendedLimits =
-    isSlippageChanged && slippage && Number(slippage) > 1
+    isSlippageChanged && !!slippage && Number(slippage) > 1
 
   const isSlippageUnderRecommendedLimits =
-    isSlippageChanged && slippage && Number(slippage) < 0.1
+    isSlippageChanged && !!slippage && Number(slippage) < 0.1
 
   const isSlippageNotRecommended = Boolean(
     isSlippageOutsideRecommendedLimits || isSlippageUnderRecommendedLimits

package/src/hooks/useSwapOnly.ts

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

package/src/hooks/useToAddressAutoPopulate.ts

@@ -4,7 +4,6 @@ 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 { useAvailableChains } from './useAvailableChains.js'
 
 type UpdateToAddressArgs = {
@@ -18,9 +17,10 @@ type UpdateToAddressArgs = {
 /**
  * Automatically populates toAddress field if bridging across ecosystems and compatible wallet is connected
  */
-export const useToAddressAutoPopulate = () => {
+export const useToAddressAutoPopulate = (): ((
+  args: UpdateToAddressArgs
+) => string | undefined) => {
   const { setFieldValue } = useFieldActions()
-  const { setSendToWallet } = useSendToWalletActions()
   const { setSelectedBookmark } = useBookmarkActions()
   const { getChainById } = useAvailableChains()
   const { accounts } = useAccount()
@@ -81,7 +81,6 @@ export const useToAddressAutoPopulate = () => {
           chainType: destinationAccount.chainType,
           isConnectedAccount: true,
         })
-        setSendToWallet(true)
         return destinationAccount.address
       }
     },
@@ -90,7 +89,6 @@ export const useToAddressAutoPopulate = () => {
       getChainById,
       setFieldValue,
       setSelectedBookmark,
-      setSendToWallet,
       getChainTypeFromAddress,
     ]
   )