Add Blockaid / PPOM Failed Request Security Alert

shared/constants/security-provider.ts

@@ -49,8 +49,8 @@ export enum BlockaidReason {
   other = 'other',
 
   // Locally defined
-  notApplicable = 'NotApplicable',
   failed = 'Failed',
+  notApplicable = 'NotApplicable',
 }
 
 export enum BlockaidResultType {

ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap

@@ -21,15 +21,61 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
       If you approve this request, a third party known for scams might take all your assets.
     </p>
     <p
-      class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative"
+      class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
     >
       <span
         class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
         style="mask-image: url('./images/icons/security-tick.svg');"
       />
       <span>
-
-        Security advice by 
+
+        Security advice by
+        <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-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://blockaid.io/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Blockaid
+        </a>
+
+
+      </span>
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResponse.result_type is 'Failed 1`] = `
+<div
+  class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
+>
+  <span
+    class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"
+    style="mask-image: url('./images/icons/warning.svg');"
+  />
+  <div>
+    <h5
+      class="mm-box mm-text mm-banner-base__title mm-text--body-lg-medium mm-box--color-text-default"
+      data-testid="mm-banner-base-title"
+    >
+      This is a deceptive request
+    </h5>
+    <p
+      class="mm-box mm-text mm-text--body-md mm-box--margin-top-2 mm-box--color-text-default"
+    >
+      If you approve this request, a third party known for scams might take all your assets.
+    </p>
+    <p
+      class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
+    >
+      <span
+        class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
+        style="mask-image: url('./images/icons/security-tick.svg');"
+      />
+      <span>
+
+        Security advice by
         <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-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://blockaid.io/"
@@ -38,8 +84,8 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
         >
           Blockaid
         </a>
-        
-         
+
+
       </span>
     </p>
   </div>
@@ -67,15 +113,15 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
       If you approve this request, a third party known for scams might take all your assets.
     </p>
     <p
-      class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative"
+      class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
     >
       <span
         class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
         style="mask-image: url('./images/icons/security-tick.svg');"
       />
       <span>
-         
-        Security advice by 
+
+        Security advice by
         <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-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://blockaid.io/"
@@ -84,8 +130,8 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
         >
           Blockaid
         </a>
-        
-         
+
+
       </span>
     </p>
   </div>
@@ -137,11 +183,11 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
               class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
             >
               <li>
-                • 
+                •
                 Operator is an EOA
               </li>
               <li>
-                • 
+                •
                 Operator is untrusted according to previous activity
               </li>
             </ul>
@@ -152,15 +198,15 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
         </details>
       </div>
       <p
-        class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative"
+        class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
       >
         <span
           class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
           style="mask-image: url('./images/icons/security-tick.svg');"
         />
         <span>
-           
-          Security advice by 
+
+          Security advice by
           <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-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://blockaid.io/"
@@ -169,8 +215,8 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
           >
             Blockaid
           </a>
-          
-           
+
+
         </span>
       </p>
     </div>

ui/components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js

@@ -21,6 +21,8 @@ const REASON_TO_DESCRIPTION_TKEY = Object.freeze({
 
   [BlockaidReason.blurFarming]: 'blockaidDescriptionBlurFarming',
 
+  [BlockaidReason.failed]: 'blockaidDescriptionFailed',
+
   [BlockaidReason.seaportFarming]: 'blockaidDescriptionSeaportFarming',
 
   [BlockaidReason.maliciousDomain]: 'blockaidDescriptionMaliciousDomain',
@@ -36,8 +38,11 @@ const REASON_TO_DESCRIPTION_TKEY = Object.freeze({
   [BlockaidReason.other]: 'blockaidDescriptionMightLoseAssets',
 });
 
-/** List of suspicious reason(s). Other reasons will be deemed as deceptive. */
-const SUSPCIOUS_REASON = [BlockaidReason.rawSignatureFarming];
+/** Reason to title translation key mapping. */
+const REASON_TO_TITLE_TKEY = Object.freeze({
+  [BlockaidReason.failed]: 'blockaidTitleMayNotBeSafe',
+  [BlockaidReason.rawSignatureFarming]: 'blockaidTitleSuspicious',
+});
 
 function BlockaidBannerAlert({ securityAlertResponse }) {
   const t = useContext(I18nContext);
@@ -48,10 +53,7 @@ function BlockaidBannerAlert({ securityAlertResponse }) {
 
   const { reason, result_type: resultType, features } = securityAlertResponse;
 
-  if (
-    resultType === BlockaidResultType.Benign ||
-    resultType === BlockaidResultType.Failed
-  ) {
+  if (resultType === BlockaidResultType.Benign) {
     return null;
   }
 
@@ -74,10 +76,7 @@ function BlockaidBannerAlert({ securityAlertResponse }) {
       ? Severity.Danger
       : Severity.Warning;
 
-  const title =
-    SUSPCIOUS_REASON.indexOf(reason) > -1
-      ? t('blockaidTitleSuspicious')
-      : t('blockaidTitleDeceptive');
+  const title = t(REASON_TO_TITLE_TKEY[reason] || 'blockaidTitleDeceptive');
 
   return (
     <SecurityProviderBannerAlert

ui/components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.test.js

@@ -40,7 +40,7 @@ describe('Blockaid Banner Alert', () => {
     expect(container.querySelector('.mm-banner-alert')).toBeNull();
   });
 
-  it(`should not render when securityAlertResponse.result_type is '${BlockaidResultType.Failed}'`, () => {
+  it(`should render '${Severity.Warning}' UI when securityAlertResponse.result_type is '${BlockaidResultType.Failed}`, () => {
     const { container } = renderWithLocalization(
       <BlockaidBannerAlert
         securityAlertResponse={{
@@ -49,8 +49,24 @@ describe('Blockaid Banner Alert', () => {
         }}
       />,
     );
+    const warningBannerAlert = container.querySelector(
+      '.mm-banner-alert--severity-warning',
+    );
 
-    expect(container.querySelector('.mm-banner-alert')).toBeNull();
+    expect(warningBannerAlert).toBeInTheDocument();
+    expect(warningBannerAlert).toMatchSnapshot();
+  });
+
+  it(`should render '${Severity.Warning}' UI when securityAlertResponse.result_type is '${BlockaidResultType.Warning}`, () => {
+    const { container } = renderWithLocalization(
+      <BlockaidBannerAlert securityAlertResponse={mockSecurityAlertResponse} />,
+    );
+    const warningBannerAlert = container.querySelector(
+      '.mm-banner-alert--severity-warning',
+    );
+
+    expect(warningBannerAlert).toBeInTheDocument();
+    expect(warningBannerAlert).toMatchSnapshot();
   });
 
   it(`should render '${Severity.Danger}' UI when securityAlertResponse.result_type is '${BlockaidResultType.Malicious}`, () => {
@@ -70,27 +86,28 @@ describe('Blockaid Banner Alert', () => {
     expect(dangerBannerAlert).toMatchSnapshot();
   });
 
-  it(`should render '${Severity.Warning}' UI when securityAlertResponse.result_type is '${BlockaidResultType.Warning}`, () => {
-    const { container } = renderWithLocalization(
+  it('should render title, "This is a deceptive request"', () => {
+    const { getByText } = renderWithLocalization(
       <BlockaidBannerAlert securityAlertResponse={mockSecurityAlertResponse} />,
     );
-    const warningBannerAlert = container.querySelector(
-      '.mm-banner-alert--severity-warning',
-    );
 
-    expect(warningBannerAlert).toBeInTheDocument();
-    expect(warningBannerAlert).toMatchSnapshot();
+    expect(getByText('This is a deceptive request')).toBeInTheDocument();
   });
 
-  it('should render title, "This is a deceptive request"', () => {
+  it(`should render title, "This is a suspicious request", when the reason is "${BlockaidReason.failed}"`, () => {
     const { getByText } = renderWithLocalization(
-      <BlockaidBannerAlert securityAlertResponse={mockSecurityAlertResponse} />,
+      <BlockaidBannerAlert
+        securityAlertResponse={{
+          ...mockSecurityAlertResponse,
+          reason: BlockaidReason.failed,
+        }}
+      />,
     );
 
-    expect(getByText('This is a deceptive request')).toBeInTheDocument();
+    expect(getByText('Request may not be safe')).toBeInTheDocument();
   });
 
-  it('should render title, "This is a suspicious request", when the reason is "raw_signature_farming"', () => {
+  it(`should render title, "This is a suspicious request", when the reason is "${BlockaidReason.rawSignatureFarming}"`, () => {
     const { getByText } = renderWithLocalization(
       <BlockaidBannerAlert
         securityAlertResponse={{
@@ -131,6 +148,8 @@ describe('Blockaid Banner Alert', () => {
         'If you approve this request, a third party known for scams might take all your assets.',
       [BlockaidReason.blurFarming]:
         'If you approve this request, someone can steal your assets listed on Blur.',
+      [BlockaidReason.failed]:
+        'Because of an error, this request was not verified by the security provider. Proceed with caution.',
       [BlockaidReason.maliciousDomain]:
         "You're interacting with a malicious domain. If you approve this request, you might lose your assets.",
       [BlockaidReason.other]:

ui/components/app/security-provider-banner-alert/security-provider-banner-alert.js

@@ -15,6 +15,7 @@ import { I18nContext } from '../../../contexts/i18n';
 import {
   AlignItems,
   Color,
+  Display,
   IconColor,
   Severity,
   Size,
@@ -47,6 +48,7 @@ function SecurityProviderBannerAlert({
 
       <Text
         marginTop={2}
+        display={Display.Flex}
         alignItems={AlignItems.center}
         color={Color.textAlternative}
         variant={TextVariant.bodySm}