feat(3448): header update (#11763)

## **Description** The header is being updated according to this [Figma design](https://www.figma.com/design/aMYisczaJyEsYl1TYdcPUL/Portfolio-View?m=auto&node-id=5019-59596&t=PAdxL1bg2Mk08dSk-1) (second to last screen). Because `WalletAccount` is being removed, the more icon or overflow icon will be moved to the `AccountSelectorList`. Here is the [PR for more info](#11823) Regression Tests Passing (11/04/24): https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/6224a4f4-1c55-43cf-a622-ec6d91f42110?tab=workflows ## **Related issues** Ticket: [#3448](MetaMask/MetaMask-planning#3448) ## **Manual testing steps** 1. Wallet Home Page - Open the account picker and switch between accounts - Verify functionality remains the same as before 2. Copy Address - Use the copy address feature in the top right - Confirm it works as expected 3. Network Switcher - Switch between different networks - Ensure all networks load correctly and balances update 4. Overflow (Edit Account): This is on #11823 - Tap on account picker and a bottom sheet will appear - Click on the overflow icon (the vertical more icon) and edit your account just like before ## **Screenshots/Recordings** | Light | Dark | |:---:|:---:| |![light_mode_header_update](https://github.com/user-attachments/assets/39fdde2b-40a9-4119-aa93-3145fb8f7c63)|![dark_mode_header_update](https://github.com/user-attachments/assets/a5c8346b-ad89-4c6b-9e1c-f95727ec7efa)| ### **Before** | Light | Dark | |:---:|:---:| |![light_mode_original](https://github.com/user-attachments/assets/11e473f5-3b14-454f-bd14-66e418733abb)|![dark_mode_original](https://github.com/user-attachments/assets/a50064e9-5114-498d-958b-8e2ba8fddf5c)| ### **After** | Light | Dark | |:---:|:---:| |![light_mode_screenshot](https://github.com/user-attachments/assets/e65578ed-227a-41bb-b142-f636f81590d6)|![dark_mode_screenshot](https://github.com/user-attachments/assets/3e65ffa5-83a1-4eef-bda2-95effb32fa28)| ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
MetaMask · Nov 8, 2024 · 1b48bbc · 1b48bbc
1 parent 1ec8742
commit 1b48bbc
Show file tree

Hide file tree

Showing 47 changed files with 3,926 additions and 2,349 deletions.
diff --git a/app/component-library/components/Pickers/PickerAccount/PickerAccount.styles.ts b/app/component-library/components/Pickers/PickerAccount/PickerAccount.styles.ts
@@ -3,7 +3,6 @@ import { StyleSheet, ViewStyle } from 'react-native';
 
 // External dependencies.
 import { Theme } from '../../../../util/theme/models';
-import { fontStyles } from '../../../../styles/common';
 
 // Internal dependencies.
 import { PickerAccountStyleSheetVars } from './PickerAccount.types';
@@ -24,34 +23,39 @@ const styleSheet = (params: {
   const { colors } = theme;
   const { style, cellAccountContainerStyle } = vars;
   return StyleSheet.create({
-    base: Object.assign({} as ViewStyle, style) as ViewStyle,
+    base: {
+      ...(style as ViewStyle),
+      flexDirection: 'row',
+      padding: 0,
+      borderWidth: 0,
+    },
     accountAvatar: {
-      marginRight: 16,
+      marginRight: 8,
     },
     accountAddressLabel: {
       color: colors.text.alternative,
+      textAlign: 'center',
     },
     cellAccount: {
-      flex: 1,
       flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
       ...cellAccountContainerStyle,
     },
     accountNameLabel: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    accountNameAvatar: {
       flexDirection: 'row',
       alignItems: 'center',
-      justifyContent: 'flex-start',
     },
-    accountNameLabelText: {
-      marginTop: 4,
-      marginHorizontal: 5,
-      paddingHorizontal: 5,
-      ...fontStyles.bold,
-      color: colors.text.alternative,
-      borderWidth: 1,
-      borderRadius: 10,
-      borderColor: colors.border.default,
+    pickerAccountContainer: {
       justifyContent: 'center',
-      textAlign: 'center',
+      alignItems: 'center',
+    },
+    dropDownIcon: {
+      marginLeft: 8,
     },
   });
 };

diff --git a/app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx b/app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx
@@ -9,6 +9,7 @@ import Avatar, { AvatarSize, AvatarVariant } from '../../Avatars/Avatar';
 import Text, { TextVariant } from '../../Texts/Text';
 import { formatAddress } from '../../../../util/address';
 import { useStyles } from '../../../hooks';
+import { IconSize } from '../../Icons/Icon';
 
 // Internal dependencies.
 import PickerBase from '../PickerBase';
@@ -25,7 +26,6 @@ const PickerAccount: React.ForwardRefRenderFunction<
     accountAddress,
     accountName,
     accountAvatarType,
-    accountTypeLabel,
     showAddress = true,
     cellAccountContainerStyle = {},
     ...props
@@ -40,33 +40,46 @@ const PickerAccount: React.ForwardRefRenderFunction<
 
   const renderCellAccount = () => (
     <View style={styles.cellAccount}>
-      <Avatar
-        variant={AvatarVariant.Account}
-        type={accountAvatarType}
-        accountAddress={accountAddress}
-        size={AvatarSize.Md}
-        style={styles.accountAvatar}
-      />
       <View style={styles.accountNameLabel}>
-        <Text
-          variant={TextVariant.BodyMDMedium}
-          testID={WalletViewSelectorsIDs.ACCOUNT_NAME_LABEL_TEXT}
-        >
-          {accountName}
-        </Text>
-        {showAddress && (
-          <Text variant={TextVariant.BodyMD} style={styles.accountAddressLabel}>
-            {shortenedAddress}
+        <View style={styles.accountNameAvatar}>
+          <Avatar
+            variant={AvatarVariant.Account}
+            type={accountAvatarType}
+            accountAddress={accountAddress}
+            size={AvatarSize.Xs}
+            style={styles.accountAvatar}
+          />
+          <Text
+            variant={TextVariant.BodyMDMedium}
+            testID={WalletViewSelectorsIDs.ACCOUNT_NAME_LABEL_TEXT}
+          >
+            {accountName}
           </Text>
-        )}
+        </View>
       </View>
     </View>
   );
 
   return (
-    <PickerBase style={styles.base} {...props} ref={ref}>
-      {renderCellAccount()}
-    </PickerBase>
+    <View style={styles.pickerAccountContainer}>
+      <PickerBase
+        iconSize={IconSize.Xs}
+        style={styles.base}
+        dropdownIconStyle={styles.dropDownIcon}
+        {...props}
+        ref={ref}
+      >
+        {renderCellAccount()}
+      </PickerBase>
+      {showAddress && (
+        <Text
+          variant={TextVariant.BodySMMedium}
+          style={styles.accountAddressLabel}
+        >
+          {shortenedAddress}
+        </Text>
+      )}
+    </View>
   );
 };