chore(TransactionFeedV2): Re-write transactions reducer to slice (#6166)

### Description
11th PR for RET-1207. Rewrite of transactions `reducer.ts/actions.ts`
files to `slice.ts/selectors.ts`. Slice also requires all actions to get
arguments passed as a single `payload` object so needed to refactor all
the usages of the corresponding actions. For better review experience,
each action usage refactor was merged as a separate commit.

This rewrite is necessary to move a bunch of redux-related `useEffects`
from TransactionFeedV2 component to `extraReducers`.

Also, this rewrite doesn't change the implementation of
TransactionFeedV2 as it is already a bit of a big PR.

### Test plan
Re-use existing reducer.test.ts and rename it to slice.test.ts

### 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/earn/saga.ts

@@ -21,7 +21,7 @@ import { vibrateError } from 'src/styles/hapticFeedback'
 import { getTokenInfo } from 'src/tokens/saga'
 import { tokensByIdSelector } from 'src/tokens/selectors'
 import { TokenBalances, fetchTokenBalances } from 'src/tokens/slice'
-import { BaseStandbyTransaction } from 'src/transactions/actions'
+import { BaseStandbyTransaction } from 'src/transactions/slice'
 import {
   NetworkId,
   TokenTransactionTypeV2,

src/fiatExchanges/saga.test.ts

@@ -16,7 +16,7 @@ import { Screens } from 'src/navigator/Screens'
 import { AddressRecipient, RecipientType } from 'src/recipients/recipient'
 import { sendPayment, sendPaymentFailure, sendPaymentSuccess } from 'src/send/actions'
 import { tokensByCurrencySelector } from 'src/tokens/selectors'
-import { updateTransactions } from 'src/transactions/actions'
+import { updateTransactions } from 'src/transactions/slice'
 import {
   NetworkId,
   TokenTransaction,
@@ -270,7 +270,7 @@ describe(tagTxsWithProviderInfo, () => {
 
     await expectSaga(
       tagTxsWithProviderInfo,
-      updateTransactions(NetworkId['celo-alfajores'], transactions)
+      updateTransactions({ networkId: NetworkId['celo-alfajores'], transactions })
     )
       .provide([
         [select(providerLogosSelector), mockProviderLogos],

src/fiatExchanges/saga.ts

@@ -18,7 +18,7 @@ import { AddressRecipient, RecipientType, getDisplayName } from 'src/recipients/
 import { Actions as SendActions } from 'src/send/actions'
 import { TransactionDataInput } from 'src/send/types'
 import { CurrencyTokens, tokensByCurrencySelector } from 'src/tokens/selectors'
-import { Actions as TransactionActions, UpdateTransactionsAction } from 'src/transactions/actions'
+import { UpdateTransactionsPayload, updateTransactions } from 'src/transactions/slice'
 import { Network, TokenTransactionTypeV2 } from 'src/transactions/types'
 import Logger from 'src/utils/Logger'
 import { resolveCurrency } from 'src/utils/currencies'
@@ -129,7 +129,8 @@ export function* fetchTxHashesToProviderMapping() {
   return txHashesToProvider
 }
 
-export function* tagTxsWithProviderInfo({ transactions, networkId }: UpdateTransactionsAction) {
+export function* tagTxsWithProviderInfo(action: UpdateTransactionsPayload) {
+  const { transactions, networkId } = action.payload
   try {
     if (!transactions || !transactions.length || networkIdToNetwork[networkId] !== Network.Celo) {
       return
@@ -171,7 +172,7 @@ export function* watchBidaliPaymentRequests() {
 }
 
 function* watchNewFeedTransactions() {
-  yield* takeEvery(TransactionActions.UPDATE_TRANSACTIONS, safely(tagTxsWithProviderInfo))
+  yield* takeEvery(updateTransactions.type, safely(tagTxsWithProviderInfo))
 }
 
 export function* fiatExchangesSaga() {

src/fiatconnect/saga.ts

@@ -74,8 +74,8 @@ import { userLocationDataSelector } from 'src/networkInfo/selectors'
 import { tokenAmountInSmallestUnit } from 'src/tokens/saga'
 import { tokensByIdSelector } from 'src/tokens/selectors'
 import { TokenBalance } from 'src/tokens/slice'
-import { BaseStandbyTransaction } from 'src/transactions/actions'
 import { isTxPossiblyPending } from 'src/transactions/send'
+import { BaseStandbyTransaction } from 'src/transactions/slice'
 import { TokenTransactionTypeV2, newTransactionContext } from 'src/transactions/types'
 import Logger from 'src/utils/Logger'
 import { ensureError } from 'src/utils/ensureError'

src/home/saga.ts

@@ -11,7 +11,7 @@ import { fetchCurrentRate } from 'src/localCurrency/actions'
 import { executeShortcutSuccess } from 'src/positions/slice'
 import { withTimeout } from 'src/redux/sagas-helpers'
 import { fetchTokenBalances } from 'src/tokens/slice'
-import { Actions as TransactionActions } from 'src/transactions/actions'
+import { updateTransactions } from 'src/transactions/slice'
 import Logger from 'src/utils/Logger'
 import { safely } from 'src/utils/safely'
 import { getConnectedAccount } from 'src/web3/saga'
@@ -45,10 +45,7 @@ export function* watchRefreshBalances() {
     [Actions.REFRESH_BALANCES, executeShortcutSuccess.type],
     safely(withLoading(withTimeout(REFRESH_TIMEOUT, refreshBalances)))
   )
-  yield* takeLeading(
-    TransactionActions.UPDATE_TRANSACTIONS,
-    safely(withTimeout(REFRESH_TIMEOUT, refreshBalances))
-  )
+  yield* takeLeading(updateTransactions.type, safely(withTimeout(REFRESH_TIMEOUT, refreshBalances)))
 }
 
 function* fetchNotifications() {

src/jumpstart/saga.test.ts

@@ -7,8 +7,8 @@ import {
   throwError,
 } from 'redux-saga-test-plan/providers'
 import { fork } from 'redux-saga/effects'
-import { JumpstartEvents } from 'src/analytics/Events'
 import AppAnalytics from 'src/analytics/AppAnalytics'
+import { JumpstartEvents } from 'src/analytics/Events'
 import { jumpstartLinkHandler } from 'src/jumpstart/jumpstartLinkHandler'
 import {
   dispatchPendingERC20Transactions,
@@ -30,7 +30,7 @@ import {
   jumpstartReclaimSucceeded,
 } from 'src/jumpstart/slice'
 import { getDynamicConfigParams } from 'src/statsig'
-import { addStandbyTransaction } from 'src/transactions/actions'
+import { addStandbyTransaction } from 'src/transactions/slice'
 import { Network, NetworkId, TokenTransactionTypeV2 } from 'src/transactions/types'
 import Logger from 'src/utils/Logger'
 import { fetchWithTimeout } from 'src/utils/fetchWithTimeout'
@@ -44,13 +44,13 @@ import { createMockStore } from 'test/utils'
 import {
   mockAccount,
   mockAccount2,
+  mockAccountInvite,
   mockAccountInvitePrivKey,
   mockCusdAddress,
   mockCusdTokenBalance,
   mockCusdTokenId,
   mockNftAllFields,
   mockTokenBalances,
-  mockAccountInvite,
 } from 'test/values'
 import { Hash, TransactionReceipt, parseEventLogs } from 'viem'
 

src/jumpstart/saga.ts

@@ -27,7 +27,7 @@ import { StatsigDynamicConfigs } from 'src/statsig/types'
 import { vibrateError } from 'src/styles/hapticFeedback'
 import { tokensByIdSelector } from 'src/tokens/selectors'
 import { getTokenId } from 'src/tokens/utils'
-import { BaseStandbyTransaction, addStandbyTransaction } from 'src/transactions/actions'
+import { BaseStandbyTransaction, addStandbyTransaction } from 'src/transactions/slice'
 import { NetworkId, TokenTransactionTypeV2, newTransactionContext } from 'src/transactions/types'
 import Logger from 'src/utils/Logger'
 import { ensureError } from 'src/utils/ensureError'

src/redux/reducersList.ts

@@ -21,7 +21,7 @@ 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 transactionsReducer from 'src/transactions/slice'
 import { reducer as walletConnect } from 'src/walletConnect/reducer'
 import { reducer as web3 } from 'src/web3/reducer'
 
@@ -32,7 +32,7 @@ export const reducersList = {
   alert,
   send,
   home,
-  transactions,
+  transactions: transactionsReducer,
   web3,
   identity,
   account,

src/redux/sagas.ts

@@ -46,8 +46,8 @@ import { sentrySaga } from 'src/sentry/saga'
 import { swapSaga } from 'src/swap/saga'
 import { tokensSaga } from 'src/tokens/saga'
 import { setTokenBalances } from 'src/tokens/slice'
-import { Actions as TransactionActions } from 'src/transactions/actions'
 import { transactionSaga } from 'src/transactions/saga'
+import { updateTransactions } from 'src/transactions/slice'
 import Logger from 'src/utils/Logger'
 import { checkAccountExistenceSaga } from 'src/utils/accountChecker'
 import { walletConnectSaga } from 'src/walletConnect/saga'
@@ -62,7 +62,7 @@ const loggerPayloadBlocklist = [
   ImportActions.IMPORT_BACKUP_PHRASE,
   setPhoneRecipientCache.toString(),
   updateAppRecipientCache.toString(),
-  TransactionActions.UPDATE_TRANSACTIONS,
+  updateTransactions.type,
   setTokenBalances.type,
   fetchPriceHistorySuccess.type,
   rewardsSendersFetched.type,

src/send/saga.test.ts

@@ -4,8 +4,8 @@ import * as matchers from 'redux-saga-test-plan/matchers'
 import { EffectProviders, StaticProvider, throwError } from 'redux-saga-test-plan/providers'
 import { call } from 'redux-saga/effects'
 import { showError } from 'src/alert/actions'
-import { CeloExchangeEvents, SendEvents } from 'src/analytics/Events'
 import AppAnalytics from 'src/analytics/AppAnalytics'
+import { CeloExchangeEvents, SendEvents } from 'src/analytics/Events'
 import { ErrorMessages } from 'src/app/ErrorMessages'
 import { navigateBack, navigateHome } from 'src/navigator/NavigationService'
 import {
@@ -15,7 +15,7 @@ import {
   sendPaymentSuccess,
 } from 'src/send/actions'
 import { sendPaymentSaga } from 'src/send/saga'
-import { Actions as TransactionActions, addStandbyTransaction } from 'src/transactions/actions'
+import { addStandbyTransaction, transactionConfirmed } from 'src/transactions/slice'
 import { NetworkId, TokenTransactionTypeV2 } from 'src/transactions/types'
 import { publicClient } from 'src/viem'
 import { ViemWallet } from 'src/viem/getLockableWallet'
@@ -237,8 +237,8 @@ describe(sendPaymentSaga, () => {
       .call(getViemWallet, networkConfig.viemChain.celo, false)
       .put(sendPaymentFailure())
       .put(showError(ErrorMessages.SEND_PAYMENT_FAILED))
-      .not.put.actionType(TransactionActions.ADD_STANDBY_TRANSACTION)
-      .not.put.actionType(TransactionActions.TRANSACTION_CONFIRMED)
+      .not.put.actionType(addStandbyTransaction.type)
+      .not.put.actionType(transactionConfirmed.type)
       .run()
     expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.send_tx_start)
     expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.send_tx_error, {

src/send/saga.ts

@@ -15,7 +15,7 @@ import { SentryTransactionHub } from 'src/sentry/SentryTransactionHub'
 import { SentryTransaction } from 'src/sentry/SentryTransactions'
 import { getTokenInfo } from 'src/tokens/saga'
 import { fetchTokenBalances } from 'src/tokens/slice'
-import { BaseStandbyTransaction } from 'src/transactions/actions'
+import { BaseStandbyTransaction } from 'src/transactions/slice'
 import { TokenTransactionTypeV2, newTransactionContext } from 'src/transactions/types'
 import Logger from 'src/utils/Logger'
 import { ensureError } from 'src/utils/ensureError'

src/swap/saga.test.ts

@@ -9,7 +9,7 @@ import { getMultichainFeatures } from 'src/statsig'
 import { swapSubmitSaga } from 'src/swap/saga'
 import { swapCancel, swapError, swapStart, swapSuccess } from 'src/swap/slice'
 import { Field, SwapInfo } from 'src/swap/types'
-import { Actions, addStandbyTransaction } from 'src/transactions/actions'
+import { actions, addStandbyTransaction } from 'src/transactions/slice'
 import { Network, NetworkId, TokenTransactionTypeV2 } from 'src/transactions/types'
 import Logger from 'src/utils/Logger'
 import { publicClient } from 'src/viem'
@@ -575,7 +575,7 @@ describe(swapSubmitSaga, () => {
       )
       .not.put.like({
         action: {
-          type: Actions.ADD_STANDBY_TRANSACTION,
+          type: actions.addStandbyTransaction.type,
           transaction: {
             __typename: 'TokenApproval',
           },

src/swap/saga.ts

@@ -12,7 +12,7 @@ import { Field, SwapInfo } from 'src/swap/types'
 import { tokensByIdSelector } from 'src/tokens/selectors'
 import { TokenBalance, TokenBalances } from 'src/tokens/slice'
 import { getSupportedNetworkIdsForSwap } from 'src/tokens/utils'
-import { BaseStandbyTransaction } from 'src/transactions/actions'
+import { BaseStandbyTransaction } from 'src/transactions/slice'
 import {
   NetworkId,
   TokenTransactionTypeV2,

src/transactions/feed/TransactionFeed.tsx

@@ -21,7 +21,7 @@ import {
 import {
   confirmedStandbyTransactionsSelector,
   pendingStandbyTransactionsSelector,
-} from 'src/transactions/reducer'
+} from 'src/transactions/selectors'
 import { TokenTransaction, TransactionStatus } from 'src/transactions/types'
 import { groupFeedItemsInSections } from 'src/transactions/utils'