Blockaid banners implementation

app/components/UI/BlockaidBanner/AttributionLink.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Linking, StyleSheet } from 'react-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({
+    attributionLink: { color: colors.primary.default },
+  });
+
+const AttributionLink = () => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+
+  return (
+    <Text
+      suppressHighlighting
+      style={styles.attributionLink}
+      variant={DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT}
+      onPress={() => {
+        Linking.openURL(strings('blockaid_banner.attribution_link'));
+      }}
+    >
+      {strings('blockaid_banner.attribution_link_name')}
+    </Text>
+  );
+};
+
+export default AttributionLink;

app/components/UI/BlockaidBanner/BlockaidBanner.constants.ts

@@ -0,0 +1,28 @@
+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.failed]: 'blockaid_banner.failed_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 REASON_TITLE_I18N_KEY_MAP: Record<string, string> = Object.freeze({
+  [Reason.rawSignatureFarming]: 'blockaid_banner.suspicious_request_title',
+  [Reason.failed]: 'blockaid_banner.failed_title',
+});

app/components/UI/BlockaidBanner/BlockaidBanner.stories.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable no-console */
+import React from 'react';
+
+import { select, text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react-native';
+
+import {
+  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 BlockaidBanner from './BlockaidBanner';
+import { BlockaidBannerProps, FlagType, Reason } from './BlockaidBanner.types';
+
+export const getBlockaidBannerStoryProps = (): BlockaidBannerProps => {
+  const flagTypeSelector = select(
+    'flagType',
+    FlagType,
+    FlagType.Warning,
+    storybookPropsGroupID,
+  );
+
+  const reasonSelector = select(
+    'reason',
+    Reason,
+    Reason.approvalFarming,
+    storybookPropsGroupID,
+  );
+
+  const title = text('title', SAMPLE_BANNERALERT_TITLE, storybookPropsGroupID);
+  const description = text(
+    'description',
+    SAMPLE_BANNERALERT_DESCRIPTION,
+    storybookPropsGroupID,
+  );
+
+  return {
+    title,
+    description,
+    reason: reasonSelector,
+    flagType: flagTypeSelector,
+    features: [
+      'Operator is an EOA',
+      'Operator is untrusted according to previous activity',
+    ],
+  };
+};
+
+const BlockaidBannerStory = () => (
+  <BlockaidBanner {...getBlockaidBannerStoryProps()} />
+);
+
+storiesOf('Components / UI / BlockaidBanner', module).add(
+  'BlockaidBanner',
+  BlockaidBannerStory,
+);
+
+export default BlockaidBannerStory;

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;

app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx

@@ -0,0 +1,142 @@
+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 { 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',
+    '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',
+  ];
+
+  it('should render correctly', () => {
+    const wrapper = render(
+      <BlockaidBanner
+        flagType={FlagType.Warning}
+        reason={Reason.approvalFarming}
+        features={mockFeatures}
+      />,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render correctly with reason "raw_signature_farming"', async () => {
+    const wrapper = render(
+      <BlockaidBanner
+        flagType={FlagType.Malicious}
+        reason={Reason.rawSignatureFarming}
+        features={mockFeatures}
+      />,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+    expect(await wrapper.queryByTestId(TESTID_ACCORDIONHEADER)).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 attribution link', async () => {
+    const wrapper = render(
+      <BlockaidBanner
+        flagType={FlagType.Malicious}
+        reason={Reason.rawSignatureFarming}
+        features={mockFeatures}
+      />,
+    );
+
+    expect(await wrapper.queryByTestId(ATTRIBUTION_LINE_TEST_ID)).toBeDefined();
+  });
+
+  it('should render correctly with list attack details', async () => {
+    const wrapper = render(
+      <BlockaidBanner
+        flagType={FlagType.Malicious}
+        reason={Reason.approvalFarming}
+        features={mockFeatures}
+      />,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+    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(TESTID_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();
+    expect(await wrapper.queryByText('Operator is an EOA')).toBeDefined();
+    expect(
+      await wrapper.queryByText(
+        'Operator is untrusted according to previous activity',
+      ),
+    ).toBeDefined();
+  });
+
+  it('should not render if flagType is benign', async () => {
+    const wrapper = render(
+      <BlockaidBanner
+        flagType={FlagType.Benign}
+        reason={Reason.rawSignatureFarming}
+        features={mockFeatures}
+      />,
+    );
+
+    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 flagType is failed', async () => {
+    const wrapper = render(
+      <BlockaidBanner
+        flagType={FlagType.Failed}
+        reason={Reason.rawSignatureFarming}
+        features={mockFeatures}
+      />,
+    );
+
+    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();
+  });
+});