chore(TransactionFeedV2): Add error handling to Transaction Feed V2 (#…

…6151)

### Description
5th PR for RET-1207. Adds error handling middleware as per [the
docs](https://redux-toolkit.js.org/rtk-query/usage/error-handling) and
also copies the same logic of error handling from
[queryHelper](https://github.com/valora-inc/wallet/blob/main/src/transactions/feed/queryHelper.ts).

### Test plan
Eveything works as before.

### Related issues

- Relates to RET-1207

### Backwards compatibility
Yes

### Network scalability

If a new NetworkId and/or Network are added in the future, the changes
in this PR will:

- [x] Continue to work without code changes, OR trigger a compilation
error (guaranteeing we find it when a new network is added)

src/redux/apiReducersList.ts

@@ -7,3 +7,5 @@ export const apiReducersList = {
 } as const
 
 export const apiMiddlewares = [transactionFeedV2Api.middleware]
+
+export const apiReducersKeys = Object.keys(apiReducersList)

src/redux/store.test.ts

@@ -1,6 +1,6 @@
 import Ajv from 'ajv'
 import { spawn, takeEvery } from 'redux-saga/effects'
-import { ApiReducersKeys, apiReducersList } from 'src/redux/apiReducersList'
+import { apiReducersKeys, ApiReducersKeys } from 'src/redux/apiReducersList'
 import * as createMigrateModule from 'src/redux/createMigrate'
 import { migrations } from 'src/redux/migrations'
 import { RootState } from 'src/redux/reducers'
@@ -28,7 +28,6 @@ const resetStateOnInvalidStoredAccount = jest.spyOn(
 const loggerErrorSpy = jest.spyOn(Logger, 'error')
 
 function getNonApiReducers<R = Omit<RootState, ApiReducersKeys>>(state: RootState): R {
-  const apiReducersKeys = Object.keys(apiReducersList)
   const nonApiReducers = {} as R
 
   for (const [key, value] of Object.entries(state)) {

src/transactions/feed/TransactionFeedV2.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import { ActivityIndicator, SectionList, StyleSheet, View } from 'react-native'
+import { showError } from 'src/alert/actions'
+import { ErrorMessages } from 'src/app/ErrorMessages'
 import SectionHead from 'src/components/SectionHead'
 import GetStarted from 'src/home/GetStarted'
 import { useDispatch, useSelector } from 'src/redux/hooks'
@@ -31,6 +33,7 @@ import {
   groupFeedItemsInSections,
   standByTransactionToTokenTransaction,
 } from 'src/transactions/utils'
+import Logger from 'src/utils/Logger'
 import { walletAddressSelector } from 'src/web3/selectors'
 
 type PaginatedData = {
@@ -40,6 +43,7 @@ type PaginatedData = {
 // Query poll interval
 const POLL_INTERVAL_MS = 10000 // 10 sec
 const FIRST_PAGE_TIMESTAMP = 0
+const TAG = 'transactions/feed/TransactionFeedV2'
 
 function getAllowedNetworksForTransfers() {
   return getMultichainFeatures().showTransfers
@@ -279,6 +283,16 @@ export default function TransactionFeedV2() {
     [isFetching, data?.transactions, originalArgs?.endCursor, standByTransactions.confirmed]
   )
 
+  useEffect(
+    function handleError() {
+      if (error === undefined) return
+
+      Logger.error(TAG, 'Error while fetching transactions', error)
+      dispatch(showError(ErrorMessages.FETCH_FAILED))
+    },
+    [error]
+  )
+
   /**
    * In order to avoid bloating stand by transactions with confirmed transactions that are already
    * present in the feed via pagination – we need to cleanup them up. This must run for every page