use approval accept/reject in ui for signatures

MetaMask · Jun 15, 2023 · 79b1257 · 79b1257
1 parent 69a55c7
commit 79b1257
Show file tree

Hide file tree

Showing 7 changed files with 576 additions and 93 deletions.
diff --git a/app/components/Nav/Main/RootRPCMethodsUI.js b/app/components/Nav/Main/RootRPCMethodsUI.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 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 { ethErrors, serializeError } from 'eth-json-rpc-errors';
 
 import Approval from '../../Views/Approval';
 import NotificationManager from '../../../core/NotificationManager';
@@ -93,25 +93,7 @@ const RootRPCMethodsUI = (props) => {
     Dapp: 'dapp',
   };
 
-  // Reject pending approval using MetaMask SDK.
-  const rejectPendingApproval = (id, error) => {
-    const { ApprovalController } = Engine.context;
-    try {
-      ApprovalController.reject(id, error);
-    } catch (error) {
-      Logger.error(error, 'Reject while rejecting pending connection request');
-    }
-  };
-
-  // Accept pending approval using MetaMask SDK.
-  const acceptPendingApproval = (id, requestData) => {
-    const { ApprovalController } = Engine.context;
-    try {
-      ApprovalController.accept(id, requestData);
-    } catch (err) {
-      // Ignore err if request already approved or doesn't exists.
-    }
-  };
+  const { resolvePendingApproval, rejectPendingApproval } = Engine;
 
   const showPendingApprovalModal = ({ type, origin }) => {
     InteractionManager.runAfterInteractions(() => {
@@ -390,7 +372,7 @@ const RootRPCMethodsUI = (props) => {
 
   const onWalletConnectSessionApproval = () => {
     setShowPendingApproval(false);
-    acceptPendingApproval(
+    resolvePendingApproval(
       walletConnectRequestInfo.id,
       walletConnectRequestInfo.data,
     );
@@ -401,7 +383,7 @@ const RootRPCMethodsUI = (props) => {
     setShowPendingApproval(false);
     rejectPendingApproval(
       walletConnectRequestInfo.id,
-      ethErrors.provider.userRejectedRequest(),
+      serializeError(ethErrors.provider.userRejectedRequest()),
     );
     setWalletConnectRequestInfo(undefined);
   };
@@ -475,13 +457,13 @@ const RootRPCMethodsUI = (props) => {
     setShowPendingApproval(false);
     rejectPendingApproval(
       customNetworkToAdd.id,
-      ethErrors.provider.userRejectedRequest(),
+      serializeError(ethErrors.provider.userRejectedRequest()),
     );
   };
 
   const onAddCustomNetworkConfirm = () => {
     setShowPendingApproval(false);
-    acceptPendingApproval(customNetworkToAdd.id, customNetworkToAdd.data);
+    resolvePendingApproval(customNetworkToAdd.id, customNetworkToAdd.data);
   };
 
   /**
@@ -513,13 +495,13 @@ const RootRPCMethodsUI = (props) => {
     setShowPendingApproval(false);
     rejectPendingApproval(
       customNetworkToSwitch.id,
-      ethErrors.provider.userRejectedRequest(),
+      serializeError(ethErrors.provider.userRejectedRequest()),
     );
   };
 
   const onSwitchCustomNetworkConfirm = () => {
     setShowPendingApproval(false);
-    acceptPendingApproval(customNetworkToSwitch.id, customNetworkToSwitch.data);
+    resolvePendingApproval(customNetworkToSwitch.id, customNetworkToSwitch.data);
     props.networkSwitched({
       networkUrl: customNetworkToSwitch.data.rpcUrl,
       networkStatus: true,
@@ -560,7 +542,7 @@ const RootRPCMethodsUI = (props) => {
    */
   const onAccountsConfirm = () => {
     if (hostToApprove) {
-      acceptPendingApproval(hostToApprove.id, hostToApprove.requestData);
+      resolvePendingApproval(hostToApprove.id, hostToApprove.requestData);
     }
     setShowPendingApproval(false);
   };
@@ -603,7 +585,7 @@ const RootRPCMethodsUI = (props) => {
    * On confirming watching an asset
    */
   const onWatchAssetConfirm = () => {
-    acceptPendingApproval(watchAsset.id, watchAsset.data);
+    resolvePendingApproval(watchAsset.id, watchAsset.data);
     setShowPendingApproval(false);
     setWatchAsset(undefined);
   };
@@ -614,7 +596,7 @@ const RootRPCMethodsUI = (props) => {
   const onWatchAssetReject = () => {
     rejectPendingApproval(
       watchAsset.id,
-      ethErrors.provider.userRejectedRequest(),
+      serializeError(ethErrors.provider.userRejectedRequest()),
     );
     setShowPendingApproval(false);
     setWatchAsset(undefined);
@@ -654,6 +636,15 @@ const RootRPCMethodsUI = (props) => {
   };
 
   const onSign = () => {
+    resolvePendingApproval(signMessageParams.metamaskId);
+    setSignMessageParams(undefined);
+  };
+
+  const onCancel = () => {
+    rejectPendingApproval(
+      signMessageParams.metamaskId,
+      serializeError(ethErrors.provider.userRejectedRequest()),
+    );
     setSignMessageParams(undefined);
   };
 
@@ -662,6 +653,7 @@ const RootRPCMethodsUI = (props) => {
       messageParams={signMessageParams}
       approvalType={showPendingApproval?.type}
       onSign={onSign}
+      onCancel={onCancel}
     />
   );
 

diff --git a/app/components/UI/MessageSign/index.js b/app/components/UI/MessageSign/index.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, View, Text, InteractionManager } from 'react-native';
+import { ethErrors, serializeError } from 'eth-rpc-errors';
 import { fontStyles } from '../../../styles/common';
 import Engine from '../../../core/Engine';
 import SignatureRequest from '../SignatureRequest';
@@ -124,16 +125,18 @@ class MessageSign extends PureComponent {
 
   signMessage = async () => {
     const { messageParams } = this.props;
-    const { SignatureController } = Engine.context;
-    await SignatureController.signMessage(messageParams);
+    const { resolvePendingApproval } = Engine;
+    resolvePendingApproval(messageParams.metamaskId);
     this.showWalletConnectNotification(messageParams, true);
   };
 
   rejectMessage = async () => {
     const { messageParams } = this.props;
-    const { SignatureController } = Engine.context;
-    const messageId = messageParams.metamaskId;
-    await SignatureController.cancelMessage(messageId);
+    const { rejectPendingApproval } = Engine;
+    rejectPendingApproval(
+      messageParams.metamaskId,
+      serializeError(ethErrors.provider.userRejectedRequest()),
+    );
     this.showWalletConnectNotification(messageParams);
   };
 

diff --git a/app/components/UI/PersonalSign/PersonalSign.tsx b/app/components/UI/PersonalSign/PersonalSign.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { View, Text, InteractionManager } from 'react-native';
+import { ethErrors, serializeError } from 'eth-rpc-errors';
 import Engine from '../../../core/Engine';
 import SignatureRequest from '../SignatureRequest';
 import ExpandedMessage from '../SignatureRequest/ExpandedMessage';
@@ -89,14 +90,17 @@ const PersonalSign = ({
   };
 
   const signMessage = async () => {
-    const { SignatureController }: any = Engine.context;
-    await SignatureController.signPersonalMessage(messageParams);
+    const { resolvePendingApproval }: any = Engine;
+    resolvePendingApproval(messageParams.metamaskId);
     showWalletConnectNotification(true);
   };
 
   const rejectMessage = async () => {
-    const { SignatureController }: any = Engine.context;
-    await SignatureController.cancelPersonalMessage(messageParams.metamaskId);
+    const { rejectPendingApproval }: any = Engine;
+    rejectPendingApproval(
+      messageParams.metamaskId,
+      serializeError(ethErrors.provider.userRejectedRequest()),
+    );
     showWalletConnectNotification(false);
   };
 

diff --git a/app/components/UI/SignatureRequest/Root/Root.tsx b/app/components/UI/SignatureRequest/Root/Root.tsx
@@ -13,6 +13,7 @@ interface RootProps {
   messageParams?: MessageParams;
   approvalType?: string;
   onSign: () => void;
+  onCancel: () => void;
 }
 
 const styles = StyleSheet.create({
@@ -22,7 +23,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const Root = ({ messageParams, approvalType, onSign }: RootProps) => {
+const Root = ({ messageParams, approvalType, onSign, onCancel }: RootProps) => {
   const navigation = useNavigation();
   const { colors } = useTheme();
   const [showExpandedMessage, setShowExpandedMessage] = useState(false);
@@ -35,7 +36,7 @@ const Root = ({ messageParams, approvalType, onSign }: RootProps) => {
   if (!messageParams || !currentPageMeta || !approvalType) {
     return null;
   }
-
+  
   return (
     <Modal
       isVisible
@@ -46,16 +47,16 @@ const Root = ({ messageParams, approvalType, onSign }: RootProps) => {
       backdropOpacity={1}
       animationInTiming={600}
       animationOutTiming={600}
-      onBackdropPress={onSign}
-      onBackButtonPress={showExpandedMessage ? toggleExpandedMessage : onSign}
-      onSwipeComplete={onSign}
+      onBackdropPress={onCancel}
+      onBackButtonPress={showExpandedMessage ? toggleExpandedMessage : onCancel}
+      onSwipeComplete={onCancel}
       swipeDirection={'down'}
       propagateSwipe
     >
       {approvalType === ApprovalTypes.PERSONAL_SIGN && (
         <PersonalSign
           messageParams={messageParams}
-          onCancel={onSign}
+          onCancel={onCancel}
           onConfirm={onSign}
           currentPageInformation={currentPageMeta}
           toggleExpandedMessage={toggleExpandedMessage}
@@ -66,7 +67,7 @@ const Root = ({ messageParams, approvalType, onSign }: RootProps) => {
         <TypedSign
           navigation={navigation}
           messageParams={messageParams}
-          onCancel={onSign}
+          onCancel={onCancel}
           onConfirm={onSign}
           currentPageInformation={currentPageMeta}
           toggleExpandedMessage={toggleExpandedMessage}
@@ -77,7 +78,7 @@ const Root = ({ messageParams, approvalType, onSign }: RootProps) => {
         <MessageSign
           navigation={navigation}
           messageParams={messageParams}
-          onCancel={onSign}
+          onCancel={onCancel}
           onConfirm={onSign}
           currentPageInformation={currentPageMeta}
           toggleExpandedMessage={toggleExpandedMessage}

diff --git a/app/components/UI/TypedSign/index.js b/app/components/UI/TypedSign/index.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, View, Text, InteractionManager } from 'react-native';
+import { ethErrors, serializeError } from 'eth-rpc-errors';
 import { fontStyles } from '../../../styles/common';
 import Engine from '../../../core/Engine';
 import SignatureRequest from '../SignatureRequest';
@@ -139,11 +140,9 @@ class TypedSign extends PureComponent {
 
   signMessage = async () => {
     const { messageParams } = this.props;
-    const { SignatureController } = Engine.context;
+    const { resolvePendingApproval } = Engine;
     try {
-      await SignatureController.signTypedMessage(messageParams, {
-        parseJsonData: false,
-      });
+      resolvePendingApproval(messageParams.metamaskId);
       this.showWalletConnectNotification(messageParams, true);
     } catch (error) {
       this.showWalletConnectNotification(messageParams, false, true);
@@ -152,9 +151,11 @@ class TypedSign extends PureComponent {
 
   rejectMessage = async () => {
     const { messageParams } = this.props;
-    const { SignatureController } = Engine.context;
-    const messageId = messageParams.metamaskId;
-    await SignatureController.cancelTypedMessage(messageId);
+    const { rejectPendingApproval } = Engine;
+    rejectPendingApproval(
+      messageParams.metamaskId,
+      serializeError(ethErrors.provider.userRejectedRequest()),
+    );
     this.showWalletConnectNotification(messageParams);
   };
 

diff --git a/app/core/Engine.ts b/app/core/Engine.ts
@@ -23,11 +23,15 @@ import { PhishingController } from '@metamask/phishing-controller';
 import { PreferencesController } from '@metamask/preferences-controller';
 import { TransactionController } from '@metamask/transaction-controller';
 import { GasFeeController } from '@metamask/gas-fee-controller';
-import { ApprovalController } from '@metamask/approval-controller';
+import {
+  ApprovalController,
+  ApprovalRequestNotFoundError,
+} from '@metamask/approval-controller';
 import { PermissionController } from '@metamask/permission-controller';
 import SwapsController, { swapsUtils } from '@metamask/swaps-controller';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { MetaMaskKeyring as QRHardwareKeyring } from '@keystonehq/metamask-airgapped-keyring';
+import { EthereumRpcError } from 'eth-rpc-errors';
 import Encryptor from './Encryptor';
 import Networks, {
   isMainnetByChainId,
@@ -433,11 +437,7 @@ class Engine {
         new SignatureController({
           messenger: this.controllerMessenger.getRestricted({
             name: 'SignatureController',
-            allowedActions: [
-              `${approvalController.name}:addRequest`,
-              `${approvalController.name}:acceptRequest`,
-              `${approvalController.name}:rejectRequest`,
-            ],
+            allowedActions: [`${approvalController.name}:addRequest`],
           }),
           isEthSignEnabled: () =>
             Boolean(
@@ -785,6 +785,27 @@ class Engine {
     this.controllerMessenger.clearSubscriptions();
   }
 
+  resolvePendingApproval = (id, data) => {
+    const { ApprovalController } = this.context;
+    try {
+      ApprovalController.accept(id, data);
+    } catch (err) {
+      // Ignore err if request already approved or doesn't exists.
+    }
+  };
+
+  rejectPendingApproval = (id, error) => {
+    const { ApprovalController } = this.context;
+    try {
+      ApprovalController.reject(
+        id,
+        new EthereumRpcError(error.code, error.message, error.data),
+      );
+    } catch (error) {
+      Logger.error(error, 'Reject while rejecting pending connection request');
+    }
+  };
+
   async destroyEngineInstance() {
     this.removeAllListeners();
     await this.resetState();
@@ -822,6 +843,7 @@ export default {
       TokenDetectionController,
       NftDetectionController,
       PermissionController,
+      ApprovalController,
     } = instance.datamodel.state;
 
     // normalize `null` currencyRate to `0`
@@ -835,6 +857,7 @@ export default {
     };
 
     return {
+      ApprovalController,
       AccountTrackerController,
       AddressBookController,
       AssetsContractController,
@@ -880,4 +903,10 @@ export default {
     Object.freeze(instance);
     return instance;
   },
+  resolvePendingApproval(id) {
+    return instance.resolvePendingApproval(id);
+  },
+  rejectPendingApproval(id, error) {
+    return instance.rejectPendingApproval(id, error);
+  },
 };