Integrate PS

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -35,6 +35,7 @@ import Logger from '../../../util/Logger';
 import MessageSign from '../../UI/MessageSign';
 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';
@@ -684,6 +685,47 @@ const RootRPCMethodsUI = (props) => {
     </Modal>
   );
 
+  const onInstallSnapConfirm = () => {
+    acceptPendingApproval(hostToApprove.id, hostToApprove.requestData);
+    setShowPendingApproval(false);
+  };
+
+  const onInstallSnapReject = () => {
+    // eslint-disable-next-line no-console
+    console.log(
+      'onInstallSnapReject',
+      hostToApprove.id,
+      hostToApprove.requestData,
+    );
+    rejectPendingApproval(hostToApprove.id, hostToApprove.requestData);
+    setShowPendingApproval(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}
+      animationIn="slideInUp"
+      animationOut="slideOutDown"
+      style={styles.bottomModal}
+      backdropColor={colors.overlay.default}
+      backdropOpacity={1}
+      animationInTiming={300}
+      animationOutTiming={300}
+      onSwipeComplete={onInstallSnapReject}
+      onBackdropPress={onInstallSnapReject}
+      swipeDirection={'down'}
+    >
+      <InstallSnapApproval
+        onCancel={onInstallSnapReject}
+        onConfirm={onInstallSnapConfirm}
+        requestData={hostToApprove}
+      />
+    </Modal>
+  );
+
   // unapprovedTransaction effect
   useEffect(() => {
     Engine.context.TransactionController.hub.on(
@@ -815,6 +857,7 @@ const RootRPCMethodsUI = (props) => {
       {renderWatchAssetModal()}
       {renderQRSigningModal()}
       {renderAccountsApprovalModal()}
+      {renderInstallSnapApprovalModal()}
     </React.Fragment>
   );
 };

app/components/UI/DrawerView/index.js

@@ -736,9 +736,6 @@ class DrawerView extends PureComponent {
     const { navigation } = this.props;
     navigation.navigate(Routes.SNAPS.HOME);
     this.hideDrawer();
-
-    // eslint-disable-next-line no-console
-    // console.log('Navigate to snaps');
   };
 
   showSettings = async () => {

app/components/UI/InstallSnapApproval/InstallSnapApproval.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { InstallSnapApprovalArgs } from './types';
+import createStyles from './styles';
+import { useAppThemeFromContext, mockTheme } from '../../../util/theme';
+import StyledButton from '../StyledButton';
+import { strings } from '../../../../locales/i18n';
+import {
+  ACCOUNT_APROVAL_MODAL_CONTAINER_ID,
+  CANCEL_BUTTON_ID,
+} from '../../../constants/test-ids';
+
+const InstallSnapApproval = ({
+  requestData,
+  onConfirm,
+  onCancel,
+}: InstallSnapApprovalArgs) => {
+  const { colors } = useAppThemeFromContext() || mockTheme;
+  const styles = createStyles(colors);
+
+  const selectedAddress = useSelector(
+    (state: any) =>
+      state.engine.backgroundState.PreferencesController.selectedAddress,
+  );
+
+  const confirm = (): void => {
+    // eslint-disable-next-line no-console
+    console.log('confirm', onConfirm);
+    onConfirm();
+    // Add track event
+  };
+
+  const cancel = (): void => {
+    // Add track event
+    onCancel();
+  };
+
+  return (
+    <View style={styles.root} testID={ACCOUNT_APROVAL_MODAL_CONTAINER_ID}>
+      {/* <Text>SNAP ID: {`${requestData.data.snapId}`}</Text> */}
+      <Text>{`${selectedAddress} ${JSON.stringify(requestData)}`}</Text>
+      <View style={styles.actionContainer}>
+        <StyledButton
+          type={'cancel'}
+          onPress={cancel}
+          containerStyle={[styles.button, styles.cancel]}
+          testID={CANCEL_BUTTON_ID}
+        >
+          {strings('accountApproval.cancel')}
+        </StyledButton>
+        <StyledButton
+          type={'confirm'}
+          onPress={confirm}
+          containerStyle={[styles.button, styles.confirm]}
+          testID={'connect-approve-button'}
+        >
+          Approve
+        </StyledButton>
+      </View>
+    </View>
+  );
+};
+
+export default InstallSnapApproval;

app/components/UI/InstallSnapApproval/index.ts

@@ -0,0 +1,6 @@
+import InstallSnapApproval from './InstallSnapApproval';
+import { InstallSnapApprovalArgs } from './types';
+
+export { InstallSnapApproval };
+
+export type { InstallSnapApprovalArgs };

app/components/UI/InstallSnapApproval/styles.ts

@@ -0,0 +1,52 @@
+import { StyleSheet } from 'react-native';
+import { fontStyles } from '../../../styles/common';
+import Device from '../../../util/device';
+
+const createStyles = (colors: any) =>
+  StyleSheet.create({
+    root: {
+      backgroundColor: colors.background.default,
+      paddingTop: 24,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      minHeight: 200,
+      paddingBottom: Device.isIphoneX() ? 20 : 0,
+    },
+    accountCardWrapper: {
+      paddingHorizontal: 24,
+    },
+    intro: {
+      ...fontStyles.bold,
+      textAlign: 'center',
+      color: colors.text.default,
+      fontSize: Device.isSmallDevice() ? 16 : 20,
+      marginBottom: 8,
+      marginTop: 16,
+    },
+    warning: {
+      ...fontStyles.thin,
+      color: colors.text.default,
+      paddingHorizontal: 24,
+      marginBottom: 16,
+      fontSize: 14,
+      width: '100%',
+      textAlign: 'center',
+    },
+    actionContainer: {
+      flex: 0,
+      flexDirection: 'row',
+      paddingVertical: 16,
+      paddingHorizontal: 24,
+    },
+    button: {
+      flex: 1,
+    },
+    cancel: {
+      marginRight: 8,
+    },
+    confirm: {
+      marginLeft: 8,
+    },
+  });
+
+export default createStyles;

app/components/UI/InstallSnapApproval/types.ts

@@ -0,0 +1,9 @@
+interface InstallSnapApprovalArgs {
+  requestData: any;
+  onConfirm: () => void;
+  onCancel: () => void;
+  chainId?: string;
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export type { InstallSnapApprovalArgs };