feat(TransactionFeedV2): Add RTK-Query, add api slice for Transaction Feed V2

knip.ts

@@ -33,7 +33,12 @@ const config: KnipConfig = {
     '@types/jest',
     'husky',
   ],
-  ignore: ['src/utils/inputValidation.ts', 'src/utils/country.json'],
+  ignore: [
+    'src/utils/inputValidation.ts',
+    'src/utils/country.json',
+    'src/redux/reducersForSchemaGeneration.ts',
+    'src/transactions/apiTestHelpers.ts',
+  ],
 }
 
 export default config

scripts/update_root_state_schema.sh

@@ -7,7 +7,7 @@ set -euo pipefail
 
 root_state_schema="test/RootStateSchema.json"
 
-typescript-json-schema ./tsconfig.json RootState --include src/redux/reducers.ts --ignoreErrors --required --noExtraProps > "$root_state_schema"
+typescript-json-schema ./tsconfig.json RootStateForSchemaGeneration --include src/redux/reducersForSchemaGeneration.ts --ignoreErrors --required --noExtraProps > "$root_state_schema"
 
 if git diff --exit-code "$root_state_schema"; then
   echo "$root_state_schema is up to date"

src/redux/api.ts

@@ -0,0 +1,9 @@
+import { fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import networkConfig from 'src/web3/networkConfig'
+
+export const baseQuery = fetchBaseQuery({
+  baseUrl: networkConfig.blockchainApiUrl,
+  headers: {
+    Accept: 'application/json',
+  },
+})

src/redux/apiReducersList.ts

@@ -0,0 +1,9 @@
+import { transactionFeedV2Api } from 'src/transactions/api'
+
+export type ApiReducersKeys = keyof typeof apiReducersList
+
+export const apiReducersList = {
+  [transactionFeedV2Api.reducerPath]: transactionFeedV2Api.reducer,
+} as const
+
+export const apiMiddlewares = [transactionFeedV2Api.middleware]

src/redux/migrations.ts

@@ -1916,4 +1916,5 @@ export const migrations = {
     ...state,
     app: _.omit(state.app, 'numberVerified'),
   }),
+  233: (state: any) => state,
 }

src/redux/reducers.ts

@@ -1,61 +1,11 @@
-import { Action, combineReducers } from '@reduxjs/toolkit'
-import { PersistState } from 'redux-persist'
-import { Actions, ClearStoredAccountAction } from 'src/account/actions'
-import { reducer as account } from 'src/account/reducer'
-import { reducer as alert } from 'src/alert/reducer'
-import { appReducer as app } from 'src/app/reducers'
-import dappsReducer from 'src/dapps/slice'
-import earnReducer from 'src/earn/slice'
-import { reducer as fiatExchanges } from 'src/fiatExchanges/reducer'
-import fiatConnectReducer from 'src/fiatconnect/slice'
-import { homeReducer as home } from 'src/home/reducers'
-import i18nReducer from 'src/i18n/slice'
+import { type Action, combineReducers } from '@reduxjs/toolkit'
+import { type PersistState } from 'redux-persist'
+import { Actions, type ClearStoredAccountAction } from 'src/account/actions'
 import { reducer as identity } from 'src/identity/reducer'
-import { reducer as imports } from 'src/import/reducer'
-import jumpstartReducer from 'src/jumpstart/slice'
-import keylessBackupReducer from 'src/keylessBackup/slice'
-import { reducer as localCurrency } from 'src/localCurrency/reducer'
-import { reducer as networkInfo } from 'src/networkInfo/reducer'
-import nftsReducer from 'src/nfts/slice'
-import pointsReducer from 'src/points/slice'
-import positionsReducer from 'src/positions/slice'
-import priceHistoryReducer from 'src/priceHistory/slice'
-import { recipientsReducer as recipients } from 'src/recipients/reducer'
-import { sendReducer as send } from 'src/send/reducers'
-import swapReducer from 'src/swap/slice'
-import tokenReducer from 'src/tokens/slice'
-import { reducer as transactions } from 'src/transactions/reducer'
-import { reducer as walletConnect } from 'src/walletConnect/reducer'
-import { reducer as web3 } from 'src/web3/reducer'
+import { apiReducersList } from 'src/redux/apiReducersList'
+import { reducersList } from 'src/redux/reducersList'
 
