feat: snaps controllers integration (Flask Only)

app/components/Approvals/InstallSnapApproval/InstallSnapApproval.constants.ts

@@ -0,0 +1,4 @@
+///: BEGIN:ONLY_INCLUDE_IF(snaps)
+export const SNAP_INSTALL_FLOW = 'snap-install-flow';
+export const SNAP_INSTALL_OK = 'snap-install-ok';
+///: END:ONLY_INCLUDE_IF

app/components/Approvals/InstallSnapApproval/InstallSnapApproval.styles.ts

@@ -0,0 +1,62 @@
+///: BEGIN:ONLY_INCLUDE_IF(snaps)
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../util/theme/models';
+import Device from '../../../util/device';
+
+/**
+ *
+ * @param params Style sheet params.
+ * @param params.theme App theme from ThemeContext.
+ * @param params.vars Inputs that the style sheet depends on.
+ * @returns StyleSheet object.
+ */
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+  const { colors } = theme;
+  return StyleSheet.create({
+    root: {
+      backgroundColor: colors.background.default,
+      paddingTop: 24,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      minHeight: 200,
+      paddingBottom: Device.isIphoneX() ? 20 : 0,
+    },
+    accountCardWrapper: {
+      paddingHorizontal: 24,
+    },
+    actionContainer: {
+      flex: 0,
+      paddingVertical: 16,
+      justifyContent: 'center',
+    },
+    description: {
+      textAlign: 'center',
+      paddingBottom: 16,
+    },
+    snapCell: {
+      marginVertical: 16,
+    },
+    snapPermissionContainer: {
+      maxHeight: 300,
+      borderWidth: 1,
+      borderRadius: 8,
+      borderColor: colors.border.muted,
+    },
+    iconContainer: {
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    iconWrapper: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      backgroundColor: colors.success.muted,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  });
+};
+
+export default styleSheet;
+///: END:ONLY_INCLUDE_IF

app/components/Approvals/InstallSnapApproval/InstallSnapApproval.tsx

