From c3e72e9d8cd14cd77fe6e4663a5846ff3ef128db Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Wed, 4 Oct 2023 15:59:16 +0100 Subject: [PATCH] flow to report false positive for blockaid (#20856) ## Explanation We should allow users and developers to report false positives for the security provider warnings. Tasks - [x] Add option on UI to report false design. [See deign](https://www.figma.com/file/Q69vHaA7Or7Rxz4vdzjVHC/Support-for-tx-security-providers-(MVP)?type=design&node-id=6065%3A12121&mode=design&t=oYcxRuTnTvDrzqAM-1). The support url might change in the future. - [x] Add new property to transactions and signature events ## Screenshots/Screencaps ### Before Screenshot 2023-09-15 at 16 53 46 ### After Screenshot 2023-09-21 at 11 33 07 Screenshot 2023-09-21 at 11 33 24 ## Manual Testing Steps ## Pre-merge author checklist - [ ] I've clearly explained: - [x] What problem this PR is solving - [x] How this problem was solved - [x] How reviewers can test my changes - [x] Sufficient automated test coverage has been added ## Pre-merge reviewer checklist - [x] Manual testing (e.g. pull and build branch, run in browser, test code being changed) - [x] PR is linked to the appropriate GitHub issue - [ ] **IF** this PR fixes a bug in the release milestone, add this PR to the release milestone If further QA is required (e.g. new feature, complex testing steps, large refactor), add the `Extension QA Board` label. In this case, a QA Engineer approval will be be required. --- app/_locales/en/messages.json | 4 ++ ...ecurity-provider-banner-alert.test.js.snap | 5 +++ .../blockaid-banner-alert.test.js.snap | 18 +++++++++ .../security-provider-banner-alert.js | 18 +++++++++ .../signature-request/signature-request.js | 27 ++++++++++++- .../transaction-alerts/transaction-alerts.js | 39 +++++++++++++++++-- ui/helpers/constants/zendesk-url.js | 1 + .../confirm-transaction-base.component.js | 1 + 8 files changed, 108 insertions(+), 5 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 9243f745c25b..403be4d4f3fc 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -4266,6 +4266,10 @@ "someNetworksMayPoseSecurity": { "message": "Some networks may pose security and/or privacy risks. Understand the risks before adding & using a network." }, + "somethingDoesntLookRight": { + "message": "Something doesn't look right? $1", + "description": "A false positive message for users to contact support. $1 is a link to the support page." + }, "somethingIsWrong": { "message": "Something's gone wrong. Try reloading the page." }, diff --git a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap index a5395a81917f..84815da0dc0b 100644 --- a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap +++ b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap @@ -52,6 +52,11 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = ` List item +

+ [somethingDoesntLookRight] +

+

+ + + Something doesn't look right? + + Contact us + + + + +

{details} + + {t('somethingDoesntLookRight', [ + + {t('contactUs')} + , + ])} + )} @@ -103,6 +118,9 @@ SecurityProviderBannerAlert.propTypes = { /** Name of the security provider */ provider: PropTypes.oneOf(Object.values(SecurityProvider)), + + /** Function to be called when the support link is clicked */ + 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 d7146a304a0e..e5de3f67cca0 100644 --- a/ui/components/app/signature-request/signature-request.js +++ b/ui/components/app/signature-request/signature-request.js @@ -1,4 +1,11 @@ -import React, { useContext, useState, useEffect } from 'react'; +import React, { + useContext, + useState, + useEffect, + ///: BEGIN:ONLY_INCLUDE_IN(blockaid) + useCallback, + ///: END:ONLY_INCLUDE_IN +} from 'react'; import { useDispatch, useSelector, @@ -49,7 +56,7 @@ import ContractDetailsModal from '../modals/contract-details-modal'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { MetaMetricsEventCategory, - ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi,blockaid) MetaMetricsEventName, ///: END:ONLY_INCLUDE_IN } from '../../../../shared/constants/metametrics'; @@ -155,6 +162,21 @@ const SignatureRequest = ({ txData }) => { return { sanitizedMessage, domain, primaryType }; }); + ///: BEGIN:ONLY_INCLUDE_IN(blockaid) + const onClickSupportLink = useCallback(() => { + trackEvent({ + category: MetaMetricsEventCategory.Transactions, + event: MetaMetricsEventName.ExternalLinkClicked, + properties: { + action: 'Sign Request', + type, + version, + external_link_clicked: 'security_alert_support_link', + }, + }); + }, []); + ///: END:ONLY_INCLUDE_IN + const onSign = async () => { ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) if (accountType === 'custody') { @@ -250,6 +272,7 @@ const SignatureRequest = ({ txData }) => { marginLeft={4} marginRight={4} marginBottom={4} + 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 c72d58bf1b68..f2ef032eab69 100644 --- a/ui/components/app/transaction-alerts/transaction-alerts.js +++ b/ui/components/app/transaction-alerts/transaction-alerts.js @@ -1,4 +1,9 @@ -import React from 'react'; +import React, { + ///: BEGIN:ONLY_INCLUDE_IN(blockaid) + useCallback, + useContext, + ///: END:ONLY_INCLUDE_IN +} from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import { PriorityLevels } from '../../../../shared/constants/gas'; @@ -9,6 +14,9 @@ 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'; +///: BEGIN:ONLY_INCLUDE_IN(blockaid) +import { MetaMetricsContext } from '../../../contexts/metametrics'; +///: END:ONLY_INCLUDE_IN import { isSuspiciousResponse } from '../../../../shared/modules/security-provider.utils'; ///: BEGIN:ONLY_INCLUDE_IN(blockaid) @@ -19,12 +27,18 @@ import { getNativeCurrency } from '../../../ducks/metamask/metamask'; import { TransactionType } from '../../../../shared/constants/transaction'; import { parseStandardTokenTransactionData } from '../../../../shared/modules/transaction.utils'; import { getTokenValueParam } from '../../../../shared/lib/metamask-controller-utils'; +import { + ///: BEGIN:ONLY_INCLUDE_IN(blockaid) + MetaMetricsEventCategory, + MetaMetricsEventName, + ///: END:ONLY_INCLUDE_IN +} from '../../../../shared/constants/metametrics'; const TransactionAlerts = ({ userAcknowledgedGasMissing, setUserAcknowledgedGasMissing, - txData, tokenSymbol, + txData, }) => { const { estimateUsed, hasSimulationError, supportsEIP1559, isNetworkBusy } = useGasFeeContext(); @@ -54,11 +68,30 @@ const TransactionAlerts = ({ hasProperTxType && (currentTokenAmount === '0x0' || currentTokenAmount === '0'); + ///: BEGIN:ONLY_INCLUDE_IN(blockaid) + const trackEvent = useContext(MetaMetricsContext); + ///: END:ONLY_INCLUDE_IN + + ///: BEGIN:ONLY_INCLUDE_IN(blockaid) + const onClickSupportLink = useCallback(() => { + trackEvent({ + category: MetaMetricsEventCategory.Transactions, + event: MetaMetricsEventName.ExternalLinkClicked, + properties: { + action: 'Confirm Screen', + origin: txData?.origin, + external_link_clicked: 'security_alert_support_link', + }, + }); + }, []); + ///: END:ONLY_INCLUDE_IN + return (
{ ///: BEGIN:ONLY_INCLUDE_IN(blockaid) ///: END:ONLY_INCLUDE_IN @@ -124,8 +157,8 @@ const TransactionAlerts = ({ TransactionAlerts.propTypes = { userAcknowledgedGasMissing: PropTypes.bool, setUserAcknowledgedGasMissing: PropTypes.func, - txData: PropTypes.object, tokenSymbol: PropTypes.string, + txData: PropTypes.object, }; 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 6cd2da349f3b..6b8a8023c0a1 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -327,6 +327,7 @@ export default class ConfirmTransactionBase extends Component { useCurrencyRateCheck, tokenSymbol, } = this.props; + const { t } = this.context; const { userAcknowledgedGasMissing } = this.state;