Disable STX if a regular tx is in progress (#14554)

* Disable STX if a regular tx is in progress

* disableStxIfRegularTxInProgress : early return

* Fix UTs

* Trigger Build

shared/constants/transaction.js

@@ -133,6 +133,17 @@ export const TRANSACTION_STATUSES = {
   PENDING: 'pending',
 };
 
+/**
+ * With this list we can detect if a transaction is still in progress.
+ */
+export const IN_PROGRESS_TRANSACTION_STATUSES = [
+  TRANSACTION_STATUSES.UNAPPROVED,
+  TRANSACTION_STATUSES.APPROVED,
+  TRANSACTION_STATUSES.SIGNED,
+  TRANSACTION_STATUSES.SUBMITTED,
+  TRANSACTION_STATUSES.PENDING,
+];
+
 /**
  * Transaction Group Status is a MetaMask construct to track the status of groups
  * of transactions.
@@ -159,6 +170,7 @@ export const TRANSACTION_GROUP_STATUSES = {
  * @typedef {Object} SmartTransactionStatuses
  * @property {'cancelled'} CANCELLED - It can be cancelled for various reasons.
  * @property {'pending'} PENDING - Smart transaction is being processed.
+ * @property {'success'} SUCCESS - Smart transaction was successfully mined.
  */
 
 /**

ui/ducks/swaps/swaps.js

@@ -84,7 +84,7 @@ import {
 } from '../../../shared/constants/swaps';
 import {
   TRANSACTION_TYPES,
-  TRANSACTION_STATUSES,
+  IN_PROGRESS_TRANSACTION_STATUSES,
   SMART_TRANSACTION_STATUSES,
 } from '../../../shared/constants/transaction';
 import { getGasFeeEstimates } from '../metamask/metamask';
@@ -554,6 +554,20 @@ export const fetchAndSetSwapsGasPriceInfo = () => {
   };
 };
 
+const disableStxIfRegularTxInProgress = (dispatch, transactions) => {
+  if (transactions?.length <= 0) {
+    return;
+  }
+  for (const transaction of transactions) {
+    if (IN_PROGRESS_TRANSACTION_STATUSES.includes(transaction.status)) {
+      dispatch(
+        setCurrentSmartTransactionsError(stxErrorTypes.REGULAR_TX_IN_PROGRESS),
+      );
+      break;
+    }
+  }
+};
+
 export const fetchSwapsLivenessAndFeatureFlags = () => {
   return async (dispatch, getState) => {
     let swapsLivenessForNetwork = {
@@ -566,17 +580,12 @@ export const fetchSwapsLivenessAndFeatureFlags = () => {
       await dispatch(setSwapsFeatureFlags(swapsFeatureFlags));
       if (ALLOWED_SMART_TRANSACTIONS_CHAIN_IDS.includes(chainId)) {
         await dispatch(fetchSmartTransactionsLiveness());
-        const pendingTransactions = await getTransactions({
+        const transactions = await getTransactions({
           searchCriteria: {
-            status: TRANSACTION_STATUSES.PENDING,
             from: state.metamask?.selectedAddress,
           },
         });
-        if (pendingTransactions?.length > 0) {
+        disableStxIfRegularTxInProgress(dispatch, transactions);
-          dispatch(
-            setCurrentSmartTransactionsError(stxErrorTypes.REGULAR_TX_PENDING),
-          );
-        }
       }
       swapsLivenessForNetwork = getSwapsLivenessForNetwork(
         swapsFeatureFlags,

ui/ducks/swaps/swaps.test.js

@@ -15,7 +15,9 @@ jest.mock('../../store/actions.js', () => ({
   setSwapsLiveness: jest.fn(),
   setSwapsFeatureFlags: jest.fn(),
   fetchSmartTransactionsLiveness: jest.fn(),
-  getTransactions: jest.fn(),
+  getTransactions: jest.fn(() => {
+    return [];
+  }),
 }));
 
 const providerState = {
@@ -62,7 +64,10 @@ describe('Ducks - Swaps', () => {
 
     const createGetState = () => {
       return () => ({
-        metamask: { provider: { ...providerState } },
+        metamask: {
+          provider: { ...providerState },
+          from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
+        },
       });
     };
 

ui/pages/swaps/index.js

@@ -358,8 +358,8 @@ export default function Swap() {
 
   const isStxNotEnoughFundsError =
     currentSmartTransactionsError === stxErrorTypes.NOT_ENOUGH_FUNDS;
-  const isStxRegularTxPendingError =
+  const isRegularTxInProgressError =
-    currentSmartTransactionsError === stxErrorTypes.REGULAR_TX_PENDING;
+    currentSmartTransactionsError === stxErrorTypes.REGULAR_TX_IN_PROGRESS;
 
   return (
     <div className="swaps">
@@ -423,7 +423,7 @@ export default function Swap() {
                       {t('stxUnavailable')}
                     </div>
                     <div>
-                      {isStxRegularTxPendingError
+                      {isRegularTxInProgressError
                         ? t('stxFallbackPendingTx')
                         : t('stxFallbackUnavailable')}
                     </div>

ui/pages/swaps/swaps.util.js

@@ -933,13 +933,13 @@ export const showRemainingTimeInMinAndSec = (remainingTimeInSec) => {
 export const stxErrorTypes = {
   UNAVAILABLE: 'unavailable',
   NOT_ENOUGH_FUNDS: 'not_enough_funds',
-  REGULAR_TX_PENDING: 'regular_tx_pending',
+  REGULAR_TX_IN_PROGRESS: 'regular_tx_pending',
 };
 
 export const getTranslatedStxErrorMessage = (errorType, t) => {
   switch (errorType) {
     case stxErrorTypes.UNAVAILABLE:
-    case stxErrorTypes.REGULAR_TX_PENDING:
+    case stxErrorTypes.REGULAR_TX_IN_PROGRESS:
       return t('stxErrorUnavailable');
     case stxErrorTypes.NOT_ENOUGH_FUNDS:
       return t('stxErrorNotEnoughFunds');