@lifi/widget 3.40.8 → 4.0.0-alpha.1

package/src/components/ChainSelect/ChainSelect.tsx

@@ -1,8 +1,8 @@
 import type { EVMChain } from '@lifi/sdk'
 import { Skeleton, type Theme, Tooltip, useMediaQuery } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { memo, useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
 import {
   maxChainsToOrder,
@@ -11,6 +11,7 @@ import {
 } from '../../stores/chains/createChainOrderStore.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { AllChainsAvatar } from '../Chains/AllChainsAvatar.js'
@@ -29,7 +30,7 @@ export const ChainSelect = memo(({ formType }: FormTypeProps) => {
   const isMobile = useMediaQuery((theme: Theme) =>
     theme.breakpoints.down(theme.breakpoints.values.xs)
   )
-
+  const { setFieldValue } = useFieldActions()
   const {
     chainOrder,
     chains,
@@ -68,12 +69,15 @@ export const ChainSelect = memo(({ formType }: FormTypeProps) => {
   )
 
   const showAllChains = useCallback(() => {
-    navigate(navigationRoutes[`${formType}Chain`])
+    navigate({ to: navigationRoutes[`${formType}Chain`] })
   }, [navigate, formType])
 
   const selectAllNetworks = useCallback(() => {
     setIsAllNetworks(true, formType)
-  }, [setIsAllNetworks, formType])
+    // Reset the chain and token fields when selecting all networks
+    setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true })
+    setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true })
+  }, [setIsAllNetworks, formType, setFieldValue])
 
   const chainsToHide =
     chains?.length === maxChainsToShow

package/src/components/Chains/VirtualizedChainList.tsx

@@ -4,7 +4,8 @@ import type { RefObject } from 'react'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
-import type { FormType } from '../../stores/form/types.js'
+import { FormKeyHelper, type FormType } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { AllChainsAvatar } from './AllChainsAvatar.js'
 import {
   List,
@@ -52,7 +53,7 @@ export const VirtualizedChainList = ({
     state.setIsAllNetworks,
     state[`${formType}ShowAllNetworks`],
   ])
-
+  const { setFieldValue } = useFieldActions()
   const onPin = useCallback(
     (chainId: number) => {
       setPinnedChain(chainId)
@@ -161,7 +162,10 @@ export const VirtualizedChainList = ({
 
   const selectAllNetworks = useCallback(() => {
     setIsAllNetworks(true, formType)
-  }, [setIsAllNetworks, formType])
+    // Reset the chain and token fields when selecting all networks
+    setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true })
+    setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true })
+  }, [setIsAllNetworks, formType, setFieldValue])
 
   return (
     <List

package/src/components/ContractComponent/ItemPrice.tsx

@@ -1,6 +1,5 @@
-import type { ContractCall } from '@lifi/sdk'
+import { type ContractCall, formatUnits } from '@lifi/sdk'
 import { useEffect } from 'react'
-import { formatUnits } from 'viem'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import type { TokenAmount } from '../../types/token.js'
 import { Token } from '../Token/Token.js'

package/src/components/ContractComponent/NFT/NFT.tsx

@@ -1,5 +1,5 @@
+import { formatUnits } from '@lifi/sdk'
 import { useEffect } from 'react'
-import { formatUnits } from 'viem'
 import { useFieldActions } from '../../../stores/form/useFieldActions.js'
 import { NFTBase } from './NFTBase.js'
 import type { NFTProps } from './types.js'

package/src/components/Header/BackButton.tsx

@@ -1,15 +1,27 @@
 import ArrowBack from '@mui/icons-material/ArrowBack'
-import type { IconButtonProps } from '@mui/material'
 import { IconButton, useTheme } from '@mui/material'
+import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useHeaderStore } from '../../stores/header/useHeaderStore.js'
 
