From 76e2e64ccb3a671962f3e60ea4f6fb8763f5dd1e Mon Sep 17 00:00:00 2001 From: Pedro Figueiredo Date: Tue, 27 Aug 2024 10:07:48 +0100 Subject: [PATCH 1/3] feat: Temporarily hide Approve redesigned pages --- app/scripts/lib/transaction/metrics.ts | 52 +++++++++++-------- .../components/confirm/footer/footer.tsx | 4 +- .../components/confirm/header/header-info.tsx | 8 +-- .../usePendingTransactionAlerts.ts | 16 +++--- .../useSigningOrSubmittingAlerts.ts | 14 ++--- .../hooks/alerts/useBlockaidAlerts.ts | 18 +++---- .../hooks/useConfirmationAlertMetrics.ts | 6 +-- .../hooks/useCurrentConfirmation.ts | 26 +++++++--- ui/pages/confirmations/utils/confirm.ts | 9 +++- 9 files changed, 89 insertions(+), 64 deletions(-) diff --git a/app/scripts/lib/transaction/metrics.ts b/app/scripts/lib/transaction/metrics.ts index 05c7c8d7652a..3177e2d74b26 100644 --- a/app/scripts/lib/transaction/metrics.ts +++ b/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, diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx index a3d3e1bbc71d..1d5bbd3c78b7 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.tsx +++ b/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) { diff --git a/ui/pages/confirmations/components/confirm/header/header-info.tsx b/ui/pages/confirmations/components/confirm/header/header-info.tsx index b1b4a46e93ab..b0ba57241149 100644 --- a/ui/pages/confirmations/components/confirm/header/header-info.tsx +++ b/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, ); diff --git a/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts b/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts index 18f1e17c6404..87960ef4cfec 100644 --- a/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts +++ b/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts @@ -1,18 +1,18 @@ -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(); @@ -20,7 +20,7 @@ export function usePendingTransactionAlerts(): Alert[] { 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, ); diff --git a/ui/pages/confirmations/hooks/alerts/transactions/useSigningOrSubmittingAlerts.ts b/ui/pages/confirmations/hooks/alerts/transactions/useSigningOrSubmittingAlerts.ts index c7dd3d8a0d39..3479ce8fd0da 100644 --- a/ui/pages/confirmations/hooks/alerts/transactions/useSigningOrSubmittingAlerts.ts +++ b/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, ); diff --git a/ui/pages/confirmations/hooks/alerts/useBlockaidAlerts.ts b/ui/pages/confirmations/hooks/alerts/useBlockaidAlerts.ts index 525e70f9f363..72f9ed40ffdf 100644 --- a/ui/pages/confirmations/hooks/alerts/useBlockaidAlerts.ts +++ b/ui/pages/confirmations/hooks/alerts/useBlockaidAlerts.ts @@ -1,30 +1,30 @@ +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 @@ -32,7 +32,7 @@ const zlib = require('zlib'); const SUPPORTED_TRANSACTION_TYPES = [ ...SIGNATURE_TRANSACTION_TYPES, - ...REDESIGN_TRANSACTION_TYPES, + ...REDESIGN_DEV_TRANSACTION_TYPES, ]; const IGNORED_RESULT_TYPES = [ diff --git a/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.ts b/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.ts index 56d1a82a836f..59aee5a17a35 100644 --- a/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.ts +++ b/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, ); diff --git a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts b/ui/pages/confirmations/hooks/useCurrentConfirmation.ts index 184f4cf0b194..a768c9351531 100644 --- a/ui/pages/confirmations/hooks/useCurrentConfirmation.ts +++ b/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) { diff --git a/ui/pages/confirmations/utils/confirm.ts b/ui/pages/confirmations/utils/confirm.ts index e9de074ddfd8..8a90d2149bae 100644 --- a/ui/pages/confirmations/utils/confirm.ts +++ b/ui/pages/confirmations/utils/confirm.ts @@ -16,10 +16,15 @@ export const REDESIGN_APPROVAL_TYPES = [ ApprovalType.PersonalSign, ]; -export const REDESIGN_TRANSACTION_TYPES = [ +export const REDESIGN_USER_TRANSACTION_TYPES = [ + TransactionType.contractInteraction, + TransactionType.deployContract, +]; + +export const REDESIGN_DEV_TRANSACTION_TYPES = [ TransactionType.contractInteraction, - TransactionType.tokenMethodApprove, TransactionType.deployContract, + TransactionType.tokenMethodApprove, ]; const SIGNATURE_APPROVAL_TYPES = [ From 329f813c8a998bb0d91ad89c2ed1113d0a5afa36 Mon Sep 17 00:00:00 2001 From: Pedro Figueiredo Date: Tue, 27 Aug 2024 10:11:41 +0100 Subject: [PATCH 2/3] feat: Temporarily hide Approve redesigned pages --- ui/pages/confirmations/utils/confirm.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/pages/confirmations/utils/confirm.ts b/ui/pages/confirmations/utils/confirm.ts index 8a90d2149bae..f5dadbdfe9c0 100644 --- a/ui/pages/confirmations/utils/confirm.ts +++ b/ui/pages/confirmations/utils/confirm.ts @@ -22,8 +22,7 @@ export const REDESIGN_USER_TRANSACTION_TYPES = [ ]; export const REDESIGN_DEV_TRANSACTION_TYPES = [ - TransactionType.contractInteraction, - TransactionType.deployContract, + ...REDESIGN_USER_TRANSACTION_TYPES, TransactionType.tokenMethodApprove, ]; From 6462ff74a6360ac4f2399389dd3d96b7ca1a8cda Mon Sep 17 00:00:00 2001 From: Pedro Figueiredo Date: Wed, 28 Aug 2024 14:59:03 +0100 Subject: [PATCH 3/3] skip test on mmi --- test/e2e/tests/confirmations/alerts/insufficient-funds.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/tests/confirmations/alerts/insufficient-funds.spec.ts b/test/e2e/tests/confirmations/alerts/insufficient-funds.spec.ts index f566d114bd16..f8d70b8e6568 100644 --- a/test/e2e/tests/confirmations/alerts/insufficient-funds.spec.ts +++ b/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 = {