@lifi/widget 3.40.8 → 4.0.0-alpha.1

package/src/components/Step/Step.tsx

@@ -7,10 +7,11 @@ import { StepActions } from '../../components/StepActions/StepActions.js'
 import { Token } from '../../components/Token/Token.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { prepareActions } from '../../utils/prepareActions.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { StepTimer } from '../Timer/StepTimer.js'
 import { DestinationWalletAddress } from './DestinationWalletAddress.js'
-import { StepProcess } from './StepProcess.js'
+import { StepAction } from './StepAction.js'
 
 export const Step: React.FC<{
   step: LiFiStepExtended
@@ -22,8 +23,8 @@ export const Step: React.FC<{
   const { t } = useTranslation()
   const { subvariant, subvariantOptions } = useWidgetConfig()
   const { getAddressLink } = useExplorer()
-  const stepHasError = step.execution?.process.some(
-    (process) => process.status === 'FAILED'
+  const stepHasError = step.execution?.actions?.some(
+    (action) => action.status === 'FAILED'
   )
 
   const getCardTitle = () => {
@@ -39,31 +40,27 @@ export const Step: React.FC<{
 
     if (hasBridgeStep && hasSwapStep) {
       return isCustomVariant
-        ? subvariantOptions?.custom === 'deposit' ||
-          subvariantOptions?.custom === 'fund'
+        ? subvariantOptions?.custom === 'deposit'
           ? t('main.stepBridgeAndDeposit')
           : t('main.stepBridgeAndBuy')
         : t('main.stepSwapAndBridge')
     }
     if (hasBridgeStep) {
       return isCustomVariant
-        ? subvariantOptions?.custom === 'deposit' ||
-          subvariantOptions?.custom === 'fund'
+        ? subvariantOptions?.custom === 'deposit'
           ? t('main.stepBridgeAndDeposit')
           : t('main.stepBridgeAndBuy')
         : t('main.stepBridge')
     }
     if (hasSwapStep) {
       return isCustomVariant
-        ? subvariantOptions?.custom === 'deposit' ||
-          subvariantOptions?.custom === 'fund'
+        ? subvariantOptions?.custom === 'deposit'
           ? t('main.stepSwapAndDeposit')
           : t('main.stepSwapAndBuy')
         : t('main.stepSwap')
     }
     return isCustomVariant
-      ? subvariantOptions?.custom === 'deposit' ||
-        subvariantOptions?.custom === 'fund'
+      ? subvariantOptions?.custom === 'deposit'
         ? t('main.stepDeposit')
         : t('main.stepBuy')
       : t('main.stepSwap')
@@ -94,9 +91,11 @@ export const Step: React.FC<{
       >
         {fromToken ? <Token token={fromToken} px={2} py={1} /> : null}
         <StepActions step={step} px={2} py={1} dense />
-        {step.execution?.process.map((process, index) => (
-          <StepProcess key={index} step={step} process={process} />
-        ))}
+        {prepareActions(step.execution?.actions ?? []).map(
+          (actionsGroup, index) => (
+            <StepAction key={index} step={step} actionsGroup={actionsGroup} />
+          )
+        )}
         {formattedToAddress && toAddressLink ? (
           <DestinationWalletAddress
             step={step}

package/src/components/Step/{StepProcess.tsx → StepAction.tsx}

@@ -1,27 +1,32 @@
-import type { LiFiStep, Process } from '@lifi/sdk'
+import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import { Box, Link, Typography } from '@mui/material'
+import { useActionMessage } from '../../hooks/useActionMessage.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
-import { useProcessMessage } from '../../hooks/useProcessMessage.js'
 import { CardIconButton } from '../Card/CardIconButton.js'
 import { CircularProgress } from './CircularProgress.js'
 
-export const StepProcess: React.FC<{
-  step: LiFiStep
-  process: Process
-}> = ({ step, process }) => {
-  const { title, message } = useProcessMessage(step, process)
+export const StepAction: React.FC<{
+  step: LiFiStepExtended
+  actionsGroup: ExecutionAction[]
+}> = ({ step, actionsGroup }) => {
+  const action = actionsGroup.at(-1)
+  const { title, message } = useActionMessage(step, action)
   const { getTransactionLink } = useExplorer()
 
-  const transactionLink = process.txHash
+  if (!action) {
+    return null
+  }
+
+  const transactionLink = action.txHash
     ? getTransactionLink({
-        txHash: process.txHash,
-        chain: process.chainId,
+        txHash: action.txHash,
+        chain: action.chainId,
       })
-    : process.txLink
+    : action.txLink
       ? getTransactionLink({
-          txLink: process.txLink,
-          chain: process.chainId,
+          txLink: action.txLink,
+          chain: action.chainId,
         })
       : undefined
 
@@ -38,14 +43,14 @@ export const StepProcess: React.FC<{
           alignItems: 'center',
         }}
       >
-        <CircularProgress process={process} />
+        <CircularProgress action={action} />
         <Typography
           sx={{
             marginLeft: 2,
             marginRight: 0.5,
             flex: 1,
             fontSize: 14,
-            fontWeight: process.error ? 600 : 400,
+            fontWeight: action.error ? 600 : 400,
           }}
         >
           {title}

package/src/components/StepActions/StepActions.tsx

@@ -1,5 +1,5 @@
 import type { LiFiStep, StepExtended } from '@lifi/sdk'
-import { isGaslessStep } from '@lifi/sdk'
+import { useEthereumContext } from '@lifi/widget-provider'
 import ArrowForward from '@mui/icons-material/ArrowForward'
 import ExpandLess from '@mui/icons-material/ExpandLess'
 import ExpandMore from '@mui/icons-material/ExpandMore'
@@ -123,6 +123,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
 const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
   const { subvariant, subvariantOptions, feeConfig, hiddenUI } =
     useWidgetConfig()
+  const { isGaslessStep } = useEthereumContext()
 
   let includedSteps = step.includedSteps
   if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {
@@ -163,7 +164,7 @@ const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
     ) : null
   }
 
-  const hasGaslessSupport = isGaslessStep(step)
+  const hasGaslessSupport = !!isGaslessStep?.(step)
 
   return (
     <Box

package/src/components/Timer/StepTimer.tsx

@@ -1,49 +1,17 @@
 import type { LiFiStepExtended } from '@lifi/sdk'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTimer } from '../../hooks/timer/useTimer.js'
 import { formatTimer } from '../../utils/timer.js'
 import { TimerContent } from './TimerContent.js'
 
-/**
- * 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'
-  )
-
-/**
- * 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'
-  )
-
-/**
- * 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 execution = step?.execution
+  if (!execution) {
+    return new Date()
   }
   const expiry = new Date(
-    (lastProcess?.startedAt ?? Date.now()) +
-      step.estimate.executionDuration * 1000 +
-      timeInPause
+    (execution.signedAt ?? Date.now()) + step.estimate.executionDuration * 1000
   )
   return expiry
 }
@@ -52,78 +20,16 @@ export const StepTimer: React.FC<{
   step: LiFiStepExtended
   hideInProgress?: boolean
 }> = ({ step, hideInProgress }) => {
-  const { t, i18n } = useTranslation()
-  const [isExpired, setExpired] = useState(false)
-  const [isExecutionStarted, setExecutionStarted] = useState(
-    () => !!getProgressProcess(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 = getProgressProcess(step)
-    if (!executionProcess) {
-      return
-    }
-
-    if (isExecutionStarted && isExpired) {
-      return
-    }
-
-    const isProcessStarted =
-      executionProcess.status === 'STARTED' ||
-      executionProcess.status === 'PENDING'
-
-    const shouldRestart = !isExecutionStarted && isProcessStarted && !isRunning
-
-    const shouldPause =
-      isExecutionStarted &&
-      (executionProcess.status === 'ACTION_REQUIRED' ||
-        executionProcess.status === 'MESSAGE_REQUIRED' ||
-        executionProcess.status === 'RESET_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 (shouldPause) {
-      return pause()
-    }
-    if (shouldResume) {
-      return resume()
-    }
-    if (shouldStop) {
-      setExecutionStarted(false)
-      setExpired(false)
-    }
-  }, [isExecutionStarted, isExpired, isRunning, pause, restart, resume, step])
-
-  const isTimerExpired = isExpired || (!minutes && !seconds)
+  const { i18n } = useTranslation()
 
   if (
     step.execution?.status === 'DONE' ||
-    step.execution?.status === 'FAILED' ||
-    (isTimerExpired && hideInProgress)
+    step.execution?.status === 'FAILED'
   ) {
     return null
   }
 
-  if (!isExecutionStarted) {
+  if (!step.execution?.signedAt) {
     const showSeconds = step.estimate.executionDuration < 60
     const duration = showSeconds
       ? Math.floor(step.estimate.executionDuration)
@@ -139,9 +45,41 @@ export const StepTimer: React.FC<{
     )
   }
 
-  return isTimerExpired ? (
-    t('main.inProgress')
-  ) : (
+  return (
+    <ExecutionTimer
+      expiryTimestamp={getExpiryTimestamp(step)}
+      hideInProgress={hideInProgress}
+    />
+  )
+}
+
+const ExecutionTimer = ({
+  expiryTimestamp,
+  hideInProgress,
+}: {
+  expiryTimestamp: Date
+  hideInProgress?: boolean
+}) => {
+  const { t, i18n } = useTranslation()
+
+  const [isExpired, setExpired] = useState(false)
+
+  const { days, hours, minutes, seconds } = useTimer({
+    autoStart: true,
+    expiryTimestamp,
+    onExpire: () => setExpired(true),
+  })
+
+  const isTimerExpired = isExpired || (!minutes && !seconds)
+
+  if (isTimerExpired) {
+    if (hideInProgress) {
+      return null
+    }
+    return t('main.inProgress')
+  }
+
+  return (
     <TimerContent>
       {formatTimer({
         locale: i18n.language,

package/src/components/TokenList/PinTokenButton.tsx

@@ -0,0 +1,50 @@
+import PushPinIcon from '@mui/icons-material/PushPin'
+import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'
+import { IconButton } from '@mui/material'
+import { usePinnedTokensStore } from '../../stores/pinnedTokens/PinnedTokensStore.js'
+
+interface PinTokenButtonProps {
+  chainId: number
+  tokenAddress: string
+}
+
+export const PinTokenButton = ({
+  chainId,
+  tokenAddress,
+}: PinTokenButtonProps) => {
+  const [pinnedTokens, pinToken, unpinToken] = usePinnedTokensStore((state) => [
+    state.pinnedTokens,
+    state.pinToken,
+    state.unpinToken,
+  ])
+
+  const isPinned =
+    pinnedTokens[chainId]?.includes(tokenAddress.toLowerCase()) ?? false
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    ;(e.currentTarget as HTMLElement).blur()
+    if (isPinned) {
+      unpinToken(chainId, tokenAddress)
+    } else {
+      pinToken(chainId, tokenAddress)
+    }
+  }
+
+  const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon
+
+  return (
+    <IconButton
+      sx={{ width: 20, height: 20 }}
+      size="small"
+      onClick={handleClick}
+    >
+      <PinIcon
+        sx={{
+          fontSize: 12,
+          color: isPinned ? 'text.primary' : 'text.secondary',
+        }}
+      />
+    </IconButton>
+  )
+}

package/src/components/TokenList/TokenList.tsx

@@ -1,6 +1,8 @@
 import { Box } from '@mui/material'
-import { type FC, memo, useEffect } from 'react'
+import { type FC, memo, useEffect, useRef } from 'react'
 import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js'
+import { useListHeight } from '../../hooks/useListHeight.js'
+import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useTokenBalances } from '../../hooks/useTokenBalances.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
@@ -12,69 +14,75 @@ import type { TokenListProps } from './types.js'
 import { useTokenSelect } from './useTokenSelect.js'
 import { VirtualizedTokenList } from './VirtualizedTokenList.js'
 
-export const TokenList: FC<TokenListProps> = memo(
-  ({ formType, parentRef, height, onClick }) => {
-    const emitter = useWidgetEvents()
+export const TokenList: FC<TokenListProps> = memo(({ formType, headerRef }) => {
+  const navigateBack = useNavigateBack()
+  const listParentRef = useRef<HTMLUListElement | null>(null)
+  const { listHeight } = useListHeight({
+    listParentRef,
+    headerRef,
+  })
 
-    const [selectedChainId, selectedTokenAddress] = useFieldValues(
-      FormKeyHelper.getChainKey(formType),
-      FormKeyHelper.getTokenKey(formType)
-    )
+  const emitter = useWidgetEvents()
 
-    const isAllNetworks = useChainOrderStore(
-      (state) => state[`${formType}IsAllNetworks`]
-    )
+  const [selectedChainId, selectedTokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType)
+  )
 
-    const [tokenSearchFilter]: string[] = useDebouncedWatch(
-      320,
-      'tokenSearchFilter'
-    )
+  const isAllNetworks = useChainOrderStore(
+    (state) => state[`${formType}IsAllNetworks`]
+  )
 
-    const {
-      tokens,
-      withCategories,
-      isTokensLoading,
-      isBalanceLoading,
-      isSearchLoading,
-    } = useTokenBalances(
-      selectedChainId,
-      formType,
-      isAllNetworks,
-      tokenSearchFilter
-    )
+  const [tokenSearchFilter]: string[] = useDebouncedWatch(
+    320,
+    'tokenSearchFilter'
+  )
 
-    const handleTokenClick = useTokenSelect(formType, onClick)
+  const {
+    tokens,
+    withCategories,
+    withPinnedTokens,
+    isTokensLoading,
+    isBalanceLoading,
+    isSearchLoading,
+  } = useTokenBalances(
+    selectedChainId,
+    formType,
+    isAllNetworks,
+    tokenSearchFilter
+  )
 
-    const showCategories =
-      withCategories && !tokenSearchFilter && !isAllNetworks
+  const handleTokenClick = useTokenSelect(formType, navigateBack)
 
-    useEffect(() => {
-      const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')
-      if (normalizedSearchFilter) {
-        emitter.emit(WidgetEvent.TokenSearch, {
-          value: normalizedSearchFilter,
-          tokens,
-        })
-      }
-    }, [tokenSearchFilter, tokens, emitter])
+  const showCategories = withCategories && !tokenSearchFilter && !isAllNetworks
 
-    return (
-      <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
-        {!tokens.length && !isTokensLoading && !isSearchLoading ? (
-          <TokenNotFound formType={formType} />
-        ) : null}
-        <VirtualizedTokenList
-          tokens={tokens}
-          scrollElementRef={parentRef}
-          chainId={selectedChainId}
-          isLoading={isTokensLoading || isSearchLoading}
-          isBalanceLoading={isBalanceLoading}
-          showCategories={showCategories}
-          onClick={handleTokenClick}
-          selectedTokenAddress={selectedTokenAddress}
-          isAllNetworks={isAllNetworks}
-        />
-      </Box>
-    )
-  }
-)
+  useEffect(() => {
+    const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')
+    if (normalizedSearchFilter) {
+      emitter.emit(WidgetEvent.TokenSearch, {
+        value: normalizedSearchFilter,
+        tokens,
+      })
+    }
+  }, [tokenSearchFilter, tokens, emitter])
+
+  return (
+    <Box ref={listParentRef} style={{ height: listHeight, overflow: 'auto' }}>
+      {!tokens.length && !isTokensLoading && !isSearchLoading ? (
+        <TokenNotFound formType={formType} />
+      ) : null}
+      <VirtualizedTokenList
+        tokens={tokens}
+        scrollElementRef={listParentRef}
+        chainId={selectedChainId}
+        isLoading={isTokensLoading || isSearchLoading}
+        isBalanceLoading={isBalanceLoading}
+        showCategories={showCategories}
+        showPinnedTokens={withPinnedTokens}
+        onClick={handleTokenClick}
+        selectedTokenAddress={selectedTokenAddress}
+        isAllNetworks={isAllNetworks}
+      />
+    </Box>
+  )
+})

package/src/components/TokenList/TokenListItem.tsx

@@ -21,6 +21,7 @@ import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
 import { ListItemButton } from '../ListItem/ListItemButton.js'
+import { PinTokenButton } from './PinTokenButton.js'
 import { IconButton, ListItem } from './TokenList.style.js'
 import type {
   TokenListItemAvatarProps,
@@ -248,17 +249,17 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
                     appear={false}
                     mountOnEnter
                   >
-                    <Box
-                      sx={{
-                        display: 'flex',
-                      }}
-                    >
+                    <Box>
                       <OpenTokenDetailsButton
                         tokenAddress={token.address}
                         withoutContractAddress={withoutContractAddress}
                         chainId={token.chainId}
                         onClick={onShowTokenDetails}
                       />
+                      <PinTokenButton
+                        chainId={token.chainId}
+                        tokenAddress={token.address}
+                      />
                     </Box>
                   </Slide>
                 </Box>
@@ -301,6 +302,8 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
                   <Box
                     sx={{
                       display: 'flex',
+                      alignItems: 'center',
+                      gap: 0.5,
                     }}
                   >
                     <Box
@@ -312,12 +315,18 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
                     >
                       {shortenAddress(token.address)}
                     </Box>
-                    <OpenTokenDetailsButton
-                      tokenAddress={token.address}
-                      withoutContractAddress={withoutContractAddress}
-                      chainId={token.chainId}
-                      onClick={onShowTokenDetails}
-                    />
+                    <Box>
+                      <OpenTokenDetailsButton
+                        tokenAddress={token.address}
+                        withoutContractAddress={withoutContractAddress}
+                        chainId={token.chainId}
+                        onClick={onShowTokenDetails}
+                      />
+                      <PinTokenButton
+                        chainId={token.chainId}
+                        tokenAddress={token.address}
+                      />
+                    </Box>
                   </Box>
                 </Slide>
               </Box>