From 136ede5d4c6e45d5c2b0dd7b666f7d16dc8ca49d Mon Sep 17 00:00:00 2001 From: Ariella Vu <20778143+digiwand@users.noreply.github.com> Date: Mon, 14 Aug 2023 18:38:03 +0200 Subject: [PATCH] Add Blockaid / PPOM Failed Request Security Alert (#20362) * WIP blockaid: add request failed UI - proposed to update reason value. planning to update upon update * alphabetize * BlockaidBannerAlert: update tkeys based on reason * SecurityProviderBannerAlert: fix footer alignment * BlockaidBannerAlert: rm footer w failed resultType --------- Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com> Co-authored-by: Jyoti Puri --- app/_locales/en/messages.json | 6 ++ shared/constants/security-provider.ts | 2 +- ...ecurity-provider-banner-alert.test.js.snap | 2 +- .../blockaid-banner-alert.test.js.snap | 30 +++++++++- .../blockaid-banner-alert.js | 23 ++++---- .../blockaid-banner-alert.test.js | 49 +++++++++++----- .../security-provider-banner-alert.js | 58 ++++++++++--------- .../security-provider-banner-alert.stories.js | 5 +- 8 files changed, 116 insertions(+), 59 deletions(-) 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: {