@lifi/widget 0.0.0-preview-6cc63bac

package/src/hooks/useTransactionDetails.ts

@@ -0,0 +1,93 @@
+import type { FullStatusData } from '@lifi/sdk'
+import { getStatus, type StatusResponse } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getQueryKey } from '../utils/queries.js'
+
+export const useTransactionDetails = (
+  transactionHash?: string
+): {
+  transaction: StatusResponse | undefined
+  isLoading: boolean
+} => {
+  const { account, accounts } = useAccount()
+  const queryClient = useQueryClient()
+  const { keyPrefix } = useWidgetConfig()
+  const sdkClient = useSDKClient()
+
+  const transactionHistoryQueryKey = useMemo(
+    () => getQueryKey('transaction-history', keyPrefix),
+    [keyPrefix]
+  )
+
+  const { data, isLoading } = useQuery({
+    queryKey: [transactionHistoryQueryKey, transactionHash],
+    queryFn: async ({ queryKey: [, transactionHash], signal }) => {
+      if (transactionHash) {
+        for (const account of accounts) {
+          const cachedHistory = queryClient.getQueryData<StatusResponse[]>([
+            transactionHistoryQueryKey,
+            account.address,
+          ])
+
+          const transaction = cachedHistory?.find(
+            (t) => t.sending.txHash === transactionHash
+          )
+
+          if (transaction) {
+            return transaction
+          }
+        }
+
+        const transaction = await getStatus(
+          sdkClient,
+          {
+            txHash: transactionHash,
+          },
+          { signal }
+        )
+
+        const fromAddress = (transaction as FullStatusData)?.fromAddress
+
+        if (fromAddress) {
+          queryClient.setQueryData<StatusResponse[]>(
+            [transactionHistoryQueryKey, fromAddress],
+            (data) => {
+              return [...data!, transaction!]
+            }
+          )
+        }
+
+        return transaction
+      }
+    },
+    refetchInterval: 300_000,
+    enabled: account.isConnected && Boolean(transactionHash),
+    initialData: () => {
+      for (const account of accounts) {
+        const transaction = queryClient
+          .getQueryData<StatusResponse[]>([
+            transactionHistoryQueryKey,
+            account.address,
+          ])
+          ?.find((t) => t.sending.txHash === transactionHash)
+        if (transaction) {
+          return transaction
+        }
+      }
+    },
+    placeholderData: keepPreviousData,
+  })
+
+  return {
+    transaction: data,
+    isLoading,
+  }
+}

package/src/hooks/useTransactionHistory.ts

