From 2ffc052c145c4a347f6a6146e187f2c793a93650 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Thu, 8 Jun 2023 20:37:09 +0300 Subject: [PATCH 01/39] Tests should use find by not just snapshots Signed-off-by: Olusegun Akintayo --- .../components/Banners/Banner/__snapshots__/Banner.test.tsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap b/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap index 11e7d17f6e3..8672f4fea45 100644 --- a/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap +++ b/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap @@ -193,6 +193,7 @@ exports[`Banner should render correctly with a close button 1`] = ` Date: Wed, 7 Jun 2023 11:52:24 +0300 Subject: [PATCH 02/39] BlockaidBanner implementation Signed-off-by: Olusegun Akintayo --- .../BlockaidBanner/BlockaidBanner.stories.tsx | 67 +++++++++++++++++ .../UI/BlockaidBanner/BlockaidBanner.tsx | 74 +++++++++++++++++++ .../UI/BlockaidBanner/BlockaidBanner.types.ts | 20 +++++ 3 files changed, 161 insertions(+) create mode 100644 app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx create mode 100644 app/components/UI/BlockaidBanner/BlockaidBanner.tsx create mode 100644 app/components/UI/BlockaidBanner/BlockaidBanner.types.ts diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx new file mode 100644 index 00000000000..e66cd13041c --- /dev/null +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx @@ -0,0 +1,67 @@ +/* eslint-disable no-console */ +import React from 'react'; +import { storiesOf } from '@storybook/react-native'; +import { BlockaidBannerProps } from './BlockaidBanner.types'; +import { BannerAlertSeverity } from 'app/component-library/components/Banners/Banner'; +import { select, text } from '@storybook/addon-knobs'; +import { + DEFAULT_BANNERALERT_SEVERITY, + SAMPLE_BANNERALERT_ACTIONBUTTONLABEL, + SAMPLE_BANNERALERT_DESCRIPTION, + SAMPLE_BANNERALERT_TITLE, +} from 'app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.constants'; +import { storybookPropsGroupID } from 'app/component-library/constants/storybook.constants'; +import { ButtonVariants } from 'app/component-library/components/Buttons/Button'; +import BlockaidBanner from './BlockaidBanner'; + +export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => { + const severitySelector = select( + 'severity', + BannerAlertSeverity, + DEFAULT_BANNERALERT_SEVERITY, + storybookPropsGroupID, + ); + + const title = text('title', SAMPLE_BANNERALERT_TITLE, storybookPropsGroupID); + const description = text( + 'description', + SAMPLE_BANNERALERT_DESCRIPTION, + storybookPropsGroupID, + ); + const actionButtonLabel = text( + 'actionButtonLabel', + SAMPLE_BANNERALERT_ACTIONBUTTONLABEL, + storybookPropsGroupID, + ); + + const attackDetails = text( + 'attackDetails', + 'Sample Attack Details', + storybookPropsGroupID, + ); + + return { + severity: severitySelector, + title, + description, + actionButtonProps: { + label: actionButtonLabel, + variant: ButtonVariants.Primary, + onPress: () => console.log('actionButton clicked!'), + }, + onClose: () => console.log('closeButton clicked!'), + attackType: 'raw_signature_farming', + attackDetails, + }; +}; + +const BlockaidBannerStory = () => ( + +); + +storiesOf('Components / UI / BlockaidBanner', module).add( + 'BlockaidBanner', + BlockaidBannerStory, +); + +export default BlockaidBannerStory; diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx new file mode 100644 index 00000000000..917725d691b --- /dev/null +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -0,0 +1,74 @@ +// import Text from '../../../../../../component-library/components/Texts/Text'; + +import React, { ReactNode } from 'react'; +import Accordion from '../../../component-library/components/Accordions/Accordion/Accordion'; +import BannerAlert from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert'; +import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; +import { BlockaidBannerProps } from './BlockaidBanner.types'; +import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; +import Text from '../../../component-library/components/Texts/Text/Text'; + +const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { + const { attackType, onToggleShowDetails, attackDetails } = bannerProps; + let title = 'This is a deceptive request'; + let description; + + switch (attackType) { + case 'raw_signature_farming': + title = 'This is a suspicious request'; + description = 'If you approve this request, you might lose your assets.'; + break; + case 'approval_farming': + case 'set_approval_for_all_farming': + case 'permit_farming': + description = + 'If you approve this request, a third party known for scams might take all your assets.'; + break; + case 'transfer_farming': + case 'transfer_from_farming': + case 'raw_native_token_transfer': + description = + 'If you approve this request, a third party known for scams will take all your assets.'; + break; + case 'seaport_farming': + description = + 'If you approve this request, someone can steal your assets listed on OpenSea.'; + break; + case 'blur_farming': + description = + 'If you approve this request, someone can steal your assets listed on Blur.'; + break; + case 'unfair_trade': + default: + description = 'If you approve this request, you might lose your assets.'; + break; + } + + const renderAttackDetails = () => + typeof attackDetails === 'string' ? ( + + {attackDetails} + + ) : ( + attackDetails + ); + + return ( + + + {renderAttackDetails()} + + + ); +}; + +export default BlockaidBanner; diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts b/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts new file mode 100644 index 00000000000..cd947f7ddc9 --- /dev/null +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts @@ -0,0 +1,20 @@ +import { ReactNode } from "react"; +import { BannerAlertProps } from "../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.types"; + +export type BlockaidBannerProps = BannerAlertProps & { + attackType: + | 'raw_signature_farming' + | 'approval_farming' + | 'set_approval_for_all_farming' + | 'permit_farming' + | 'transfer_farming' + | 'transfer_from_farming' + | 'raw_native_token_transfer' + | 'seaport_farming' + | 'blur_farming' + | 'unfair_trade' + | 'others' + + attackDetails: string | ReactNode; + onToggleShowDetails?: () => void; + }; \ No newline at end of file From 25b21dd0204c53e296f102b2abe19c45b3c291d2 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Mon, 12 Jun 2023 13:02:45 +0300 Subject: [PATCH 03/39] Blockaid banner tests Signed-off-by: Olusegun Akintayo --- .../UI/BlockaidBanner/BlockaidBanner.test.tsx | 130 ++++ .../BlockaidBanner.test.tsx.snap | 648 ++++++++++++++++++ 2 files changed, 778 insertions(+) create mode 100644 app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx create mode 100644 app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx new file mode 100644 index 00000000000..a0646d70fd3 --- /dev/null +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx @@ -0,0 +1,130 @@ +import { fireEvent, render } from '@testing-library/react-native'; +import BlockaidBanner from './BlockaidBanner'; +import { Text } from 'react-native-svg'; +import ListItem from '../../../components/Base/ListItem'; +import { FlatList } from 'react-native-gesture-handler'; +import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; +import { StyleSheet } from 'react-native'; + +describe('BlockaidBanner', () => { + const listItems = [ + { + title: 'attack_description_1', + description: 'We found attack vectors in this request', + }, + { + title: 'attack_description_2', + description: 'This request shows a fake token name and icon.', + }, + { + title: 'attack_description_3', + description: + 'If you approve this request, a third party known for scams might take all your assets.', + }, + ]; + + const styles = StyleSheet.create({ + wrapper: { + padding: 15, + }, + }); + + it('should render correctly', () => { + const wrapper = render( + , + ); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render correctly with attackType "raw_signature_farming"', async () => { + const wrapper = render( + , + ); + + expect(wrapper).toMatchSnapshot(); + expect(await wrapper.queryByTestId('accordion-header')).toBeDefined(); + expect( + await wrapper.getByText('This is a suspicious request'), + ).toBeDefined(); + expect( + await wrapper.getByText( + 'If you approve this request, you might lose your assets.', + ), + ).toBeDefined(); + }); + + it('should render correctly with string attack details', async () => { + const wrapper = render( + , + ); + + expect(wrapper).toMatchSnapshot(); + expect(await wrapper.queryByTestId('accordion-header')).toBeDefined(); + expect( + await wrapper.queryByText('This is a string attack details'), + ).toBeNull(); + fireEvent.press(await wrapper.getByText('See details')); + expect( + await wrapper.getByText('This is a string attack details'), + ).toBeDefined(); + }); + + it('should render correctly with list attack details', async () => { + const wrapper = render( + + ( + + + + + + + {item.description} + + + + )} + keyExtractor={(item) => item.title} + /> + + } + />, + ); + + expect(wrapper).toMatchSnapshot(); + expect(await wrapper.queryByTestId('accordion-header')).toBeDefined(); + expect(await wrapper.queryByTestId('accordion-content')).toBeNull(); + + fireEvent.press(await wrapper.getByText('See details')); + + expect(await wrapper.queryByTestId('accordion-content')).toBeDefined(); + expect( + await wrapper.queryByText('We found attack vectors in this request'), + ).toBeDefined(); + expect( + await wrapper.queryByText( + 'This request shows a fake token name and icon.', + ), + ).toBeDefined(); + expect( + await wrapper.queryByText( + 'If you approve this request, a third party known for scams might take all your assets.', + ), + ).toBeDefined(); + }); +}); diff --git a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap new file mode 100644 index 00000000000..8ba78fc365f --- /dev/null +++ b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap @@ -0,0 +1,648 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BlockaidBanner should render correctly 1`] = ` + + + + + + + This is a deceptive request + + + If you approve this request, a third party known for scams might take all your assets. + + + + + See details + + + + + + + + + + } + /> + + + +`; + +exports[`BlockaidBanner should render correctly with attackType "raw_signature_farming" 1`] = ` + + + + + + + This is a suspicious request + + + If you approve this request, you might lose your assets. + + + + + See details + + + + + + + + + + } + /> + + + +`; + +exports[`BlockaidBanner should render correctly with list attack details 1`] = ` + + + + } + attackType="approval_farming" + style={ + Object { + "backgroundColor": "#D7384719", + "borderColor": "#D73847", + "borderLeftWidth": 4, + "borderRadius": 4, + "flexDirection": "row", + "padding": 12, + "paddingLeft": 8, + } + } + testID="banneralert" +> + + + + + + This is a deceptive request + + + If you approve this request, a third party known for scams might take all your assets. + + + + + See details + + + + + + + + + + } + /> + + + +`; + +exports[`BlockaidBanner should render correctly with string attack details 1`] = ` + + + + + + + This is a deceptive request + + + If you approve this request, a third party known for scams might take all your assets. + + + + + See details + + + + + + + + + + } + /> + + + +`; From aa72c6aa15350d26d3d8fafdd3dc9a0e18f62a22 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Mon, 12 Jun 2023 13:12:57 +0300 Subject: [PATCH 04/39] add a flag type Signed-off-by: Olusegun Akintayo --- .../UI/BlockaidBanner/BlockaidBanner.test.tsx | 4 ++++ app/components/UI/BlockaidBanner/BlockaidBanner.tsx | 9 +++++++-- .../UI/BlockaidBanner/BlockaidBanner.types.ts | 3 ++- .../__snapshots__/BlockaidBanner.test.tsx.snap | 10 +++++++--- 4 files changed, 20 insertions(+), 6 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx index a0646d70fd3..0ef485e146e 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx @@ -32,6 +32,7 @@ describe('BlockaidBanner', () => { it('should render correctly', () => { const wrapper = render( , @@ -43,6 +44,7 @@ describe('BlockaidBanner', () => { it('should render correctly with attackType "raw_signature_farming"', async () => { const wrapper = render( , @@ -63,6 +65,7 @@ describe('BlockaidBanner', () => { it('should render correctly with string attack details', async () => { const wrapper = render( , @@ -82,6 +85,7 @@ describe('BlockaidBanner', () => { it('should render correctly with list attack details', async () => { const wrapper = render( diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 917725d691b..dfeba7376d9 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -9,7 +9,8 @@ import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-l import Text from '../../../component-library/components/Texts/Text/Text'; const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { - const { attackType, onToggleShowDetails, attackDetails } = bannerProps; + const { flagType, attackType, onToggleShowDetails, attackDetails } = + bannerProps; let title = 'This is a deceptive request'; let description; @@ -55,7 +56,11 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { return ( void; + onToggleShowDetails?: () => void; }; \ No newline at end of file diff --git a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap index 8ba78fc365f..0c68fb12141 100644 --- a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap +++ b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap @@ -4,10 +4,11 @@ exports[`BlockaidBanner should render correctly 1`] = ` } attackType="approval_farming" + flagType="malicious" style={ Object { "backgroundColor": "#D7384719", @@ -495,6 +498,7 @@ exports[`BlockaidBanner should render correctly with string attack details 1`] = Date: Mon, 12 Jun 2023 14:57:46 +0300 Subject: [PATCH 05/39] Add attribution line fix tests Signed-off-by: Olusegun Akintayo --- .../UI/BlockaidBanner/BlockaidBanner.test.tsx | 16 + .../UI/BlockaidBanner/BlockaidBanner.tsx | 70 +++- .../UI/BlockaidBanner/BlockaidBanner.types.ts | 38 +- .../BlockaidBanner.test.tsx.snap | 357 ++++++++++++++++++ locales/languages/en.json | 13 + 5 files changed, 462 insertions(+), 32 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx index 0ef485e146e..a7158dc010c 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { fireEvent, render } from '@testing-library/react-native'; import BlockaidBanner from './BlockaidBanner'; import { Text } from 'react-native-svg'; @@ -62,6 +63,21 @@ describe('BlockaidBanner', () => { ).toBeDefined(); }); + it('should render correctly with attribution link', async () => { + const wrapper = render( + , + ); + + expect(wrapper).toMatchSnapshot(); + expect( + await wrapper.queryByTestId('blockaid-banner-attribution-line'), + ).toBeDefined(); + }); + it('should render correctly with string attack details', async () => { const wrapper = render( + StyleSheet.create({ + attributionLink: { color: colors.primary.default }, + shieldIcon: { marginRight: 5, color: colors.primary.default }, + accordionHeader: { + flexDirection: 'row', + alignItems: 'flex-start', + justifyContent: 'flex-start', + backgroundColor: colors.transparent, + }, + }); const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { const { flagType, attackType, onToggleShowDetails, attackDetails } = bannerProps; - let title = 'This is a deceptive request'; + let title = strings('blockaid_banner.title'); let description; switch (attackType) { case 'raw_signature_farming': - title = 'This is a suspicious request'; - description = 'If you approve this request, you might lose your assets.'; + title = strings('blockaid_banner.raw_signature_farming_title'); + description = strings( + 'blockaid_banner.raw_signature_farming_description', + ); break; case 'approval_farming': case 'set_approval_for_all_farming': case 'permit_farming': - description = - 'If you approve this request, a third party known for scams might take all your assets.'; + description = strings('blockaid_banner.approval_farming_description'); break; case 'transfer_farming': case 'transfer_from_farming': case 'raw_native_token_transfer': - description = - 'If you approve this request, a third party known for scams will take all your assets.'; + description = strings('blockaid_banner.transfer_farming_description'); break; case 'seaport_farming': - description = - 'If you approve this request, someone can steal your assets listed on OpenSea.'; + description = strings('blockaid_banner.seaport_farming_description'); break; case 'blur_farming': - description = - 'If you approve this request, someone can steal your assets listed on Blur.'; + description = strings('blockaid_banner.blur_farming_description'); break; case 'unfair_trade': default: - description = 'If you approve this request, you might lose your assets.'; + description = strings('blockaid_banner.unfair_trade_description'); break; } + const { colors } = useTheme(); + const styles = createStyles(colors); + const renderAttackDetails = () => typeof attackDetails === 'string' ? ( @@ -54,6 +71,23 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { attackDetails ); + const renderAttributionLink = () => { + const link = ( + { + Linking.openURL(strings('blockaid_banner.attribution_link')); + }} + > + {strings('blockaid_banner.attribution_link_name')} + + ); + + return link; + }; + return ( { > {renderAttackDetails()} + + + + {strings('blockaid_banner.attribution', { + attributionLink: renderAttributionLink(), + })} + ); }; diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts b/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts index 6c40405a540..f5ea7c0b520 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts @@ -1,21 +1,21 @@ -import { ReactNode } from "react"; -import { BannerAlertProps } from "../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.types"; +import { ReactNode } from 'react'; +import { BannerAlertProps } from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.types'; export type BlockaidBannerProps = BannerAlertProps & { - attackType: - | 'raw_signature_farming' - | 'approval_farming' - | 'set_approval_for_all_farming' - | 'permit_farming' - | 'transfer_farming' - | 'transfer_from_farming' - | 'raw_native_token_transfer' - | 'seaport_farming' - | 'blur_farming' - | 'unfair_trade' - | 'others' - - flagType: 'malicious' | 'warning' | 'benign'; - attackDetails: string | ReactNode; - onToggleShowDetails?: () => void; - }; \ No newline at end of file + attackType: + | 'raw_signature_farming' + | 'approval_farming' + | 'set_approval_for_all_farming' + | 'permit_farming' + | 'transfer_farming' + | 'transfer_from_farming' + | 'raw_native_token_transfer' + | 'seaport_farming' + | 'blur_farming' + | 'unfair_trade' + | 'others'; + + flagType: 'malicious' | 'warning' | 'benign'; + attackDetails: string | ReactNode; + onToggleShowDetails?: () => void; +}; diff --git a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap index 0c68fb12141..bfb1d7dbf22 100644 --- a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap +++ b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap @@ -153,6 +153,46 @@ exports[`BlockaidBanner should render correctly 1`] = ` } /> + + + ? + + Security advice by [object Object] + `; @@ -310,6 +350,243 @@ exports[`BlockaidBanner should render correctly with attackType "raw_signature_f } /> + + + ? + + Security advice by [object Object] + + + +`; + +exports[`BlockaidBanner should render correctly with attribution link 1`] = ` + + + + + + + This is a suspicious request + + + If you approve this request, you might lose your assets. + + + + + See details + + + + + + + + + + } + /> + + + + ? + + Security advice by [object Object] + `; @@ -490,6 +767,46 @@ exports[`BlockaidBanner should render correctly with list attack details 1`] = ` } /> + + + ? + + Security advice by [object Object] + `; @@ -647,6 +964,46 @@ exports[`BlockaidBanner should render correctly with string attack details 1`] = } /> + + + ? + + Security advice by [object Object] + `; diff --git a/locales/languages/en.json b/locales/languages/en.json index 3e13667b655..9cbe03ea7ac 100644 --- a/locales/languages/en.json +++ b/locales/languages/en.json @@ -1,4 +1,17 @@ { + "blockaid_banner": { + "title": "This is a deceptive request", + "attribution_link_name": "BlockAid", + "attribution_link": "https://blockaid.me", + "attribution": "Security advice by {{attributionLink}}", + "raw_signature_farming_title": "This is a suspicious request", + "raw_signature_farming_description": "If you approve this request, you might lose your assets.", + "approval_farming_description": "If you approve this request, a third party known for scams might take all your assets.", + "transfer_farming_description": "If you approve this request, a third party known for scams will take all your assets.", + "seaport_farming_description": "If you approve this request, someone can steal your assets listed on OpenSea.", + "blur_farming_description": "If you approve this request, someone can steal your assets listed on Blur.", + "unfair_trade": "If you approve this request, you might lose your assets." + }, "date": { "months": { "0": "Jan", From 38f036c6a2799ae5a8f3a98832d828f5f9d3cfbd Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Mon, 12 Jun 2023 15:03:52 +0300 Subject: [PATCH 06/39] add flag type to stories Signed-off-by: Olusegun Akintayo --- app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx index e66cd13041c..e1b5d3e4b40 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx @@ -52,6 +52,7 @@ export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => { onClose: () => console.log('closeButton clicked!'), attackType: 'raw_signature_farming', attackDetails, + flagType: 'malicious', }; }; From c5a33214ca187165340d084ab8feb147af8bb674 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Mon, 19 Jun 2023 14:01:12 +0300 Subject: [PATCH 07/39] update banner snapshot Signed-off-by: Olusegun Akintayo --- .../components/Banners/Banner/__snapshots__/Banner.test.tsx.snap | 1 - 1 file changed, 1 deletion(-) diff --git a/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap b/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap index 8672f4fea45..11e7d17f6e3 100644 --- a/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap +++ b/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap @@ -193,7 +193,6 @@ exports[`Banner should render correctly with a close button 1`] = ` Date: Fri, 23 Jun 2023 19:39:27 +0300 Subject: [PATCH 08/39] Organized import. Signed-off-by: Olusegun Akintayo --- app/components/UI/BlockaidBanner/BlockaidBanner.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 73d06cca6f6..9644feb5b45 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -1,16 +1,16 @@ // import Text from '../../../../../../component-library/components/Texts/Text'; +import { useTheme } from '@react-navigation/native'; import React from 'react'; +import { Linking, StyleSheet } from 'react-native'; +import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; +import { strings } from '../../../../locales/i18n'; import Accordion from '../../../component-library/components/Accordions/Accordion/Accordion'; -import BannerAlert from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert'; import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; -import { BlockaidBannerProps } from './BlockaidBanner.types'; import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; +import BannerAlert from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert'; import Text from '../../../component-library/components/Texts/Text/Text'; -import { strings } from '../../../../locales/i18n'; -import { Linking, StyleSheet } from 'react-native'; -import { useTheme } from '@react-navigation/native'; -import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; +import { BlockaidBannerProps } from './BlockaidBanner.types'; const createStyles = (colors: any) => StyleSheet.create({ From 8ba58e4ca41c8cfb5893d1ad3f3cc749e7dc825d Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Mon, 26 Jun 2023 14:33:25 +0300 Subject: [PATCH 09/39] Fix PR Comments Signed-off-by: Olusegun Akintayo --- .../UI/BlockaidBanner/AttributionLink.tsx | 31 +++++++++++++ .../UI/BlockaidBanner/BlockaidBanner.tsx | 43 ++++++++----------- 2 files changed, 48 insertions(+), 26 deletions(-) create mode 100644 app/components/UI/BlockaidBanner/AttributionLink.tsx diff --git a/app/components/UI/BlockaidBanner/AttributionLink.tsx b/app/components/UI/BlockaidBanner/AttributionLink.tsx new file mode 100644 index 00000000000..67f902666ee --- /dev/null +++ b/app/components/UI/BlockaidBanner/AttributionLink.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { strings } from '../../../../locales/i18n'; +import { useTheme } from '@react-navigation/native'; +import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from 'app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; +import { Linking, StyleSheet } from 'react-native'; +import Text from '../../../component-library/components/Texts/Text/Text'; + +const createStyles = (colors: any) => + StyleSheet.create({ + attributionLink: { color: colors.primary.default }, + }); + +const AttributionLink = () => { + const { colors } = useTheme(); + const styles = createStyles(colors); + + return ( + { + Linking.openURL(strings('blockaid_banner.attribution_link')); + }} + > + {strings('blockaid_banner.attribution_link_name')} + + ); +}; + +export default AttributionLink; diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 9644feb5b45..f92fd5da08a 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -1,16 +1,17 @@ // import Text from '../../../../../../component-library/components/Texts/Text'; -import { useTheme } from '@react-navigation/native'; import React from 'react'; -import { Linking, StyleSheet } from 'react-native'; -import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; import { strings } from '../../../../locales/i18n'; -import Accordion from '../../../component-library/components/Accordions/Accordion/Accordion'; +import { useTheme } from '@react-navigation/native'; +import { BlockaidBannerProps } from './BlockaidBanner.types'; import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; +import { StyleSheet } from 'react-native'; +import Accordion from '../../../component-library/components/Accordions/Accordion/Accordion'; import BannerAlert from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert'; +import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; import Text from '../../../component-library/components/Texts/Text/Text'; -import { BlockaidBannerProps } from './BlockaidBanner.types'; +import AttributionLink from './AttributionLink'; const createStyles = (colors: any) => StyleSheet.create({ @@ -24,9 +25,7 @@ const createStyles = (colors: any) => }, }); -const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { - const { flagType, attackType, onToggleShowDetails, attackDetails } = - bannerProps; +const getTitleDescription = (attackType: string) => { let title = strings('blockaid_banner.title'); let description; @@ -59,9 +58,18 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { break; } + return { title, description }; +}; + +const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { + const { flagType, attackType, onToggleShowDetails, attackDetails } = + bannerProps; + const { colors } = useTheme(); const styles = createStyles(colors); + const { title, description } = getTitleDescription(attackType); + const renderAttackDetails = () => typeof attackDetails === 'string' ? ( @@ -71,23 +79,6 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { attackDetails ); - const renderAttributionLink = () => { - const link = ( - { - Linking.openURL(strings('blockaid_banner.attribution_link')); - }} - > - {strings('blockaid_banner.attribution_link_name')} - - ); - - return link; - }; - return ( { > {strings('blockaid_banner.attribution', { - attributionLink: renderAttributionLink(), + attributionLink: , })} From 5c3b4489a6bcc489665efec3f887a4a7858edb59 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Tue, 27 Jun 2023 07:54:23 +0300 Subject: [PATCH 10/39] fix import path Signed-off-by: Olusegun Akintayo --- app/components/UI/BlockaidBanner/AttributionLink.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/UI/BlockaidBanner/AttributionLink.tsx b/app/components/UI/BlockaidBanner/AttributionLink.tsx index 67f902666ee..b49881e5a48 100644 --- a/app/components/UI/BlockaidBanner/AttributionLink.tsx +++ b/app/components/UI/BlockaidBanner/AttributionLink.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { strings } from '../../../../locales/i18n'; import { useTheme } from '@react-navigation/native'; -import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from 'app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; +import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; import { Linking, StyleSheet } from 'react-native'; import Text from '../../../component-library/components/Texts/Text/Text'; From 889b02ee175de614ed89a37c16c8d732ea135ca7 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Wed, 28 Jun 2023 13:05:32 +0300 Subject: [PATCH 11/39] house cleaning Signed-off-by: Olusegun Akintayo --- app/components/UI/BlockaidBanner/BlockaidBanner.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index f92fd5da08a..476108edb7c 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -1,5 +1,3 @@ -// import Text from '../../../../../../component-library/components/Texts/Text'; - import React from 'react'; import { strings } from '../../../../locales/i18n'; import { useTheme } from '@react-navigation/native'; From f7939856fb70ed81c2041219272ff59f2422150b Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Tue, 18 Jul 2023 09:21:59 +0100 Subject: [PATCH 12/39] Add horizontal header alignment Signed-off-by: Olusegun Akintayo --- .../foundation/AccordionHeader/AccordionHeader.tsx | 4 ++-- app/components/UI/BlockaidBanner/BlockaidBanner.tsx | 8 ++------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx index 52ac32b01a5..7567007b579 100644 --- a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx +++ b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx @@ -14,7 +14,7 @@ import Animated, { import { useStyles } from '../../../../../hooks'; import Icon, { IconSize, IconName } from '../../../../Icons/Icon'; import Text, { TextVariant } from '../../../../Texts/Text'; -import { ACCORDION_EXPAND_TRANSITION_DURATION } from '../../Accordion.constants'; +import { DEFAULT_ACCORDION_EXPANDDURATION } from '../../Accordion.constants'; // Internal dependencies. import styleSheet from './AccordionHeader.styles'; @@ -49,7 +49,7 @@ const AccordionHeader = ({ const onHeaderPressed = () => { rotation.value = withTiming(rotation.value + 180, { - duration: ACCORDION_EXPAND_TRANSITION_DURATION, + duration: DEFAULT_ACCORDION_EXPANDDURATION, easing: Easing.linear, }); onPress?.(); diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 476108edb7c..96327a5ce81 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -10,17 +10,12 @@ import BannerAlert from '../../../component-library/components/Banners/Banner/va import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; import Text from '../../../component-library/components/Texts/Text/Text'; import AttributionLink from './AttributionLink'; +import { AccordionHeaderHorizontalAlignment } from 'app/component-library/components/Accordions/Accordion'; const createStyles = (colors: any) => StyleSheet.create({ attributionLink: { color: colors.primary.default }, shieldIcon: { marginRight: 5, color: colors.primary.default }, - accordionHeader: { - flexDirection: 'row', - alignItems: 'flex-start', - justifyContent: 'flex-start', - backgroundColor: colors.transparent, - }, }); const getTitleDescription = (attackType: string) => { @@ -92,6 +87,7 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { title="See details" onPress={onToggleShowDetails} isExpanded={false} + horizontalAlignment={AccordionHeaderHorizontalAlignment.Start} > {renderAttackDetails()} From 3a18103ab8fb8efff9cbf96fa954b1e5a693345d Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Tue, 18 Jul 2023 12:00:41 +0100 Subject: [PATCH 13/39] fix imports Signed-off-by: Olusegun Akintayo --- app/components/UI/BlockaidBanner/BlockaidBanner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 96327a5ce81..f9ebc447b57 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { strings } from '../../../../locales/i18n'; import { useTheme } from '@react-navigation/native'; +import { AccordionHeaderHorizontalAlignment } from '../../../component-library/components/Accordions/Accordion'; import { BlockaidBannerProps } from './BlockaidBanner.types'; import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; @@ -10,7 +11,6 @@ import BannerAlert from '../../../component-library/components/Banners/Banner/va import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; import Text from '../../../component-library/components/Texts/Text/Text'; import AttributionLink from './AttributionLink'; -import { AccordionHeaderHorizontalAlignment } from 'app/component-library/components/Accordions/Accordion'; const createStyles = (colors: any) => StyleSheet.create({ From ea86998681f8c5bbf1090b978476606c4da7f64a Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Tue, 18 Jul 2023 14:54:31 +0100 Subject: [PATCH 14/39] Update snapshots Signed-off-by: Olusegun Akintayo --- .../BlockaidBanner.test.tsx.snap | 600 ++++++++---------- 1 file changed, 250 insertions(+), 350 deletions(-) diff --git a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap index bfb1d7dbf22..e968a283d46 100644 --- a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap +++ b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap @@ -73,86 +73,66 @@ exports[`BlockaidBanner should render correctly 1`] = ` > If you approve this request, a third party known for scams might take all your assets. - - + See details + + - - See details - - - - - - - - - - } - /> - + testID="accordionheader-arrow-icon" + width={16} + /> + + If you approve this request, you might lose your assets. - - - + + - See details - - - - - - - - - - } - /> - + testID="accordionheader-arrow-icon" + width={16} + /> + + If you approve this request, you might lose your assets. - - + See details + + - - See details - - - - - - - - - - } - /> - + testID="accordionheader-arrow-icon" + width={16} + /> + + If you approve this request, a third party known for scams might take all your assets. - - - + + - See details - - - - - - - - - - } - /> - + testID="accordionheader-arrow-icon" + width={16} + /> + + If you approve this request, a third party known for scams might take all your assets. - - + See details + + - - See details - - - - - - - - - - } - /> - + testID="accordionheader-arrow-icon" + width={16} + /> + + Date: Thu, 20 Jul 2023 16:54:54 +0100 Subject: [PATCH 15/39] Use proper typing Use an object and function instead of switch --- .../BlockaidBanner/BlockaidBanner.stories.tsx | 11 +- .../UI/BlockaidBanner/BlockaidBanner.test.tsx | 84 ++----- .../UI/BlockaidBanner/BlockaidBanner.tsx | 80 +++--- .../UI/BlockaidBanner/BlockaidBanner.types.ts | 32 +-- .../BlockaidBanner.test.tsx.snap | 238 +++--------------- app/components/UI/BlockaidBanner/utils.ts | 40 +++ locales/languages/en.json | 9 +- 7 files changed, 155 insertions(+), 339 deletions(-) create mode 100644 app/components/UI/BlockaidBanner/utils.ts diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx index e1b5d3e4b40..bfbb4988e6b 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx @@ -34,12 +34,6 @@ export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => { storybookPropsGroupID, ); - const attackDetails = text( - 'attackDetails', - 'Sample Attack Details', - storybookPropsGroupID, - ); - return { severity: severitySelector, title, @@ -51,8 +45,11 @@ export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => { }, onClose: () => console.log('closeButton clicked!'), attackType: 'raw_signature_farming', - attackDetails, flagType: 'malicious', + features: [ + 'Operator is an EOA', + 'Operator is untrusted according to previous activity', + ], }; }; diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx index a7158dc010c..4a390fed20f 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx @@ -1,41 +1,22 @@ import React from 'react'; import { fireEvent, render } from '@testing-library/react-native'; import BlockaidBanner from './BlockaidBanner'; -import { Text } from 'react-native-svg'; -import ListItem from '../../../components/Base/ListItem'; -import { FlatList } from 'react-native-gesture-handler'; -import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; -import { StyleSheet } from 'react-native'; describe('BlockaidBanner', () => { - const listItems = [ - { - title: 'attack_description_1', - description: 'We found attack vectors in this request', - }, - { - title: 'attack_description_2', - description: 'This request shows a fake token name and icon.', - }, - { - title: 'attack_description_3', - description: - 'If you approve this request, a third party known for scams might take all your assets.', - }, + 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 styles = StyleSheet.create({ - wrapper: { - padding: 15, - }, - }); - it('should render correctly', () => { const wrapper = render( , ); @@ -47,7 +28,7 @@ describe('BlockaidBanner', () => { , ); @@ -68,7 +49,7 @@ describe('BlockaidBanner', () => { , ); @@ -78,51 +59,12 @@ describe('BlockaidBanner', () => { ).toBeDefined(); }); - it('should render correctly with string attack details', async () => { - const wrapper = render( - , - ); - - expect(wrapper).toMatchSnapshot(); - expect(await wrapper.queryByTestId('accordion-header')).toBeDefined(); - expect( - await wrapper.queryByText('This is a string attack details'), - ).toBeNull(); - fireEvent.press(await wrapper.getByText('See details')); - expect( - await wrapper.getByText('This is a string attack details'), - ).toBeDefined(); - }); - it('should render correctly with list attack details', async () => { const wrapper = render( - ( - - - - - - - {item.description} - - - - )} - keyExtractor={(item) => item.title} - /> - - } + features={mockFeatures} />, ); @@ -146,5 +88,11 @@ describe('BlockaidBanner', () => { 'If you approve this request, a third party known for scams might take all your assets.', ), ).toBeDefined(); + expect(await wrapper.queryByText('Operator is an EOA')).toBeDefined(); + expect( + await wrapper.queryByText( + 'Operator is untrusted according to previous activity', + ), + ).toBeDefined(); }); }); diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index f9ebc447b57..0c5917c925c 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -2,15 +2,28 @@ import React from 'react'; import { strings } from '../../../../locales/i18n'; import { useTheme } from '@react-navigation/native'; import { AccordionHeaderHorizontalAlignment } from '../../../component-library/components/Accordions/Accordion'; -import { BlockaidBannerProps } from './BlockaidBanner.types'; +import { AttackType, BlockaidBannerProps } from './BlockaidBanner.types'; import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; +import { FlatList } from 'react-native-gesture-handler'; +import { + REASON_DESCRIPTION_I18N_KEY_MAP, + SUSPICIOUS_TITLED_REQUESTS, +} from './utils'; import { StyleSheet } from 'react-native'; import Accordion from '../../../component-library/components/Accordions/Accordion/Accordion'; +import AttributionLink from './AttributionLink'; import BannerAlert from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert'; import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; +import ListItem from '../../../components/Base/ListItem'; import Text from '../../../component-library/components/Texts/Text/Text'; -import AttributionLink from './AttributionLink'; + +const getTitle = (attackType: AttackType) => { + if (SUSPICIOUS_TITLED_REQUESTS.indexOf(attackType) >= 0) { + return strings('blockaid_banner.suspicious_request_title'); + } + return strings('blockaid_banner.deceptive_request_title'); +}; const createStyles = (colors: any) => StyleSheet.create({ @@ -18,45 +31,15 @@ const createStyles = (colors: any) => shieldIcon: { marginRight: 5, color: colors.primary.default }, }); -const getTitleDescription = (attackType: string) => { - let title = strings('blockaid_banner.title'); - let description; - - switch (attackType) { - case 'raw_signature_farming': - title = strings('blockaid_banner.raw_signature_farming_title'); - description = strings( - 'blockaid_banner.raw_signature_farming_description', - ); - break; - case 'approval_farming': - case 'set_approval_for_all_farming': - case 'permit_farming': - description = strings('blockaid_banner.approval_farming_description'); - break; - case 'transfer_farming': - case 'transfer_from_farming': - case 'raw_native_token_transfer': - description = strings('blockaid_banner.transfer_farming_description'); - break; - case 'seaport_farming': - description = strings('blockaid_banner.seaport_farming_description'); - break; - case 'blur_farming': - description = strings('blockaid_banner.blur_farming_description'); - break; - case 'unfair_trade': - default: - description = strings('blockaid_banner.unfair_trade_description'); - break; - } +const getTitleDescription = (attackType: AttackType) => { + const title = getTitle(attackType); + const description = strings(REASON_DESCRIPTION_I18N_KEY_MAP[attackType]); return { title, description }; }; const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { - const { flagType, attackType, onToggleShowDetails, attackDetails } = - bannerProps; + const { flagType, attackType, features, onToggleShowDetails } = bannerProps; const { colors } = useTheme(); const styles = createStyles(colors); @@ -64,15 +47,26 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { const { title, description } = getTitleDescription(attackType); const renderAttackDetails = () => - typeof attackDetails === 'string' ? ( - - {attackDetails} - - ) : ( - attackDetails + features.length <= 0 ? null : ( + ( + + + + + + + {item.description} + + + + )} + keyExtractor={(item) => item.title} + /> ); - return ( + return flagType === 'benign' ? null : ( void; }; diff --git a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap index e968a283d46..f36d3d4f1d2 100644 --- a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap +++ b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap @@ -2,8 +2,16 @@ exports[`BlockaidBanner should render correctly 1`] = ` - - - } attackType="approval_farming" - flagType="malicious" - style={ - Object { - "backgroundColor": "#D7384719", - "borderColor": "#D73847", - "borderLeftWidth": 4, - "borderRadius": 4, - "flexDirection": "row", - "padding": 12, - "paddingLeft": 8, - } + features={ + Array [ + "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", + ] } - testID="banneralert" -> - - - - - - This is a deceptive request - - - If you approve this request, a third party known for scams might take all your assets. - - - - See details - - - - - - - - ? - - Security advice by [object Object] - - - -`; - -exports[`BlockaidBanner should render correctly with string attack details 1`] = ` - = Object.freeze({ + rawSignatureFarming: 'raw_signature_farming', + approvalFarming: 'approval_farming', + setApprovalForAllFarming: 'set_approval_for_all_farming', + permitFarming: 'permit_farming', + transferFarming: 'transfer_farming', + transferFromFarming: 'transfer_from_farming', + rawNativeTokenTransfer: 'raw_native_token_transfer', + seaportFarming: 'seaport_farming', + blurFarming: 'blur_farming', + unfairTrade: 'unfair_trade', + tradeOrderFarming: 'trade_order_farming', + other: 'other', + maliciousDomain: 'malicious_domain', +}); + +export const REASON_DESCRIPTION_I18N_KEY_MAP = Object.freeze({ + [AttackTypes.rawSignatureFarming]: + 'blockaid_banner.raw_signature_farming_description', + [AttackTypes.approvalFarming]: 'blockaid_banner.approval_farming_description', + [AttackTypes.setApprovalForAllFarming]: + 'blockaid_banner.approval_farming_description', + [AttackTypes.permitFarming]: 'blockaid_banner.approval_farming_description', + [AttackTypes.transferFarming]: 'blockaid_banner.transfer_farming_description', + [AttackTypes.transferFromFarming]: + 'blockaid_banner.transfer_farming_description', + [AttackTypes.rawNativeTokenTransfer]: + 'blockaid_banner.transfer_farming_description', + [AttackTypes.seaportFarming]: 'blockaid_banner.seaport_farming_description', + [AttackTypes.blurFarming]: 'blockaid_banner.blur_farming_description', + [AttackTypes.unfairTrade]: 'blockaid_banner.unfair_trade_description', + [AttackTypes.tradeOrderFarming]: + 'blockaid_banner.trade_order_farming_description', + [AttackTypes.other]: 'blockaid_banner.other_description', + [AttackTypes.maliciousDomain]: 'blockaid_banner.malicious_domain_description', +}); + +export const SUSPICIOUS_TITLED_REQUESTS = ['raw_signature_farming']; diff --git a/locales/languages/en.json b/locales/languages/en.json index 9cbe03ea7ac..33d7da31ab0 100644 --- a/locales/languages/en.json +++ b/locales/languages/en.json @@ -1,16 +1,19 @@ { "blockaid_banner": { - "title": "This is a deceptive request", + "deceptive_request_title": "This is a deceptive request", "attribution_link_name": "BlockAid", "attribution_link": "https://blockaid.me", "attribution": "Security advice by {{attributionLink}}", - "raw_signature_farming_title": "This is a suspicious request", + "suspicious_request_title": "This is a suspicious request", "raw_signature_farming_description": "If you approve this request, you might lose your assets.", "approval_farming_description": "If you approve this request, a third party known for scams might take all your assets.", "transfer_farming_description": "If you approve this request, a third party known for scams will take all your assets.", "seaport_farming_description": "If you approve this request, someone can steal your assets listed on OpenSea.", "blur_farming_description": "If you approve this request, someone can steal your assets listed on Blur.", - "unfair_trade": "If you approve this request, you might lose your assets." + "unfair_trade_description": "If you approve this request, you might lose your assets.", + "trade_order_farming_description": "If you approve this request, you might lose your assets.", + "other_description": "If you approve this request, you might lose your assets.", + "malicious_domain_description": "You're interacting with a malicious domain. If you approve this request, you might lose your assets." }, "date": { "months": { From ee1386402bd1620ccd3f53b55f7299d02b9c3e75 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Thu, 20 Jul 2023 17:07:36 +0100 Subject: [PATCH 16/39] Fix imports in stories --- .../UI/BlockaidBanner/BlockaidBanner.stories.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx index bfbb4988e6b..fc64d71e7f3 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx @@ -2,16 +2,16 @@ import React from 'react'; import { storiesOf } from '@storybook/react-native'; import { BlockaidBannerProps } from './BlockaidBanner.types'; -import { BannerAlertSeverity } from 'app/component-library/components/Banners/Banner'; +import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; import { select, text } from '@storybook/addon-knobs'; import { DEFAULT_BANNERALERT_SEVERITY, SAMPLE_BANNERALERT_ACTIONBUTTONLABEL, SAMPLE_BANNERALERT_DESCRIPTION, SAMPLE_BANNERALERT_TITLE, -} from 'app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.constants'; -import { storybookPropsGroupID } from 'app/component-library/constants/storybook.constants'; -import { ButtonVariants } from 'app/component-library/components/Buttons/Button'; +} from '../../..//component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.constants'; +import { storybookPropsGroupID } from '../../..//component-library/constants/storybook.constants'; +import { ButtonVariants } from '../../..//component-library/components/Buttons/Button'; import BlockaidBanner from './BlockaidBanner'; export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => { From 59f1fa16d002b0773976eebc8fc1b4972841d702 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Thu, 20 Jul 2023 17:13:54 +0100 Subject: [PATCH 17/39] Fix couple of nits use blockaidbannerconstant instead of utils --- app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx | 3 ++- app/components/UI/BlockaidBanner/BlockaidBanner.tsx | 7 ++++--- .../{utils.ts => BlockaidBannerConstants.ts} | 2 ++ .../__snapshots__/BlockaidBanner.test.tsx.snap | 8 ++++---- locales/languages/en.json | 3 ++- 5 files changed, 14 insertions(+), 9 deletions(-) rename app/components/UI/BlockaidBanner/{utils.ts => BlockaidBannerConstants.ts} (96%) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx index 4a390fed20f..8e399e078a3 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { ATTRIBUTION_LINE_TEST_ID } from './BlockaidBannerConstants'; import { fireEvent, render } from '@testing-library/react-native'; import BlockaidBanner from './BlockaidBanner'; @@ -55,7 +56,7 @@ describe('BlockaidBanner', () => { expect(wrapper).toMatchSnapshot(); expect( - await wrapper.queryByTestId('blockaid-banner-attribution-line'), + await wrapper.queryByTestId(ATTRIBUTION_LINE_TEST_ID), ).toBeDefined(); }); diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 0c5917c925c..e3abb99555a 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -7,9 +7,10 @@ import { BannerAlertSeverity } from '../../../component-library/components/Banne import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; import { FlatList } from 'react-native-gesture-handler'; import { + ATTRIBUTION_LINE_TEST_ID, REASON_DESCRIPTION_I18N_KEY_MAP, SUSPICIOUS_TITLED_REQUESTS, -} from './utils'; +} from './BlockaidBannerConstants'; import { StyleSheet } from 'react-native'; import Accordion from '../../../component-library/components/Accordions/Accordion/Accordion'; import AttributionLink from './AttributionLink'; @@ -78,7 +79,7 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { {...bannerProps} > { {strings('blockaid_banner.attribution', { diff --git a/app/components/UI/BlockaidBanner/utils.ts b/app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts similarity index 96% rename from app/components/UI/BlockaidBanner/utils.ts rename to app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts index ba6b0e5c024..afb28cc36b4 100644 --- a/app/components/UI/BlockaidBanner/utils.ts +++ b/app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts @@ -1,3 +1,5 @@ +export const ATTRIBUTION_LINE_TEST_ID="blockaid-banner-attribution-line" + import { AttackType } from './BlockaidBanner.types'; export const AttackTypes: Record = Object.freeze({ diff --git a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap index f36d3d4f1d2..b6ad033d378 100644 --- a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap +++ b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap @@ -107,7 +107,7 @@ exports[`BlockaidBanner should render correctly 1`] = ` } testID="accordionheader-title" > - See details + [missing "en.see_details" translation] - See details + [missing "en.see_details" translation] - See details + [missing "en.see_details" translation] - See details + [missing "en.see_details" translation] Date: Thu, 20 Jul 2023 17:22:08 +0100 Subject: [PATCH 18/39] Sort imports Signed-off-by: Olusegun Akintayo --- app/components/UI/BlockaidBanner/AttributionLink.tsx | 4 ++-- app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx | 4 +--- app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts | 2 +- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/app/components/UI/BlockaidBanner/AttributionLink.tsx b/app/components/UI/BlockaidBanner/AttributionLink.tsx index b49881e5a48..7a102da4438 100644 --- a/app/components/UI/BlockaidBanner/AttributionLink.tsx +++ b/app/components/UI/BlockaidBanner/AttributionLink.tsx @@ -1,8 +1,8 @@ +import { useTheme } from '@react-navigation/native'; import React from 'react'; +import { Linking, StyleSheet } from 'react-native'; import { strings } from '../../../../locales/i18n'; -import { useTheme } from '@react-navigation/native'; import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; -import { Linking, StyleSheet } from 'react-native'; import Text from '../../../component-library/components/Texts/Text/Text'; const createStyles = (colors: any) => diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx index 8e399e078a3..feba02c610c 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx @@ -55,9 +55,7 @@ describe('BlockaidBanner', () => { ); expect(wrapper).toMatchSnapshot(); - expect( - await wrapper.queryByTestId(ATTRIBUTION_LINE_TEST_ID), - ).toBeDefined(); + expect(await wrapper.queryByTestId(ATTRIBUTION_LINE_TEST_ID)).toBeDefined(); }); it('should render correctly with list attack details', async () => { diff --git a/app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts b/app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts index afb28cc36b4..aa7d2e6fd8d 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts +++ b/app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts @@ -1,4 +1,4 @@ -export const ATTRIBUTION_LINE_TEST_ID="blockaid-banner-attribution-line" +export const ATTRIBUTION_LINE_TEST_ID = 'blockaid-banner-attribution-line'; import { AttackType } from './BlockaidBanner.types'; From faaccc9a144423e24492f643cfc0e22a95ef226d Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Thu, 20 Jul 2023 17:25:03 +0100 Subject: [PATCH 19/39] fixed see details i18n Signed-off-by: Olusegun Akintayo --- app/components/UI/BlockaidBanner/BlockaidBanner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index e3abb99555a..eeb7f8c661d 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -79,7 +79,7 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { {...bannerProps} > Date: Thu, 20 Jul 2023 17:27:56 +0100 Subject: [PATCH 20/39] Fix snapshot --- .../__snapshots__/BlockaidBanner.test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap index b6ad033d378..f36d3d4f1d2 100644 --- a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap +++ b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap @@ -107,7 +107,7 @@ exports[`BlockaidBanner should render correctly 1`] = ` } testID="accordionheader-title" > - [missing "en.see_details" translation] + See details - [missing "en.see_details" translation] + See details - [missing "en.see_details" translation] + See details - [missing "en.see_details" translation] + See details Date: Thu, 20 Jul 2023 20:50:43 +0100 Subject: [PATCH 21/39] Sorted imports --- .../UI/BlockaidBanner/AttributionLink.tsx | 8 +++-- .../BlockaidBanner/BlockaidBanner.stories.tsx | 18 +++++------ .../UI/BlockaidBanner/BlockaidBanner.test.tsx | 4 ++- .../UI/BlockaidBanner/BlockaidBanner.tsx | 32 +++++++++++-------- .../UI/BlockaidBanner/BlockaidBanner.types.ts | 4 ++- 5 files changed, 39 insertions(+), 27 deletions(-) diff --git a/app/components/UI/BlockaidBanner/AttributionLink.tsx b/app/components/UI/BlockaidBanner/AttributionLink.tsx index 7a102da4438..fb12f204fce 100644 --- a/app/components/UI/BlockaidBanner/AttributionLink.tsx +++ b/app/components/UI/BlockaidBanner/AttributionLink.tsx @@ -1,8 +1,12 @@ -import { useTheme } from '@react-navigation/native'; import React from 'react'; import { Linking, StyleSheet } from 'react-native'; + +import { useTheme } from '@react-navigation/native'; + import { strings } from '../../../../locales/i18n'; -import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; +import { + DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT +} from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; import Text from '../../../component-library/components/Texts/Text/Text'; const createStyles = (colors: any) => diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx index fc64d71e7f3..02873c8af34 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx @@ -1,18 +1,18 @@ /* eslint-disable no-console */ import React from 'react'; + +import { select, text } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react-native'; -import { BlockaidBannerProps } from './BlockaidBanner.types'; + import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; -import { select, text } from '@storybook/addon-knobs'; import { - DEFAULT_BANNERALERT_SEVERITY, - SAMPLE_BANNERALERT_ACTIONBUTTONLABEL, - SAMPLE_BANNERALERT_DESCRIPTION, - SAMPLE_BANNERALERT_TITLE, -} from '../../..//component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.constants'; -import { storybookPropsGroupID } from '../../..//component-library/constants/storybook.constants'; -import { ButtonVariants } from '../../..//component-library/components/Buttons/Button'; + DEFAULT_BANNERALERT_SEVERITY, SAMPLE_BANNERALERT_ACTIONBUTTONLABEL, + SAMPLE_BANNERALERT_DESCRIPTION, SAMPLE_BANNERALERT_TITLE +} from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.constants'; +import { ButtonVariants } from '../../../component-library/components/Buttons/Button'; +import { storybookPropsGroupID } from '../../../component-library/constants/storybook.constants'; import BlockaidBanner from './BlockaidBanner'; +import { BlockaidBannerProps } from './BlockaidBanner.types'; export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => { const severitySelector = select( diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx index feba02c610c..9ee44958a58 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx @@ -1,7 +1,9 @@ import React from 'react'; -import { ATTRIBUTION_LINE_TEST_ID } from './BlockaidBannerConstants'; + import { fireEvent, render } from '@testing-library/react-native'; + import BlockaidBanner from './BlockaidBanner'; +import { ATTRIBUTION_LINE_TEST_ID } from './BlockaidBannerConstants'; describe('BlockaidBanner', () => { const mockFeatures = [ diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index eeb7f8c661d..a0d6cfceed5 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -1,23 +1,27 @@ import React from 'react'; -import { strings } from '../../../../locales/i18n'; -import { useTheme } from '@react-navigation/native'; -import { AccordionHeaderHorizontalAlignment } from '../../../component-library/components/Accordions/Accordion'; -import { AttackType, BlockaidBannerProps } from './BlockaidBanner.types'; -import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; -import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; +import { StyleSheet } from 'react-native'; import { FlatList } from 'react-native-gesture-handler'; +import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; + +import { useTheme } from '@react-navigation/native'; + +import { strings } from '../../../../locales/i18n'; import { - ATTRIBUTION_LINE_TEST_ID, - REASON_DESCRIPTION_I18N_KEY_MAP, - SUSPICIOUS_TITLED_REQUESTS, -} from './BlockaidBannerConstants'; -import { StyleSheet } from 'react-native'; + AccordionHeaderHorizontalAlignment +} from '../../../component-library/components/Accordions/Accordion'; import Accordion from '../../../component-library/components/Accordions/Accordion/Accordion'; -import AttributionLink from './AttributionLink'; +import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; +import { + DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT +} from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; import BannerAlert from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert'; -import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; -import ListItem from '../../../components/Base/ListItem'; import Text from '../../../component-library/components/Texts/Text/Text'; +import ListItem from '../../../components/Base/ListItem'; +import AttributionLink from './AttributionLink'; +import { AttackType, BlockaidBannerProps } from './BlockaidBanner.types'; +import { + ATTRIBUTION_LINE_TEST_ID, REASON_DESCRIPTION_I18N_KEY_MAP, SUSPICIOUS_TITLED_REQUESTS +} from './BlockaidBannerConstants'; const getTitle = (attackType: AttackType) => { if (SUSPICIOUS_TITLED_REQUESTS.indexOf(attackType) >= 0) { diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts b/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts index 4891ea35fa0..a82f527636a 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts @@ -1,4 +1,6 @@ -import { BannerAlertProps } from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.types'; +import { + BannerAlertProps +} from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.types'; export type AttackType = | 'raw_signature_farming' From 888e4979f741bd487edb1d2a6dd9687366073b32 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Mon, 24 Jul 2023 17:07:40 +0100 Subject: [PATCH 22/39] Lint fixes --- app/components/UI/BlockaidBanner/AttributionLink.tsx | 4 +--- .../UI/BlockaidBanner/BlockaidBanner.stories.tsx | 6 ++++-- app/components/UI/BlockaidBanner/BlockaidBanner.tsx | 12 +++++------- .../UI/BlockaidBanner/BlockaidBanner.types.ts | 4 +--- 4 files changed, 11 insertions(+), 15 deletions(-) diff --git a/app/components/UI/BlockaidBanner/AttributionLink.tsx b/app/components/UI/BlockaidBanner/AttributionLink.tsx index fb12f204fce..22bc63193d7 100644 --- a/app/components/UI/BlockaidBanner/AttributionLink.tsx +++ b/app/components/UI/BlockaidBanner/AttributionLink.tsx @@ -4,9 +4,7 @@ import { Linking, StyleSheet } from 'react-native'; import { useTheme } from '@react-navigation/native'; import { strings } from '../../../../locales/i18n'; -import { - DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT -} from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; +import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; import Text from '../../../component-library/components/Texts/Text/Text'; const createStyles = (colors: any) => diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx index 02873c8af34..5384d04d92d 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx @@ -6,8 +6,10 @@ import { storiesOf } from '@storybook/react-native'; import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; import { - DEFAULT_BANNERALERT_SEVERITY, SAMPLE_BANNERALERT_ACTIONBUTTONLABEL, - SAMPLE_BANNERALERT_DESCRIPTION, SAMPLE_BANNERALERT_TITLE + DEFAULT_BANNERALERT_SEVERITY, + SAMPLE_BANNERALERT_ACTIONBUTTONLABEL, + SAMPLE_BANNERALERT_DESCRIPTION, + SAMPLE_BANNERALERT_TITLE, } from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.constants'; import { ButtonVariants } from '../../../component-library/components/Buttons/Button'; import { storybookPropsGroupID } from '../../../component-library/constants/storybook.constants'; diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index a0d6cfceed5..2a4f38c6319 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -6,21 +6,19 @@ import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; import { useTheme } from '@react-navigation/native'; import { strings } from '../../../../locales/i18n'; -import { - AccordionHeaderHorizontalAlignment -} from '../../../component-library/components/Accordions/Accordion'; +import { AccordionHeaderHorizontalAlignment } from '../../../component-library/components/Accordions/Accordion'; import Accordion from '../../../component-library/components/Accordions/Accordion/Accordion'; import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; -import { - DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT -} from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; +import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; import BannerAlert from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert'; import Text from '../../../component-library/components/Texts/Text/Text'; import ListItem from '../../../components/Base/ListItem'; import AttributionLink from './AttributionLink'; import { AttackType, BlockaidBannerProps } from './BlockaidBanner.types'; import { - ATTRIBUTION_LINE_TEST_ID, REASON_DESCRIPTION_I18N_KEY_MAP, SUSPICIOUS_TITLED_REQUESTS + ATTRIBUTION_LINE_TEST_ID, + REASON_DESCRIPTION_I18N_KEY_MAP, + SUSPICIOUS_TITLED_REQUESTS, } from './BlockaidBannerConstants'; const getTitle = (attackType: AttackType) => { diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts b/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts index a82f527636a..4891ea35fa0 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts @@ -1,6 +1,4 @@ -import { - BannerAlertProps -} from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.types'; +import { BannerAlertProps } from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.types'; export type AttackType = | 'raw_signature_farming' From a40f3e5f1aef0ee1fd55fac6969cb81afc56cec9 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Tue, 25 Jul 2023 12:57:50 +0100 Subject: [PATCH 23/39] check flagType early --- .../UI/BlockaidBanner/BlockaidBanner.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 2a4f38c6319..db35c3691ee 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -6,19 +6,21 @@ import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; import { useTheme } from '@react-navigation/native'; import { strings } from '../../../../locales/i18n'; -import { AccordionHeaderHorizontalAlignment } from '../../../component-library/components/Accordions/Accordion'; +import { + AccordionHeaderHorizontalAlignment +} from '../../../component-library/components/Accordions/Accordion'; import Accordion from '../../../component-library/components/Accordions/Accordion/Accordion'; import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; -import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; +import { + DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT +} from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; import BannerAlert from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert'; import Text from '../../../component-library/components/Texts/Text/Text'; import ListItem from '../../../components/Base/ListItem'; import AttributionLink from './AttributionLink'; import { AttackType, BlockaidBannerProps } from './BlockaidBanner.types'; import { - ATTRIBUTION_LINE_TEST_ID, - REASON_DESCRIPTION_I18N_KEY_MAP, - SUSPICIOUS_TITLED_REQUESTS, + ATTRIBUTION_LINE_TEST_ID, REASON_DESCRIPTION_I18N_KEY_MAP, SUSPICIOUS_TITLED_REQUESTS } from './BlockaidBannerConstants'; const getTitle = (attackType: AttackType) => { @@ -44,6 +46,10 @@ const getTitleDescription = (attackType: AttackType) => { const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { const { flagType, attackType, features, onToggleShowDetails } = bannerProps; + if(flagType === 'benign') { + return null; + } + const { colors } = useTheme(); const styles = createStyles(colors); @@ -69,7 +75,7 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { /> ); - return flagType === 'benign' ? null : ( + return ( Date: Tue, 25 Jul 2023 14:03:43 +0100 Subject: [PATCH 24/39] lint fixes Signed-off-by: Olusegun Akintayo --- .../UI/BlockaidBanner/BlockaidBanner.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index db35c3691ee..8fea5da190a 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -6,21 +6,19 @@ import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; import { useTheme } from '@react-navigation/native'; import { strings } from '../../../../locales/i18n'; -import { - AccordionHeaderHorizontalAlignment -} from '../../../component-library/components/Accordions/Accordion'; +import { AccordionHeaderHorizontalAlignment } from '../../../component-library/components/Accordions/Accordion'; import Accordion from '../../../component-library/components/Accordions/Accordion/Accordion'; import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; -import { - DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT -} from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; +import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; import BannerAlert from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert'; import Text from '../../../component-library/components/Texts/Text/Text'; import ListItem from '../../../components/Base/ListItem'; import AttributionLink from './AttributionLink'; import { AttackType, BlockaidBannerProps } from './BlockaidBanner.types'; import { - ATTRIBUTION_LINE_TEST_ID, REASON_DESCRIPTION_I18N_KEY_MAP, SUSPICIOUS_TITLED_REQUESTS + ATTRIBUTION_LINE_TEST_ID, + REASON_DESCRIPTION_I18N_KEY_MAP, + SUSPICIOUS_TITLED_REQUESTS, } from './BlockaidBannerConstants'; const getTitle = (attackType: AttackType) => { @@ -46,11 +44,12 @@ const getTitleDescription = (attackType: AttackType) => { const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { const { flagType, attackType, features, onToggleShowDetails } = bannerProps; - if(flagType === 'benign') { + const { colors } = useTheme(); + + if (flagType === 'benign') { return null; } - const { colors } = useTheme(); const styles = createStyles(colors); const { title, description } = getTitleDescription(attackType); From ddd486cb11ff2d725d040df61dace919903adaa3 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Wed, 26 Jul 2023 15:18:00 +0100 Subject: [PATCH 25/39] Sort attack types in alphabetical order Use enums --- .../BlockaidBanner/BlockaidBanner.stories.tsx | 6 +-- .../UI/BlockaidBanner/BlockaidBanner.test.tsx | 18 +++---- .../UI/BlockaidBanner/BlockaidBanner.tsx | 6 +-- .../UI/BlockaidBanner/BlockaidBanner.types.ts | 37 ++++++++------ .../BlockaidBanner/BlockaidBannerConstants.ts | 48 +++++++------------ 5 files changed, 53 insertions(+), 62 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx index 5384d04d92d..82fe89f3d05 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx @@ -14,7 +14,7 @@ import { import { ButtonVariants } from '../../../component-library/components/Buttons/Button'; import { storybookPropsGroupID } from '../../../component-library/constants/storybook.constants'; import BlockaidBanner from './BlockaidBanner'; -import { BlockaidBannerProps } from './BlockaidBanner.types'; +import { AttackType, BlockaidBannerProps, FlagType } from './BlockaidBanner.types'; export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => { const severitySelector = select( @@ -46,8 +46,8 @@ export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => { onPress: () => console.log('actionButton clicked!'), }, onClose: () => console.log('closeButton clicked!'), - attackType: 'raw_signature_farming', - flagType: 'malicious', + attackType: AttackType.rawSignatureFarming, + flagType: FlagType.malicious, features: [ 'Operator is an EOA', 'Operator is untrusted according to previous activity', diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx index 9ee44958a58..0618dab4e5b 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx @@ -4,6 +4,7 @@ import { fireEvent, render } from '@testing-library/react-native'; import BlockaidBanner from './BlockaidBanner'; import { ATTRIBUTION_LINE_TEST_ID } from './BlockaidBannerConstants'; +import { AttackType, FlagType } from './BlockaidBanner.types'; describe('BlockaidBanner', () => { const mockFeatures = [ @@ -17,8 +18,8 @@ describe('BlockaidBanner', () => { it('should render correctly', () => { const wrapper = render( , ); @@ -29,8 +30,8 @@ describe('BlockaidBanner', () => { it('should render correctly with attackType "raw_signature_farming"', async () => { const wrapper = render( , ); @@ -50,21 +51,20 @@ describe('BlockaidBanner', () => { it('should render correctly with attribution link', async () => { const wrapper = render( , ); - expect(wrapper).toMatchSnapshot(); expect(await wrapper.queryByTestId(ATTRIBUTION_LINE_TEST_ID)).toBeDefined(); }); it('should render correctly with list attack details', async () => { const wrapper = render( , ); diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 8fea5da190a..688f1cc5d8c 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -14,7 +14,7 @@ import BannerAlert from '../../../component-library/components/Banners/Banner/va import Text from '../../../component-library/components/Texts/Text/Text'; import ListItem from '../../../components/Base/ListItem'; import AttributionLink from './AttributionLink'; -import { AttackType, BlockaidBannerProps } from './BlockaidBanner.types'; +import { AttackType, BlockaidBannerProps, FlagType } from './BlockaidBanner.types'; import { ATTRIBUTION_LINE_TEST_ID, REASON_DESCRIPTION_I18N_KEY_MAP, @@ -46,7 +46,7 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { const { colors } = useTheme(); - if (flagType === 'benign') { + if (flagType === FlagType.benign) { return null; } @@ -77,7 +77,7 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { return ( void; }; diff --git a/app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts b/app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts index aa7d2e6fd8d..7097e20c63d 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts +++ b/app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts @@ -2,41 +2,25 @@ export const ATTRIBUTION_LINE_TEST_ID = 'blockaid-banner-attribution-line'; import { AttackType } from './BlockaidBanner.types'; -export const AttackTypes: Record = Object.freeze({ - rawSignatureFarming: 'raw_signature_farming', - approvalFarming: 'approval_farming', - setApprovalForAllFarming: 'set_approval_for_all_farming', - permitFarming: 'permit_farming', - transferFarming: 'transfer_farming', - transferFromFarming: 'transfer_from_farming', - rawNativeTokenTransfer: 'raw_native_token_transfer', - seaportFarming: 'seaport_farming', - blurFarming: 'blur_farming', - unfairTrade: 'unfair_trade', - tradeOrderFarming: 'trade_order_farming', - other: 'other', - maliciousDomain: 'malicious_domain', -}); - export const REASON_DESCRIPTION_I18N_KEY_MAP = Object.freeze({ - [AttackTypes.rawSignatureFarming]: + [AttackType.approvalFarming]: 'blockaid_banner.approval_farming_description', + [AttackType.blurFarming]: 'blockaid_banner.blur_farming_description', + [AttackType.maliciousDomain]: 'blockaid_banner.malicious_domain_description', + [AttackType.other]: 'blockaid_banner.other_description', + [AttackType.permitFarming]: 'blockaid_banner.approval_farming_description', + [AttackType.rawNativeTokenTransfer]: + 'blockaid_banner.transfer_farming_description', + [AttackType.rawSignatureFarming]: 'blockaid_banner.raw_signature_farming_description', - [AttackTypes.approvalFarming]: 'blockaid_banner.approval_farming_description', - [AttackTypes.setApprovalForAllFarming]: + [AttackType.seaportFarming]: 'blockaid_banner.seaport_farming_description', + [AttackType.setApprovalForAllFarming]: 'blockaid_banner.approval_farming_description', - [AttackTypes.permitFarming]: 'blockaid_banner.approval_farming_description', - [AttackTypes.transferFarming]: 'blockaid_banner.transfer_farming_description', - [AttackTypes.transferFromFarming]: - 'blockaid_banner.transfer_farming_description', - [AttackTypes.rawNativeTokenTransfer]: - 'blockaid_banner.transfer_farming_description', - [AttackTypes.seaportFarming]: 'blockaid_banner.seaport_farming_description', - [AttackTypes.blurFarming]: 'blockaid_banner.blur_farming_description', - [AttackTypes.unfairTrade]: 'blockaid_banner.unfair_trade_description', - [AttackTypes.tradeOrderFarming]: + [AttackType.tradeOrderFarming]: 'blockaid_banner.trade_order_farming_description', - [AttackTypes.other]: 'blockaid_banner.other_description', - [AttackTypes.maliciousDomain]: 'blockaid_banner.malicious_domain_description', + [AttackType.transferFarming]: 'blockaid_banner.transfer_farming_description', + [AttackType.transferFromFarming]: + 'blockaid_banner.transfer_farming_description', + [AttackType.unfairTrade]: 'blockaid_banner.unfair_trade_description', }); -export const SUSPICIOUS_TITLED_REQUESTS = ['raw_signature_farming']; +export const SUSPICIOUS_TITLED_REQUESTS = [AttackType.rawSignatureFarming]; From 41ab8269d65bc424a3a534b9b53c890b43d2ea28 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Thu, 27 Jul 2023 08:06:39 +0100 Subject: [PATCH 26/39] changes to make it look good when added to transaction page --- .../UI/BlockaidBanner/AttributionLink.tsx | 3 +- .../BlockaidBanner/BlockaidBanner.stories.tsx | 6 +- .../UI/BlockaidBanner/BlockaidBanner.tsx | 90 +++++++++++-------- .../UI/BlockaidBanner/BlockaidBanner.types.ts | 10 +-- locales/languages/en.json | 2 +- 5 files changed, 64 insertions(+), 47 deletions(-) diff --git a/app/components/UI/BlockaidBanner/AttributionLink.tsx b/app/components/UI/BlockaidBanner/AttributionLink.tsx index 22bc63193d7..4b2de700804 100644 --- a/app/components/UI/BlockaidBanner/AttributionLink.tsx +++ b/app/components/UI/BlockaidBanner/AttributionLink.tsx @@ -1,11 +1,10 @@ import React from 'react'; import { Linking, StyleSheet } from 'react-native'; -import { useTheme } from '@react-navigation/native'; - import { strings } from '../../../../locales/i18n'; import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; import Text from '../../../component-library/components/Texts/Text/Text'; +import { useTheme } from '../../../util/theme'; const createStyles = (colors: any) => StyleSheet.create({ diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx index 82fe89f3d05..2b06355261e 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx @@ -14,7 +14,11 @@ import { import { ButtonVariants } from '../../../component-library/components/Buttons/Button'; import { storybookPropsGroupID } from '../../../component-library/constants/storybook.constants'; import BlockaidBanner from './BlockaidBanner'; -import { AttackType, BlockaidBannerProps, FlagType } from './BlockaidBanner.types'; +import { + AttackType, + BlockaidBannerProps, + FlagType, +} from './BlockaidBanner.types'; export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => { const severitySelector = select( diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 688f1cc5d8c..3a90f699982 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -1,9 +1,10 @@ +import { + IconColor, + IconName, + IconSize, +} from '../../../component-library/components/Icons/Icon'; import React from 'react'; -import { StyleSheet } from 'react-native'; -import { FlatList } from 'react-native-gesture-handler'; -import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; - -import { useTheme } from '@react-navigation/native'; +import { StyleSheet, ViewStyle } from 'react-native'; import { strings } from '../../../../locales/i18n'; import { AccordionHeaderHorizontalAlignment } from '../../../component-library/components/Accordions/Accordion'; @@ -11,15 +12,20 @@ import Accordion from '../../../component-library/components/Accordions/Accordio import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; import BannerAlert from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert'; +import Icon from '../../../component-library/components/Icons/Icon/Icon'; import Text from '../../../component-library/components/Texts/Text/Text'; -import ListItem from '../../../components/Base/ListItem'; import AttributionLink from './AttributionLink'; -import { AttackType, BlockaidBannerProps, FlagType } from './BlockaidBanner.types'; +import { + AttackType, + BlockaidBannerProps, + FlagType, +} from './BlockaidBanner.types'; import { ATTRIBUTION_LINE_TEST_ID, REASON_DESCRIPTION_I18N_KEY_MAP, SUSPICIOUS_TITLED_REQUESTS, } from './BlockaidBannerConstants'; +import { View } from 'react-native-animatable'; const getTitle = (attackType: AttackType) => { if (SUSPICIOUS_TITLED_REQUESTS.indexOf(attackType) >= 0) { @@ -28,10 +34,19 @@ const getTitle = (attackType: AttackType) => { return strings('blockaid_banner.deceptive_request_title'); }; -const createStyles = (colors: any) => +const createStyles = () => StyleSheet.create({ - attributionLink: { color: colors.primary.default }, - shieldIcon: { marginRight: 5, color: colors.primary.default }, + attributionBase: Object.assign({ + height: 24, + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'flex-start', + } as ViewStyle), + attributionItem: { + marginLeft: 4, + }, + details: { marginLeft: 4 }, + shieldIcon: { marginTop: 4 }, }); const getTitleDescription = (attackType: AttackType) => { @@ -44,34 +59,21 @@ const getTitleDescription = (attackType: AttackType) => { const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { const { flagType, attackType, features, onToggleShowDetails } = bannerProps; - const { colors } = useTheme(); - if (flagType === FlagType.benign) { return null; } - const styles = createStyles(colors); + const styles = createStyles(); const { title, description } = getTitleDescription(attackType); const renderAttackDetails = () => features.length <= 0 ? null : ( - ( - - - - - - - {item.description} - - - - )} - keyExtractor={(item) => item.title} - /> + + {features.map((feature, i) => ( + • {feature} + ))} + ); return ( @@ -94,15 +96,27 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { {renderAttackDetails()} - - - {strings('blockaid_banner.attribution', { - attributionLink: , - })} - + + + + + + + {strings('blockaid_banner.attribution')} + + + + + + ); }; diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts b/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts index a1d76af7a56..5ed165ac480 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts @@ -7,19 +7,19 @@ export enum AttackType { other = 'other', permitFarming = 'permit_farming', rawNativeTokenTransfer = 'raw_native_token_transfer', - rawSignatureFarming = 'raw_signature_farming', + rawSignatureFarming = 'raw_signature_farming', seaportFarming = 'seaport_farming', - setApprovalForAllFarming = 'set_approval_for_all_farming', + setApprovalForAllFarming = 'set_approval_for_all_farming', tradeOrderFarming = 'trade_order_farming', transferFarming = 'transfer_farming', - transferFromFarming = 'transfer_from_farming', - unfairTrade = 'unfair_trade', + transferFromFarming = 'transfer_from_farming', + unfairTrade = 'unfair_trade', } export enum FlagType { benign = 'benign', malicious = 'malicious', - warning = 'warning', + warning = 'warning', } export type BlockaidBannerProps = BannerAlertProps & { diff --git a/locales/languages/en.json b/locales/languages/en.json index a057715164b..eb115870d90 100644 --- a/locales/languages/en.json +++ b/locales/languages/en.json @@ -3,7 +3,7 @@ "deceptive_request_title": "This is a deceptive request", "attribution_link_name": "BlockAid", "attribution_link": "https://blockaid.me", - "attribution": "Security advice by {{attributionLink}}", + "attribution": "Security advice by ", "suspicious_request_title": "This is a suspicious request", "raw_signature_farming_description": "If you approve this request, you might lose your assets.", "approval_farming_description": "If you approve this request, a third party known for scams might take all your assets.", From 6e01e02a9a4a00198d9e548e27f6947ab553877f Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Fri, 28 Jul 2023 07:33:41 +0100 Subject: [PATCH 27/39] margin between lines to make it look like figma sorted en.json alphabetically Signed-off-by: Olusegun Akintayo --- .../UI/BlockaidBanner/BlockaidBanner.tsx | 16 ++++++++++--- locales/languages/en.json | 24 +++++++++---------- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 3a90f699982..60a8c6bf271 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -36,6 +36,10 @@ const getTitle = (attackType: AttackType) => { const createStyles = () => StyleSheet.create({ + accordionBase: Object.assign({ + marginTop: 10, + marginBottom: 10, + } as ViewStyle), attributionBase: Object.assign({ height: 24, flexDirection: 'row', @@ -43,9 +47,12 @@ const createStyles = () => alignItems: 'flex-start', } as ViewStyle), attributionItem: { - marginLeft: 4, + marginRight: 4, + }, + detailsItem: { + marginBottom: 4, }, - details: { marginLeft: 4 }, + details: { marginLeft: 10, marginBottom: 10 }, shieldIcon: { marginTop: 4 }, }); @@ -71,7 +78,9 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { features.length <= 0 ? null : ( {features.map((feature, i) => ( - • {feature} + + • {feature} + ))} ); @@ -92,6 +101,7 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { onPress={onToggleShowDetails} isExpanded={false} horizontalAlignment={AccordionHeaderHorizontalAlignment.Start} + style={styles.accordionBase} > {renderAttackDetails()} diff --git a/locales/languages/en.json b/locales/languages/en.json index eb115870d90..278c186d168 100644 --- a/locales/languages/en.json +++ b/locales/languages/en.json @@ -1,20 +1,20 @@ { "blockaid_banner": { - "deceptive_request_title": "This is a deceptive request", - "attribution_link_name": "BlockAid", - "attribution_link": "https://blockaid.me", - "attribution": "Security advice by ", - "suspicious_request_title": "This is a suspicious request", - "raw_signature_farming_description": "If you approve this request, you might lose your assets.", "approval_farming_description": "If you approve this request, a third party known for scams might take all your assets.", - "transfer_farming_description": "If you approve this request, a third party known for scams will take all your assets.", - "seaport_farming_description": "If you approve this request, someone can steal your assets listed on OpenSea.", + "attribution": "Security advice by", + "attribution_link": "https://blockaid.me", + "attribution_link_name": "BlockAid", "blur_farming_description": "If you approve this request, someone can steal your assets listed on Blur.", - "unfair_trade_description": "If you approve this request, you might lose your assets.", - "trade_order_farming_description": "If you approve this request, you might lose your assets.", - "other_description": "If you approve this request, you might lose your assets.", + "deceptive_request_title": "This is a deceptive request", "malicious_domain_description": "You're interacting with a malicious domain. If you approve this request, you might lose your assets.", - "see_details": "See details" + "other_description": "If you approve this request, you might lose your assets.", + "raw_signature_farming_description": "If you approve this request, you might lose your assets.", + "seaport_farming_description": "If you approve this request, someone can steal your assets listed on OpenSea.", + "see_details": "See details", + "suspicious_request_title": "This is a suspicious request", + "trade_order_farming_description": "If you approve this request, you might lose your assets.", + "transfer_farming_description": "If you approve this request, a third party known for scams will take all your assets.", + "unfair_trade_description": "If you approve this request, you might lose your assets." }, "date": { "months": { From bf8dbde4046542c9fe775f06d3f7a12319da68ac Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Fri, 28 Jul 2023 11:55:14 +0100 Subject: [PATCH 28/39] Use security tick Signed-off-by: Olusegun Akintayo --- app/components/UI/BlockaidBanner/BlockaidBanner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 60a8c6bf271..36ed6be512c 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -109,7 +109,7 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { Date: Fri, 28 Jul 2023 11:56:45 +0100 Subject: [PATCH 29/39] Fix snapshot Signed-off-by: Olusegun Akintayo --- .../BlockaidBanner.test.tsx.snap | 468 ++++++++---------- 1 file changed, 215 insertions(+), 253 deletions(-) diff --git a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap index f36d3d4f1d2..cb7c1b9fc77 100644 --- a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap +++ b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap @@ -90,6 +90,8 @@ exports[`BlockaidBanner should render correctly 1`] = ` "flexDirection": "row", "height": 24, "justifyContent": "flex-start", + "marginBottom": 10, + "marginTop": 10, } } testID="accordionheader" @@ -141,46 +143,93 @@ exports[`BlockaidBanner should render correctly 1`] = ` /> - - + + + + + Security advice by + + + - ? - - Security advice by [object Object] - + + BlockAid + + + `; @@ -275,6 +324,8 @@ exports[`BlockaidBanner should render correctly with attackType "raw_signature_f "flexDirection": "row", "height": 24, "justifyContent": "flex-start", + "marginBottom": 10, + "marginTop": 10, } } testID="accordionheader" @@ -326,231 +377,93 @@ exports[`BlockaidBanner should render correctly with attackType "raw_signature_f /> - - - ? - - Security advice by [object Object] - - - -`; - -exports[`BlockaidBanner should render correctly with attribution link 1`] = ` - - - - - - - This is a suspicious request - - - If you approve this request, you might lose your assets. - - - - See details - - - - - + + Security advice by + + + - ? - - Security advice by [object Object] - + + BlockAid + + + `; @@ -645,6 +558,8 @@ exports[`BlockaidBanner should render correctly with list attack details 1`] = ` "flexDirection": "row", "height": 24, "justifyContent": "flex-start", + "marginBottom": 10, + "marginTop": 10, } } testID="accordionheader" @@ -696,46 +611,93 @@ exports[`BlockaidBanner should render correctly with list attack details 1`] = ` /> - - + + + + + Security advice by + + + - ? - - Security advice by [object Object] - + + BlockAid + + + `; From 6bd01d902869e70006d39882dac67aeb1c1a3fad Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Fri, 28 Jul 2023 15:09:16 +0100 Subject: [PATCH 30/39] rename blockaid rename shield -> security tick Signed-off-by: Olusegun Akintayo --- app/components/UI/BlockaidBanner/BlockaidBanner.tsx | 4 ++-- locales/languages/en.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 36ed6be512c..bd4993a6450 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -53,7 +53,7 @@ const createStyles = () => marginBottom: 4, }, details: { marginLeft: 10, marginBottom: 10 }, - shieldIcon: { marginTop: 4 }, + securityTickIcon: { marginTop: 4 }, }); const getTitleDescription = (attackType: AttackType) => { @@ -112,7 +112,7 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { name={IconName.SecurityTick} size={IconSize.Sm} color={IconColor.Primary} - style={styles.shieldIcon} + style={styles.securityTickIcon} /> diff --git a/locales/languages/en.json b/locales/languages/en.json index 278c186d168..bc77a4f3cfa 100644 --- a/locales/languages/en.json +++ b/locales/languages/en.json @@ -3,7 +3,7 @@ "approval_farming_description": "If you approve this request, a third party known for scams might take all your assets.", "attribution": "Security advice by", "attribution_link": "https://blockaid.me", - "attribution_link_name": "BlockAid", + "attribution_link_name": "Blockaid", "blur_farming_description": "If you approve this request, someone can steal your assets listed on Blur.", "deceptive_request_title": "This is a deceptive request", "malicious_domain_description": "You're interacting with a malicious domain. If you approve this request, you might lose your assets.", From efabe8711aa0522aa0609943fd0a6e22fcb41edb Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Fri, 28 Jul 2023 16:35:39 +0100 Subject: [PATCH 31/39] snapshot fix --- .../__snapshots__/BlockaidBanner.test.tsx.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap index cb7c1b9fc77..c3cdb9bfbab 100644 --- a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap +++ b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap @@ -226,7 +226,7 @@ exports[`BlockaidBanner should render correctly 1`] = ` } suppressHighlighting={true} > - BlockAid + Blockaid @@ -460,7 +460,7 @@ exports[`BlockaidBanner should render correctly with attackType "raw_signature_f } suppressHighlighting={true} > - BlockAid + Blockaid @@ -694,7 +694,7 @@ exports[`BlockaidBanner should render correctly with list attack details 1`] = ` } suppressHighlighting={true} > - BlockAid + Blockaid From 5bcbdd59824717b62fad91b81d915e7deaadf47a Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Mon, 31 Jul 2023 13:07:49 +0100 Subject: [PATCH 32/39] Fix PR comments. Signed-off-by: Olusegun Akintayo --- .../BlockaidBanner.constants.ts | 24 +++++++ .../BlockaidBanner/BlockaidBanner.stories.tsx | 8 +-- .../BlockaidBanner/BlockaidBanner.styles.ts | 34 +++++++++ .../UI/BlockaidBanner/BlockaidBanner.test.tsx | 14 ++-- .../UI/BlockaidBanner/BlockaidBanner.tsx | 69 ++++++------------- .../UI/BlockaidBanner/BlockaidBanner.types.ts | 13 +++- .../BlockaidBanner/BlockaidBannerConstants.ts | 26 ------- .../BlockaidBanner.test.tsx.snap | 24 +++---- 8 files changed, 108 insertions(+), 104 deletions(-) create mode 100644 app/components/UI/BlockaidBanner/BlockaidBanner.constants.ts create mode 100644 app/components/UI/BlockaidBanner/BlockaidBanner.styles.ts delete mode 100644 app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.constants.ts b/app/components/UI/BlockaidBanner/BlockaidBanner.constants.ts new file mode 100644 index 00000000000..628dd265078 --- /dev/null +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.constants.ts @@ -0,0 +1,24 @@ +export const ATTRIBUTION_LINE_TEST_ID = 'blockaid-banner-attribution-line'; + +import { Reason } from './BlockaidBanner.types'; + +export const REASON_DESCRIPTION_I18N_KEY_MAP = Object.freeze({ + [Reason.approvalFarming]: 'blockaid_banner.approval_farming_description', + [Reason.blurFarming]: 'blockaid_banner.blur_farming_description', + [Reason.maliciousDomain]: 'blockaid_banner.malicious_domain_description', + [Reason.other]: 'blockaid_banner.other_description', + [Reason.permitFarming]: 'blockaid_banner.approval_farming_description', + [Reason.rawNativeTokenTransfer]: + 'blockaid_banner.transfer_farming_description', + [Reason.rawSignatureFarming]: + 'blockaid_banner.raw_signature_farming_description', + [Reason.seaportFarming]: 'blockaid_banner.seaport_farming_description', + [Reason.setApprovalForAllFarming]: + 'blockaid_banner.approval_farming_description', + [Reason.tradeOrderFarming]: 'blockaid_banner.trade_order_farming_description', + [Reason.transferFarming]: 'blockaid_banner.transfer_farming_description', + [Reason.transferFromFarming]: 'blockaid_banner.transfer_farming_description', + [Reason.unfairTrade]: 'blockaid_banner.unfair_trade_description', +}); + +export const SUSPICIOUS_TITLED_REQUESTS = [Reason.rawSignatureFarming]; diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx index 2b06355261e..8af10bc1fed 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx @@ -14,11 +14,7 @@ import { import { ButtonVariants } from '../../../component-library/components/Buttons/Button'; import { storybookPropsGroupID } from '../../../component-library/constants/storybook.constants'; import BlockaidBanner from './BlockaidBanner'; -import { - AttackType, - BlockaidBannerProps, - FlagType, -} from './BlockaidBanner.types'; +import { Reason, BlockaidBannerProps, FlagType } from './BlockaidBanner.types'; export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => { const severitySelector = select( @@ -50,7 +46,7 @@ export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => { onPress: () => console.log('actionButton clicked!'), }, onClose: () => console.log('closeButton clicked!'), - attackType: AttackType.rawSignatureFarming, + reason: Reason.rawSignatureFarming, flagType: FlagType.malicious, features: [ 'Operator is an EOA', diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.styles.ts b/app/components/UI/BlockaidBanner/BlockaidBanner.styles.ts new file mode 100644 index 00000000000..8e654424591 --- /dev/null +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.styles.ts @@ -0,0 +1,34 @@ +// Third party dependencies. +import { Theme } from '../../../util/theme/models'; +import { StyleSheet, ViewStyle } from 'react-native'; +import { BlockaidBannerStyleSheetVars } from './BlockaidBanner.types'; +/** + * Style sheet function for BannerAlert component. + * + * @param params Style sheet params. + * @param params.theme App theme from ThemeContext. + * @param params.vars Inputs that the style sheet depends on. + * @returns StyleSheet object. + */ +const styleSheet = (_params: { + theme: Theme; + vars: BlockaidBannerStyleSheetVars; +}) => + StyleSheet.create({ + attributionBase: Object.assign({ + height: 24, + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'flex-start', + } as ViewStyle), + attributionItem: { + marginRight: 4, + }, + detailsItem: { + marginBottom: 4, + }, + details: { marginLeft: 10, marginBottom: 10 }, + securityTickIcon: { marginTop: 4 }, + }); + +export default styleSheet; diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx index 0618dab4e5b..4adbc7db758 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx @@ -3,8 +3,8 @@ import React from 'react'; import { fireEvent, render } from '@testing-library/react-native'; import BlockaidBanner from './BlockaidBanner'; -import { ATTRIBUTION_LINE_TEST_ID } from './BlockaidBannerConstants'; -import { AttackType, FlagType } from './BlockaidBanner.types'; +import { ATTRIBUTION_LINE_TEST_ID } from './BlockaidBanner.constants'; +import { Reason, FlagType } from './BlockaidBanner.types'; describe('BlockaidBanner', () => { const mockFeatures = [ @@ -19,7 +19,7 @@ describe('BlockaidBanner', () => { const wrapper = render( , ); @@ -27,11 +27,11 @@ describe('BlockaidBanner', () => { expect(wrapper).toMatchSnapshot(); }); - it('should render correctly with attackType "raw_signature_farming"', async () => { + it('should render correctly with reason "raw_signature_farming"', async () => { const wrapper = render( , ); @@ -52,7 +52,7 @@ describe('BlockaidBanner', () => { const wrapper = render( , ); @@ -64,7 +64,7 @@ describe('BlockaidBanner', () => { const wrapper = render( , ); diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index bd4993a6450..2c6e2b2e6f9 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -1,10 +1,5 @@ -import { - IconColor, - IconName, - IconSize, -} from '../../../component-library/components/Icons/Icon'; import React from 'react'; -import { StyleSheet, ViewStyle } from 'react-native'; +import { View } from 'react-native-animatable'; import { strings } from '../../../../locales/i18n'; import { AccordionHeaderHorizontalAlignment } from '../../../component-library/components/Accordions/Accordion'; @@ -12,69 +7,50 @@ import Accordion from '../../../component-library/components/Accordions/Accordio import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; import { DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT } from '../../../component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants'; import BannerAlert from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert'; +import { + IconColor, + IconName, + IconSize, +} from '../../../component-library/components/Icons/Icon'; 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 AttributionLink from './AttributionLink'; -import { - AttackType, - BlockaidBannerProps, - FlagType, -} from './BlockaidBanner.types'; import { ATTRIBUTION_LINE_TEST_ID, REASON_DESCRIPTION_I18N_KEY_MAP, SUSPICIOUS_TITLED_REQUESTS, -} from './BlockaidBannerConstants'; -import { View } from 'react-native-animatable'; +} from './BlockaidBanner.constants'; +import styleSheet from './BlockaidBanner.styles'; +import { Reason, BlockaidBannerProps, FlagType } from './BlockaidBanner.types'; -const getTitle = (attackType: AttackType) => { - if (SUSPICIOUS_TITLED_REQUESTS.indexOf(attackType) >= 0) { +const getTitle = (reason: Reason) => { + if (SUSPICIOUS_TITLED_REQUESTS.indexOf(reason) >= 0) { return strings('blockaid_banner.suspicious_request_title'); } return strings('blockaid_banner.deceptive_request_title'); }; -const createStyles = () => - StyleSheet.create({ - accordionBase: Object.assign({ - marginTop: 10, - marginBottom: 10, - } as ViewStyle), - attributionBase: Object.assign({ - height: 24, - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'flex-start', - } as ViewStyle), - attributionItem: { - marginRight: 4, - }, - detailsItem: { - marginBottom: 4, - }, - details: { marginLeft: 10, marginBottom: 10 }, - securityTickIcon: { marginTop: 4 }, - }); - -const getTitleDescription = (attackType: AttackType) => { - const title = getTitle(attackType); - const description = strings(REASON_DESCRIPTION_I18N_KEY_MAP[attackType]); +const getTitleDescription = (reason: Reason) => { + const title = getTitle(reason); + const description = strings(REASON_DESCRIPTION_I18N_KEY_MAP[reason]); return { title, description }; }; const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { - const { flagType, attackType, features, onToggleShowDetails } = bannerProps; + const { style, flagType, reason, features, onToggleShowDetails } = + bannerProps; + + const { styles } = useStyles(styleSheet, { style }); if (flagType === FlagType.benign) { return null; } - const styles = createStyles(); - - const { title, description } = getTitleDescription(attackType); + const { title, description } = getTitleDescription(reason); - const renderAttackDetails = () => + const renderDetails = () => features.length <= 0 ? null : ( {features.map((feature, i) => ( @@ -101,9 +77,8 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { onPress={onToggleShowDetails} isExpanded={false} horizontalAlignment={AccordionHeaderHorizontalAlignment.Start} - style={styles.accordionBase} > - {renderAttackDetails()} + {renderDetails()} diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts b/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts index 5ed165ac480..dfac9592820 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.types.ts @@ -1,6 +1,6 @@ import { BannerAlertProps } from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.types'; -export enum AttackType { +export enum Reason { approvalFarming = 'approval_farming', blurFarming = 'blur_farming', maliciousDomain = 'malicious_domain', @@ -22,9 +22,16 @@ export enum FlagType { warning = 'warning', } -export type BlockaidBannerProps = BannerAlertProps & { - attackType: AttackType; +type BlockaidBannerAllProps = BannerAlertProps & { + reason: Reason; features: string[]; flagType: FlagType; onToggleShowDetails?: () => void; }; + +export type BlockaidBannerProps = Omit; + +/** + * Style sheet input parameters. + */ +export type BlockaidBannerStyleSheetVars = Pick; diff --git a/app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts b/app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts deleted file mode 100644 index 7097e20c63d..00000000000 --- a/app/components/UI/BlockaidBanner/BlockaidBannerConstants.ts +++ /dev/null @@ -1,26 +0,0 @@ -export const ATTRIBUTION_LINE_TEST_ID = 'blockaid-banner-attribution-line'; - -import { AttackType } from './BlockaidBanner.types'; - -export const REASON_DESCRIPTION_I18N_KEY_MAP = Object.freeze({ - [AttackType.approvalFarming]: 'blockaid_banner.approval_farming_description', - [AttackType.blurFarming]: 'blockaid_banner.blur_farming_description', - [AttackType.maliciousDomain]: 'blockaid_banner.malicious_domain_description', - [AttackType.other]: 'blockaid_banner.other_description', - [AttackType.permitFarming]: 'blockaid_banner.approval_farming_description', - [AttackType.rawNativeTokenTransfer]: - 'blockaid_banner.transfer_farming_description', - [AttackType.rawSignatureFarming]: - 'blockaid_banner.raw_signature_farming_description', - [AttackType.seaportFarming]: 'blockaid_banner.seaport_farming_description', - [AttackType.setApprovalForAllFarming]: - 'blockaid_banner.approval_farming_description', - [AttackType.tradeOrderFarming]: - 'blockaid_banner.trade_order_farming_description', - [AttackType.transferFarming]: 'blockaid_banner.transfer_farming_description', - [AttackType.transferFromFarming]: - 'blockaid_banner.transfer_farming_description', - [AttackType.unfairTrade]: 'blockaid_banner.unfair_trade_description', -}); - -export const SUSPICIOUS_TITLED_REQUESTS = [AttackType.rawSignatureFarming]; diff --git a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap index c3cdb9bfbab..217725e6b59 100644 --- a/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap +++ b/app/components/UI/BlockaidBanner/__snapshots__/BlockaidBanner.test.tsx.snap @@ -2,7 +2,6 @@ exports[`BlockaidBanner should render correctly 1`] = ` `; -exports[`BlockaidBanner should render correctly with attackType "raw_signature_farming" 1`] = ` +exports[`BlockaidBanner should render correctly with list attack details 1`] = ` - This is a suspicious request + This is a deceptive request - If you approve this request, you might lose your assets. + If you approve this request, a third party known for scams might take all your assets. `; -exports[`BlockaidBanner should render correctly with list attack details 1`] = ` +exports[`BlockaidBanner should render correctly with reason "raw_signature_farming" 1`] = ` - This is a deceptive request + This is a suspicious request - If you approve this request, a third party known for scams might take all your assets. + If you approve this request, you might lose your assets. Date: Mon, 31 Jul 2023 23:06:18 +0100 Subject: [PATCH 33/39] fall back to others as reason for non existent reason Signed-off-by: Olusegun Akintayo --- app/components/UI/BlockaidBanner/BlockaidBanner.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 2c6e2b2e6f9..6c28b274dbd 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { View } from 'react-native-animatable'; +import { captureException } from '@sentry/react-native'; + import { strings } from '../../../../locales/i18n'; import { AccordionHeaderHorizontalAlignment } from '../../../component-library/components/Accordions/Accordion'; import Accordion from '../../../component-library/components/Accordions/Accordion/Accordion'; @@ -22,7 +24,7 @@ import { SUSPICIOUS_TITLED_REQUESTS, } from './BlockaidBanner.constants'; import styleSheet from './BlockaidBanner.styles'; -import { Reason, BlockaidBannerProps, FlagType } from './BlockaidBanner.types'; +import { BlockaidBannerProps, FlagType, Reason } from './BlockaidBanner.types'; const getTitle = (reason: Reason) => { if (SUSPICIOUS_TITLED_REQUESTS.indexOf(reason) >= 0) { @@ -33,7 +35,10 @@ const getTitle = (reason: Reason) => { const getTitleDescription = (reason: Reason) => { const title = getTitle(reason); - const description = strings(REASON_DESCRIPTION_I18N_KEY_MAP[reason]); + const description = strings( + REASON_DESCRIPTION_I18N_KEY_MAP[reason] || + REASON_DESCRIPTION_I18N_KEY_MAP[Reason.other], + ); return { title, description }; }; @@ -48,6 +53,10 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { return null; } + if (!REASON_DESCRIPTION_I18N_KEY_MAP[reason]) { + captureException(`BlockaidBannerAlert: Unidentified reason '${reason}'`); + } + const { title, description } = getTitleDescription(reason); const renderDetails = () => From 648506d8bb4e3ac1b138661ad800ac4aee2126bd Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Tue, 1 Aug 2023 13:48:58 +0100 Subject: [PATCH 34/39] For failed Response, show a normal banner alert Capitalize reasons Tests Signed-off-by: Olusegun Akintayo --- .../BlockaidBanner.constants.ts | 1 + .../BlockaidBanner/BlockaidBanner.stories.tsx | 37 ++--- .../UI/BlockaidBanner/BlockaidBanner.test.tsx | 57 ++++++- .../UI/BlockaidBanner/BlockaidBanner.tsx | 24 ++- .../UI/BlockaidBanner/BlockaidBanner.types.ts | 8 +- .../BlockaidBanner.test.tsx.snap | 156 +++++++++++++++++- locales/languages/en.json | 2 + 7 files changed, 241 insertions(+), 44 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.constants.ts b/app/components/UI/BlockaidBanner/BlockaidBanner.constants.ts index 628dd265078..d0f5c45df95 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.constants.ts +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.constants.ts @@ -6,6 +6,7 @@ export const REASON_DESCRIPTION_I18N_KEY_MAP = Object.freeze({ [Reason.approvalFarming]: 'blockaid_banner.approval_farming_description', [Reason.blurFarming]: 'blockaid_banner.blur_farming_description', [Reason.maliciousDomain]: 'blockaid_banner.malicious_domain_description', + [Reason.failed]: 'blockaid_banner.failed_description', [Reason.other]: 'blockaid_banner.other_description', [Reason.permitFarming]: 'blockaid_banner.approval_farming_description', [Reason.rawNativeTokenTransfer]: diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx index 8af10bc1fed..68ecdafe6ed 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx @@ -4,23 +4,26 @@ import React from 'react'; import { select, text } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react-native'; -import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner'; import { - DEFAULT_BANNERALERT_SEVERITY, - SAMPLE_BANNERALERT_ACTIONBUTTONLABEL, SAMPLE_BANNERALERT_DESCRIPTION, SAMPLE_BANNERALERT_TITLE, } from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.constants'; -import { ButtonVariants } from '../../../component-library/components/Buttons/Button'; import { storybookPropsGroupID } from '../../../component-library/constants/storybook.constants'; import BlockaidBanner from './BlockaidBanner'; -import { Reason, BlockaidBannerProps, FlagType } from './BlockaidBanner.types'; +import { BlockaidBannerProps, FlagType, Reason } from './BlockaidBanner.types'; export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => { - const severitySelector = select( - 'severity', - BannerAlertSeverity, - DEFAULT_BANNERALERT_SEVERITY, + const flagTypeSelector = select( + 'flagType', + FlagType, + FlagType.Warning, + storybookPropsGroupID, + ); + + const reasonSelector = select( + 'reason', + Reason, + Reason.approvalFarming, storybookPropsGroupID, ); @@ -30,24 +33,12 @@ export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => { SAMPLE_BANNERALERT_DESCRIPTION, storybookPropsGroupID, ); - const actionButtonLabel = text( - 'actionButtonLabel', - SAMPLE_BANNERALERT_ACTIONBUTTONLABEL, - storybookPropsGroupID, - ); return { - severity: severitySelector, title, description, - actionButtonProps: { - label: actionButtonLabel, - variant: ButtonVariants.Primary, - onPress: () => console.log('actionButton clicked!'), - }, - onClose: () => console.log('closeButton clicked!'), - reason: Reason.rawSignatureFarming, - flagType: FlagType.malicious, + reason: reasonSelector, + flagType: flagTypeSelector, features: [ 'Operator is an EOA', 'Operator is untrusted according to previous activity', diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx index 4adbc7db758..060a2f56471 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx @@ -2,9 +2,12 @@ import React from 'react'; import { fireEvent, render } from '@testing-library/react-native'; +import { TESTID_ACCORDION_CONTENT } from '../../../component-library/components/Accordions/Accordion/Accordion.constants'; +import { TESTID_ACCORDIONHEADER } from '../../../component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.constants'; +import { BANNERALERT_TEST_ID } from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.constants'; import BlockaidBanner from './BlockaidBanner'; import { ATTRIBUTION_LINE_TEST_ID } from './BlockaidBanner.constants'; -import { Reason, FlagType } from './BlockaidBanner.types'; +import { FlagType, Reason } from './BlockaidBanner.types'; describe('BlockaidBanner', () => { const mockFeatures = [ @@ -18,7 +21,7 @@ describe('BlockaidBanner', () => { it('should render correctly', () => { const wrapper = render( , @@ -30,14 +33,14 @@ describe('BlockaidBanner', () => { it('should render correctly with reason "raw_signature_farming"', async () => { const wrapper = render( , ); expect(wrapper).toMatchSnapshot(); - expect(await wrapper.queryByTestId('accordion-header')).toBeDefined(); + expect(await wrapper.queryByTestId(TESTID_ACCORDIONHEADER)).toBeDefined(); expect( await wrapper.getByText('This is a suspicious request'), ).toBeDefined(); @@ -51,7 +54,7 @@ describe('BlockaidBanner', () => { it('should render correctly with attribution link', async () => { const wrapper = render( , @@ -63,19 +66,19 @@ describe('BlockaidBanner', () => { it('should render correctly with list attack details', async () => { const wrapper = render( , ); expect(wrapper).toMatchSnapshot(); - expect(await wrapper.queryByTestId('accordion-header')).toBeDefined(); - expect(await wrapper.queryByTestId('accordion-content')).toBeNull(); + expect(await wrapper.queryByTestId(TESTID_ACCORDIONHEADER)).toBeDefined(); + expect(await wrapper.queryByTestId(TESTID_ACCORDION_CONTENT)).toBeNull(); fireEvent.press(await wrapper.getByText('See details')); - expect(await wrapper.queryByTestId('accordion-content')).toBeDefined(); + expect(await wrapper.queryByTestId(TESTID_ACCORDION_CONTENT)).toBeDefined(); expect( await wrapper.queryByText('We found attack vectors in this request'), ).toBeDefined(); @@ -96,4 +99,40 @@ describe('BlockaidBanner', () => { ), ).toBeDefined(); }); + + it('should not render if flagtye is benign', async () => { + const wrapper = render( + , + ); + + expect(wrapper).toMatchSnapshot(); + expect(await wrapper.queryByTestId(TESTID_ACCORDIONHEADER)).toBeNull(); + expect(await wrapper.queryByTestId(TESTID_ACCORDION_CONTENT)).toBeNull(); + }); + + it('should render normal banner alert if flagtye is failed', async () => { + const wrapper = render( + , + ); + + expect(wrapper).toMatchSnapshot(); + + expect(await wrapper.queryByTestId(TESTID_ACCORDIONHEADER)).toBeNull(); + expect(await wrapper.queryByTestId(TESTID_ACCORDION_CONTENT)).toBeNull(); + expect(await wrapper.queryByTestId(BANNERALERT_TEST_ID)).toBeDefined(); + expect(await wrapper.queryByText('Request may not be safe')).toBeDefined(); + expect( + await wrapper.queryByText( + 'Because of an error, this request was not verified by the security provider. Proceed with caution.', + ), + ).toBeDefined(); + }); }); diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 6c28b274dbd..0dd5a3200b3 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -26,14 +26,16 @@ import { import styleSheet from './BlockaidBanner.styles'; import { BlockaidBannerProps, FlagType, Reason } from './BlockaidBanner.types'; -const getTitle = (reason: Reason) => { +const getTitle = (reason: Reason): string => { if (SUSPICIOUS_TITLED_REQUESTS.indexOf(reason) >= 0) { return strings('blockaid_banner.suspicious_request_title'); } return strings('blockaid_banner.deceptive_request_title'); }; -const getTitleDescription = (reason: Reason) => { +const getTitleDescription = ( + reason: Reason, +): { title: string; description: string } => { const title = getTitle(reason); const description = strings( REASON_DESCRIPTION_I18N_KEY_MAP[reason] || @@ -49,16 +51,26 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { const { styles } = useStyles(styleSheet, { style }); - if (flagType === FlagType.benign) { + const { title, description } = getTitleDescription(reason); + + if (flagType === FlagType.Benign) { return null; } + if (flagType === FlagType.Failed) { + return ( + + ); + } + if (!REASON_DESCRIPTION_I18N_KEY_MAP[reason]) { captureException(`BlockaidBannerAlert: Unidentified reason '${reason}'`); } - const { title, description } = getTitleDescription(reason); - const renderDetails = () => features.length <= 0 ? null : ( @@ -73,7 +85,7 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { return ( + + + + + + This is a suspicious request + + + If you approve this request, you might lose your assets. + + + +`; + exports[`BlockaidBanner should render correctly 1`] = ` `; + +exports[`BlockaidBanner should render normal banner alert if flagtye is failed 1`] = ` + + + + + + + This is a suspicious request + + + If you approve this request, you might lose your assets. + + + +`; diff --git a/locales/languages/en.json b/locales/languages/en.json index bc77a4f3cfa..1264ef11b3f 100644 --- a/locales/languages/en.json +++ b/locales/languages/en.json @@ -6,6 +6,8 @@ "attribution_link_name": "Blockaid", "blur_farming_description": "If you approve this request, someone can steal your assets listed on Blur.", "deceptive_request_title": "This is a deceptive request", + "failed": "Request may not be safe", + "failed_description": "Because of an error, this request was not verified by the security provider. Proceed with caution.", "malicious_domain_description": "You're interacting with a malicious domain. If you approve this request, you might lose your assets.", "other_description": "If you approve this request, you might lose your assets.", "raw_signature_farming_description": "If you approve this request, you might lose your assets.", From bb0de2b0c8fcfa7a82918b8d5ca880f695b04d17 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Wed, 2 Aug 2023 09:02:00 +0100 Subject: [PATCH 35/39] Fix snapshot and test titles --- .../UI/BlockaidBanner/BlockaidBanner.test.tsx | 4 +- .../BlockaidBanner.test.tsx.snap | 78 +------------------ 2 files changed, 4 insertions(+), 78 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx index 060a2f56471..9a9ed504c56 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx @@ -100,7 +100,7 @@ describe('BlockaidBanner', () => { ).toBeDefined(); }); - it('should not render if flagtye is benign', async () => { + it('should not render if flagType is benign', async () => { const wrapper = render( { expect(await wrapper.queryByTestId(TESTID_ACCORDION_CONTENT)).toBeNull(); }); - it('should render normal banner alert if flagtye is failed', async () => { + it('should render normal banner alert if flagType is failed', async () => { const wrapper = render( - - - - - - This is a suspicious request - - - If you approve this request, you might lose your assets. - - - -`; +exports[`BlockaidBanner should not render if flagType is benign 1`] = `null`; exports[`BlockaidBanner should render correctly 1`] = ` `; -exports[`BlockaidBanner should render normal banner alert if flagtye is failed 1`] = ` +exports[`BlockaidBanner should render normal banner alert if flagType is failed 1`] = ` Date: Thu, 3 Aug 2023 14:57:07 +0100 Subject: [PATCH 36/39] do not show blockaid if no env. variable Signed-off-by: Olusegun Akintayo --- .../UI/BlockaidBanner/BlockaidBanner.test.tsx | 16 +++++++++++++--- .../UI/BlockaidBanner/BlockaidBanner.tsx | 5 +++++ 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx index 9a9ed504c56..7893078b61a 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx @@ -2,13 +2,23 @@ import React from 'react'; import { fireEvent, render } from '@testing-library/react-native'; -import { TESTID_ACCORDION_CONTENT } from '../../../component-library/components/Accordions/Accordion/Accordion.constants'; -import { TESTID_ACCORDIONHEADER } from '../../../component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.constants'; -import { BANNERALERT_TEST_ID } from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.constants'; +import { + TESTID_ACCORDION_CONTENT +} from '../../../component-library/components/Accordions/Accordion/Accordion.constants'; +import { + TESTID_ACCORDIONHEADER +} from '../../../component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.constants'; +import { + BANNERALERT_TEST_ID +} from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.constants'; import BlockaidBanner from './BlockaidBanner'; import { ATTRIBUTION_LINE_TEST_ID } from './BlockaidBanner.constants'; import { FlagType, Reason } from './BlockaidBanner.types'; +jest.mock('../../../util/blockaid', () => ({ + showBlockaidUI: jest.fn().mockReturnValue(true), +})); + describe('BlockaidBanner', () => { const mockFeatures = [ 'We found attack vectors in this request', diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 0dd5a3200b3..e38a0df231f 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -25,6 +25,7 @@ import { } from './BlockaidBanner.constants'; import styleSheet from './BlockaidBanner.styles'; import { BlockaidBannerProps, FlagType, Reason } from './BlockaidBanner.types'; +import { showBlockaidUI } from '../../../util/blockaid'; const getTitle = (reason: Reason): string => { if (SUSPICIOUS_TITLED_REQUESTS.indexOf(reason) >= 0) { @@ -51,6 +52,10 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { const { styles } = useStyles(styleSheet, { style }); + if(!showBlockaidUI()) { + return null + } + const { title, description } = getTitleDescription(reason); if (flagType === FlagType.Benign) { From e33e442ba9b5e3c2cd727422cce57847fa878732 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Thu, 3 Aug 2023 15:48:29 +0100 Subject: [PATCH 37/39] lint fix --- .../UI/BlockaidBanner/BlockaidBanner.test.tsx | 12 +++--------- app/components/UI/BlockaidBanner/BlockaidBanner.tsx | 4 ++-- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx index 7893078b61a..4382df4a0a6 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx @@ -2,15 +2,9 @@ import React from 'react'; import { fireEvent, render } from '@testing-library/react-native'; -import { - TESTID_ACCORDION_CONTENT -} from '../../../component-library/components/Accordions/Accordion/Accordion.constants'; -import { - TESTID_ACCORDIONHEADER -} from '../../../component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.constants'; -import { - BANNERALERT_TEST_ID -} from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.constants'; +import { TESTID_ACCORDION_CONTENT } from '../../../component-library/components/Accordions/Accordion/Accordion.constants'; +import { TESTID_ACCORDIONHEADER } from '../../../component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.constants'; +import { BANNERALERT_TEST_ID } from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.constants'; import BlockaidBanner from './BlockaidBanner'; import { ATTRIBUTION_LINE_TEST_ID } from './BlockaidBanner.constants'; import { FlagType, Reason } from './BlockaidBanner.types'; diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index e38a0df231f..9a6ce4953c1 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -52,8 +52,8 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { const { styles } = useStyles(styleSheet, { style }); - if(!showBlockaidUI()) { - return null + if (!showBlockaidUI()) { + return null; } const { title, description } = getTitleDescription(reason); From 316e30c372fe5156932d27326a8846f62f227676 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Fri, 4 Aug 2023 14:18:42 +0100 Subject: [PATCH 38/39] move Accordion into renderDetails to avoid rendering if no details are provided --- .../UI/BlockaidBanner/BlockaidBanner.tsx | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 9a6ce4953c1..75dba4aede7 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -17,6 +17,7 @@ import { 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 { showBlockaidUI } from '../../../util/blockaid'; import AttributionLink from './AttributionLink'; import { ATTRIBUTION_LINE_TEST_ID, @@ -25,7 +26,6 @@ import { } from './BlockaidBanner.constants'; import styleSheet from './BlockaidBanner.styles'; import { BlockaidBannerProps, FlagType, Reason } from './BlockaidBanner.types'; -import { showBlockaidUI } from '../../../util/blockaid'; const getTitle = (reason: Reason): string => { if (SUSPICIOUS_TITLED_REQUESTS.indexOf(reason) >= 0) { @@ -78,13 +78,20 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { const renderDetails = () => features.length <= 0 ? null : ( - - {features.map((feature, i) => ( - - • {feature} - - ))} - + + + {features.map((feature, i) => ( + + • {feature} + + ))} + + ); return ( @@ -98,14 +105,7 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { description={description} {...bannerProps} > - - {renderDetails()} - + {renderDetails()} From 3ec9aa574ba679dcc231a6373b6572062a513f37 Mon Sep 17 00:00:00 2001 From: Olusegun Akintayo Date: Fri, 4 Aug 2023 14:45:21 +0100 Subject: [PATCH 39/39] Add title for failed refactor code --- .../BlockaidBanner.constants.ts | 5 +++- .../UI/BlockaidBanner/BlockaidBanner.tsx | 28 ++++++++----------- locales/languages/en.json | 2 +- 3 files changed, 16 insertions(+), 19 deletions(-) diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.constants.ts b/app/components/UI/BlockaidBanner/BlockaidBanner.constants.ts index d0f5c45df95..60823e49483 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.constants.ts +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.constants.ts @@ -22,4 +22,7 @@ export const REASON_DESCRIPTION_I18N_KEY_MAP = Object.freeze({ [Reason.unfairTrade]: 'blockaid_banner.unfair_trade_description', }); -export const SUSPICIOUS_TITLED_REQUESTS = [Reason.rawSignatureFarming]; +export const REASON_TITLE_I18N_KEY_MAP: Record = Object.freeze({ + [Reason.rawSignatureFarming]: 'blockaid_banner.suspicious_request_title', + [Reason.failed]: 'blockaid_banner.failed_title', +}); diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx index 75dba4aede7..90b7d8a3cde 100644 --- a/app/components/UI/BlockaidBanner/BlockaidBanner.tsx +++ b/app/components/UI/BlockaidBanner/BlockaidBanner.tsx @@ -22,30 +22,23 @@ import AttributionLink from './AttributionLink'; import { ATTRIBUTION_LINE_TEST_ID, REASON_DESCRIPTION_I18N_KEY_MAP, - SUSPICIOUS_TITLED_REQUESTS, + REASON_TITLE_I18N_KEY_MAP, } from './BlockaidBanner.constants'; import styleSheet from './BlockaidBanner.styles'; import { BlockaidBannerProps, FlagType, Reason } from './BlockaidBanner.types'; -const getTitle = (reason: Reason): string => { - if (SUSPICIOUS_TITLED_REQUESTS.indexOf(reason) >= 0) { - return strings('blockaid_banner.suspicious_request_title'); - } - return strings('blockaid_banner.deceptive_request_title'); -}; +const getTitle = (reason: Reason): string => + strings( + REASON_TITLE_I18N_KEY_MAP[reason] || + 'blockaid_banner.deceptive_request_title', + ); -const getTitleDescription = ( - reason: Reason, -): { title: string; description: string } => { - const title = getTitle(reason); - const description = strings( +const getDescription = (reason: Reason) => + strings( REASON_DESCRIPTION_I18N_KEY_MAP[reason] || REASON_DESCRIPTION_I18N_KEY_MAP[Reason.other], ); - return { title, description }; -}; - const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { const { style, flagType, reason, features, onToggleShowDetails } = bannerProps; @@ -56,12 +49,13 @@ const BlockaidBanner = (bannerProps: BlockaidBannerProps) => { return null; } - const { title, description } = getTitleDescription(reason); - if (flagType === FlagType.Benign) { return null; } + const title = getTitle(reason); + const description = getDescription(reason); + if (flagType === FlagType.Failed) { return (