Feature/4768 action selector sheet

app/actions/modals/index.js

@@ -5,12 +5,6 @@ export function toggleNetworkModal() {
   };
 }
 
-export function toggleAccountsModal() {
-  return {
-    type: 'TOGGLE_ACCOUNT_MODAL',
-  };
-}
-
 export function toggleCollectibleContractModal() {
   return {
     type: 'TOGGLE_COLLECTIBLE_CONTRACT_MODAL',

app/component-library/components-temp/Loader/Loader.styles.ts

@@ -0,0 +1,29 @@
+// Third party dependencies.
+import { StyleSheet } from 'react-native';
+
+// External dependencies.
+import { Theme } from '../../../util/theme/models';
+
+/**
+ * Style sheet function for SheetActions component.
+ *
+ * @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({
+    base: {
+      ...StyleSheet.absoluteFillObject,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: colors.background.default,
+    },
+  });
+};
+
+export default styleSheet;

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

@@ -0,0 +1,23 @@
+// Third party dependencies.
+import React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+// External dependencies.
+import { useStyles } from '../../hooks';
+
+// Internal dependencies.
+import styleSheet from './Loader.styles';
+import { LoaderProps } from './Loader.types';
+
+const Loader = ({ size = 'large' }: LoaderProps) => {
+  const { styles, theme } = useStyles(styleSheet, {});
+  const { colors } = theme;
+
+  return (
+    <View style={styles.base}>
+      <ActivityIndicator size={size} color={colors.primary.default} />
+    </View>
+  );
+};
+
+export default Loader;

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

@@ -0,0 +1,12 @@
+// Third party dependencies.
+import { ActivityIndicatorProps } from 'react-native';
+
+/**
+ * Loader props.
+ */
+export interface LoaderProps {
+  /**
+   * Activity indicator size.
+   */
+  size?: ActivityIndicatorProps['size'];
+}

app/component-library/components-temp/Loader/index.ts

@@ -0,0 +1 @@
+export { default } from './Loader';

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

@@ -0,0 +1,28 @@
+// Third party dependencies.
+import { StyleSheet } from 'react-native';
+
+// External dependencies.
+import { Theme } from '../../../util/theme/models';
+
+/**
+ * Style sheet function for SheetActions component.
+ *
+ * @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({
+    separator: {
+      height: 1,
+      backgroundColor: colors.border.muted,
+      marginHorizontal: 16,
+    },
+  });
+};
+
+export default styleSheet;

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

@@ -0,0 +1,46 @@
+// Third party dependencies.
+import React, { useCallback } from 'react';
+import { View } from 'react-native';
+
+// External dependencies.
+import { useStyles } from '../../hooks';
+import ButtonTertiary from '../../components/Buttons/ButtonTertiary';
+import { ButtonBaseSize } from '../../components/Buttons/ButtonBase';
+import Loader from '../Loader';
+
+// Internal dependencies.
+import { SheetActionsProps } from './SheetActions.types';
+import styleSheet from './SheetActions.styles';
+
+const SheetActions = ({ actions }: SheetActionsProps) => {
+  const { styles } = useStyles(styleSheet, {});
+
+  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, styles.separator],
+  );
+
+  return <>{renderActions()}</>;
+};
+
+export default SheetActions;

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

@@ -0,0 +1,20 @@
+/**
+ * Sheet action options.
+ */
+export interface Action {
+  label: string;
+  onPress: () => void;
+  testID?: string;
+  disabled?: boolean;
+  isLoading?: boolean;
+}
+
+/**
+ * SheetActionsProps props.
+ */
+export interface SheetActionsProps {
+  /**
+   * List of actions.
+   */
+  actions: Action[];
+}

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

@@ -0,0 +1 @@
+export { default } from './SheetActions';

app/component-library/components/Avatars/AvatarGroup/AvatarGroup.constants.ts

@@ -9,98 +9,84 @@ export const AVAILABLE_TOKEN_LIST: AvatarGroupTokenList = [
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '0',
   },
   {
     name: 'Ethereum',
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '1',
   },
   {
     name: 'Ethereum',
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '2',
   },
   {
     name: 'Ethereum',
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '3',
   },
   {
     name: 'Ethereum',
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '4',
   },
   {
     name: 'Ethereum',
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '5',
   },
   {
     name: 'Ethereum',
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '6',
   },
   {
     name: 'Ethereum',
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '7',
   },
   {
     name: 'Ethereum',
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '8',
   },
   {
     name: 'Ethereum',
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '9',
   },
   {
     name: 'Ethereum',
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '10',
   },
   {
     name: 'Ethereum',
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '11',
   },
   {
     name: 'Ethereum',
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '12',
   },
   {
     name: 'Ethereum',
     imageSource: {
       uri: 'https://cryptologos.cc/logos/avalanche-avax-logo.png',
     },
-    id: '13',
   },
 ];
 

app/component-library/components/Avatars/AvatarGroup/AvatarGroup.styles.ts

@@ -4,6 +4,9 @@ import { StyleSheet } from 'react-native';
 // External dependencies.
 import { Theme } from '../../../../util/theme/models';
 
+// Internal dependencies.
+import { AvatarGroupStyleSheetVars } from './AvatarGroup.types';
+
 /**
  * Style sheet function for AvatarGroup component.
  *
@@ -12,18 +15,25 @@ import { Theme } from '../../../../util/theme/models';
  * @param params.vars Inputs that the style sheet depends on.
  * @returns StyleSheet object.
  */
-const styleSheet = (params: { theme: Theme; vars: any }) => {
+const styleSheet = (params: {
+  theme: Theme;
+  vars: AvatarGroupStyleSheetVars;
+}) => {
   const { theme, vars } = params;
-  const { stackWidth } = vars;
-
+  const { stackWidth, stackHeight } = vars;
   const borderWidth = 1;
+  const stackHeightWithBorder = stackHeight + borderWidth * 2;
 
   return StyleSheet.create({
-    base: { flexDirection: 'row' },
-    stack: {
+    base: {
       flexDirection: 'row',
       alignItems: 'center',
+      height: stackHeightWithBorder,
+    },
+    stack: {
+      flexDirection: 'row',
       width: stackWidth + borderWidth * 2,
+      height: stackHeightWithBorder,
     },
     stackedAvatarWrapper: {
       position: 'absolute',
@@ -37,6 +47,7 @@ const styleSheet = (params: { theme: Theme; vars: any }) => {
     textStyle: {
       color: theme.colors.text.alternative,
       marginLeft: 2,
+      bottom: 2,
     },
   });
 };

app/component-library/components/Avatars/AvatarGroup/AvatarGroup.tsx

@@ -1,5 +1,5 @@
 // Third party dependencies.
-import React, { useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { View } from 'react-native';
 
 // External dependencies.
@@ -26,18 +26,21 @@ const AvatarGroup = ({ tokenList }: AvatarGroupProps) => {
   const stackWidth = avatarSpacing * (amountOfVisibleAvatars + 1);
   const shouldRenderOverflowCounter = overflowCounter > 0;
 
-  const { styles } = useStyles(styleSheet, { stackWidth });
+  const { styles } = useStyles(styleSheet, {
+    stackWidth,
+    stackHeight: Number(extraSmallSize),
+  });
 
-  const renderTokenList = useMemo(
+  const renderTokenList = useCallback(
     () =>
       tokenList
         .slice(0, MAX_STACKED_AVATARS)
-        .map(({ name, imageSource, id }, index) => {
+        .map(({ name, imageSource }, index) => {
           const leftOffset = avatarSpacing * index;
 
           return (
             <View
-              key={`${name}-${id}`}
+              key={`${name}-${index}`}
               style={[styles.stackedAvatarWrapper, { left: leftOffset }]}
             >
               <AvatarToken
@@ -53,7 +56,7 @@ const AvatarGroup = ({ tokenList }: AvatarGroupProps) => {
 
   return (
     <View style={styles.base}>
-      <View style={styles.stack}>{renderTokenList}</View>
+      <View style={styles.stack}>{renderTokenList()}</View>
       <View style={styles.overflowCounterWrapper}>
         {shouldRenderOverflowCounter && (
           <Text

app/component-library/components/Avatars/AvatarGroup/AvatarGroup.types.ts

@@ -5,10 +5,6 @@ import { ImageSourcePropType, ViewProps } from 'react-native';
  * Token structure used in AvatarGroup.
  */
 export interface AvatarGroupToken {
-  /**
-   * Token id.
-   */
-  id: string;
   /**
    * Token Name.
    */
@@ -30,3 +26,11 @@ export interface AvatarGroupProps extends ViewProps {
    */
   tokenList: AvatarGroupTokenList;
 }
+
+/**
+ * Style sheet input parameters.
+ */
+export interface AvatarGroupStyleSheetVars {
+  stackWidth: number;
+  stackHeight: number;
+}