From 37ea27394fbe766b31b4968fd7a9708b98a4407f Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 4 Jun 2024 15:43:22 +0200
Subject: [PATCH] Feat: address book indicator (#3790)

---
 .../common/EthHashInfo/SrcEthHashInfo/index.tsx   | 15 +++++++++++++--
 src/components/common/EthHashInfo/index.tsx       |  1 +
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
index 9decd746ad..902ad5c752 100644
--- a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
+++ b/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>
         )}
 
diff --git a/src/components/common/EthHashInfo/index.tsx b/src/components/common/EthHashInfo/index.tsx
index 69d9fe0dad..a141d2d71b 100644
--- a/src/components/common/EthHashInfo/index.tsx
+++ b/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}