Fix: extend the emoji set for eth addresses

src/components/common/AddressEmoji/AddressEmoji.test.tsx

@@ -0,0 +1,19 @@
+import { ethereumAddressToEmoji } from '.'
+
+describe('ethereumAddressToEmoji', () => {
+  it('should return the correct emoji', () => {
+    const emoji = ethereumAddressToEmoji('0x0000000000000000000000000000000000000000')
+    expect(emoji).toBe('😀')
+  })
+
+  it('should return an emoji for the entire range of addresses', () => {
+    const hexChars = 4
+    for (let i = 0; i < 16 ** hexChars; i++) {
+      const address = `0x${i.toString(16).padStart(4, '0')}`
+      const emoji = ethereumAddressToEmoji(address)
+      //console.log(address, emoji)
+      expect(emoji).toBeDefined()
+      expect(emoji).not.toBe('')
+    }
+  })
+})

src/components/common/EthHashInfo/AddressEmoji.tsx → src/components/common/AddressEmoji/index.tsx

@@ -5,10 +5,13 @@ import css from './styles.module.css'
 
 // Define the Unicode ranges for animal, fruit, and vegetable emojis
 const unicodeRanges = [
-  [0x1f400, 0x1f43f],
-  [0x1f980, 0x1f994],
-  [0x1f345, 0x1f35f],
-  [0x1f950, 0x1f96b],
+  [0x1f600, 0x1f60e],
+  [0x1f638, 0x1f63d],
+  [0x1f680, 0x1f683],
+  [0x2614, 0x2615],
+  [0x1f330, 0x1f393],
+  [0x1f3a0, 0x1f3ca],
+  [0x1f400, 0x1f42a],
 ]
 
 // Calculate the total number of emojis
@@ -17,7 +20,7 @@ for (let range of unicodeRanges) {
   totalEmojis += range[1] - range[0] + 1
 }
 
-function ethereumAddressToEmoji(address: string): string {
+export function ethereumAddressToEmoji(address: string): string {
   // Convert the Ethereum address from hexadecimal to decimal
   const decimal = BigInt(address.slice(0, 6))
 

src/components/common/ConnectWallet/AccountCenter.tsx

@@ -13,7 +13,7 @@ import ChainSwitcher from '../ChainSwitcher'
 import useAddressBook from '@/hooks/useAddressBook'
 import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import WalletInfo, { UNKNOWN_CHAIN_NAME } from '../WalletInfo'
-import AddressEmoji from '../EthHashInfo/AddressEmoji'
+import AddressEmoji from '../AddressEmoji'
 
 const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)

src/components/common/EthHashInfo/index.tsx

@@ -1,12 +1,12 @@
 import { type ReactElement } from 'react'
+import { Box } from '@mui/material'
 import useAddressBook from '@/hooks/useAddressBook'
 import useChainId from '@/hooks/useChainId'
 import { useAppSelector } from '@/store'
 import { selectSettings } from '@/store/settingsSlice'
 import { selectChainById } from '@/store/chainsSlice'
 import { getBlockExplorerLink } from '@/utils/chains'
-import css from './styles.module.css'
-import { Emoji } from './AddressEmoji'
+import { Emoji } from '@/components/common/AddressEmoji'
 import SrcEthHashInfo, { type EthHashInfoProps } from './SrcEthHashInfo'
 
 const EthHashInfo = ({
@@ -23,7 +23,7 @@ const EthHashInfo = ({
   const showEmoji = settings.addressEmojis && props.showAvatar !== false && !props.customAvatar && avatarSize >= 20
 
   return (
-    <div className={css.container}>
+    <Box position="relative">
       <SrcEthHashInfo
         prefix={chain?.shortName}
         showPrefix={settings.shortName.show}
@@ -37,7 +37,7 @@ const EthHashInfo = ({
         {props.children}
       </SrcEthHashInfo>
       {showEmoji && <Emoji address={props.address} size={avatarSize} />}
-    </div>
+    </Box>
   )
 }
 

src/components/common/SafeIcon/index.tsx

@@ -3,7 +3,7 @@ import { Box } from '@mui/material'
 
 import css from './styles.module.css'
 import Identicon, { type IdenticonProps } from '../Identicon'
-import AddressEmoji from '../EthHashInfo/AddressEmoji'
+import AddressEmoji from '../AddressEmoji'
 
 interface ThresholdProps {
   threshold: number | string