@lifi/widget 4.0.0-beta.9 → 4.1.0

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')}
+    />
+  )
+}

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/LanguagesPage.tsx

@@ -23,10 +23,7 @@ export const LanguagesPage: React.FC = () => {
     <PageContainer disableGutters>
       <List
         sx={{
-          paddingTop: 0,
-          paddingLeft: 1.5,
-          paddingRight: 1.5,
-          paddingBottom: 1.5,
+          padding: 1.5,
         }}
       >
         {availableLanguages.map((language) => (

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'
@@ -13,31 +12,29 @@ import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWa
 import { useHeader } from '../../hooks/useHeader.js'
 import { useWideVariant } from '../../hooks/useWideVariant.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { HiddenUI } from '../../types/widget.js'
 import { MainWarningMessages } from './MainWarningMessages.js'
 import { ReviewButton } from './ReviewButton.js'
 
 export const MainPage: React.FC = () => {
   const { t } = useTranslation()
   const wideVariant = useWideVariant()
-  const { subvariant, subvariantOptions, contractComponent, hiddenUI } =
-    useWidgetConfig()
-  const custom = subvariant === 'custom'
-  const showPoweredBy = !hiddenUI?.includes(HiddenUI.PoweredBy)
-  const showGasRefuelMessage = !hiddenUI?.includes(HiddenUI.GasRefuelMessage)
+  const { mode, modeOptions, contractComponent, hiddenUI } = useWidgetConfig()
+  const custom = mode === 'custom'
+  const showPoweredBy = !hiddenUI?.poweredBy
+  const showGasRefuelMessage = !hiddenUI?.gasRefuelMessage
 
   const splitTitle =
-    subvariantOptions?.split === 'bridge'
+    modeOptions?.split === 'bridge'
       ? t('header.bridge')
-      : subvariantOptions?.split === 'swap'
+      : modeOptions?.split === 'swap'
         ? t('header.swap')
         : undefined
   const title =
-    subvariant === 'custom'
-      ? t(`header.${subvariantOptions?.custom ?? 'checkout'}`)
-      : subvariant === 'refuel'
+    mode === 'custom'
+      ? t(`header.${modeOptions?.custom?.type ?? 'checkout'}`)
+      : mode === 'refuel'
         ? t('header.gas')
-        : subvariant === 'split' && splitTitle
+        : mode === 'split' && splitTitle
           ? splitTitle
           : t('header.exchange')
 
@@ -46,24 +43,22 @@ export const MainPage: React.FC = () => {
   const marginSx = { marginBottom: 2 }
 
   return (
-    <PageContainer>
-      <ActiveTransactions sx={marginSx} />
+    <PageContainer topGutters>
       {custom ? (
         <ContractComponent sx={marginSx}>{contractComponent}</ContractComponent>
       ) : null}
-      <SelectChainAndToken mb={2} />
-      {!custom || subvariantOptions?.custom === 'deposit' ? (
+      <SelectChainAndToken sx={marginSx} />
+      {!custom || modeOptions?.custom?.type === 'deposit' ? (
         <AmountInput formType="from" sx={marginSx} />
       ) : null}
       {!wideVariant ? <Routes sx={marginSx} /> : null}
       <SendToWalletButton sx={marginSx} />
-      {showGasRefuelMessage ? <GasRefuelMessage mb={2} /> : null}
-      <MainWarningMessages mb={2} />
+      {showGasRefuelMessage ? <GasRefuelMessage sx={marginSx} /> : null}
+      <MainWarningMessages sx={marginSx} />
       <Box
         sx={{
           display: 'flex',
           mb: showPoweredBy ? 1 : 3,
-          gap: 1.5,
         }}
       >
         <ReviewButton />

package/src/pages/MainPage/ReviewButton.tsx

@@ -5,7 +5,7 @@ import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'
+import { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'
 import { WidgetEvent } from '../../types/events.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 
@@ -13,8 +13,8 @@ export const ReviewButton: React.FC = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const emitter = useWidgetEvents()
-  const { subvariant, subvariantOptions } = useWidgetConfig()
-  const splitState = useSplitSubvariantStore((state) => state.state)
+  const { mode, modeOptions } = useWidgetConfig()
+  const splitState = useSplitMode()
   const { toAddress, requiredToAddress } = useToAddressRequirements()
   const { routes, setReviewableRoute } = useRoutes()
 
@@ -38,9 +38,9 @@ export const ReviewButton: React.FC = () => {
 
   const getButtonText = (): string => {
     if (currentRoute) {
-      switch (subvariant) {
+      switch (mode) {
         case 'custom':
-          return t(`button.${subvariantOptions?.custom ?? 'checkout'}Review`)
+          return t(`button.${modeOptions?.custom?.type ?? 'checkout'}Review`)
         case 'refuel':
           return t('button.getGas')
         default: {
@@ -52,9 +52,9 @@ export const ReviewButton: React.FC = () => {
         }
       }
     }
-    switch (subvariant) {
+    switch (mode) {
       case 'custom':
-        return subvariantOptions?.custom === 'deposit'
+        return modeOptions?.custom?.type === 'deposit'
           ? t('button.deposit')
           : t('button.buy')
       case 'refuel':
@@ -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()
@@ -69,7 +69,12 @@ export const RoutesPage = () => {
   const allowInteraction = account.isConnected && !toAddressUnsatisfied
 
   return (
-    <Stack className="long-list" direction="column" spacing={2} flex={1}>
+    <Stack
+      className="long-list"
+      direction="column"
+      spacing={2}
+      sx={{ flex: 1, pt: 1.5 }}
+    >
       {routeNotFound ? (
         <RouteNotFoundCard />
       ) : isLoading && !routes?.length ? (

package/src/pages/SelectChainPage/SelectChainPage.tsx

@@ -2,7 +2,7 @@ import type { ExtendedChain } from '@lifi/sdk'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js'
-import { SelectChainContent } from '../../components/Chains/SelectChainContent.js'
+import { SelectChainPageContent } from '../../components/Chains/SelectChainPageContent.js'
 import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js'
 import { useHeader } from '../../hooks/useHeader.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
@@ -32,11 +32,5 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
     [navigateBack, selectNativeToken, selectToken, setCurrentChain]
   )
 
-  return (
-    <SelectChainContent
-      inExpansion={false}
-      formType={formType}
-      onSelect={handleClick}
-    />
-  )
+  return <SelectChainPageContent formType={formType} onSelect={handleClick} />
 }

package/src/pages/SelectEnabledToolsPage.tsx

@@ -1,19 +1,12 @@
-import { Checkbox, debounce, Tooltip } from '@mui/material'
-import type { ChangeEvent } from 'react'
-import {
-  type FormEventHandler,
-  memo,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react'
+import { Box, Checkbox, debounce, Tooltip } from '@mui/material'
+import type { ChangeEvent, ChangeEventHandler } from 'react'
+import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FullPageContainer } from '../components/FullPageContainer.js'
-import { StickySearchInput } from '../components/Search/SearchInput.js'
+import { PageContainer } from '../components/PageContainer.js'
+import { SearchInput } from '../components/Search/SearchInput.js'
 import { type ToolCollectionTypes, Tools } from '../components/Tools/Tools.js'
-import { useDefaultElementId } from '../hooks/useDefaultElementId.js'
 import { useHeader } from '../hooks/useHeader.js'
-import { useScrollableContainer } from '../hooks/useScrollableContainer.js'
+import { useListHeight } from '../hooks/useListHeight.js'
 import { useTools } from '../hooks/useTools.js'
 import { useSettingsStore } from '../stores/settings/SettingsStore.js'
 import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
@@ -47,7 +40,7 @@ const SelectAllCheckbox = memo<SelectAllCheckboxProps>(
           indeterminate={anyCheckboxesSelected && !allCheckboxesSelected}
           onChange={onClick}
           disabled={noCheckboxesAvailable}
-          sx={{ mr: -1.5 }}
+          sx={{ mr: -1.5, height: 20 }}
         />
       </Tooltip>
     )
@@ -64,10 +57,15 @@ export const SelectEnabledToolsPage: React.FC<{
   const disabledTools = useSettingsStore((state) => state[`disabled${type}`])
 
   const { t } = useTranslation()
-  const elementId = useDefaultElementId()
-  const scrollableContainer = useScrollableContainer(elementId)
+  const headerRef = useRef<HTMLElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
   const [searchValue, setSearchValue] = useState('')
 
+  const { listHeight } = useListHeight({
+    listParentRef: listRef,
+    headerRef,
+  })
+
   const filteredTools = useMemo(() => {
     const toolsList = tools?.[typeKey] ?? []
 
@@ -108,28 +106,26 @@ export const SelectEnabledToolsPage: React.FC<{
 
   useHeader(t(`settings.enabled${type}`), headerAction)
 
-  const handleSearchInputChange: FormEventHandler<HTMLInputElement> =
-    useCallback(
-      (e) => {
-        const value = (e.target as HTMLInputElement).value
-        setSearchValue(value)
-
-        if (scrollableContainer) {
-          scrollableContainer.scrollTop = 0
-        }
-      },
-      [scrollableContainer]
-    )
+  const handleSearchInputChange: ChangeEventHandler<HTMLInputElement> =
+    useCallback((e) => {
+      setSearchValue(e.target.value)
+      listRef.current?.scrollTo(0, 0)
+    }, [])
 
   const debouncedSearchInputChange = debounce(handleSearchInputChange, 250)
 
   return (
-    <FullPageContainer disableGutters>
-      <StickySearchInput
-        onChange={debouncedSearchInputChange}
-        placeholder={t(`main.search${type}`)}
-      />
-      <Tools filteredTools={filteredTools} type={type} />
-    </FullPageContainer>
+    <PageContainer disableGutters>
+      <Box ref={headerRef} sx={{ px: 3, pb: 2, pt: 1.5 }}>
+        <SearchInput
+          onChange={debouncedSearchInputChange}
+          placeholder={t(`main.search${type}`)}
+          autoFocus
+        />
+      </Box>
+      <Box ref={listRef} style={{ height: listHeight, overflow: 'auto' }}>
+        <Tools filteredTools={filteredTools} type={type} />
+      </Box>
+    </PageContainer>
   )
 }

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()