feat: adding title to confirmation page

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 
 import BottomModal from '../../../../components/UI/BottomModal';
 import { useTheme } from '../../../../util/theme';
 import Footer from '../components/Confirm/Footer';
+import Title from '../components/Confirm/Title';
 import useConfirmationRedesignEnabled from '../hooks/useConfirmationRedesignEnabled';
 import createStyles from './style';
 
@@ -20,7 +21,7 @@ const Confirm = () => {
   return (
     <BottomModal>
       <View style={styles.container}>
-        <Text>TODO</Text>
+        <Title />
         <Footer />
       </View>
     </BottomModal>

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

@@ -118,7 +118,7 @@ exports[`Confirm should match snapshot for personal sign 1`] = `
       style={
         {
           "alignItems": "center",
-          "backgroundColor": "#ffffff",
+          "backgroundColor": "#f2f4f6",
           "borderTopLeftRadius": 20,
           "borderTopRightRadius": 20,
           "minHeight": "90%",
@@ -127,9 +127,26 @@ exports[`Confirm should match snapshot for personal sign 1`] = `
         }
       }
     >
-      <Text>
-        TODO
-      </Text>
+      <View
+        style={
+          {
+            "marginBottom": 10,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#141618",
+              "fontFamily": "EuclidCircularB-Bold",
+              "fontSize": 18,
+              "fontWeight": "700",
+            }
+          }
+        >
+          Signature request
+        </Text>
+      </View>
       <View
         style={
           {
@@ -157,6 +174,7 @@ exports[`Confirm should match snapshot for personal sign 1`] = `
                   "borderWidth": 1,
                 },
                 {
+                  "backgroundColor": "#f2f4f6",
                   "flex": 1,
                 },
               ],

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

@@ -6,7 +6,7 @@ import { Colors } from '../../../../util/theme/models';
 const createStyles = (colors: Colors) =>
   StyleSheet.create({
     container: {
-      backgroundColor: colors.background.default,
+      backgroundColor: colors.background.alternative,
       paddingTop: 24,
       minHeight: '90%',
       borderTopLeftRadius: 20,

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

@@ -17,15 +17,15 @@ const Footer = () => {
     <View style={styles.buttonsContainer}>
       <StyledButton
         onPress={onReject}
-        containerStyle={styles.fill}
+        containerStyle={styles.rejectButton}
         type={'normal'}
       >
         {strings('confirm.reject')}
       </StyledButton>
       <View style={styles.buttonDivider} />
       <StyledButton
         onPress={onConfirm}
-        containerStyle={styles.fill}
+        containerStyle={styles.confirmButton}
         type={'confirm'}
       >
         {strings('confirm.confirm')}

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

@@ -28,6 +28,7 @@ exports[`Footer should match snapshot for personal sign 1`] = `
             "borderWidth": 1,
           },
           {
+            "backgroundColor": "#f2f4f6",
             "flex": 1,
           },
         ],

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

@@ -4,9 +4,13 @@ import { Colors } from '../../../../../../util/theme/models';
 
 const createStyles = (colors: Colors) =>
   StyleSheet.create({
-    fill: {
+    confirmButton: {
       flex: 1,
     },
+    rejectButton: {
+      flex: 1,
+      backgroundColor: colors.background.alternative,
+    },
     divider: {
       height: 1,
       backgroundColor: colors.border.muted,

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import renderWithProvider from '../../../../../../util/test/renderWithProvider';
+import { personalSignatureConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
+import Title from './index';
+
+describe('Title', () => {
+  it('should match snapshot for personal sign', async () => {
+    const container = renderWithProvider(<Title />, {
+      state: personalSignatureConfirmationState,
+    });
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { TransactionType } from '@metamask/transaction-controller';
+
+import { strings } from '../../../../../../../locales/i18n';
+import { useTheme } from '../../../../../../util/theme';
+import useApprovalRequest from '../../../hooks/useApprovalRequest';
+import createStyles from './style';
+
+const getTitle = (confirmationType?: string) => {
+  switch (confirmationType) {
+    case TransactionType.personalSign:
+      return strings('confirm.title.signature');
+    default:
+      return '';
+  }
+};
+
+const Title = () => {
+  const { approvalRequest } = useApprovalRequest();
+  const { colors } = useTheme();
+
+  const styles = createStyles(colors);
+  const title = useMemo(
+    () => getTitle(approvalRequest?.type),
+    [approvalRequest?.type],
+  );
+
+  return (
+    <View style={styles.titleContainer}>
+      <Text style={styles.title}>{title}</Text>
+    </View>
+  );
+};
+
+export default Title;

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

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Title should match snapshot for personal sign 1`] = `
+<View
+  style={
+    {
+      "marginBottom": 10,
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#141618",
+        "fontFamily": "EuclidCircularB-Bold",
+        "fontSize": 18,
+        "fontWeight": "700",
+      }
+    }
+  >
+    Signature request
+  </Text>
+</View>
+`;

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

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

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

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors } from '../../../../../../util/theme/models';
+import { fontStyles } from '../../../../../../styles/common';
+
+const createStyles = (colors: Colors) =>
+  StyleSheet.create({
+    titleContainer: {
+      marginBottom: 10,
+    },
+    title: {
+      color: colors.text.default,
+      ...fontStyles.bold,
+      fontSize: 18,
+      fontWeight: '700'
+    }
+  });
+
+export default createStyles;

locales/languages/en.json

@@ -3401,6 +3401,9 @@
   },
   "confirm": {
     "reject": "Reject",
-    "confirm": "Confirm"
+    "confirm": "Confirm",
+    "title": {
+      "signature": "Signature request"
+      }
   }
 }