@lifi/widget 3.18.4 → 3.18.6

package/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -7,7 +7,7 @@ import { RouteExecutionStatus } from '../../stores/routes/types.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { TokenAvatarGroup } from '../Avatar/Avatar.style.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
-import { RouteTimer } from '../Timer/RouteTimer.js'
+import { StepTimer } from '../Timer/StepTimer.js'
 import { ListItem, ListItemButton } from './ActiveTransactions.style.js'
 
 export const ActiveTransactionItem: React.FC<{
@@ -47,7 +47,7 @@ export const ActiveTransactionItem: React.FC<{
               fontWeight: 600,
             }}
           >
-            <RouteTimer route={route} />
+            <StepTimer step={lastActiveStep} hideInProgress />
           </Typography>
         )
     }

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/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.18.4'
+export const version = '3.18.6'

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

package/src/hooks/timer/useTimer.ts

@@ -1,41 +1,52 @@
-import { useCallback, useState } from 'react'
-import { useInterval } from './useInterval.js'
+import { useCallback, useEffect, useState } from 'react'
 import {
-  getDelayFromExpiryTimestamp,
-  getSecondsFromExpiry,
-  getTimeFromSeconds,
-  validateOnExpire,
-} from './utils.js'
+  type TimeFromMillisecondsType,
+  getMillisecondsFromExpiry,
+  getTimeFromMilliseconds,
+} from './time.js'
+import { useInterval } from './useInterval.js'
+import { validateExpiryTimestamp, validateOnExpire } from './validate.js'
 
-const DEFAULT_DELAY = 1000
+const SECOND_INTERVAL = 1000
 
