@lifi/widget 4.0.0-beta.1 → 4.0.0-beta.10

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)

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,7 +40,21 @@ 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,

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)
   )
@@ -26,8 +28,8 @@ export const useScrollableContainer = (elementId: string) => {
   return containerElement
 }
 
-export const useScrollableOverflowHidden = () => {
-  const elementId = useDefaultElementId()
+export const useScrollableOverflowHidden = (): void => {
+  const elementId = useDefaultElementId() ?? ''
   useLayoutEffect(() => {
     const element = getScrollableContainer(elementId)
     if (element) {

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,6 @@
 import { useSplitSubvariantStore } from '../stores/settings/useSplitSubvariantStore.js'
 
-export const useSwapOnly = () => {
+export const useSwapOnly = (): boolean => {
   const state = useSplitSubvariantStore((state) => state.state)
   return state === '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,
     ]
   )

package/src/hooks/useToAddressRequirements.ts

@@ -1,4 +1,4 @@
-import type { RouteExtended } from '@lifi/sdk'
+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'
@@ -7,7 +7,19 @@ import { useFieldValues } from '../stores/form/useFieldValues.js'
 import { HiddenUI, RequiredUI } from '../types/widget.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
 
-export const useToAddressRequirements = (route?: RouteExtended) => {
+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',
@@ -57,23 +69,26 @@ export const useToAddressRequirements = (route?: RouteExtended) => {
     fromChainId !== toChainId &&
     !fromContractCodeHasDelegationIndicator
 
-  const requiredToAddress =
+  const requiredToAddress = Boolean(
     (isDifferentChainType ||
       isCrossChainContractAddress ||
       requiredUI?.includes(RequiredUI.ToAddress)) &&
-    !hiddenUI?.includes(HiddenUI.ToAddress)
+      !hiddenUI?.includes(HiddenUI.ToAddress)
+  )
 
-  const accountNotDeployedAtDestination =
+  const accountNotDeployedAtDestination = Boolean(
     isFromContractAddress &&
-    !fromContractCodeHasDelegationIndicator &&
-    !isToContractAddress &&
-    fromAddress?.toLowerCase() === toAddress?.toLowerCase()
+      !fromContractCodeHasDelegationIndicator &&
+      !isToContractAddress &&
+      fromAddress?.toLowerCase() === toAddress?.toLowerCase()
+  )
 
-  const accountDeployedAtDestination =
+  const accountDeployedAtDestination = Boolean(
     isFromContractAddress &&
-    isToContractAddress &&
-    !fromContractCodeHasDelegationIndicator &&
-    fromAddress?.toLowerCase() === toAddress?.toLowerCase()
+      isToContractAddress &&
+      !fromContractCodeHasDelegationIndicator &&
+      fromAddress?.toLowerCase() === toAddress?.toLowerCase()
+  )
 
   return {
     requiredToAddress,

package/src/hooks/useToAddressReset.ts

@@ -4,15 +4,15 @@ 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'
-import { useSendToWalletActions } from '../stores/settings/useSendToWalletStore.js'
 import { RequiredUI } from '../types/widget.js'
 
-export const useToAddressReset = () => {
+export const useToAddressReset = (): {
+  tryResetToAddress: (toChain: ExtendedChain) => void
+} => {
   const { requiredUI } = useWidgetConfig()
-  const { setFieldValue, isDirty } = useFieldActions()
+  const { setFieldValue } = useFieldActions()
   const { selectedBookmark } = useBookmarks()
   const { setSelectedBookmark } = useBookmarkActions()
-  const { setSendToWallet } = useSendToWalletActions()
 
   const tryResetToAddress = useCallback(
     (toChain: ExtendedChain) => {
@@ -24,30 +24,14 @@ export const useToAddressReset = () => {
       const shouldResetToAddress =
         !requiredToAddress && !bookmarkSatisfiesToChainType
 
-      // The toAddress field is required and always visible when bridging between
-      // different ecosystems (fromChain and toChain have different chain types).
       // We reset toAddress on each chain change if it's no longer required, ensuring that
-      // switching chain types doesn't leave a previously set toAddress value when
-      // the "Send to Wallet" field is hidden.
+      // switching chain types doesn't leave a stale toAddress from a different ecosystem.
       if (shouldResetToAddress) {
         setFieldValue('toAddress', '', { isTouched: true })
         setSelectedBookmark()
-        // If toAddress was auto-filled (e.g., when making cross-ecosystem bridging and compatible destination wallet was connected)
-        // and not manually edited by the user, we need to hide "Send to Wallet".
-        const isToAddressDirty = isDirty('toAddress')
-        if (!isToAddressDirty) {
-          setSendToWallet(false)
-        }
       }
     },
-    [
-      setFieldValue,
-      isDirty,
-      setSelectedBookmark,
-      setSendToWallet,
-      requiredUI,
-      selectedBookmark,
-    ]
+    [setFieldValue, setSelectedBookmark, requiredUI, selectedBookmark]
   )
 
   return {

package/src/hooks/useToken.ts

@@ -1,3 +1,4 @@
+import type { TokenExtended } from '@lifi/sdk'
 import { useMemo } from 'react'
 import { useTokenSearch } from './useTokenSearch.js'
 import { useTokens } from './useTokens.js'
@@ -6,7 +7,10 @@ export const useToken = (
   chainId?: number,
   tokenAddress?: string,
   latest?: boolean
-) => {
+): {
+  token: TokenExtended | undefined
+  isLoading: boolean
+} => {
   const { allTokens, isLoading: isTokensLoading } = useTokens()
 
   const token = useMemo(

package/src/hooks/useTokenAddressBalance.ts

@@ -1,4 +1,4 @@
-import type { TokenAmount } from '@lifi/sdk'
+import type { ExtendedChain, TokenAmount } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useChain } from './useChain.js'
 import { useToken } from './useToken.js'
@@ -7,7 +7,12 @@ 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)

package/src/hooks/useTokenBalance.ts

@@ -12,7 +12,16 @@ import { getQueryKey } from '../utils/queries.js'
 
 const defaultRefetchInterval = 30_000
 
-export const useTokenBalance = (accountAddress?: string, token?: Token) => {
+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()

package/src/hooks/useTokenBalances.ts

@@ -3,6 +3,7 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
 import { usePinnedTokensStore } from '../stores/pinnedTokens/PinnedTokensStore.js'
 import { useSettings } from '../stores/settings/useSettings.js'
+import type { TokenAmount } from '../types/token.js'
 import { HiddenUI } from '../types/widget.js'
 import { formatTokenPrice } from '../utils/format.js'
 import { isSearchMatch, processTokenBalances } from '../utils/tokenList.js'
@@ -15,7 +16,14 @@ export const useTokenBalances = (
   formType?: FormType,
   isAllNetworks?: boolean,
   search?: string
-) => {
+): {
+  tokens: TokenAmount[]
+  withCategories: boolean
+  withPinnedTokens: boolean
+  isTokensLoading: boolean
+  isSearchLoading: boolean
+  isBalanceLoading: boolean
+} => {
   const { hiddenUI } = useWidgetConfig()
   const {
     allTokens,

package/src/hooks/useTokenBalancesQueries.ts

@@ -11,7 +11,11 @@ const defaultRefetchInterval = 32_000
 export const useTokenBalancesQueries = (
   accountsWithTokens?: Record<string, Record<number, TokenExtended[]>>,
   isBalanceLoadingEnabled?: boolean
-) => {
+): {
+  data: TokenAmount[] | undefined
+  isLoading: boolean
+  isError: boolean
+} => {
   const { keyPrefix } = useWidgetConfig()
   const sdkClient = useSDKClient()
   const firstLoadStartRef = useRef<number | null>(null)

package/src/hooks/useTokenRateText.ts

@@ -0,0 +1,55 @@
+import { formatUnits, type RouteExtended } from '@lifi/sdk'
+import type { MouseEventHandler } from 'react'
+import { useTranslation } from 'react-i18next'
+import { create } from 'zustand'
+
+interface TokenRateState {
+  isForward: boolean
+  toggleIsForward(): void
+}
+
+const useTokenRateStore = create<TokenRateState>((set) => ({
+  isForward: true,
+  toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),
+}))
+
+export function useTokenRateText(route: RouteExtended): {
+  rateText: string
+  toggleRate: MouseEventHandler
+} {
+  const { t } = useTranslation()
+  const { isForward, toggleIsForward } = useTokenRateStore()
+
+  const lastStep = route.steps.at(-1)
+
+  const fromToken = {
+    ...route.fromToken,
+    amount: BigInt(route.fromAmount),
+  }
+  const toToken = {
+    ...(lastStep?.execution?.toToken ??
+      lastStep?.action.toToken ??
+      route.toToken),
+    amount: lastStep?.execution?.toAmount
+      ? BigInt(lastStep.execution.toAmount)
+      : BigInt(route.toAmount),
+  }
+
+  const fromToRate =
+    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals)) /
+    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals))
+  const toFromRate =
+    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals)) /
+    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals))
+
+  const rateText = isForward
+    ? `1 ${fromToken.symbol} ≈ ${t('format.tokenAmount', { value: fromToRate })} ${toToken.symbol}`
+    : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`
+
+  const toggleRate: MouseEventHandler = (e) => {
+    e.stopPropagation()
+    toggleIsForward()
+  }
+
+  return { rateText: rateText, toggleRate: toggleRate }
+}

package/src/hooks/useTokenSearch.ts

@@ -17,7 +17,10 @@ export const useTokenSearch = (
   tokenQuery?: string,
   enabled?: boolean,
   formType?: FormType
-) => {
+): {
+  token: TokenExtended | undefined
+  isLoading: boolean
+} => {
   const queryClient = useQueryClient()
   const { tokens: configTokens, keyPrefix } = useWidgetConfig()
   const sdkClient = useSDKClient()

package/src/hooks/useTokens.ts

@@ -2,6 +2,7 @@ import {
   ChainType,
   getToken,
   getTokens,
+  type TokenExtended,
   type TokensExtendedResponse,
 } from '@lifi/sdk'
 import { useChainTypeFromAddress } from '@lifi/widget-provider'
@@ -25,7 +26,11 @@ export const useTokens = (
   formType?: FormType,
   search?: string,
   chainId?: number
-) => {
+): {
+  allTokens: Record<number, TokenExtended[]> | undefined
+  isLoading: boolean
+  isSearchLoading: boolean
+} => {
   const {
     tokens: configTokens,
     chains: chainsConfig,

package/src/hooks/useTools.ts

@@ -6,7 +6,7 @@ import { useSettingsStoreContext } from '../stores/settings/SettingsStore.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
-export const useTools = () => {
+export const useTools = (): { tools: ToolsResponse | undefined } => {
   const { bridges, exchanges, keyPrefix } = useWidgetConfig()
   const settingsStore = useSettingsStoreContext()
   const sdkClient = useSDKClient()

package/src/hooks/useTransactionDetails.ts

@@ -11,7 +11,12 @@ import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { getQueryKey } from '../utils/queries.js'
 
-export const useTransactionDetails = (transactionHash?: string) => {
+export const useTransactionDetails = (
+  transactionHash?: string
+): {
+  transaction: StatusResponse | undefined
+  isLoading: boolean
+} => {
   const { account, accounts } = useAccount()
   const queryClient = useQueryClient()
   const { keyPrefix } = useWidgetConfig()

package/src/hooks/useTransactionHistory.ts

@@ -1,18 +1,32 @@
 import type { FullStatusData, StatusResponse } from '@lifi/sdk'
-import { type ExtendedTransactionInfo, getTransactionHistory } from '@lifi/sdk'
+import { getTransactionHistory } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import type { QueryFunction } from '@tanstack/react-query'
 import { useQueries } from '@tanstack/react-query'
+import { useEffect, useMemo } from 'react'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useRouteExecutionStoreContext } from '../stores/routes/RouteExecutionStore.js'
+import type {
+  RouteExecution,
+  RouteExecutionState,
+} from '../stores/routes/types.js'
+import { getSourceTxHash } from '../stores/routes/utils.js'
+import { buildRouteFromTxHistory } from '../utils/converters.js'
 import { getQueryKey } from '../utils/queries.js'
+import { useTools } from './useTools.js'
 
-export const useTransactionHistory = () => {
+export const useTransactionHistory = (): {
+  data: RouteExecution[]
+  isLoading: boolean
+} => {
+  const store = useRouteExecutionStoreContext()
   const { accounts } = useAccount()
   const { keyPrefix } = useWidgetConfig()
   const sdkClient = useSDKClient()
+  const { tools } = useTools()
 
-  const { data, isLoading } = useQueries({
+  const { data: routeExecutions, isLoading } = useQueries({
     queries: accounts.map((account) => ({
       queryKey: [
         getQueryKey('transaction-history', keyPrefix),
@@ -41,7 +55,7 @@ export const useTransactionHistory = () => {
       enabled: Boolean(account.address),
     })),
     combine: (results) => {
-      const uniqueTransactions = new Map()
+      const uniqueTransactions = new Map<string, StatusResponse>()
       results.forEach((result) => {
         if (result.data) {
           result.data.forEach((transaction) => {
@@ -58,21 +72,49 @@ export const useTransactionHistory = () => {
           })
         }
       })
-      const data = Array.from(uniqueTransactions.values()).sort((a, b) => {
-        return (
-          ((b?.sending as ExtendedTransactionInfo)?.timestamp ?? 0) -
-          ((a?.sending as ExtendedTransactionInfo)?.timestamp ?? 0)
-        )
-      }) as StatusResponse[]
+      // Convert raw API transactions into RouteExecution objects.
+      const data = Array.from(uniqueTransactions.values()).flatMap(
+        (transaction) => {
+          const routeExecution = buildRouteFromTxHistory(
+            transaction as FullStatusData,
+            tools
+          )
+          return routeExecution ? [routeExecution] : []
+        }
+      )
       return {
-        data: data,
+        data,
         isLoading: results.some((result) => result.isLoading),
       }
     },
   })
 
+  // Stable Set — only recreated when data actually changes (TanStack Query structural sharing).
+  const apiTxHashes = useMemo(
+    () => new Set(routeExecutions.map((r) => getSourceTxHash(r.route))),
+    [routeExecutions]
+  )
+
+  // Remove local store routes already indexed by the API to avoid duplicates.
+  // Must be in an effect — combine runs during render, so store mutations there
+  // would trigger "Cannot update a component while rendering" in concurrent mode.
+  useEffect(() => {
+    if (!apiTxHashes.size) {
+      return
+    }
+    const { routes, deleteRoute } = store.getState() as RouteExecutionState
+    for (const [id, routeExecution] of Object.entries(routes)) {
+      const txHash = getSourceTxHash(
+        (routeExecution as RouteExecution | undefined)?.route
+      )
+      if (txHash && apiTxHashes.has(txHash)) {
+        deleteRoute(id)
+      }
+    }
+  }, [apiTxHashes, store])
+
   return {
-    data,
+    data: routeExecutions,
     isLoading,
   }
 }