Handle cancel state for ethereum txs (#1532)

* Fix code style issues with Prettier * handle cancel state for ethereum txs * change type format * make Cancelled be set first instead of Confirmed Co-authored-by: Lint Action <[email protected]>
gnosis · Nov 23, 2021 · 02fd6cb · 02fd6cb
1 parent 8573162
commit 02fd6cb
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 29 deletions.
diff --git a/src/custom/hooks/useRecentActivity.ts b/src/custom/hooks/useRecentActivity.ts
@@ -167,12 +167,12 @@ function createActivityDescriptor(tx?: EnhancedTransactionDetails, order?: Order
 
     const isReceiptConfirmed =
       tx.receipt?.status === TxReceiptStatus.CONFIRMED || typeof tx.receipt?.status === 'undefined'
+    const isCancelTx = tx?.replacementType === 'cancel'
     isPending = !tx.receipt
     isPresignaturePending = false
     isConfirmed = !isPending && isReceiptConfirmed
-    // TODO: can't tell when it's cancelled from the network yet
-    isCancelling = false
-    isCancelled = false
+    isCancelling = isCancelTx && isPending
+    isCancelled = isCancelTx && !isPending && isReceiptConfirmed
 
     activity = tx
     type = ActivityType.TX
@@ -191,10 +191,10 @@ function createActivityDescriptor(tx?: EnhancedTransactionDetails, order?: Order
     status = ActivityStatus.PENDING
   } else if (isPresignaturePending) {
     status = ActivityStatus.PRESIGNATURE_PENDING
-  } else if (isConfirmed) {
-    status = ActivityStatus.CONFIRMED
   } else if (isCancelled) {
     status = ActivityStatus.CANCELLED
+  } else if (isConfirmed) {
+    status = ActivityStatus.CONFIRMED
   } else {
     status = ActivityStatus.EXPIRED
   }

diff --git a/src/custom/state/enhancedTransactions/actions.ts b/src/custom/state/enhancedTransactions/actions.ts
@@ -28,15 +28,13 @@ export const checkedTransaction = createAction<{
   blockNumber: number
 }>('enhancedTransactions/checkedTransaction')
 
-export const cancelTransaction = createAction<{
-  chainId: number
-  hash: string
-}>('enhancedTransactions/cancelTransaction')
+export type ReplacementType = 'speedup' | 'cancel'
 
 export const replaceTransaction = createAction<{
   chainId: number
   oldHash: string
   newHash: string
+  type: ReplacementType
 }>('enhancedTransactions/replaceTransaction')
 
 export const updateSafeTransaction = createAction<{

diff --git a/src/custom/state/enhancedTransactions/reducer.ts b/src/custom/state/enhancedTransactions/reducer.ts
@@ -4,9 +4,9 @@ import {
   clearAllTransactions,
   checkedTransaction,
   finalizeTransaction,
-  cancelTransaction,
   replaceTransaction,
   updateSafeTransaction,
+  ReplacementType,
 } from 'state/enhancedTransactions/actions'
 import { SafeMultisigTransactionResponse } from '@gnosis.pm/safe-service-client'
 import { SerializableTransactionReceipt } from '@src/state/transactions/actions'
@@ -37,6 +37,7 @@ export interface EnhancedTransactionDetails {
 
   // Wallet specific
   safeTransaction?: SafeMultisigTransactionResponse // Gnosis Safe transaction info
+  replacementType?: ReplacementType // if the user cancelled or speedup the tx it will be reflected here
 }
 
 export interface EnhancedTransactionState {
@@ -107,22 +108,19 @@ export default createReducer(initialState, (builder) =>
       tx.confirmedTime = now()
     })
 
-    .addCase(cancelTransaction, (transactions, { payload: { chainId, hash } }) => {
-      if (!transactions[chainId]?.[hash]) {
-        console.error('Attempted to cancel an unknown transaction.')
-        return
-      }
-      const allTxs = transactions[chainId] ?? {}
-      delete allTxs[hash]
-    })
-
-    .addCase(replaceTransaction, (transactions, { payload: { chainId, oldHash, newHash } }) => {
+    .addCase(replaceTransaction, (transactions, { payload: { chainId, oldHash, newHash, type } }) => {
       if (!transactions[chainId]?.[oldHash]) {
         console.error('Attempted to replace an unknown transaction.')
         return
       }
       const allTxs = transactions[chainId] ?? {}
-      allTxs[newHash] = { ...allTxs[oldHash], hash: newHash, transactionHash: newHash, addedTime: new Date().getTime() }
+      allTxs[newHash] = {
+        ...allTxs[oldHash],
+        hash: newHash,
+        transactionHash: newHash,
+        addedTime: new Date().getTime(),
+        replacementType: type,
+      }
       delete allTxs[oldHash]
     })
 

diff --git a/src/custom/state/enhancedTransactions/updater/CancelReplaceTxUpdater.tsx b/src/custom/state/enhancedTransactions/updater/CancelReplaceTxUpdater.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { useAppDispatch } from 'state/hooks'
 import { useActiveWeb3React } from 'hooks/web3'
 import { sdk } from 'utils/blocknative'
-import { cancelTransaction, replaceTransaction } from 'state/enhancedTransactions/actions'
+import { replaceTransaction } from 'state/enhancedTransactions/actions'
 import { useAllTransactionHashes } from 'state/enhancedTransactions/hooks'
 import { Dispatch } from 'redux'
 
@@ -17,19 +17,16 @@ function watchTxChanges(pendingHashes: string[], chainId: number, dispatch: Disp
 
       const { emitter } = blocknativeSdk.transaction(hash)
       const currentHash = hash
-      let isSpeedup = false
 
       emitter.on('txSpeedUp', (e) => {
-        isSpeedup = true
         if ('hash' in e && typeof e.hash === 'string') {
-          dispatch(replaceTransaction({ chainId, oldHash: currentHash, newHash: e.hash }))
+          dispatch(replaceTransaction({ chainId, oldHash: currentHash, newHash: e.hash, type: 'speedup' }))
         }
       })
 
-      emitter.on('txConfirmed', (e) => {
-        // canceled txs are automatically watched by bnc so if the confirmed tx hash is different than the previously tracked one, it means the user sent a cancel tx
-        if ('hash' in e && e.hash !== currentHash && !isSpeedup) {
-          dispatch(cancelTransaction({ chainId, hash: currentHash }))
+      emitter.on('txCancel', (e) => {
+        if ('hash' in e && typeof e.hash === 'string') {
+          dispatch(replaceTransaction({ chainId, oldHash: currentHash, newHash: e.hash, type: 'cancel' }))
         }
       })
     } catch (error) {