feat: new status manager (old ui)

.gitignore

@@ -21,6 +21,7 @@ build/
 *.tmp
 
 npm-debug.log*
+/.pnpm-store/
 
 .next
 .cache

package.json

@@ -77,12 +77,17 @@
   "pnpm": {
     "overrides": {
       "@react-native-async-storage/async-storage": ">=2.2.0",
-      "@reown/appkit": ">=1.8.15",
       "@safe-global/safe-apps-provider": ">=0.18.6",
       "bs58": ">=4.0.1",
       "miniflare>zod": "3.22.3",
       "miniflare>zod-validation-error": "3.0.3",
-      "zod": ">=4.1.11"
+      "zod": ">=4.1.11",
+      "@reown/appkit": ">=1.8.15",
+      "@lifi/sdk": "link:../../Library/pnpm/global/5/node_modules/@lifi/sdk",
+      "@lifi/sdk-provider-bitcoin": "link:../../Library/pnpm/global/5/node_modules/@lifi/sdk-provider-bitcoin",
+      "@lifi/sdk-provider-ethereum": "link:../../Library/pnpm/global/5/node_modules/@lifi/sdk-provider-ethereum",
+      "@lifi/sdk-provider-solana": "link:../../Library/pnpm/global/5/node_modules/@lifi/sdk-provider-solana",
+      "@lifi/sdk-provider-sui": "link:../../Library/pnpm/global/5/node_modules/@lifi/sdk-provider-sui"
     }
   },
   "packageManager": "pnpm@10.27.0+sha512.72d699da16b1179c14ba9e64dc71c9a40988cbdc65c264cb0e489db7de917f20dcf4d64d8723625f2969ba52d4b7e2a1170682d9ac2a5dcaeaab732b7e16f04a"

packages/widget-playground/src/defaultWidgetConfig.ts

