chore(runway): cherry-pick fix: qr scanner appearing before the confirmations screen (#30193)

runway-github[bot] · montelaidev · chloeYue · web-flow · commit 839c3aea4924 · 2026-05-14T20:21:13.000Z
- fix: qr scanner appearing before the confirmations screen cp-7.77.0 (#30088)  ## **Description** This PR fixes the issue where the qr scanning appears before the confirmation screen.  ## **Changelog**  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**  ### **Before**  ### **After** https://github.com/user-attachments/assets/ee6004b2-2f63-47b2-b007-d623b7ed990e https://github.com/user-attachments/assets/9798e0f2-6756-4e4b-87fd-ee2cc1ebf98b  ## **Pre-merge author checklist**  - [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**  - [ ] 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.  --- > [!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>  [a9c779f](a9c779f) --------- Co-authored-by: Monte Lai <monte.lai@consensys.net> Co-authored-by: chloeYue <105063779+chloeYue@users.noreply.github.com> Co-authored-by: gantunesr <17601467+gantunesr@users.noreply.github.com>
diff --git a/app/components/Views/confirmations/components/footer/footer.test.tsx b/app/components/Views/confirmations/components/footer/footer.test.tsx
@@ -156,14 +156,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', () => {
diff --git a/app/components/Views/confirmations/components/footer/footer.tsx b/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');
     }
diff --git a/app/components/Views/confirmations/components/info-root/info-root.test.tsx b/app/components/Views/confirmations/components/info-root/info-root.test.tsx
@@ -173,9 +173,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,
diff --git a/app/components/Views/confirmations/components/info-root/info-root.tsx b/app/components/Views/confirmations/components/info-root/info-root.tsx
@@ -87,7 +87,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);
@@ -100,7 +100,7 @@ const Info = ({ route }: InfoProps) => {
     return <SwitchAccountType />;
   }
 
-  if (isSigningQRObject) {
+  if (isSigningQRObject && signingConfirmed) {
     return <QRInfo />;
   }
 
diff --git a/app/components/Views/confirmations/context/qr-hardware-context/qr-hardware-context.test.tsx b/app/components/Views/confirmations/context/qr-hardware-context/qr-hardware-context.test.tsx
@@ -57,6 +57,17 @@ jest.mock('../../../../../core/HardwareWallet', () => ({
 
 jest.mock('../../hooks/gas/useGasFeeToken');
 
+jest.mock('../../hooks/useIsConfirmationFromLedgerAccount', () => ({
+  useIsConfirmationFromLedgerAccount: jest.fn(() => false),
+}));
+
+jest.mock(
+  '../../../../../core/HardwareWallet/hooks/useIsConfirmationFromQrAccount',
+  () => ({
+    useIsConfirmationFromQrAccount: jest.fn(() => false),
+  }),
+);
+
 jest.mock('../../hooks/ui/useFullScreenConfirmation', () => ({
   useFullScreenConfirmation: jest.fn(() => ({
     isFullScreenConfirmation: true,
@@ -177,7 +188,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,
@@ -194,10 +205,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();
   });
 });
 
diff --git a/app/components/Views/confirmations/context/qr-hardware-context/qr-hardware-context.tsx b/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}
diff --git a/app/components/Views/confirmations/hooks/send/useSendActions.test.ts b/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' }),
diff --git a/app/components/Views/confirmations/hooks/useConfirmActions.test.ts b/app/components/Views/confirmations/hooks/useConfirmActions.test.ts
@@ -19,11 +19,27 @@ jest.mock('./useIsConfirmationFromLedgerAccount', () => ({
   useIsConfirmationFromLedgerAccount: jest.fn().mockReturnValue(false),
 }));
 
+jest.mock(
+  '../../../../core/HardwareWallet/hooks/useIsConfirmationFromQrAccount',
+  () => ({
+    useIsConfirmationFromQrAccount: jest.fn().mockReturnValue(false),
+  }),
+);
+
 const mockOnLedgerConfirm = jest.fn().mockResolvedValue(undefined);
 jest.mock('./useLedgerConfirm', () => ({
   useLedgerConfirm: () => ({ onConfirm: mockOnLedgerConfirm }),
 }));
 
+const mockOnQrConfirm = jest.fn().mockResolvedValue(undefined);
+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(),
@@ -79,20 +95,23 @@ describe('useConfirmAction', () => {
     });
   });
 
-  it('call setScannerVisible if 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 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,
     });
     result?.current?.onConfirm();
+    expect(mockSetSigningConfirmed).toHaveBeenCalledTimes(1);
     expect(mockSetScannerVisible).toHaveBeenCalledTimes(1);
     expect(mockSetScannerVisible).toHaveBeenLastCalledWith(true);
     expect(Engine.acceptPendingApproval).toHaveBeenCalledTimes(0);
@@ -101,6 +120,79 @@ describe('useConfirmAction', () => {
     expect(clearSecurityAlertResponseSpy).toHaveBeenCalledTimes(0);
   });
 
+  it('delegates to useQrConfirm when account is QR hardware and request is a transaction', async () => {
+    mockIsConfirmationFromQrAccount.mockReturnValue(true);
+    mockOnQrConfirm.mockClear();
+
+    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 hardware and request is a signature', async () => {
+    mockIsConfirmationFromQrAccount.mockReturnValue(true);
+    mockOnQrConfirm.mockClear();
+
+    const { result } = renderHookWithProvider(() => useConfirmActions(), {
+      state: personalSignatureConfirmationState,
+    });
+
+    await result?.current?.onConfirm();
+
+    expect(mockOnQrConfirm).toHaveBeenCalledTimes(1);
+    expect(Engine.acceptPendingApproval).not.toHaveBeenCalled();
+
+    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 () => {
     const { useIsConfirmationFromLedgerAccount } = jest.requireMock(
       './useIsConfirmationFromLedgerAccount',
diff --git a/app/components/Views/confirmations/hooks/useConfirmActions.ts b/app/components/Views/confirmations/hooks/useConfirmActions.ts
diff --git a/app/core/HardwareWallet/hooks/useQrConfirm.test.ts b/app/core/HardwareWallet/hooks/useQrConfirm.test.ts
diff --git a/app/core/HardwareWallet/hooks/useQrConfirm.ts b/app/core/HardwareWallet/hooks/useQrConfirm.ts
