diff --git a/shared/constants/security-provider.ts b/shared/constants/security-provider.ts index 28f7af0c0090..cb2773d290a6 100644 --- a/shared/constants/security-provider.ts +++ b/shared/constants/security-provider.ts @@ -9,8 +9,6 @@ type SecurityProviderConfig = Record< readonly tKeyName: string; /** URL to securty provider website */ readonly url: string; - /** URL to security provider support page */ - readonly supportUrl: string; } >; @@ -18,7 +16,6 @@ export const SECURITY_PROVIDER_CONFIG: Readonly = { [SecurityProvider.Blockaid]: { tKeyName: 'blockaid', url: 'https://blockaid.io/', - supportUrl: 'https://support.metamask.io/hc/en-us', }, }; diff --git a/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.js b/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.js index 13a9cf32ba39..b73a641554e7 100644 --- a/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.js +++ b/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.js @@ -26,14 +26,15 @@ import { SecurityProvider, SECURITY_PROVIDER_CONFIG, } from '../../../../shared/constants/security-provider'; +import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; function SecurityProviderBannerAlert({ description, details, + onClickSupportLink, provider, severity, title, - onClickBlockaidSupport, ...props }) { const t = useContext(I18nContext); @@ -61,9 +62,9 @@ function SecurityProviderBannerAlert({ {t('contactUs')} , @@ -123,7 +124,7 @@ SecurityProviderBannerAlert.propTypes = { provider: PropTypes.oneOf(Object.values(SecurityProvider)), /** Function to be called when the blockaid support link is clicked */ - onClickBlockaidSupport: PropTypes.func, + onClickSupportLink: PropTypes.func, }; export default SecurityProviderBannerAlert; diff --git a/ui/components/app/signature-request/signature-request.js b/ui/components/app/signature-request/signature-request.js index 49f1746ff319..a37f083d6249 100644 --- a/ui/components/app/signature-request/signature-request.js +++ b/ui/components/app/signature-request/signature-request.js @@ -53,11 +53,8 @@ import { MetaMetricsEventName, ///: END:ONLY_INCLUDE_IN } from '../../../../shared/constants/metametrics'; -import { - SECURITY_PROVIDER_MESSAGE_SEVERITY, - SecurityProvider, - SECURITY_PROVIDER_CONFIG, -} from '../../../../shared/constants/security-provider'; +import { SECURITY_PROVIDER_MESSAGE_SEVERITY } from '../../../../shared/constants/security-provider'; +import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; import { TextAlign, @@ -159,7 +156,7 @@ const SignatureRequest = ({ txData }) => { return { sanitizedMessage, domain, primaryType }; }); - const onClickBlockaidSupport = useCallback(() => { + const onClickSupportLink = useCallback(() => { trackEvent({ category: MetaMetricsEventCategory.Transactions, event: MetaMetricsEventName.ExternalLinkClicked, @@ -168,8 +165,7 @@ const SignatureRequest = ({ txData }) => { type, version, external_link_clicked: true, - security_alert_support_link: - SECURITY_PROVIDER_CONFIG[SecurityProvider.Blockaid].supportUrl, + security_alert_support_link: ZENDESK_URLS.SUPPORT_URL, }, }); }, []); @@ -269,7 +265,7 @@ const SignatureRequest = ({ txData }) => { marginLeft={4} marginRight={4} marginBottom={4} - onClickBlockaidSupport={onClickBlockaidSupport} + onClickSupportLink={onClickSupportLink} /> ///: END:ONLY_INCLUDE_IN } diff --git a/ui/components/app/transaction-alerts/transaction-alerts.js b/ui/components/app/transaction-alerts/transaction-alerts.js index 3ee53d893f51..fe482051c6ab 100644 --- a/ui/components/app/transaction-alerts/transaction-alerts.js +++ b/ui/components/app/transaction-alerts/transaction-alerts.js @@ -1,40 +1,75 @@ -import React from 'react'; +import React, { useCallback, useContext } from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import { PriorityLevels } from '../../../../shared/constants/gas'; -import { submittedPendingTransactionsSelector } from '../../../selectors'; +import { + submittedPendingTransactionsSelector, + getKnownMethodData, +} from '../../../selectors'; import { useGasFeeContext } from '../../../contexts/gasFee'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { BannerAlert, ButtonLink, Text } from '../../component-library'; import SimulationErrorMessage from '../../ui/simulation-error-message'; import { SEVERITIES } from '../../../helpers/constants/design-system'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; +import { getMethodName } from '../../../helpers/utils/metrics'; +import { TransactionType } from '../../../../shared/constants/transaction'; import { isSuspiciousResponse } from '../../../../shared/modules/security-provider.utils'; ///: BEGIN:ONLY_INCLUDE_IN(blockaid) import BlockaidBannerAlert from '../security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert'; ///: END:ONLY_INCLUDE_IN import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message'; +import { MetaMetricsContext } from '../../../contexts/metametrics'; +import { + MetaMetricsEventCategory, + MetaMetricsEventName, +} from '../../../../shared/constants/metametrics'; const TransactionAlerts = ({ userAcknowledgedGasMissing, setUserAcknowledgedGasMissing, txData, - onClickBlockaidSupport, }) => { const { estimateUsed, hasSimulationError, supportsEIP1559, isNetworkBusy } = useGasFeeContext(); const pendingTransactions = useSelector(submittedPendingTransactionsSelector); const t = useI18nContext(); + const trackEvent = useContext(MetaMetricsContext); + const { txParams = {} } = txData; + const methodData = useSelector( + (state) => getKnownMethodData(state, txParams.data) || {}, + ); + + console.log(methodData, 'methodDatamethodData'); + + const onClickSupportLink = useCallback(() => { + trackEvent({ + category: MetaMetricsEventCategory.Transactions, + event: MetaMetricsEventName.ExternalLinkClicked, + properties: { + action: 'Confirm Screen', + legacy_event: true, + recipientKnown: null, + functionType: + 'confirm' || + getMethodName(methodData.name) || + TransactionType.contractInteraction, + origin: txData?.origin, + external_link_clicked: true, + security_alert_support_link: ZENDESK_URLS.SUPPORT_URL, + }, + }); + }, []); return (
{ ///: BEGIN:ONLY_INCLUDE_IN(blockaid) ///: END:ONLY_INCLUDE_IN } @@ -95,7 +130,6 @@ TransactionAlerts.propTypes = { userAcknowledgedGasMissing: PropTypes.bool, setUserAcknowledgedGasMissing: PropTypes.func, txData: PropTypes.object, - onClickBlockaidSupport: PropTypes.func, }; export default TransactionAlerts; diff --git a/ui/helpers/constants/zendesk-url.js b/ui/helpers/constants/zendesk-url.js index 3599a27fd7de..73ec8ae7ab32 100644 --- a/ui/helpers/constants/zendesk-url.js +++ b/ui/helpers/constants/zendesk-url.js @@ -28,6 +28,7 @@ const ZENDESK_URLS = { 'https://metamask.zendesk.com/hc/en-us/articles/360059952212-MetaMask-is-a-non-custodial-wallet', SPEEDUP_CANCEL: 'https://metamask.zendesk.com/hc/en-us/articles/360015489251-How-to-speed-up-or-cancel-a-pending-transaction', + SUPPORT_URL: 'https://support.metamask.io/hc/en-us', TOKEN_ALLOWANCE_WITH_SPENDING_CAP: 'https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap', TOKEN_SAFETY_PRACTICES: diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js index a4f61e2d37f5..d0bc598a5a9e 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -14,10 +14,7 @@ import UserPreferencedCurrencyDisplay from '../../components/app/user-preference import { PRIMARY, SECONDARY } from '../../helpers/constants/common'; import TextField from '../../components/ui/text-field'; import SimulationErrorMessage from '../../components/ui/simulation-error-message'; -import { - MetaMetricsEventCategory, - MetaMetricsEventName, -} from '../../../shared/constants/metametrics'; +import { MetaMetricsEventCategory } from '../../../shared/constants/metametrics'; import { TransactionType, TransactionStatus, @@ -58,10 +55,6 @@ import { ConfirmTitle } from '../../components/app/confirm-title'; import { ConfirmSubTitle } from '../../components/app/confirm-subtitle'; import { ConfirmGasDisplay } from '../../components/app/confirm-gas-display'; import updateTxData from '../../../shared/modules/updateTxData'; -import { - SecurityProvider, - SECURITY_PROVIDER_CONFIG, -} from '../../../shared/constants/security-provider'; export default class ConfirmTransactionBase extends Component { static contextTypes = { @@ -331,9 +324,6 @@ export default class ConfirmTransactionBase extends Component { nativeCurrency, isBuyableChain, useCurrencyRateCheck, - actionKey, - txData: { origin }, - methodData = {}, } = this.props; const { t } = this.context; @@ -460,27 +450,6 @@ export default class ConfirmTransactionBase extends Component {
); - const onClickBlockaidSupport = () => { - const { trackEvent } = this.context; - trackEvent({ - category: MetaMetricsEventCategory.Transactions, - event: MetaMetricsEventName.ExternalLinkClicked, - properties: { - action: 'Confirm Screen', - legacy_event: true, - recipientKnown: null, - functionType: - actionKey || - getMethodName(methodData.name) || - TransactionType.contractInteraction, - origin, - external_link_clicked: true, - security_alert_support_link: - SECURITY_PROVIDER_CONFIG[SecurityProvider.Blockaid].supportUrl, - }, - }); - }; - return (