Fix: limit emoji avatars to owned Safes (#2376)

* Fix: limit emoji avatars to owned Safes

* Fix mobile header

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

@@ -3,12 +3,11 @@ import { ethereumAddressToEmoji } from '.'
 describe('ethereumAddressToEmoji', () => {
   it('should return the correct emoji', () => {
     const emoji = ethereumAddressToEmoji('0x0000000000000000000000000000000000000000')
-    expect(emoji).toBe('😀')
+    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++) {
+  it('should return an emoji for the entire range', () => {
+    for (let i = 0; i < 1000; i++) {
       const address = `0x${i.toString(16).padStart(4, '0')}`
       const emoji = ethereumAddressToEmoji(address)
       //console.log(address, emoji)

src/components/common/AddressEmoji/index.tsx

@@ -5,13 +5,15 @@ import css from './styles.module.css'
 
 // Define the Unicode ranges for animal, fruit, and vegetable emojis
 const unicodeRanges = [
-  [0x1f600, 0x1f60e],
-  [0x1f638, 0x1f63d],
-  [0x1f680, 0x1f683],
-  [0x2614, 0x2615],
-  [0x1f330, 0x1f393],
-  [0x1f3a0, 0x1f3ca],
-  [0x1f400, 0x1f42a],
+  [0x1f331, 0x1f333], // Plant
+  [0x1f334, 0x1f335], // Plant
+  [0x1f340, 0x1f341], // Plant
+  [0x1f34f, 0x1f37f], // Food
+  [0x1f950, 0x1f96b], // Food
+  [0x1f400, 0x1f43e], // Animal
+  [0x1f981, 0x1f984], // Animal
+  [0x1f3b0, 0x1f3bd], // Sports
+  [0x1f3bc, 0x1f3b7], // Music
 ]
 
 // Calculate the total number of emojis

src/components/common/AddressEmoji/styles.module.css

@@ -13,7 +13,7 @@
   border-radius: 100%;
   border: 2px solid var(--color-secondary-light);
   color: #000;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.6);
   text-shadow: -1px 0 0 var(--color-secondary-light), 0 -1px 0 var(--color-secondary-light),
     1px 0 0 var(--color-secondary-light), 0 1px 0 var(--color-secondary-light);
 }

src/components/common/EthHashInfo/index.tsx

@@ -8,6 +8,8 @@ import { selectChainById } from '@/store/chainsSlice'
 import { getBlockExplorerLink } from '@/utils/chains'
 import { Emoji } from '@/components/common/AddressEmoji'
 import SrcEthHashInfo, { type EthHashInfoProps } from './SrcEthHashInfo'
+import { selectAddedSafes } from '@/store/addedSafesSlice'
+import useSafeAddress from '@/hooks/useSafeAddress'
 
 const EthHashInfo = ({
   showName = true,
@@ -16,11 +18,18 @@ const EthHashInfo = ({
 }: EthHashInfoProps & { showName?: boolean }): ReactElement => {
   const settings = useAppSelector(selectSettings)
   const currentChainId = useChainId()
+  const safeAddress = useSafeAddress()
+  const addedSafes = useAppSelector((state) => selectAddedSafes(state, currentChainId)) || {}
   const chain = useAppSelector((state) => selectChainById(state, props.chainId || currentChainId))
   const addressBook = useAddressBook()
   const link = chain ? getBlockExplorerLink(chain, props.address) : undefined
   const name = showName ? props.name || addressBook[props.address] : undefined
-  const showEmoji = settings.addressEmojis && props.showAvatar !== false && !props.customAvatar && avatarSize >= 20
+  const showEmoji =
+    settings.addressEmojis &&
+    props.showAvatar !== false &&
+    !props.customAvatar &&
+    avatarSize >= 20 &&
+    (safeAddress === props.address || props.address in addedSafes)
 
   return (
     <Box position="relative">

src/components/common/WalletInfo/styles.module.css

@@ -28,4 +28,8 @@
     width: 22px;
     height: auto;
   }
+
+  .walletName {
+    display: none;
+  }
 }

src/store/addedSafesSlice.ts

@@ -133,7 +133,7 @@ export const selectTotalAdded = (state: RootState): number => {
 export const selectAddedSafes = createSelector(
   [selectAllAddedSafes, (_: RootState, chainId: string) => chainId],
   (allAddedSafes, chainId): AddedSafesOnChain | undefined => {
-    return allAddedSafes[chainId]
+    return allAddedSafes?.[chainId]
   },
 )