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  <img width="438" alt="Screenshot 2023-09-15 at 16 53 46" src="https://github.com/MetaMask/metamask-extension/assets/29962968/5c4ab365-7979-4df3-9842-77a9a906956e"> ### After  <img width="434" alt="Screenshot 2023-09-21 at 11 33 07" src="https://github.com/MetaMask/metamask-extension/assets/29962968/774920c7-afb1-483b-8a05-c24b9bd26843"> <img width="432" alt="Screenshot 2023-09-21 at 11 33 24" src="https://github.com/MetaMask/metamask-extension/assets/29962968/dc890014-827b-4029-897d-b9df47edcc6f"> ## 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.
MetaMask · Oct 4, 2023 · c3e72e9 · c3e72e9
1 parent 2e1ab26
commit c3e72e9
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 5 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/.../security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap b/.../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
               </li>
             </ul>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-box--margin-top-3 mm-box--display-flex mm-box--color-text-default"
+            >
+              [somethingDoesntLookRight]
+            </p>
           </div>
           <div
             class="disclosure__footer"

diff --git a/...vider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/...vider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
@@ -169,6 +169,24 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
                 Operator is untrusted according to previous activity
               </li>
             </ul>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-box--margin-top-3 mm-box--display-flex mm-box--color-text-default"
+            >
+              <span>
+                 
+                Something doesn't look right? 
+                <a
+                  class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                  href="https://support.metamask.io/hc/en-us"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  Contact us
+                </a>
+                
+                 
+              </span>
+            </p>
           </div>
           <div
             class="disclosure__footer"

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
@@ -26,10 +26,12 @@ 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,
@@ -49,6 +51,19 @@ function SecurityProviderBannerAlert({
       {details && (
         <Disclosure title={t('seeDetails')} variant={DisclosureVariant.Arrow}>
           {details}
+          <Text marginTop={3} display={Display.Flex}>
+            {t('somethingDoesntLookRight', [
+              <ButtonLink
+                key={`security-provider-button-supporturl-${provider}`}
+                size={Size.inherit}
+                href={ZENDESK_URLS.SUPPORT_URL}
+                externalLink
+                onClick={onClickSupportLink}
+              >
+                {t('contactUs')}
+              </ButtonLink>,
+            ])}
+          </Text>
         </Disclosure>
       )}
 
@@ -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
@@ -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
@@ -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 (
     <div className="transaction-alerts">
       {
         ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
         <BlockaidBannerAlert
+          onClickSupportLink={onClickSupportLink}
           securityAlertResponse={txData?.securityAlertResponse}
         />
         ///: 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
@@ -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
@@ -327,6 +327,7 @@ export default class ConfirmTransactionBase extends Component {
       useCurrencyRateCheck,
       tokenSymbol,
     } = this.props;
+
     const { t } = this.context;
     const { userAcknowledgedGasMissing } = this.state;