diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index a5073b434..07d28c054 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -565,6 +565,9 @@
"blockaidDescriptionBlurFarming": {
"message": "If you approve this request, someone can steal your assets listed on Blur."
},
+ "blockaidDescriptionFailed": {
+ "message": "Because of an error, this request was not verified by the security provider. Proceed with caution."
+ },
"blockaidDescriptionMaliciousDomain": {
"message": "You're interacting with a malicious domain. If you approve this request, you might lose your assets."
},
@@ -580,6 +583,9 @@
"blockaidTitleDeceptive": {
"message": "This is a deceptive request"
},
+ "blockaidTitleMayNotBeSafe": {
+ "message": "Request may not be safe"
+ },
"blockaidTitleSuspicious": {
"message": "This is a suspicious request"
},
diff --git a/shared/constants/security-provider.ts b/shared/constants/security-provider.ts
index 8f9168321..cb2773d29 100644
--- a/shared/constants/security-provider.ts
+++ b/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 {
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 7cf86eeb7..37761b2ba 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
@@ -59,7 +59,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = `
`;
+exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResponse.result_type is 'Failed 1`] = `
+
+
+
+
+ This is a deceptive request
+
+
+ If you approve this request, a third party known for scams might take all your assets.
+
+
+
+`;
+
exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResponse.result_type is 'Warning 1`] = `
);
+ const isFailedResultType = resultType === BlockaidResultType.Failed;
+
const severity =
resultType === BlockaidResultType.Malicious
? 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 (
diff --git a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.test.js b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.test.js
index 7710be531..9e9e3bd07 100644
--- a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.test.js
+++ b/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(
{
}}
/>,
);
+ 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(
+ ,
+ );
+ 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 +86,6 @@ describe('Blockaid Banner Alert', () => {
expect(dangerBannerAlert).toMatchSnapshot();
});
- it(`should render '${Severity.Warning}' UI when securityAlertResponse.result_type is '${BlockaidResultType.Warning}`, () => {
- const { container } = renderWithLocalization(
- ,
- );
- 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(
,
@@ -90,7 +94,20 @@ describe('Blockaid Banner Alert', () => {
expect(getByText('This is a deceptive request')).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.failed}"`, () => {
+ const { getByText } = renderWithLocalization(
+ ,
+ );
+
+ expect(getByText('Request may not be safe')).toBeInTheDocument();
+ });
+
+ it(`should render title, "This is a suspicious request", when the reason is "${BlockaidReason.rawSignatureFarming}"`, () => {
const { getByText } = renderWithLocalization(
{
'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]:
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
index e3b777b8b..5e115c193 100644
--- 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
@@ -15,6 +15,7 @@ import { I18nContext } from '../../../contexts/i18n';
import {
AlignItems,
Color,
+ Display,
IconColor,
Severity,
Size,
@@ -45,30 +46,33 @@ function SecurityProviderBannerAlert({
)}
-
-
- {t('securityProviderAdviceBy', [
-
- {t(SECURITY_PROVIDER_CONFIG[provider].tKeyName)}
- ,
- ])}
-
+ {provider && (
+
+
+ {t('securityProviderAdviceBy', [
+
+ {t(SECURITY_PROVIDER_CONFIG[provider].tKeyName)}
+ ,
+ ])}
+
+ )}
);
}
@@ -78,9 +82,6 @@ SecurityProviderBannerAlert.propTypes = {
description: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
.isRequired,
- /** Name of the security provider */
- provider: PropTypes.oneOfType(Object.values(SecurityProvider)).isRequired,
-
/** Severity level */
severity: PropTypes.oneOfType([Severity.Danger, Severity.Warning]).isRequired,
@@ -93,6 +94,9 @@ SecurityProviderBannerAlert.propTypes = {
/** Additional details to be displayed under the description */
details: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+ /** Name of the security provider */
+ provider: PropTypes.oneOfType(Object.values(SecurityProvider)),
};
export default SecurityProviderBannerAlert;
diff --git a/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.stories.js b/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.stories.js
index 2b81f2035..ee2f2a311 100644
--- a/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.stories.js
+++ b/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.stories.js
@@ -53,7 +53,10 @@ export default {
control: {
type: 'select',
},
- options: [Object.values(SecurityProvider)],
+ options: ['none', ...Object.values(SecurityProvider)],
+ mapping: {
+ none: null,
+ },
},
severity: {
control: {