Fix a redux error from passing a BigNumber to the store

src/state/transactions/actions.ts

-import { TransactionReceipt } from '@ethersproject/providers'
 import { createAction } from '@reduxjs/toolkit'
 
+export interface SerializableTransactionReceipt {
+  to: string
+  from: string
+  contractAddress: string
+  transactionIndex: number
+  blockHash: string
+  transactionHash: string
+  blockNumber: number
+  status?: number
+}
+
 export const addTransaction = createAction<{
   chainId: number
   hash: string
@@ -8,6 +18,8 @@ export const addTransaction = createAction<{
   summary?: string
 }>('addTransaction')
 export const checkTransaction = createAction<{ chainId: number; hash: string; blockNumber: number }>('checkTransaction')
-export const finalizeTransaction = createAction<{ chainId: number; hash: string; receipt: TransactionReceipt }>(
-  'finalizeTransaction'
-)
+export const finalizeTransaction = createAction<{
+  chainId: number
+  hash: string
+  receipt: SerializableTransactionReceipt
+}>('finalizeTransaction')

src/state/transactions/hooks.tsx

@@ -36,7 +36,22 @@ export function Updater() {
                 if (!receipt) {
                   dispatch(checkTransaction({ chainId, hash, blockNumber: globalBlockNumber }))
                 } else {
-                  dispatch(finalizeTransaction({ chainId, hash, receipt }))
+                  dispatch(
+                    finalizeTransaction({
+                      chainId,
+                      hash,
+                      receipt: {
+                        blockHash: receipt.blockHash,
+                        blockNumber: receipt.blockNumber,
+                        contractAddress: receipt.contractAddress,
+                        from: receipt.from,
+                        status: receipt.status,
+                        to: receipt.to,
+                        transactionHash: receipt.transactionHash,
+                        transactionIndex: receipt.transactionIndex
+                      }
+                    })
+                  )
                   // add success or failure popup
                   if (receipt.status === 1) {
                     addPopup({

src/state/transactions/reducer.ts

-import { TransactionReceipt } from '@ethersproject/providers'
 import { createReducer } from '@reduxjs/toolkit'
-import { addTransaction, checkTransaction, finalizeTransaction } from './actions'
+import { addTransaction, checkTransaction, finalizeTransaction, SerializableTransactionReceipt } from './actions'
 
 export interface TransactionDetails {
   approvalOfToken?: string
   blockNumberChecked?: number
   summary?: string
-  receipt?: TransactionReceipt
+  receipt?: SerializableTransactionReceipt
 }
 
 export interface TransactionState {