refactor: use @metamask/eth-qr-keyring

app/components/Approvals/TransactionApproval/TransactionApproval.test.tsx

@@ -85,7 +85,10 @@ describe('TransactionApproval', () => {
     } as any);
 
     const wrapper = shallow(
-      <TransactionApproval isSigningQRObject QRState={{ test: 'value' }} />,
+      <TransactionApproval
+        isSigningQRObject
+        pendingScanRequest={{ test: 'value' }}
+      />,
     );
 
     expect(wrapper).toMatchSnapshot();

app/components/Approvals/TransactionApproval/TransactionApproval.tsx

@@ -5,8 +5,8 @@ import Approval from '../../Views/confirmations/legacy/Approval';
 import Approve from '../../Views/confirmations/legacy/ApproveView/Approve';
 import QRSigningModal from '../../UI/QRHardware/QRSigningModal';
 import withQRHardwareAwareness from '../../UI/QRHardware/withQRHardwareAwareness';
-import { IQRState } from '../../UI/QRHardware/types';
 import { useConfirmationRedesignEnabled } from '../../Views/confirmations/hooks/useConfirmationRedesignEnabled';
+import { QrScanRequest, QrScanRequestType } from '@metamask/eth-qr-keyring';
 
 export enum TransactionModalType {
   Transaction = 'transaction',
@@ -19,15 +19,22 @@ export interface TransactionApprovalProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   navigation: any;
   onComplete: () => void;
-  QRState?: IQRState;
+  pendingScanRequest?: QrScanRequest;
   isSigningQRObject?: boolean;
 }
 
 const TransactionApprovalInternal = (props: TransactionApprovalProps) => {
   const { approvalRequest } = useApprovalRequest();
   const { isRedesignedEnabled } = useConfirmationRedesignEnabled();
-  const { onComplete: propsOnComplete } = props;
-  const isQRSigning = props.isSigningQRObject && !props.transactionType;
+  const {
+    onComplete: propsOnComplete,
+    pendingScanRequest,
+    isSigningQRObject,
+  } = props;
+  const isQRSigning =
+    isSigningQRObject &&
+    pendingScanRequest?.type === QrScanRequestType.SIGN &&
+    !props.transactionType;
 
   const onComplete = useCallback(() => {
     propsOnComplete();
@@ -64,9 +71,7 @@ const TransactionApprovalInternal = (props: TransactionApprovalProps) => {
     return (
       <QRSigningModal
         isVisible
-        // TODO: Replace "any" with type
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        QRState={props.QRState as any}
+        pendingScanRequest={pendingScanRequest}
         onSuccess={onComplete}
         onCancel={onComplete}
         onFailure={onComplete}

app/components/Approvals/TransactionApproval/__snapshots__/TransactionApproval.test.tsx.snap

@@ -1,18 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TransactionApproval renders QR signing modal if signing QR object is exists 1`] = `
-<QRSigningModal
-  QRState={
-    {
-      "test": "value",
-    }
-  }
-  isVisible={true}
-  onCancel={[Function]}
-  onFailure={[Function]}
-  onSuccess={[Function]}
-/>
-`;
+exports[`TransactionApproval renders QR signing modal if signing QR object is exists 1`] = `""`;
 
 exports[`TransactionApproval renders approval component if transaction type is dapp 1`] = `
 <Component

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -326,13 +326,16 @@ const RootRPCMethodsUI = (props) => {
         // Queue txMetaId to listen for confirmation event
         addTransactionMetaIdForListening(transactionMeta.id);
 
-        await KeyringController.resetQRKeyringState();
-
         const isLedgerAccount = isHardwareAccount(
           transactionMeta.txParams.from,
           [ExtendedKeyringTypes.ledger],
         );
 
+        // As the `TransactionController:unapprovedTransactionAdded` event is emitted
+        // before the approval request is added to `ApprovalController`, we need to wait
+        // for the next tick to make sure the approval request is present when auto-approve it
+        await new Promise((resolve) => setTimeout(resolve, 0));
+
         // For Ledger Accounts we handover the signing to the confirmation flow
         if (isLedgerAccount) {
           const deviceId = await getDeviceId();

app/components/UI/EvmAccountSelectorList/EvmAccountSelectorList.tsx

@@ -420,6 +420,7 @@ const EvmAccountSelectorList = ({
       } = item.data;
 
       const internalAccount = internalAccountsById[id];
+
       const shortAddress = formatAddress(address, 'short');
       const tagLabel = isMultichainAccountsState1Enabled
         ? undefined

app/components/UI/QRHardware/AnimatedQRScanner.tsx

@@ -32,6 +32,7 @@ import Icon, {
   IconName,
   IconSize,
 } from '../../../component-library/components/Icons/Icon';
+import { QrScanRequestType } from '@metamask/eth-qr-keyring';
 
 const createStyles = (theme: Theme) =>
   StyleSheet.create({
@@ -99,7 +100,7 @@ const frameImage = require('../../../images/frame.png'); // eslint-disable-line
 
 interface AnimatedQRScannerProps {
   visible: boolean;
-  purpose: 'sync' | 'sign';
+  purpose: QrScanRequestType;
   onScanSuccess: (ur: UR) => void;
   onScanError: (error: string) => void;
   hideModal: () => void;
@@ -126,7 +127,7 @@ const AnimatedQRScannerModal = (props: AnimatedQRScannerProps) => {
   const { hasPermission, requestPermission } = useCameraPermission();
 
   let expectedURTypes: string[];
-  if (purpose === 'sync') {
+  if (purpose === QrScanRequestType.PAIR) {
     expectedURTypes = [
       SUPPORTED_UR_TYPE.CRYPTO_HDKEY,
       SUPPORTED_UR_TYPE.CRYPTO_ACCOUNT,
@@ -152,7 +153,7 @@ const AnimatedQRScannerModal = (props: AnimatedQRScannerProps) => {
         {strings('connect_qr_hardware.hint_text')}
         <Text style={styles.bold}>
           {strings(
-            purpose === 'sync'
+            purpose === QrScanRequestType.PAIR
               ? 'connect_qr_hardware.purpose_connect'
               : 'connect_qr_hardware.purpose_sign',
           )}
@@ -202,7 +203,7 @@ const AnimatedQRScannerModal = (props: AnimatedQRScannerProps) => {
             onScanSuccess(ur);
             setProgress(0);
             setURDecoder(new URRegistryDecoder());
-          } else if (purpose === 'sync') {
+          } else if (purpose === QrScanRequestType.PAIR) {
             trackEvent(
               createEventBuilder(MetaMetricsEvents.HARDWARE_WALLET_ERROR)
                 .addProperties({

app/components/UI/QRHardware/QRSigningDetails.tsx

@@ -1,10 +1,4 @@
-import React, {
-  Fragment,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import Engine from '../../../core/Engine';
 import {
   StyleSheet,
@@ -23,7 +17,6 @@ import AnimatedQRScannerModal from './AnimatedQRScanner';
 import { fontStyles } from '../../../styles/common';
 import AccountInfoCard from '../AccountInfoCard';
 import ActionView from '../ActionView';
-import { IQRState } from './types';
 import { UR } from '@ngraveio/bc-ur';
 import { ETHSignature } from '@keystonehq/bc-ur-registry-eth';
 import { stringify as uuidStringify } from 'uuid';
@@ -34,9 +27,10 @@ import { useNavigation } from '@react-navigation/native';
 import { useTheme } from '../../../util/theme';
 import Device from '../../../util/device';
 import { useMetrics } from '../../../components/hooks/useMetrics';
+import { QrScanRequest, QrScanRequestType } from '@metamask/eth-qr-keyring';
 
 interface IQRSigningDetails {
-  QRState: IQRState;
+  pendingScanRequest: QrScanRequest;
   successCallback?: () => void;
   failureCallback?: (error: string) => void;
   cancelCallback?: () => void;
@@ -117,7 +111,7 @@ const createStyles = (colors: any) =>
   });
 
 const QRSigningDetails = ({
-  QRState,
+  pendingScanRequest,
   successCallback,
   failureCallback,
   cancelCallback,
@@ -133,12 +127,6 @@ const QRSigningDetails = ({
   const { trackEvent, createEventBuilder } = useMetrics();
   const styles = createStyles(colors);
   const navigation = useNavigation();
-  const KeyringController = useMemo(() => {
-    // TODO: Replace "any" with type
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const { KeyringController: keyring } = Engine.context as any;
-    return keyring;
-  }, []);
   const [scannerVisible, setScannerVisible] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const [shouldPause, setShouldPause] = useState(false);
@@ -195,11 +183,14 @@ const QRSigningDetails = ({
         return;
       }
       e.preventDefault();
-      KeyringController.cancelQRSignRequest().then(() => {
-        navigation.dispatch(e.data.action);
-      });
+      if (pendingScanRequest) {
+        Engine.getQrKeyringScanner().rejectPendingScan(
+          new Error('Scan canceled'),
+        );
+      }
+      navigation.dispatch(e.data.action);
     });
-  }, [KeyringController, hasSentOrCanceled, navigation]);
+  }, [pendingScanRequest, hasSentOrCanceled, navigation]);
 
   const resetError = () => {
     setErrorMessage('');
@@ -215,11 +206,15 @@ const QRSigningDetails = ({
   };
 
   const onCancel = useCallback(async () => {
-    await KeyringController.cancelQRSignRequest();
+    if (pendingScanRequest) {
+      Engine.getQrKeyringScanner().rejectPendingScan(
+        new Error('Scan canceled'),
+      );
+    }
     setSentOrCanceled(true);
     hideScanner();
     cancelCallback?.();
-  }, [KeyringController, cancelCallback]);
+  }, [pendingScanRequest, cancelCallback]);
 
   const onScanSuccess = useCallback(
     (ur: UR) => {
@@ -228,11 +223,11 @@ const QRSigningDetails = ({
       const buffer = signature.getRequestId();
       if (buffer) {
         const requestId = uuidStringify(buffer);
-        if (QRState.sign.request?.requestId === requestId) {
-          KeyringController.submitQRSignature(
-            QRState.sign.request?.requestId as string,
-            ur.cbor.toString('hex'),
-          );
+        if (pendingScanRequest?.request?.requestId === requestId) {
+          Engine.getQrKeyringScanner().resolvePendingScan({
+            type: ur.type,
+            cbor: ur.cbor.toString('hex'),
+          });
           setSentOrCanceled(true);
           successCallback?.();
           return;
@@ -250,8 +245,7 @@ const QRSigningDetails = ({
       failureCallback?.(strings('transaction.mismatched_qr_request_id'));
     },
     [
-      KeyringController,
-      QRState.sign.request?.requestId,
+      pendingScanRequest?.request?.requestId,
       failureCallback,
       successCallback,
       trackEvent,
@@ -287,7 +281,7 @@ const QRSigningDetails = ({
 
   return (
     <Fragment>
-      {QRState?.sign?.request && (
+      {pendingScanRequest?.request && (
         <ScrollView contentContainerStyle={styles.wrapper}>
           <ActionView
             confirmDisabled={!hasCameraPermission}
@@ -326,8 +320,8 @@ const QRSigningDetails = ({
                 </Text>
               </View>
               <AnimatedQRCode
-                cbor={QRState.sign.request.payload.cbor}
-                type={QRState.sign.request.payload.type}
+                cbor={pendingScanRequest.request.payload.cbor}
+                type={pendingScanRequest.request.payload.type}
                 shouldPause={
                   scannerVisible || !shouldStartAnimated || shouldPause
                 }
@@ -368,7 +362,7 @@ const QRSigningDetails = ({
       <AnimatedQRScannerModal
         pauseQRCode={setShouldPause}
         visible={scannerVisible}
-        purpose={'sign'}
+        purpose={QrScanRequestType.SIGN}
         onScanSuccess={onScanSuccess}
         onScanError={onScanError}
         hideModal={hideScanner}

app/components/UI/QRHardware/QRSigningModal/index.tsx

@@ -1,17 +1,17 @@
 import React, { useState } from 'react';
 import Modal from 'react-native-modal';
-import { IQRState } from '../types';
 import { StyleSheet, View } from 'react-native';
 import QRSigningDetails from '../QRSigningDetails';
 import { useTheme } from '../../../../util/theme';
 import { useDispatch, useSelector } from 'react-redux';
 import { getNormalizedTxState } from '../../../../util/transactions';
 import { resetTransaction } from '../../../../actions/transaction';
 import { selectSelectedInternalAccount } from '../../../../selectors/accountsController';
+import { QrScanRequest } from '@metamask/eth-qr-keyring';
 
 interface IQRSigningModalProps {
   isVisible: boolean;
-  QRState: IQRState;
+  pendingScanRequest: QrScanRequest;
   onSuccess?: () => void;
   onCancel?: () => void;
   onFailure?: (error: string) => void;
@@ -37,7 +37,7 @@ const createStyles = (colors: any) =>
 
 const QRSigningModal = ({
   isVisible,
-  QRState,
+  pendingScanRequest,
   onSuccess,
   onCancel,
   onFailure,
@@ -85,7 +85,7 @@ const QRSigningModal = ({
     >
       <View style={styles.contentWrapper}>
         <QRSigningDetails
-          QRState={QRState}
+          pendingScanRequest={pendingScanRequest}
           showCancelButton
           tighten
           showHint