[PS] Implement Permission System

app/actions/modals/index.js

@@ -1,13 +1,8 @@
 // eslint-disable-next-line import/prefer-default-export
-export function toggleNetworkModal() {
+export function toggleNetworkModal(shouldNetworkSwitchPopToWallet = true) {
   return {
     type: 'TOGGLE_NETWORK_MODAL',
-  };
-}
-
-export function toggleAccountsModal() {
-  return {
-    type: 'TOGGLE_ACCOUNT_MODAL',
+    shouldNetworkSwitchPopToWallet,
   };
 }
 

app/actions/navigation/index.ts

@@ -1,5 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-import { SET_CURRENT_ROUTE } from '../../reducers/navigation';
+import {
+  SET_CURRENT_ROUTE,
+  SET_CURRENT_BOTTOM_NAV_ROUTE,
+} from '../../reducers/navigation';
 
 /**
  * Action Creators
@@ -8,3 +11,8 @@ export const setCurrentRoute = (route: string) => ({
   type: SET_CURRENT_ROUTE,
   payload: { route },
 });
+
+export const setCurrentBottomNavRoute = (route: string) => ({
+  type: SET_CURRENT_BOTTOM_NAV_ROUTE,
+  payload: { route },
+});

app/actions/privacy/index.js

@@ -12,17 +12,6 @@ export function rejectHost(hostname) {
   };
 }
 
-export function clearHosts() {
-  return { type: 'CLEAR_HOSTS' };
-}
-
-export function setPrivacyMode(enabled) {
-  return {
-    type: 'SET_PRIVACY_MODE',
-    enabled,
-  };
-}
-
 export function setThirdPartyApiMode(enabled) {
   return {
     type: 'SET_THIRD_PARTY_API_MODE',

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,25 @@
+// 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', color }: LoaderProps) => {
+  const { styles, theme } = useStyles(styleSheet, {});
+  const { colors } = theme;
+
+  const indicatorColor = color ?? colors.primary.default;
+
+  return (
+    <View style={styles.base}>
+      <ActivityIndicator size={size} color={indicatorColor} />
+    </View>
+  );
+};
+
+export default Loader;

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

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

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,58 @@
+// Third party dependencies.
+import React, { useCallback } from 'react';
+import { Platform, View } from 'react-native';
+
+// External dependencies.
+import { useStyles } from '../../hooks';
+import ButtonTertiary from '../../components/Buttons/Button/variants/ButtonTertiary';
+import { ButtonSize } from '../../components/Buttons/Button';
+import Loader from '../Loader';
+import generateTestId from '../../../../wdio/utils/generateTestId';
+
+// 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, variant }, index) => {
+          const key = `${label}-${index}`;
+          // Avoid drawing separator above the first element
+          const isFirstElement = index === 0;
+
+          const buttonStyle = {
+            opacity: disabled ? 0.5 : 1,
+          };
+
+          return (
+            <React.Fragment key={key}>
+              {actions.length > 1 && !isFirstElement && (
+                <View style={styles.separator} />
+              )}
+              <View>
+                <ButtonTertiary
+                  onPress={onPress}
+                  label={label}
+                  size={ButtonSize.Lg}
+                  disabled={disabled || isLoading}
+                  style={buttonStyle}
+                  variant={variant}
+                  {...generateTestId(Platform, testID)}
+                />
+                {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,24 @@
+// External dependencies.
+import { ButtonTertiaryVariant } from '../../../component-library/components/Buttons/ButtonTertiary';
+
+/**
+ * Sheet action options.
+ */
+export interface Action {
+  label: string;
+  onPress: () => void;
+  testID?: string;
+  disabled?: boolean;
+  isLoading?: boolean;
+  variant?: ButtonTertiaryVariant;
+}
+
+/**
+ * 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/Avatar/variants/AvatarNetwork/AvatarNetwork.styles.ts

@@ -32,7 +32,9 @@ const styleSheet = (params: {
     : {};
   return StyleSheet.create({
     base: Object.assign(baseStyle, style) as ViewStyle,
-    label: size === AvatarSize.Xs ? { lineHeight: 16 } : {},
+    label:
+      // Temporarily lower font size in XS size to prevent cut off
+      size === AvatarSize.Xs ? { lineHeight: undefined, fontSize: 10 } : {},
     image: {
       flex: 1,
       height: undefined,

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

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 
 // Third party dependencies.
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Image, ImageSourcePropType } from 'react-native';
 
 // External dependencies.
@@ -31,6 +31,10 @@ const AvatarNetwork = ({
 
   const onError = useCallback(() => setShowFallback(true), [setShowFallback]);
 
+  useEffect(() => {
+    setShowFallback(!imageSource);
+  }, [imageSource]);
+
   return (
     <AvatarBase size={size} style={styles.base}>
       {showFallback ? (

app/component-library/components/Avatars/Avatar/variants/AvatarToken/AvatarToken.styles.ts

@@ -62,7 +62,9 @@ const styleSheet = (params: {
       overflow: 'hidden',
       borderRadius: haloSize / 2,
     },
-    label: size === AvatarSize.Xs ? { lineHeight: 16 } : {},
+    label:
+      // Temporarily lower font size in XS size to prevent cut off
+      size === AvatarSize.Xs ? { lineHeight: undefined, fontSize: 10 } : {},
     image: {
       flex: 1,
       height: undefined,

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',
   },
 ];