diff --git a/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx b/app/components/UI/BlockaidBanner/BlockaidBanner.test.tsx
new file mode 100644
index 000000000000..a0646d70fd3f
--- /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 000000000000..8ba78fc365f9
--- /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
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+
+
+`;