feat: QR hardware signing in new designs

app/components/Views/confirmations/Confirm/Confirm.styles.ts

@@ -11,12 +11,18 @@ const styleSheet = (params: { theme: Theme }) => {
       backgroundColor: theme.colors.background.alternative,
       paddingHorizontal: 16,
       paddingVertical: 24,
-      minHeight: '70%',
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
       paddingBottom: Device.isIphoneX() ? 20 : 0,
       justifyContent: 'space-between',
     },
+    scrollableSection: {
+      flex: 1,
+    },
+    scrollWrapper: {
+      minHeight: '68%',
+      maxHeight: '68%',
+    },
   });
 };
 

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

@@ -32,8 +32,17 @@ jest.mock('react-native-gzip', () => ({
   deflate: (str: string) => str,
 }));
 
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({
+    navigate: jest.fn(),
+    addListener: jest.fn(),
+    dispatch: jest.fn(),
+  }),
+}));
+
 describe('Confirm', () => {
-  it('should render correct information for personal sign', async () => {
+  it('should render correct information for personal sign', () => {
     const { getAllByRole, getByText } = renderWithProvider(<Confirm />, {
       state: personalSignatureConfirmationState,
     });
@@ -48,7 +57,7 @@ describe('Confirm', () => {
     expect(getAllByRole('button')).toHaveLength(2);
   });
 
-  it('should render correct information for typed sign v1', async () => {
+  it('should render correct information for typed sign v1', () => {
     const { getAllByRole, getAllByText, getByText, queryByText } =
       renderWithProvider(<Confirm />, {
         state: typedSignV1ConfirmationState,
@@ -62,7 +71,7 @@ describe('Confirm', () => {
     expect(queryByText('This is a deceptive request')).toBeNull();
   });
 
-  it('should render blockaid banner if confirmation has blockaid error response', async () => {
+  it('should render blockaid banner if confirmation has blockaid error response', () => {
     const { getByText } = renderWithProvider(<Confirm />, {
       state: {
         ...typedSignV1ConfirmationState,

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

@@ -1,11 +1,12 @@
 import React from 'react';
-import { View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 
 import { useStyles } from '../../../../component-library/hooks';
 import BottomModal from '../components/UI/BottomModal';
 import AccountNetworkInfo from '../components/Confirm/AccountNetworkInfo';
 import Footer from '../components/Confirm/Footer';
 import Info from '../components/Confirm/Info';
+import { QRHardwareContextProvider } from '../context/QRHardwareContext/QRHardwareContext';
 import SignatureBlockaidBanner from '../components/Confirm/SignatureBlockaidBanner';
 import Title from '../components/Confirm/Title';
 import useApprovalRequest from '../hooks/useApprovalRequest';
@@ -22,18 +23,26 @@ const Confirm = () => {
   }
 
   return (
-    <BottomModal canCloseOnBackdropClick={false}>
-      <View style={styles.container} testID={approvalRequest?.type}>
-        <View>
-          <Title />
-          {/* TODO: component SignatureBlockaidBanner to be removed once we implement alert system in mobile */}
-          <SignatureBlockaidBanner />
-          <AccountNetworkInfo />
-          <Info />
+    <QRHardwareContextProvider>
+      <BottomModal canCloseOnBackdropClick={false}>
+        <View style={styles.container} testID={approvalRequest?.type}>
+          <View>
+            <Title />
+            <View style={styles.scrollWrapper}>
+              <ScrollView>
+                <View style={styles.scrollableSection}>
+                  {/* TODO: component SignatureBlockaidBanner to be removed once we implement alert system in mobile */}
+                  <SignatureBlockaidBanner />
+                  <AccountNetworkInfo />
+                  <Info />
+                </View>
+              </ScrollView>
+            </View>
+          </View>
+          <Footer />
         </View>
-        <Footer />
-      </View>
-    </BottomModal>
+      </BottomModal>
+    </QRHardwareContextProvider>
   );
 };
 

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

@@ -1,9 +1,12 @@
 import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
 
+import { ConfirmationFooterSelectorIDs } from '../../../../../../../e2e/selectors/Confirmation/ConfirmationView.selectors';
 import renderWithProvider from '../../../../../../util/test/renderWithProvider';
 import { personalSignatureConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
+// eslint-disable-next-line import/no-namespace
+import * as QRHardwareHook from '../../../context/QRHardwareContext/QRHardwareContext';
 import Footer from './index';
-import { fireEvent } from '@testing-library/react-native';
 
 const mockConfirmSpy = jest.fn();
 const mockRejectSpy = jest.fn();
@@ -15,7 +18,7 @@ jest.mock('../../../hooks/useConfirmActions', () => ({
 }));
 
 describe('Footer', () => {
-  it('should render correctly', async () => {
+  it('should render correctly', () => {
     const { getByText, getAllByRole } = renderWithProvider(<Footer />, {
       state: personalSignatureConfirmationState,
     });
@@ -24,19 +27,45 @@ describe('Footer', () => {
     expect(getAllByRole('button')).toHaveLength(2);
   });
 
-  it('should call onConfirm when confirm button is clicked', async () => {
+  it('should call onConfirm when confirm button is clicked', () => {
     const { getByText } = renderWithProvider(<Footer />, {
       state: personalSignatureConfirmationState,
     });
     fireEvent.press(getByText('Confirm'));
     expect(mockConfirmSpy).toHaveBeenCalledTimes(1);
   });
 
-  it('should call onReject when reject button is clicked', async () => {
+  it('should call onReject when reject button is clicked', () => {
     const { getByText } = renderWithProvider(<Footer />, {
       state: personalSignatureConfirmationState,
     });
     fireEvent.press(getByText('Reject'));
     expect(mockRejectSpy).toHaveBeenCalledTimes(1);
   });
+
+  it('render confirm button text "Get Signature" if QR signing is in progress', () => {
+    jest
+      .spyOn(QRHardwareHook, 'useQRHardwareContext')
+      .mockReturnValue({
+        isQRSigningInProgress: true,
+      } as unknown as QRHardwareHook.QRHardwareContextType);
+    const { getByText } = renderWithProvider(<Footer />, {
+      state: personalSignatureConfirmationState,
+    });
+    expect(getByText('Get Signature')).toBeDefined();
+  });
+
+  it('confirm button is disabled if `needsCameraPermission` is true', () => {
+    jest
+      .spyOn(QRHardwareHook, 'useQRHardwareContext')
+      .mockReturnValue({
+        needsCameraPermission: true,
+      } as unknown as QRHardwareHook.QRHardwareContextType);
+    const { getByTestId } = renderWithProvider(<Footer />, {
+      state: personalSignatureConfirmationState,
+    });
+    expect(
+      getByTestId(ConfirmationFooterSelectorIDs.CONFIRM_BUTTON).props.disabled,
+    ).toBe(true);
+  });
 });

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

@@ -9,13 +9,16 @@ import Button, {
   ButtonWidthTypes,
 } from '../../../../../../component-library/components/Buttons/Button';
 import { useStyles } from '../../../../../../component-library/hooks';
-import { ResultType } from '../../../constants/signatures';
 import { useConfirmActions } from '../../../hooks/useConfirmActions';
 import { useSecurityAlertResponse } from '../../../hooks/useSecurityAlertResponse';
+import { useQRHardwareContext } from '../../../context/QRHardwareContext/QRHardwareContext';
+import { ResultType } from '../../BlockaidBanner/BlockaidBanner.types';
 import styleSheet from './Footer.styles';
 
 const Footer = () => {
   const { onConfirm, onReject } = useConfirmActions();
+  const { isQRSigningInProgress, needsCameraPermission } =
+    useQRHardwareContext();
   const { securityAlertResponse } = useSecurityAlertResponse();
 
   const { styles } = useStyles(styleSheet, {});
@@ -34,13 +37,18 @@ const Footer = () => {
       <View style={styles.buttonDivider} />
       <Button
         onPress={onConfirm}
-        label={strings('confirm.confirm')}
+        label={
+          isQRSigningInProgress
+            ? strings('confirm.qr_get_sign')
+            : strings('confirm.confirm')
+        }
         style={styles.footerButton}
         size={ButtonSize.Lg}
         testID={ConfirmationFooterSelectorIDs.CONFIRM_BUTTON}
         variant={ButtonVariants.Primary}
         width={ButtonWidthTypes.Full}
         isDanger={securityAlertResponse?.result_type === ResultType.Malicious}
+        disabled={needsCameraPermission}
       />
     </View>
   );

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

@@ -2,14 +2,32 @@ import React from 'react';
 
 import renderWithProvider from '../../../../../../util/test/renderWithProvider';
 import { personalSignatureConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
+// eslint-disable-next-line import/no-namespace
+import * as QRHardwareHook from '../../../context/QRHardwareContext/QRHardwareContext';
 import Info from './Info';
+import { Text } from 'react-native';
+
+const MockText = Text;
+jest.mock('./QRInfo', () => () => <MockText>QR Scanning Component</MockText>);
 
 describe('Info', () => {
-  it('should render correctly for personal sign', async () => {
+  it('renders correctly for personal sign', () => {
     const { getByText } = renderWithProvider(<Info />, {
       state: personalSignatureConfirmationState,
     });
     expect(getByText('Message')).toBeDefined();
     expect(getByText('Example `personal_sign` message')).toBeDefined();
   });
+
+  it('renders QRInfo if user is signing using QR hardware', () => {
+    jest
+      .spyOn(QRHardwareHook, 'useQRHardwareContext')
+      .mockReturnValue({
+        isSigningQRObject: true,
+      } as unknown as QRHardwareHook.QRHardwareContextType);
+    const { getByText } = renderWithProvider(<Info />, {
+      state: personalSignatureConfirmationState,
+    });
+    expect(getByText('QR Scanning Component')).toBeDefined();
+  });
 });

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

@@ -2,7 +2,9 @@ import { TransactionType } from '@metamask/transaction-controller';
 import React from 'react';
 
 import useApprovalRequest from '../../../hooks/useApprovalRequest';
+import { useQRHardwareContext } from '../../../context/QRHardwareContext/QRHardwareContext';
 import PersonalSign from './PersonalSign';
+import QRInfo from './QRInfo';
 import TypedSignV1 from './TypedSignV1';
 import TypedSignV3V4 from './TypedSignV3V4';
 
@@ -16,11 +18,16 @@ const ConfirmationInfoComponentMap = {
 
 const Info = () => {
   const { approvalRequest } = useApprovalRequest();
+  const { isSigningQRObject } = useQRHardwareContext();
 
   if (!approvalRequest?.type) {
     return null;
   }
 
+  if (isSigningQRObject) {
+    return <QRInfo />;
+  }
+
   const { requestData } = approvalRequest ?? {
     requestData: {},
   };

app/components/Views/confirmations/components/Confirm/Info/QRInfo/QRInfo.styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+
+import { Theme } from '../../../../../../../util/theme/models';
+import { fontStyles } from '../../../../../../../styles/common';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+
+  return StyleSheet.create({
+    container: {
+      width: '100%',
+      flexDirection: 'column',
+      alignItems: 'center',
+      backgroundColor: theme.colors.background.default,
+    },
+    title: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginTop: 20,
+      marginBottom: 20,
+    },
+    titleText: {
+      ...fontStyles.normal,
+      fontSize: 14,
+      color: theme.colors.text.default,
+    },
+    errorText: {
+      ...fontStyles.normal,
+      fontSize: 12,
+      color: theme.colors.error.default,
+    },
+    alert: {
+      marginHorizontal: 16,
+      marginTop: 12,
+    },
+  });
+};
+
+export default styleSheet;