@@ -0,0 +1,120 @@
+import type { FullStatusData, StatusResponse } 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 = (): {
+  data: RouteExecution[]
+  isLoading: boolean
+} => {
+  const store = useRouteExecutionStoreContext()
+  const { accounts } = useAccount()
+  const { keyPrefix } = useWidgetConfig()
+  const sdkClient = useSDKClient()
+  const { tools } = useTools()
+
+  const { data: routeExecutions, isLoading } = useQueries({
+    queries: accounts.map((account) => ({
+      queryKey: [
+        getQueryKey('transaction-history', keyPrefix),
+        account.address,
+      ],
+      queryFn: (async ({ queryKey: [, accountAddress], signal }) => {
+        if (!accountAddress) {
+          return []
+        }
+        const date = new Date()
+        date.setFullYear(date.getFullYear() - 10)
+
+        const response = await getTransactionHistory(
+          sdkClient,
+          {
+            wallet: accountAddress,
+            fromTimestamp: Math.floor(date.getTime() / 1000),
+            toTimestamp: Math.floor(Date.now() / 1000),
+          },
+          { signal }
+        )
+
+        return response.transfers
+      }) as QueryFunction<StatusResponse[], (string | undefined)[], never>,
+      refetchInterval: 300_000,
+      enabled: Boolean(account.address),
+    })),
+    combine: (results) => {
+      const uniqueTransactions = new Map<string, StatusResponse>()
+      results.forEach((result) => {
+        if (result.data) {
+          result.data.forEach((transaction) => {
+            if (
+              (transaction as FullStatusData)?.transactionId &&
+              (transaction as FullStatusData)?.receiving?.chainId &&
+              transaction?.sending.chainId
+            ) {
+              uniqueTransactions.set(
+                (transaction as FullStatusData).transactionId,
+                transaction
+              )
+            }
+          })
+        }
+      })
+      // 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,
+        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: 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

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

package/src/hooks/useWidgetChains.ts

@@ -0,0 +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
+): {
+  chains: ExtendedChain[] | undefined
+  getChainById: (
+    chainId?: number,
+    chains?: ExtendedChain[]
+  ) => ExtendedChain | undefined
+  isLoading: boolean
+} => {
+  return useAvailableChains(undefined, widgetConfig)
+}

package/src/hooks/useWidgetEvents.ts

@@ -0,0 +1,8 @@
+import EventEmitter from 'eventemitter3'
+import type { WidgetEvents } from '../types/events.js'
+
+export type WidgetEventEmitter = EventEmitter<WidgetEvents>
+
+export const widgetEvents: WidgetEventEmitter = new EventEmitter<WidgetEvents>()
+
+export const useWidgetEvents = (): WidgetEventEmitter => widgetEvents

package/src/i18n/i18next.d.ts

@@ -0,0 +1,10 @@
+import en from './en.json' with { type: 'json' }
+
+const defaultResource = { translation: en }
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    defaultNS: 'translation'
+    resources: typeof defaultResource
+  }
+}

package/src/index.ts

@@ -0,0 +1,37 @@
+export type * from '@lifi/sdk'
+export { ChainId, ChainType, CoinKey } from '@lifi/sdk'
+export { App as LiFiWidget } from './App.js'
+export type { WidgetDrawer } from './AppDrawer.js'
+export * from './components/ContractComponent/ItemPrice.js'
+export * from './components/ContractComponent/NFT/NFT.js'
+export * from './components/ContractComponent/NFT/NFTBase.js'
+export * from './components/ContractComponent/NFT/types.js'
+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,
+  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'
+export { useFieldValues } from './stores/form/useFieldValues.js'
+export { azureLightTheme } from './themes/azureLight.js'
+export { createTheme } from './themes/createTheme.js'
+export { jumperTheme } from './themes/jumper.js'
+export * from './themes/palettes.js'
+export * from './themes/types.js'
+export { watermelonLightTheme } from './themes/watermelonLight.js'
+export { windows95Theme } from './themes/windows95.js'
+export * from './types/events.js'
+export type { TokenAmount } from './types/token.js'
+export * from './types/widget.js'
+export { compactNumberFormatter } from './utils/compactNumberFormatter.js'
+export { currencyExtendedFormatter } from './utils/currencyExtendedFormatter.js'
+export * from './utils/format.js'
+export { getPriceImpact } from './utils/getPriceImpact.js'
+export { navigationRoutes } from './utils/navigationRoutes.js'
+export { percentFormatter } from './utils/percentFormatter.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}
+    />
+  )
+}

package/src/pages/ActivitiesPage/ActivitiesPage.tsx

@@ -0,0 +1,148 @@
+import { useAccount } from '@lifi/wallet-management'
+import { Box, List } from '@mui/material'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import { type JSX, useCallback, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { PageContainer } from '../../components/PageContainer.js'
+import { TransactionCardSkeleton } from '../../components/TransactionCard/TransactionCardSkeleton.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useListHeight } from '../../hooks/useListHeight.js'
+import { useTransactionList } from '../../hooks/useTransactionList.js'
+import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { ActiveTransactionItem } from './ActiveTransactionItem.js'
+import { ActivitiesPageMenuButton } from './ActivitiesPageMenuButton.js'
+import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'
+import { TransactionHistoryItem } from './TransactionHistoryItem.js'
+
+const SKELETON_COUNT = 2
+
+export const ActivitiesPage = (): JSX.Element => {
+  // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue
+  const parentRef = useRef<HTMLDivElement | null>(null)
+  const { items, isLoading } = useTransactionList()
+
+  const { t } = useTranslation()
+  const { accounts } = useAccount()
+  const accountAddresses = useMemo(
+    () => accounts.map((account) => account.address),
+    [accounts]
+  )
+  const hasFailedItems = useRouteExecutionStore(
+    useCallback(
+      (state) =>
+        Object.values(state.routes).some(
+          (r) =>
+            r?.status === RouteExecutionStatus.Failed &&
+            accountAddresses.includes(r.route.fromAddress)
+        ),
+      [accountAddresses]
+    )
+  )
+
+  useHeader(
+    t('header.activities'),
+    hasFailedItems ? <ActivitiesPageMenuButton /> : null
+  )
+
+  const { listHeight } = useListHeight({
+    listParentRef: parentRef,
+  })
+
+  const hasStoreItems = items.length > 0
+  const skeletonCount = isLoading && hasStoreItems ? SKELETON_COUNT : 0
+  const totalCount = items.length + skeletonCount
+
+  const getItemKey = useCallback(
+    (index: number) => {
+      if (index >= items.length) {
+        return `skeleton-${index}`
+      }
+      const item = items[index]
+      if (item.type === 'active') {
+        return `active-${item.routeId}`
+      }
+      return `${item.type}-${item.txHash || item.routeExecution.route.id}`
+    },
+    [items]
+  )
+
+  const { getVirtualItems, getTotalSize, measureElement } = useVirtualizer({
+    count: hasStoreItems ? totalCount : 0,
+    overscan: 3,
+    paddingEnd: 12,
+    getScrollElement: () => parentRef.current,
+    estimateSize: (index) => (items[index]?.type === 'active' ? 218 : 196),
+    getItemKey,
+  })
+
+  const isEmpty = !items.length && !isLoading
+
+  return (
+    <PageContainer disableGutters>
+      <Box
+        className="long-list"
+        ref={parentRef}
+        style={{ height: listHeight }}
+        sx={{ overflow: 'auto', paddingX: 3, paddingTop: 1.5 }}
+      >
+        {isEmpty ? (
+          <TransactionHistoryEmpty />
+        ) : isLoading && !hasStoreItems ? (
+          <List
+            disablePadding
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+              marginBottom: 2,
+            }}
+          >
+            {Array.from({ length: SKELETON_COUNT }).map((_, index) => (
+              <TransactionCardSkeleton key={index} />
+            ))}
+          </List>
+        ) : (
+          <List
+            style={{ height: getTotalSize(), position: 'relative' }}
+            disablePadding
+          >
+            {getVirtualItems().map((item) => {
+              const listItem =
+                item.index < items.length ? items[item.index] : null
+              return (
+                <li
+                  key={item.key}
+                  ref={measureElement}
+                  data-index={item.index}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    paddingBottom: 16,
+                    transform: `translateY(${item.start}px)`,
+                    listStyle: 'none',
+                  }}
+                >
+                  {!listItem ? (
+                    <TransactionCardSkeleton />
+                  ) : listItem.type === 'active' ? (
+                    <ActiveTransactionItem routeId={listItem.routeId} />
+                  ) : (
+                    <TransactionHistoryItem
+                      route={listItem.routeExecution.route}
+                      type={listItem.type}
+                      transactionHash={listItem.txHash}
+                      startedAt={listItem.startedAt}
+                    />
+                  )}
+                </li>
+              )
+            })}
+          </List>
+        )}
+      </Box>
+    </PageContainer>
+  )
+}

