BlockaidBanner implementation

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>

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 = () => (
+  <BlockaidBanner {...getBlockaidBannerStoryProps()} />
+);
+
+storiesOf('Components / UI / BlockaidBanner', module).add(
+  'BlockaidBanner',
+  BlockaidBannerStory,
+);
+
+export default BlockaidBannerStory;

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' ? (
+      <Text variant={DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT}>
+        {attackDetails}
+      </Text>
+    ) : (
+      attackDetails
+    );
+
+  return (
+    <BannerAlert
+      severity={BannerAlertSeverity.Error}
+      title={title}
+      description={description}
+      {...bannerProps}
+    >
+      <Accordion
+        title="See details"
+        onPress={onToggleShowDetails}
+        isExpanded={false}
+      >
+        {renderAttackDetails()}
+      </Accordion>
+    </BannerAlert>
+  );
+};
+
+export default BlockaidBanner;

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;
+  };