feat: trigger qrsigning modal using approval controller (#6212)

* feat: trigger qrsigning modal using approval controller

* fix: use approval request to control QR modal

* remove QRState usage

* use approval request to control QR modal for tx

* fix lint

* add early return on qr signing modal

---------

Co-authored-by: Vinicius Stevam <vinicius.stevam@consensys.net>
Co-authored-by: Vinicius Stevam <45455812+vinistevam@users.noreply.github.com>

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -380,12 +380,16 @@ const RootRPCMethodsUI = (props) => {
 
   const renderQRSigningModal = () => {
     const { isSigningQRObject, QRState } = props;
-    const shouldRenderThisModal = !showPendingApproval && isSigningQRObject;
-    return (
-      shouldRenderThisModal && (
-        <QRSigningModal isVisible={isSigningQRObject} QRState={QRState} />
-      )
-    );
+
+    if (
+      !isSigningQRObject ||
+      transactionModalType ||
+      showPendingApproval?.type !== ApprovalTypes.TRANSACTION
+    ) {
+      return null;
+    }
+
+    return <QRSigningModal isVisible QRState={QRState} />;
   };
 
   const onWalletConnectSessionApproval = () => {
@@ -439,6 +443,7 @@ const RootRPCMethodsUI = (props) => {
 
   const hideTransactionModal = () => {
     setShowPendingApproval(false);
+    setTransactionModalType(undefined);
   };
 
   const showTransactionApproval = () =>
@@ -830,7 +835,9 @@ RootRPCMethodsUI.propTypes = {
    * Chain id
    */
   chainId: PropTypes.string,
+  // eslint-disable-next-line react/no-unused-prop-types
   isSigningQRObject: PropTypes.bool,
+  // eslint-disable-next-line react/no-unused-prop-types
   QRState: PropTypes.object,
   /**
    * updates redux when network is switched