package/src/pages/ActivitiesPage/ActivitiesPageMenuButton.tsx

@@ -0,0 +1,71 @@
+import { useAccount } from '@lifi/wallet-management'
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutlined'
+import { Button } from '@mui/material'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ContextMenu } from '../../components/ContextMenu.js'
+import { Dialog } from '../../components/Dialog/Dialog.js'
+import {
+  DialogActions,
+  DialogContainer,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from '../../components/Dialog/Dialog.style.js'
+import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'
+
+export const ActivitiesPageMenuButton: React.FC = () => {
+  const { t } = useTranslation()
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes)
+  const { accounts } = useAccount()
+  const accountAddresses = useMemo(
+    () => accounts.flatMap((account) => account.address ?? []),
+    [accounts]
+  )
+
+  const handleDialogOpen = () => setDialogOpen(true)
+  const handleDialogClose = () => setDialogOpen(false)
+
+  const handleRemoveAllFailed = () => {
+    deleteRoutes('failed', accountAddresses)
+    handleDialogClose()
+  }
+
+  return (
+    <>
+      <ContextMenu
+        buttonSx={{ position: 'static', marginRight: -1.5 }}
+        items={[
+          {
+            icon: <DeleteOutlineIcon />,
+            label: t('button.clearAllFailed'),
+            onClick: handleDialogOpen,
+          },
+        ]}
+      />
+      <Dialog open={dialogOpen} onClose={handleDialogClose}>
+        <DialogContainer>
+          <DialogTitle>
+            {t('warning.title.clearFailedTransactions')}
+          </DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              {t('warning.message.clearFailedTransactions')}
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleDialogClose}>{t('button.cancel')}</Button>
+            <Button
+              variant="contained"
+              onClick={handleRemoveAllFailed}
+              autoFocus
+            >
+              {t('button.delete')}
+            </Button>
+          </DialogActions>
+        </DialogContainer>
+      </Dialog>
+    </>
+  )
+}

package/src/pages/ActivitiesPage/TransactionHistoryEmpty.tsx

@@ -0,0 +1,14 @@
+import HistoryIcon from '@mui/icons-material/History'
+import { useTranslation } from 'react-i18next'
+import { EmptyListIndicator } from '../../components/EmptyListIndicator/EmptyListIndicator.js'
+
+export const TransactionHistoryEmpty: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <EmptyListIndicator
+      icon={<HistoryIcon />}
+      title={t('info.title.emptyTransactionHistory')}
+      message={t('info.message.emptyTransactionHistory')}
+    />
+  )
+}