From 803f95aafd5cd72623253ecd3803aa64d65a11b5 Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Tue, 4 Jul 2023 16:05:30 +0200
Subject: [PATCH] fix: Handle relayed txs and errors in status screen

---
 .../LoadingSpinner/styles.module.css          |  3 +-
 .../flows/SuccessScreen/StatusMessage.tsx     | 15 +++++-----
 .../flows/SuccessScreen/StatusStepper.tsx     |  2 +-
 .../tx-flow/flows/SuccessScreen/index.tsx     | 29 ++++++++++++++-----
 4 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/new-safe/create/steps/StatusStep/LoadingSpinner/styles.module.css b/src/components/new-safe/create/steps/StatusStep/LoadingSpinner/styles.module.css
index 4dcb5c0b32..2ca4ef0c06 100644
--- a/src/components/new-safe/create/steps/StatusStep/LoadingSpinner/styles.module.css
+++ b/src/components/new-safe/create/steps/StatusStep/LoadingSpinner/styles.module.css
@@ -11,7 +11,8 @@
   animation-play-state: paused;
 }
 
-.rectSuccess .rectCenter {
+.rectSuccess .rectCenter,
+.rectError .rectCenter {
   visibility: visible;
   transform: translateY(30px) translateX(30px) scale(1);
 }
diff --git a/src/components/tx-flow/flows/SuccessScreen/StatusMessage.tsx b/src/components/tx-flow/flows/SuccessScreen/StatusMessage.tsx
index accdc53448..572e5ee48a 100644
--- a/src/components/tx-flow/flows/SuccessScreen/StatusMessage.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/StatusMessage.tsx
@@ -4,9 +4,10 @@ import LoadingSpinner, { SpinnerStatus } from '@/components/new-safe/create/step
 import { PendingStatus } from '@/store/pendingTxsSlice'
 import css from './styles.module.css'
 
-const getStep = (status: PendingStatus) => {
+const getStep = (status: PendingStatus, error?: Error) => {
   switch (status) {
     case PendingStatus.PROCESSING:
+    case PendingStatus.RELAYING:
       return {
         description: 'Transaction is now processing.',
         instruction: 'The transaction was confirmed and is now being processed.',
@@ -18,17 +19,17 @@ const getStep = (status: PendingStatus) => {
       }
     default:
       return {
-        description: 'Transaction was successful.',
-        instruction: '',
+        description: error ? 'Transaction failed' : 'Transaction was successful.',
+        instruction: error ? error.message : '',
       }
   }
 }
 
-const StatusMessage = ({ status, isError }: { status: PendingStatus; isError: boolean }) => {
-  const stepInfo = getStep(status)
+const StatusMessage = ({ status, error }: { status: PendingStatus; error?: Error }) => {
+  const stepInfo = getStep(status, error)
 
   const isSuccess = status === undefined
-  const spinnerStatus = isSuccess ? SpinnerStatus.SUCCESS : SpinnerStatus.PROCESSING
+  const spinnerStatus = error ? SpinnerStatus.ERROR : isSuccess ? SpinnerStatus.SUCCESS : SpinnerStatus.PROCESSING
 
   return (
     <>
@@ -39,7 +40,7 @@ const StatusMessage = ({ status, isError }: { status: PendingStatus; isError: bo
         </Typography>
       </Box>
       {stepInfo.instruction && (
-        <Box className={classNames(css.instructions, isError ? css.errorBg : css.infoBg)}>
+        <Box className={classNames(css.instructions, error ? css.errorBg : css.infoBg)}>
           <Typography variant="body2">{stepInfo.instruction}</Typography>
         </Box>
       )}
diff --git a/src/components/tx-flow/flows/SuccessScreen/StatusStepper.tsx b/src/components/tx-flow/flows/SuccessScreen/StatusStepper.tsx
index 874e0a960d..936fe3e6fe 100644
--- a/src/components/tx-flow/flows/SuccessScreen/StatusStepper.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/StatusStepper.tsx
@@ -5,7 +5,7 @@ import StatusStep from '@/components/new-safe/create/steps/StatusStep/StatusStep
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { PendingStatus } from '@/store/pendingTxsSlice'
 
-const StatusStepper = ({ status, txHash }: { status: PendingStatus; txHash: string }) => {
+const StatusStepper = ({ status, txHash }: { status: PendingStatus; txHash?: string }) => {
   const { safeAddress } = useSafeInfo()
 
   const isProcessing = status === PendingStatus.PROCESSING || status === PendingStatus.INDEXING || status === undefined
diff --git a/src/components/tx-flow/flows/SuccessScreen/index.tsx b/src/components/tx-flow/flows/SuccessScreen/index.tsx
index 5a4d0d5b39..6835131cbe 100644
--- a/src/components/tx-flow/flows/SuccessScreen/index.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/index.tsx
@@ -12,9 +12,11 @@ import { selectPendingTxById } from '@/store/pendingTxsSlice'
 import { useEffect, useState } from 'react'
 import { getBlockExplorerLink } from '@/utils/chains'
 import { useCurrentChain } from '@/hooks/useChains'
+import { TxEvent, txSubscribe } from '@/services/tx/txEvents'
 
 export const SuccessScreen = ({ txId }: { txId: string }) => {
-  const [localTxHash, setLocalTxHash] = useState<string>('')
+  const [localTxHash, setLocalTxHash] = useState<string>()
+  const [error, setError] = useState<Error>()
   const safeAddress = useSafeAddress()
   const chain = useCurrentChain()
   const pendingTx = useAppSelector((state) => selectPendingTxById(state, txId))
@@ -26,12 +28,20 @@ export const SuccessScreen = ({ txId }: { txId: string }) => {
     setLocalTxHash(txHash)
   }, [txHash])
 
+  useEffect(() => {
+    const unsubscribe = txSubscribe(TxEvent.FAILED, (detail) => {
+      if (detail.txId === txId) setError(detail.error)
+    })
+
+    return unsubscribe
+  }, [txId])
+
   const homeLink: UrlObject = {
     pathname: AppRoutes.home,
     query: { safe: safeAddress },
   }
 
-  const txLink = chain ? getBlockExplorerLink(chain, localTxHash) : undefined
+  const txLink = chain && localTxHash ? getBlockExplorerLink(chain, localTxHash) : undefined
 
   return (
     <Container
@@ -43,14 +53,17 @@ export const SuccessScreen = ({ txId }: { txId: string }) => {
       maxWidth="md"
     >
       <div className={css.row}>
-        {/* TODO: figure out the isError logic */}
-        <StatusMessage status={status} isError={false} />
+        <StatusMessage status={status} error={error} />
       </div>
 
-      <Divider />
-      <div className={css.row}>
-        <StatusStepper status={status} txHash={localTxHash} />
-      </div>
+      {!error && (
+        <>
+          <Divider />
+          <div className={css.row}>
+            <StatusStepper status={status} txHash={localTxHash} />
+          </div>
+        </>
+      )}
 
       <Divider />
       <div className={classnames(css.row, css.buttons)}>