[MC 0.5][FEATURE] Account actions on wallet view

app/components/Nav/App/index.js

@@ -78,6 +78,7 @@ import WalletRestored from '../../Views/RestoreWallet/WalletRestored';
 import WalletResetNeeded from '../../Views/RestoreWallet/WalletResetNeeded';
 import SDKLoadingModal from '../../Views/SDKLoadingModal/SDKLoadingModal';
 import SDKFeedbackModal from '../../Views/SDKFeedbackModal/SDKFeedbackModal';
+import AccountActions from '../../../components/Views/AccountActions';
 import WalletActions from '../../Views/WalletActions';
 
 const clearStackNavigatorOptions = {
@@ -511,6 +512,10 @@ const App = ({ userLoggedIn }) => {
         component={EnableAutomaticSecurityChecksModal}
       />
       <Stack.Screen name={Routes.MODAL.SRP_REVEAL_QUIZ} component={SRPQuiz} />
+      <Stack.Screen
+        name={Routes.SHEET.ACCOUNT_ACTIONS}
+        component={AccountActions}
+      />
     </Stack.Navigator>
   );
 

app/components/UI/Navbar/index.js

@@ -45,6 +45,7 @@ import {
   PAYMENT_REQUEST_CLOSE_BUTTON,
   REQUEST_SEARCH_RESULTS_BACK_BUTTON,
 } from '../../../../wdio/screen-objects/testIDs/Screens/RequestToken.testIds';
+import { BACK_BUTTON_SIMPLE_WEBVIEW } from '../../../../wdio/screen-objects/testIDs/Components/SimpleWebView.testIds';
 import ButtonIcon, {
   ButtonIconVariants,
 } from '../../../component-library/components/Buttons/ButtonIcon';
@@ -1112,6 +1113,7 @@ export function getWebviewNavbar(navigation, route, themeColors) {
         <TouchableOpacity
           onPress={() => navigation.pop()}
           style={styles.backButton}
+          {...generateTestId(Platform, BACK_BUTTON_SIMPLE_WEBVIEW)}
         >
           <IonicIcon
             name={'md-arrow-back'}

app/components/UI/TransactionReview/__snapshots__/index.test.tsx.snap

@@ -886,51 +886,6 @@ Array [
                     ]
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Array [
-                        Object {
-                          "color": "#24272A",
-                          "fontFamily": "EuclidCircularB-Regular",
-                          "fontSize": 30,
-                          "fontWeight": "400",
-                          "marginVertical": 2,
-                        },
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        undefined,
-                        Object {
-                          "color": "#24272A",
-                          "fontFamily": "EuclidCircularB-Regular",
-                          "fontSize": 14,
-                          "fontWeight": "400",
-                        },
-                      ]
-                    }
-                  >
-                    Account 2
-                  </Text>
                   <View
                     style={
                       Object {
@@ -973,9 +928,9 @@ Array [
                           undefined,
                           undefined,
                           Object {
-                            "color": "#535A61",
+                            "color": "#24272A",
                             "fontFamily": "EuclidCircularB-Regular",
-                            "fontSize": 12,
+                            "fontSize": 14,
                             "fontWeight": "400",
                           },
                         ]

app/components/UI/WalletAccount/WalletAccount.tsx

@@ -11,10 +11,7 @@ import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import { Platform, View } from 'react-native';
 // External dependencies
-import Icon, {
-  IconName,
-  IconSize,
-} from '../../../component-library/components/Icons/Icon';
+import { IconName } from '../../../component-library/components/Icons/Icon';
 import PickerAccount from '../../../component-library/components/Pickers/PickerAccount';
 import { AvatarAccountType } from '../../../component-library/components/Avatars/Avatar/variants/AvatarAccount';
 import { createAccountSelectorNavDetails } from '../../../components/Views/AccountSelector';
@@ -26,11 +23,17 @@ import {
   isDefaultAccountName,
 } from '../../../util/ENSUtils';
 import { selectChainId } from '../../../selectors/networkController';
+import ButtonIcon from '../../../component-library/components/Buttons/ButtonIcon/ButtonIcon';
+import { ButtonIconSizes } from '../../../component-library/components/Buttons/ButtonIcon';
+import Routes from '../../../constants/navigation/Routes';
 
 // Internal dependencies
 import styleSheet from './WalletAccount.styles';
 import { WalletAccountProps } from './WalletAccount.types';
-import { WALLET_ACCOUNT_ICON } from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
+import {
+  WALLET_ACCOUNT_ICON,
+  MAIN_WALLET_ACCOUNT_ACTIONS,
+} from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
 
 const WalletAccount = ({ style }: WalletAccountProps, ref: React.Ref<any>) => {
   const { styles } = useStyles(styleSheet, { style });
@@ -86,6 +89,12 @@ const WalletAccount = ({ style }: WalletAccountProps, ref: React.Ref<any>) => {
     lookupEns();
   }, [lookupEns]);
 
+  const onNavigateToAccountActions = () => {
+    navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+      screen: Routes.SHEET.ACCOUNT_ACTIONS,
+    });
+  };
+
   return (
     <View style={styles.base} ref={yourAccountRef}>
       <PickerAccount
@@ -105,8 +114,12 @@ const WalletAccount = ({ style }: WalletAccountProps, ref: React.Ref<any>) => {
       <View style={styles.middleBorder} />
       <View style={styles.addressContainer} ref={accountActionsRef}>
         <AddressCopy formatAddressType="short" />
-
-        <Icon name={IconName.MoreHorizontal} size={IconSize.Sm} />
+        <ButtonIcon
+          iconName={IconName.MoreHorizontal}
+          size={ButtonIconSizes.Sm}
+          onPress={onNavigateToAccountActions}
+          {...generateTestId(Platform, MAIN_WALLET_ACCOUNT_ACTIONS)}
+        />
       </View>
     </View>
   );

app/components/UI/WalletAccount/__snapshots__/WalletAccount.test.tsx.snap

@@ -287,18 +287,34 @@ exports[`WalletAccount renders correctly 1`] = `
         </View>
       </RNGestureHandlerButton>
     </View>
-    <SvgMock
-      color="#24272A"
-      height={16}
-      name="MoreHorizontal"
+    <TouchableOpacity
+      activeOpacity={0.5}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
       style={
         Object {
-          "height": 16,
-          "width": 16,
+          "alignItems": "center",
+          "height": 24,
+          "justifyContent": "center",
+          "width": 24,
         }
       }
-      width={16}
-    />
+      testID="main-wallet-account-actions"
+    >
+      <SvgMock
+        color="#24272A"
+        height={16}
+        name="MoreHorizontal"
+        style={
+          Object {
+            "height": 16,
+            "width": 16,
+          }
+        }
+        width={16}
+      />
+    </TouchableOpacity>
   </View>
 </View>
 `;

app/components/Views/AccountAction/AccountAction.styles.ts

@@ -0,0 +1,45 @@
+// Third party dependencies.
+import { StyleSheet, ViewStyle } from 'react-native';
+
+// External dependencies.
+import { Theme } from '../../../util/theme/models';
+
+// Internal dependencies.
+import { TouchableOpacityStyleSheetVars } from './AccountAction.types';
+
+/**
+ * Style sheet function for AccountAction 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;
+  vars: TouchableOpacityStyleSheetVars;
+}) => {
+  const { theme, vars } = params;
+  const { style } = vars;
+  const { colors } = theme;
+
+  return StyleSheet.create({
+    base: Object.assign(
+      {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 16,
+      },
+      style,
+    ) as ViewStyle,
+    descriptionLabel: {
+      color: colors.text.alternative,
+    },
+    icon: {
+      marginHorizontal: 16,
+    },
+  });
+};
+
+export default styleSheet;

app/components/Views/AccountAction/AccountAction.tsx

@@ -0,0 +1,33 @@
+// Third party dependencies.
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+// External dependencies.
+import Text, {
+  TextVariant,
+} from '../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../component-library/hooks';
+// Internal dependencies.
+import { WalletActionProps } from './AccountAction.types';
+import styleSheet from './AccountAction.styles';
+import Icon, {
+  IconSize,
+} from '../../../component-library/components/Icons/Icon';
+
+const AccountAction = ({
+  actionTitle,
+  iconName,
+  iconSize = IconSize.Md,
+  style,
+  ...props
+}: WalletActionProps) => {
+  const { styles } = useStyles(styleSheet, { style });
+  return (
+    <TouchableOpacity style={styles.base} {...props}>
+      <Icon style={styles.icon} size={iconSize} name={iconName} />
+
+      <Text variant={TextVariant.BodyLGMedium}>{actionTitle}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default AccountAction;

app/components/Views/AccountAction/AccountAction.types.ts

@@ -0,0 +1,19 @@
+import { TouchableOpacityProps } from 'react-native';
+import {
+  IconName,
+  IconSize,
+} from '../../../component-library/components/Icons/Icon';
+
+export interface WalletActionProps extends TouchableOpacityProps {
+  actionTitle: string;
+  iconName: IconName;
+  iconSize?: IconSize;
+}
+
+/**
+ * Style sheet input parameters.
+ */
+export type TouchableOpacityStyleSheetVars = Pick<
+  TouchableOpacityProps,
+  'style'
+>;

app/components/Views/AccountAction/index.tsx

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

app/components/Views/AccountActions/AccountActions.constants.ts

@@ -0,0 +1,5 @@
+// Test IDs
+export const EDIT_ACCOUNT = 'edit-account-action';
+export const VIEW_ETHERSCAN = 'view-etherscan-action';
+export const SHARE_ADDRESS = 'share-address-action';
+export const SHOW_PRIVATE_KEY = 'show-private-key-action';

app/components/Views/AccountActions/AccountActions.styles.ts

@@ -0,0 +1,18 @@
+// Third party dependencies.
+import { StyleSheet } from 'react-native';
+
+/**
+ * Style sheet function for AccountActions component.
+ *
+ * @returns StyleSheet object.
+ */
+const styleSheet = () =>
+  StyleSheet.create({
+    actionsContainer: {
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+      paddingVertical: 16,
+    },
+  });
+
+export default styleSheet;