@lifi/widget 4.0.0-beta.9 → 4.1.0

package/src/hooks/useToAddressRequirements.ts

@@ -1,13 +1,24 @@
-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'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 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',
@@ -37,12 +48,12 @@ export const useToAddressRequirements = (route?: RouteExtended) => {
     contractCode: fromContractCode,
     isLoading: isFromContractLoading,
     isFetched: isFromContractFetched,
-  } = useIsContractAddress(account.address, fromChainId, account.chainType)
+  } = useIsContractAddress(account.address, fromChain?.id, account.chainType)
   const {
     isContractAddress: isToContractAddress,
     isLoading: isToContractLoading,
     isFetched: isToContractFetched,
-  } = useIsContractAddress(toAddress, toChainId, toChain?.chainType)
+  } = useIsContractAddress(toAddress, toChain?.id, toChain?.chainType)
 
   const isDifferentChainType =
     fromChain && toChain && fromChain.chainType !== toChain.chainType
@@ -57,23 +68,26 @@ export const useToAddressRequirements = (route?: RouteExtended) => {
     fromChainId !== toChainId &&
     !fromContractCodeHasDelegationIndicator
 
-  const requiredToAddress =
+  const requiredToAddress = Boolean(
     (isDifferentChainType ||
       isCrossChainContractAddress ||
-      requiredUI?.includes(RequiredUI.ToAddress)) &&
-    !hiddenUI?.includes(HiddenUI.ToAddress)
+      requiredUI?.toAddress) &&
+      !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,19 +4,18 @@ 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) => {
-      const requiredToAddress = requiredUI?.includes(RequiredUI.ToAddress)
+      const requiredToAddress = requiredUI?.toAddress
 
       const bookmarkSatisfiesToChainType =
         selectedBookmark?.chainType === toChain?.chainType
@@ -24,30 +23,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,7 +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 { HiddenUI } from '../types/widget.js'
+import type { TokenAmount } from '../types/token.js'
 import { formatTokenPrice } from '../utils/format.js'
 import { isSearchMatch, processTokenBalances } from '../utils/tokenList.js'
 import { useAccountsBalancesData } from './useAccountsBalancesData.js'
@@ -15,7 +15,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,
@@ -97,7 +104,7 @@ export const useTokenBalances = (
     )
 
     const hideSmallBalances =
-      !!smallBalanceThreshold && !hiddenUI?.includes(HiddenUI.HideSmallBalances)
+      !!smallBalanceThreshold && !hiddenUI?.hideSmallBalances
     const threshold = hideSmallBalances
       ? Number.parseFloat(smallBalanceThreshold)
       : undefined

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,
@@ -43,6 +48,7 @@ export const useTokens = (
         ChainType.SVM,
         ChainType.UTXO,
         ChainType.MVM,
+        ChainType.TVM,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(
@@ -85,6 +91,7 @@ export const useTokens = (
         ChainType.SVM,
         ChainType.UTXO,
         ChainType.MVM,
+        ChainType.TVM,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(

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,
   }
 }

package/src/hooks/useTransactionList.ts

@@ -0,0 +1,83 @@
+import { useAccount } from '@lifi/wallet-management'
+import { useMemo } from 'react'
+import type {
+  ActiveItem,
+  HistoryItem,
+  LocalItem,
+  TransactionListItem,
+} from '../pages/ActivitiesPage/types.js'
+import { useRouteExecutionStore } from '../stores/routes/RouteExecutionStore.js'
+import type {
+  RouteExecution,
+  RouteExecutionState,
+} from '../stores/routes/types.js'
+import { RouteExecutionStatus } from '../stores/routes/types.js'
+import { getSourceTxHash } from '../stores/routes/utils.js'
+import { hasEnumFlag } from '../utils/enum.js'
+import { useTransactionHistory } from './useTransactionHistory.js'
+
+const routesSelector = (state: RouteExecutionState) => state.routes
+
+export const useTransactionList = (): {
+  items: TransactionListItem[]
+  isLoading: boolean
+} => {
+  const { accounts } = useAccount()
+  const accountAddresses = useMemo(
+    () => accounts.map((account) => account.address),
+    [accounts]
+  )
+
+  const { data: apiRouteExecutions, isLoading } = useTransactionHistory()
+  const routes = useRouteExecutionStore(routesSelector)
+
+  const items = useMemo<TransactionListItem[]>(() => {
+    const apiTxHashes = new Set(
+      apiRouteExecutions.map((r) => getSourceTxHash(r.route))
+    )
+
+    const activeItems: ActiveItem[] = []
+    const localItems: LocalItem[] = []
+
+    for (const r of Object.values(routes) as RouteExecution[]) {
+      if (!accountAddresses.includes(r.route.fromAddress)) {
+        continue
+      }
+      // Guard against duplicates on the render before the store deletion
+      // from useTransactionHistory's combine propagates.
+      if (apiTxHashes.has(getSourceTxHash(r.route))) {
+        continue
+      }
+      const startedAt = r.route.steps[0]?.execution?.startedAt ?? 0
+      if (
+        r.status === RouteExecutionStatus.Pending ||
+        r.status === RouteExecutionStatus.Failed
+      ) {
+        activeItems.push({ type: 'active', routeId: r.route.id, startedAt })
+      } else if (hasEnumFlag(r.status, RouteExecutionStatus.Done)) {
+        localItems.push({
+          type: 'local',
+          routeExecution: r,
+          txHash: getSourceTxHash(r.route) ?? '',
+          // store startedAt is already in ms
+          startedAt,
+        })
+      }
+    }
+
+    const historyItems: HistoryItem[] = apiRouteExecutions.map(
+      (routeExecution) => ({
+        type: 'history',
+        routeExecution,
+        txHash: getSourceTxHash(routeExecution.route) ?? '',
+        startedAt: routeExecution.route.steps[0]?.execution?.startedAt ?? 0,
+      })
+    )
+
+    return [...activeItems, ...localItems, ...historyItems].sort(
+      (a, b) => b.startedAt - a.startedAt
+    )
+  }, [accountAddresses, apiRouteExecutions, routes])
+
+  return { items, isLoading }
+}

package/src/hooks/useWideVariant.ts

@@ -4,10 +4,10 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 
 const defaultExpandableWidth = 852
 
-export const useWideVariant = () => {
-  const { variant, useRecommendedRoute } = useWidgetConfig()
+export const useWideVariant = (): boolean => {
+  const { variant, showSingleRoute } = useWidgetConfig()
   const expandableAllowed = useMediaQuery((theme: Theme) =>
     theme.breakpoints.up(defaultExpandableWidth)
   )
-  return variant === 'wide' && expandableAllowed && !useRecommendedRoute
+  return variant === 'wide' && expandableAllowed && !showSingleRoute
 }

package/src/hooks/useWidgetChains.ts

@@ -1,6 +1,16 @@
+import type { ExtendedChain } from '@lifi/sdk'
 import type { WidgetConfig } from '../types/widget.js'
 import { useAvailableChains } from './useAvailableChains.js'
 
-export const useWidgetChains = (widgetConfig: WidgetConfig) => {
+export const useWidgetChains = (
+  widgetConfig: WidgetConfig
+): {
+  chains: ExtendedChain[] | undefined
+  getChainById: (
+    chainId?: number,
+    chains?: ExtendedChain[]
+  ) => ExtendedChain | undefined
+  isLoading: boolean
+} => {
   return useAvailableChains(undefined, widgetConfig)
 }

package/src/hooks/useWidgetEvents.ts

@@ -1,13 +1,8 @@
-import _mitt, { type Emitter, type EventHandlerMap, type EventType } from 'mitt'
+import EventEmitter from 'eventemitter3'
 import type { WidgetEvents } from '../types/events.js'
 
-// https://github.com/developit/mitt/issues/191
-const mitt = _mitt as unknown as <Events extends Record<EventType, unknown>>(
-  all?: EventHandlerMap<Events>
-) => Emitter<Events>
+export type WidgetEventEmitter = EventEmitter<WidgetEvents>
 
-export const widgetEvents = mitt<WidgetEvents>()
+export const widgetEvents: WidgetEventEmitter = new EventEmitter<WidgetEvents>()
 
-export const useWidgetEvents = () => {
-  return widgetEvents
-}
+export const useWidgetEvents = (): WidgetEventEmitter => widgetEvents

package/src/index.ts

@@ -10,7 +10,11 @@ export * from './components/Skeleton/WidgetSkeleton.js'
 export { defaultMaxHeight } from './config/constants.js'
 export * from './config/version.js'
 export { useWidgetChains } from './hooks/useWidgetChains.js'
-export { useWidgetEvents, widgetEvents } from './hooks/useWidgetEvents.js'
+export {
+  useWidgetEvents,
+  type WidgetEventEmitter,
+  widgetEvents,
+} from './hooks/useWidgetEvents.js'
 export * from './stores/bookmarks/types.js'
 export * from './stores/form/types.js'
 export { useFieldActions } from './stores/form/useFieldActions.js'

package/src/pages/ActivitiesPage/ActiveTransactionItem.tsx

@@ -0,0 +1,43 @@
+import { useNavigate } from '@tanstack/react-router'
+import type { MouseEvent } from 'react'
+import { ActiveTransactionCard } from '../../components/TransactionCard/ActiveTransactionCard.js'
+import { TransactionCardSkeleton } from '../../components/TransactionCard/TransactionCardSkeleton.js'
+import { useRouteExecution } from '../../hooks/useRouteExecution.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+
+export const ActiveTransactionItem: React.FC<{ routeId: string }> = ({
+  routeId,
+}) => {
+  const navigate = useNavigate()
+  const { route, status, deleteRoute } = useRouteExecution({
+    routeId,
+    executeInBackground: true,
+  })
+
+  const lastActiveStep = route?.steps.findLast((step) => step.execution)
+
+  if (!route || !lastActiveStep) {
+    return <TransactionCardSkeleton active />
+  }
+
+  const handleClick = () => {
+    navigate({
+      to: navigationRoutes.transactionExecution,
+      search: { routeId },
+    })
+  }
+
+  const handleDelete = (e: MouseEvent) => {
+    e.stopPropagation()
+    deleteRoute()
+  }
+
+  return (
+    <ActiveTransactionCard
+      route={route}
+      status={status}
+      onClick={handleClick}
+      onDelete={handleDelete}
+    />
+  )
+}