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 = () => {
TODO
+
);
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`] = `
TODO
+
+
+
+ Reject
+
+
+
+
+
+ Confirm
+
+
+
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(, {
+ state: personalSignatureConfirmationState,
+ });
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should call onConfirm when confirm button is clicked', async () => {
+ const { getByText } = renderWithProvider(, {
+ state: personalSignatureConfirmationState,
+ });
+ fireEvent.press(getByText('Confirm'));
+ expect(mockConfirmSpy).toHaveBeenCalledTimes(1);
+ });
+
+ it('should call onReject when reject button is clicked', async () => {
+ const { getByText } = renderWithProvider(, {
+ 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 (
+
+
+ {strings('confirm.reject')}
+
+
+
+ {strings('confirm.confirm')}
+
+
+ );
+};
+
+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`] = `
+
+
+
+ Reject
+
+
+
+
+
+ Confirm
+
+
+
+`;
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"
}
}