feat: update notification account settings to use BIP-44 designs

app/component-library/components-temp/MultichainAccounts/AccountCell/AccountCell.tsx

@@ -1,6 +1,6 @@
 import { AccountGroupObject } from '@metamask/account-tree-controller';
 import React, { useCallback, useMemo } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { type ImageSourcePropType, TouchableOpacity, View } from 'react-native';
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import { useStyles } from '../../../hooks';
@@ -36,18 +36,24 @@ interface AccountCellProps {
   avatarAccountType: AvatarAccountType;
   hideMenu?: boolean;
   startAccessory?: React.ReactNode;
+  endContainer?: React.ReactNode;
   chainId?: string;
   onSelectAccount?: () => void;
 }
 
-const AccountCell = ({
+type BalanceEndContainerProps = Pick<
+  AccountCellProps,
+  'accountGroup' | 'hideMenu' | 'onSelectAccount'
+> & {
+  networkImageSource?: ImageSourcePropType;
+};
+
+const BalanceEndContainer = ({
   accountGroup,
-  avatarAccountType,
-  hideMenu = false,
-  startAccessory,
-  chainId,
+  hideMenu,
   onSelectAccount,
-}: AccountCellProps) => {
+  networkImageSource,
+}: BalanceEndContainerProps) => {
   const { styles } = useStyles(styleSheet, {});
   const { navigate } = useNavigation();
 
@@ -63,12 +69,6 @@ const AccountCell = ({
   const totalBalance = groupBalance?.totalBalanceInUserCurrency;
   const userCurrency = groupBalance?.userCurrency;
 
-  const selectEvmAddress = useMemo(
-    () => selectIconSeedAddressByAccountGroupId(accountGroup.id),
-    [accountGroup.id],
-  );
-  const evmAddress = useSelector(selectEvmAddress);
-
   const displayBalance = useMemo(() => {
     if (totalBalance == null || !userCurrency) {
       return undefined;
@@ -79,6 +79,61 @@ const AccountCell = ({
     });
   }, [totalBalance, userCurrency]);
 
+  return (
+    <>
+      <TouchableOpacity onPress={onSelectAccount}>
+        <View style={styles.balanceContainer}>
+          <Text
+            variant={TextVariant.BodyMDMedium}
+            color={TextColor.Default}
+            testID={AccountCellIds.BALANCE}
+          >
+            {totalBalance ? displayBalance : null}
+          </Text>
+          {networkImageSource && (
+            <Avatar
+              variant={AvatarVariant.Network}
+              size={AvatarSize.Xs}
+              style={styles.networkBadge}
+              imageSource={networkImageSource}
+            />
+          )}
+        </View>
+      </TouchableOpacity>
+      {!hideMenu && (
+        <TouchableOpacity
+          testID={AccountCellIds.MENU}
+          style={styles.menuButton}
+          onPress={handleMenuPress}
+        >
+          <Icon
+            name={IconName.MoreVertical}
+            size={IconSize.Md}
+            color={TextColor.Alternative}
+          />
+        </TouchableOpacity>
+      )}
+    </>
+  );
+};
+
+const AccountCell = ({
+  accountGroup,
+  avatarAccountType,
+  hideMenu = false,
+  startAccessory,
+  endContainer,
+  chainId,
+  onSelectAccount,
+}: AccountCellProps) => {
+  const { styles } = useStyles(styleSheet, {});
+
+  const selectEvmAddress = useMemo(
+    () => selectIconSeedAddressByAccountGroupId(accountGroup.id),
+    [accountGroup.id],
+  );
+  const evmAddress = useSelector(selectEvmAddress);
+
   // Determine which account address and network avatar to display based on the chainId
   let networkAccountAddress;
   let networkImageSource;
@@ -138,37 +193,13 @@ const AccountCell = ({
         </View>
       </TouchableOpacity>
       <View style={styles.endContainer}>
-        <TouchableOpacity onPress={onSelectAccount}>
-          <View style={styles.balanceContainer}>
-            <Text
-              variant={TextVariant.BodyMDMedium}
-              color={TextColor.Default}
-              testID={AccountCellIds.BALANCE}
-            >
-              {totalBalance ? displayBalance : null}
-            </Text>
-            {networkImageSource && (
-              <Avatar
-                variant={AvatarVariant.Network}
-                size={AvatarSize.Xs}
-                style={styles.networkBadge}
-                imageSource={networkImageSource}
-              />
-            )}
-          </View>
-        </TouchableOpacity>
-        {!hideMenu && (
-          <TouchableOpacity
-            testID={AccountCellIds.MENU}
-            style={styles.menuButton}
-            onPress={handleMenuPress}
-          >
-            <Icon
-              name={IconName.MoreVertical}
-              size={IconSize.Md}
-              color={TextColor.Alternative}
-            />
-          </TouchableOpacity>
+        {endContainer || (
+          <BalanceEndContainer
+            accountGroup={accountGroup}
+            hideMenu={hideMenu}
+            onSelectAccount={onSelectAccount}
+            networkImageSource={networkImageSource}
+          />
         )}
       </View>
     </Box>

app/component-library/components-temp/MultichainAccounts/MultichainAccountSelectorList/AccountListHeader/AccountListHeader.tsx

@@ -9,21 +9,23 @@ import Text, {
 import createStyles from '../MultichainAccountSelectorList.styles';
 import { AccountListHeaderProps } from './AccountListHeader.types';
 
-const AccountListHeader = memo(({ title }: AccountListHeaderProps) => {
-  const { styles } = useStyles(createStyles, {});
+const AccountListHeader = memo(
+  ({ title, containerStyle }: AccountListHeaderProps) => {
+    const { styles } = useStyles(createStyles, {});
 
-  return (
-    <View style={styles.sectionHeader}>
-      <Text
-        variant={TextVariant.BodyMDMedium}
-        color={TextColor.Alternative}
-        style={styles.sectionHeaderText}
-      >
-        {title}
-      </Text>
-    </View>
-  );
-});
+    return (
+      <View style={[styles.sectionHeader, containerStyle]}>
+        <Text
+          variant={TextVariant.BodyMDMedium}
+          color={TextColor.Alternative}
+          style={styles.sectionHeaderText}
+        >
+          {title}
+        </Text>
+      </View>
+    );
+  },
+);
 
 AccountListHeader.displayName = 'AccountListHeader';
 

app/component-library/components-temp/MultichainAccounts/MultichainAccountSelectorList/AccountListHeader/AccountListHeader.types.ts

@@ -1,3 +1,6 @@
+import { ViewStyle } from 'react-native';
+
 export interface AccountListHeaderProps {
   title: string;
+  containerStyle?: ViewStyle;
 }