feat: snaps dynamic UI

app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.tsx

@@ -20,6 +20,7 @@ import {
 } from './AvatarFavicon.constants';
 import stylesheet from './AvatarFavicon.styles';
 import { AvatarFaviconProps } from './AvatarFavicon.types';
+import { AvatarSize } from '../../Avatar.types';
 
 const AvatarFavicon = ({
   imageSource,
@@ -50,7 +51,7 @@ const AvatarFavicon = ({
   //  requires that the domain is passed in as a prop from the parent
   const renderFallbackFavicon = () => (
     <Icon
-      size={ICONSIZE_BY_AVATARSIZE[size]}
+      size={ICONSIZE_BY_AVATARSIZE[size.toLowerCase() as AvatarSize]}
       name={DEFAULT_AVATARFAVICON_ERROR_ICON}
     />
   );
@@ -91,21 +92,26 @@ const AvatarFavicon = ({
       />
     ) : null;
 
-  const renderImage = () => (
-    <Image
-      testID={AVATARFAVICON_IMAGE_TESTID}
-      source={imageSource}
-      style={styles.image}
-      resizeMode={'contain'}
-      onError={onError}
-    />
-  );
+  const renderImage = () =>
+    imageSource && (
+      <Image
+        testID={AVATARFAVICON_IMAGE_TESTID}
+        source={imageSource}
+        style={styles.image}
+        resizeMode={'contain'}
+        onError={onError}
+      />
+    );
 
   const renderFavicon = () => (svgSource ? renderSvg() : renderImage());
 
   return (
-    <AvatarBase size={size} style={styles.base} {...props}>
-      {error || !isValidSource ? renderFallbackFavicon() : renderFavicon()}
+    <AvatarBase
+      size={size.toLowerCase() as AvatarSize}
+      style={styles.base}
+      {...props}
+    >
+      {error ? renderFallbackFavicon() : renderFavicon()}
     </AvatarBase>
   );
 };

app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.types.ts

@@ -1,7 +1,5 @@
 // Third party dependencies.
 import { ImageSourcePropType } from 'react-native';
-
-// External dependencies.
 import { AvatarBaseProps } from '../../foundation/AvatarBase';
 
 /**
@@ -11,7 +9,7 @@ export interface AvatarFaviconProps extends AvatarBaseProps {
   /**
    * A favicon image from either a local or remote source.
    */
-  imageSource: ImageSourcePropType;
+  imageSource?: ImageSourcePropType;
 }
 
 /**

app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/__snapshots__/AvatarFavicon.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`AvatarFavicon should match the snapshot 1`] = `
 <AvatarBase
-  size="32"
+  size="md"
   style={{}}
 >
   <Image
@@ -27,7 +27,7 @@ exports[`AvatarFavicon should match the snapshot 1`] = `
 
 exports[`AvatarFavicon should render SVG 1`] = `
 <AvatarBase
-  size="32"
+  size="md"
   style={{}}
 >
   <Image
@@ -52,7 +52,7 @@ exports[`AvatarFavicon should render SVG 1`] = `
 
 exports[`AvatarFavicon should render fallback when svg has error 1`] = `
 <AvatarBase
-  size="32"
+  size="md"
   style={{}}
 >
   <Image

app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.types.ts

@@ -1,5 +1,10 @@
 // Third party dependencies.
-import { ColorValue, TouchableOpacityProps } from 'react-native';
+import {
+  ColorValue,
+  StyleProp,
+  TextStyle,
+  TouchableOpacityProps,
+} from 'react-native';
 
 // External dependencies.
 import { IconProps } from '../../../../Icons/Icon';
@@ -55,6 +60,10 @@ export interface ButtonBaseProps extends TouchableOpacityProps {
    * An optional loading state of Button.
    */
   loading?: boolean;
+  /**
+   * An optional text props of Button.
+   */
+  textProps?: StyleProp<TextStyle>;
 }
 
 /**

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/component-library/components/ConfirmInfoRowValueDouble/ConfirmInfoRowValueDouble.tsx

@@ -0,0 +1,44 @@
+import React, { ReactNode } from 'react';
+import { TextColor } from '../Texts/Text/Text.types';
+import Text from '../Texts/Text';
+import { Box } from '../../../components/UI/Box';
+import { RowVariant } from '../../../components/Snaps/SnapUIRenderer/components/row';
+import { AlignItems } from '../../../components/Snaps/SnapUIRenderer/components/box.types';
+import { FlexDirection } from '../../../components/Snaps/SnapUIRenderer/components/box.types';
+
+export type ConfirmInfoRowValueDoubleProps = {
+  left: ReactNode;
+  right: ReactNode;
+  variant?: RowVariant;
+};
+
+const LEFT_TEXT_COLORS = {
+  [RowVariant.Default]: TextColor.Muted,
+  [RowVariant.Critical]: TextColor.ErrorAlternative,
+  [RowVariant.Warning]: TextColor.Warning,
+};
+
+export const ConfirmInfoRowValueDouble = ({
+  left,
+  right,
+  variant = RowVariant.Default,
+}: ConfirmInfoRowValueDoubleProps) => {
+  return (
+    <Box
+      flexDirection={FlexDirection.Row}
+      alignItems={AlignItems.center}
+      gap={1}
+    >
+      {typeof left === 'string' ? (
+        <Text color={LEFT_TEXT_COLORS[variant] as TextColor}>{left}</Text>
+      ) : (
+        left
+      )}
+      {typeof right === 'string' ? (
+        <Text color={TextColor.Default}>{right}</Text>
+      ) : (
+        right
+      )}
+    </Box>
+  );
+};

app/component-library/components/Texts/Text/Text.types.ts

@@ -22,6 +22,15 @@ export enum TextVariant {
   BodyXSMedium = 'sBodyXSMedium',
 }
 
+/**
+ * Font weights
+ */
+export enum FontWeight {
+  Bold = 'bold',
+  Medium = 'medium',
+  Normal = 'normal',
+}
+
 /**
  * Text colors
  */
@@ -60,4 +69,8 @@ export interface TextProps extends RNTextProps {
    * Temporary prop to enable brand evolution fonts
    */
   isBrandEvolution?: boolean;
+  /**
+   * Optional font weight for the text
+   */
+  fontWeight?: FontWeight;
 }

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -74,6 +74,7 @@ import { updateSwapsTransaction } from '../../../util/swaps/swaps-transactions';
 ///: BEGIN:ONLY_INCLUDE_IF(preinstalled-snaps,external-snaps)
 import InstallSnapApproval from '../../Approvals/InstallSnapApproval';
 import { getGlobalEthQuery } from '../../../util/networks/global-network';
+import SnapDialogApproval from '../../Snaps/SnapDialogApproval/SnapsDialogApproval';
 ///: END:ONLY_INCLUDE_IF
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import SnapAccountCustomNameApproval from '../../Approvals/SnapAccountCustomNameApproval';
@@ -335,7 +336,7 @@ const RootRPCMethodsUI = (props) => {
               transactionId: transactionMeta.id,
               deviceId,
               // eslint-disable-next-line no-empty-function
-              onConfirmationComplete: () => { },
+              onConfirmationComplete: () => {},
               type: 'signTransaction',
             }),
           );
@@ -405,7 +406,8 @@ const RootRPCMethodsUI = (props) => {
           data &&
           data !== '0x' &&
           to &&
-          (await getMethodData(data, networkClientId)).name === TOKEN_METHOD_TRANSFER
+          (await getMethodData(data, networkClientId)).name ===
+            TOKEN_METHOD_TRANSFER
         ) {
           let asset = props.tokens.find(({ address }) =>
             toLowerCaseEquals(address, to),
@@ -534,6 +536,7 @@ const RootRPCMethodsUI = (props) => {
         ///: BEGIN:ONLY_INCLUDE_IF(preinstalled-snaps,external-snaps)
       }
       <InstallSnapApproval />
+      <SnapDialogApproval />
       {
         ///: END:ONLY_INCLUDE_IF
       }

app/components/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;