[FIX] Avoid canceling transactions after submission

app/components/Views/Approval/index.js

@@ -28,6 +28,13 @@ import AnalyticsV2 from '../../../util/analyticsV2';
 import { GAS_ESTIMATE_TYPES } from '@metamask/controllers';
 import { KEYSTONE_TX_CANCELED } from '../../../constants/error';
 import { ThemeContext, mockTheme } from '../../../util/theme';
+import {
+  TX_CANCELLED,
+  TX_CONFIRMED,
+  TX_FAILED,
+  TX_SUBMITTED,
+  TX_REJECTED,
+} from '../../../constants/transaction';
 
 const REVIEW = 'review';
 const EDIT = 'edit';
@@ -136,12 +143,30 @@ class Approval extends PureComponent {
     }
   };
 
+  isTxStatusCancellable = (transaction) => {
+    if (
+      transaction.status === TX_SUBMITTED ||
+      transaction.status === TX_REJECTED ||
+      transaction.status === TX_CONFIRMED ||
+      transaction.status === TX_CANCELLED ||
+      transaction.status === TX_FAILED
+    ) {
+      return false;
+    }
+    return true;
+  };
+
   handleAppStateChange = (appState) => {
     try {
       if (appState !== 'active') {
-        const { transaction } = this.props;
+        const { transaction, transactions } = this.props;
+        const currentTransaction = transactions.find(
+          (tx) => tx.id === transaction.id,
+        );
+
         transaction &&
           transaction.id &&
+          this.isTxStatusCancellable(currentTransaction) &&
           Engine.context.TransactionController.cancelTransaction(
             transaction.id,
           );

app/constants/transaction.ts

@@ -6,6 +6,10 @@ export const TX_SUBMITTED = 'submitted';
 export const TX_SIGNED = 'signed';
 export const TX_PENDING = 'pending';
 export const TX_CONFIRMED = 'confirmed';
+export const TX_CANCELLED = 'cancelled';
+export const TX_APPROVED = 'approved';
+export const TX_FAILED = 'failed';
+export const TX_REJECTED = 'rejected';
 
 // Values
 export const UINT256_BN_MAX_VALUE = new BN(2).pow(new BN(256)).sub(new BN(1));