wip

Author: owencraston

app/components/Views/MultichainAccounts/WalletDetails/BaseWalletDetails/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { useStyles } from '../../../../hooks/useStyles';
 import styleSheet from './styles';
@@ -13,17 +13,45 @@ import Icon, {
   IconName,
 } from '../../../../../component-library/components/Icons/Icon';
 import { AccountWallet } from '../WalletDetails';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View, FlatList } from 'react-native';
 import { WalletDetailsIds } from '../../../../../../e2e/selectors/MultichainAccounts/WalletDetails';
 import { AlignItems, FlexDirection } from '../../../../UI/Box/box.types';
 import { Box } from '../../../../UI/Box/Box';
 import { strings } from '../../../../../../locales/i18n';
+import { InternalAccount } from '@metamask/keyring-internal-api';
+import { AccountId } from '@metamask/accounts-controller';
+import Engine from '../../../../../core/Engine';
 
 interface BaseWalletDetailsProps {
   wallet: AccountWallet;
   children?: React.ReactNode;
 }
 
+/**
+ * Fetches internal accounts from the AccountsController based on the wallet's account IDs
+ * @param wallet - The wallet containing account IDs to fetch
+ * @returns Array of internal accounts
+ */
+const getInternalAccountsFromWallet = (
+  wallet: AccountWallet,
+): InternalAccount[] => {
+  const { AccountsController } = Engine.context;
+  const { accounts } = AccountsController.state.internalAccounts;
+
+  // Extract all account IDs from the wallet's groups
+  const accountIds: AccountId[] = [];
+  Object.values(wallet.groups).forEach((group) => {
+    accountIds.push(...group.accounts);
+  });
+
+  // Fetch internal accounts for each account ID
+  const internalAccounts = accountIds
+    .map((accountId) => accounts[accountId])
+    .filter((account): account is InternalAccount => account !== undefined);
+
+  return internalAccounts;
+};
+
 export const BaseWalletDetails = ({
   wallet,
   children,
@@ -36,6 +64,22 @@ export const BaseWalletDetails = ({
     // TODO: Implement edit wallet name
   }, []);
 
+  // Get internal accounts from the wallet
+  const accounts = useMemo(
+    () => getInternalAccountsFromWallet(wallet),
+    [wallet],
+  );
+
+  const renderAccountItem = ({ item: account }: { item: InternalAccount }) => (
+    <View style={styles.accountBox}>
+      <Box flexDirection={FlexDirection.Row} alignItems={AlignItems.center}>
+        <Text variant={TextVariant.BodyMDMedium}>{account.metadata.name}</Text>
+      </Box>
+    </View>
+  );
+
+  const keyExtractor = (item: InternalAccount) => item.id;
+
   return (
     <SafeAreaView style={styles.safeArea}>
       <HeaderBase
@@ -93,6 +137,18 @@ export const BaseWalletDetails = ({
             </Text>
           </Box>
         </View>
+        <View style={styles.accountsList}>
+          <Text variant={TextVariant.BodyMDMedium} style={styles.accountsTitle}>
+            Accounts
+          </Text>
+          <FlatList
+            data={accounts}
+            keyExtractor={keyExtractor}
+            renderItem={renderAccountItem}
+            showsVerticalScrollIndicator={false}
+            scrollEnabled={false}
+          />
+        </View>
         {children}
       </View>
     </SafeAreaView>

app/components/Views/MultichainAccounts/WalletDetails/BaseWalletDetails/styles.ts

@@ -52,11 +52,19 @@ const styleSheet = (params: { theme: Theme }) => {
       borderBottomLeftRadius: 8,
       borderBottomRightRadius: 8,
     },
-    accounts: {
-      ...baseRowStyle,
-      marginBottom: 16,
-      borderBottomLeftRadius: 8,
-      borderBottomRightRadius: 8,
+    accountsList: {
+      marginTop: 16,
+      flex: 1,
+    },
+    accountsTitle: {
+      marginBottom: 12,
+      color: colors.text.default,
+    },
+    accountBox: {
+      marginBottom: 8,
+      backgroundColor: colors.background.alternative,
+      borderRadius: 8,
+      padding: 16,
     },
     text: {
       color: colors.text.alternative,