@lifi/widget 4.0.0-beta.9 → 4.0.0

package/src/components/Skeleton/WidgetSkeleton.style.tsx

@@ -1,30 +1,37 @@
 import { Box, Button, Card as MuiCard, styled } from '@mui/material'
+import type React from 'react'
 import { InputCard } from '../../components/Card/InputCard.js'
 
-export const SkeletonHeaderAppBar = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'flex-end',
-  alignItems: 'center',
-  color: theme.vars?.palette?.text.primary,
-  paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),
-}))
+export const SkeletonHeaderAppBar: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    color: theme.vars?.palette?.text.primary,
+    paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),
+  }))
 
-export const SkeletonWalletMenuButtonContainer = styled(Box)(({ theme }) => ({
+export const SkeletonWalletMenuButtonContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   padding: theme.spacing(1, 0, 1, 1.5),
   gap: theme.spacing(1),
 }))
 
-export const SkeletonCardRow = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  gap: theme.spacing(2),
-  alignItems: 'center',
-  marginTop: theme.spacing(1.5),
-}))
+export const SkeletonCardRow: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(2),
+    alignItems: 'center',
+    marginTop: theme.spacing(1.5),
+  }))
 
-export const SkeletonAmountContainer = styled(Box)({
+export const SkeletonAmountContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -32,32 +39,43 @@ export const SkeletonAmountContainer = styled(Box)({
   overflowY: 'hidden',
 })
 
-export const SkeletonCard = styled(MuiCard)(({ theme }) => ({
-  padding: theme.spacing(1.5, 2, 2),
-}))
+export const SkeletonCard: React.FC<React.ComponentProps<typeof MuiCard>> =
+  styled(MuiCard)(({ theme }) => ({
+    padding: theme.spacing(1.5, 2, 2),
+  }))
 
-export const SkeletonInputCard = styled(InputCard)(({ theme }) => ({
+export const SkeletonInputCard: React.FC<
+  React.ComponentProps<typeof InputCard>
+> = styled(InputCard)(({ theme }) => ({
   padding: theme.spacing(1.5, 2, 2),
 }))
 
-export const SkeletonReviewButtonContainer = styled(Box)(({ theme }) => ({
+export const SkeletonReviewButtonContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
   display: 'flex',
   gap: theme.spacing(1.5),
   alignItems: 'center',
 }))
 
-export const SkeletonReviewButton = styled(Button)({
+export const SkeletonReviewButton: React.FC<
+  React.ComponentProps<typeof Button>
+> = styled(Button)({
   height: 48,
   pointerEvents: 'none',
 })
-export const SkeletonSendToWalletButton = styled(Button)({
+export const SkeletonSendToWalletButton: React.FC<
+  React.ComponentProps<typeof Button>
+> = styled(Button)({
   height: 48,
   minWidth: 48,
   width: 48,
   pointerEvents: 'none',
 })
 
-export const SkeletonPoweredByContainer = styled(Box)(({ theme }) => ({
+export const SkeletonPoweredByContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexGrow: 1,
   justifyContent: 'flex-end',
@@ -67,7 +85,9 @@ export const SkeletonPoweredByContainer = styled(Box)(({ theme }) => ({
   paddingRight: theme.spacing(3),
 }))
 
-export const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
+export const SkeletonHeaderContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => {
   return {
     display: 'flex',
     flexDirection: 'column',

package/src/components/Skeleton/WidgetSkeleton.tsx

@@ -1,5 +1,5 @@
 import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'
-import { useMemo } from 'react'
+import { type JSX, useMemo } from 'react'
 import { createTheme } from '../../themes/createTheme.js'
 import type { WidgetConfigPartialProps } from '../../types/widget.js'
 import {
@@ -64,10 +64,12 @@ const SkeletonYouPayCard = () => (
   </SkeletonInputCard>
 )
 
-export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
+export const WidgetSkeleton = ({
+  config,
+}: WidgetConfigPartialProps): JSX.Element => {
   const appearance = config?.appearance
-  const hiddenUI = config?.hiddenUI || []
-  const requiredUI = config?.requiredUI || []
+  const hiddenUI = config?.hiddenUI
+  const requiredUI = config?.requiredUI
   const configTheme = config?.theme
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
   const appearanceMode =
@@ -90,7 +92,7 @@ export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
       <AppExpandedContainer>
         <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>
           <SkeletonHeaderContainer>
-            {!hiddenUI.includes('walletMenu') ? (
+            {!hiddenUI?.walletMenu ? (
               <SkeletonHeaderAppBar>
                 <SkeletonWalletMenuButton />
               </SkeletonHeaderAppBar>
@@ -106,27 +108,27 @@ export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
           <FlexContainer
             sx={{
               gap: 2,
-              paddingBottom: hiddenUI.includes('poweredBy') ? 3 : 2,
+              paddingBottom: hiddenUI?.poweredBy ? 3 : 2,
             }}
           >
             <SkeletonSelectCard />
             <SkeletonSelectCard />
             <SkeletonYouPayCard />
-            {requiredUI.includes('toAddress') ? (
+            {requiredUI?.toAddress ? (
               <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />
             ) : null}
             <SkeletonReviewButtonContainer>
               <SkeletonReviewButton variant="contained" fullWidth>
                 &nbsp;
               </SkeletonReviewButton>
-              {!requiredUI.includes('toAddress') ? (
+              {!requiredUI?.toAddress ? (
                 <SkeletonSendToWalletButton variant="text" fullWidth>
                   &nbsp;
                 </SkeletonSendToWalletButton>
               ) : null}
             </SkeletonReviewButtonContainer>
           </FlexContainer>
-          {!hiddenUI.includes('poweredBy') ? (
+          {!hiddenUI?.poweredBy ? (
             <SkeletonPoweredByContainer>
               <Skeleton width={96} height={18} variant="text" />
             </SkeletonPoweredByContainer>

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

@@ -0,0 +1,33 @@
+import { Box, styled, Typography } from '@mui/material'
+import type React from 'react'
+import { AvatarMasked } from '../Avatar/Avatar.style.js'
+
+export const StepLabelTypography: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(({ theme }) => ({
+  fontSize: 12,
+  fontWeight: 500,
+  lineHeight: 1.3334,
+  color: theme.vars.palette.text.primary,
+  whiteSpace: 'nowrap',
+}))
+
+export const StepAvatar: React.FC<React.ComponentProps<typeof AvatarMasked>> =
+  styled(AvatarMasked)(({ theme }) => ({
+    color: theme.vars.palette.text.primary,
+    backgroundColor: 'transparent',
+  }))
+
+export const StepActionsHeader: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  }))
+
+export const StepActionsTitle: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(() => ({
+  fontSize: 12,
+  fontWeight: 700,
+}))

package/src/components/Step/StepActions.tsx

@@ -0,0 +1,329 @@
+import type { LiFiStep, RouteExtended, StepExtended } from '@lifi/sdk'
+import { useEthereumContext } from '@lifi/widget-provider'
+import ArrowForward from '@mui/icons-material/ArrowForward'
+import { Box, Divider, Tooltip } from '@mui/material'
+import { Fragment } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type {
+  ModeOptions,
+  WidgetFeeConfig,
+  WidgetMode,
+} from '../../types/widget.js'
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { SmallAvatar } from '../Avatar/SmallAvatar.js'
+import { Card } from '../Card/Card.js'
+import { CardIconButton } from '../Card/CardIconButton.js'
+import {
+  StepActionsHeader,
+  StepActionsTitle,
+  StepLabelTypography,
+} from './StepActions.style.js'
+
+interface StepDetailsLabelProps {
+  step: StepExtended
+  mode?: Extract<WidgetMode, 'custom'>
+  modeOptions?: ModeOptions
+  feeConfig?: WidgetFeeConfig
+  relayerSupport?: boolean
+}
+
+export const StepActions: React.FC<{
+  route: RouteExtended
+}> = ({ route }) => {
+  const { t } = useTranslation()
+  const { mode, modeOptions, feeConfig, hiddenUI } = useWidgetConfig()
+  const { isGaslessStep } = useEthereumContext()
+
+  const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps)
+
+  const flatSteps = route.steps.flatMap((routeStep) => {
+    let steps = routeStep.includedSteps
+    if (hiddenUI?.integratorStepDetails) {
+      const feeCollectionStep = steps.find((s) => s.tool === 'feeCollection')
+      if (feeCollectionStep) {
+        steps = structuredClone(steps.filter((s) => s.tool !== 'feeCollection'))
+        steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount
+      }
+    }
+    const hasGaslessSupport = !!isGaslessStep?.(routeStep)
+    return steps.map((includedStep) => ({ includedStep, hasGaslessSupport }))
+  })
+
+  const tooltipContent = (
+    <Card indented>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: '32px 1fr',
+          columnGap: 1.5,
+        }}
+      >
+        {flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {
+          const showDivider = i !== arr.length - 1
+          const isFeeCollection =
+            step.type === 'protocol' && step.tool === 'feeCollection'
+          const toolName =
+            isFeeCollection && feeConfig?.name
+              ? feeConfig.name
+              : step.toolDetails.name
+          const toolLogoURI =
+            isFeeCollection && feeConfig?.logoURI
+              ? feeConfig.logoURI
+              : step.toolDetails.logoURI
+
+          return (
+            <Fragment key={step.id}>
+              <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                {toolLogoURI ? (
+                  <SmallAvatar
+                    src={toolLogoURI}
+                    alt={toolName}
+                    sx={{ width: 32, height: 32 }}
+                  >
+                    {toolName?.[0]}
+                  </SmallAvatar>
+                ) : null}
+              </Box>
+              <Box
+                sx={{ display: 'flex', flexDirection: 'column', minHeight: 32 }}
+              >
+                {step.type === 'custom' && mode === 'custom' ? (
+                  <CustomStepDetailsLabel
+                    step={step}
+                    mode={mode}
+                    modeOptions={modeOptions}
+                  />
+                ) : step.type === 'cross' ? (
+                  <BridgeStepDetailsLabel step={step} />
+                ) : step.type === 'protocol' ? (
+                  <ProtocolStepDetailsLabel
+                    step={step}
+                    feeConfig={feeConfig}
+                    relayerSupport={hasGaslessSupport}
+                  />
+                ) : (
+                  <SwapStepDetailsLabel step={step} />
+                )}
+                <StepDetailsContent step={step} />
+              </Box>
+              {showDivider && (
+                <Box sx={{ display: 'flex', alignItems: 'center', px: '15px' }}>
+                  <Divider
+                    orientation="vertical"
+                    sx={{ my: 0.5, height: 8, borderRightWidth: 2 }}
+                  />
+                </Box>
+              )}
+              {showDivider && <Box />}
+            </Fragment>
+          )
+        })}
+      </Box>
+    </Card>
+  )
+
+  return (
+    <StepActionsHeader>
+      <StepActionsTitle>{t('main.route')}</StepActionsTitle>
+      <Tooltip
+        title={tooltipContent}
+        placement="bottom-end"
+        arrow={false}
+        slotProps={{
+          tooltip: {
+            sx: {
+              bgcolor: 'transparent',
+              p: 0,
+              boxShadow: 'none',
+              maxWidth: 'none',
+            },
+          },
+          transition: {
+            style: { transformOrigin: 'right top' },
+          },
+        }}
+      >
+        <CardIconButton
+          size="small"
+          sx={(theme) => ({
+            borderRadius: theme.vars.shape.borderRadiusSecondary,
+          })}
+        >
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            {headerIncludedSteps.map((includedStep, index) => (
+              <Fragment key={index}>
+                {index > 0 ? (
+                  <Divider sx={{ width: 8, mx: 0.5, borderWidth: 1 }} />
+                ) : null}
+                <SmallAvatar
+                  src={includedStep.toolDetails.logoURI}
+                  alt={includedStep.toolDetails.name}
+                  sx={{ width: 16, height: 16 }}
+                >
+                  {includedStep.toolDetails.name[0]}
+                </SmallAvatar>
+              </Fragment>
+            ))}
+          </Box>
+        </CardIconButton>
+      </Tooltip>
+    </StepActionsHeader>
+  )
+}
+
+const StepDetailsContent: React.FC<{
+  step: StepExtended
+}> = ({ step }) => {
+  const { t } = useTranslation()
+
+  const sameTokenProtocolStep =
+    step.action.fromToken.chainId === step.action.toToken.chainId &&
+    step.action.fromToken.address === step.action.toToken.address
+
+  let fromAmount: string | undefined
+  if (sameTokenProtocolStep) {
+    const estimatedFromAmount =
+      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)
+
+    fromAmount =
+      estimatedFromAmount > 0n
+        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)
+        : formatTokenAmount(
+            BigInt(step.estimate.fromAmount),
+            step.action.fromToken.decimals
+          )
+  } else {
+    fromAmount = formatTokenAmount(
+      BigInt(step.estimate.fromAmount),
+      step.action.fromToken.decimals
+    )
+  }
+
+  const showToAmount =
+    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep
+
+  return (
+    <StepLabelTypography>
+      {!showToAmount ? (
+        <>
+          {t('format.tokenAmount', {
+            value: formatTokenAmount(
+              BigInt(step.estimate.fromAmount),
+              step.action.fromToken.decimals
+            ),
+          })}{' '}
+          {step.action.fromToken.symbol}
+          {' - '}
+        </>
+      ) : null}
+      {t('format.tokenAmount', {
+        value: fromAmount,
+      })}{' '}
+      {step.action.fromToken.symbol}
+      {showToAmount ? (
+        <>
+          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />
+          {t('format.tokenAmount', {
+            value: formatTokenAmount(
+              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),
+              step.execution?.toToken?.decimals ?? step.action.toToken.decimals
+            ),
+          })}{' '}
+          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}
+        </>
+      ) : (
+        ` (${t('format.currency', {
+          value: formatTokenPrice(
+            fromAmount,
+            step.action.fromToken.priceUSD,
+            step.action.fromToken.decimals
+          ),
+        })})`
+      )}
+    </StepLabelTypography>
+  )
+}
+
+const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
+  step,
+  mode,
+  modeOptions,
+}) => {
+  const { t } = useTranslation()
+
+  if (!mode) {
+    return null
+  }
+
+  // FIXME: step transaction request overrides step tool details, but not included step tool details
+  const toolDetails =
+    mode === 'custom' && (step as unknown as LiFiStep).includedSteps?.length > 0
+      ? (step as unknown as LiFiStep).includedSteps.find(
+          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'
+        )?.toolDetails || step.toolDetails
+      : step.toolDetails
+
+  const stepDetailsKey =
+    (mode === 'custom' && modeOptions?.custom?.type) || 'checkout'
+
+  return (
+    <StepLabelTypography>
+      {t(`main.${stepDetailsKey}StepDetails`, {
+        tool: toolDetails.name,
+      })}
+    </StepLabelTypography>
+  )
+}
+
+const BridgeStepDetailsLabel: React.FC<
+  Omit<StepDetailsLabelProps, 'variant'>
+> = ({ step }) => {
+  const { t } = useTranslation()
+  const { getChainById } = useAvailableChains()
+  return (
+    <StepLabelTypography>
+      {t('main.bridgeStepDetails', {
+        from: getChainById(step.action.fromChainId)?.name,
+        to: getChainById(step.action.toChainId)?.name,
+        tool: step.toolDetails.name,
+      })}
+    </StepLabelTypography>
+  )
+}
+
+const SwapStepDetailsLabel: React.FC<
+  Omit<StepDetailsLabelProps, 'variant'>
+> = ({ step }) => {
+  const { t } = useTranslation()
+  const { getChainById } = useAvailableChains()
+  return (
+    <StepLabelTypography>
+      {t('main.swapStepDetails', {
+        chain: getChainById(step.action.fromChainId)?.name,
+        tool: step.toolDetails.name,
+      })}
+    </StepLabelTypography>
+  )
+}
+
+const ProtocolStepDetailsLabel: React.FC<
+  Omit<StepDetailsLabelProps, 'variant'>
+> = ({ step, feeConfig, relayerSupport }) => {
+  const { t } = useTranslation()
+  return (
+    <StepLabelTypography>
+      {step.toolDetails.key === 'feeCollection'
+        ? feeConfig?.name ||
+          (relayerSupport
+            ? t('main.fees.relayerService')
+            : t('main.fees.defaultIntegrator'))
+        : step.toolDetails.key === 'gasZip'
+          ? t('main.refuelStepDetails', {
+              tool: step.toolDetails.name,
+            })
+          : step.toolDetails.name}
+    </StepLabelTypography>
+  )
+}

package/src/components/StepActions/SentToWalletRow.style.tsx

@@ -0,0 +1,29 @@
+import { Box, Link, styled } from '@mui/material'
+import type React from 'react'
+
+export const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 24,
+    height: 24,
+    borderRadius: '50%',
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, ${theme.vars.palette.background.paper})`,
+  }))
+
+export const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(
+  Link
+)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 24,
+  height: 24,
+  borderRadius: '50%',
+  textDecoration: 'none',
+  color: theme.vars.palette.text.primary,
+  '&:hover': {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  },
+}))

package/src/components/StepActions/SentToWalletRow.tsx

@@ -0,0 +1,56 @@
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import OpenInNew from '@mui/icons-material/OpenInNew'
+import Wallet from '@mui/icons-material/Wallet'
+import { Box, IconButton } from '@mui/material'
+import type { MouseEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { ActionRow } from '../ActionRow/ActionRow.js'
+import { ActionIconCircle, ExternalLink } from './SentToWalletRow.style.js'
+
+interface SentToWalletRowProps {
+  toAddress: string
+  toChainId: number
+}
+
+export const SentToWalletRow: React.FC<SentToWalletRowProps> = ({
+  toAddress,
+  toChainId,
+}) => {
+  const { t } = useTranslation()
+  const { getAddressLink } = useExplorer()
+  const addressLink = getAddressLink(toAddress, toChainId)
+
+  const handleCopy = (e: MouseEvent) => {
+    e.stopPropagation()
+    navigator.clipboard.writeText(toAddress)
+  }
+
+  return (
+    <ActionRow
+      startAdornment={
+        <ActionIconCircle>
+          <Wallet color="success" sx={{ fontSize: 16 }} />
+        </ActionIconCircle>
+      }
+      message={`${t('main.sentToWallet')}: ${shortenAddress(toAddress)}`}
+      endAdornment={
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          <IconButton size="small" onClick={handleCopy} sx={{ p: 0.5 }}>
+            <ContentCopyRounded sx={{ fontSize: 16 }} />
+          </IconButton>
+          {addressLink ? (
+            <ExternalLink
+              href={addressLink}
+              target="_blank"
+              rel="nofollow noreferrer"
+            >
+              <OpenInNew sx={{ fontSize: 16 }} />
+            </ExternalLink>
+          ) : undefined}
+        </Box>
+      }
+    />
+  )
+}

package/src/components/StepActions/StepActionRow.style.tsx

@@ -0,0 +1,18 @@
+import { Link, styled } from '@mui/material'
+import type React from 'react'
+
+export const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(
+  Link
+)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 24,
+  height: 24,
+  borderRadius: '50%',
+  textDecoration: 'none',
+  color: theme.vars.palette.text.primary,
+  '&:hover': {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  },
+}))

package/src/components/StepActions/StepActionRow.tsx

@@ -0,0 +1,30 @@
+import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'
+import OpenInNew from '@mui/icons-material/OpenInNew'
+import type React from 'react'
+import { useActionMessage } from '../../hooks/useActionMessage.js'
+import { ActionRow } from '../ActionRow/ActionRow.js'
+import { IconCircle } from '../IconCircle/IconCircle.js'
+import { ExternalLink } from './StepActionRow.style.js'
+
+export const StepActionRow: React.FC<{
+  step: LiFiStepExtended
+  action: ExecutionAction
+  href: string
+  defaultLabelsOnly?: boolean
+}> = ({ step, action, href, defaultLabelsOnly }) => {
+  const { title } = useActionMessage(step, action, defaultLabelsOnly)
+  const isFailed = action?.status === 'FAILED'
+  return (
+    <ActionRow
+      startAdornment={
+        <IconCircle status={isFailed ? 'error' : 'success'} size={24} />
+      }
+      message={title ?? ''}
+      endAdornment={
+        <ExternalLink href={href} target="_blank" rel="nofollow noreferrer">
+          <OpenInNew sx={{ fontSize: 16 }} />
+        </ExternalLink>
+      }
+    />
+  )
+}