Feat: address book indicator (#3790)

src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx

@@ -2,7 +2,8 @@ import classnames from 'classnames'
 import type { ReactNode, ReactElement, SyntheticEvent } from 'react'
 import { isAddress } from 'ethers'
 import { useTheme } from '@mui/material/styles'
-import Box from '@mui/material/Box'
+import { Box, SvgIcon, Tooltip } from '@mui/material'
+import AddressBookIcon from '@/public/images/sidebar/address-book.svg'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import Identicon from '../../Identicon'
 import CopyAddressButton from '../../CopyAddressButton'
@@ -29,6 +30,7 @@ export type EthHashInfoProps = {
   children?: ReactNode
   trusted?: boolean
   ExplorerButtonProps?: ExplorerButtonProps
+  isAddressBookName?: boolean
 }
 
 const stopPropagation = (e: SyntheticEvent) => e.stopPropagation()
@@ -50,6 +52,7 @@ const SrcEthHashInfo = ({
   ExplorerButtonProps,
   children,
   trusted = true,
+  isAddressBookName = false,
 }: EthHashInfoProps): ReactElement => {
   const shouldPrefix = isAddress(address)
   const theme = useTheme()
@@ -81,8 +84,16 @@ const SrcEthHashInfo = ({
 
       <Box overflow="hidden" className={onlyName ? css.inline : undefined}>
         {name && (
-          <Box textOverflow="ellipsis" overflow="hidden" title={name}>
+          <Box textOverflow="ellipsis" overflow="hidden" title={name} display="flex" alignItems="center" gap={0.5}>
             {name}
+
+            {isAddressBookName && (
+              <Tooltip title="From your address book" placement="top">
+                <span style={{ lineHeight: 0 }}>
+                  <SvgIcon component={AddressBookIcon} inheritViewBox color="border" fontSize="small" />
+                </span>
+              </Tooltip>
+            )}
           </Box>
         )}
 

src/components/common/EthHashInfo/index.tsx

@@ -26,6 +26,7 @@ const EthHashInfo = ({
       copyPrefix={settings.shortName.copy}
       {...props}
       name={name}
+      isAddressBookName={!!addressBookName}
       customAvatar={props.customAvatar}
       ExplorerButtonProps={{ title: link?.title || '', href: link?.href || '' }}
       avatarSize={avatarSize}