-interface UseTimerProps {
+export type useTimerSettingsType = {
   expiryTimestamp: Date
-  onExpire: () => void
+  onExpire?: () => void
   autoStart?: boolean
+  interval?: number
+}
+
+export type useTimerResultType = TimeFromMillisecondsType & {
+  start: () => void
+  pause: () => void
+  resume: () => void
+  restart: (newExpiryTimestamp: Date, newAutoStart?: boolean) => void
+  isRunning: boolean
 }
 
-// This implementation was taken from the common js project - https://www.npmjs.com/package/react-timer-hook
-// modified to work in the Widget codebase with Typescript
+/**
+ * `useTimer` from https://github.com/amrlabib/react-timer-hook
+ */
 export function useTimer({
   expiryTimestamp: expiry,
-  onExpire,
+  onExpire = () => {},
   autoStart = true,
-}: UseTimerProps) {
+  interval: customInterval = SECOND_INTERVAL,
+}: useTimerSettingsType): useTimerResultType {
   const [expiryTimestamp, setExpiryTimestamp] = useState(expiry)
-  const [seconds, setSeconds] = useState(() =>
-    getSecondsFromExpiry(expiryTimestamp)
+  const [milliseconds, setMilliseconds] = useState(
+    getMillisecondsFromExpiry(expiryTimestamp)
   )
   const [isRunning, setIsRunning] = useState(autoStart)
   const [didStart, setDidStart] = useState(autoStart)
-  const [delay, setDelay] = useState(() =>
-    getDelayFromExpiryTimestamp(expiryTimestamp, DEFAULT_DELAY)
-  )
+  const [interval, setInterval] = useState<number | null>(customInterval)
 
   const handleExpire = useCallback(() => {
-    validateOnExpire(onExpire) && onExpire()
+    if (validateOnExpire(onExpire)) {
+      onExpire()
+    }
     setIsRunning(false)
-    setDelay(0)
+    setInterval(null)
   }, [onExpire])
 
   const pause = useCallback(() => {
@@ -44,24 +55,24 @@ export function useTimer({
 
   const restart = useCallback(
     (newExpiryTimestamp: Date, newAutoStart = true) => {
-      setDelay(getDelayFromExpiryTimestamp(newExpiryTimestamp, DEFAULT_DELAY))
+      setInterval(customInterval)
       setDidStart(newAutoStart)
       setIsRunning(newAutoStart)
       setExpiryTimestamp(newExpiryTimestamp)
-      setSeconds(getSecondsFromExpiry(newExpiryTimestamp))
+      setMilliseconds(getMillisecondsFromExpiry(newExpiryTimestamp))
     },
-    []
+    [customInterval]
   )
 
   const resume = useCallback(() => {
     const time = new Date()
-    time.setMilliseconds(time.getMilliseconds() + seconds * 1000)
+    time.setMilliseconds(time.getMilliseconds() + milliseconds)
     restart(time)
-  }, [seconds, restart])
+  }, [milliseconds, restart])
 
   const start = useCallback(() => {
     if (didStart) {
-      setSeconds(getSecondsFromExpiry(expiryTimestamp))
+      setMilliseconds(getMillisecondsFromExpiry(expiryTimestamp))
       setIsRunning(true)
     } else {
       resume()
@@ -70,20 +81,23 @@ export function useTimer({
 
   useInterval(
     () => {
-      if (delay !== DEFAULT_DELAY) {
-        setDelay(DEFAULT_DELAY)
-      }
-      const secondsValue = getSecondsFromExpiry(expiryTimestamp)
-      setSeconds(secondsValue)
-      if (secondsValue <= 0) {
+      const millisecondsValue = getMillisecondsFromExpiry(expiryTimestamp)
+      setMilliseconds(millisecondsValue)
+      if (millisecondsValue <= 0) {
         handleExpire()
+      } else if (interval && millisecondsValue < interval) {
+        setInterval(millisecondsValue)
       }
     },
-    isRunning ? delay : 0
+    isRunning ? interval : null
   )
 
+  useEffect(() => {
+    validateExpiryTimestamp(expiryTimestamp)
+  }, [expiryTimestamp])
+
   return {
-    ...getTimeFromSeconds(seconds),
+    ...getTimeFromMilliseconds(milliseconds),
     start,
     pause,
     resume,

package/src/hooks/timer/validate.ts

@@ -0,0 +1,15 @@
+export function validateExpiryTimestamp(expiryTimestamp: Date) {
+  const isValid = new Date(expiryTimestamp).getTime() > 0
+  if (!isValid) {
+    console.warn('useTimer Invalid expiryTimestamp settings', expiryTimestamp)
+  }
+  return isValid
+}
+
+export function validateOnExpire(onExpire: () => void) {
+  const isValid = onExpire && typeof onExpire === 'function'
+  if (onExpire && !isValid) {
+    console.warn('useTimer Invalid onExpire settings function', onExpire)
+  }
+  return isValid
+}

package/src/hooks/useRoutes.ts

@@ -420,11 +420,12 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
         const initialRoutes = routesResult?.routes ?? []
 
         if (shouldUseRelayerQuote && initialRoutes.length) {
-          emitter.emit(WidgetEvent.AvailableRoutes, initialRoutes)
           setIntermediateRoutes(queryKey, initialRoutes)
+          emitter.emit(WidgetEvent.AvailableRoutes, initialRoutes)
           // Return early if we're only using main routes
         } else if (shouldUseMainRoutes) {
           // If we don't need relayer quote, return the initial routes
+          emitter.emit(WidgetEvent.AvailableRoutes, initialRoutes)
           return initialRoutes
         }
 

package/src/i18n/bn.json

@@ -6,7 +6,8 @@
   "format": {
     "currency": "",
     "number": "{{value, number(maximumFractionDigits: 9)}}",
-    "percent": ""
+    "percent": "",
+    "tokenAmount": ""
   },
   "button": {
     "auto": "স্বয়ংক্রিয়",
@@ -83,14 +84,13 @@
     "message": {
       "autoRefuel": "আপনার {{chainName}} গ্যাস কম। চালিয়ে যাওয়ার মাধ্যমে, আপনি সোওয়াপ সম্পূর্ণ করার জন্য পর্যাপ্ত গ্যাস পাবেন।",
       "emptyActiveTransactions": "",
-      "emptyTokenList": "",
-      "emptyChainList": "",
       "emptyBridgesList": "",
+      "emptyChainList": "",
       "emptyExchangesList": "",
+      "emptyTokenList": "",
       "emptyTransactionHistory": "",
-      "fundsToExchange": "",
-      "toAddressIsRequired": "",
-      "routeNotFound": ""
+      "routeNotFound": "",
+      "toAddressIsRequired": ""
     },
     "title": {
       "autoRefuel": "",
@@ -117,14 +117,18 @@
   },
   "warning": {
     "message": {
+      "accountNotDeployedMessage": "",
+      "lowAddressActivity": "",
       "deleteActiveTransactions": "",
       "deleteTransactionHistory": "",
+      "fundsLossPrevention": "",
       "highValueLoss": "প্রাপ্ত টোকেনগুলির মান সোওয়াপ করা টোকেন এবং লেনদেনের খরচের তুলনায় উল্লেখযোগ্যভাবে কম।",
       "insufficientFunds": "সোওয়াপ সম্পূর্ণ করার জন্য আপনার কাছে পর্যাপ্ত তহবিল নেই।",
       "insufficientGas": "সোওয়াপ সম্পূর্ণ করার জন্য আপনার কাছে পর্যাপ্ত গ্যাস নেই। আপনাকে অন্তত যোগ করতে হবে:",
       "rateChanged": "বিনিময় হার পরিবর্তিত হয়েছে। সোওয়াপ চালিয়ে যাওয়ার মাধ্যমে, আপনি নতুন হার গ্রহণ করবেন।",
       "resetSettings": "এটি আপনার রুটের অগ্রাধিকার, স্লিপেজ, গ্যাসের দাম, সক্ষম ব্রিজ এবং এক্সচেঞ্জ রিসেট করবে।",
-      "slippageOutsideRecommendedLimits": ""
+      "slippageOutsideRecommendedLimits": "",
+      "slippageUnderRecommendedLimits": ""
     },
     "title": {
       "deleteActiveTransactions": "",
@@ -133,7 +137,8 @@
       "highValueLoss": "উচ্চ মূল্য ক্ষতি",
       "insufficientGas": "অপর্যাপ্ত গ্যাস",
       "rateChanged": "হার পরিবর্তিত হয়েছে",
-      "resetSettings": "রিসেট সেটিংস?"
+      "resetSettings": "রিসেট সেটিংস?",
+      "lowAddressActivity": ""
     }
   },
   "error": {
@@ -146,6 +151,7 @@
       "transactionCanceled": "",
       "transactionConflict": "",
       "transactionExpired": "",
+      "transactionRejected": "",
       "transactionFailed": "আরও তথ্যের জন্য ব্লক এক্সপ্লোরার চেক করুন।",
       "transactionNotSent": "",
       "transactionSimulationFailed": "",
@@ -167,6 +173,7 @@
       "transactionConflict": "",
       "transactionExpired": "",
       "transactionFailed": "লেনদেন ব্যর্থ হয়েছে",
+      "transactionRejected": "",
       "transactionSimulationFailed": "",
       "transactionUnderpriced": "লেনদেনের দাম কম",
       "transactionUnprepared": "লেনদেন প্রস্তুত করতে অক্ষম",
@@ -187,6 +194,7 @@
       "text": "আমরা এই পৃষ্ঠাটি খুঁজে পাইনি।",
       "title": "৪০৪"
     },
+    "relayerService": "",
     "numberOfSteps": "",
     "priceImpact": "",
     "progressToNextUpdate": "প্রদর্শিত ডেটা {{value}} সেকেন্ড পরে স্বয়ংক্রিয়ভাবে রিফ্রেশ হবে। ম্যানুয়ালি আপডেট করতে এখানে ক্লিক করুন।",
@@ -203,7 +211,9 @@
     "featuredTokens": "বৈশিষ্ট্যযুক্ত টোকেন",
     "fees": {
       "defaultIntegrator": "",
+      "relayerService": "",
       "estimated": "",
+      "free": "",
       "integrator": "",
       "network": "",
       "paid": "",
@@ -238,19 +248,26 @@
         "refunded": "ব্রিজ লেনদেন ফেরত করা হয়েছে"
       },
       "swap": {
-        "actionRequired": "দয়াকরে লেনদেন স্বাক্ষর করুন",
+        "actionRequired": "",
         "done": "সোওয়াপ সম্পন্ন হয়েছে",
-        "pending": "সোওয়াপ লেনদেনের জন্য অপেক্ষা করা হচ্ছে",
+        "pending": "",
         "started": "সোয়াপ লেনদেন প্রস্তুত করা হচ্ছে"
       },
       "switchChain": {
-        "actionRequired": "চেইন সুইচ প্রয়োজন",
-        "done": "চেইন সফলভাবে সুইচ করা হয়েছে"
+        "actionRequired": "",
+        "done": ""
+      },
+      "permit": {
+        "actionRequired": "",
+        "done": "",
+        "pending": "",
+        "started": ""
       },
       "tokenAllowance": {
-        "done": "টোকেন অনুমতি অনুমোদিত",
-        "pending": "টোকেন অনুমতির অপেক্ষায়",
-        "started": "টোকেন অনুমতির অপেক্ষায়"
+        "actionRequired": "",
+        "done": "",
+        "pending": "",
+        "started": ""
       }
     },
     "quotedAmount": "উদ্ধৃত পরিমাণ",
@@ -278,11 +295,12 @@
     "transferId": "",
     "tags": {
       "cheapest": "",
-      "fastest": ""
+      "fastest": "",
+      "gasless": ""
     },
     "to": "প্রতি",
     "tokenOnChain": "{{chainName}} -এ {{tokenSymbol}}",
-    "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} {{chainName}} -এ",
+    "tokenOnChainAmount": "",
     "tokenSearch": "আপনার টোকেন অনুসন্ধান করুন",
     "valueLoss": "মান ক্ষতি",
     "searchChains": "",