-const appReducer = combineReducers({
-  app,
-  i18n: i18nReducer,
-  networkInfo,
-  alert,
-  send,
-  home,
-  transactions,
-  web3,
-  identity,
-  account,
-  recipients,
-  localCurrency,
-  imports,
-  fiatExchanges,
-  walletConnect,
-  tokens: tokenReducer,
-  dapps: dappsReducer,
-  fiatConnect: fiatConnectReducer,
-  swap: swapReducer,
-  positions: positionsReducer,
-  keylessBackup: keylessBackupReducer,
-  nfts: nftsReducer,
-  priceHistory: priceHistoryReducer,
-  jumpstart: jumpstartReducer,
-  points: pointsReducer,
-  earn: earnReducer,
-})
+const appReducer = combineReducers({ ...reducersList, ...apiReducersList })
 
 const rootReducer = (state: RootState | undefined, action: Action): RootState => {
   if (action.type === Actions.CLEAR_STORED_ACCOUNT && state) {

src/redux/reducersForSchemaGeneration.ts

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import { PersistState } from 'redux-persist'
+import { reducersList } from 'src/redux/reducersList'
+
+const reducerForSchemaGeneration = combineReducers(reducersList)
+export type RootStateForSchemaGeneration = ReturnType<typeof reducerForSchemaGeneration> & {
+  _persist: PersistState
+}

src/redux/reducersList.ts

@@ -0,0 +1,55 @@
+import { reducer as account } from 'src/account/reducer'
+import { reducer as alert } from 'src/alert/reducer'
+import { appReducer as app } from 'src/app/reducers'
+import dappsReducer from 'src/dapps/slice'
+import earnReducer from 'src/earn/slice'
+import { reducer as fiatExchanges } from 'src/fiatExchanges/reducer'
+import fiatConnectReducer from 'src/fiatconnect/slice'
+import { homeReducer as home } from 'src/home/reducers'
+import i18nReducer from 'src/i18n/slice'
+import { reducer as identity } from 'src/identity/reducer'
+import { reducer as imports } from 'src/import/reducer'
+import jumpstartReducer from 'src/jumpstart/slice'
+import keylessBackupReducer from 'src/keylessBackup/slice'
+import { reducer as localCurrency } from 'src/localCurrency/reducer'
+import { reducer as networkInfo } from 'src/networkInfo/reducer'
+import nftsReducer from 'src/nfts/slice'
+import pointsReducer from 'src/points/slice'
+import positionsReducer from 'src/positions/slice'
+import priceHistoryReducer from 'src/priceHistory/slice'
+import { recipientsReducer as recipients } from 'src/recipients/reducer'
+import { sendReducer as send } from 'src/send/reducers'
+import swapReducer from 'src/swap/slice'
+import tokenReducer from 'src/tokens/slice'
+import { reducer as transactions } from 'src/transactions/reducer'
+import { reducer as walletConnect } from 'src/walletConnect/reducer'
+import { reducer as web3 } from 'src/web3/reducer'
+
+export const reducersList = {
+  app,
+  i18n: i18nReducer,
+  networkInfo,
+  alert,
+  send,
+  home,
+  transactions,
+  web3,
+  identity,
+  account,
+  recipients,
+  localCurrency,
+  imports,
+  fiatExchanges,
+  walletConnect,
+  tokens: tokenReducer,
+  dapps: dappsReducer,
+  fiatConnect: fiatConnectReducer,
+  swap: swapReducer,
+  positions: positionsReducer,
+  keylessBackup: keylessBackupReducer,
+  nfts: nftsReducer,
+  priceHistory: priceHistoryReducer,
+  jumpstart: jumpstartReducer,
+  points: pointsReducer,
+  earn: earnReducer,
+} as const

src/redux/store.test.ts

@@ -1,7 +1,9 @@
 import Ajv from 'ajv'
 import { spawn, takeEvery } from 'redux-saga/effects'
+import { ApiReducersKeys, apiReducersList } from 'src/redux/apiReducersList'
 import * as createMigrateModule from 'src/redux/createMigrate'
 import { migrations } from 'src/redux/migrations'
+import { RootState } from 'src/redux/reducers'
 import { rootSaga } from 'src/redux/sagas'
 import { _persistConfig, setupStore } from 'src/redux/store'
 import * as accountCheckerModule from 'src/utils/accountChecker'
@@ -25,6 +27,16 @@ const resetStateOnInvalidStoredAccount = jest.spyOn(
 
 const loggerErrorSpy = jest.spyOn(Logger, 'error')
 
+function getNonApiReducers<R = Omit<RootState, ApiReducersKeys>>(state: RootState): R {
+  const apiReducersKeys: string[] = Object.keys(apiReducersList)
+  return Object.entries(state).reduce((acc, [reducerKey, value]) => {
+    const key = reducerKey as keyof R
+    if (apiReducersKeys.includes(reducerKey)) return acc
+    acc[key] = value as unknown as any
+    return acc
+  }, {} as R)
+}
+
 beforeEach(() => {
   jest.clearAllMocks()
   // For some reason createMigrate.mockRestore doesn't work, so instead we manually reset it to the original implementation
@@ -81,9 +93,9 @@ describe('store state', () => {
       })
     })
 
-    const data = store.getState()
+    const data = getNonApiReducers(store.getState())
 
-    const ajv = new Ajv({ allErrors: true })
+    const ajv = new Ajv({ allErrors: true, allowUnionTypes: true })
     const schema = require('test/RootStateSchema.json')
     const validate = ajv.compile(schema)
     const isValid = validate(data)
@@ -98,7 +110,7 @@ describe('store state', () => {
       {
         "_persist": {
           "rehydrated": true,
-          "version": 232,
+          "version": 233,
         },
         "account": {
           "acceptedTerms": false,

src/redux/store.ts

@@ -1,15 +1,18 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import { configureStore, Middleware } from '@reduxjs/toolkit'
+import { setupListeners } from '@reduxjs/toolkit/query'
 import { getStoredState, PersistConfig, persistReducer, persistStore } from 'redux-persist'
 import FSStorage from 'redux-persist-fs-storage'
 import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'
 import createSagaMiddleware from 'redux-saga'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { PerformanceEvents } from 'src/analytics/Events'
+import { apiMiddlewares } from 'src/redux/apiReducersList'
 import { createMigrate } from 'src/redux/createMigrate'
 import { migrations } from 'src/redux/migrations'
 import rootReducer, { RootState as ReducersRootState } from 'src/redux/reducers'
 import { rootSaga } from 'src/redux/sagas'
+import { transactionFeedV2Api } from 'src/transactions/api'
 import { resetStateOnInvalidStoredAccount } from 'src/utils/accountChecker'
 import Logger from 'src/utils/Logger'
 import { ONE_DAY_IN_MILLIS } from 'src/utils/time'
@@ -21,10 +24,17 @@ const persistConfig: PersistConfig<ReducersRootState> = {
   key: 'root',
   // default is -1, increment as we make migrations
   // See https://github.com/valora-inc/wallet/tree/main/WALLET.md#redux-state-migration
-  version: 232,
+  version: 233,
   keyPrefix: `reduxStore-`, // the redux-persist default is `persist:` which doesn't work with some file systems.
   storage: FSStorage(),
-  blacklist: ['networkInfo', 'alert', 'imports', 'keylessBackup', 'jumpstart'],
+  blacklist: [
+    'networkInfo',
+    'alert',
+    'imports',
+    'keylessBackup',
+    'jumpstart',
+    transactionFeedV2Api.reducerPath,
+  ],
   stateReconciler: autoMergeLevel2,
   migrate: async (...args) => {
     const migrate = createMigrate(migrations)
@@ -103,7 +113,8 @@ export const setupStore = (initialState?: ReducersRootState, config = persistCon
       )
     },
   })
-  const middlewares: Middleware[] = [sagaMiddleware]
+
+  const middlewares: Middleware[] = [sagaMiddleware, ...apiMiddlewares]
 
   if (__DEV__ && !process.env.JEST_WORKER_ID) {
     const createDebugger = require('redux-flipper').default
@@ -172,3 +183,5 @@ export { persistor, store }
 
 export type RootState = ReturnType<typeof store.getState>
 export type AppDispatch = typeof store.dispatch
+
+setupListeners(store.dispatch)

src/swap/SwapScreen.test.tsx

@@ -1328,6 +1328,9 @@ describe('SwapScreen', () => {
           status: 'started',
         },
       },
+
+      // as per test/utils.ts, line 105
+      transactionFeedV2Api: undefined,
     })
 
     update(
@@ -1373,6 +1376,9 @@ describe('SwapScreen', () => {
           status: 'error',
         },
       },
+
+      // as per test/utils.ts, line 105
+      transactionFeedV2Api: undefined,
     })
 
     update(

src/transactions/api.ts

@@ -0,0 +1,23 @@
+import { createApi } from '@reduxjs/toolkit/query/react'
+import { baseQuery } from 'src/redux/api'
+import type { TokenTransaction } from 'src/transactions/types'
+
+type TransactionFeedV2Response = {
+  transactions: TokenTransaction[]
+  pageInfo: {
+    hasNextPage: boolean
+  }
+}
+
+export const transactionFeedV2Api = createApi({
+  reducerPath: 'transactionFeedV2Api',
+  baseQuery,
+  endpoints: (builder) => ({
+    transactionFeedV2: builder.query<
+      TransactionFeedV2Response,
+      { address: string; endCursor: number }
+    >({
+      query: ({ address, endCursor }) => `/wallet/${address}/transactions?endCursor=${endCursor}`,
+    }),
+  }),
+})

src/transactions/apiTestHelpers.ts

@@ -0,0 +1,56 @@
+import type { EnhancedStore, Middleware, Reducer, UnknownAction } from '@reduxjs/toolkit'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import { ApiReducersKeys } from 'src/redux/apiReducersList'
+import { RootState } from 'src/redux/reducers'
+import { getMockStoreData, RecursivePartial } from 'test/utils'
+
+/**
+ * This function is taken from the Redux team. It creates a testable store that is compatible with RTK-Query.
+ * It is slightly modified to also include the preloaded state.
+ * https://github.com/reduxjs/redux-toolkit/blob/e7540a5594b0d880037f2ff41a83a32c629d3117/packages/toolkit/src/tests/utils/helpers.tsx#L186
+ *
+ * For more info on why this is needed and how it works - here's an article that answers some of the questions:
+ * https://medium.com/@johnmcdowell0801/testing-rtk-query-with-jest-cdfa5aaf3dc1
+ */
+export function setupApiStore<
+  A extends {
+    reducer: Reducer<any, any>
+    reducerPath: string
+    middleware: Middleware
+    util: { resetApiState(): any }
+  },
+  Preloaded extends RecursivePartial<Omit<RootState, ApiReducersKeys>>,
+  R extends Record<string, Reducer<any, any>> = Record<never, never>,
+>(api: A, preloadedState: Preloaded, extraReducers?: R) {
+  const getStore = () =>
+    configureStore({
+      preloadedState: getMockStoreData(preloadedState),
+      reducer: combineReducers({
+        [api.reducerPath]: api.reducer,
+        ...extraReducers,
+      }),
+      middleware: (getDefaultMiddleware) => {
+        return getDefaultMiddleware({
+          serializableCheck: false,
+          immutableCheck: false,
+        }).concat(api.middleware)
+      },
+    })
+
+  type StoreType = EnhancedStore<
+    {
+      api: ReturnType<A['reducer']>
+    } & {
+      [K in keyof R]: ReturnType<R[K]>
+    },
+    UnknownAction,
+    ReturnType<typeof getStore> extends EnhancedStore<any, any, infer M> ? M : never
+  >
+
+  const initialStore = getStore() as StoreType
+  const refObj = { api, store: initialStore }
+  const store = getStore() as StoreType
+  refObj.store = store
+
+  return refObj
+}

test/schema.test.ts

@@ -9,7 +9,7 @@ describe(getLatestSchema, () => {
   it('validates against the RootState schema', async () => {
     const data = getLatestSchema()
 
-    const ajv = new Ajv({ allErrors: true })
+    const ajv = new Ajv({ allErrors: true, allowUnionTypes: true })
     const schema = require('./RootStateSchema.json')
     const validate = ajv.compile(schema)
     const isValid = validate(data)