@lifi/widget 3.18.4 → 3.19.0-beta.0

package/src/components/Header/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import { Settings } from '@mui/icons-material'
+import Settings from '@mui/icons-material/Settings'
 import { Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'

package/src/components/Header/TransactionHistoryButton.tsx

@@ -1,4 +1,4 @@
-import { ReceiptLong } from '@mui/icons-material'
+import ReceiptLong from '@mui/icons-material/ReceiptLong'
 import { IconButton, Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'

package/src/components/Header/WalletHeader.tsx

@@ -4,7 +4,8 @@ import {
   useAccount,
   useWalletMenu,
 } from '@lifi/wallet-management'
-import { ExpandMore, Wallet } from '@mui/icons-material'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import Wallet from '@mui/icons-material/Wallet'
 import { Avatar, Badge } from '@mui/material'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/components/Header/WalletMenu.tsx

@@ -3,11 +3,9 @@ import {
   useAccount,
   useWalletMenu,
 } from '@lifi/wallet-management'
-import {
-  ContentCopyRounded,
-  OpenInNewRounded,
-  PowerSettingsNewRounded,
-} from '@mui/icons-material'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'
 import { Avatar, Badge, Box, Button, IconButton, MenuItem } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'

package/src/components/Messages/AccountNotDeployedMessage.tsx

@@ -1,4 +1,4 @@
-import { WarningRounded } from '@mui/icons-material'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { type BoxProps, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { AlertMessage } from './AlertMessage.js'

package/src/components/Messages/FundsSufficiencyMessage.tsx

@@ -1,4 +1,4 @@
-import { WarningRounded } from '@mui/icons-material'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { type BoxProps, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { AlertMessage } from './AlertMessage.js'

package/src/components/Messages/GasRefuelMessage.tsx

@@ -1,4 +1,4 @@
-import { EvStation } from '@mui/icons-material'
+import EvStation from '@mui/icons-material/EvStation'
 import type { BoxProps } from '@mui/material'
 import { Box, Collapse, Typography } from '@mui/material'
 import type { ChangeEvent } from 'react'

package/src/components/Messages/GasSufficiencyMessage.tsx

@@ -1,4 +1,4 @@
-import { EvStation } from '@mui/icons-material'
+import EvStation from '@mui/icons-material/EvStation'
 import { type BoxProps, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { formatUnits } from 'viem'

package/src/components/Messages/ToAddressRequiredMessage.tsx

@@ -1,4 +1,4 @@
-import { Wallet } from '@mui/icons-material'
+import Wallet from '@mui/icons-material/Wallet'
 import type { BoxProps } from '@mui/material'
 import { Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'

package/src/components/NotFound.tsx

@@ -1,4 +1,4 @@
-import { Block } from '@mui/icons-material'
+import Block from '@mui/icons-material/Block'
 import { Box, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -1,4 +1,5 @@
-import { ArrowDownward, ArrowForward } from '@mui/icons-material'
+import ArrowDownward from '@mui/icons-material/ArrowDownward'
+import ArrowForward from '@mui/icons-material/ArrowForward'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
 import { useToAddressReset } from '../../hooks/useToAddressReset.js'

package/src/components/RouteCard/RouteCard.tsx

@@ -1,6 +1,7 @@
 import type { TokenAmount } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import { ExpandLess, ExpandMore } from '@mui/icons-material'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
 import { Box, Collapse } from '@mui/material'
 import type { MouseEventHandler } from 'react'
 import { useState } from 'react'

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -1,5 +1,6 @@
 import { isGaslessStep } from '@lifi/sdk'
-import { AccessTimeFilled, LocalGasStationRounded } from '@mui/icons-material'
+import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
+import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
 import { Box, Tooltip, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'

package/src/components/RouteCard/RouteCardEssentialsExpanded.tsx

@@ -1,4 +1,4 @@
-import { Layers } from '@mui/icons-material'
+import Layers from '@mui/icons-material/Layers'
 import { Box, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { IconTypography } from '../IconTypography.js'

package/src/components/RouteCard/RouteNotFoundCard.tsx

@@ -1,4 +1,4 @@
-import { Route } from '@mui/icons-material'
+import Route from '@mui/icons-material/Route'
 import { Box, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 

package/src/components/Routes/Routes.tsx

@@ -77,7 +77,7 @@ export const Routes: React.FC<CardProps> = (props) => {
           <RouteCard route={currentRoute} variant="cardless" active />
         )}
 
-        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter appear>
+        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>
           <Box
             sx={{
               mt: 2,

package/src/components/Search/SearchInput.tsx

@@ -1,4 +1,4 @@
-import { Search } from '@mui/icons-material'
+import Search from '@mui/icons-material/Search'
 import { FormControl, InputAdornment } from '@mui/material'
 import type { FocusEventHandler, FormEventHandler } from 'react'
 import { InputCard } from '../../components/Card/InputCard.js'

package/src/components/Search/SearchNotFound.tsx

@@ -1,4 +1,4 @@
-import { SearchOff } from '@mui/icons-material'
+import SearchOff from '@mui/icons-material/SearchOff'
 import {
   NotFoundContainer,
   NotFoundIconContainer,

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -1,5 +1,5 @@
 import { useAccount } from '@lifi/wallet-management'
-import { CloseRounded } from '@mui/icons-material'
+import CloseRounded from '@mui/icons-material/CloseRounded'
 import { Box, Collapse } from '@mui/material'
 import { type MouseEventHandler, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -1,4 +1,4 @@
-import { Wallet } from '@mui/icons-material'
+import Wallet from '@mui/icons-material/Wallet'
 import { Button, Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'

package/src/components/Step/CircularProgress.tsx

@@ -1,10 +1,8 @@
 import type { Process } from '@lifi/sdk'
-import {
-  Done,
-  ErrorRounded,
-  InfoRounded,
-  WarningRounded,
-} from '@mui/icons-material'
+import Done from '@mui/icons-material/Done'
+import ErrorRounded from '@mui/icons-material/ErrorRounded'
+import InfoRounded from '@mui/icons-material/InfoRounded'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { darken } from '@mui/material'
 import {
   CircularIcon,

package/src/components/Step/DestinationWalletAddress.tsx

@@ -1,5 +1,6 @@
 import type { LiFiStepExtended } from '@lifi/sdk'
-import { LinkRounded, Wallet } from '@mui/icons-material'
+import LinkRounded from '@mui/icons-material/LinkRounded'
+import Wallet from '@mui/icons-material/Wallet'
 import { Box, Link, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { CardIconButton } from '../Card/CardIconButton.js'

package/src/components/Step/StepProcess.tsx

@@ -1,5 +1,5 @@
 import type { LiFiStep, Process } from '@lifi/sdk'
-import { OpenInNewRounded } from '@mui/icons-material'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import { Box, Link, Typography } from '@mui/material'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useProcessMessage } from '../../hooks/useProcessMessage.js'

package/src/components/StepActions/StepActions.tsx

@@ -1,6 +1,8 @@
 import type { LiFiStep, StepExtended } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import { ArrowForward, ExpandLess, ExpandMore } from '@mui/icons-material'
+import ArrowForward from '@mui/icons-material/ArrowForward'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
 import type { StepIconProps } from '@mui/material'
 import {
   Badge,

package/src/components/Timer/StepTimer.tsx

@@ -1,66 +1,123 @@
 import type { LiFiStepExtended } from '@lifi/sdk'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useStopwatch } from '../../hooks/timer/useStopwatch.js'
-import { useSettings } from '../../stores/settings/useSettings.js'
+import { useTimer } from '../../hooks/timer/useTimer.js'
 import { formatTimer } from '../../utils/timer.js'
 import { TimerContent } from './TimerContent.js'
 
-const getFirstExecutionProcess = (step: LiFiStepExtended) =>
-  step.execution?.process.at(0)
+/**
+ * Finds the most recent process that is either a SWAP, CROSS_CHAIN, or RECEIVING_CHAIN.
+ * Includes RECEIVING_CHAIN to track the complete transaction lifecycle for UI updates.
+ */
+const getProgressProcess = (step: LiFiStepExtended) =>
+  step.execution?.process.findLast(
+    (process) =>
+      process.type === 'SWAP' ||
+      process.type === 'CROSS_CHAIN' ||
+      process.type === 'RECEIVING_CHAIN'
+  )
 
-const getExecutionProcess = (step: LiFiStepExtended) =>
-  step.execution?.process.at(-1)
+/**
+ * Finds the most recent SWAP or CROSS_CHAIN process, excluding RECEIVING_CHAIN.
+ * Expiry time is based on when the active transaction started, not the receiving phase.
+ */
+const getExpiryProcess = (step: LiFiStepExtended) =>
+  step.execution?.process.findLast(
+    (process) => process.type === 'SWAP' || process.type === 'CROSS_CHAIN'
+  )
 
-const getStartTimestamp = (step: LiFiStepExtended) =>
-  new Date(getFirstExecutionProcess(step)?.startedAt ?? Date.now())
+/**
+ * Calculates expiry timestamp based on process start time, estimated duration, and pause time.
+ * Pause time is added when action is required (usually for signature requests).
+ */
+const getExpiryTimestamp = (step: LiFiStepExtended) => {
+  const lastProcess = getExpiryProcess(step)
+  let timeInPause = 0
+  if (lastProcess?.actionRequiredAt) {
+    const actionDoneAt =
+      lastProcess.pendingAt ?? lastProcess.doneAt ?? Date.now()
+    timeInPause = new Date(
+      actionDoneAt - lastProcess.actionRequiredAt
+    ).getTime()
+  }
+  const expiry = new Date(
+    (lastProcess?.startedAt ?? Date.now()) +
+      step.estimate.executionDuration * 1000 +
+      timeInPause
+  )
+  return expiry
+}
 
 export const StepTimer: React.FC<{
   step: LiFiStepExtended
   hideInProgress?: boolean
-}> = ({ step }) => {
-  const { i18n } = useTranslation()
-  const { language } = useSettings(['language'])
-
+}> = ({ step, hideInProgress }) => {
+  const { t, i18n } = useTranslation()
+  const [isExpired, setExpired] = useState(false)
   const [isExecutionStarted, setExecutionStarted] = useState(
-    () => !!getExecutionProcess(step)
+    () => !!getProgressProcess(step)
   )
-
-  const { seconds, minutes, days, hours, isRunning, pause, reset, start } =
-    useStopwatch({
-      autoStart: true,
-      offsetTimestamp: getStartTimestamp(step),
+  const [expiryTimestamp, setExpiryTimestamp] = useState(() =>
+    getExpiryTimestamp(step)
+  )
+  const { days, hours, minutes, seconds, isRunning, pause, resume, restart } =
+    useTimer({
+      autoStart: false,
+      expiryTimestamp,
+      onExpire: () => setExpired(true),
     })
 
   useEffect(() => {
-    const executionProcess = getExecutionProcess(step)
+    const executionProcess = getProgressProcess(step)
     if (!executionProcess) {
       return
     }
 
-    const shouldRestart =
-      executionProcess.status === 'FAILED' || executionProcess.status === 'DONE'
-    const shouldStart =
+    if (isExecutionStarted && isExpired) {
+      return
+    }
+
+    const isProcessStarted =
       executionProcess.status === 'STARTED' ||
       executionProcess.status === 'PENDING'
-    const shouldResume = executionProcess.status === 'PENDING'
-    if (isExecutionStarted && shouldRestart) {
-      setExecutionStarted(false)
-      pause()
-      return
+
+    const shouldRestart = !isExecutionStarted && isProcessStarted && !isRunning
+
+    const shouldPause =
+      isExecutionStarted &&
+      executionProcess.status === 'ACTION_REQUIRED' &&
+      isRunning
+
+    const shouldStop =
+      isExecutionStarted && executionProcess.status === 'FAILED'
+
+    const shouldResume = isExecutionStarted && isProcessStarted && !isRunning
+
+    if (shouldRestart) {
+      const newExpiryTimestamp = getExpiryTimestamp(step)
+      setExecutionStarted(true)
+      setExpiryTimestamp(newExpiryTimestamp)
+      return restart(newExpiryTimestamp, true)
     }
-    if (isExecutionStarted && !isRunning && shouldResume) {
-      start()
-      return
+    if (shouldPause) {
+      return pause()
     }
-    if (!isExecutionStarted && shouldStart) {
-      setExecutionStarted(true)
-      reset()
-      return
+    if (shouldResume) {
+      return resume()
     }
-  }, [isExecutionStarted, isRunning, pause, reset, start, step])
+    if (shouldStop) {
+      setExecutionStarted(false)
+      setExpired(false)
+    }
+  }, [isExecutionStarted, isExpired, isRunning, pause, restart, resume, step])
+
+  const isTimerExpired = isExpired || (!minutes && !seconds)
 
-  if (step.execution?.status === 'DONE') {
+  if (
+    step.execution?.status === 'DONE' ||
+    step.execution?.status === 'FAILED' ||
+    (isTimerExpired && hideInProgress)
+  ) {
     return null
   }
 
@@ -80,10 +137,12 @@ export const StepTimer: React.FC<{
     )
   }
 
-  return (
+  return isTimerExpired ? (
+    t('main.inProgress')
+  ) : (
     <TimerContent>
       {formatTimer({
-        locale: language,
+        locale: i18n.language,
         days,
         hours,
         minutes,

package/src/components/Timer/TimerContent.tsx

@@ -1,4 +1,4 @@
-import { AccessTimeFilled } from '@mui/icons-material'
+import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
 import { Tooltip } from '@mui/material'
 import { Box } from '@mui/system'
 import type { FC, PropsWithChildren } from 'react'

package/src/components/TokenList/TokenListItem.tsx

@@ -1,5 +1,5 @@
 import { ChainType } from '@lifi/sdk'
-import { OpenInNewRounded } from '@mui/icons-material'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import {
   Avatar,
   Box,

package/src/components/TokenList/types.ts

@@ -1,11 +1,11 @@
 import type { ExtendedChain } from '@lifi/sdk'
 import type { Account } from '@lifi/wallet-management'
-import type { MouseEventHandler, MutableRefObject } from 'react'
+import type { MouseEventHandler, RefObject } from 'react'
 import type { FormType } from '../../stores/form/types.js'
 import type { TokenAmount } from '../../types/token.js'
 
 export interface TokenListProps {
-  parentRef: MutableRefObject<HTMLElement | null>
+  parentRef: RefObject<HTMLElement | null>
   formType: FormType
   height: number
   onClick?(): void
@@ -14,7 +14,7 @@ export interface TokenListProps {
 export interface VirtualizedTokenListProps {
   account: Account
   tokens: TokenAmount[]
-  scrollElementRef: MutableRefObject<HTMLElement | null>
+  scrollElementRef: RefObject<HTMLElement | null>
   isLoading: boolean
   isBalanceLoading: boolean
   chainId?: number

package/src/components/TransactionDetails.tsx

@@ -1,10 +1,8 @@
 import type { RouteExtended } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import {
-  ExpandLess,
-  ExpandMore,
-  LocalGasStationRounded,
-} from '@mui/icons-material'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
 import type { CardProps } from '@mui/material'
 import { Box, Collapse, Tooltip, Typography } from '@mui/material'
 import { useState } from 'react'

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.18.4'
+export const version = '3.19.0-beta.0'

package/src/hooks/timer/time.ts

@@ -0,0 +1,49 @@
+export type TimeFromMillisecondsType = {
+  totalMilliseconds: number
+  totalSeconds: number
+  milliseconds: number
+  seconds: number
+  minutes: number
+  hours: number
+  days: number
+}
+
+export type AMPMType = '' | 'pm' | 'am'
+
+export type FormattedTimeFromMillisecondsType = {
+  milliseconds: number
+  seconds: number
+  minutes: number
+  hours: number
+  ampm?: AMPMType
+}
+
+export function getTimeFromMilliseconds(
+  millisecs: number,
+  isCountDown = true
+): TimeFromMillisecondsType {
+  const totalSeconds = isCountDown
+    ? Math.ceil(millisecs / 1000)
+    : Math.floor(millisecs / 1000)
+  const days = Math.floor(totalSeconds / (60 * 60 * 24))
+  const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60))
+  const minutes = Math.floor((totalSeconds % (60 * 60)) / 60)
+  const seconds = Math.floor(totalSeconds % 60)
+  const milliseconds = Math.floor(millisecs % 1000)
+
+  return {
+    totalMilliseconds: millisecs,
+    totalSeconds,
+    milliseconds,
+    seconds,
+    minutes,
+    hours,
+    days,
+  }
+}
+
+export function getMillisecondsFromExpiry(expiry: Date): number {
+  const now = new Date().getTime()
+  const milliSecondsDistance = expiry?.getTime() - now
+  return milliSecondsDistance > 0 ? milliSecondsDistance : 0
+}

package/src/hooks/timer/useInterval.ts

@@ -1,11 +1,11 @@
 import { useEffect, useRef } from 'react'
 
-export function useInterval(callback: () => void, delay: number) {
-  const callbacRef = useRef<() => void>(null)
+export function useInterval(callback: () => void, delay: number | null) {
+  const callbackRef = useRef(callback)
 
   // update callback function with current render callback that has access to latest props and state
   useEffect(() => {
-    callbacRef.current = callback
+    callbackRef.current = callback
   })
 
   useEffect(() => {
@@ -14,7 +14,7 @@ export function useInterval(callback: () => void, delay: number) {
     }
 
     const interval = setInterval(() => {
-      callbacRef.current?.()
+      callbackRef?.current?.()
     }, delay)
     return () => clearInterval(interval)
   }, [delay])