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

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,7 +4,7 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 
 const defaultExpandableWidth = 852
 
-export const useWideVariant = () => {
+export const useWideVariant = (): boolean => {
   const { variant, useRecommendedRoute } = useWidgetConfig()
   const expandableAllowed = useMediaQuery((theme: Theme) =>
     theme.breakpoints.up(defaultExpandableWidth)

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

@@ -6,8 +6,8 @@ const mitt = _mitt as unknown as <Events extends Record<EventType, unknown>>(
   all?: EventHandlerMap<Events>
 ) => Emitter<Events>
 
-export const widgetEvents = mitt<WidgetEvents>()
+export const widgetEvents: Emitter<WidgetEvents> = mitt<WidgetEvents>()
 
-export const useWidgetEvents = () => {
+export const useWidgetEvents = (): Emitter<WidgetEvents> => {
   return widgetEvents
 }

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,147 @@
+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 = 3
+
+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,
+  })
+
+  if (!items.length && !isLoading) {
+    return <TransactionHistoryEmpty />
+  }
+
+  return (
+    <PageContainer disableGutters style={{ minHeight: 544 }}>
+      <Box
+        ref={parentRef}
+        style={{ height: listHeight }}
+        sx={{ overflow: 'auto', paddingX: 3 }}
+      >
+        {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
+            className="long-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/DeleteOutline'
+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/TransactionHistoryItem.tsx

@@ -0,0 +1,30 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { useNavigate } from '@tanstack/react-router'
+import { memo } from 'react'
+import { TransactionCard } from '../../components/TransactionCard/TransactionCard.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+
+export const TransactionHistoryItem: React.FC<{
+  route: RouteExtended
+  type: 'local' | 'history'
+  transactionHash: string
+  // startedAt in ms
+  startedAt: number
+}> = memo(({ route, type, transactionHash, startedAt }) => {
+  const navigate = useNavigate()
+
+  const handleClick = () => {
+    navigate({
+      to: navigationRoutes.transactionDetails,
+      search: type === 'history' ? { transactionHash } : { routeId: route.id },
+    })
+  }
+
+  return (
+    <TransactionCard
+      route={route}
+      date={new Date(startedAt)}
+      onClick={handleClick}
+    />
+  )
+})

package/src/pages/ActivitiesPage/types.ts

@@ -0,0 +1,16 @@
+import type { RouteExecution } from '../../stores/routes/types.js'
+
+export type ActiveItem = { type: 'active'; routeId: string; startedAt: number }
+export type LocalItem = {
+  type: 'local'
+  routeExecution: RouteExecution
+  txHash: string
+  startedAt: number
+}
+export type HistoryItem = {
+  type: 'history'
+  routeExecution: RouteExecution
+  txHash: string
+  startedAt: number
+}
+export type TransactionListItem = ActiveItem | LocalItem | HistoryItem

package/src/pages/MainPage/MainPage.tsx

@@ -1,6 +1,5 @@
 import { Box } from '@mui/material'
 import { useTranslation } from 'react-i18next'
-import { ActiveTransactions } from '../../components/ActiveTransactions/ActiveTransactions.js'
 import { AmountInput } from '../../components/AmountInput/AmountInput.js'
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
 import { GasRefuelMessage } from '../../components/Messages/GasRefuelMessage.js'
@@ -47,7 +46,6 @@ export const MainPage: React.FC = () => {
 
   return (
     <PageContainer>
-      <ActiveTransactions sx={marginSx} />
       {custom ? (
         <ContractComponent sx={marginSx}>{contractComponent}</ContractComponent>
       ) : null}
@@ -63,7 +61,6 @@ export const MainPage: React.FC = () => {
         sx={{
           display: 'flex',
           mb: showPoweredBy ? 1 : 3,
-          gap: 1.5,
         }}
       >
         <ReviewButton />

package/src/pages/MainPage/ReviewButton.tsx

@@ -75,6 +75,7 @@ export const ReviewButton: React.FC = () => {
       onClick={handleClick}
       disabled={currentRoute && requiredToAddress && !toAddress}
       route={currentRoute}
+      sx={{ flex: 1 }}
     />
   )
 }

package/src/pages/RoutesPage/RoutesPage.style.ts

@@ -1,6 +1,9 @@
 import { Stack as MuiStack, styled } from '@mui/material'
+import type React from 'react'
 
-export const Stack = styled(MuiStack)(({ theme }) => ({
+export const Stack: React.FC<React.ComponentProps<typeof MuiStack>> = styled(
+  MuiStack
+)(({ theme }) => ({
   position: 'relative',
   padding: theme.spacing(0, 3, 3, 3),
 }))

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -1,7 +1,7 @@
 import type { Route } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useNavigate } from '@tanstack/react-router'
-import { useMemo } from 'react'
+import { type JSX, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'
 import { RouteCard } from '../../components/RouteCard/RouteCard.js'
@@ -16,7 +16,7 @@ import { WidgetEvent } from '../../types/events.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { Stack } from './RoutesPage.style.js'
 
-export const RoutesPage = () => {
+export const RoutesPage = (): JSX.Element => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const emitter = useWidgetEvents()

package/src/pages/SelectEnabledToolsPage.tsx

@@ -65,7 +65,7 @@ export const SelectEnabledToolsPage: React.FC<{
 
   const { t } = useTranslation()
   const elementId = useDefaultElementId()
-  const scrollableContainer = useScrollableContainer(elementId)
+  const scrollableContainer = useScrollableContainer(elementId ?? '')
   const [searchValue, setSearchValue] = useState('')
 
   const filteredTools = useMemo(() => {

package/src/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { type JSX, useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SearchInput } from '../../components/Search/SearchInput.js'
 import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
@@ -10,7 +10,9 @@ interface SearchTokenInputProps {
   formType: FormType
 }
 
-export const SearchTokenInput = ({ formType }: SearchTokenInputProps) => {
+export const SearchTokenInput = ({
+  formType,
+}: SearchTokenInputProps): JSX.Element => {
   const { t } = useTranslation()
   const [value] = useFieldValues('tokenSearchFilter')
   const { setFieldValue, setAsTouched } = useFieldActions()