(wip) refactor: use @metamask/eth-qr-keyring

Author: mikesposito

app/actions/modals/index.js

@@ -31,3 +31,10 @@ export function toggleSignModal(show) {
     show,
   };
 }
+
+export function toggleQrKeyringScanModal(show) {
+  return {
+    type: 'TOGGLE_QR_KEYRING_SCAN_MODAL',
+    show,
+  };
+}

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/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({
@@ -95,7 +96,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;
@@ -122,7 +123,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,
@@ -148,7 +149,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',
           )}
@@ -198,7 +199,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

@@ -23,7 +23,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 +33,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 +117,7 @@ const createStyles = (colors: any) =>
   });
 
 const QRSigningDetails = ({
-  QRState,
+  pendingScanRequest,
   successCallback,
   failureCallback,
   cancelCallback,
@@ -228,11 +228,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.resolveQrKeyringScanRequest({
+            type: ur.type,
+            cbor: ur.cbor.toString('hex'),
+          });
           setSentOrCanceled(true);
           successCallback?.();
           return;
@@ -250,8 +250,7 @@ const QRSigningDetails = ({
       failureCallback?.(strings('transaction.mismatched_qr_request_id'));
     },
     [
-      KeyringController,
-      QRState.sign.request?.requestId,
+      pendingScanRequest?.request?.requestId,
       failureCallback,
       successCallback,
       trackEvent,
@@ -287,7 +286,7 @@ const QRSigningDetails = ({
 
   return (
     <Fragment>
-      {QRState?.sign?.request && (
+      {pendingScanRequest?.request && (
         <ScrollView contentContainerStyle={styles.wrapper}>
           <ActionView
             confirmDisabled={!hasCameraPermission}
@@ -326,8 +325,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
                 }
@@ -366,7 +365,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

app/components/UI/QRHardware/types.tsx

@@ -1,54 +1,30 @@
-import React, { useState, useEffect, ComponentClass } from 'react';
-import Engine from '../../../core/Engine';
-import { IQRState } from './types';
+import React, { ComponentClass } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from 'app/reducers';
+import { QrScanRequest, QrScanRequestType } from '@metamask/eth-qr-keyring';
 
 const withQRHardwareAwareness = (
   Children: ComponentClass<{
-    QRState?: IQRState;
+    pendingScanRequest?: QrScanRequest;
     isSigningQRObject?: boolean;
     isSyncingQRHardware?: boolean;
   }>,
 ) => {
   // TODO: Replace "any" with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const QRHardwareAwareness = (props: any) => {
-    const [QRState, SetQRState] = useState<IQRState>({
-      sync: {
-        reading: false,
-      },
-      sign: {},
-    });
-
-    // TODO: Replace "any" with type
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const subscribeKeyringState = (value: any) => {
-      SetQRState(value);
-    };
-
-    useEffect(() => {
-      // This ensures that a QR keyring gets created if it doesn't already exist.
-      // This is intentionally not awaited (the subscription still gets setup correctly if called
-      // before the keyring is created).
-      // TODO: Stop automatically creating keyrings
-      Engine.context.KeyringController.getOrAddQRKeyring();
-      Engine.controllerMessenger.subscribe(
-        'KeyringController:qrKeyringStateChange',
-        subscribeKeyringState,
-      );
-      return () => {
-        Engine.controllerMessenger.unsubscribe(
-          'KeyringController:qrKeyringStateChange',
-          subscribeKeyringState,
-        );
-      };
-    }, []);
+    const { pendingScanRequest } = useSelector(
+      (state: RootState) => state.qrKeyringScanner,
+    );
 
     return (
       <Children
         {...props}
-        isSigningQRObject={!!QRState.sign?.request}
-        isSyncingQRHardware={QRState.sync.reading}
-        QRState={QRState}
+        isSigningQRObject={pendingScanRequest?.type === QrScanRequestType.SIGN}
+        isSyncingQRHardware={
+          pendingScanRequest?.type === QrScanRequestType.PAIR
+        }
+        pendingScanRequest={pendingScanRequest}
       />
     );
   };

app/components/UI/QRHardware/withQRHardwareAwareness.tsx

@@ -47,6 +47,7 @@ import { useEIP7702Networks } from '../confirmations/hooks/7702/useEIP7702Networ
 import { isEvmAccountType } from '@metamask/keyring-api';
 import { toHex } from '@metamask/controller-utils';
 import { getMultichainBlockExplorer } from '../../../core/Multichain/networks';
+import { forgetQrDevice } from 'app/core/QrKeyring/QrKeyring';
 
 interface AccountActionsParams {
   selectedAccount: InternalAccount;
@@ -308,7 +309,7 @@ const AccountActions = () => {
           );
           break;
         case ExtendedKeyringTypes.qr:
-          await controllers.KeyringController.forgetQRDevice();
+          await forgetQrDevice();
           trackEvent(
             createEventBuilder(MetaMetricsEvents.HARDWARE_WALLET_FORGOTTEN)
               .addProperties({
@@ -429,8 +430,8 @@ const AccountActions = () => {
           )
           ///: END:ONLY_INCLUDE_IF
         }
-        {(networkSupporting7702Present &&
-          !isHardwareAccount(selectedAddress)) && (
+        {networkSupporting7702Present &&
+          !isHardwareAccount(selectedAddress) && (
             <AccountAction
               actionTitle={strings('account_actions.switch_to_smart_account')}
               iconName={IconName.SwapHorizontal}