Feat/cancel tx

src/components/ActivityHistory/ActivityText.tsx

@@ -45,11 +45,7 @@ const ActivityText: React.FC<ActivityTextProps> = ({
       values: () => ({ pubKey: formatEthAddress(pubKey) }),
     },
     [ActivityType.CONSOLIDATION]: {
-      key: `consolidation.${isError ? 'error' : ''}${
-        formattedData?.targetPubKey === formattedData?.sourcePubKey
-          ? 'SelfConsolidationText'
-          : 'TargetConsolidationText'
-      }`,
+      key: `consolidation.${formattedData?.targetPubKey === formattedData?.sourcePubKey ? 'self' : 'target'}.${isError ? 'errorText' : 'text'}`,
       values: () => ({
         pubKey: formatEthAddress(formattedData?.targetPubKey),
         sourcePubKey: formatEthAddress(formattedData?.sourcePubKey),

src/components/ConsolidationRequestStatus/ConsolidationRequestStatus.tsx

@@ -4,17 +4,18 @@ import postActivity from '../../../utilities/postActivity'
 import { Status } from '../../constants/enums'
 import useResolveTransactionOnce from '../../hooks/useResolveTransactionOnce'
 import { ActivityType, NetworkId, TxHash } from '../../types'
+import Tooltip from '../ToolTip/Tooltip'
 import TransactionStatus, { TransactionStatusStyle } from '../TransactionStatus/TransactionStatus'
 import Typography from '../Typography/Typography'
 
 export interface ConsolidationRequestStatusProps {
   targetPubKey: string
   sourcePubKey: string
   txHash: TxHash
-  networkId: number
-  id?: string | number
-  onRetryTx: (id: string | number) => void
-  onStatusUpdate?: (id: string | number, status: Status) => void
+  networkId: NetworkId
+  id: number
+  onRetryTx: (id: number) => void
+  onStatusUpdate?: (id: number, status: Status) => void
 }
 
 const ConsolidationRequestStatus: FC<ConsolidationRequestStatusProps> = ({
@@ -29,14 +30,8 @@ const ConsolidationRequestStatus: FC<ConsolidationRequestStatusProps> = ({
   const { t } = useTranslation()
   const { txStatus } = useResolveTransactionOnce(txHash)
 
-  const renderText = {
-    [Status.SUCCESS]: 'successTxText',
-    [Status.ERROR]: 'errorTxText',
-    [Status.PENDING]: 'pendingTxText',
-  }[txStatus]
-
   useEffect(() => {
-    if (txStatus && id != null) {
+    if (txStatus) {
       onStatusUpdate?.(id, txStatus)
     }
   }, [txStatus, id, onStatusUpdate])
@@ -61,25 +56,23 @@ const ConsolidationRequestStatus: FC<ConsolidationRequestStatusProps> = ({
     })()
   }, [txStatus, targetPubKey, sourcePubKey, txHash])
 
-  const handleRetry = useCallback(() => {
-    if (id != null) {
-      onRetryTx(id)
-    }
-  }, [id, onRetryTx])
+  const handleRetry = useCallback(() => onRetryTx(id), [id, onRetryTx])
+
+  const commonProps = {
+    id,
+    networkId,
+    title: t('validatorManagement.consolidateView.signAndSubmit.consolidationRequest'),
+    status: txStatus,
+    txHash,
+    style: TransactionStatusStyle.Secondary,
+  }
 
   if (txStatus === Status.ERROR) {
     return (
-      <TransactionStatus
-        id={id}
-        networkId={networkId as NetworkId}
-        title={t('validatorManagement.consolidateView.signAndSubmit.consolidationRequest')}
-        status={txStatus}
-        txHash={txHash}
-        style={TransactionStatusStyle.Secondary}
-      >
+      <TransactionStatus {...commonProps}>
         <div className='space-y-2'>
           <Typography type='text-caption1'>
-            {t(`validatorManagement.consolidateView.signAndSubmit.${renderText}`)}
+            {t('validatorManagement.consolidateView.signAndSubmit.errorTxText')}
           </Typography>
           <div className='cursor-pointer' onClick={handleRetry}>
             <Typography className='underline' type='text-caption1'>
@@ -91,15 +84,33 @@ const ConsolidationRequestStatus: FC<ConsolidationRequestStatusProps> = ({
     )
   }
 
+  if (txStatus === Status.PENDING) {
+    return (
+      <TransactionStatus {...commonProps}>
+        <div className='space-y-2'>
+          <Typography type='text-caption1'>
+            {t('validatorManagement.consolidateView.signAndSubmit.pendingTxText')}
+          </Typography>
+          <Tooltip
+            id='retryTx-consolidation'
+            maxWidth={350}
+            text={t('validatorManagement.txStatuses.cancelTxToolTip')}
+          >
+            <div className='cursor-pointer' onClick={handleRetry}>
+              <Typography className='underline' type='text-caption1'>
+                {t('cancelTransaction')}
+              </Typography>
+            </div>
+          </Tooltip>
+        </div>
+      </TransactionStatus>
+    )
+  }
+
   return (
     <TransactionStatus
-      id={id}
-      networkId={networkId as NetworkId}
-      title={t('validatorManagement.consolidateView.signAndSubmit.consolidationRequest')}
-      text={t(`validatorManagement.consolidateView.signAndSubmit.${renderText}`)}
-      status={txStatus}
-      txHash={txHash}
-      style={TransactionStatusStyle.Secondary}
+      {...commonProps}
+      text={t('validatorManagement.consolidateView.signAndSubmit.successTxText')}
     />
   )
 }

src/components/ToolTip/Tooltip.tsx

@@ -32,7 +32,7 @@ const Tooltip: FC<TooltipProps> = ({
   const { mode } = useUiMode()
   const isDark = (toolTipMode || mode) === UiMode.DARK
 
-  const containerClasses = clsx(className, cursor)
+  const containerClasses = clsx(className, cursor, 'w-fit')
   const toolTipClasses = clsx('shadow-xl z-50', tooltipClassName)
 
   const toolTipStyles = useMemo(

src/components/TransactionStatus/TransactionStatusBlock.tsx

@@ -7,6 +7,7 @@ import getEtherscanLink from '../../../utilities/getEtherscanLink'
 import isValidNetwork from '../../../utilities/isValidNetwork'
 import { Status } from '../../constants/enums'
 import Button, { ButtonFace } from '../Button/Button'
+import Tooltip from '../ToolTip/Tooltip'
 import Typography from '../Typography/Typography'
 
 export interface TransactionStatusBlockProps {
@@ -16,6 +17,7 @@ export interface TransactionStatusBlockProps {
   onErrorText?: string
   onSuccessText?: string
   onSuccess?: () => void
+  onReset?: () => void
   chainId: number
 }
 
@@ -26,18 +28,21 @@ const TransactionStatusBlock: FC<TransactionStatusBlockProps> = ({
   onErrorText,
   onSuccessText,
   onSuccess,
+  onReset,
   chainId,
 }) => {
   const { t } = useTranslation()
+  const isPending = txStatus === Status.PENDING
   const isSuccess = txStatus === Status.SUCCESS
   const isError = txStatus === Status.ERROR
   const etherScanLink = isValidNetwork(chainId) ? getEtherscanLink(chainId, `/tx/${txHash}`) : null
 
   const hasErrorCallback = !!onError && !!onErrorText
   const hasSuccessCallback = !!onSuccess && onSuccessText
+  const status = isSuccess ? 'success' : isError ? 'error' : 'pending'
 
-  const statusTitle = `validatorManagement.txStatuses.${isSuccess ? 'success' : isError ? 'error' : 'pending'}.title`
-  const statusText = `validatorManagement.txStatuses.${isSuccess ? 'success' : isError ? 'error' : 'pending'}.text`
+  const statusTitle = `validatorManagement.txStatuses.${status}.title`
+  const statusText = `validatorManagement.txStatuses.${status}.text`
   const txIcon = clsx(
     isSuccess
       ? 'bi-check text-subtitle1 text-success '
@@ -80,6 +85,13 @@ const TransactionStatusBlock: FC<TransactionStatusBlockProps> = ({
       <Typography className='text-center' type='text-caption'>
         {t(statusText)}
       </Typography>
+      {onReset && isPending && (
+        <Tooltip id='retryTx' maxWidth={350} text={t('txStatuses.cancelTxToolTip')}>
+          <Button fontType='text-caption1' onClick={onError} type={ButtonFace.TERTIARY}>
+            {t('cancelTransaction')}
+          </Button>
+        </Tooltip>
+      )}
       {isError && hasErrorCallback ? (
         <Button fontType='text-caption1' onClick={onError} type={ButtonFace.SECONDARY}>
           {onErrorText}

src/components/ValidatorDepositImport/ValidatorDepositImport.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect } from 'react'
+import React, { FC, useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import formatEthAddress from '../../../utilities/formatEthAddress'
 import getBeaconChaLink from '../../../utilities/getBeaconChaLink'
@@ -9,6 +9,7 @@ import useImportValidator from '../../hooks/useImportValidator'
 import useResolveTransactionOnce from '../../hooks/useResolveTransactionOnce'
 import { ActivityType, DepositData, NetworkId, TxHash } from '../../types'
 import ExternalLink from '../ExternalLink/ExternalLink'
+import Tooltip from '../ToolTip/Tooltip'
 import TransactionStatus from '../TransactionStatus/TransactionStatus'
 import Typography from '../Typography/Typography'
 
@@ -98,14 +99,18 @@ const ValidatorDepositImport: FC<ValidatorDepositImportProps> = ({
     : null
 
   const renderTransactionStatus = useCallback(() => {
+    const commonProps = {
+      id: mnemonicIndex,
+      networkId: depositNetworkId,
+      txHash,
+    }
+
     if (isImportError) {
       return (
         <TransactionStatus
-          id={mnemonicIndex}
-          networkId={depositNetworkId}
+          {...commonProps}
           title={t(`validatorManagement.txStatuses.importError.title`)}
           status={Status.ERROR}
-          txHash={txHash}
         >
           <div className='space-y-2'>
             <Typography type='text-caption1'>
@@ -125,11 +130,9 @@ const ValidatorDepositImport: FC<ValidatorDepositImportProps> = ({
     if (isImportSuccess || status === Status.SUCCESS) {
       return (
         <TransactionStatus
-          id={mnemonicIndex}
-          networkId={depositNetworkId}
+          {...commonProps}
           title={t('validatorManagement.txStatuses.validatorComplete.title')}
           status={Status.SUCCESS}
-          txHash={txHash}
         >
           <div className='space-y-2'>
             <Typography type='text-caption1'>
@@ -157,18 +160,13 @@ const ValidatorDepositImport: FC<ValidatorDepositImportProps> = ({
       )
     }
 
-    const txStatusKey = txStatus.toLowerCase()
-
-    return (
-      <TransactionStatus
-        id={mnemonicIndex}
-        networkId={depositNetworkId}
-        title={t(`validatorManagement.txStatuses.${txStatusKey}.title`)}
-        text={t(`validatorManagement.txStatuses.${txStatusKey}.text`)}
-        status={txStatus}
-        txHash={txHash}
-      >
-        {txStatus === Status.ERROR && (
+    if (txStatus === Status.ERROR) {
+      return (
+        <TransactionStatus
+          {...commonProps}
+          title={t('validatorManagement.txStatuses.error.title')}
+          status={txStatus}
+        >
           <div className='space-y-2'>
             <Typography type='text-caption1'>
               {t('validatorManagement.txStatuses.error.text')}
@@ -179,8 +177,40 @@ const ValidatorDepositImport: FC<ValidatorDepositImportProps> = ({
               </Typography>
             </div>
           </div>
-        )}
-      </TransactionStatus>
+        </TransactionStatus>
+      )
+    }
+
+    if (txStatus === Status.PENDING) {
+      return (
+        <TransactionStatus
+          {...commonProps}
+          title={t('validatorManagement.txStatuses.pending.title')}
+          status={txStatus}
+        >
+          <div className='space-y-2'>
+            <Typography type='text-caption1'>
+              {t('validatorManagement.txStatuses.pending.text')}
+            </Typography>
+            <Tooltip id='retryTx' maxWidth={350} text={t('txStatuses.cancelTxToolTip')}>
+              <div className='cursor-pointer' onClick={retryTransaction}>
+                <Typography type='text-caption1' className='underline'>
+                  {t('cancelTransaction')}
+                </Typography>
+              </div>
+            </Tooltip>
+          </div>
+        </TransactionStatus>
+      )
+    }
+
+    return (
+      <TransactionStatus
+        {...commonProps}
+        title={t(`validatorManagement.txStatuses.success.title`)}
+        text={t(`validatorManagement.txStatuses.success.text`)}
+        status={txStatus}
+      />
     )
   }, [
     isImportSuccess,

src/components/ValidatorManagement/ConsolidateView/Steps/SubmitConsolidationStep/SubmitConsolidationStep.tsx

@@ -7,7 +7,7 @@ import ValidatorLogo from '../../../../../assets/images/validators.svg'
 import { CONSOLIDATION_CONTRACT } from '../../../../../constants/constants'
 import { Status } from '../../../../../constants/enums'
 import { useMaxHeight } from '../../../../../hooks/useMaxHeight'
-import { ConsolidationTx } from '../../../../../types'
+import { ConsolidationTx, NetworkId } from '../../../../../types'
 import { ValidatorInfo } from '../../../../../types/validator'
 import Button, { ButtonFace } from '../../../../Button/Button'
 import CheckBox from '../../../../CheckBox/CheckBox'
@@ -117,7 +117,7 @@ const SubmitConsolidationStep: FC<SubmitConsolidationStepProps> = ({
         onRetryTx={retryTransaction}
         onStatusUpdate={updateConsolidationResults}
         id={index}
-        networkId={chainId}
+        networkId={chainId as NetworkId}
         txHash={txHash}
       />
     ))

src/components/ValidatorManagement/CreateValidatorView/Steps/SignDepositValidators/SingleDeposit/DepositSteps/ValidateTransactionStep.tsx

@@ -1,7 +1,9 @@
-import { FC } from 'react'
+import React, { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Status } from '../../../../../../../constants/enums'
 import { NetworkId, TxHash } from '../../../../../../../types'
+import Button, { ButtonFace } from '../../../../../../Button/Button'
+import Tooltip from '../../../../../../ToolTip/Tooltip'
 import TransactionStatus from '../../../../../../TransactionStatus/TransactionStatus'
 import Typography from '../../../../../../Typography/Typography'
 
@@ -19,6 +21,7 @@ const ValidateTransactionStep: FC<ValidateTransactionStepProps> = ({
   onRetry,
 }) => {
   const { t } = useTranslation()
+  const isPending = txStatus === Status.PENDING
   const isError = txStatus === Status.ERROR
   const transKeyStatus = txStatus.toLowerCase()
 
@@ -43,6 +46,18 @@ const ValidateTransactionStep: FC<ValidateTransactionStepProps> = ({
             </div>
           </div>
         )}
+        {isPending && (
+          <div className='space-y-8'>
+            <Typography type='text-caption1'>
+              {t('validatorManagement.txStatuses.pending.text')}
+            </Typography>
+            <Tooltip id='retryTx-validate' maxWidth={350} text={t('txStatuses.cancelTxToolTip')}>
+              <Button fontType='text-caption1' onClick={onRetry} type={ButtonFace.TERTIARY}>
+                {t('cancelTransaction')}
+              </Button>
+            </Tooltip>
+          </div>
+        )}
       </TransactionStatus>
     </div>
   ) : null

src/components/ValidatorManagement/CreateValidatorView/Steps/SignDepositValidators/SingleDeposit/SingleDeposit.tsx

@@ -55,7 +55,7 @@ const SingleDeposit: FC<SingleDepositProps> = ({
     t('validatorManagement.signAndDeposit.stepTitles.verifyTransaction'),
     t('validatorManagement.signAndDeposit.stepTitles.importValidator'),
   ]
-  const { isLoading, error, txHash, pubKey, makeDeposit } = useValidatorDeposit({
+  const { isLoading, error, txHash, pubKey, makeDeposit, reset } = useValidatorDeposit({
     validator: candidate,
     mnemonic,
     beaconSpec,
@@ -112,7 +112,10 @@ const SingleDeposit: FC<SingleDepositProps> = ({
 
   const acknowledgeRisk = () => setIsAcknowledge(true)
 
-  const retryTransaction = () => setStep(0)
+  const retryTransaction = () => {
+    setStep(0)
+    reset()
+  }
 
   return (
     <div className='relative w-full h-full'>

src/components/ValidatorModal/views/ValidatorDeposit/ValidatorDeposit.tsx

@@ -171,6 +171,7 @@ const ValidatorDeposit: FC<ValidatorDepositProps> = ({
                 chainId={chainId}
                 onErrorText={t('validatorManagement.retryTransaction')}
                 onError={retryTransaction}
+                onReset={retryTransaction}
                 onSuccess={viewDetails}
                 onSuccessText={t('validatorManagement.viewValidator')}
                 txStatus={txStatus}