Trigger signing modals from approval requests

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -87,6 +87,8 @@ const RootRPCMethodsUI = (props) => {
   const [watchAsset, setWatchAsset] = useState(false);
   const [suggestedAssetMeta, setSuggestedAssetMeta] = useState(undefined);
 
+  const [signMessageParams, setSignMessageParams] = useState(undefined);
+
   const setTransactionObject = props.setTransactionObject;
   const toggleApproveModal = props.toggleApproveModal;
   const toggleDappTransactionModal = props.toggleDappTransactionModal;
@@ -620,6 +622,18 @@ const RootRPCMethodsUI = (props) => {
     </Modal>
   );
 
+  const onSign = () => {
+    setSignMessageParams(undefined);
+  };
+
+  const renderSigningModal = () => (
+    <SignatureRequestRoot
+      messageParams={signMessageParams}
+      approvalType={showPendingApproval?.type}
+      onSign={onSign}
+    />
+  );
+
   // unapprovedTransaction effect
   useEffect(() => {
     Engine.context.TransactionController.hub.on(
@@ -640,7 +654,7 @@ const RootRPCMethodsUI = (props) => {
     if (approval.pendingApprovalCount > 0) {
       const key = Object.keys(approval.pendingApprovals)[0];
       const request = approval.pendingApprovals[key];
-      const requestData = request.requestData;
+      const requestData = { ...request.requestData };
       if (requestData.pageMeta) {
         setCurrentPageMeta(requestData.pageMeta);
       }
@@ -695,6 +709,15 @@ const RootRPCMethodsUI = (props) => {
             origin: request.origin,
           });
           break;
+        case ApprovalTypes.ETH_SIGN:
+        case ApprovalTypes.PERSONAL_SIGN:
+        case ApprovalTypes.ETH_SIGN_TYPED_DATA:
+          setSignMessageParams(requestData);
+          showPendingApprovalModal({
+            type: request.type,
+            origin: request.origin,
+          });
+          break;
         default:
           break;
       }
@@ -732,7 +755,7 @@ const RootRPCMethodsUI = (props) => {
 
   return (
     <React.Fragment>
-      <SignatureRequestRoot />
+      {renderSigningModal()}
       {renderWalletConnectSessionRequestModal()}
       {renderDappTransactionModal()}
       {renderApproveModal()}

app/components/UI/SignatureRequest/Root/Root.test.tsx

@@ -7,6 +7,7 @@ import { shallow } from 'enzyme';
 import { ThemeContext, mockTheme } from '../../../../util/theme';
 
 import Root from '.';
+import { ApprovalTypes } from '../../../../core/RPCMethods/RPCMethodMiddleware';
 
 jest.mock('../../../../util/address', () => ({
   ...jest.requireActual('../../../../util/address'),
@@ -25,19 +26,6 @@ jest.mock('../../../../core/Engine', () => ({
       getAccountKeyringType: jest.fn(() => Promise.resolve({ data: {} })),
       getQRKeyringState: jest.fn(() => Promise.resolve({ data: {} })),
     },
-    SignatureController: {
-      hub: {
-        on: (eventName: any, fn: any) => {
-          if (eventName === 'unapprovedPersonalMessage') {
-            fn(
-              JSON.parse(
-                '{"data":"0x4578616d706c652060706572736f6e616c5f7369676e60206d657373616765","from":"0x935e73edb9ff52e23bac7f7e043a1ecd06d05477","meta":{"url":"https://metamask.github.io/test-dapp/","title":"E2E Test Dapp","icon":"https://api.faviconkit.com/metamask.github.io/50","analytics":{"request_source":"In-App-Browser"}},"origin":"metamask.github.io","metamaskId":"85b76fd0-d1e9-11ed-a2fd-8ff017956a45"}',
-              ),
-            );
-          }
-        },
-      },
-    },
   },
 }));
 
@@ -48,6 +36,22 @@ jest.mock('@react-navigation/native', () => ({
   createNavigatorFactory: () => ({}),
 }));
 
+const messageParamsMock = {
+  data: '0x4578616d706c652060706572736f6e616c5f7369676e60206d657373616765',
+  from: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+  meta: {
+    url: 'https://metamask.github.io/test-dapp/',
+    title: 'E2E Test Dapp',
+    icon: 'https://api.faviconkit.com/metamask.github.io/50',
+    analytics: {
+      request_source: 'In-App-Browser',
+      request_platform: 'Test-Platform',
+    },
+  },
+  origin: 'metamask.github.io',
+  metamaskId: '85b76fd0-d1e9-11ed-a2fd-8ff017956a45',
+};
+
 const mockStore = configureMockStore();
 const initialState = {
   settings: {},
@@ -87,15 +91,25 @@ const store = mockStore(initialState);
 
 describe('Root', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(<Root />);
+    const wrapper = shallow(
+      <Root
+        messageParams={undefined}
+        approvalType={undefined}
+        onSign={() => undefined}
+      />,
+    );
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should match snapshot', async () => {
     const container = render(
       <Provider store={store}>
         <ThemeContext.Provider value={mockTheme}>
-          <Root />
+          <Root
+            messageParams={messageParamsMock}
+            approvalType={ApprovalTypes.PERSONAL_SIGN}
+            onSign={() => undefined}
+          />
         </ThemeContext.Provider>
       </Provider>,
     );

app/components/UI/SignatureRequest/Root/Root.tsx

@@ -1,22 +1,18 @@
 import Modal from 'react-native-modal';
-import React, { useEffect, useState } from 'react';
-import { InteractionManager, StyleSheet } from 'react-native';
+import React, { useState } from 'react';
+import { StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-
-import Engine from '../../../../core/Engine';
-import { ApprovalTypes } from '../../../../core/RPCMethods/RPCMethodMiddleware';
 import { useTheme } from '../../../../util/theme';
-
 import MessageSign from '../../../UI/MessageSign';
 import PersonalSign from '../../../UI/PersonalSign';
 import TypedSign from '../../../UI/TypedSign';
+import { MessageParams } from '../types';
+import { ApprovalTypes } from '../../../../core/RPCMethods/RPCMethodMiddleware';
 
-import { MessageInfo, MessageParams, PageMeta } from '../types';
-
-enum MessageType {
-  ETH = 'eth',
-  Personal = 'personal',
-  Typed = 'typed',
+interface RootProps {
+  messageParams?: MessageParams;
+  approvalType?: string;
+  onSign: () => void;
 }
 
 const styles = StyleSheet.create({
@@ -26,113 +22,63 @@ const styles = StyleSheet.create({
   },
 });
 
-const Root = () => {
+const Root = ({ messageParams, approvalType, onSign }: RootProps) => {
   const navigation = useNavigation();
   const { colors } = useTheme();
-
-  const [currentPageMeta, setCurrentPageMeta] = useState<PageMeta>();
-  const [pendingApproval, setPendingApproval] = useState<MessageInfo>();
   const [showExpandedMessage, setShowExpandedMessage] = useState(false);
-  const [signMessageParams, setSignMessageParams] = useState<MessageParams>();
-  const [signType, setSignType] = useState<string>();
-
-  const showPendingApprovalModal = ({ type, origin }: MessageInfo) => {
-    InteractionManager.runAfterInteractions(() => {
-      setPendingApproval({ type, origin });
-    });
-  };
-
-  const onSignAction = () => setPendingApproval(undefined);
 
   const toggleExpandedMessage = () =>
     setShowExpandedMessage(!showExpandedMessage);
 
-  const onUnapprovedMessage = (messageParams: MessageParams, type: string) => {
-    setCurrentPageMeta(messageParams.meta);
-    const signMsgParams = { ...messageParams };
-    delete signMsgParams.meta;
-    setSignMessageParams(signMsgParams);
-    setSignType(type);
-    showPendingApprovalModal({
-      type: ApprovalTypes.SIGN_MESSAGE,
-      origin: signMsgParams.origin,
-    });
-  };
-
-  useEffect(() => {
-    Engine.context.SignatureController.hub.on(
-      'unapprovedMessage',
-      (messageParams: MessageParams) =>
-        onUnapprovedMessage(messageParams, MessageType.ETH),
-    );
-
-    Engine.context.SignatureController.hub.on(
-      'unapprovedPersonalMessage',
-      (messageParams: MessageParams) =>
-        onUnapprovedMessage(messageParams, MessageType.Personal),
-    );
-
-    Engine.context.SignatureController.hub.on(
-      'unapprovedTypedMessage',
-      (messageParams: MessageParams) =>
-        onUnapprovedMessage(messageParams, MessageType.Typed),
-    );
-
-    return function cleanup() {
-      Engine.context.SignatureController.hub.removeAllListeners();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const currentPageMeta = messageParams?.meta;
 
-  if (!signMessageParams || !currentPageMeta) {
+  if (!messageParams || !currentPageMeta || !approvalType) {
     return null;
   }
 
   return (
     <Modal
-      isVisible={pendingApproval?.type === ApprovalTypes.SIGN_MESSAGE}
+      isVisible
       animationIn="slideInUp"
       animationOut="slideOutDown"
       style={styles.bottomModal}
       backdropColor={colors.overlay.default}
       backdropOpacity={1}
       animationInTiming={600}
       animationOutTiming={600}
-      onBackdropPress={onSignAction}
-      onBackButtonPress={
-        showExpandedMessage ? toggleExpandedMessage : onSignAction
-      }
-      onSwipeComplete={onSignAction}
+      onBackdropPress={onSign}
+      onBackButtonPress={showExpandedMessage ? toggleExpandedMessage : onSign}
+      onSwipeComplete={onSign}
       swipeDirection={'down'}
       propagateSwipe
     >
-      {signType === MessageType.Personal && (
+      {approvalType === ApprovalTypes.PERSONAL_SIGN && (
         <PersonalSign
-          messageParams={signMessageParams}
-          onCancel={onSignAction}
-          onConfirm={onSignAction}
+          messageParams={messageParams}
+          onCancel={onSign}
+          onConfirm={onSign}
           currentPageInformation={currentPageMeta}
           toggleExpandedMessage={toggleExpandedMessage}
           showExpandedMessage={showExpandedMessage}
         />
       )}
-      {signType === MessageType.Typed && (
+      {approvalType === ApprovalTypes.ETH_SIGN_TYPED_DATA && (
         <TypedSign
           navigation={navigation}
-          messageParams={signMessageParams}
-          onCancel={onSignAction}
-          onConfirm={onSignAction}
+          messageParams={messageParams}
+          onCancel={onSign}
+          onConfirm={onSign}
           currentPageInformation={currentPageMeta}
           toggleExpandedMessage={toggleExpandedMessage}
           showExpandedMessage={showExpandedMessage}
         />
       )}
-      {signType === MessageType.ETH && (
+      {approvalType === ApprovalTypes.ETH_SIGN && (
         <MessageSign
           navigation={navigation}
-          messageParams={signMessageParams}
-          onCancel={onSignAction}
-          onConfirm={onSignAction}
+          messageParams={messageParams}
+          onCancel={onSign}
+          onConfirm={onSign}
           currentPageInformation={currentPageMeta}
           toggleExpandedMessage={toggleExpandedMessage}
           showExpandedMessage={showExpandedMessage}

app/components/UI/SignatureRequest/Root/__snapshots__/Root.test.tsx.snap

@@ -28,14 +28,12 @@ exports[`Root should match snapshot 1`] = `
   swipeDirection="down"
   swipeThreshold={100}
   transparent={true}
-  visible={false}
+  visible={true}
 >
   <View
     accessible={true}
-    collapsable={false}
     focusable={true}
     forwardedRef={[Function]}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -58,12 +56,10 @@ exports[`Root should match snapshot 1`] = `
     }
   />
   <View
-    collapsable={false}
     deviceHeight={null}
     deviceWidth={null}
     forwardedRef={[Function]}
     hideModalContentWhileAnimating={false}
-    nativeID="animatedComponent"
     onBackdropPress={[Function]}
     onModalHide={[Function]}
     onModalWillHide={[Function]}
@@ -97,7 +93,7 @@ exports[`Root should match snapshot 1`] = `
         "top": 0,
         "transform": Array [
           Object {
-            "translateY": 0,
+            "translateY": 1334,
           },
         ],
       }

app/core/RPCMethods/RPCMethodMiddleware.ts

@@ -33,6 +33,9 @@ export enum ApprovalTypes {
   SWITCH_ETHEREUM_CHAIN = 'SWITCH_ETHEREUM_CHAIN',
   REQUEST_PERMISSIONS = 'wallet_requestPermissions',
   WALLET_CONNECT = 'WALLET_CONNECT',
+  ETH_SIGN = 'eth_sign',
+  PERSONAL_SIGN = 'personal_sign',
+  ETH_SIGN_TYPED_DATA = 'eth_signTypedData',
 }
 
 interface RPCMethodsMiddleParameters {