[Flask] Snaps install UX (#6561)

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -32,7 +32,6 @@ import { BN } from 'ethereumjs-util';
 import Logger from '../../../util/Logger';
 import Approve from '../../Views/ApproveView/Approve';
 import WatchAssetRequest from '../../UI/WatchAssetRequest';
-import { InstallSnapApproval } from '../../UI/InstallSnapApproval';
 import AccountApproval from '../../UI/AccountApproval';
 import TransactionTypes from '../../../core/TransactionTypes';
 import AddCustomNetwork from '../../UI/AddCustomNetwork';
@@ -58,6 +57,7 @@ import {
   selectProviderType,
 } from '../../../selectors/networkController';
 import { createAccountConnectNavDetails } from '../../Views/AccountConnect';
+import { InstallSnapApprovalFlow } from '../../UI/InstallSnapApprovalFlow';
 
 const hstInterface = new ethers.utils.Interface(abi);
 
@@ -86,6 +86,8 @@ const RootRPCMethodsUI = (props) => {
 
   const [signMessageParams, setSignMessageParams] = useState(undefined);
 
+  const [installSnap, setInstallSnap] = useState(false);
+
   const setTransactionObject = props.setTransactionObject;
   const setEtherTransaction = props.setEtherTransaction;
 
@@ -668,26 +670,25 @@ const RootRPCMethodsUI = (props) => {
 
   const onInstallSnapConfirm = () => {
     acceptPendingApproval(hostToApprove.id, hostToApprove.requestData);
+  };
+
+  const onInstallSnapFinished = () => {
     setShowPendingApproval(false);
+    setInstallSnap(false);
   };
 
   const onInstallSnapReject = () => {
-    // eslint-disable-next-line no-console
-    console.log(
-      'onInstallSnapReject',
-      hostToApprove.id,
-      hostToApprove.requestData,
-    );
     rejectPendingApproval(hostToApprove.id, hostToApprove.requestData);
     setShowPendingApproval(false);
+    setInstallSnap(false);
   };
 
   /**
    * Render the modal that asks the user to approve/reject connections to a dapp using the MetaMask SDK.
    */
   const renderInstallSnapApprovalModal = () => (
     <Modal
-      isVisible={showPendingApproval?.type === ApprovalTypes.INSTALL_SNAP}
+      isVisible={installSnap}
       animationIn="slideInUp"
       animationOut="slideOutDown"
       style={styles.bottomModal}
@@ -699,9 +700,10 @@ const RootRPCMethodsUI = (props) => {
       onBackdropPress={onInstallSnapReject}
       swipeDirection={'down'}
     >
-      <InstallSnapApproval
+      <InstallSnapApprovalFlow
         onCancel={onInstallSnapReject}
         onConfirm={onInstallSnapConfirm}
+        onFinish={onInstallSnapFinished}
         requestData={hostToApprove}
       />
     </Modal>
@@ -734,13 +736,12 @@ const RootRPCMethodsUI = (props) => {
 
       switch (request.type) {
         case ApprovalTypes.INSTALL_SNAP:
-          // eslint-disable-next-line no-console
-          console.log({ requestData, id: request.id });
           setHostToApprove({ requestData, id: request.id });
           showPendingApprovalModal({
             type: ApprovalTypes.INSTALL_SNAP,
             origin: request.origin,
           });
+          setInstallSnap(true);
           break;
         case ApprovalTypes.UPDATE_SNAP:
           // eslint-disable-next-line no-console

app/components/UI/InstallSnapApprovalFlow/InstallSnapApprovalFlow.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback, useState } from 'react';
+import {
+  InstallSnapApprovalArgs,
+  SnapInstallState,
+} from './InstallSnapApprovalFlow.types';
+import { InstallSnapConnectionRequest } from './components/InstallSnapConnectionRequest';
+import { View } from 'react-native';
+import { InstallSnapPermissionsRequest } from './components/InstallSnapPermissionsRequest';
+import { InstallSnapSuccess } from './components/InstallSnapSuccess';
+import { InstallSnapError } from './components/InstallSnapError';
+import { SNAP_INSTALL_FLOW } from '../../../constants/test-ids';
+import Logger from '../../../util/Logger';
+
+const InstallSnapApprovalFlow = ({
+  requestData,
+  onConfirm,
+  onFinish,
+  onCancel,
+}: InstallSnapApprovalArgs) => {
+  const [installState, setInstallState] = useState<SnapInstallState>(
+    SnapInstallState.Confirm,
+  );
+
+  const [installError, setInstallError] = useState<Error | undefined>(
+    undefined,
+  );
+
+  const onConfirmNext = useCallback(() => {
+    setInstallState(SnapInstallState.AcceptPermissions);
+  }, []);
+
+  const onPermissionsConfirm = useCallback(() => {
+    try {
+      onConfirm();
+    } catch (error) {
+      Logger.error(
+        error as Error,
+        `${SNAP_INSTALL_FLOW} Failed to install snap`,
+      );
+      setInstallError(error as Error);
+      setInstallState(SnapInstallState.SnapInstallError);
+    }
+    setInstallState(SnapInstallState.SnapInstalled);
+  }, [onConfirm]);
+
+  const onSnapInstalled = useCallback(() => {
+    onFinish();
+  }, [onFinish]);
+
+  const renderInstallStep = useCallback(() => {
+    switch (installState) {
+      case SnapInstallState.Confirm:
+        return (
+          <InstallSnapConnectionRequest
+            requestData={requestData.requestData}
+            onConfirm={onConfirmNext}
+            onCancel={onCancel}
+          />
+        );
+      case SnapInstallState.AcceptPermissions:
+        return (
+          <InstallSnapPermissionsRequest
+            requestData={requestData.requestData}
+            onConfirm={onPermissionsConfirm}
+            onCancel={onCancel}
+          />
+        );
+      case SnapInstallState.SnapInstalled:
+        return (
+          <InstallSnapSuccess
+            requestData={requestData.requestData}
+            onConfirm={onSnapInstalled}
+            onCancel={onCancel}
+          />
+        );
+      case SnapInstallState.SnapInstallError:
+        return (
+          <InstallSnapError
+            requestData={requestData.requestData}
+            onConfirm={onSnapInstalled}
+            onCancel={onCancel}
+            error={installError}
+          />
+        );
+    }
+  }, [
+    installError,
+    installState,
+    onCancel,
+    onConfirmNext,
+    onPermissionsConfirm,
+    onSnapInstalled,
+    requestData,
+  ]);
+
+  return <View testID={SNAP_INSTALL_FLOW}>{renderInstallStep()}</View>;
+};
+
+export default InstallSnapApprovalFlow;