feat: snaps dynamic UI

app/component-library/components/Buttons/Button/variants/ButtonPrimary/ButtonPrimary.tsx

@@ -23,6 +23,8 @@ const ButtonPrimary = ({
   onPressOut,
   isDanger = false,
   label,
+  startIconName,
+  endIconName,
   ...props
 }: ButtonPrimaryProps) => {
   const [pressed, setPressed] = useState(false);
@@ -60,9 +62,9 @@ const ButtonPrimary = ({
       label
     );
 
-    const renderLoading = () => (
-      <ActivityIndicator size="small" color={DEFAULT_BUTTONPRIMARY_LABEL_COLOR} />
-    );
+  const renderLoading = () => (
+    <ActivityIndicator size="small" color={DEFAULT_BUTTONPRIMARY_LABEL_COLOR} />
+  );
 
   return (
     <Button

app/component-library/components/Buttons/Button/variants/ButtonPrimary/__snapshots__/ButtonPrimary.test.tsx.snap

@@ -22,19 +22,6 @@ exports[`ButtonPrimary render matches latest snapshot 1`] = `
     }
   }
 >
-  <SvgMock
-    color="#ffffff"
-    height={16}
-    name="Add"
-    style={
-      {
-        "height": 16,
-        "marginRight": 8,
-        "width": 16,
-      }
-    }
-    width={16}
-  />
   <Text
     accessibilityRole="text"
     style={
@@ -50,18 +37,5 @@ exports[`ButtonPrimary render matches latest snapshot 1`] = `
   >
     Sample label
   </Text>
-  <SvgMock
-    color="#ffffff"
-    height={16}
-    name="AddSquare"
-    style={
-      {
-        "height": 16,
-        "marginLeft": 8,
-        "width": 16,
-      }
-    }
-    width={16}
-  />
 </TouchableOpacity>
 `;

app/components/Approvals/Snaps/SnapDialogApproval/SnapDialogApproval.styles.ts

@@ -0,0 +1,34 @@
+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,
+      paddingLeft: 16,
+      paddingRight: 16,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      minHeight: 200,
+      paddingBottom: Device.isIphoneX() ? 20 : 0,
+    },
+    actionContainer: {
+      flex: 0,
+      paddingVertical: 16,
+      justifyContent: 'center',
+    },
+  });
+};
+
+export default styleSheet;

app/components/Approvals/Snaps/SnapDialogApproval/SnapsDialogApproval.tsx

@@ -0,0 +1,166 @@
+///: BEGIN:ONLY_INCLUDE_IF(preinstalled-snaps)
+import React, { useState } from 'react';
+import { useStyles } from '../../../hooks/useStyles';
+import { strings } from '../../../../../locales/i18n';
+import stylesheet from './SnapDialogApproval.styles';
+import useApprovalRequest from '../../../Views/confirmations/hooks/useApprovalRequest';
+import { View } from 'react-native-animatable';
+import ApprovalModal from '../../ApprovalModal';
+import BottomSheetFooter, {
+  ButtonsAlignment,
+} from '../../../../component-library/components/BottomSheets/BottomSheetFooter';
+import {
+  ButtonVariants,
+  ButtonSize,
+} from '../../../../component-library/components/Buttons/Button';
+import Engine from '../../../../core/Engine';
+import { SnapUIRenderer } from '../SnapUIRenderer/SnapUIRenderer';
+import { SnapId } from '@metamask/snaps-sdk';
+import { IconName } from '../../../../component-library/components/Icons/Icon';
+
+enum SnapDialogTypes {
+  ALERT = 'snap_dialog:alert',
+  CONFIRM = 'snap_dialog:confirmation',
+  PROMPT = 'snap_dialog:prompt',
+  CUSTOM = 'snap_dialog',
+}
+
+enum TemplateConfirmation {
+  Ok = 'template_confirmation.ok',
+  CANCEL = 'template_confirmation.cancel',
+}
+
+const SnapDialogApproval = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { approvalRequest } = useApprovalRequest();
+  const { styles } = useStyles(stylesheet, {});
+
+  const onCancel = async () => {
+    if (!approvalRequest) return;
+
+    await Engine.acceptPendingApproval(approvalRequest.id, null as any);
+  };
+
+  const onConfirmInput = async () => {
+    setIsLoading(true);
+    if (!approvalRequest) return;
+
+    const inputState =
+      await Engine.context.SnapInterfaceController.getInterface(
+        approvalRequest?.origin as SnapId,
+        approvalRequest.requestData.id,
+      );
+    await Engine.acceptPendingApproval(
+      approvalRequest.id,
+      inputState.state['custom-input'] as any,
+    );
+    setIsLoading(false);
+  };
+
+  const onConfirm = async () => {
+    setIsLoading(true);
+    if (!approvalRequest) return;
+
+    await Engine.acceptPendingApproval(approvalRequest.id, true as any);
+
+    setIsLoading(false);
+  };
+
+  const onReject = async () => {
+    if (!approvalRequest) return;
+
+    await Engine.acceptPendingApproval(approvalRequest.id, false as any);
+  };
+
+  if (
+    approvalRequest?.type !== SnapDialogTypes.ALERT &&
+    approvalRequest?.type !== SnapDialogTypes.CONFIRM &&
+    approvalRequest?.type !== SnapDialogTypes.PROMPT &&
+    approvalRequest?.type !== SnapDialogTypes.CUSTOM
+  )
+    return null;
+
+  const getDialogButtons = (type: SnapDialogTypes | undefined) => {
+    switch (type) {
+      case SnapDialogTypes.ALERT:
+        return [
+          {
+            variant: ButtonVariants.Primary,
+            label: strings(TemplateConfirmation.Ok),
+            size: ButtonSize.Lg,
+            onPress: onCancel,
+          },
+        ];
+
+      case SnapDialogTypes.CONFIRM:
+      case SnapDialogTypes.PROMPT:
+        return [
+          {
+            variant: ButtonVariants.Secondary,
+            label: strings(TemplateConfirmation.CANCEL),
+            size: ButtonSize.Lg,
+            onPress: onReject,
+          },
+          {
+            variant: ButtonVariants.Primary,
+            label: strings(TemplateConfirmation.Ok),
+            size: ButtonSize.Lg,
+            onPress: onConfirm,
+          },
+        ];
+      case SnapDialogTypes.CUSTOM:
+        return [
+          {
+            variant: ButtonVariants.Secondary,
+            label: strings(TemplateConfirmation.CANCEL),
+            size: ButtonSize.Lg,
+            onPress: onCancel,
+            startIconName: IconName.Close,
+          },
+          {
+            variant: ButtonVariants.Primary,
+            label: strings(TemplateConfirmation.Ok),
+            size: ButtonSize.Lg,
+            onPress: onConfirmInput,
+            endIconName: IconName.Check,
+          },
+        ];
+
+      default:
+        return [];
+    }
+  };
+
+  const buttons = getDialogButtons(approvalRequest?.type);
+  const snapId = approvalRequest?.origin;
+  const interfaceId = approvalRequest?.requestData?.id;
+
+  return (
+    <ApprovalModal
+      isVisible={
+        approvalRequest?.type === SnapDialogTypes.ALERT ||
+        approvalRequest?.type === SnapDialogTypes.CONFIRM ||
+        approvalRequest?.type === SnapDialogTypes.PROMPT ||
+        approvalRequest?.type === SnapDialogTypes.CUSTOM
+      }
+      onCancel={onCancel}
+    >
+      <View style={styles.root}>
+        <SnapUIRenderer
+          snapId={snapId}
+          interfaceId={interfaceId}
+          isLoading={isLoading}
+        />
+        <View style={styles.actionContainer}>
+          <BottomSheetFooter
+            buttonsAlignment={ButtonsAlignment.Horizontal}
+            buttonPropsArray={buttons}
+          />
+        </View>
+      </View>
+    </ApprovalModal>
+  );
+};
+
+export default SnapDialogApproval;
+///: END:ONLY_INCLUDE_IF

app/components/Approvals/Snaps/SnapDialogApproval/index.ts

@@ -0,0 +1,3 @@
+///: BEGIN:ONLY_INCLUDE_IF(preinstalled-snaps)
+export { default } from './SnapDialogApproval';
+///: END:ONLY_INCLUDE_IF

app/components/Approvals/Snaps/SnapUICard/SnapUICard.props.ts

@@ -0,0 +1,9 @@
+import { ImageSourcePropType } from 'react-native';
+
+export interface SnapUICardProps {
+  image?: ImageSourcePropType;
+  title?: string;
+  description?: string;
+  value?: string;
+  extra?: string;
+}

app/components/Approvals/Snaps/SnapUICard/index.tsx

@@ -0,0 +1,89 @@
+///: BEGIN:ONLY_INCLUDE_IF(preinstalled-snaps,external-snaps)
+import React from 'react';
+import { Image } from 'react-native';
+// External dependencies.
+import {
+  AlignItems,
+  Display,
+  FlexDirection,
+  JustifyContent,
+  TextAlign,
+} from '../SnapUIRenderer/utils';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../../component-library/components/Texts/Text';
+import { SnapUICardProps } from './SnapUICard.props';
+import styles, { Box } from '../../../UI/Box';
+
+export const SnapUICard: React.FC<SnapUICardProps> = ({
+  image,
+  title,
+  description,
+  value,
+  extra,
+}) => (
+  <Box
+    testID="snaps-ui-card"
+    display={Display.Flex}
+    justifyContent={JustifyContent.spaceBetween}
+    alignItems={AlignItems.center}
+  >
+    <Box display={Display.Flex} gap={4} alignItems={AlignItems.center}>
+      {image && (
+        <Image
+          width={32}
+          height={32}
+          source={image}
+          style={styles.overflowHidden}
+        />
+      )}
+      <Box
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+        style={styles.overflowHidden}
+      >
+        <Text
+          variant={TextVariant.BodyMDMedium}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {title}
+        </Text>
+        {description && (
+          <Text
+            color={TextColor.Alternative}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {description}
+          </Text>
+        )}
+      </Box>
+    </Box>
+    <Box
+      display={Display.Flex}
+      flexDirection={FlexDirection.Column}
+      textAlign={TextAlign.right}
+      style={styles.overflowHidden}
+    >
+      <Text
+        variant={TextVariant.BodyMDMedium}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+      >
+        {value}
+      </Text>
+      {extra && (
+        <Text
+          color={TextColor.Alternative}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {extra}
+        </Text>
+      )}
+    </Box>
+  </Box>
+);
+///: END:ONLY_INCLUDE_IF

app/components/Approvals/Snaps/SnapUIRenderer/SnapInterface.types.ts

@@ -0,0 +1 @@
+export type SetCurrentInputFocus = (name: string | null) => void;