fix: add cancellation overview (#2855)

* fix: add overview of cancellation + skip -> cancel

* fix: icon colour

src/components/recovery/SkipRecoveryButton/index.tsx → src/components/recovery/CancelRecoveryButton/index.tsx

@@ -6,10 +6,10 @@ import ErrorIcon from '@/public/images/notifications/error.svg'
 import IconButton from '@mui/material/IconButton'
 import CheckWallet from '@/components/common/CheckWallet'
 import { TxModalContext } from '@/components/tx-flow'
-import { SkipRecoveryFlow } from '@/components/tx-flow/flows/SkipRecovery'
+import { CancelRecoveryFlow } from '@/components/tx-flow/flows/CancelRecovery'
 import type { RecoveryQueueItem } from '@/store/recoverySlice'
 
-export function SkipRecoveryButton({
+export function CancelRecoveryButton({
   recovery,
   compact = false,
 }: {
@@ -22,7 +22,7 @@ export function SkipRecoveryButton({
     e.stopPropagation()
     e.preventDefault()
 
-    setTxFlow(<SkipRecoveryFlow recovery={recovery} />)
+    setTxFlow(<CancelRecoveryFlow recovery={recovery} />)
   }
 
   return (
@@ -34,7 +34,7 @@ export function SkipRecoveryButton({
           </IconButton>
         ) : (
           <Button onClick={onClick} variant="danger" disabled={!isOk} size="stretched">
-            Skip
+            Cancel
           </Button>
         )
       }

src/components/recovery/RecoveryDetails/index.tsx

@@ -61,7 +61,9 @@ export function RecoveryDetails({ item }: { item: RecoveryQueueItem }): ReactEle
               </div>
             </InfoDetails>
           ) : (
-            <ErrorMessage>This transaction potentially calls malicious actions. We recommend skipping it.</ErrorMessage>
+            <ErrorMessage>
+              This transaction potentially calls malicious actions. We recommend cancelling it.
+            </ErrorMessage>
           )}
         </div>
 

src/components/recovery/RecoverySigners/index.tsx

@@ -6,7 +6,7 @@ import CheckIcon from '@/public/images/common/circle-check.svg'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import { Countdown } from '@/components/common/Countdown'
 import { ExecuteRecoveryButton } from '../ExecuteRecoveryButton'
-import { SkipRecoveryButton } from '../SkipRecoveryButton'
+import { CancelRecoveryButton } from '../CancelRecoveryButton'
 import { useRecoveryTxState } from '@/hooks/useRecoveryTxState'
 import type { RecoveryQueueItem } from '@/store/recoverySlice'
 
@@ -69,7 +69,7 @@ export function RecoverySigners({ item }: { item: RecoveryQueueItem }): ReactEle
 
       <Box display="flex" alignItems="center" justifyContent="center" gap={1} mt={2}>
         <ExecuteRecoveryButton recovery={item} />
-        <SkipRecoveryButton recovery={item} />
+        <CancelRecoveryButton recovery={item} />
       </Box>
     </>
   )

src/components/recovery/RecoverySummary/index.tsx

@@ -6,7 +6,7 @@ import { RecoveryType } from '../RecoveryType'
 import { RecoveryInfo } from '../RecoveryInfo'
 import { RecoveryStatus } from '../RecoveryStatus'
 import { ExecuteRecoveryButton } from '../ExecuteRecoveryButton'
-import { SkipRecoveryButton } from '../SkipRecoveryButton'
+import { CancelRecoveryButton } from '../CancelRecoveryButton'
 import useWallet from '@/hooks/wallets/useWallet'
 import type { RecoveryQueueItem } from '@/store/recoverySlice'
 
@@ -31,7 +31,7 @@ export function RecoverySummary({ item }: { item: RecoveryQueueItem }): ReactEle
       {wallet && (
         <Box gridArea="actions" display="flex" justifyContent={{ sm: 'center' }} gap={1}>
           <ExecuteRecoveryButton recovery={item} compact />
-          <SkipRecoveryButton recovery={item} compact />
+          <CancelRecoveryButton recovery={item} compact />
         </Box>
       )}
 

src/components/tx-flow/common/OwnerList/index.tsx

@@ -1,5 +1,5 @@
 import { Paper, Typography, SvgIcon } from '@mui/material'
-import type { SxProps } from '@mui/material'
+import type { PaperProps } from '@mui/material'
 import type { AddressEx } from '@safe-global/safe-gateway-typescript-sdk'
 import type { ReactElement } from 'react'
 
@@ -15,7 +15,7 @@ export function OwnerList({
 }: {
   owners: Array<AddressEx>
   title?: string
-  sx?: SxProps
+  sx?: PaperProps['sx']
 }): ReactElement {
   return (
     <Paper className={css.container} sx={sx}>

src/components/tx-flow/flows/SkipRecovery/SkipRecoveryFlowReview.tsx → src/components/tx-flow/flows/CancelRecovery/CancelRecoveryFlowReview.tsx

@@ -7,9 +7,10 @@ import SignOrExecuteForm from '@/components/tx/SignOrExecuteForm'
 import { useWeb3ReadOnly } from '@/hooks/wallets/web3'
 import { getRecoverySkipTransaction } from '@/services/recovery/transaction'
 import { createTx } from '@/services/tx/tx-sender'
+import ErrorMessage from '@/components/tx/ErrorMessage'
 import type { RecoveryQueueItem } from '@/store/recoverySlice'
 
-export function SkipRecoveryFlowReview({ recovery }: { recovery: RecoveryQueueItem }): ReactElement {
+export function CancelRecoveryFlowReview({ recovery }: { recovery: RecoveryQueueItem }): ReactElement {
   const web3ReadOnly = useWeb3ReadOnly()
   const { setSafeTx, setSafeTxError } = useContext(SafeTxContext)
 
@@ -23,16 +24,16 @@ export function SkipRecoveryFlowReview({ recovery }: { recovery: RecoveryQueueIt
 
   return (
     <SignOrExecuteForm onSubmit={() => null} isBatchable={false}>
-      <Typography mb={2}>
-        To reject the recovery attempt, a separate transaction will be created to increase the nonce beyond the
-        proposal.
+      <Typography mb={1}>
+        This transaction will initiate the cancellation of the{' '}
+        {recovery.isMalicious ? 'malicious transaction' : 'recovery attempt'}. It requires other owner signatures in
+        order to be complete.
       </Typography>
 
-      <Typography mb={2}>
-        Queue nonce: <b>{recovery.args.queueNonce.toNumber()}</b>
-      </Typography>
-
-      <Typography mb={2}>You will need to confirm the transaction with your currently connected wallet.</Typography>
+      <ErrorMessage level="info">
+        All actions initiated by the guardian will be skipped. The current owners will remain the owners of the Safe
+        Account.
+      </ErrorMessage>
     </SignOrExecuteForm>
   )
 }

src/components/tx-flow/flows/CancelRecovery/CancelRecoveryOverview.tsx

@@ -0,0 +1,43 @@
+import { Box, Button, Typography } from '@mui/material'
+import { useContext } from 'react'
+import type { ReactElement } from 'react'
+
+import ReplaceTxIcon from '@/public/images/transactions/replace-tx.svg'
+import { TxModalContext } from '../..'
+import TxCard from '../../common/TxCard'
+
+export function CancelRecoveryOverview({ onSubmit }: { onSubmit: () => void }): ReactElement {
+  const { setTxFlow } = useContext(TxModalContext)
+
+  const onClose = () => {
+    setTxFlow(undefined)
+  }
+
+  return (
+    <TxCard>
+      <Box display="flex" flexDirection="column" alignItems="center" p={5}>
+        {/* TODO: Replace with correct icon when provided */}
+        <ReplaceTxIcon />
+
+        <Typography mb={1} variant="h4" mt={5} fontWeight={700}>
+          Do you want to cancel the Account recovery?
+        </Typography>
+
+        <Typography variant="body2" mb={3} textAlign="center">
+          If it is was an unwanted recovery attempt or you&apos;ve noticed something suspicious, you can cancel it by
+          increasing the nonce of the recovery module.
+        </Typography>
+
+        <Box display="flex" gap={3}>
+          <Button variant="outlined" onClick={onClose}>
+            Go back
+          </Button>
+
+          <Button variant="contained" onClick={onSubmit}>
+            Yes, cancel recovery
+          </Button>
+        </Box>
+      </Box>
+    </TxCard>
+  )
+}

src/components/tx-flow/flows/CancelRecovery/index.tsx

@@ -0,0 +1,30 @@
+import type { ReactElement } from 'react'
+
+import TxLayout from '../../common/TxLayout'
+import { CancelRecoveryFlowReview } from './CancelRecoveryFlowReview'
+import { CancelRecoveryOverview } from './CancelRecoveryOverview'
+import useTxStepper from '../../useTxStepper'
+import type { RecoveryQueueItem } from '@/store/recoverySlice'
+
+export function CancelRecoveryFlow({ recovery }: { recovery: RecoveryQueueItem }): ReactElement {
+  const { step, nextStep, prevStep } = useTxStepper<undefined>(undefined)
+
+  const steps = [
+    <CancelRecoveryOverview key={0} onSubmit={() => nextStep(undefined)} />,
+    <CancelRecoveryFlowReview key={0} recovery={recovery} />,
+  ]
+
+  const isIntro = step === 0
+
+  return (
+    <TxLayout
+      title={isIntro ? 'Cancel Account recovery' : 'New transaction'}
+      subtitle={isIntro ? undefined : 'Cancel Account recovery'}
+      step={step}
+      hideNonce={isIntro}
+      onBack={prevStep}
+    >
+      {steps}
+    </TxLayout>
+  )
+}

src/components/tx/ErrorMessage/index.tsx

@@ -26,7 +26,12 @@ const ErrorMessage = ({
   return (
     <div className={classNames(css.container, css[level], className, 'errorMessage')}>
       <div className={css.message}>
-        <SvgIcon component={level === 'info' ? InfoIcon : WarningIcon} inheritViewBox fontSize="small" />
+        <SvgIcon
+          component={level === 'info' ? InfoIcon : WarningIcon}
+          inheritViewBox
+          fontSize="small"
+          sx={{ color: ({ palette }) => `${palette[level].main} !important` }}
+        />
 
         <div>
           <Typography variant="body2" component="span">