Fix race condition when replacing/cancelling on-chain txs

src/custom/state/enhancedTransactions/reducer.ts

@@ -39,7 +39,10 @@ export interface EnhancedTransactionDetails {
 
   // Wallet specific
   safeTransaction?: SafeMultisigTransactionResponse // Gnosis Safe transaction info
+
+  // Cancelling/Replacing
   replacementType?: ReplacementType // if the user cancelled or speedup the tx it will be reflected here
+  linkedTransactionHash?: string
 }
 
 export interface EnhancedTransactionState {
@@ -113,22 +116,33 @@ export default createReducer(initialState, (builder) =>
       }
       tx.receipt = receipt
       tx.confirmedTime = now()
+
+      if (tx.linkedTransactionHash) {
+        delete transactions[chainId]?.[tx.linkedTransactionHash]
+      }
     })
 
     .addCase(replaceTransaction, (transactions, { payload: { chainId, oldHash, newHash, type } }) => {
-      if (!transactions[chainId]?.[oldHash]) {
+      const allTxs = transactions[chainId] ?? {}
+      if (!allTxs[oldHash]) {
         console.error('Attempted to replace an unknown transaction.')
         return
       }
-      const allTxs = transactions[chainId] ?? {}
+
+      if (allTxs[newHash]) {
+        return
+      }
+
       allTxs[newHash] = {
         ...allTxs[oldHash],
         hash: newHash,
         transactionHash: newHash,
         addedTime: new Date().getTime(),
         replacementType: type,
+        linkedTransactionHash: oldHash,
       }
-      delete allTxs[oldHash]
+
+      allTxs[oldHash].linkedTransactionHash = newHash
     })
 
     .addCase(updateSafeTransaction, (transactions, { payload: { chainId, safeTransaction, blockNumber } }) => {

src/custom/state/enhancedTransactions/updater/CancelReplaceTxUpdater.tsx

@@ -60,7 +60,7 @@ export default function CancelReplaceTxUpdater(): null {
   useEffect(() => {
     if (!chainId || !library) return
 
-    // Watch the mempool for cancelation/replacement of tx
+    // Watch the mempool for cancellation/replacement of tx
     watchTxChanges(pendingHashes, chainId, dispatch)
 
     return () => {