feat: account details pages w/o 7702

test/data/mock-accounts.ts

@@ -30,6 +30,84 @@ export const MOCK_ACCOUNT_EOA: InternalAccount = {
   },
 };
 
+export const MOCK_ACCOUNT_PRIVATE_KEY: InternalAccount = {
+  id: 'd6ad74fa-ca5e-4d2d-ad53-95ababbfe872',
+  address: '0x2990079bcdee240329a520d2444386fc119da21a',
+  options: {},
+  methods: [
+    'personal_sign',
+    'eth_sign',
+    'eth_signTransaction',
+    'eth_signTypedData_v1',
+    'eth_signTypedData_v3',
+    'eth_signTypedData_v4',
+  ],
+  scopes: [EthScope.Mainnet],
+  type: EthAccountType.Eoa,
+  metadata: {
+    name: 'Account 58',
+    importTime: 1750963640738,
+    keyring: { type: KeyringTypes.simple },
+    lastSelected: 1750963640759,
+  },
+};
+
+export const MOCK_ACCOUNT_HARDWARE: InternalAccount = {
+  id: 'a4a41a3d-13d9-4ef3-be2f-aa28f47879aa',
+  address: '0x3a3fc52253e62cf4f3573814aa410736c9db5d0c',
+  options: {},
+  methods: [
+    'personal_sign',
+    'eth_sign',
+    'eth_signTransaction',
+    'eth_signTypedData_v1',
+    'eth_signTypedData_v3',
+    'eth_signTypedData_v4',
+  ],
+  scopes: [EthScope.Mainnet],
+  type: EthAccountType.Eoa,
+  metadata: {
+    name: 'Ledger 2',
+    importTime: 1750963627141,
+    keyring: { type: KeyringTypes.ledger },
+    lastSelected: 1750963627172,
+    nameLastUpdatedAt: 1750963627173,
+  },
+};
+
+export const MOCK_ACCOUNT_INSTITUTIONAL: InternalAccount = {
+  id: 'c0949edb-b843-4d20-be0b-80f2a8ef6552',
+  options: {
+    custodian: {
+      environmentName: 'neptune-prod',
+      displayName: 'Neptune',
+      deferPublication: false,
+      importOrigin: 'https://neptune-custody-ui.metamask-institutional.io',
+    },
+    accountName: 'Custody Account A',
+  },
+  address: '0xc073fd7d1522c4103e0d8e407fa763d3ac8417e6',
+  methods: [
+    'eth_signTransaction',
+    'personal_sign',
+    'eth_signTypedData_v3',
+    'eth_signTypedData_v4',
+  ],
+  type: 'eip155:eoa',
+  scopes: ['eip155:0'],
+  metadata: {
+    name: 'Custody Account A',
+    importTime: 1751048625733,
+    keyring: { type: KeyringTypes.snap },
+    snap: {
+      id: 'npm:@metamask/institutional-wallet-snap',
+      name: 'Institutional Wallet',
+      enabled: true,
+    },
+    lastSelected: 1751048625755,
+  },
+};
+
 export const MOCK_ACCOUNT_ERC4337: InternalAccount = {
   id: '4d5921f2-2022-44ce-a84f-9f6a0f142a5c',
   address: '0x123',
@@ -97,4 +175,6 @@ export const MOCK_ACCOUNTS = {
   [MOCK_ACCOUNT_BIP122_P2WPKH.id]: MOCK_ACCOUNT_BIP122_P2WPKH,
   [MOCK_ACCOUNT_BIP122_P2WPKH_TESTNET.id]: MOCK_ACCOUNT_BIP122_P2WPKH_TESTNET,
   [MOCK_ACCOUNT_SOLANA_MAINNET.id]: MOCK_ACCOUNT_SOLANA_MAINNET,
+  [MOCK_ACCOUNT_HARDWARE.id]: MOCK_ACCOUNT_HARDWARE,
+  [MOCK_ACCOUNT_PRIVATE_KEY.id]: MOCK_ACCOUNT_PRIVATE_KEY,
 };

ui/components/multichain-accounts/account-details-row/account-details-row.tsx

@@ -6,6 +6,7 @@ import {
   JustifyContent,
   AlignItems,
   TextColor,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 
 type AccountDetailsRowProps = {
@@ -31,9 +32,28 @@ export const AccountDetailsRow = ({
       paddingRight={4}
       alignItems={AlignItems.center}
     >
-      <Text color={TextColor.textDefault}>{label}</Text>
-      <Box display={Display.Flex} alignItems={AlignItems.center}>
-        <Text color={TextColor.textAlternative}>{value}</Text>
+      <Text
+        color={TextColor.textDefault}
+        variant={TextVariant.bodyMdMedium}
+        paddingRight={12}
+      >
+        {label}
+      </Text>
+      <Box
+        display={Display.Flex}
+        alignItems={AlignItems.center}
+        style={{ minWidth: 0, flex: 1, justifyContent: 'flex-end' }}
+      >
+        <Text
+          color={TextColor.textAlternative}
+          variant={TextVariant.bodyMdMedium}
+          ellipsis
+          style={{
+            maxWidth: '150px',
+          }}
+        >
+          {value}
+        </Text>
         {endAccessory}
       </Box>
     </Box>

ui/components/multichain-accounts/edit-account-name-modal/edit-account-name-modal.tsx

@@ -9,12 +9,15 @@ import {
   ButtonPrimary,
   FormTextField,
   Box,
+  Text,
 } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { setAccountLabel } from '../../../store/actions';
 import {
   Display,
   FlexDirection,
+  TextColor,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 
 type EditAccountNameModalProps = {
@@ -54,14 +57,25 @@ export const EditAccountNameModal = ({
             flexDirection={FlexDirection.Column}
             gap={4}
           >
-            <FormTextField
-              label={t('name')}
-              value={accountName}
-              onChange={(e) => setAccountName(e.target.value)}
-              placeholder={currentAccountName}
-              autoFocus
-              helpText={address}
-            />
+            <Box>
+              <FormTextField
+                label={t('name')}
+                value={accountName}
+                onChange={(e) => setAccountName(e.target.value)}
+                placeholder={currentAccountName}
+                autoFocus
+              />
+              <Text
+                variant={TextVariant.bodySm}
+                color={TextColor.textAlternative}
+                style={{
+                  wordBreak: 'break-all',
+                }}
+                paddingTop={1}
+              >
+                {address}
+              </Text>
+            </Box>
             <ButtonPrimary
               onClick={handleSave}
               disabled={!accountName.trim()}

ui/components/multichain/menu-items/account-details-menu-item.js

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { useHistory } from 'react-router-dom';
 import { setAccountDetailsAddress } from '../../../store/actions';
 
 import { MenuItem } from '../../ui/menu';
@@ -13,6 +14,8 @@ import {
 } from '../../../../shared/constants/metametrics';
 import { IconName, Text } from '../../component-library';
 import { getHDEntropyIndex } from '../../../selectors/selectors';
+import { getIsMultichainAccountsState1Enabled } from '../../../selectors/multichain-accounts/feature-flags';
+import { ACCOUNT_DETAILS_ROUTE } from '../../../helpers/constants/routes';
 
 export const AccountDetailsMenuItem = ({
   metricsLocation,
@@ -24,7 +27,10 @@ export const AccountDetailsMenuItem = ({
   const dispatch = useDispatch();
   const trackEvent = useContext(MetaMetricsContext);
   const hdEntropyIndex = useSelector(getHDEntropyIndex);
-
+  const history = useHistory();
+  const isMultichainAccountsState1Enabled = useSelector(
+    getIsMultichainAccountsState1Enabled,
+  );
   const LABEL = t('accountDetails');
 
   return (
@@ -39,6 +45,9 @@ export const AccountDetailsMenuItem = ({
             hd_entropy_index: hdEntropyIndex,
           },
         });
+        if (isMultichainAccountsState1Enabled) {
+          history.push(`${ACCOUNT_DETAILS_ROUTE}/${address}`);
+        }
         closeMenu?.();
       }}
       iconName={IconName.ScanBarcode}

ui/pages/multichain-accounts/account-details/account-type-utils.test.ts

@@ -0,0 +1,130 @@
+import { InternalAccount } from '@metamask/keyring-internal-api';
+import {
+  MOCK_ACCOUNT_BIP122_P2WPKH,
+  MOCK_ACCOUNT_EOA,
+  MOCK_ACCOUNT_ERC4337,
+  MOCK_ACCOUNT_HARDWARE,
+  MOCK_ACCOUNT_INSTITUTIONAL,
+  MOCK_ACCOUNT_PRIVATE_KEY,
+  MOCK_ACCOUNT_SOLANA_MAINNET,
+} from '../../../../test/data/mock-accounts';
+import {
+  getAccountTypeCategory,
+  isEVMAccount,
+  isSolanaAccount,
+  isHardwareAccount,
+  isPrivateKeyAccount,
+  isInstitutionalEVMAccount,
+  isBitcoinAccount,
+} from './account-type-utils';
+
+describe('Account Type Utils', () => {
+  describe('getAccountTypeCategory', () => {
+    it('should return "evm" for EOA accounts', () => {
+      expect(getAccountTypeCategory(MOCK_ACCOUNT_EOA)).toBe('evm');
+    });
+
+    it('should return "evm" for ERC-4337 accounts', () => {
+      expect(getAccountTypeCategory(MOCK_ACCOUNT_ERC4337)).toBe('evm');
+    });
+
+    it('should return "solana" for Solana accounts', () => {
+      expect(getAccountTypeCategory(MOCK_ACCOUNT_SOLANA_MAINNET)).toBe(
+        'solana',
+      );
+    });
+
+    it('should return "unknown" for null/undefined accounts', () => {
+      expect(getAccountTypeCategory(null as unknown as InternalAccount)).toBe(
+        'unknown',
+      );
+      expect(
+        getAccountTypeCategory(undefined as unknown as InternalAccount),
+      ).toBe('unknown');
+    });
+  });
+
+  describe('isEVMAccount', () => {
+    it('should return true for EOA accounts', () => {
+      expect(isEVMAccount(MOCK_ACCOUNT_EOA)).toBe(true);
+    });
+
+    it('should return true for ERC-4337 accounts', () => {
+      expect(isEVMAccount(MOCK_ACCOUNT_ERC4337)).toBe(true);
+    });
+
+    it('should return false for Solana accounts', () => {
+      expect(isEVMAccount(MOCK_ACCOUNT_SOLANA_MAINNET)).toBe(false);
+    });
+  });
+
+  describe('isSolanaAccount', () => {
+    it('should return true for Solana accounts', () => {
+      expect(isSolanaAccount(MOCK_ACCOUNT_SOLANA_MAINNET)).toBe(true);
+    });
+
+    it('should return false for EOA accounts', () => {
+      expect(isSolanaAccount(MOCK_ACCOUNT_EOA)).toBe(false);
+    });
+
+    it('should return false for ERC-4337 accounts', () => {
+      expect(isSolanaAccount(MOCK_ACCOUNT_ERC4337)).toBe(false);
+    });
+  });
+
+  describe('isHardwareAccount', () => {
+    it('should return true for hardware accounts', () => {
+      expect(isHardwareAccount(MOCK_ACCOUNT_HARDWARE)).toBe(true);
+    });
+
+    it('should return false for EOA accounts', () => {
+      expect(isHardwareAccount(MOCK_ACCOUNT_EOA)).toBe(false);
+    });
+
+    it('should return false for Solana accounts', () => {
+      expect(isHardwareAccount(MOCK_ACCOUNT_SOLANA_MAINNET)).toBe(false);
+    });
+  });
+
+  describe('isPrivateKeyAccount', () => {
+    it('should return true for private key accounts', () => {
+      expect(isPrivateKeyAccount(MOCK_ACCOUNT_PRIVATE_KEY)).toBe(true);
+    });
+
+    it('should return false for EOA accounts', () => {
+      expect(isPrivateKeyAccount(MOCK_ACCOUNT_EOA)).toBe(false);
+    });
+
+    it('should return false for Solana accounts', () => {
+      expect(isPrivateKeyAccount(MOCK_ACCOUNT_SOLANA_MAINNET)).toBe(false);
+    });
+  });
+
+  describe('isInstitutionalEVMAccount', () => {
+    it('should return true for institutional EVM accounts', () => {
+      expect(isInstitutionalEVMAccount(MOCK_ACCOUNT_INSTITUTIONAL)).toBe(true);
+    });
+
+    it('should return false for regular EOA accounts', () => {
+      expect(isInstitutionalEVMAccount(MOCK_ACCOUNT_EOA)).toBe(false);
+    });
+
+    it('should return false for regular ERC-4337 accounts', () => {
+      expect(isInstitutionalEVMAccount(MOCK_ACCOUNT_ERC4337)).toBe(false);
+    });
+  });
+
+  describe('isBitcoinAccount', () => {
+    it('should return true for Bitcoin accounts', () => {
+      expect(isBitcoinAccount(MOCK_ACCOUNT_BIP122_P2WPKH)).toBe(true);
+    });
+
+    it('should return false for EOA accounts', () => {
+      expect(isBitcoinAccount(MOCK_ACCOUNT_EOA)).toBe(false);
+    });
+
+    it('should return false for Solana accounts', () => {
+      expect(isBitcoinAccount(MOCK_ACCOUNT_SOLANA_MAINNET)).toBe(false);
+    });
+  });
+});