Handle 404 responses for txs queue and history (#1990)

src/logic/safe/store/actions/transactions/fetchTransactions/loadGatewayTransactions.ts

@@ -42,15 +42,25 @@ export const loadPagedHistoryTransactions = async (
 export const loadHistoryTransactions = async (safeAddress: string): Promise<HistoryGatewayResponse['results']> => {
   const historyTransactionsUrl = getHistoryTransactionsUrl(safeAddress)
 
-  const {
-    data: { results, ...pointers },
-  } = await axios.get<HistoryGatewayResponse, AxiosResponse<HistoryGatewayResponse>>(historyTransactionsUrl)
+  try {
+    const {
+      data: { results, ...pointers },
+    } = await axios.get<HistoryGatewayResponse, AxiosResponse<HistoryGatewayResponse>>(historyTransactionsUrl)
 
-  if (!historyPointers[safeAddress]) {
-    historyPointers[safeAddress] = pointers
+    if (!historyPointers[safeAddress]) {
+      historyPointers[safeAddress] = pointers
+    }
+
+    return results
+  } catch (error) {
+    // When the safe is just created there is a delay until the gateway recognize the
+    // safe address, when that happens it returns 404.
+    if (error.response.status === 404) {
+      return []
+    }
+
+    throw Error(`There was an error trying to fetch history txs from safeAddress ${safeAddress}`)
   }
-
-  return results
 }
 
 /************/
@@ -90,14 +100,23 @@ export const loadPagedQueuedTransactions = async (
 
 export const loadQueuedTransactions = async (safeAddress: string): Promise<QueuedGatewayResponse['results']> => {
   const queuedTransactionsUrl = getQueuedTransactionsUrl(safeAddress)
+  try {
+    const {
+      data: { results, ...pointers },
+    } = await axios.get<QueuedGatewayResponse, AxiosResponse<QueuedGatewayResponse>>(queuedTransactionsUrl)
 
-  const {
-    data: { results, ...pointers },
-  } = await axios.get<QueuedGatewayResponse, AxiosResponse<QueuedGatewayResponse>>(queuedTransactionsUrl)
+    if (!queuedPointers[safeAddress] || queuedPointers[safeAddress].next === null) {
+      queuedPointers[safeAddress] = pointers
+    }
 
-  if (!queuedPointers[safeAddress] || queuedPointers[safeAddress].next === null) {
-    queuedPointers[safeAddress] = pointers
+    return results
+  } catch (error) {
+    // When the safe is just created there is a delay until the gateway recognize the
+    // safe address, when that happens it returns 404.
+    if (error.response.status === 404) {
+      return []
+    }
+
+    throw Error(`There was an error trying to fetch queued txs from safeAddress ${safeAddress}`)
   }
-
-  return results
 }

src/routes/safe/components/Transactions/GatewayTransactions/HistoryTransactions.tsx

@@ -1,15 +1,17 @@
-import { Loader } from '@gnosis.pm/safe-react-components'
+import { Loader, Title } from '@gnosis.pm/safe-react-components'
 import React, { ReactElement } from 'react'
 
 import { usePagedHistoryTransactions } from './hooks/usePagedHistoryTransactions'
-import { Centered } from './styled'
+import { Centered, NoTransactions } from './styled'
 import { HistoryTxList } from './HistoryTxList'
 import { TxsInfiniteScroll } from './TxsInfiniteScroll'
+import Img from 'src/components/layout/Img'
+import NoTransactionsImage from './assets/no-transactions.svg'
 
 export const HistoryTransactions = (): ReactElement => {
   const { count, hasMore, next, transactions, isLoading } = usePagedHistoryTransactions()
 
-  if (count === 0) {
+  if (isLoading || !transactions) {
     return (
       <Centered>
         <Loader size="md" />
@@ -17,6 +19,15 @@ export const HistoryTransactions = (): ReactElement => {
     )
   }
 
+  if (count === 0) {
+    return (
+      <NoTransactions>
+        <Img alt="No Transactions yet" src={NoTransactionsImage} />
+        <Title size="xs">History transactions will appear here </Title>
+      </NoTransactions>
+    )
+  }
+
   return (
     <TxsInfiniteScroll next={next} hasMore={hasMore} isLoading={isLoading}>
       <HistoryTxList transactions={transactions} />

src/routes/safe/components/Transactions/GatewayTransactions/QueueTransactions.tsx

@@ -1,23 +1,16 @@
 import { Loader, Title } from '@gnosis.pm/safe-react-components'
 import React, { ReactElement } from 'react'
-import style from 'styled-components'
 
 import Img from 'src/components/layout/Img'
 import { ActionModal } from './ActionModal'
 import NoTransactionsImage from './assets/no-transactions.svg'
 import { usePagedQueuedTransactions } from './hooks/usePagedQueuedTransactions'
 import { QueueTxList } from './QueueTxList'
-import { Centered } from './styled'
+import { Centered, NoTransactions } from './styled'
 import { TxActionProvider } from './TxActionProvider'
 import { TxsInfiniteScroll } from './TxsInfiniteScroll'
 import { TxLocationContext } from './TxLocationProvider'
 
-const NoTransactions = style.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: 60px;
-`
-
 export const QueueTransactions = (): ReactElement => {
   const { count, isLoading, hasMore, next, transactions } = usePagedQueuedTransactions()
 
@@ -35,7 +28,7 @@ export const QueueTransactions = (): ReactElement => {
     return (
       <NoTransactions>
         <Img alt="No Transactions yet" src={NoTransactionsImage} />
-        <Title size="xs">Transactions will appear here </Title>
+        <Title size="xs">Queue transactions will appear here </Title>
       </NoTransactions>
     )
   }

src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx

@@ -503,3 +503,8 @@ export const AlignItemsWithMargin = styled.div`
     margin-right: 6px;
   }
 `
+export const NoTransactions = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 60px;
+`