Fix: show error msg when tx is not found

src/routes/safe/components/FetchError.tsx

@@ -0,0 +1,44 @@
+import { ReactElement } from 'react'
+import { Link } from 'react-router-dom'
+import { Title } from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
+import Button from 'src/components/layout/Button'
+
+interface FetchErrorProps {
+  text: string
+  buttonText: string
+  redirectRoute: string
+}
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+`
+
+const ErrorContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  // Offset so that it is centered relative to the header
+  margin-top: -30px;
+`
+
+const FetchError = ({ text, buttonText, redirectRoute }: FetchErrorProps): ReactElement => {
+  return (
+    <ErrorContainer>
+      <img src="./resources/error.png" alt="Error" />
+
+      <Title size="xs">{text}</Title>
+
+      <StyledLink to={redirectRoute}>
+        <Button color="primary" size="medium" variant="contained">
+          {buttonText}
+        </Button>
+      </StyledLink>
+    </ErrorContainer>
+  )
+}
+
+export default FetchError

src/routes/safe/components/SafeLoadError.tsx

@@ -1,16 +1,11 @@
 import { ReactElement, useEffect } from 'react'
-import { useHistory } from 'react-router-dom'
-import { Title } from '@gnosis.pm/safe-react-components'
-import styled from 'styled-components'
-
-import Button from 'src/components/layout/Button'
 import { extractSafeAddress, WELCOME_ROUTE } from 'src/routes/routes'
 import { useDispatch } from 'react-redux'
 import removeViewedSafe from 'src/logic/currentSession/store/actions/removeViewedSafe'
+import FetchError from './FetchError'
 
 const SafeLoadError = (): ReactElement => {
   const dispatch = useDispatch()
-  const history = useHistory()
 
   useEffect(() => {
     // Remove the errorneous Safe from the list of viewed safes on unmount
@@ -19,30 +14,7 @@ const SafeLoadError = (): ReactElement => {
     }
   }, [dispatch])
 
-  const handleClick = () => {
-    history.push(WELCOME_ROUTE)
-  }
-
-  return (
-    <ErrorContainer>
-      <img src="./resources/error.png" alt="Error" />
-      <Title size="xs">This Safe couldn&apos;t be loaded</Title>
-      <Button onClick={handleClick} color="primary" size="medium" variant="contained">
-        Back to Main Page
-      </Button>
-    </ErrorContainer>
-  )
+  return <FetchError text="This Safe couldn't be loaded" buttonText="Back to Main Page" redirectRoute={WELCOME_ROUTE} />
 }
 
-export const ErrorContainer = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  // Offset so that it is centered relative to the header
-  margin-top: -30px;
-`
-
 export default SafeLoadError

src/routes/safe/components/Transactions/TxList/TxSingularDetails.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 import { Loader } from '@gnosis.pm/safe-react-components'
 import { shallowEqual, useDispatch, useSelector } from 'react-redux'
 import { TransactionDetails } from '@gnosis.pm/safe-react-gateway-sdk'
@@ -12,7 +12,6 @@ import {
   SafeRouteSlugs,
   SAFE_ROUTES,
   TRANSACTION_ID_SLUG,
-  history,
 } from 'src/routes/routes'
 import { Centered } from './styled'
 import { getTransactionWithLocationByAttribute } from 'src/logic/safe/store/selectors/gatewayTransactions'
@@ -30,12 +29,15 @@ import { Transaction } from 'src/logic/safe/store/models/types/gateway.d'
 import { currentChainId } from 'src/logic/config/store/selectors'
 import { QueueTxList } from './QueueTxList'
 import { HistoryTxList } from './HistoryTxList'
+import FetchError from '../../FetchError'
 
 const TxSingularDetails = (): ReactElement => {
   const { [TRANSACTION_ID_SLUG]: safeTxHash = '' } = useParams<SafeRouteSlugs>()
   const [fetchedTx, setFetchedTx] = useState<TransactionDetails>()
   const [liveTx, setLiveTx] = useState<{ txLocation: TxLocation; transaction: Transaction }>()
+  const [error, setError] = useState<Error>()
   const dispatch = useDispatch()
+  const history = useHistory()
   const chainId = useSelector(currentChainId)
 
   // We must use the tx from the store as the queue actions alter the tx
@@ -76,6 +78,7 @@ const TxSingularDetails = (): ReactElement => {
         txDetails = await fetchSafeTransaction(safeTxHash)
       } catch (e) {
         logError(Errors._614, e.message)
+        setError(e)
         return
       }
 
@@ -89,7 +92,7 @@ const TxSingularDetails = (): ReactElement => {
     return () => {
       isCurrent = false
     }
-  }, [safeTxHash, setFetchedTx, setLiveTx])
+  }, [history, safeTxHash, setFetchedTx, setLiveTx])
 
   // Add the tx to the store
   useEffect(() => {
@@ -112,6 +115,17 @@ const TxSingularDetails = (): ReactElement => {
     dispatch(isTxQueued(listItemTx.txStatus) ? addQueuedTransactions(payload) : addHistoryTransactions(payload))
   }, [fetchedTx, chainId, dispatch])
 
+  if (!liveTx && error) {
+    const safeParams = extractPrefixedSafeAddress()
+    return (
+      <FetchError
+        text="Transaction not found"
+        buttonText="See all transactions"
+        redirectRoute={generateSafeRoute(SAFE_ROUTES.TRANSACTIONS, safeParams)}
+      />
+    )
+  }
+
   if (!liveTx) {
     return (
       <Centered padding={10}>