fix: review feedbacks

src/components/Modals/QrCode/QrCode.tsx

@@ -1,7 +1,7 @@
 import type { AccountId, AssetId } from '@shapeshiftoss/caip'
 import { MemoryRouter } from 'react-router-dom'
 
-import { sendRoutes } from '../Send/SendCommon'
+import { initialEntries } from '../Send/SendCommon'
 import { Form } from './Form'
 
 import { Dialog } from '@/components/Modal/components/Dialog'
@@ -17,7 +17,7 @@ export const QrCodeModal = ({ assetId, accountId }: QrCodeModalProps) => {
 
   return (
     <Dialog isOpen={isOpen} onClose={close} isFullScreen>
-      <MemoryRouter initialEntries={sendRoutes}>
+      <MemoryRouter initialEntries={initialEntries}>
         <Form assetId={assetId} accountId={accountId} />
       </MemoryRouter>
     </Dialog>

src/components/Modals/Send/AddressBook/AddressBook.tsx

@@ -1,101 +1,25 @@
-import {
-  Avatar,
-  Box,
-  Button,
-  HStack,
-  Icon,
-  Text as CText,
-  useDisclosure,
-  VStack,
-} from '@chakra-ui/react'
+import { Box, HStack, Icon, Text as CText, useDisclosure, VStack } from '@chakra-ui/react'
 import type { ChainId } from '@shapeshiftoss/caip'
+import { toAccountId } from '@shapeshiftoss/caip'
 import { useCallback, useMemo, useState } from 'react'
 import { useFormContext, useWatch } from 'react-hook-form'
-import { FaRegAddressBook, FaTrash } from 'react-icons/fa'
+import { FaRegAddressBook } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
 
 import { SendFormFields } from '../SendCommon'
 
-import { MiddleEllipsis } from '@/components/MiddleEllipsis/MiddleEllipsis'
+import { AddressBookEntryButton } from '@/components/Modals/Send/AddressBook/AddressBookEntryButton'
 import { ConfirmDelete } from '@/components/Modals/Send/AddressBook/ConfirmDelete'
 import { Text } from '@/components/Text'
 import { makeBlockiesUrl } from '@/lib/blockies/makeBlockiesUrl'
-import type { AddressBookEntry } from '@/state/slices/addressBookSlice/addressBookSlice'
 import { addressBookSlice } from '@/state/slices/addressBookSlice/addressBookSlice'
 import {
-  selectAddressBookEntriesByChainNamespace,
+  selectAddressBookEntriesByChainId,
   selectAddressBookEntriesBySearchQuery,
 } from '@/state/slices/addressBookSlice/selectors'
+import type { AddressBookEntry } from '@/state/slices/addressBookSlice/types'
 import { useAppDispatch, useAppSelector } from '@/state/store'
 
-type AddressBookEntryButtonProps = {
-  entry: AddressBookEntry
-  onSelect: (address: string) => void
-  onDelete: (id: string) => void
-}
-
-const addressSx = {
-  _hover: {
-    background: 'background.surface.raised.base',
-  },
-}
-
-const deleteButtonSx = {
-  svg: {
-    width: '12px',
-    height: '12px',
-  },
-}
-
-const AddressBookEntryButton = ({ entry, onSelect, onDelete }: AddressBookEntryButtonProps) => {
-  const avatarUrl = useMemo(() => makeBlockiesUrl(entry.address), [entry.address])
-  const handleClick = useCallback(() => onSelect(entry.address), [onSelect, entry.address])
-  const handleDelete = useCallback(
-    (id: string) => (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation()
-      e.preventDefault()
-      onDelete(id)
-    },
-    [onDelete],
-  )
-
-  return (
-    <Box
-      cursor='pointer'
-      alignItems='center'
-      justifyContent='space-between'
-      display='flex'
-      overflow='hidden'
-      width='full'
-    >
-      <HStack
-        px={2}
-        py={1}
-        borderRadius='lg'
-        spacing={3}
-        align='center'
-        flex={1}
-        minWidth={0}
-        onClick={handleClick}
-        transition='all 0.2s'
-        sx={addressSx}
-        me={2}
-      >
-        <Avatar src={avatarUrl} size='sm' flexShrink={0} />
-        <VStack align='start' spacing={0} flex={1} minWidth={0}>
-          <CText fontSize='md' fontWeight='semibold' color='text.primary' lineHeight={1}>
-            {entry.name}
-          </CText>
-          <MiddleEllipsis fontSize='sm' color='text.subtle' noOfLines={1} value={entry.address} />
-        </VStack>
-      </HStack>
-      <Button size='sm' onClick={handleDelete(entry.id)} sx={deleteButtonSx} flexShrink={0}>
-        <Icon as={FaTrash} boxSize={4} />
-      </Button>
-    </Box>
-  )
-}
-
 type AddressBookProps = {
   chainId?: ChainId
   onSelectEntry: (address: string) => void
@@ -120,35 +44,37 @@ export const AddressBook = ({
   } = useFormContext()
   const { isOpen, onClose, onOpen } = useDisclosure()
   const [selectedDeleteEntry, setSelectedDeleteEntry] = useState<AddressBookEntry | null>(null)
-  const addressBookEntries = useAppSelector(state =>
-    selectAddressBookEntriesByChainNamespace(state, chainId ?? ''),
-  )
 
-  const address = useWatch({
-    control,
-    name: SendFormFields.To,
-  }) as string
   const addressError = errors[SendFormFields.Input]?.message ?? null
 
   const input = useWatch({
     control,
     name: SendFormFields.Input,
   }) as string
 
+  const addressBookEntriesFilter = useMemo(() => ({ chainId }), [chainId])
+  const addressBookEntries = useAppSelector(state =>
+    selectAddressBookEntriesByChainId(state, addressBookEntriesFilter),
+  )
+
   const selectedEntry = useMemo(() => {
-    return addressBookEntries.find(entry => entry.address === input)
+    if (!input) return undefined
+    return addressBookEntries?.find(entry => entry.isExternal && entry.address === input)
   }, [addressBookEntries, input])
 
+  // Only run expensive search when we have input
+  const addressBookSearchEntriesFilter = useMemo(
+    () => ({ chainId, searchQuery: input }),
+    [chainId, input],
+  )
+
   const addressBookSearchEntries = useAppSelector(state =>
-    selectAddressBookEntriesBySearchQuery(state, {
-      chainId: chainId ?? '',
-      searchQuery: input ?? '',
-    }),
+    selectAddressBookEntriesBySearchQuery(state, addressBookSearchEntriesFilter),
   )
 
   const handleDelete = useCallback(
-    (id: string) => () => {
-      dispatch(addressBookSlice.actions.deleteAddress(id))
+    (entry: AddressBookEntry) => () => {
+      dispatch(addressBookSlice.actions.deleteAddress(entry))
     },
     [dispatch],
   )
@@ -162,10 +88,41 @@ export const AddressBook = ({
   )
 
   const entries = useMemo(() => {
-    if (selectedEntry || (address && !addressError)) return addressBookEntries
+    if (selectedEntry || !input || (input && !addressError)) return addressBookEntries
 
     return addressBookSearchEntries
-  }, [selectedEntry, addressBookEntries, addressBookSearchEntries, address, addressError])
+  }, [selectedEntry, addressBookEntries, addressBookSearchEntries, input, addressError])
+
+  const entryAvatars = useMemo(() => {
+    return entries?.reduce(
+      (acc, entry) => {
+        acc[entry.address] = makeBlockiesUrl(entry.address)
+        return acc
+      },
+      {} as Record<string, string>,
+    )
+  }, [entries])
+
+  const addressBookButtons = useMemo(() => {
+    if (entries?.length === 0)
+      return <Text translation={emptyMessage} size='xs' mx={2} color='text.subtle' />
+
+    return entries?.map(entry => {
+      const entryKey = toAccountId({ chainId: entry.chainId, account: entry.address })
+
+      return (
+        <AddressBookEntryButton
+          key={entryKey}
+          avatarUrl={entryAvatars?.[entry.address] ?? ''}
+          label={entry.label}
+          address={entry.address}
+          entryKey={entryKey}
+          onSelect={onSelectEntry}
+          onDelete={handleDeleteConfirm(entry)}
+        />
+      )
+    })
+  }, [entries, entryAvatars, handleDeleteConfirm, onSelectEntry, emptyMessage])
 
   return (
     <Box>
@@ -184,26 +141,15 @@ export const AddressBook = ({
         px={2}
       >
         <VStack spacing={3} align='stretch'>
-          {entries.length === 0 ? (
-            <Text translation={emptyMessage} size='xs' mx={2} color='text.subtle' />
-          ) : (
-            entries.map(entry => (
-              <AddressBookEntryButton
-                key={entry.id}
-                entry={entry}
-                onSelect={onSelectEntry}
-                onDelete={handleDeleteConfirm(entry)}
-              />
-            ))
-          )}
+          {addressBookButtons}
         </VStack>
       </Box>
       {selectedDeleteEntry && (
         <ConfirmDelete
           isOpen={isOpen}
-          onDelete={handleDelete(selectedDeleteEntry.id)}
+          onDelete={handleDelete(selectedDeleteEntry)}
           onClose={onClose}
-          entryName={selectedDeleteEntry.name}
+          entryName={selectedDeleteEntry.label}
         />
       )}
     </Box>

src/components/Modals/Send/AddressBook/AddressBookEntryButton.tsx

@@ -0,0 +1,85 @@
+import { Avatar, Box, Button, HStack, Icon, Text as CText, VStack } from '@chakra-ui/react'
+import { memo, useCallback } from 'react'
+import { FaTrash } from 'react-icons/fa'
+
+import { MiddleEllipsis } from '@/components/MiddleEllipsis/MiddleEllipsis'
+
+type AddressBookEntryButtonProps = {
+  avatarUrl: string
+  label: string
+  address: string
+  entryKey: string
+  onSelect: (address: string) => void
+  onDelete: (key: string) => void
+}
+
+const addressSx = {
+  _hover: {
+    background: 'background.surface.raised.base',
+  },
+}
+
+const deleteButtonSx = {
+  svg: {
+    width: '12px',
+    height: '12px',
+  },
+}
+
+const AddressBookEntryButtonComponent = ({
+  avatarUrl,
+  label,
+  address,
+  entryKey,
+  onSelect,
+  onDelete,
+}: AddressBookEntryButtonProps) => {
+  const handleClick = useCallback(() => onSelect(address), [onSelect, address])
+  const handleDelete = useCallback(
+    (key: string) => (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation()
+      e.preventDefault()
+      onDelete(key)
+    },
+    [onDelete],
+  )
+
+  return (
+    <Box
+      cursor='pointer'
+      alignItems='center'
+      justifyContent='space-between'
+      display='flex'
+      overflow='hidden'
+      width='full'
+    >
+      <HStack
+        px={2}
+        py={1}
+        borderRadius='lg'
+        spacing={3}
+        align='center'
+        flex={1}
+        minWidth={0}
+        onClick={handleClick}
+        transition='all 0.2s'
+        sx={addressSx}
+        me={2}
+      >
+        <Avatar src={avatarUrl} size='sm' flexShrink={0} />
+        <VStack align='start' spacing={0} flex={1} minWidth={0}>
+          <CText fontSize='md' fontWeight='semibold' color='text.primary' lineHeight={1}>
+            {label}
+          </CText>
+          <MiddleEllipsis fontSize='sm' color='text.subtle' noOfLines={1} value={address} />
+        </VStack>
+      </HStack>
+      <Button size='sm' onClick={handleDelete(entryKey)} sx={deleteButtonSx} flexShrink={0}>
+        <Icon as={FaTrash} boxSize={4} />
+      </Button>
+    </Box>
+  )
+}
+
+// Memoize to prevent re-renders when props haven't changed
+export const AddressBookEntryButton = memo(AddressBookEntryButtonComponent)