blockaid: add request failed UI

MetaMask · Aug 2, 2023 · 050c8b6 · 050c8b6
1 parent 9fd2df1
commit 050c8b6
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 26 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
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
@@ -46,6 +46,52 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
 </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"
+    >
+      Request may not be safe
+    </h5>
+    <p
+      class="mm-box mm-text mm-text--body-md mm-box--margin-top-2 mm-box--color-text-default"
+    >
+      Because of an error, this request was not verified by the security provider. Proceed with caution.
+    </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"
+    >
+      <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/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Blockaid
+        </a>
+        
+         
+      </span>
+    </p>
+  </div>
+</div>
+`;
+
 exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResponse.result_type is 'Warning 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"

diff --git a/...ponents/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js b/...ponents/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js
@@ -48,19 +48,20 @@ function BlockaidBannerAlert({ securityAlertResponse }) {
 
   const { reason, result_type: resultType, features } = securityAlertResponse;
 
-  if (
-    resultType === BlockaidResultType.Benign ||
-    resultType === BlockaidResultType.Failed
-  ) {
+  if (resultType === BlockaidResultType.Benign) {
     return null;
   }
 
-  if (!REASON_TO_DESCRIPTION_TKEY[reason]) {
+  const descriptionTKey =
+    resultType === BlockaidResultType.Failed
+      ? 'blockaidDescriptionFailed'
+      : REASON_TO_DESCRIPTION_TKEY[reason];
+  const description = t(descriptionTKey || 'other');
+
+  if (!descriptionTKey) {
     captureException(`BlockaidBannerAlert: Unidentified reason '${reason}'`);
   }
 
-  const description = t(REASON_TO_DESCRIPTION_TKEY[reason] || 'other');
-
   const details = Boolean(features?.length) && (
     <Text as="ul">
       {features.map((feature, i) => (
@@ -74,10 +75,14 @@ function BlockaidBannerAlert({ securityAlertResponse }) {
       ? Severity.Danger
       : Severity.Warning;
 
-  const title =
-    SUSPCIOUS_REASON.indexOf(reason) > -1
-      ? t('blockaidTitleSuspicious')
-      : t('blockaidTitleDeceptive');
+  let title;
+  if (resultType === BlockaidResultType.Failed) {
+    title = t('blockaidTitleMayNotBeSafe');
+  } else if (SUSPCIOUS_REASON.indexOf(reason) > -1) {
+    title = t('blockaidTitleSuspicious');
+  } else {
+    title = t('blockaidTitleDeceptive');
+  }
 
   return (
     <SecurityProviderBannerAlert

diff --git a/...ts/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.test.js b/...ts/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.test.js
@@ -40,17 +40,40 @@ describe('Blockaid Banner Alert', () => {
     expect(container.querySelector('.mm-banner-alert')).toBeNull();
   });
 
-  it(`should not render when securityAlertResponse.result_type is '${BlockaidResultType.Failed}'`, () => {
-    const { container } = renderWithLocalization(
+  it(`should render '${Severity.Warning}' UI when securityAlertResponse.result_type is '${BlockaidResultType.Failed}`, () => {
+    const { container, getByText } = renderWithLocalization(
       <BlockaidBannerAlert
         securityAlertResponse={{
           ...mockSecurityAlertResponse,
           result_type: BlockaidResultType.Failed,
         }}
       />,
     );
+    const warningBannerAlert = container.querySelector(
+      '.mm-banner-alert--severity-warning',
+    );
 
-    expect(container.querySelector('.mm-banner-alert')).toBeNull();
+    expect(warningBannerAlert).toBeInTheDocument();
+    expect(warningBannerAlert).toMatchSnapshot();
+
+    expect(getByText('Request may not be safe')).toBeInTheDocument();
+    expect(
+      getByText(
+        'Because of an error, this request was not verified by the security provider. Proceed with caution.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  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,18 +93,6 @@ describe('Blockaid Banner Alert', () => {
     expect(dangerBannerAlert).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 title, "This is a deceptive request"', () => {
     const { getByText } = renderWithLocalization(
       <BlockaidBannerAlert securityAlertResponse={mockSecurityAlertResponse} />,