-export const BackButton: React.FC<IconButtonProps> = ({ onClick }) => {
+export const BackButton: React.FC = () => {
   const theme = useTheme()
+  const navigateBack = useNavigateBack()
+  const [backAction, executeBackAction] = useHeaderStore((state) => [
+    state.backAction,
+    state.executeBackAction,
+  ])
 
   return (
     <IconButton
       size="medium"
       edge={theme?.navigation?.edge ? 'start' : false}
-      onClick={onClick}
+      onClick={() => {
+        if (backAction) {
+          executeBackAction()
+        } else {
+          navigateBack()
+        }
+      }}
     >
       <ArrowBack />
     </IconButton>

package/src/components/Header/DisconnectIconButton.tsx

@@ -1,4 +1,5 @@
-import { type Account, useAccountDisconnect } from '@lifi/wallet-management'
+import { useAccountDisconnect } from '@lifi/wallet-management'
+import type { Account } from '@lifi/widget-provider'
 import PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'
 import { IconButton } from '@mui/material'
 

package/src/components/Header/Header.tsx

@@ -1,6 +1,6 @@
+import { useLocation } from '@tanstack/react-router'
 import type { FC, PropsWithChildren } from 'react'
 import { useLayoutEffect, useRef } from 'react'
-import { useLocation } from 'react-router-dom'
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js'
 import { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'
 import { createElementId, ElementId } from '../../utils/elements.js'

package/src/components/Header/NavigationHeader.tsx

@@ -1,7 +1,6 @@
 import { useAccount } from '@lifi/wallet-management'
 import { Box, Typography } from '@mui/material'
-import { Route, Routes, useLocation } from 'react-router-dom'
-import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useLocation } from '@tanstack/react-router'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useHeaderStore } from '../../stores/header/useHeaderStore.js'
 import { HiddenUI } from '../../types/widget.js'
@@ -20,14 +19,12 @@ import { TransactionHistoryButton } from './TransactionHistoryButton.js'
 export const NavigationHeader: React.FC = () => {
   const { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } =
     useWidgetConfig()
-  const { navigateBack } = useNavigateBack()
   const { account } = useAccount()
   const [element, title] = useHeaderStore((state) => [
     state.element,
     state.title,
   ])
   const { pathname } = useLocation()
-
   const cleanedPathname = pathname.endsWith('/')
     ? pathname.slice(0, -1)
     : pathname
@@ -43,18 +40,7 @@ export const NavigationHeader: React.FC = () => {
 
   return (
     <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>
-      {backButtonRoutes.includes(path) ? (
-        <BackButton
-          onClick={() =>
-            navigateBack(
-              // From transaction details page, navigate to home page
-              path === navigationRoutes.transactionDetails
-                ? navigationRoutes.home
-                : undefined
-            )
-          }
-        />
-      ) : null}
+      {backButtonRoutes.includes(path) ? <BackButton /> : null}
       {showSplitOptions ? (
         <Box sx={{ flex: 1, marginRight: 1 }}>
           <SplitNavigationTabs />
@@ -72,36 +58,27 @@ export const NavigationHeader: React.FC = () => {
           {title}
         </Typography>
       )}
-      <Routes>
-        <Route
-          path={navigationRoutes.home}
-          element={
-            <HeaderControlsContainer>
-              {account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (
-                <TransactionHistoryButton />
-              )}
-              <SettingsButton />
-              {variant === 'drawer' &&
-              !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (
-                <CloseDrawerButton header="navigation" />
-              ) : null}
-            </HeaderControlsContainer>
-          }
-        />
-        <Route
-          path="*"
-          element={
-            element || (
-              <Box
-                sx={{
-                  width: 28,
-                  height: 40,
-                }}
-              />
-            )
-          }
-        />
-      </Routes>
+      {pathname === navigationRoutes.home ? (
+        <HeaderControlsContainer>
+          {account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (
+            <TransactionHistoryButton />
+          )}
+          <SettingsButton />
+          {variant === 'drawer' &&
+          !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (
+            <CloseDrawerButton header="navigation" />
+          ) : null}
+        </HeaderControlsContainer>
+      ) : (
+        element || (
+          <Box
+            sx={{
+              width: 28,
+              height: 40,
+            }}
+          />
+        )
+      )}
     </HeaderAppBar>
   )
 }

package/src/components/Header/SettingsButton.tsx

@@ -1,7 +1,7 @@
 import Settings from '@mui/icons-material/Settings'
 import { Tooltip } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import {
@@ -11,7 +11,7 @@ import {
 
 export const SettingsButton = () => {
   const { t } = useTranslation()
-  const { navigate } = useNavigateBack()
+  const navigate = useNavigate()
 
   const { isCustomRouteSettings, isRouteSettingsWithWarnings } =
     useSettingMonitor()
@@ -30,7 +30,7 @@ export const SettingsButton = () => {
     <Tooltip title={tooltipMessage}>
       <SettingsIconButton
         size="medium"
-        onClick={() => navigate(navigationRoutes.settings)}
+        onClick={() => navigate({ to: navigationRoutes.settings })}
         variant={variant}
       >
         {variant ? (

package/src/components/Header/TransactionHistoryButton.tsx

@@ -1,18 +1,18 @@
 import ReceiptLong from '@mui/icons-material/ReceiptLong'
 import { IconButton, Tooltip } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 
 export const TransactionHistoryButton = () => {
   const { t } = useTranslation()
-  const { navigate } = useNavigateBack()
+  const navigate = useNavigate()
 
   return (
     <Tooltip title={t('header.transactionHistory')}>
       <IconButton
         size="medium"
-        onClick={() => navigate(navigationRoutes.transactionHistory)}
+        onClick={() => navigate({ to: navigationRoutes.transactionHistory })}
       >
         <ReceiptLong />
       </IconButton>

package/src/components/Header/WalletHeader.tsx

@@ -1,9 +1,9 @@
-import type { Account } from '@lifi/wallet-management'
 import {
   getConnectorIcon,
   useAccount,
   useWalletMenu,
 } from '@lifi/wallet-management'
+import type { Account } from '@lifi/widget-provider'
 import ExpandMore from '@mui/icons-material/ExpandMore'
 import Wallet from '@mui/icons-material/Wallet'
 import { Avatar, Badge } from '@mui/material'

package/src/components/Messages/GasSufficiencyMessage.tsx

@@ -1,7 +1,7 @@
+import { formatUnits } from '@lifi/sdk'
 import EvStation from '@mui/icons-material/EvStation'
 import { type BoxProps, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
-import { formatUnits } from 'viem'
 import type { GasSufficiency } from '../../hooks/useGasSufficiency.js'
 import { AlertMessage } from './AlertMessage.js'
 

package/src/components/PageEntered.ts

@@ -1,5 +1,5 @@
+import { useLocation } from '@tanstack/react-router'
 import { useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
 import { useWidgetEvents } from '../hooks/useWidgetEvents.js'
 import { WidgetEvent } from '../types/events.js'
 

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -3,9 +3,7 @@ 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'
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
-import { WidgetEvent } from '../../types/events.js'
 import { IconCard, ReverseContainer } from './ReverseTokensButton.style.js'
 
 export const ReverseTokensButton: React.FC<{ vertical?: boolean }> = ({
@@ -15,7 +13,6 @@ export const ReverseTokensButton: React.FC<{ vertical?: boolean }> = ({
   const { getChainById } = useAvailableChains()
   const { tryResetToAddress } = useToAddressReset()
   const autoPopulateToAddress = useToAddressAutoPopulate()
-  const emitter = useWidgetEvents()
 
   const handleClick = () => {
     const [fromChainId, fromToken, toChainId, toToken, toAddress] =
@@ -32,13 +29,6 @@ export const ReverseTokensButton: React.FC<{ vertical?: boolean }> = ({
     setFieldValue('toChain', fromChainId, { isTouched: true })
     setFieldValue('toToken', fromToken, { isTouched: true })
 
-    emitter.emit(WidgetEvent.TokensReversed, {
-      fromChainId,
-      fromTokenAddress: fromToken,
-      toChainId,
-      toTokenAddress: toToken,
-    })
-
     const autoPopulatedToAddress = autoPopulateToAddress({
       formType: 'from',
       selectedToAddress: toAddress,

package/src/components/RouteCard/RouteCard.tsx

@@ -40,9 +40,7 @@ export const RouteCard: React.FC<
   }
 
   const token: TokenAmount =
-    subvariant === 'custom' &&
-    subvariantOptions?.custom !== 'deposit' &&
-    subvariantOptions?.custom !== 'fund'
+    subvariant === 'custom' && subvariantOptions?.custom !== 'deposit'
       ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
       : { ...route.toToken, amount: BigInt(route.toAmount) }
   const impactToken: TokenAmount | undefined =

package/src/components/Routes/Routes.tsx

@@ -1,6 +1,6 @@
 import { Box, Collapse } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
@@ -35,7 +35,7 @@ export const Routes: React.FC<CardProps> = (props) => {
   }
 
   const handleCardClick = () => {
-    navigate(navigationRoutes.routes)
+    navigate({ to: navigationRoutes.routes })
   }
 
   const routeNotFound = !currentRoute && !isLoading && !isFetching
@@ -45,8 +45,7 @@ export const Routes: React.FC<CardProps> = (props) => {
 
   const title =
     subvariant === 'custom'
-      ? subvariantOptions?.custom === 'deposit' ||
-        subvariantOptions?.custom === 'fund'
+      ? subvariantOptions?.custom === 'deposit'
         ? t('header.receive')
         : t('header.youPay')
       : t('header.receive')

package/src/components/Routes/RoutesContent.tsx

@@ -51,8 +51,7 @@ export const RoutesContent = memo(function RoutesContent({
 
   const title =
     subvariant === 'custom'
-      ? subvariantOptions?.custom === 'deposit' ||
-        subvariantOptions?.custom === 'fund'
+      ? subvariantOptions?.custom === 'deposit'
         ? t('header.deposit')
         : t('header.youPay')
       : t('header.receive')

package/src/components/Routes/RoutesExpanded.tsx

@@ -1,6 +1,6 @@
 import type { Route } from '@lifi/sdk'
+import { useNavigate } from '@tanstack/react-router'
 import { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { WidgetEvent } from '../../types/events.js'
@@ -60,8 +60,9 @@ export const RoutesExpanded = memo(function RoutesExpanded({
   const onRouteClick = useCallback(
     (route: Route) => {
       setReviewableRoute(route)
-      navigate(navigationRoutes.transactionExecution, {
-        state: { routeId: route.id },
+      navigate({
+        to: navigationRoutes.transactionExecution,
+        search: { routeId: route.id },
       })
       emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })
     },

package/src/components/SelectChainAndToken.tsx

@@ -11,8 +11,7 @@ export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
   const prefersNarrowView = useMediaQuery((theme: Theme) =>
     theme.breakpoints.down('sm')
   )
-  const { disabledUI, hiddenUI, subvariant, subvariantOptions } =
-    useWidgetConfig()
+  const { disabledUI, hiddenUI, subvariant } = useWidgetConfig()
 
   const [fromChain, toChain, fromToken, toToken] = useFieldValues(
     'fromChain',
@@ -31,8 +30,7 @@ export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
 
   const hiddenFromToken = hiddenUI?.includes(HiddenUI.FromToken)
   const hiddenToToken =
-    (subvariant === 'custom' && subvariantOptions?.custom !== 'fund') ||
-    hiddenUI?.includes(HiddenUI.ToToken)
+    subvariant === 'custom' || hiddenUI?.includes(HiddenUI.ToToken)
 
   const isCompact =
     !!fromChain &&

package/src/components/SelectTokenButton/SelectTokenButton.tsx

@@ -1,6 +1,6 @@
 import { Skeleton } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { useChain } from '../../hooks/useChain.js'
 import { useSwapOnly } from '../../hooks/useSwapOnly.js'
 import { useToken } from '../../hooks/useToken.js'
@@ -29,8 +29,7 @@ export const SelectTokenButton: React.FC<
 > = ({ formType, compact, hiddenReverse }) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { disabledUI, subvariant, hiddenUI, subvariantOptions } =
-    useWidgetConfig()
+  const { disabledUI, subvariant, hiddenUI } = useWidgetConfig()
   const swapOnly = useSwapOnly()
   const tokenKey = FormKeyHelper.getTokenKey(formType)
   const [chainId, tokenAddress] = useFieldValues(
@@ -45,13 +44,14 @@ export const SelectTokenButton: React.FC<
   )
 
   const handleClick = () => {
-    navigate(
-      formType === 'from'
-        ? navigationRoutes.fromToken
-        : subvariant === 'refuel'
-          ? navigationRoutes.toTokenNative
-          : navigationRoutes.toToken
-    )
+    navigate({
+      to:
+        formType === 'from'
+          ? navigationRoutes.fromToken
+          : subvariant === 'refuel'
+            ? navigationRoutes.toTokenNative
+            : navigationRoutes.toToken,
+    })
   }
 
   const isSelected = !!(chain && token)
@@ -64,9 +64,7 @@ export const SelectTokenButton: React.FC<
         ? t('main.selectToken')
         : t('main.selectChainAndToken')
   const cardTitle: string =
-    formType === 'from' &&
-    subvariant === 'custom' &&
-    subvariantOptions?.custom !== 'fund'
+    formType === 'from' && subvariant === 'custom'
       ? t('header.payWith')
       : t(`main.${formType}`)
   return (

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -1,9 +1,10 @@
 import { useAccount } from '@lifi/wallet-management'
+import { useChainTypeFromAddress } from '@lifi/widget-provider'
 import CloseRounded from '@mui/icons-material/CloseRounded'
 import { Box, Collapse } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { type MouseEventHandler, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
@@ -12,10 +13,7 @@ import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js'
 import { DisabledUI, HiddenUI } from '../../types/widget.js'
-import {
-  defaultChainIdsByType,
-  getChainTypeFromAddress,
-} from '../../utils/chainType.js'
+import { defaultChainIdsByType } from '../../utils/chainType.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { AccountAvatar } from '../Avatar/AccountAvatar.js'
@@ -47,6 +45,7 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
   const { setSelectedBookmark } = useBookmarkActions()
   const { accounts } = useAccount()
   const { requiredToAddress } = useToAddressRequirements()
+  const { getChainTypeFromAddress } = useChainTypeFromAddress()
   const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)
   const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)
 
@@ -92,11 +91,11 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
   const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress
 
   const handleOnClick = () => {
-    navigate(
-      toAddresses?.length
+    navigate({
+      to: toAddresses?.length
         ? navigationRoutes.configuredWallets
-        : navigationRoutes.sendToWallet
-    )
+        : navigationRoutes.sendToWallet,
+    })
   }
 
   const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {
@@ -122,9 +121,7 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
     !hiddenToAddress && (requiredToAddress || showSendToWallet)
 
   const title =
-    subvariant === 'custom' &&
-    (subvariantOptions?.custom === 'deposit' ||
-      subvariantOptions?.custom === 'fund')
+    subvariant === 'custom' && subvariantOptions?.custom === 'deposit'
       ? t('header.depositTo')
       : t('header.sendToWallet')
 

package/src/components/Step/CircularProgress.style.tsx

@@ -1,4 +1,4 @@
-import type { ProcessStatus, Substatus } from '@lifi/sdk'
+import type { ExecutionActionStatus, Substatus } from '@lifi/sdk'
 import type { Theme } from '@mui/material'
 import {
   Box,
@@ -10,7 +10,7 @@ import {
 
 const getStatusColor = (
   theme: Theme,
-  status?: ProcessStatus,
+  status?: ExecutionActionStatus,
   substatus?: Substatus
 ) => {
   switch (status) {
@@ -32,7 +32,7 @@ const getStatusColor = (
 
 export const CircularIcon = styled(Box, {
   shouldForwardProp: (prop: string) => !['status', 'substatus'].includes(prop),
-})<{ status?: ProcessStatus; substatus?: Substatus }>(
+})<{ status?: ExecutionActionStatus; substatus?: Substatus }>(
   ({ theme, status, substatus }) => {
     const statusColor = getStatusColor(theme, status, substatus)
     const isSpecialStatus = [

package/src/components/Step/CircularProgress.tsx

@@ -1,4 +1,4 @@
-import type { Process } from '@lifi/sdk'
+import type { ExecutionAction } from '@lifi/sdk'
 import Done from '@mui/icons-material/Done'
 import ErrorRounded from '@mui/icons-material/ErrorRounded'
 import InfoRounded from '@mui/icons-material/InfoRounded'
@@ -8,15 +8,15 @@ import {
   CircularProgressPending,
 } from './CircularProgress.style.js'
 
-export function CircularProgress({ process }: { process: Process }) {
+export function CircularProgress({ action }: { action: ExecutionAction }) {
   return (
-    <CircularIcon status={process.status} substatus={process.substatus}>
-      {process.status === 'STARTED' || process.status === 'PENDING' ? (
+    <CircularIcon status={action.status} substatus={action.substatus}>
+      {action.status === 'STARTED' || action.status === 'PENDING' ? (
         <CircularProgressPending size={40} />
       ) : null}
-      {process.status === 'ACTION_REQUIRED' ||
-      process.status === 'MESSAGE_REQUIRED' ||
-      process.status === 'RESET_REQUIRED' ? (
+      {action.status === 'ACTION_REQUIRED' ||
+      action.status === 'MESSAGE_REQUIRED' ||
+      action.status === 'RESET_REQUIRED' ? (
         <InfoRounded
           color="info"
           sx={{
@@ -25,8 +25,8 @@ export function CircularProgress({ process }: { process: Process }) {
           }}
         />
       ) : null}
-      {process.status === 'DONE' &&
-      (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? (
+      {action.status === 'DONE' &&
+      (action.substatus === 'PARTIAL' || action.substatus === 'REFUNDED') ? (
         <WarningRounded
           sx={(theme) => ({
             position: 'absolute',
@@ -34,7 +34,7 @@ export function CircularProgress({ process }: { process: Process }) {
             color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 68%, black)`,
           })}
         />
-      ) : process.status === 'DONE' ? (
+      ) : action.status === 'DONE' ? (
         <Done
           color="success"
           sx={{
@@ -43,7 +43,7 @@ export function CircularProgress({ process }: { process: Process }) {
           }}
         />
       ) : null}
-      {process.status === 'FAILED' ? (
+      {action.status === 'FAILED' ? (
         <ErrorRounded
           color="error"
           sx={{