feat: Temporarily hide Approve redesigned pages

app/scripts/lib/transaction/metrics.ts

@@ -1,27 +1,15 @@
-import { isHexString } from 'ethereumjs-util';
 import EthQuery, { Provider } from '@metamask/eth-query';
-import { BigNumber } from 'bignumber.js';
 import { FetchGasFeeEstimateOptions } from '@metamask/gas-fee-controller';
+import { BigNumber } from 'bignumber.js';
+import { isHexString } from 'ethereumjs-util';
 
+import { SmartTransaction } from '@metamask/smart-transactions-controller/dist/types';
 import {
   TransactionMeta,
   TransactionType,
 } from '@metamask/transaction-controller';
-import { SmartTransaction } from '@metamask/smart-transactions-controller/dist/types';
 import { ORIGIN_METAMASK } from '../../../../shared/constants/app';
-import {
-  determineTransactionAssetType,
-  isEIP1559Transaction,
-} from '../../../../shared/modules/transaction.utils';
-import {
-  hexWEIToDecETH,
-  hexWEIToDecGWEI,
-} from '../../../../shared/modules/conversion.utils';
-import {
-  TokenStandard,
-  TransactionApprovalAmountType,
-  TransactionMetaMetricsEvent,
-} from '../../../../shared/constants/transaction';
+import { GasRecommendations } from '../../../../shared/constants/gas';
 import {
   MetaMetricsEventCategory,
   MetaMetricsEventFragment,
@@ -30,22 +18,37 @@ import {
   MetaMetricsPageObject,
   MetaMetricsReferrerObject,
 } from '../../../../shared/constants/metametrics';
-import { GasRecommendations } from '../../../../shared/constants/gas';
+import {
+  TokenStandard,
+  TransactionApprovalAmountType,
+  TransactionMetaMetricsEvent,
+} from '../../../../shared/constants/transaction';
 import {
   calcGasTotal,
   getSwapsTokensReceivedFromTxMeta,
   TRANSACTION_ENVELOPE_TYPE_NAMES,
 } from '../../../../shared/lib/transactions-controller-utils';
+import {
+  hexWEIToDecETH,
+  hexWEIToDecGWEI,
+} from '../../../../shared/modules/conversion.utils';
+import { getSmartTransactionMetricsProperties } from '../../../../shared/modules/metametrics';
+import {
+  determineTransactionAssetType,
+  isEIP1559Transaction,
+} from '../../../../shared/modules/transaction.utils';
 import {
   getBlockaidMetricsProps,
   getSwapAndSendMetricsProps,
 } from '../../../../ui/helpers/utils/metrics';
-import { getSmartTransactionMetricsProperties } from '../../../../shared/modules/metametrics';
+import {
+  REDESIGN_DEV_TRANSACTION_TYPES,
+  REDESIGN_USER_TRANSACTION_TYPES,
+} from '../../../../ui/pages/confirmations/utils';
 import {
   getSnapAndHardwareInfoForMetrics,
   type SnapAndHardwareMessenger,
 } from '../snap-keyring/metrics';
-import { REDESIGN_TRANSACTION_TYPES } from '../../../../ui/pages/confirmations/utils';
 
 export type TransactionMetricsRequest = {
   createEventFragment: (
@@ -1003,9 +1006,14 @@ async function buildEventFragmentProperties({
     transactionMetricsRequest.getRedesignedTransactionsEnabled();
 
   if (
-    (isRedesignedConfirmationsDeveloperSettingEnabled ||
-      isRedesignedTransactionsUserSettingEnabled) &&
-    REDESIGN_TRANSACTION_TYPES.includes(transactionMeta.type as TransactionType)
+    (isRedesignedConfirmationsDeveloperSettingEnabled &&
+      REDESIGN_DEV_TRANSACTION_TYPES.includes(
+        transactionMeta.type as TransactionType,
+      )) ||
+    (isRedesignedTransactionsUserSettingEnabled &&
+      REDESIGN_USER_TRANSACTION_TYPES.includes(
+        transactionMeta.type as TransactionType,
+      ))
   ) {
     uiCustomizations.push(
       MetaMetricsEventUiCustomization.RedesignedConfirmation,

test/e2e/tests/confirmations/alerts/insufficient-funds.spec.ts

@@ -14,7 +14,7 @@ import {
 } from '../transactions/shared';
 import { Driver } from '../../../webdriver/driver';
 
-describe('Alert for insufficient funds', function () {
+describe('Alert for insufficient funds @no-mmi', function () {
   it('Shows an alert when the user tries to send a transaction with insufficient funds', async function () {
     const nftSmartContract = SMART_CONTRACTS.NFTS;
     const ganacheOptions = {

ui/pages/confirmations/components/confirm/footer/footer.tsx

@@ -25,7 +25,7 @@ import {
   updateAndApproveTx,
 } from '../../../../../store/actions';
 import { confirmSelector } from '../../../selectors';
-import { REDESIGN_TRANSACTION_TYPES } from '../../../utils';
+import { REDESIGN_DEV_TRANSACTION_TYPES } from '../../../utils';
 import { getConfirmationSender } from '../utils';
 
 const ConfirmButton = ({
@@ -130,7 +130,7 @@ const Footer = () => {
       return;
     }
 
-    const isTransactionConfirmation = REDESIGN_TRANSACTION_TYPES.find(
+    const isTransactionConfirmation = REDESIGN_DEV_TRANSACTION_TYPES.find(
       (type) => type === currentConfirmation?.type,
     );
     if (isTransactionConfirmation) {

ui/pages/confirmations/components/confirm/header/header-info.tsx

@@ -48,8 +48,10 @@ import { useBalance } from '../../../hooks/useBalance';
 import useConfirmationRecipientInfo from '../../../hooks/useConfirmationRecipientInfo';
 import { selectConfirmationAdvancedDetailsOpen } from '../../../selectors/preferences';
 import { SignatureRequestType } from '../../../types/confirm';
-import { REDESIGN_TRANSACTION_TYPES } from '../../../utils';
-import { isSignatureTransactionType } from '../../../utils/confirm';
+import {
+  isSignatureTransactionType,
+  REDESIGN_DEV_TRANSACTION_TYPES,
+} from '../../../utils/confirm';
 
 const HeaderInfo = () => {
   const dispatch = useDispatch();
@@ -100,7 +102,7 @@ const HeaderInfo = () => {
     trackEvent(event);
   }
 
-  const isShowAdvancedDetailsToggle = REDESIGN_TRANSACTION_TYPES.includes(
+  const isShowAdvancedDetailsToggle = REDESIGN_DEV_TRANSACTION_TYPES.includes(
     currentConfirmation?.type as TransactionType,
   );
 

ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts

@@ -1,26 +1,26 @@
-import { useSelector } from 'react-redux';
-import { useMemo } from 'react';
 import {
   TransactionMeta,
   TransactionType,
 } from '@metamask/transaction-controller';
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { RowAlertKey } from '../../../../../components/app/confirm/info/row/constants';
+import { Alert } from '../../../../../ducks/confirm-alerts/confirm-alerts';
+import { Severity } from '../../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import {
   currentConfirmationSelector,
   submittedPendingTransactionsSelector,
 } from '../../../../../selectors';
-import { useI18nContext } from '../../../../../hooks/useI18nContext';
-import { Alert } from '../../../../../ducks/confirm-alerts/confirm-alerts';
-import { Severity } from '../../../../../helpers/constants/design-system';
-import { REDESIGN_TRANSACTION_TYPES } from '../../../utils';
-import { RowAlertKey } from '../../../../../components/app/confirm/info/row/constants';
+import { REDESIGN_DEV_TRANSACTION_TYPES } from '../../../utils';
 
 export function usePendingTransactionAlerts(): Alert[] {
   const t = useI18nContext();
   const currentConfirmation = useSelector(currentConfirmationSelector);
   const { type } = currentConfirmation ?? ({} as TransactionMeta);
   const pendingTransactions = useSelector(submittedPendingTransactionsSelector);
 
-  const isValidType = REDESIGN_TRANSACTION_TYPES.includes(
+  const isValidType = REDESIGN_DEV_TRANSACTION_TYPES.includes(
     type as TransactionType,
   );
 

ui/pages/confirmations/hooks/alerts/transactions/useSigningOrSubmittingAlerts.ts

@@ -1,17 +1,17 @@
-import { useSelector } from 'react-redux';
-import { useMemo } from 'react';
 import {
   TransactionMeta,
   TransactionType,
 } from '@metamask/transaction-controller';
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { Alert } from '../../../../../ducks/confirm-alerts/confirm-alerts';
+import { Severity } from '../../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import {
   currentConfirmationSelector,
   getApprovedAndSignedTransactions,
 } from '../../../../../selectors';
-import { Severity } from '../../../../../helpers/constants/design-system';
-import { useI18nContext } from '../../../../../hooks/useI18nContext';
-import { Alert } from '../../../../../ducks/confirm-alerts/confirm-alerts';
-import { REDESIGN_TRANSACTION_TYPES } from '../../../utils';
+import { REDESIGN_DEV_TRANSACTION_TYPES } from '../../../utils';
 
 export function useSigningOrSubmittingAlerts(): Alert[] {
   const t = useI18nContext();
@@ -22,7 +22,7 @@ export function useSigningOrSubmittingAlerts(): Alert[] {
     getApprovedAndSignedTransactions,
   );
 
-  const isValidType = REDESIGN_TRANSACTION_TYPES.includes(
+  const isValidType = REDESIGN_DEV_TRANSACTION_TYPES.includes(
     type as TransactionType,
   );
 

ui/pages/confirmations/hooks/alerts/useBlockaidAlerts.ts

@@ -1,38 +1,38 @@
+import BlockaidPackage from '@blockaid/ppom_release/package.json';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import BlockaidPackage from '@blockaid/ppom_release/package.json';
 
 import {
   TransactionMeta,
   TransactionType,
 } from '@metamask/transaction-controller';
+import { NETWORK_TO_NAME_MAP } from '../../../../../shared/constants/network';
 import {
   BlockaidResultType,
   FALSE_POSITIVE_REPORT_BASE_URL,
   SECURITY_PROVIDER_UTM_SOURCE,
 } from '../../../../../shared/constants/security-provider';
-import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
-import { NETWORK_TO_NAME_MAP } from '../../../../../shared/constants/network';
 import { Alert } from '../../../../ducks/confirm-alerts/confirm-alerts';
-import { getCurrentChainId } from '../../../../selectors';
+import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import {
-  REDESIGN_TRANSACTION_TYPES,
-  SIGNATURE_TRANSACTION_TYPES,
-} from '../../utils';
+import { getCurrentChainId } from '../../../../selectors';
 import {
   currentConfirmationSelector,
   currentSignatureRequestSecurityResponseSelector,
 } from '../../selectors';
 import { SecurityAlertResponse } from '../../types/confirm';
+import {
+  REDESIGN_DEV_TRANSACTION_TYPES,
+  SIGNATURE_TRANSACTION_TYPES,
+} from '../../utils';
 import { normalizeProviderAlert } from './utils';
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
 const zlib = require('zlib');
 
 const SUPPORTED_TRANSACTION_TYPES = [
   ...SIGNATURE_TRANSACTION_TYPES,
-  ...REDESIGN_TRANSACTION_TYPES,
+  ...REDESIGN_DEV_TRANSACTION_TYPES,
 ];
 
 const IGNORED_RESULT_TYPES = [

ui/pages/confirmations/hooks/useConfirmationAlertMetrics.ts

@@ -2,10 +2,10 @@ import { TransactionType } from '@metamask/transaction-controller';
 import { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { validate as isUuid } from 'uuid';
-import useAlerts from '../../../hooks/useAlerts';
-import { REDESIGN_TRANSACTION_TYPES } from '../utils';
 import { Alert } from '../../../ducks/confirm-alerts/confirm-alerts';
+import useAlerts from '../../../hooks/useAlerts';
 import { confirmSelector } from '../../../selectors';
+import { REDESIGN_DEV_TRANSACTION_TYPES } from '../utils';
 import { AlertsName } from './alerts/constants';
 import { useTransactionEventFragment } from './useTransactionEventFragment';
 
@@ -57,7 +57,7 @@ export function useConfirmationAlertMetrics() {
     });
 
   // Temporary measure to track metrics only for redesign transaction types
-  const isValidType = REDESIGN_TRANSACTION_TYPES.includes(
+  const isValidType = REDESIGN_DEV_TRANSACTION_TYPES.includes(
     currentConfirmation?.type as TransactionType,
   );
 

ui/pages/confirmations/hooks/useCurrentConfirmation.ts

@@ -15,7 +15,11 @@ import {
   latestPendingConfirmationSelector,
   selectPendingApproval,
 } from '../../../selectors';
-import { REDESIGN_APPROVAL_TYPES, REDESIGN_TRANSACTION_TYPES } from '../utils';
+import {
+  REDESIGN_APPROVAL_TYPES,
+  REDESIGN_DEV_TRANSACTION_TYPES,
+  REDESIGN_USER_TRANSACTION_TYPES,
+} from '../utils';
 import { selectUnapprovedMessage } from '../../../selectors/signatures';
 import { isMMI } from '../../../helpers/utils/build-types';
 
@@ -61,10 +65,15 @@ const useCurrentConfirmation = () => {
     selectUnapprovedMessage(state, confirmationId),
   );
 
-  const isCorrectTransactionType = REDESIGN_TRANSACTION_TYPES.includes(
+  const isCorrectUserTransactionType = REDESIGN_USER_TRANSACTION_TYPES.includes(
     transactionMetadata?.type as TransactionType,
   );
 
+  const isCorrectDeveloperTransactionType =
+    REDESIGN_DEV_TRANSACTION_TYPES.includes(
+      transactionMetadata?.type as TransactionType,
+    );
+
   const isCorrectApprovalType = REDESIGN_APPROVAL_TYPES.includes(
     pendingApproval?.type as ApprovalType,
   );
@@ -74,19 +83,20 @@ const useCurrentConfirmation = () => {
     (isRedesignedConfirmationsDeveloperSettingEnabled && isCorrectApprovalType);
 
   const shouldUseRedesignForTransactions =
-    (!isMMI() &&
-      isRedesignedTransactionsUserSettingEnabled &&
-      isCorrectTransactionType) ||
+    (isRedesignedTransactionsUserSettingEnabled &&
+      isCorrectUserTransactionType) ||
     (isRedesignedConfirmationsDeveloperSettingEnabled &&
-      isCorrectTransactionType);
+      isCorrectDeveloperTransactionType);
 
   // If the developer toggle or the build time environment variable are enabled,
   // all the signatures and transactions in development are shown. If the user
   // facing feature toggles for signature or transactions are enabled, we show
   // only confirmations that shipped (contained in `REDESIGN_APPROVAL_TYPES` and
-  // `REDESIGN_TRANSACTION_TYPES` respectively).
+  // `REDESIGN_USER_TRANSACTION_TYPES` or `REDESIGN_DEV_TRANSACTION_TYPES`
+  // respectively).
   const shouldUseRedesign =
-    shouldUseRedesignForSignatures || shouldUseRedesignForTransactions;
+    shouldUseRedesignForSignatures ||
+    (!isMMI() && shouldUseRedesignForTransactions);
 
   return useMemo(() => {
     if (!shouldUseRedesign) {

ui/pages/confirmations/utils/confirm.ts

@@ -16,12 +16,16 @@ export const REDESIGN_APPROVAL_TYPES = [
   ApprovalType.PersonalSign,
 ];
 
-export const REDESIGN_TRANSACTION_TYPES = [
+export const REDESIGN_USER_TRANSACTION_TYPES = [
   TransactionType.contractInteraction,
-  TransactionType.tokenMethodApprove,
   TransactionType.deployContract,
 ];
 
+export const REDESIGN_DEV_TRANSACTION_TYPES = [
+  ...REDESIGN_USER_TRANSACTION_TYPES,
+  TransactionType.tokenMethodApprove,
+];
+
 const SIGNATURE_APPROVAL_TYPES = [
   ApprovalType.PersonalSign,
   ApprovalType.EthSignTypedData,