fix: use approval request to control QR modal

MetaMask · May 4, 2023 · 74e0b32 · 74e0b32
1 parent 6b8fa7e
commit 74e0b32
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 30 deletions.
diff --git a/app/components/Nav/Main/RootRPCMethodsUI.js b/app/components/Nav/Main/RootRPCMethodsUI.js
@@ -95,6 +95,8 @@ const RootRPCMethodsUI = (props) => {
   const setEtherTransaction = props.setEtherTransaction;
   const QRState = props.QRState;
   const isSigningQRObject = props.isSigningQRObject;
+  const approveModalVisible = props.approveModalVisible;
+  const dappTransactionModalVisible = props.dappTransactionModalVisible;
 
   // Reject pending approval using MetaMask SDK.
   const rejectPendingApproval = (id, error) => {
@@ -394,11 +396,9 @@ const RootRPCMethodsUI = (props) => {
   };
 
   const renderQRSigningModal = () => {
-    const { QRState, approveModalVisible, dappTransactionModalVisible } = props;
-    const shouldRenderThisModal =
-      !approveModalVisible && !dappTransactionModalVisible;
+    const { QRState } = props;
     return (
-      shouldRenderThisModal && (
+      showPendingApproval && (
         <QRSigningModal
           isVisible={showPendingApproval?.type === ApprovalTypes.QR_SIGNING}
           QRState={QRState}
@@ -725,7 +725,11 @@ const RootRPCMethodsUI = (props) => {
 
   useEffect(() => {
     async function checkAndAddQRSigningApproval() {
-      if (isSigningQRObject) {
+      if (
+        isSigningQRObject &&
+        !approveModalVisible &&
+        !dappTransactionModalVisible
+      ) {
         const { ApprovalController } = Engine.context;
         try {
           await ApprovalController.add({
@@ -740,7 +744,12 @@ const RootRPCMethodsUI = (props) => {
       }
     }
     checkAndAddQRSigningApproval();
-  }, [QRState, isSigningQRObject]);
+  }, [
+    QRState,
+    approveModalVisible,
+    dappTransactionModalVisible,
+    isSigningQRObject,
+  ]);
 
   useEffect(() => {
     initializeWalletConnect();

diff --git a/app/components/UI/SignatureRequest/index.js b/app/components/UI/SignatureRequest/index.js
@@ -16,7 +16,6 @@ import Analytics from '../../../core/Analytics/Analytics';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { ThemeContext, mockTheme } from '../../../util/theme';
 import withQRHardwareAwareness from '../QRHardware/withQRHardwareAwareness';
-import QRSigningDetails from '../QRHardware/QRSigningDetails';
 import { selectProviderType } from '../../../selectors/networkController';
 
 const createStyles = (colors) =>
@@ -154,8 +153,6 @@ class SignatureRequest extends PureComponent {
      * Active address of account that triggered signing.
      */
     fromAddress: PropTypes.string,
-    isSigningQRObject: PropTypes.bool,
-    QRState: PropTypes.object,
   };
 
   /**
@@ -326,28 +323,8 @@ class SignatureRequest extends PureComponent {
     );
   }
 
-  renderQRDetails() {
-    const { QRState, fromAddress } = this.props;
-    const styles = this.getStyles();
-
-    return (
-      <View style={[styles.root]}>
-        <QRSigningDetails
-          QRState={QRState}
-          showCancelButton
-          showHint={false}
-          bypassAndroidCameraAccessCheck={false}
-          fromAddress={fromAddress}
-        />
-      </View>
-    );
-  }
-
   render() {
-    const { isSigningQRObject } = this.props;
-    return isSigningQRObject
-      ? this.renderQRDetails()
-      : this.renderSignatureRequest();
+    return this.renderSignatureRequest();
   }
 }