feat(snaps): Add useDisplayName hook

ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx

@@ -13,6 +13,7 @@ import {
 import { shortenAddress } from '../../../../helpers/utils/util';
 import { toChecksumHexAddress } from '../../../../../shared/modules/hexstring-utils';
 import { SnapUIAvatar } from '../snap-ui-avatar';
+import { useDisplayName } from '../../../../hooks/snaps/useDisplayName';
 
 export type SnapUIAddressProps = {
   // The address must be a CAIP-10 string.
@@ -40,12 +41,15 @@ export const SnapUIAddress: React.FunctionComponent<SnapUIAddressProps> = ({
     [caipIdentifier],
   );
 
-  // For EVM addresses, we make sure they are checksummed.
-  const transformedAddress =
-    parsed.chain.namespace === 'eip155'
-      ? toChecksumHexAddress(parsed.address)
-      : parsed.address;
-  const shortenedAddress = shortenAddress(transformedAddress);
+  const displayName = useDisplayName(parsed);
+
+  const value =
+    displayName ??
+    shortenAddress(
+      parsed.chain.namespace === 'eip155'
+        ? toChecksumHexAddress(parsed.address)
+        : parsed.address,
+    );
 
   return (
     <Box
@@ -55,7 +59,7 @@ export const SnapUIAddress: React.FunctionComponent<SnapUIAddressProps> = ({
       gap={2}
     >
       <SnapUIAvatar address={caipIdentifier} size={avatarSize} />
-      <Text color={TextColor.inherit}>{shortenedAddress}</Text>
+      <Text color={TextColor.inherit}>{value}</Text>
     </Box>
   );
 };

ui/hooks/snaps/useDisplayName.ts

@@ -0,0 +1,54 @@
+import { NamespaceId } from '@metamask/snaps-utils';
+import { CaipChainId, KnownCaipNamespace } from '@metamask/utils';
+import { useSelector } from 'react-redux';
+import {
+  getMemoizedAccountName,
+  getAddressBookEntryByNetwork,
+  AddressBookMetaMaskState,
+  AccountsMetaMaskState,
+} from '../../selectors/snaps';
+import { toChecksumHexAddress } from '../../../shared/modules/hexstring-utils';
+import { decimalToHex } from '../../../shared/modules/conversion.utils';
+
+export type UseDisplayNameParams = {
+  chain: {
+    namespace: NamespaceId;
+    reference: string;
+  };
+  chainId: CaipChainId;
+  address: string;
+};
+
+/**
+ * Get the display name for an address.
+ * This will look for an account name in the state, and if not found, it will look for an address book entry.
+ *
+ * @param params - The parsed CAIP-10 ID.
+ * @returns The display name for the address.
+ */
+export const useDisplayName = (
+  params: UseDisplayNameParams,
+): string | undefined => {
+  const {
+    address,
+    chain: { namespace, reference },
+  } = params;
+
+  const isEip155 = namespace === KnownCaipNamespace.Eip155;
+
+  const parsedAddress = isEip155 ? toChecksumHexAddress(address) : address;
+
+  const accountName = useSelector((state: AccountsMetaMaskState) =>
+    getMemoizedAccountName(state, parsedAddress),
+  );
+
+  const addressBookEntry = useSelector((state: AddressBookMetaMaskState) =>
+    getAddressBookEntryByNetwork(
+      state,
+      parsedAddress,
+      `0x${decimalToHex(isEip155 ? reference : `0`)}`,
+    ),
+  );
+
+  return accountName || (isEip155 && addressBookEntry?.name) || undefined;
+};

ui/selectors/snaps/accounts.ts

@@ -0,0 +1,38 @@
+import { createSelector } from 'reselect';
+import { AccountsControllerState } from '@metamask/accounts-controller';
+import { getAccountName, getInternalAccounts } from '../selectors';
+import { createDeepEqualSelector } from '../util';
+
+/**
+ * The Metamask state for the accounts controller.
+ */
+export type AccountsMetaMaskState = {
+  metamask: AccountsControllerState;
+};
+
+/**
+ * Get the account name for an address.
+ *
+ * @param _state -  The Metamask state for the accounts controller.
+ * @param address - The address to get the display name for.
+ * @returns The account name for the address.
+ */
+export const getAccountNameFromState = createSelector(
+  [
+    getInternalAccounts,
+    (_state: AccountsMetaMaskState, address: string) => address,
+  ],
+  getAccountName,
+);
+
+/**
+ * Get the memoized account name for an address.
+ *
+ * @param state - The Metamask state for the accounts controller.
+ * @param address - The address to get the display name for.
+ * @returns The account name for the address.
+ */
+export const getMemoizedAccountName = createDeepEqualSelector(
+  [getAccountNameFromState],
+  (accountName: string) => accountName,
+);

ui/selectors/snaps/address-book.ts

@@ -0,0 +1,80 @@
+import { AddressBookController } from '@metamask/address-book-controller';
+import { createDeepEqualSelector } from '../util';
+import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils';
+
+/**
+ * The Metamask state for the address book controller.
+ */
+export type AddressBookMetaMaskState = {
+  metamask: {
+    addressBook: AddressBookController['state']['addressBook'];
+  };
+};
+
+/**
+ * Get the full address book.
+ *
+ * @param state - The Metamask state for the address book controller.
+ * @returns The full address book.
+ */
+export const getFullAddressBook = (state: AddressBookMetaMaskState) =>
+  state.metamask.addressBook;
+
+/**
+ * Get the memoized full address book.
+ *
+ * @param state - The Metamask state for the address book controller.
+ * @returns The full address book.
+ */
+export const getMemoizedFullAddressBook = createDeepEqualSelector(
+  [getFullAddressBook],
+  (addressBook) => addressBook,
+);
+
+/**
+ * Get the address book for a network.
+ *
+ * @param _state - The Metamask state for the address book controller.
+ * @param chainId - The chain ID to get the address book for.
+ * @returns The address book for the network.
+ */
+export const getAddressBookByNetwork = createDeepEqualSelector(
+  [
+    getMemoizedFullAddressBook,
+    (_state: AddressBookMetaMaskState, chainId: `0x${string}`) => chainId,
+  ],
+  (addressBook, chainId) => {
+    if (!addressBook[chainId]) {
+      return [];
+    }
+    return Object.values(addressBook[chainId]);
+  },
+);
+
+/* eslint-disable jsdoc/require-param */
+/* eslint-disable jsdoc/check-param-names */
+/**
+ * Get an address book entry for an address on a network.
+ *
+ * @param state - The Metamask state for the address book controller.
+ * @param address - The address to get the entry for.
+ * @param chainId - The chain ID to get the entry for.
+ * @returns The address book entry for the address on the network.
+ */
+/* eslint-enable jsdoc/require-param */
+/* eslint-enable jsdoc/check-param-names */
+export const getAddressBookEntryByNetwork = createDeepEqualSelector(
+  [
+    (
+      state: AddressBookMetaMaskState,
+      _address: string,
+      chainId: `0x${string}`,
+    ) => getAddressBookByNetwork(state, chainId),
+    (_state, address) => address,
+  ],
+  (addressBook, address) => {
+    return addressBook.find((contact) =>
+      isEqualCaseInsensitive(contact.address, address),
+    );
+  },
+);

ui/selectors/snaps/index.ts

@@ -0,0 +1,2 @@
+export * from './address-book';
+export * from './accounts';