@@ -0,0 +1,140 @@
+///: BEGIN:ONLY_INCLUDE_IF(snaps)
+import React, { useEffect, useState } from 'react';
+import ApprovalModal from '../ApprovalModal';
+import useApprovalRequest from '../../hooks/useApprovalRequest';
+import { ApprovalTypes } from '../../../core/RPCMethods/RPCMethodMiddleware';
+import Logger from '../../../util/Logger';
+import { SnapInstallState } from './InstallSnapApproval.types';
+import {
+  InstallSnapConnectionRequest,
+  InstallSnapError,
+  InstallSnapPermissionsRequest,
+  InstallSnapSuccess,
+} from './components';
+import { SNAP_INSTALL_FLOW } from './InstallSnapApproval.constants';
+import { ApprovalRequest } from '@metamask/approval-controller';
+
+const InstallSnapApproval = () => {
+  const [installState, setInstallState] = useState<
+    SnapInstallState | undefined
+  >(undefined);
+  const [isFinished, setIsFinished] = useState<boolean>(false);
+  const [installError, setInstallError] = useState<Error | undefined>(
+    undefined,
+  );
+  const { approvalRequest, onConfirm, onReject } = useApprovalRequest();
+
+  useEffect(() => {
+    if (approvalRequest) {
+      if (approvalRequest.type === ApprovalTypes.REQUEST_PERMISSIONS) {
+        setInstallState(SnapInstallState.Confirm);
+      } else if (
+        approvalRequest.type === ApprovalTypes.INSTALL_SNAP &&
+        approvalRequest?.requestState?.permissions
+      ) {
+        setInstallState(SnapInstallState.AcceptPermissions);
+      }
+    } else {
+      setInstallState(undefined);
+    }
+  }, [approvalRequest]);
+
+  const getSnapName = (request: ApprovalRequest<any>): string => {
+    // We first look for the name inside the snapId approvalRequest data
+    const snapId = request?.requestData?.snapId;
+    if (typeof snapId === 'string') {
+      const colonIndex = snapId.indexOf(':');
+      if (colonIndex !== -1) {
+        return snapId.substring(colonIndex + 1);
+      }
+    }
+    // If there is no snapId present in the approvalRequest data, we look for the name inside the snapIds caveat
+    const snapIdsCaveat =
+      request?.requestData?.permissions?.wallet_snap?.caveats?.find(
+        (c: any) => c.type === 'snapIds',
+      );
+    // return an empty string if we can't find the snap name in the approvalRequest data
+    return snapIdsCaveat?.value ? Object.keys(snapIdsCaveat.value)[0] : '';
+  };
+
+  if (!approvalRequest) return null;
+
+  const onInstallSnapFinished = () => {
+    setIsFinished(true);
+  };
+
+  const onPermissionsConfirm = async () => {
+    try {
+      await onConfirm(undefined, {
+        ...approvalRequest?.requestData,
+        permissions: approvalRequest?.requestState?.permissions,
+      });
+      setInstallState(SnapInstallState.SnapInstalled);
+    } catch (error) {
+      Logger.error(
+        error as Error,
+        `${SNAP_INSTALL_FLOW} Failed to install snap`,
+      );
+      setInstallError(error as Error);
+      setInstallState(SnapInstallState.SnapInstallError);
+    }
+  };
+
+  if (!approvalRequest) return null;
+
+  const snapName = getSnapName(approvalRequest);
+
+  const renderModalContent = () => {
+    switch (installState) {
+      case SnapInstallState.Confirm:
+        return (
+          <InstallSnapConnectionRequest
+            approvalRequest={approvalRequest}
+            snapName={snapName}
+            onConfirm={onConfirm}
+            onCancel={onReject}
+          />
+        );
+      case SnapInstallState.AcceptPermissions:
+        return (
+          <InstallSnapPermissionsRequest
+            approvalRequest={approvalRequest}
+            snapName={snapName}
+            onConfirm={onPermissionsConfirm}
+            onCancel={onReject}
+          />
+        );
+      case SnapInstallState.SnapInstalled:
+        return (
+          <InstallSnapSuccess
+            snapName={snapName}
+            onConfirm={onInstallSnapFinished}
+          />
+        );
+      case SnapInstallState.SnapInstallError:
+        return (
+          <InstallSnapError
+            snapName={snapName}
+            onConfirm={onInstallSnapFinished}
+            error={installError}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  const content = renderModalContent();
+
+  return content ? (
+    <ApprovalModal
+      isVisible={installState !== undefined && !isFinished}
+      onCancel={onReject}
+    >
+      {content}
+    </ApprovalModal>
+  ) : null;
+};
+
+export default InstallSnapApproval;
+///: END:ONLY_INCLUDE_IF

app/components/Approvals/InstallSnapApproval/InstallSnapApproval.types.ts

@@ -0,0 +1,20 @@
+///: BEGIN:ONLY_INCLUDE_IF(snaps)
+interface InstallSnapFlowProps {
+  approvalRequest: any;
+  snapName: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  chainId?: string;
+  error?: Error;
+}
+
+export enum SnapInstallState {
+  Confirm = 'Confirm',
+  AcceptPermissions = 'AcceptPermissions',
+  SnapInstalled = 'SnapInstalled',
+  SnapInstallError = 'SnapInstallError',
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export type { InstallSnapFlowProps };
+///: END:ONLY_INCLUDE_IF

app/components/Approvals/InstallSnapApproval/components/InstallSnapConnectionRequest/InstallSnapConnectionRequest.constants.ts

@@ -0,0 +1,6 @@
+///: BEGIN:ONLY_INCLUDE_IF(snaps)
+export const SNAP_INSTALL_CONNECTION_REQUEST =
+  'snap-install-connection-request';
+export const SNAP_INSTALL_CANCEL = 'snap-install-cancel';
+export const SNAP_INSTALL_CONNECT = 'snap-install-connect';
+///: END:ONLY_INCLUDE_IF

app/components/Approvals/InstallSnapApproval/components/InstallSnapConnectionRequest/InstallSnapConnectionRequest.tsx

@@ -0,0 +1,116 @@
+///: BEGIN:ONLY_INCLUDE_IF(snaps)
+import React, { useMemo } from 'react';
+import { ImageSourcePropType, View } from 'react-native';
+import { InstallSnapFlowProps } from '../../InstallSnapApproval.types';
+import styleSheet from '../../InstallSnapApproval.styles';
+import { strings } from '../../../../../../locales/i18n';
+import SheetHeader from '../../../../../component-library/components/Sheet/SheetHeader';
+import Text, {
+  TextVariant,
+} from '../../../../../component-library/components/Texts/Text';
+import TagUrl from '../../../../../component-library/components/Tags/TagUrl';
+import { getUrlObj, prefixUrlWithProtocol } from '../../../../../util/browser';
+import { IconName } from '../../../../../component-library/components/Icons/Icon';
+import Cell, {
+  CellVariant,
+} from '../../../../../component-library/components/Cells/Cell';
+import { AvatarVariant } from '../../../../../component-library/components/Avatars/Avatar';
+import {
+  ButtonSize,
+  ButtonVariants,
+} from '../../../../../component-library/components/Buttons/Button';
+import BottomSheetFooter, {
+  ButtonsAlignment,
+} from '../../../../../component-library/components/BottomSheets/BottomSheetFooter';
+import { ButtonProps } from '../../../../../component-library/components/Buttons/Button/Button.types';
+import { useStyles } from '../../../../hooks/useStyles';
+import {
+  SNAP_INSTALL_CANCEL,
+  SNAP_INSTALL_CONNECT,
+  SNAP_INSTALL_CONNECTION_REQUEST,
+} from './InstallSnapConnectionRequest.constants';
+
+const InstallSnapConnectionRequest = ({
+  approvalRequest,
+  snapName,
+  onConfirm,
+  onCancel,
+}: Pick<
+  InstallSnapFlowProps,
+  'approvalRequest' | 'onConfirm' | 'onCancel' | 'snapName'
+>) => {
+  const { styles } = useStyles(styleSheet, {});
+
+  const origin = useMemo(
+    () => approvalRequest.origin,
+    [approvalRequest.origin],
+  );
+
+  const favicon: ImageSourcePropType = useMemo(() => {
+    const iconUrl = `https://api.faviconkit.com/${origin}/50`;
+    return { uri: iconUrl };
+  }, [origin]);
+
+  const urlWithProtocol = prefixUrlWithProtocol(origin);
+
+  const secureIcon = useMemo(
+    () =>
+      getUrlObj(origin).protocol === 'https:'
+        ? IconName.Lock
+        : IconName.LockSlash,
+    [origin],
+  );
+
+  const cancelButtonProps: ButtonProps = {
+    variant: ButtonVariants.Secondary,
+    label: strings('accountApproval.cancel'),
+    size: ButtonSize.Lg,
+    onPress: onCancel,
+    testID: SNAP_INSTALL_CANCEL,
+  };
+
+  const connectButtonProps: ButtonProps = {
+    variant: ButtonVariants.Primary,
+    label: strings('accountApproval.connect'),
+    size: ButtonSize.Lg,
+    onPress: onConfirm,
+    testID: SNAP_INSTALL_CONNECT,
+  };
+
+  return (
+    <View testID={SNAP_INSTALL_CONNECTION_REQUEST} style={styles.root}>
+      <View style={styles.accountCardWrapper}>
+        <TagUrl
+          imageSource={favicon}
+          label={urlWithProtocol}
+          iconName={secureIcon}
+        />
+        <SheetHeader title={strings('install_snap.title')} />
+        <Text style={styles.description} variant={TextVariant.BodyMD}>
+          {strings('install_snap.description', {
+            origin,
+            snap: snapName,
+          })}
+        </Text>
+        <Cell
+          style={styles.snapCell}
+          variant={CellVariant.Display}
+          title={snapName}
+          avatarProps={{
+            variant: AvatarVariant.Icon,
+            name: IconName.Snaps,
+          }}
+        />
+        <View style={styles.actionContainer}>
+          <BottomSheetFooter
+            buttonsAlignment={ButtonsAlignment.Horizontal}
+            buttonPropsArray={[cancelButtonProps, connectButtonProps]}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default React.memo(InstallSnapConnectionRequest);
+///: END:ONLY_INCLUDE_IF

app/components/Approvals/InstallSnapApproval/components/InstallSnapConnectionRequest/index.ts

@@ -0,0 +1,6 @@
+///: BEGIN:ONLY_INCLUDE_IF(snaps)
+/* eslint-disable import/prefer-default-export */
+import InstallSnapConnectionRequest from './InstallSnapConnectionRequest';
+
+export { InstallSnapConnectionRequest };
+///: END:ONLY_INCLUDE_IF