@@ -75,7 +75,7 @@ export const widgetBaseConfig: WidgetConfig = {
   // },
   sdkConfig: {
     apiUrl: 'https://li.quest/v1',
-    preloadChains: false,
+    preloadChains: true,
     rpcUrls: {
       [ChainId.SOL]: [
         'https://wild-winter-frog.solana-mainnet.quiknode.pro/2370a45ff891f6dc9e5b1753460290fe0f1ef103/',

packages/widget-provider/src/types.ts

@@ -61,11 +61,9 @@ export type EthereumProviderContext = WidgetProviderContext & {
   isBatchingSupported?: (
     sdkClient: SDKClient,
     {
-      client,
       chainId,
       skipReady,
     }: {
-      client?: any
       chainId: number
       skipReady?: boolean
     }

packages/widget/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -3,9 +3,10 @@ import ErrorRounded from '@mui/icons-material/ErrorRounded'
 import InfoRounded from '@mui/icons-material/InfoRounded'
 import { ListItemAvatar, ListItemText, Typography } from '@mui/material'
 import { useNavigate } from '@tanstack/react-router'
-import { useProcessMessage } from '../../hooks/useProcessMessage.js'
+import { useExecutionMessage } from '../../hooks/useExecutionMessage.js'
 import { useRouteExecution } from '../../hooks/useRouteExecution.js'
 import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { getExecutionStatus } from '../../utils/execution.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { TokenAvatarGroup } from '../Avatar/Avatar.style.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
@@ -23,9 +24,8 @@ export const ActiveTransactionItem: React.FC<{
   })
 
   const lastActiveStep = route?.steps.findLast((step) => step.execution)
-  const lastActiveProcess = lastActiveStep?.execution?.process.at(-1)
 
-  const { title } = useProcessMessage(lastActiveStep, lastActiveProcess)
+  const { title } = useExecutionMessage(lastActiveStep)
 
   if (!route || !lastActiveStep) {
     return null
@@ -38,8 +38,10 @@ export const ActiveTransactionItem: React.FC<{
     })
   }
 
+  const executionStatus = getExecutionStatus(lastActiveStep)
+
   const getStatusComponent = () => {
-    switch (lastActiveProcess?.status) {
+    switch (executionStatus) {
       case 'ACTION_REQUIRED':
       case 'MESSAGE_REQUIRED':
       case 'RESET_REQUIRED':

packages/widget/src/components/Step/CircularProgress.style.tsx

@@ -1,4 +1,4 @@
-import type { ProcessStatus, Substatus } from '@lifi/sdk'
+import type { ExecutionStatus, Substatus } from '@lifi/sdk'
 import type { Theme } from '@mui/material'
 import {
   Box,
@@ -10,7 +10,7 @@ import {
 
 const getStatusColor = (
   theme: Theme,
-  status?: ProcessStatus,
+  status?: ExecutionStatus,
   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?: ExecutionStatus; substatus?: Substatus }>(
   ({ theme, status, substatus }) => {
     const statusColor = getStatusColor(theme, status, substatus)
     const isSpecialStatus = [

packages/widget/src/components/Step/CircularProgress.tsx

@@ -1,4 +1,4 @@
-import type { Process } from '@lifi/sdk'
+import type { ExecutionStatus, Substatus } 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,21 @@ import {
   CircularProgressPending,
 } from './CircularProgress.style.js'
 
-export function CircularProgress({ process }: { process: Process }) {
+export function CircularProgress({
+  status,
+  substatus,
+}: {
+  status: ExecutionStatus
+  substatus?: Substatus
+}) {
   return (
-    <CircularIcon status={process.status} substatus={process.substatus}>
-      {process.status === 'STARTED' || process.status === 'PENDING' ? (
+    <CircularIcon status={status} substatus={substatus}>
+      {status === 'STARTED' || status === 'PENDING' ? (
         <CircularProgressPending size={40} />
       ) : null}
-      {process.status === 'ACTION_REQUIRED' ||
-      process.status === 'MESSAGE_REQUIRED' ||
-      process.status === 'RESET_REQUIRED' ? (
+      {status === 'ACTION_REQUIRED' ||
+      status === 'MESSAGE_REQUIRED' ||
+      status === 'RESET_REQUIRED' ? (
         <InfoRounded
           color="info"
           sx={{
@@ -25,16 +31,16 @@ export function CircularProgress({ process }: { process: Process }) {
           }}
         />
       ) : null}
-      {process.status === 'DONE' &&
-      (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? (
+      {status === 'DONE' &&
+      (substatus === 'PARTIAL' || substatus === 'REFUNDED') ? (
         <WarningRounded
           sx={(theme) => ({
             position: 'absolute',
             fontSize: '1.5rem',
             color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 68%, black)`,
           })}
         />
-      ) : process.status === 'DONE' ? (
+      ) : status === 'DONE' ? (
         <Done
           color="success"
           sx={{
@@ -43,7 +49,7 @@ export function CircularProgress({ process }: { process: Process }) {
           }}
         />
       ) : null}
-      {process.status === 'FAILED' ? (
+      {status === 'FAILED' ? (
         <ErrorRounded
           color="error"
           sx={{

packages/widget/src/components/Step/Step.tsx

@@ -10,7 +10,8 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import { shortenAddress } from '../../utils/wallet.js'
 import { StepTimer } from '../Timer/StepTimer.js'
 import { DestinationWalletAddress } from './DestinationWalletAddress.js'
-import { StepProcess } from './StepProcess.js'
+import { StepExecution } from './StepExecution.js'
+import { StepExecutionAction } from './StepExecutionAction.js'
 
 export const Step: React.FC<{
   step: LiFiStepExtended
@@ -22,9 +23,7 @@ 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?.status === 'FAILED'
 
   const getCardTitle = () => {
     const hasBridgeStep = step.includedSteps.some(
@@ -90,9 +89,14 @@ 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} />
+        {step.execution?.actions.map((action, index) => (
+          <StepExecutionAction
+            key={`${index}-${action.type}`}
+            step={step}
+            action={action}
+          />
         ))}
+        <StepExecution step={step} />
         {formattedToAddress && toAddressLink ? (
           <DestinationWalletAddress
             step={step}

packages/widget/src/components/Step/StepExecution.tsx

@@ -0,0 +1,58 @@
+import type { LiFiStepExtended } from '@lifi/sdk'
+import { Box, Typography } from '@mui/material'
+import { useExecutionMessage } from '../../hooks/useExecutionMessage.js'
+import { CircularProgress } from './CircularProgress.js'
+
+export const StepExecution: React.FC<{
+  step: LiFiStepExtended
+}> = ({ step }) => {
+  const { title, message } = useExecutionMessage(step)
+
+  if (!step.execution || step.execution.status === 'DONE') {
+    return null
+  }
+
+  return (
+    <Box
+      sx={{
+        px: 2,
+        py: 1,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <CircularProgress
+          status={step.execution.status}
+          substatus={step.execution.substatus}
+        />
+        <Typography
+          sx={{
+            marginLeft: 2,
+            marginRight: 0.5,
+            flex: 1,
+            fontSize: 14,
+            fontWeight: step.execution?.error ? 600 : 400,
+          }}
+        >
+          {title}
+        </Typography>
+      </Box>
+      {message ? (
+        <Typography
+          sx={{
+            ml: 7,
+            fontSize: 14,
+            fontWeight: 500,
+            color: 'text.secondary',
+          }}
+        >
+          {message}
+        </Typography>
+      ) : null}
+    </Box>
+  )
+}

packages/widget/src/components/Step/StepProcess.tsx → packages/widget/src/components/Step/StepExecutionAction.tsx

@@ -1,30 +1,47 @@
-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 { useTranslation } from 'react-i18next'
+import { getTransactionTitle } from '../../hooks/useExecutionMessage.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
-import { useProcessMessage } from '../../hooks/useProcessMessage.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.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 StepExecutionAction: React.FC<{
+  step: LiFiStepExtended
+  action: ExecutionAction
+}> = ({ step, action }) => {
+  const { t } = useTranslation()
+  const { subvariant, subvariantOptions } = useWidgetConfig()
+  const title = getTransactionTitle(
+    t,
+    step,
+    action.type,
+    subvariant,
+    subvariantOptions
+  )
   const { getTransactionLink } = useExplorer()
 
-  const transactionLink = process.txHash
+  if (!action.isDone) {
+    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
 
+  const substatus =
+    step.execution?.type === action.type ? step.execution?.substatus : undefined
+
   return (
     <Box
       sx={{
@@ -38,14 +55,14 @@ export const StepProcess: React.FC<{
           alignItems: 'center',
         }}
       >
-        <CircularProgress process={process} />
+        <CircularProgress status={'DONE'} substatus={substatus} />
         <Typography
           sx={{
             marginLeft: 2,
             marginRight: 0.5,
             flex: 1,
             fontSize: 14,
-            fontWeight: process.error ? 600 : 400,
+            fontWeight: 400,
           }}
         >
           {title}
@@ -62,18 +79,6 @@ export const StepProcess: React.FC<{
           </CardIconButton>
         ) : null}
       </Box>
-      {message ? (
-        <Typography
-          sx={{
-            ml: 7,
-            fontSize: 14,
-            fontWeight: 500,
-            color: 'text.secondary',
-          }}
-        >
-          {message}
-        </Typography>
-      ) : null}
     </Box>
   )
 }