diff --git a/app/components/Nav/Main/RootRPCMethodsUI.js b/app/components/Nav/Main/RootRPCMethodsUI.js
index 744422091cbf..a09ecd52edec 100644
--- a/app/components/Nav/Main/RootRPCMethodsUI.js
+++ b/app/components/Nav/Main/RootRPCMethodsUI.js
@@ -6,7 +6,6 @@ import { connect, useSelector } from 'react-redux';
import { ethers } from 'ethers';
import abi from 'human-standard-token-abi';
import { ethErrors } from 'eth-json-rpc-errors';
-import { v1 as random } from 'uuid';
import Approval from '../../Views/Approval';
import NotificationManager from '../../../core/NotificationManager';
@@ -50,7 +49,6 @@ import AnalyticsV2 from '../../../util/analyticsV2';
import { useTheme } from '../../../util/theme';
import withQRHardwareAwareness from '../../UI/QRHardware/withQRHardwareAwareness';
-import QRSigningModal from '../../UI/QRHardware/QRSigningModal';
import SignatureRequestRoot from '../../UI/SignatureRequest/Root';
import { networkSwitched } from '../../../actions/onboardNetwork';
import {
@@ -79,7 +77,6 @@ const RootRPCMethodsUI = (props) => {
const [customNetworkToAdd, setCustomNetworkToAdd] = useState(null);
const [customNetworkToSwitch, setCustomNetworkToSwitch] = useState(null);
- const [qrSigningState, setQrSigningState] = useState(null);
const [hostToApprove, setHostToApprove] = useState(null);
@@ -89,8 +86,6 @@ const RootRPCMethodsUI = (props) => {
const setTransactionObject = props.setTransactionObject;
const setEtherTransaction = props.setEtherTransaction;
- const QRState = props.QRState;
- const isSigningQRObject = props.isSigningQRObject;
const TransactionModalType = {
Transaction: 'transaction',
@@ -382,28 +377,6 @@ const RootRPCMethodsUI = (props) => {
],
);
- const onQRSigningApproval = () => {
- setShowPendingApproval(false);
- acceptPendingApproval(qrSigningState.id, qrSigningState.data);
- setQrSigningState(undefined);
- };
-
- const onQRSigningRejected = () => {
- setShowPendingApproval(false);
- rejectPendingApproval(qrSigningState.id, qrSigningState.data);
- setQrSigningState(undefined);
- };
-
- const renderQRSigningModal = () =>
- showPendingApproval && (
-
- );
-
const onWalletConnectSessionApproval = () => {
setShowPendingApproval(false);
acceptPendingApproval(
@@ -778,13 +751,6 @@ const RootRPCMethodsUI = (props) => {
origin: request.origin,
});
break;
- case ApprovalTypes.QR_SIGNING:
- setQrSigningState({ data: requestData, id: request.id });
- showPendingApprovalModal({
- type: ApprovalTypes.QR_SIGNING,
- origin: request.origin,
- });
- break;
default:
break;
}
@@ -793,34 +759,6 @@ const RootRPCMethodsUI = (props) => {
}
};
- useEffect(() => {
- async function checkAndAddQRSigningApproval() {
- if (
- isSigningQRObject &&
- !approveModalVisible &&
- !dappTransactionModalVisible
- ) {
- const { ApprovalController } = Engine.context;
- try {
- await ApprovalController.add({
- id: random(),
- origin: 'metamask',
- requestData: QRState,
- type: ApprovalTypes.QR_SIGNING,
- });
- } catch (error) {
- throw new Error('QR signing failed');
- }
- }
- }
- checkAndAddQRSigningApproval();
- }, [
- QRState,
- approveModalVisible,
- dappTransactionModalVisible,
- isSigningQRObject,
- ]);
-
useEffect(() => {
initializeWalletConnect();
@@ -849,7 +787,6 @@ const RootRPCMethodsUI = (props) => {
{renderAddCustomNetworkModal()}
{renderSwitchCustomNetworkModal()}
{renderWatchAssetModal()}
- {renderQRSigningModal()}
{renderAccountsApprovalModal()}
);
@@ -881,8 +818,6 @@ RootRPCMethodsUI.propTypes = {
* Chain id
*/
chainId: PropTypes.string,
- isSigningQRObject: PropTypes.bool,
- QRState: PropTypes.object,
/**
* updates redux when network is switched
*/
diff --git a/app/components/UI/SignatureRequest/index.js b/app/components/UI/SignatureRequest/index.js
index 4fd1ae1774c7..bb589b8cccfd 100644
--- a/app/components/UI/SignatureRequest/index.js
+++ b/app/components/UI/SignatureRequest/index.js
@@ -15,6 +15,7 @@ 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) =>
@@ -152,6 +153,8 @@ class SignatureRequest extends PureComponent {
* Active address of account that triggered signing.
*/
fromAddress: PropTypes.string,
+ isSigningQRObject: PropTypes.bool,
+ QRState: PropTypes.object,
testID: PropTypes.string,
};
@@ -323,8 +326,28 @@ class SignatureRequest extends PureComponent {
);
}
+ renderQRDetails() {
+ const { QRState, fromAddress } = this.props;
+ const styles = this.getStyles();
+
+ return (
+
+
+
+ );
+ }
+
render() {
- return this.renderSignatureRequest();
+ const { isSigningQRObject } = this.props;
+ return isSigningQRObject
+ ? this.renderQRDetails()
+ : this.renderSignatureRequest();
}
}
diff --git a/app/core/RPCMethods/RPCMethodMiddleware.ts b/app/core/RPCMethods/RPCMethodMiddleware.ts
index fd82dd386cf9..3c146671ed7d 100644
--- a/app/core/RPCMethods/RPCMethodMiddleware.ts
+++ b/app/core/RPCMethods/RPCMethodMiddleware.ts
@@ -38,7 +38,6 @@ export enum ApprovalTypes {
ETH_SIGN_TYPED_DATA = 'eth_signTypedData',
WATCH_ASSET = 'wallet_watchAsset',
TRANSACTION = 'transaction',
- QR_SIGNING = 'QR_SIGNING',
}
interface RPCMethodsMiddleParameters {