From a4c6ea7c1b166b37ba79e82b83a6b33902ffe452 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Fri, 27 Sep 2024 17:42:15 +0530
Subject: [PATCH 1/2] Adding footer section to confirmation page

---
 .../Views/confirmations/Confirm/Confirm.tsx   |   6 +-
 .../components/Confirm/Footer/Footer.test.tsx |  38 ++++++
 .../components/Confirm/Footer/Footer.tsx      |  37 +++++
 .../Footer/__snapshots__/Footer.test.tsx.snap | 129 ++++++++++++++++++
 .../components/Confirm/Footer/index.ts        |   1 +
 .../components/Confirm/Footer/style.ts        |  23 ++++
 .../components/SignatureRequest/Root/Root.tsx |   4 +-
 ...d.ts => useConfirmationRedesignEnabled.ts} |   6 +-
 locales/languages/en.json                     |   4 +
 9 files changed, 241 insertions(+), 7 deletions(-)
 create mode 100644 app/components/Views/confirmations/components/Confirm/Footer/Footer.test.tsx
 create mode 100644 app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx
 create mode 100644 app/components/Views/confirmations/components/Confirm/Footer/__snapshots__/Footer.test.tsx.snap
 create mode 100644 app/components/Views/confirmations/components/Confirm/Footer/index.ts
 create mode 100644 app/components/Views/confirmations/components/Confirm/Footer/style.ts
 rename app/components/Views/confirmations/hooks/{useRedesignEnabled.ts => useConfirmationRedesignEnabled.ts} (76%)

diff --git a/app/components/Views/confirmations/Confirm/Confirm.tsx b/app/components/Views/confirmations/Confirm/Confirm.tsx
index 1ec625b4457..914bb3ffcbf 100644
--- a/app/components/Views/confirmations/Confirm/Confirm.tsx
+++ b/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>
   );
diff --git a/app/components/Views/confirmations/components/Confirm/Footer/Footer.test.tsx b/app/components/Views/confirmations/components/Confirm/Footer/Footer.test.tsx
new file mode 100644
index 00000000000..4139a44c779
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx b/app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx
new file mode 100644
index 00000000000..9efe1595e69
--- /dev/null
+++ b/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;
diff --git a/app/components/Views/confirmations/components/Confirm/Footer/__snapshots__/Footer.test.tsx.snap b/app/components/Views/confirmations/components/Confirm/Footer/__snapshots__/Footer.test.tsx.snap
new file mode 100644
index 00000000000..cf8a0648a5c
--- /dev/null
+++ b/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>
+`;
diff --git a/app/components/Views/confirmations/components/Confirm/Footer/index.ts b/app/components/Views/confirmations/components/Confirm/Footer/index.ts
new file mode 100644
index 00000000000..be92134c1ba
--- /dev/null
+++ b/app/components/Views/confirmations/components/Confirm/Footer/index.ts
@@ -0,0 +1 @@
+export { default } from './Footer';
diff --git a/app/components/Views/confirmations/components/Confirm/Footer/style.ts b/app/components/Views/confirmations/components/Confirm/Footer/style.ts
new file mode 100644
index 00000000000..68429920b4e
--- /dev/null
+++ b/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;
diff --git a/app/components/Views/confirmations/components/SignatureRequest/Root/Root.tsx b/app/components/Views/confirmations/components/SignatureRequest/Root/Root.tsx
index 1ac0606af7b..0dfb8e11683 100644
--- a/app/components/Views/confirmations/components/SignatureRequest/Root/Root.tsx
+++ b/app/components/Views/confirmations/components/SignatureRequest/Root/Root.tsx
@@ -5,7 +5,7 @@ import { useNavigation } from '@react-navigation/native';
 import setSignatureRequestSecurityAlertResponse from '../../../../../../actions/signatureRequest';
 import { store } from '../../../../../../store';
 import { useTheme } from '../../../../../../util/theme';
-import useRedesignEnabled from '../../../hooks/useRedesignEnabled';
+import useConfirmationRedesignEnabled from '../../../hooks/useConfirmationRedesignEnabled';
 import PersonalSign from '../../PersonalSign';
 import TypedSign from '../../TypedSign';
 import { MessageParams } from '../types';
@@ -40,7 +40,7 @@ const Root = ({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (reduxState: any) => reduxState.modals.signMessageModalVisible,
   );
-  const { isRedesignedEnabled } = useRedesignEnabled();
+  const { isRedesignedEnabled } = useConfirmationRedesignEnabled();
 
   const toggleExpandedMessage = () =>
     setShowExpandedMessage(!showExpandedMessage);
diff --git a/app/components/Views/confirmations/hooks/useRedesignEnabled.ts b/app/components/Views/confirmations/hooks/useConfirmationRedesignEnabled.ts
similarity index 76%
rename from app/components/Views/confirmations/hooks/useRedesignEnabled.ts
rename to app/components/Views/confirmations/hooks/useConfirmationRedesignEnabled.ts
index c175a53676c..f9e6a531a31 100644
--- a/app/components/Views/confirmations/hooks/useRedesignEnabled.ts
+++ b/app/components/Views/confirmations/hooks/useConfirmationRedesignEnabled.ts
@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 
 import { ApprovalTypes } from '../../../../core/RPCMethods/RPCMethodMiddleware';
-import useApprovalRequest from '../hooks/useApprovalRequest';
+import useApprovalRequest from './useApprovalRequest';
 
-const useRedesignEnabled = () => {
+const useConfirmationRedesignEnabled = () => {
   const { approvalRequest } = useApprovalRequest();
   const approvalRequestType = approvalRequest?.type;
 
@@ -18,4 +18,4 @@ const useRedesignEnabled = () => {
   return { isRedesignedEnabled };
 };
 
-export default useRedesignEnabled;
+export default useConfirmationRedesignEnabled;
diff --git a/locales/languages/en.json b/locales/languages/en.json
index 9c25e81e9aa..4a576be88e4 100644
--- a/locales/languages/en.json
+++ b/locales/languages/en.json
@@ -3398,5 +3398,9 @@
       "title": "Reward rate",
       "tooltip": "Expected yearly increase in the value of your stake, based on the reward rate over the past week."
     }
+  },
+  "confirm": {
+    "reject": "Reject",
+    "confirm": "Confirm"
   }
 }

From 995c64a7ed8e646d6d9eff9e6d5245c98a18a0d6 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Fri, 27 Sep 2024 17:45:58 +0530
Subject: [PATCH 2/2] Adding footer section to confirmation page

---
 .../__snapshots__/Confirm.test.tsx.snap       | 125 ++++++++++++++++++
 1 file changed, 125 insertions(+)

diff --git a/app/components/Views/confirmations/Confirm/__snapshots__/Confirm.test.tsx.snap b/app/components/Views/confirmations/Confirm/__snapshots__/Confirm.test.tsx.snap
index 84f7a659484..bd61bd7e47a 100644
--- a/app/components/Views/confirmations/Confirm/__snapshots__/Confirm.test.tsx.snap
+++ b/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>