[PS] Patch controllers

app/component-library/components-temp/SheetActions/SheetActions.tsx

@@ -17,26 +17,29 @@ const SheetActions = ({ actions }: SheetActionsProps) => {
 
   const renderActions = useCallback(
     () =>
-      actions.map(({ label, onPress, testID, isLoading, disabled }, index) => {
-        const key = `${label}-${index}`;
-        return (
-          <React.Fragment key={key}>
-            {actions.length > 1 && <View style={styles.separator} />}
-            <View>
-              <ButtonTertiary
-                testID={testID}
-                onPress={onPress}
-                label={label}
-                size={ButtonBaseSize.Lg}
-                disabled={disabled || isLoading}
-                /* eslint-disable-next-line */
-                style={{ opacity: disabled ? 0.5 : 1 }}
-              />
-              {isLoading && <Loader size={'small'} />}
-            </View>
-          </React.Fragment>
-        );
-      }),
+      actions.map(
+        ({ label, onPress, testID, isLoading, disabled, variant }, index) => {
+          const key = `${label}-${index}`;
+          return (
+            <React.Fragment key={key}>
+              {actions.length > 1 && <View style={styles.separator} />}
+              <View>
+                <ButtonTertiary
+                  testID={testID}
+                  onPress={onPress}
+                  label={label}
+                  size={ButtonBaseSize.Lg}
+                  disabled={disabled || isLoading}
+                  /* eslint-disable-next-line */
+                  style={{ opacity: disabled ? 0.5 : 1 }}
+                  variant={variant}
+                />
+                {isLoading && <Loader size={'small'} />}
+              </View>
+            </React.Fragment>
+          );
+        },
+      ),
     [actions, styles.separator],
   );
 

app/component-library/components-temp/SheetActions/SheetActions.types.ts

@@ -1,3 +1,6 @@
+// External dependencies.
+import { ButtonTertiaryVariant } from '../../../component-library/components/Buttons/ButtonTertiary';
+
 /**
  * Sheet action options.
  */
@@ -7,6 +10,7 @@ export interface Action {
   testID?: string;
   disabled?: boolean;
   isLoading?: boolean;
+  variant?: ButtonTertiaryVariant;
 }
 
 /**

app/component-library/components/Avatars/index.ts

@@ -1 +1,2 @@
 export { default } from './Avatar';
+export { AvatarVariants } from './Avatar.types';

app/component-library/components/Badges/Badge/index.ts

@@ -1 +1,2 @@
 export { default } from './Badge';
+export { BadgeVariants } from './Badge.types';

app/component-library/components/Badges/Badge/variants/BadgeNetwork/BadgeNetwork.types.ts

@@ -28,7 +28,7 @@ export interface BadgeNetworkProps extends Omit<BadgeBaseProps, 'children'> {
   /**
    * Image of the network from either a local or remote source.
    */
-  imageSource: ImageSourcePropType;
+  imageSource?: ImageSourcePropType;
   /**
    * Enum that represents the position of the network badge.
    * @defaults TopRight

app/component-library/components/Buttons/ButtonBase/ButtonBase.styles.ts

@@ -31,6 +31,7 @@ const styleSheet = (params: {
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: sizeAsNum / 2,
+        paddingHorizontal: 16,
       } as ViewStyle,
       style,
     ) as ViewStyle,

app/component-library/components/Buttons/ButtonBase/__snapshots__/ButtonBase.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`ButtonBase should render correctly 1`] = `
       "flexDirection": "row",
       "height": 40,
       "justifyContent": "center",
+      "paddingHorizontal": 16,
     }
   }
 >

app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.tsx

@@ -2,7 +2,7 @@
 
 // Third party dependencies.
 import React from 'react';
-import { View } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 
 // External dependencies.
 import { useStyles } from '../../../../../hooks';
@@ -19,9 +19,9 @@ const CellDisplayContainer: React.FC<CellDisplayContainerProps> = ({
   const { styles } = useStyles(styleSheet, { style });
 
   return (
-    <View style={styles.base} {...props}>
+    <TouchableOpacity style={styles.base} {...props}>
       {children}
-    </View>
+    </TouchableOpacity>
   );
 };
 

app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.types.ts

@@ -1,10 +1,10 @@
 // Third party dependencies.
-import { ViewProps } from 'react-native';
+import { TouchableOpacityProps } from 'react-native';
 
 /**
  * CellDisplayContainer component props.
  */
-export interface CellDisplayContainerProps extends ViewProps {
+export interface CellDisplayContainerProps extends TouchableOpacityProps {
   /**
    * Content to wrap to display.
    */

app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/README.md

@@ -1,10 +1,10 @@
 # CellAccountDisplayItemContainer
 
-CellAccountDisplayItemContainer is a wrapper component typically used for displaying CellAccount Content.
+CellAccountDisplayContainer is a wrapper component typically used for displaying CellAccount Content.
 
 ## Props
 
-This component extends React Native's [View](https://reactnative.dev/docs/view) component.
+This component extends React Native's [TouchableOpacityProps](https://reactnative.dev/docs/touchableopacity) component.
 
 ### `children`
 
@@ -18,9 +18,9 @@ Content to wrap to display.
 
 ```javascript
 // Replace import with relative path.
-import CellAccountDisplayItemContainer from 'app/component-library/components/Cells/CellAccountDisplayItemContainer/CellAccountDisplayItemContainer';
+import CellAccountDisplayContainer from 'app/component-library/components/Cells/CellAccountDisplayContainer/CellAccountDisplayContainer';
 
-<CellAccountDisplayItemContainer>
+<CellAccountDisplayContainer>
   <SampleContent />
-</CellAccountDisplayItemContainer>;
+</CellAccountDisplayContainer>;
 ```

app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/__snapshots__/CellDisplayContainer.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CellDisplayContainer - Snapshot should render correctly 1`] = `
-<View
+<TouchableOpacity
   style={
     Object {
       "backgroundColor": "#FFFFFF",
@@ -13,5 +13,5 @@ exports[`CellDisplayContainer - Snapshot should render correctly 1`] = `
   }
 >
   <View />
-</View>
+</TouchableOpacity>
 `;

app/component-library/components/Cells/Cell/variants/CellDisplay/CellDisplay.tsx

@@ -21,11 +21,16 @@ const CellDisplay = ({
   tertiaryText,
   tagLabel,
   children,
+  ...props
 }: CellDisplayProps) => {
   const { styles } = useStyles(styleSheet, { style });
 
   return (
-    <CellDisplayContainer style={styles.base} testID={CELL_DISPLAY_TEST_ID}>
+    <CellDisplayContainer
+      style={styles.base}
+      testID={CELL_DISPLAY_TEST_ID}
+      {...props}
+    >
       <CellBase
         avatarProps={avatarProps}
         title={title}

app/component-library/components/Cells/Cell/variants/CellDisplay/README.md

@@ -12,15 +12,15 @@ Variant of Cell.
 
 | <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
 | :-------------------------------------------------- | :------------------------------------------------------ |
-| [CellVariants](../../Cell.types.ts#L9)                                              | No                                                     |
+| [CellVariants](../../Cell.types.ts#L9)              | No                                                      |
 
 ### `avatarProps`
 
 Props for the [Avatar](../../../../Avatars/Avatar.tsx) component (with the exception of size). Avatar size is restricted to size Md(32x32) for Cells
 
-| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
-| :-------------------------------------------------- | :------------------------------------------------------ |
-| [AvatarProps](../../../../Avatars/Avatar.types.ts#L19)                                              | Yes                                                     |
+| <span style="color:gray;font-size:14px">TYPE</span>    | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :----------------------------------------------------- | :------------------------------------------------------ |
+| [AvatarProps](../../../../Avatars/Avatar.types.ts#L19) | Yes                                                     |
 
 ### `title`
 
@@ -54,14 +54,6 @@ Optional label (using [Tag](../../../../Tags/Tag/Tag.tsx) component) below the t
 | :-------------------------------------------------- | :------------------------------------------------------ |
 | string                                              | No                                                      |
 
-### `children`
-
-Optional accessory that can be inserted on the right of Cell.
-
-| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
-| :-------------------------------------------------- | :------------------------------------------------------ |
-| ReactNode                                           | Yes                                                     |
-
 ## Usage
 
 ```javascript

app/component-library/components/Cells/Cell/variants/CellDisplay/__snapshots__/CellDisplay.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`CellDisplay - Snapshot should render default settings correctly 1`] = `
 <CellDisplayContainer
   style={Object {}}
   testID="cell-display"
+  variant="Display"
 >
   <CellBase
     avatarProps={

app/component-library/components/Cells/Cell/variants/CellMultiselect/CellMultiselect.tsx

@@ -22,6 +22,7 @@ const CellMultiselect = ({
   tagLabel,
   isSelected = false,
   children,
+  ...props
 }: CellMultiselectProps) => {
   const { styles } = useStyles(styleSheet, { style });
 
@@ -30,6 +31,7 @@ const CellMultiselect = ({
       isSelected={isSelected}
       style={styles.base}
       testID={CELL_MULTI_SELECT_TEST_ID}
+      {...props}
     >
       <CellBase
         avatarProps={avatarProps}

app/component-library/components/Cells/Cell/variants/CellMultiselect/__snapshots__/CellMultiselect.test.tsx.snap

@@ -3,8 +3,10 @@
 exports[`CellMultiselect - Snapshot should render default settings correctly 1`] = `
 <MultiselectItem
   isSelected={false}
+  onPress={[Function]}
   style={Object {}}
   testID="cell-multi-select"
+  variant="Multiselect"
 >
   <CellBase
     avatarProps={
@@ -22,8 +24,10 @@ exports[`CellMultiselect - Snapshot should render default settings correctly 1`]
 exports[`CellMultiselect - Snapshot should render the proper selected state 1`] = `
 <MultiselectItem
   isSelected={true}
+  onPress={[Function]}
   style={Object {}}
   testID="cell-multi-select"
+  variant="Multiselect"
 >
   <CellBase
     avatarProps={

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts

@@ -32,6 +32,7 @@ const styleSheet = (params: {
         flexDirection: 'row',
         alignItems: 'center',
         backgroundColor: colors.background.alternative,
+        alignSelf: 'center',
       } as ViewStyle,
       style,
     ) as ViewStyle,

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.types.ts

@@ -6,9 +6,9 @@ import { ImageSourcePropType, TouchableOpacityProps } from 'react-native';
  */
 export interface PickerNetworkProps extends TouchableOpacityProps {
   /**
-   * Network image from either a local or remote source.
+   * Optional Network image from either a local or remote source.
    */
-  image: ImageSourcePropType;
+  imageSource?: ImageSourcePropType;
   /**
    * Network label to display.
    */

app/component-library/components/Pickers/PickerNetwork/README.md

@@ -6,9 +6,9 @@ PickerNetwork is a component that renders an avatar based on the user selected n
 
 This component extends `TouchableOpacityProps` from React Native's [TouchableOpacity](https://reactnative.dev/docs/touchableopacity) component.
 
-### `image`
+### `imageSource`
 
-Network image from either a local or remote source.
+Optional network image from either a local or remote source.
 
 | <span style="color:gray;font-size:14px">TYPE</span>                   | <span style="color:gray;font-size:14px">REQUIRED</span> |
 | :-------------------------------------------------------------------- | :------------------------------------------------------ |

app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`PickerNetwork should render correctly 1`] = `
   style={
     Object {
       "alignItems": "center",
+      "alignSelf": "center",
       "backgroundColor": "#F2F4F6",
       "borderRadius": 16,
       "flexDirection": "row",

app/component-library/components/Sheet/SheetBottom/SheetBottom.tsx

@@ -11,7 +11,7 @@ import React, {
   useRef,
 } from 'react';
 import {
-  LayoutAnimation,
+  // LayoutAnimation,
   LayoutChangeEvent,
   TouchableOpacity,
   useWindowDimensions,
@@ -166,11 +166,14 @@ const SheetBottom = forwardRef<SheetBottomRef, SheetBottomProps>(
       [hide],
     );
 
-    useEffect(() => {
-      // Automatically handles animation when content changes
-      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-      return () => debouncedHide.cancel();
-    }, [children, debouncedHide]);
+    useEffect(
+      () =>
+        // Automatically handles animation when content changes
+        // Disable for now since network switches causes the screen to hang with this on.
+        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        debouncedHide.cancel(),
+      [children, debouncedHide],
+    );
 
     const updateSheetHeight = (e: LayoutChangeEvent) => {
       const { height } = e.nativeEvent.layout;

app/component-library/components/Tags/TagUrl/TagUrl.styles.ts

@@ -31,16 +31,21 @@ const styleSheet = (params: { theme: Theme; vars: TagUrlStyleSheetVars }) => {
         paddingRight: 16,
         flexDirection: 'row',
         alignItems: 'center',
+        alignSelf: 'center',
       } as ViewStyle,
       style,
     ) as ViewStyle,
     label: {
       marginLeft: 8,
       color: colors.text.alternative,
+      flexShrink: 1,
     },
     cta: {
       marginLeft: 16,
     },
+    icon: {
+      marginLeft: 8,
+    },
   });
 };
 

app/component-library/components/Tags/TagUrl/TagUrl.tsx

@@ -9,17 +9,28 @@ import { AvatarBaseSize } from '../../Avatars/AvatarBase';
 import AvatarFavicon from '../../Avatars/AvatarFavicon';
 import ButtonLink from '../../Buttons/ButtonLink';
 import Text, { TextVariant } from '../../Text';
+import Icon, { IconSize } from '../../Icon';
 import { useStyles } from '../../../hooks';
 
 // Internal dependencies.
 import styleSheet from './TagUrl.styles';
 import { TagUrlProps } from './TagUrl.types';
 
-const TagUrl = ({ imageSource, label, cta, style, ...props }: TagUrlProps) => {
+const TagUrl = ({
+  imageSource,
+  label,
+  cta,
+  style,
+  iconName,
+  ...props
+}: TagUrlProps) => {
   const { styles } = useStyles(styleSheet, { style });
   return (
     <View style={styles.base} {...props}>
       <AvatarFavicon imageSource={imageSource} size={AvatarBaseSize.Md} />
+      {iconName ? (
+        <Icon style={styles.icon} name={iconName} size={IconSize.Md} />
+      ) : null}
       <Text style={styles.label} variant={TextVariant.sBodyMD}>
         {label}
       </Text>