From 8c2d9712054e210aa2e6b400319721d43d4d21bc Mon Sep 17 00:00:00 2001 From: Pedro Figueiredo Date: Tue, 27 Aug 2024 10:07:48 +0100 Subject: [PATCH] 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 | 21 ++++++-- ui/pages/confirmations/utils/confirm.ts | 9 +++- 9 files changed, 87 insertions(+), 61 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 b4aeb4e255ad..9189b74bc75a 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 2403622f5a0e..4ff0c29f4c37 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'; /** @@ -60,10 +64,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, ); @@ -73,15 +82,17 @@ const useCurrentConfirmation = () => { (isRedesignedConfirmationsDeveloperSettingEnabled && isCorrectApprovalType); const shouldUseRedesignForTransactions = - (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; 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 = [