fix: qr scanner appearing before the confirmations screen cp-7.77.0 (#30088)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

This PR fixes the issue where the qr scanning appears before the
confirmation screen.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: fixes the the qr scanner appearing before confirmations
page

## **Related issues**

Fixes: #29949

## **Manual testing steps**

```gherkin
  Scenario: QR hardware wallet transaction shows confirmation screen first
    Given the user has a QR hardware wallet account (e.g. Keystone) set up
      And the user is on that QR account in MetaMask
    When the user initiates a send transaction to an address
    Then the confirmation screen is displayed (NOT the QR scanner)
      And the user sees transaction details (amount, recipient, gas)
  Scenario: QR hardware wallet user confirms a transaction
    Given the user is on the confirmation screen for a QR account transaction
    When the user taps "Confirm"
    Then the QR scanner screen appears
      And the app waits for the QR code scan to complete the transaction
  Scenario: QR hardware wallet user rejects a transaction
    Given the user is on the confirmation screen for a QR account transaction
    When the user taps "Reject"
    Then the transaction is cancelled
      And the QR scanner does NOT appear
  Scenario: QR hardware wallet signature request shows confirmation first
    Given the user is on a QR hardware wallet account
    When a dApp requests a signature (personal_sign or eth_signTypedData)
    Then the confirmation screen is displayed
      And the QR scanner does NOT appear until the user taps "Confirm"
  Scenario: QR hardware wallet signature request shows QRInfo after confirm
    Given the user is on the confirmation screen for a QR account signature request
    When the user taps "Confirm"
    Then the QR scanner / QRInfo view is shown
      And the user can scan the QR code to complete signing
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**



https://github.com/user-attachments/assets/ee6004b2-2f63-47b2-b007-d623b7ed990e



https://github.com/user-attachments/assets/9798e0f2-6756-4e4b-87fd-ee2cc1ebf98b




<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes confirmation submit flow for QR hardware wallets by adding new
state and altering when scanning UI is shown; mistakes could block or
prematurely trigger signing for QR accounts. Scope is contained to
confirmations/QR hardware paths with updated tests.
> 
> **Overview**
> Prevents the QR scanner/`QRInfo` view from appearing before the
confirmations screen by introducing `signingConfirmed` in
`QRHardwareContext` and only rendering `QRInfo` when QR signing is
active *and* the user has confirmed.
> 
> Updates `useConfirmActions` so tapping Confirm during an in-progress
QR signing session sets `signingConfirmed` and explicitly shows the
scanner, while still delegating to `useQrConfirm` for QR-hardware
accounts; also ensures `signingConfirmed` is set before executing the
default approval/transaction paths.
> 
> Adjusts QR confirm UX so `useQrConfirm` re-shows the
awaiting-confirmation bottom sheet when QR signing is already in
progress (instead of opening the `QRInfo` scanner), and updates footer
behavior/tests so the button label remains `Confirm` during QR signing.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
864f724. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: montelaidev

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

@@ -160,14 +160,14 @@ describe('Footer', () => {
     });
   });
 
-  it('renders confirm button text "Get signature" if QR signing is in progress', () => {
+  it('renders confirm button text "Confirm" even if QR signing is in progress', () => {
     jest.spyOn(QRHardwareHook, 'useQRHardwareContext').mockReturnValue({
       isSigningQRObject: true,
     } as QRHardwareHook.QRHardwareContextType);
     const { getByText } = renderWithProvider(<Footer />, {
       state: personalSignatureConfirmationState,
     });
-    expect(getByText('Get signature')).toBeTruthy();
+    expect(getByText('Confirm')).toBeTruthy();
   });
 
   it('confirm button is disabled if `needsCameraPermission` is true', () => {

app/components/Views/confirmations/components/footer/footer.tsx

@@ -39,6 +39,7 @@ import { PredictClaimFooter } from '../predict-confirmations/predict-claim-foote
 import { useIsTransactionPayLoading } from '../../hooks/pay/useTransactionPayData';
 import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
 import { useQRHardwareContext } from '../../context/qr-hardware-context';
+import { useIsConfirmationFromQrAccount } from '../../../../../core/HardwareWallet/hooks/useIsConfirmationFromQrAccount';
 import { useIsGaslessLoading } from '../../hooks/gas/useIsGaslessLoading';
 
 const HIDE_FOOTER_BY_DEFAULT_TYPES = [
@@ -61,7 +62,7 @@ export const Footer = () => {
     hasUnconfirmedDangerAlerts,
   } = useAlerts();
   const { onConfirm, onReject } = useConfirmActions();
-  const { isSigningQRObject, needsCameraPermission } = useQRHardwareContext();
+  const { needsCameraPermission } = useQRHardwareContext();
   const { securityAlertResponse } = useSecurityAlertResponse();
   const transactionMetadata = useTransactionMetadataRequest();
   const { trackAlertMetrics } = useConfirmationAlertMetrics();
@@ -121,10 +122,6 @@ export const Footer = () => {
   });
 
   const confirmButtonLabel = () => {
-    if (isSigningQRObject) {
-      return strings('confirm.qr_get_sign');
-    }
-
     if (isPayLoading) {
       return strings('confirm.confirm');
     }

app/components/Views/confirmations/components/info-root/info-root.test.tsx

@@ -174,9 +174,10 @@ describe('Info', () => {
     ).toBeDefined();
   });
 
-  it('renders QRInfo if user is signing using QR hardware', () => {
+  it('renders QRInfo if user is signing using QR hardware and has confirmed', () => {
     jest.spyOn(QRHardwareHook, 'useQRHardwareContext').mockReturnValue({
       isSigningQRObject: true,
+      signingConfirmed: true,
     } as unknown as QRHardwareHook.QRHardwareContextType);
     const { getByTestId } = renderWithProvider(<Info />, {
       state: personalSignatureConfirmationState,

app/components/Views/confirmations/components/info-root/info-root.tsx

@@ -88,7 +88,7 @@ interface InfoProps {
 const Info = ({ route }: InfoProps) => {
   const { approvalRequest } = useApprovalRequest();
   const transactionMetadata = useTransactionMetadataRequest();
-  const { isSigningQRObject } = useQRHardwareContext();
+  const { isSigningQRObject, signingConfirmed } = useQRHardwareContext();
   const { isDowngrade, isUpgradeOnly } = use7702TransactionType();
   // Refresh STX liveness for the transaction's network
   useRefreshSmartTransactionsLiveness(transactionMetadata?.chainId);
@@ -102,7 +102,7 @@ const Info = ({ route }: InfoProps) => {
     return <SwitchAccountType />;
   }
 
-  if (isSigningQRObject) {
+  if (isSigningQRObject && signingConfirmed) {
     return <QRInfo />;
   }
 

app/components/Views/confirmations/context/qr-hardware-context/qr-hardware-context.test.tsx

@@ -105,7 +105,7 @@ jest.mock('../../hooks/useIsConfirmationFromLedgerAccount', () => ({
 jest.mock(
   '../../../../../core/HardwareWallet/hooks/useIsConfirmationFromQrAccount',
   () => ({
-    useIsConfirmationFromQrAccount: jest.fn(() => true),
+    useIsConfirmationFromQrAccount: jest.fn(() => false),
   }),
 );
 
@@ -229,7 +229,7 @@ describe('QRHardwareContext', () => {
     expect(getByText('Scan with your hardware wallet')).toBeTruthy();
   });
 
-  it('passes correct value of scannerVisible to child components', async () => {
+  it('renders Confirm button when QR signing is in progress', async () => {
     createCameraSpy({ cameraError: undefined, hasCameraPermission: true });
     createQRHardwareAwarenessSpy({
       isSigningQRObject: true,
@@ -246,10 +246,7 @@ describe('QRHardwareContext', () => {
         state: personalSignatureConfirmationState,
       },
     );
-    await userEvent.press(getByText('Get signature'));
-    expect(
-      getByText('Scan your hardware wallet to confirm the transaction'),
-    ).toBeTruthy();
+    expect(getByText('Confirm')).toBeTruthy();
   });
 });
 

app/components/Views/confirmations/context/qr-hardware-context/qr-hardware-context.tsx

@@ -22,6 +22,8 @@ export interface QRHardwareContextType {
   scannerVisible: boolean;
   setRequestCompleted: () => void;
   setScannerVisible: (visibility: boolean) => void;
+  setSigningConfirmed: () => void;
+  signingConfirmed: boolean;
 }
 
 export const QRHardwareContext = createContext<QRHardwareContextType>({
@@ -33,6 +35,8 @@ export const QRHardwareContext = createContext<QRHardwareContextType>({
   scannerVisible: false,
   setRequestCompleted: () => undefined,
   setScannerVisible: () => undefined,
+  setSigningConfirmed: () => undefined,
+  signingConfirmed: false,
 });
 
 export const QRHardwareContextProvider: React.FC<{
@@ -43,6 +47,7 @@ export const QRHardwareContextProvider: React.FC<{
   const { cameraError, hasCameraPermission } = useCamera(isSigningQRObject);
   const [scannerVisible, setScannerVisible] = useState(false);
   const [isRequestCompleted, setRequestCompleted] = useState(false);
+  const [signingConfirmed, setSigningConfirmed] = useState(false);
 
   const cancelRequest = useCallback(
     (e: { preventDefault: () => void; data: { action: NavigationAction } }) => {
@@ -87,6 +92,8 @@ export const QRHardwareContextProvider: React.FC<{
         scannerVisible,
         setRequestCompleted: () => setRequestCompleted(true),
         setScannerVisible,
+        setSigningConfirmed: () => setSigningConfirmed(true),
+        signingConfirmed,
       }}
     >
       {children}

app/components/Views/confirmations/hooks/send/useSendActions.test.ts

@@ -77,20 +77,20 @@ describe('useSendActions', () => {
     expect(result.current.handleCancelPress).toBeDefined();
   });
 
-  it('calls navigation.navigate with correct params when evm ', () => {
+  it('calls navigation.navigate with correct params when evm ', async () => {
     const { result } = renderHookWithProvider(
       () => useSendActions(),
       mockState,
     );
     jest.spyOn(SendUtils, 'submitEvmTransaction').mockImplementation(jest.fn());
-    result.current.handleSubmitPress();
+    await result.current.handleSubmitPress();
     expect(mockNavigate).toHaveBeenCalledWith('RedesignedConfirmations', {
       params: { maxValueMode: undefined },
       loader: 'transfer',
     });
   });
 
-  it('normalizes trailing dot values before submitting evm transaction', () => {
+  it('normalizes trailing dot values before submitting evm transaction', async () => {
     mockUseSendContext.mockReturnValue({
       asset: {
         chainId: '0x1',
@@ -111,7 +111,7 @@ describe('useSendActions', () => {
       () => useSendActions(),
       mockState,
     );
-    result.current.handleSubmitPress();
+    await result.current.handleSubmitPress();
 
     expect(submitSpy).toHaveBeenCalledWith(
       expect.objectContaining({ value: '0' }),

app/components/Views/confirmations/hooks/useConfirmActions.test.ts

@@ -36,6 +36,10 @@ jest.mock('../../../../core/HardwareWallet/hooks/useQrConfirm', () => ({
   useQrConfirm: () => ({ onConfirm: mockOnQrConfirm }),
 }));
 
+const mockIsConfirmationFromQrAccount = jest.requireMock(
+  '../../../../core/HardwareWallet/hooks/useIsConfirmationFromQrAccount',
+).useIsConfirmationFromQrAccount;
+
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: jest.fn(),
@@ -91,34 +95,50 @@ describe('useConfirmAction', () => {
     });
   });
 
-  it('delegates to useQrConfirm when QR signing is in progress', async () => {
+  it('sets signing confirmed and shows scanner when QR signing is in progress', async () => {
     const clearSecurityAlertResponseSpy = jest.spyOn(
       PPOMUtil,
       'clearSignatureSecurityAlertResponse',
     );
-    const { useIsConfirmationFromQrAccount } = jest.requireMock(
-      '../../../../core/HardwareWallet/hooks/useIsConfirmationFromQrAccount',
-    );
-    useIsConfirmationFromQrAccount.mockReturnValue(true);
-
+    const mockSetScannerVisible = jest.fn().mockResolvedValue(undefined);
+    const mockSetSigningConfirmed = jest.fn();
+    jest.spyOn(QRHardwareHook, 'useQRHardwareContext').mockReturnValue({
+      isSigningQRObject: true,
+      setScannerVisible: mockSetScannerVisible,
+      setSigningConfirmed: mockSetSigningConfirmed,
+    } as unknown as QRHardwareHook.QRHardwareContextType);
     const { result } = renderHookWithProvider(() => useConfirmActions(), {
       state: personalSignatureConfirmationState,
     });
-    await result?.current?.onConfirm();
-    expect(mockOnQrConfirm).toHaveBeenCalledTimes(1);
+    result?.current?.onConfirm();
+    expect(mockSetSigningConfirmed).toHaveBeenCalledTimes(1);
+    expect(mockSetScannerVisible).toHaveBeenCalledTimes(1);
+    expect(mockSetScannerVisible).toHaveBeenLastCalledWith(true);
     expect(Engine.acceptPendingApproval).toHaveBeenCalledTimes(0);
     await flushPromises();
     expect(mockCaptureSignatureMetrics).toHaveBeenCalledTimes(0);
     expect(clearSecurityAlertResponseSpy).toHaveBeenCalledTimes(0);
+  });
+
+  it('delegates to useQrConfirm when account is QR hardware and request is a transaction', async () => {
+    mockIsConfirmationFromQrAccount.mockReturnValue(true);
+    mockOnQrConfirm.mockClear();
 
-    useIsConfirmationFromQrAccount.mockReturnValue(false);
+    const { result } = renderHookWithProvider(() => useConfirmActions(), {
+      state: stakingDepositConfirmationState,
+    });
+
+    await result?.current?.onConfirm();
+
+    expect(mockOnQrConfirm).toHaveBeenCalledTimes(1);
+    expect(Engine.acceptPendingApproval).not.toHaveBeenCalled();
+
+    mockIsConfirmationFromQrAccount.mockReturnValue(false);
   });
 
-  it('delegates to useQrConfirm when account is QR', async () => {
-    const { useIsConfirmationFromQrAccount } = jest.requireMock(
-      '../../../../core/HardwareWallet/hooks/useIsConfirmationFromQrAccount',
-    );
-    useIsConfirmationFromQrAccount.mockReturnValue(true);
+  it('delegates to useQrConfirm when account is QR hardware and request is a signature', async () => {
+    mockIsConfirmationFromQrAccount.mockReturnValue(true);
+    mockOnQrConfirm.mockClear();
 
     const { result } = renderHookWithProvider(() => useConfirmActions(), {
       state: personalSignatureConfirmationState,
@@ -129,7 +149,48 @@ describe('useConfirmAction', () => {
     expect(mockOnQrConfirm).toHaveBeenCalledTimes(1);
     expect(Engine.acceptPendingApproval).not.toHaveBeenCalled();
 
-    useIsConfirmationFromQrAccount.mockReturnValue(false);
+    mockIsConfirmationFromQrAccount.mockReturnValue(false);
+  });
+
+  it('calls setSigningConfirmed before executeApproval on default confirm path', async () => {
+    const mockSetSigningConfirmed = jest.fn();
+    jest.spyOn(QRHardwareHook, 'useQRHardwareContext').mockReturnValue({
+      isSigningQRObject: false,
+      setScannerVisible: jest.fn(),
+      setSigningConfirmed: mockSetSigningConfirmed,
+    } as unknown as QRHardwareHook.QRHardwareContextType);
+    const { result } = renderHookWithProvider(() => useConfirmActions(), {
+      state: personalSignatureConfirmationState,
+    });
+    result?.current?.onConfirm();
+    expect(mockSetSigningConfirmed).toHaveBeenCalledTimes(1);
+    expect(Engine.acceptPendingApproval).toHaveBeenCalledTimes(1);
+    await flushPromises();
+  });
+
+  it('calls setSigningConfirmed before confirming a transaction', async () => {
+    const mockSetSigningConfirmed = jest.fn();
+    const mockTransactionConfirm = jest.fn().mockResolvedValue(undefined);
+    useTransactionConfirmMock.mockReturnValue({
+      onConfirm: mockTransactionConfirm,
+    });
+    jest.spyOn(QRHardwareHook, 'useQRHardwareContext').mockReturnValue({
+      isSigningQRObject: false,
+      setScannerVisible: jest.fn(),
+      setSigningConfirmed: mockSetSigningConfirmed,
+    } as unknown as QRHardwareHook.QRHardwareContextType);
+
+    const { result } = renderHookWithProvider(() => useConfirmActions(), {
+      state: stakingDepositConfirmationState,
+    });
+
+    await result?.current?.onConfirm();
+
+    expect(mockSetSigningConfirmed).toHaveBeenCalledTimes(1);
+    expect(mockTransactionConfirm).toHaveBeenCalledTimes(1);
+    expect(mockSetSigningConfirmed.mock.invocationCallOrder[0]).toBeLessThan(
+      mockTransactionConfirm.mock.invocationCallOrder[0],
+    );
   });
 
   it('delegates to useLedgerConfirm when account is Ledger', async () => {

app/components/Views/confirmations/hooks/useConfirmActions.ts

@@ -5,6 +5,7 @@ import { ApprovalType } from '@metamask/controller-utils';
 import PPOMUtil from '../../../../lib/ppom/ppom-util';
 import Routes from '../../../../constants/navigation/Routes';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
+
 import { isSignatureRequest } from '../utils/confirm';
 import { useQRHardwareContext } from '../context/qr-hardware-context';
 import useApprovalRequest from './useApprovalRequest';
@@ -23,7 +24,12 @@ export const useConfirmActions = () => {
   } = useApprovalRequest();
   const { onConfirm: onTransactionConfirm } = useTransactionConfirm();
   const { captureSignatureMetrics } = useSignatureMetrics();
-  const { cancelQRScanRequestIfPresent } = useQRHardwareContext();
+  const {
+    cancelQRScanRequestIfPresent,
+    isSigningQRObject,
+    setScannerVisible,
+    setSigningConfirmed,
+  } = useQRHardwareContext();
   const navigation = useNavigation();
   const approvalType = approvalRequest?.type;
   const isSignatureReq = approvalType && isSignatureRequest(approvalType);
@@ -85,7 +91,7 @@ export const useConfirmActions = () => {
     captureSignatureMetrics,
   ]);
 
-  const hardwareConfirmOptions = useMemo(
+  const sharedConfirmOptions = useMemo(
     () => ({
       onReject,
       onTransactionConfirm,
@@ -95,10 +101,8 @@ export const useConfirmActions = () => {
     [onReject, onTransactionConfirm, executeApproval, isTransactionReq],
   );
 
-  const { onConfirm: onLedgerConfirm } = useLedgerConfirm(
-    hardwareConfirmOptions,
-  );
-  const { onConfirm: onQrConfirm } = useQrConfirm(hardwareConfirmOptions);
+  const { onConfirm: onLedgerConfirm } = useLedgerConfirm(sharedConfirmOptions);
+  const { onConfirm: onQrConfirm } = useQrConfirm(sharedConfirmOptions);
 
   const onConfirm = useCallback(async () => {
     if (isLedgerAccount) {
@@ -111,16 +115,27 @@ export const useConfirmActions = () => {
       return;
     }
 
+    if (isSigningQRObject) {
+      setSigningConfirmed();
+      setScannerVisible(true);
+      return;
+    }
+
     if (isTransactionReq) {
+      setSigningConfirmed();
       await onTransactionConfirm();
       return;
     }
 
+    setSigningConfirmed();
     await executeApproval();
   }, [
     isLedgerAccount,
     isQrAccount,
+    isSigningQRObject,
     isTransactionReq,
+    setScannerVisible,
+    setSigningConfirmed,
     onTransactionConfirm,
     executeApproval,
     onLedgerConfirm,