feat: adding footer section to confirmation page

app/components/Views/confirmations/Confirm/Confirm.tsx

@@ -3,12 +3,13 @@ import { Text, View } from 'react-native';
 
 import BottomModal from '../../../../components/UI/BottomModal';
 import { useTheme } from '../../../../util/theme';
-import useRedesignEnabled from '../hooks/useRedesignEnabled';
+import Footer from '../components/Confirm/Footer';
+import useConfirmationRedesignEnabled from '../hooks/useConfirmationRedesignEnabled';
 import createStyles from './style';
 
 const Confirm = () => {
   const { colors } = useTheme();
-  const { isRedesignedEnabled } = useRedesignEnabled();
+  const { isRedesignedEnabled } = useConfirmationRedesignEnabled();
 
   if (!isRedesignedEnabled) {
     return null;
@@ -20,6 +21,7 @@ const Confirm = () => {
     <BottomModal>
       <View style={styles.container}>
         <Text>TODO</Text>
+        <Footer />
       </View>
     </BottomModal>
   );

app/components/Views/confirmations/Confirm/__snapshots__/Confirm.test.tsx.snap

@@ -130,6 +130,131 @@ exports[`Confirm should match snapshot for personal sign 1`] = `
       <Text>
         TODO
       </Text>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "padding": 16,
+          }
+        }
+      >
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessible={true}
+          activeOpacity={0.2}
+          onPress={[Function]}
+          style={
+            [
+              [
+                {
+                  "borderRadius": 100,
+                  "justifyContent": "center",
+                  "padding": 15,
+                },
+                {
+                  "backgroundColor": "#ffffff",
+                  "borderColor": "#0376c9",
+                  "borderWidth": 1,
+                },
+                {
+                  "flex": 1,
+                },
+              ],
+              null,
+            ]
+          }
+        >
+          <Text
+            style={
+              [
+                {
+                  "color": "#007aff",
+                  "fontSize": 17,
+                  "fontWeight": "500",
+                  "textAlign": "center",
+                },
+                null,
+                [
+                  {
+                    "fontFamily": "EuclidCircularB-Bold",
+                    "fontSize": 14,
+                    "fontWeight": "600",
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "#0376c9",
+                  },
+                  undefined,
+                ],
+                null,
+              ]
+            }
+          >
+            Reject
+          </Text>
+        </TouchableOpacity>
+        <View
+          style={
+            {
+              "width": 8,
+            }
+          }
+        />
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessible={true}
+          activeOpacity={0.2}
+          onPress={[Function]}
+          style={
+            [
+              [
+                {
+                  "borderRadius": 100,
+                  "justifyContent": "center",
+                  "padding": 15,
+                },
+                {
+                  "backgroundColor": "#0376c9",
+                  "minHeight": 50,
+                },
+                {
+                  "flex": 1,
+                },
+              ],
+              null,
+            ]
+          }
+        >
+          <Text
+            style={
+              [
+                {
+                  "color": "#007aff",
+                  "fontSize": 17,
+                  "fontWeight": "500",
+                  "textAlign": "center",
+                },
+                null,
+                [
+                  {
+                    "fontFamily": "EuclidCircularB-Bold",
+                    "fontSize": 14,
+                    "fontWeight": "600",
+                    "textAlign": "center",
+                  },
+                  {
+                    "color": "#ffffff",
+                  },
+                  undefined,
+                ],
+                null,
+              ]
+            }
+          >
+            Confirm
+          </Text>
+        </TouchableOpacity>
+      </View>
     </View>
   </View>
 </Modal>

app/components/Views/confirmations/components/Confirm/Footer/Footer.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import renderWithProvider from '../../../../../../util/test/renderWithProvider';
+import { personalSignatureConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
+import Footer from './index';
+import { fireEvent } from '@testing-library/react-native';
+
+const mockConfirmSpy = jest.fn();
+const mockRejectSpy = jest.fn();
+jest.mock('../../../hooks/useApprovalRequest', () => () => ({
+  onConfirm: mockConfirmSpy,
+  onReject: mockRejectSpy,
+}));
+
+describe('Footer', () => {
+  it('should match snapshot for personal sign', async () => {
+    const container = renderWithProvider(<Footer />, {
+      state: personalSignatureConfirmationState,
+    });
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should call onConfirm when confirm button is clicked', async () => {
+    const { getByText } = renderWithProvider(<Footer />, {
+      state: personalSignatureConfirmationState,
+    });
+    fireEvent.press(getByText('Confirm'));
+    expect(mockConfirmSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onReject when reject button is clicked', async () => {
+    const { getByText } = renderWithProvider(<Footer />, {
+      state: personalSignatureConfirmationState,
+    });
+    fireEvent.press(getByText('Reject'));
+    expect(mockRejectSpy).toHaveBeenCalledTimes(1);
+  });
+});

app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { strings } from '../../../../../../../locales/i18n';
+import StyledButton from '../../../../../../components/UI/StyledButton';
+import { useTheme } from '../../../../../../util/theme';
+import useApprovalRequest from '../../../hooks/useApprovalRequest';
+import createStyles from './style';
+
+const Footer = () => {
+  const { onConfirm, onReject } = useApprovalRequest();
+  const { colors } = useTheme();
+
+  const styles = createStyles(colors);
+
+  return (
+    <View style={styles.buttonsContainer}>
+      <StyledButton
+        onPress={onReject}
+        containerStyle={styles.fill}
+        type={'normal'}
+      >
+        {strings('confirm.reject')}
+      </StyledButton>
+      <View style={styles.buttonDivider} />
+      <StyledButton
+        onPress={onConfirm}
+        containerStyle={styles.fill}
+        type={'confirm'}
+      >
+        {strings('confirm.confirm')}
+      </StyledButton>
+    </View>
+  );
+};
+
+export default Footer;

app/components/Views/confirmations/components/Confirm/Footer/__snapshots__/Footer.test.tsx.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer should match snapshot for personal sign 1`] = `
+<View
+  style={
+    {
+      "flexDirection": "row",
+      "padding": 16,
+    }
+  }
+>
+  <TouchableOpacity
+    accessibilityRole="button"
+    accessible={true}
+    activeOpacity={0.2}
+    onPress={[MockFunction]}
+    style={
+      [
+        [
+          {
+            "borderRadius": 100,
+            "justifyContent": "center",
+            "padding": 15,
+          },
+          {
+            "backgroundColor": "#ffffff",
+            "borderColor": "#0376c9",
+            "borderWidth": 1,
+          },
+          {
+            "flex": 1,
+          },
+        ],
+        null,
+      ]
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "color": "#007aff",
+            "fontSize": 17,
+            "fontWeight": "500",
+            "textAlign": "center",
+          },
+          null,
+          [
+            {
+              "fontFamily": "EuclidCircularB-Bold",
+              "fontSize": 14,
+              "fontWeight": "600",
+              "textAlign": "center",
+            },
+            {
+              "color": "#0376c9",
+            },
+            undefined,
+          ],
+          null,
+        ]
+      }
+    >
+      Reject
+    </Text>
+  </TouchableOpacity>
+  <View
+    style={
+      {
+        "width": 8,
+      }
+    }
+  />
+  <TouchableOpacity
+    accessibilityRole="button"
+    accessible={true}
+    activeOpacity={0.2}
+    onPress={[MockFunction]}
+    style={
+      [
+        [
+          {
+            "borderRadius": 100,
+            "justifyContent": "center",
+            "padding": 15,
+          },
+          {
+            "backgroundColor": "#0376c9",
+            "minHeight": 50,
+          },
+          {
+            "flex": 1,
+          },
+        ],
+        null,
+      ]
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "color": "#007aff",
+            "fontSize": 17,
+            "fontWeight": "500",
+            "textAlign": "center",
+          },
+          null,
+          [
+            {
+              "fontFamily": "EuclidCircularB-Bold",
+              "fontSize": 14,
+              "fontWeight": "600",
+              "textAlign": "center",
+            },
+            {
+              "color": "#ffffff",
+            },
+            undefined,
+          ],
+          null,
+        ]
+      }
+    >
+      Confirm
+    </Text>
+  </TouchableOpacity>
+</View>
+`;

app/components/Views/confirmations/components/Confirm/Footer/index.ts

@@ -0,0 +1 @@
+export { default } from './Footer';

app/components/Views/confirmations/components/Confirm/Footer/style.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors } from '../../../../../../util/theme/models';
+
+const createStyles = (colors: Colors) =>
+  StyleSheet.create({
+    fill: {
+      flex: 1,
+    },
+    divider: {
+      height: 1,
+      backgroundColor: colors.border.muted,
+    },
+    buttonsContainer: {
+      flexDirection: 'row',
+      padding: 16,
+    },
+    buttonDivider: {
+      width: 8,
+    },
+  });
+
+export default createStyles;