feat: contacts

src/core/state/contacts/index.ts

@@ -10,6 +10,7 @@ export interface Contact {
 
 export interface ContactsStore {
   contacts: { [address: Address]: Contact };
+  selectedContactAddress: Address | null;
   getContact: ({
     address,
   }: {
@@ -18,11 +19,13 @@ export interface ContactsStore {
   isContact: ({ address }: { address: Address }) => boolean;
   saveContact: ({ contact }: { contact: Contact }) => void;
   deleteContact: ({ address }: { address: Address }) => void;
+  setSelectedContactAddress: ({ address }: { address: Address | null }) => void;
 }
 
 export const contactsStore = createStore<ContactsStore>(
   (set, get) => ({
     contacts: {},
+    selectedContactAddress: null,
     getContact: ({ address }) => {
       const newContacts = get().contacts;
       return address ? newContacts[address] : undefined;
@@ -43,6 +46,9 @@ export const contactsStore = createStore<ContactsStore>(
       delete contacts[address];
       set({ contacts: { ...contacts } });
     },
+    setSelectedContactAddress: ({ address }) => {
+      set({ selectedContactAddress: address });
+    },
   }),
   {
     persist: {

src/entries/popup/components/CommandK/CommandKList.tsx

@@ -15,13 +15,11 @@ import {
   WalletRow,
 } from './CommandRows';
 import {
-  ENSOrAddressSearchItem,
   NFTSearchItem,
   SearchItem,
   SearchItemType,
   ShortcutSearchItem,
   TokenSearchItem,
-  WalletSearchItem,
 } from './SearchItems';
 import { CommandKPage, PAGES } from './pageConfig';
 import { timingConfig } from './references';
@@ -200,15 +198,12 @@ export const CommandKList = React.forwardRef<
                   );
                 } else if (
                   command.type === SearchItemType.ENSOrAddressResult ||
-                  command.type === SearchItemType.Wallet
+                  command.type === SearchItemType.Wallet ||
+                  command.type === SearchItemType.Contact
                 ) {
                   row = (
                     <WalletRow
-                      command={
-                        command.type === SearchItemType.Wallet
-                          ? (command as WalletSearchItem)
-                          : (command as ENSOrAddressSearchItem)
-                      }
+                      command={command}
                       handleExecuteCommand={handleExecuteCommand}
                       key={command.id}
                       selected={isSelected}

src/entries/popup/components/CommandK/CommandRows.tsx

@@ -31,6 +31,7 @@ import {
   commandKRowSelectedStyleDark,
 } from './CommandKStyles.css';
 import {
+  ContactSearchItem,
   ENSOrAddressSearchItem,
   NFTSearchItem,
   SearchItem,
@@ -212,10 +213,11 @@ export const ShortcutRow = ({
     command.address && command.id === 'addAsWatchedWallet';
   const isSwitchToWalletRow =
     command.address && command.id === 'switchToWallet';
+  const isContactWalletRow = command.address && command.id === 'contactWallet';
   const isViewTokenRow = command.asset && command.id === 'viewToken';
 
   const LeftComponent = React.useMemo(() => {
-    if (isAddAsWatchedWalletRow || isSwitchToWalletRow) {
+    if (isAddAsWatchedWalletRow || isSwitchToWalletRow || isContactWalletRow) {
       return (
         <WalletAvatar
           addressOrName={command.address || ''}
@@ -255,6 +257,7 @@ export const ShortcutRow = ({
     command.textIcon,
     isAddAsWatchedWalletRow,
     isSwitchToWalletRow,
+    isContactWalletRow,
     isViewTokenRow,
   ]);
 
@@ -364,7 +367,7 @@ export const TokenRow = ({
 };
 
 type WalletRowProps = {
-  command: WalletSearchItem | ENSOrAddressSearchItem;
+  command: WalletSearchItem | ENSOrAddressSearchItem | ContactSearchItem;
   handleExecuteCommand: (command: SearchItem, e?: KeyboardEvent) => void;
   selected: boolean;
 };
@@ -379,12 +382,16 @@ export const WalletRow = ({
   }, [command.address]);
 
   const isWalletSearchItem = command.type === SearchItemType.Wallet;
+  const isContactSearchItem = command.type === SearchItemType.Contact;
   const hardwareWalletType = isWalletSearchItem && command.hardwareWalletType;
   const walletType = isWalletSearchItem && command.walletType;
+  const walletLabel = isContactSearchItem && command.label;
 
   const description = React.useMemo(() => {
-    if (!isWalletSearchItem) {
+    if (!isWalletSearchItem && !isContactSearchItem) {
       return undefined;
+    } else if (walletLabel) {
+      return i18n.t(`command_k.labels.${walletLabel}`);
     } else if (walletType === KeychainType.ReadOnlyKeychain) {
       return i18n.t('wallet_switcher.watching');
     } else if (
@@ -394,7 +401,13 @@ export const WalletRow = ({
       return i18n.t(`wallet_switcher.${hardwareWalletType.toLowerCase()}`);
     }
     return undefined;
-  }, [hardwareWalletType, isWalletSearchItem, walletType]);
+  }, [
+    isWalletSearchItem,
+    isContactSearchItem,
+    walletLabel,
+    walletType,
+    hardwareWalletType,
+  ]);
 
   const Avatar = React.useMemo(
     () => (

src/entries/popup/components/CommandK/SearchItems.ts

@@ -12,6 +12,7 @@ export enum SearchItemType {
   Shortcut,
   Token,
   Wallet,
+  Contact,
 }
 
 export interface BaseSearchItem {
@@ -76,12 +77,22 @@ export interface WalletSearchItem extends BaseSearchItem {
   truncatedName?: string;
   type: SearchItemType.Wallet;
   walletName?: string;
-  walletType: string;
+  walletType?: string;
+}
+
+export interface ContactSearchItem extends BaseSearchItem {
+  address: Address;
+  ensName?: string | null;
+  truncatedName?: string;
+  walletName?: string;
+  type: SearchItemType.Contact;
+  label?: string;
 }
 
 export type SearchItem =
   | ENSOrAddressSearchItem
   | NFTSearchItem
   | ShortcutSearchItem
   | TokenSearchItem
-  | WalletSearchItem;
+  | WalletSearchItem
+  | ContactSearchItem;

src/entries/popup/components/CommandK/pageConfig.ts

@@ -37,6 +37,10 @@ export const PAGES: { [KEY: string]: Page } = {
     listTitle: i18n.t('command_k.pages.my_wallets.section_title'),
     searchPlaceholder: i18n.t('command_k.pages.my_wallets.search_placeholder'),
   },
+  MY_CONTACTS: {
+    listTitle: i18n.t('command_k.pages.my_contacts.section_title'),
+    searchPlaceholder: i18n.t('command_k.pages.my_contacts.search_placeholder'),
+  },
   NFT_TOKEN_DETAIL: {
     listTitle: (command: SearchItem) =>
       command.type === SearchItemType.NFT
@@ -67,6 +71,12 @@ export const PAGES: { [KEY: string]: Page } = {
       'command_k.pages.wallet_detail.search_placeholder',
     ),
   },
+  CONTACT_DETAIL: {
+    listTitle: (command: SearchItem) => command.name,
+    searchPlaceholder: i18n.t(
+      'command_k.pages.wallet_detail.search_placeholder',
+    ),
+  },
 };
 
 export type CommandKPage = (typeof PAGES)[keyof typeof PAGES];

src/entries/popup/components/CommandK/references.ts

@@ -5,6 +5,8 @@ export const actionLabels = {
   open: i18n.t('command_k.action_labels.open'),
   openInNewTab: i18n.t('command_k.action_labels.open_in_new_tab'),
   switchToWallet: i18n.t('command_k.action_labels.switch_to_wallet'),
+  sendToWallet: i18n.t('command_k.action_labels.send_to_wallet'),
+  addContact: i18n.t('command_k.action_labels.add_contact'),
   view: i18n.t('command_k.action_labels.view'),
 };