fix: use correct link for reporting false positives in blockaid banne…

…r (#8216)

.eslintignore

@@ -13,4 +13,5 @@ CHANGELOG.md
 wdio
 /app/util/test/testSetup.js
 /app/lib/ppom/ppom.html.js
+/app/lib/ppom/blockaid-version.js
 /ppom

.prettierignore

@@ -17,4 +17,5 @@ scripts
 locales
 .storybook
 /ppom
-app/lib/ppom/ppom.html.js
+app/lib/ppom/ppom.html.js
+/app/lib/ppom/blockaid-version.js

app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx

@@ -17,6 +17,10 @@ jest.mock('../../../util/blockaid', () => ({
   isBlockaidFeatureEnabled: jest.fn().mockReturnValue(true),
 }));
 
+jest.mock('react-native-gzip', () => ({
+  deflate: (val: any) => val,
+}));
+
 const mockState = {
   engine: {
     backgroundState: {
@@ -26,22 +30,31 @@ const mockState = {
   },
 };
 
-describe('BlockaidBanner', () => {
-  const mockFeatures = [
-    'We found attack vectors in this request',
-    'This request shows a fake token name and icon.',
-    'If you approve this request, a third party known for scams might take all your assets.',
-    'Operator is an EOA',
-    'Operator is untrusted according to previous activity',
-  ];
+const mockFeatures = [
+  'We found attack vectors in this request',
+  'This request shows a fake token name and icon.',
+  'If you approve this request, a third party known for scams might take all your assets.',
+  'Operator is an EOA',
+  'Operator is untrusted according to previous activity',
+];
+
+const securityAlertResponse = {
+  result_type: ResultType.Failed,
+  reason: Reason.failed,
+  features: mockFeatures,
+  block: 123,
+  req: {},
+  chainId: '0x1',
+};
 
+describe('BlockaidBanner', () => {
   it('should render correctly', () => {
     const wrapper = renderWithProvider(
       <BlockaidBanner
         securityAlertResponse={{
+          ...securityAlertResponse,
           result_type: ResultType.Warning,
           reason: Reason.approvalFarming,
-          features: mockFeatures,
         }}
       />,
       { state: mockState },
@@ -54,9 +67,9 @@ describe('BlockaidBanner', () => {
     const wrapper = renderWithProvider(
       <BlockaidBanner
         securityAlertResponse={{
+          ...securityAlertResponse,
           result_type: ResultType.Malicious,
           reason: Reason.rawSignatureFarming,
-          features: mockFeatures,
         }}
       />,
       { state: mockState },
@@ -78,9 +91,9 @@ describe('BlockaidBanner', () => {
     const wrapper = renderWithProvider(
       <BlockaidBanner
         securityAlertResponse={{
+          ...securityAlertResponse,
           result_type: ResultType.Malicious,
           reason: Reason.rawSignatureFarming,
-          features: mockFeatures,
         }}
       />,
       { state: mockState },
@@ -93,9 +106,9 @@ describe('BlockaidBanner', () => {
     const wrapper = renderWithProvider(
       <BlockaidBanner
         securityAlertResponse={{
+          ...securityAlertResponse,
           result_type: ResultType.Malicious,
           reason: Reason.approvalFarming,
-          features: mockFeatures,
         }}
       />,
       { state: mockState },
@@ -133,9 +146,9 @@ describe('BlockaidBanner', () => {
     const wrapper = renderWithProvider(
       <BlockaidBanner
         securityAlertResponse={{
+          ...securityAlertResponse,
           result_type: ResultType.Malicious,
           reason: Reason.approvalFarming,
-          features: mockFeatures,
         }}
       />,
       { state: mockState },
@@ -219,9 +232,9 @@ describe('BlockaidBanner', () => {
     const wrapper = renderWithProvider(
       <BlockaidBanner
         securityAlertResponse={{
+          ...securityAlertResponse,
           result_type: ResultType.Benign,
           reason: Reason.rawSignatureFarming,
-          features: mockFeatures,
         }}
       />,
       { state: mockState },
@@ -234,13 +247,7 @@ describe('BlockaidBanner', () => {
 
   it('should render normal banner alert if resultType is failed', async () => {
     const wrapper = renderWithProvider(
-      <BlockaidBanner
-        securityAlertResponse={{
-          result_type: ResultType.Failed,
-          reason: Reason.failed,
-          features: mockFeatures,
-        }}
-      />,
+      <BlockaidBanner securityAlertResponse={securityAlertResponse} />,
       { state: mockState },
     );
 

app/components/UI/BlockaidBanner/BlockaidBanner.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { ActivityIndicator } from 'react-native';
 import { useSelector } from 'react-redux';
 import { View } from 'react-native-animatable';
-
 import { captureException } from '@sentry/react-native';
+import { deflate } from 'react-native-gzip';
 
 import { strings } from '../../../../locales/i18n';
 import { AccordionHeaderHorizontalAlignment } from '../../../component-library/components/Accordions/Accordion';
@@ -20,6 +20,7 @@ import Icon from '../../../component-library/components/Icons/Icon/Icon';
 import Text from '../../../component-library/components/Texts/Text/Text';
 import { useStyles } from '../../../component-library/hooks/useStyles';
 import { isBlockaidFeatureEnabled } from '../../../util/blockaid';
+import { NETWORKS_CHAIN_ID } from '../../../constants/network';
 import {
   ATTRIBUTION_LINE_TEST_ID,
   FALSE_POSITIVE_REPOST_LINE_TEST_ID,
@@ -35,11 +36,26 @@ import {
 import BlockaidBannerLink from './BlockaidBannerLink';
 import {
   BLOCKAID_ATTRIBUTION_LINK,
-  BLOCKAID_SUPPORT_LINK,
+  FALSE_POSITIVE_REPORT_BASE_URL,
+  UTM_SOURCE,
 } from '../../../constants/urls';
 import { isMainnetByChainId } from '../../../util/networks';
-import { selectChainId } from '../../../selectors/networkController';
 import { selectIsSecurityAlertsEnabled } from '../../../selectors/preferencesController';
+import BlockaidVersionInfo from '../../../lib/ppom/blockaid-version';
+
+const BLOCKAID_SUPPORTED_NETWORK_NAMES = {
+  [NETWORKS_CHAIN_ID.MAINNET]: 'Ethereum Mainnet',
+  [NETWORKS_CHAIN_ID.BSC]: 'Binance Smart Chain',
+  [NETWORKS_CHAIN_ID.OPTIMISM]: 'Optimism',
+  [NETWORKS_CHAIN_ID.POLYGON]: 'Polygon',
+  [NETWORKS_CHAIN_ID.ARBITRUM]: 'Arbitrum',
+  [NETWORKS_CHAIN_ID.LINEA_MAINNET]: 'Linea',
+};
+
+const getReportUrl = (encodedData: string) =>
+  `${FALSE_POSITIVE_REPORT_BASE_URL}?data=${encodeURIComponent(
+    encodedData.toString(),
+  )}&utm_source=${UTM_SOURCE}`;
 
 const getTitle = (reason: Reason): string =>
   strings(
@@ -89,7 +105,7 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => {
   } = bannerProps;
   const { styles, theme } = useStyles(styleSheet, { style });
   const [displayPositiveResponse, setDisplayPositiveResponse] = useState(false);
-  const chainId = useSelector(selectChainId);
+  const [reportUrl, setReportUrl] = useState<string>('');
   const isSecurityAlertsEnabled = useSelector(selectIsSecurityAlertsEnabled);
 
   useEffect(() => {
@@ -98,16 +114,48 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => {
     }
   }, [securityAlertResponse]);
 
+  useEffect(() => {
+    if (!securityAlertResponse) {
+      return;
+    }
+    const { result_type, reason, features, block, req, chainId } =
+      securityAlertResponse;
+
+    if (!req || !chainId) {
+      return;
+    }
+
+    const reportData = {
+      domain: req.origin,
+      jsonRpcMethod: req.method,
+      jsonRpcParams: JSON.stringify(req.params),
+      blockNumber: block,
+      chain: BLOCKAID_SUPPORTED_NETWORK_NAMES[chainId],
+      classification: reason,
+      resultType: result_type,
+      reproduce: JSON.stringify(features),
+      blockaidVersion: BlockaidVersionInfo.BlockaidVersion,
+    };
+
+    (async () => {
+      const compressed = await deflate(JSON.stringify(reportData));
+      setReportUrl(getReportUrl(compressed));
+    })();
+  }, [securityAlertResponse]);
+
   if (
     !securityAlertResponse ||
     !isBlockaidFeatureEnabled() ||
-    !isMainnetByChainId(chainId) ||
     !isSecurityAlertsEnabled
   ) {
     return null;
   }
 
-  const { result_type, reason, features } = securityAlertResponse;
+  const { result_type, reason, features, chainId } = securityAlertResponse;
+
+  if (!isMainnetByChainId(chainId)) {
+    return null;
+  }
 
   if (securityAlertResponse.reason === Reason.requestInProgress) {
     return (
@@ -192,8 +240,8 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => {
           </View>
           <View style={styles.attributionItem}>
             <BlockaidBannerLink
-              text={strings('app_information.contact_us')}
-              link={BLOCKAID_SUPPORT_LINK}
+              text={strings('blockaid_banner.report_an_issue')}
+              link={reportUrl}
               onContactUsClicked={onContactUsClicked}
             />
           </View>

app/components/UI/BlockaidBanner/BlockaidBanner.types.ts

@@ -35,6 +35,9 @@ export interface SecurityAlertResponse {
   features?: (string | Record<string, string>)[];
   result_type: ResultType;
   providerRequestsCount?: Record<string, number>;
+  block?: number;
+  chainId?: string;
+  req?: Record<string, unknown>;
 }
 
 type BlockaidBannerAllProps = BannerAlertProps & {

app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap

@@ -12,6 +12,8 @@ exports[`BlockaidBanner should render correctly 1`] = `
 <View
   securityAlertResponse={
     Object {
+      "block": 123,
+      "chainId": "0x1",
       "features": Array [
         "We found attack vectors in this request",
         "This request shows a fake token name and icon.",
@@ -20,6 +22,7 @@ exports[`BlockaidBanner should render correctly 1`] = `
         "Operator is untrusted according to previous activity",
       ],
       "reason": "approval_farming",
+      "req": Object {},
       "result_type": "Warning",
     }
   }
@@ -252,6 +255,8 @@ exports[`BlockaidBanner should render correctly with list attack details 1`] = `
 <View
   securityAlertResponse={
     Object {
+      "block": 123,
+      "chainId": "0x1",
       "features": Array [
         "We found attack vectors in this request",
         "This request shows a fake token name and icon.",
@@ -260,6 +265,7 @@ exports[`BlockaidBanner should render correctly with list attack details 1`] = `
         "Operator is untrusted according to previous activity",
       ],
       "reason": "approval_farming",
+      "req": Object {},
       "result_type": "Malicious",
     }
   }
@@ -492,6 +498,8 @@ exports[`BlockaidBanner should render correctly with reason "raw_signature_farmi
 <View
   securityAlertResponse={
     Object {
+      "block": 123,
+      "chainId": "0x1",
       "features": Array [
         "We found attack vectors in this request",
         "This request shows a fake token name and icon.",
@@ -500,6 +508,7 @@ exports[`BlockaidBanner should render correctly with reason "raw_signature_farmi
         "Operator is untrusted according to previous activity",
       ],
       "reason": "raw_signature_farming",
+      "req": Object {},
       "result_type": "Malicious",
     }
   }
@@ -823,6 +832,8 @@ exports[`BlockaidBanner should render something does not look right with contact
 <View
   securityAlertResponse={
     Object {
+      "block": 123,
+      "chainId": "0x1",
       "features": Array [
         "We found attack vectors in this request",
         "This request shows a fake token name and icon.",
@@ -831,6 +842,7 @@ exports[`BlockaidBanner should render something does not look right with contact
         "Operator is untrusted according to previous activity",
       ],
       "reason": "approval_farming",
+      "req": Object {},
       "result_type": "Malicious",
     }
   }

app/components/UI/TransactionBlockaidBanner/TransactionBlockaidBanner.test.tsx

@@ -11,6 +11,10 @@ jest.mock('../../../util/blockaid', () => ({
   isBlockaidFeatureEnabled: jest.fn().mockReturnValue(true),
 }));
 
+jest.mock('react-native-gzip', () => ({
+  deflate: (val: any) => val,
+}));
+
 const mockState = {
   engine: {
     backgroundState: {
@@ -24,6 +28,9 @@ const mockState = {
       response: {
         result_type: ResultType.Warning,
         reason: Reason.approvalFarming,
+        block: 123,
+        req: {},
+        chainId: '0x1',
       },
     },
   },
@@ -60,6 +67,9 @@ describe('TransactionBlockaidBanner', () => {
             response: {
               result_type: ResultType.Warning,
               reason: Reason.approvalFarming,
+              block: 123,
+              req: {},
+              chainId: '0x1',
             },
           },
         },

app/components/UI/TransactionBlockaidBanner/__snapshots__/TransactionBlockaidBanner.test.tsx.snap

@@ -8,7 +8,10 @@ exports[`TransactionBlockaidBanner should render correctly 1`] = `
 <View
   securityAlertResponse={
     Object {
+      "block": 123,
+      "chainId": "0x1",
       "reason": "approval_farming",
+      "req": Object {},
       "result_type": "Warning",
     }
   }