Fix: remove experimental address emoji

src/components/balances/AssetsTable/index.test.tsx

@@ -109,7 +109,6 @@ describe('AssetsTable', () => {
             onChainSigning: false,
           },
           transactionExecution: true,
-          addressEmojis: false,
         },
       },
     })
@@ -216,7 +215,6 @@ describe('AssetsTable', () => {
             onChainSigning: false,
           },
           transactionExecution: true,
-          addressEmojis: false,
         },
       },
     })
@@ -319,7 +317,6 @@ describe('AssetsTable', () => {
             onChainSigning: false,
           },
           transactionExecution: true,
-          addressEmojis: false,
         },
       },
     })
@@ -419,7 +416,6 @@ describe('AssetsTable', () => {
             onChainSigning: false,
           },
           transactionExecution: true,
-          addressEmojis: false,
         },
       },
     })

src/components/balances/HiddenTokenButton/index.test.tsx

@@ -87,7 +87,6 @@ describe('HiddenTokenToggle', () => {
             onChainSigning: false,
           },
           transactionExecution: true,
-          addressEmojis: false,
         },
       },
     })

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

@@ -9,14 +9,12 @@ import ExplorerButton, { type ExplorerButtonProps } from '../../ExplorerButton'
 import { shortenAddress } from '@/utils/formatters'
 import ImageFallback from '../../ImageFallback'
 import css from './styles.module.css'
-import { Emoji } from '../../AddressEmoji'
 
 export type EthHashInfoProps = {
   address: string
   chainId?: string
   name?: string | null
   showAvatar?: boolean
-  showEmoji?: boolean
   showCopyButton?: boolean
   prefix?: string
   showPrefix?: boolean
@@ -39,7 +37,6 @@ const SrcEthHashInfo = ({
   showPrefix,
   shortAddress = true,
   showAvatar = true,
-  showEmoji,
   avatarSize,
   name,
   showCopyButton,
@@ -65,7 +62,6 @@ const SrcEthHashInfo = ({
           ) : (
             identicon
           )}
-          {showEmoji && <Emoji address={address} size={avatarSize} />}
         </div>
       )}
 

src/components/common/EthHashInfo/index.tsx

@@ -6,8 +6,6 @@ import { selectSettings } from '@/store/settingsSlice'
 import { selectChainById } from '@/store/chainsSlice'
 import { getBlockExplorerLink } from '@/utils/chains'
 import SrcEthHashInfo, { type EthHashInfoProps } from './SrcEthHashInfo'
-import { selectAddedSafes } from '@/store/addedSafesSlice'
-import useSafeAddress from '@/hooks/useSafeAddress'
 
 const EthHashInfo = ({
   showName = true,
@@ -16,18 +14,10 @@ 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 ? addressBook[props.address] || props.name : undefined
-  const showEmoji =
-    settings.addressEmojis &&
-    props.showAvatar !== false &&
-    !props.customAvatar &&
-    avatarSize >= 20 &&
-    (safeAddress === props.address || props.address in addedSafes)
 
   return (
     <SrcEthHashInfo
@@ -39,7 +29,6 @@ const EthHashInfo = ({
       customAvatar={props.customAvatar}
       ExplorerButtonProps={{ title: link?.title || '', href: link?.href || '' }}
       avatarSize={avatarSize}
-      showEmoji={showEmoji}
     >
       {props.children}
     </SrcEthHashInfo>

src/components/common/SafeIcon/index.tsx

@@ -3,7 +3,6 @@ import { Box } from '@mui/material'
 
 import css from './styles.module.css'
 import Identicon, { type IdenticonProps } from '../Identicon'
-import AddressEmoji from '../AddressEmoji'
 
 interface ThresholdProps {
   threshold: number | string
@@ -25,7 +24,6 @@ const SafeIcon = ({ address, threshold, owners, size }: SafeIconProps): ReactEle
   <div className={css.container}>
     {threshold && owners ? <Threshold threshold={threshold} owners={owners} /> : null}
     <Identicon address={address} size={size} />
-    <AddressEmoji address={address} size={size} />
   </div>
 )
 

src/pages/settings/appearance.tsx

@@ -4,31 +4,23 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 
 import { useAppDispatch, useAppSelector } from '@/store'
-import {
-  selectSettings,
-  setCopyShortName,
-  setDarkMode,
-  setShowShortName,
-  setAddressEmojis,
-} from '@/store/settingsSlice'
+import { selectSettings, setCopyShortName, setDarkMode, setShowShortName } from '@/store/settingsSlice'
 import SettingsHeader from '@/components/settings/SettingsHeader'
 import { trackEvent, SETTINGS_EVENTS } from '@/services/analytics'
 import { useDarkMode } from '@/hooks/useDarkMode'
 import ExternalLink from '@/components/common/ExternalLink'
-import EmojiPreview from '@/components/settings/EmojiPreview'
 
 const Appearance: NextPage = () => {
   const dispatch = useAppDispatch()
   const settings = useAppSelector(selectSettings)
   const isDarkMode = useDarkMode()
 
   const handleToggle = (
-    action: typeof setCopyShortName | typeof setDarkMode | typeof setShowShortName | typeof setAddressEmojis,
+    action: typeof setCopyShortName | typeof setDarkMode | typeof setShowShortName,
     event:
       | typeof SETTINGS_EVENTS.APPEARANCE.PREPEND_PREFIXES
       | typeof SETTINGS_EVENTS.APPEARANCE.COPY_PREFIXES
-      | typeof SETTINGS_EVENTS.APPEARANCE.DARK_MODE
-      | typeof SETTINGS_EVENTS.APPEARANCE.ADDRESS_EMOJIS,
+      | typeof SETTINGS_EVENTS.APPEARANCE.DARK_MODE,
   ) => {
     return (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
       dispatch(action(checked))
@@ -105,27 +97,6 @@ const Appearance: NextPage = () => {
               />
             </Grid>
           </Grid>
-
-          <Grid container spacing={3} mt={2}>
-            <Grid item lg={4} xs={12}>
-              <Typography variant="h4" fontWeight="bold">
-                Experimental
-              </Typography>
-            </Grid>
-
-            <Grid item xs>
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={settings.addressEmojis}
-                    onChange={handleToggle(setAddressEmojis, SETTINGS_EVENTS.APPEARANCE.ADDRESS_EMOJIS)}
-                  />
-                }
-                label="Address emoji"
-              />
-              <EmojiPreview />
-            </Grid>
-          </Grid>
         </Paper>
       </main>
     </>

src/services/analytics/events/settings.ts

@@ -48,10 +48,6 @@ export const SETTINGS_EVENTS = {
       action: 'Dark mode',
       category: SETTINGS_CATEGORY,
     },
-    ADDRESS_EMOJIS: {
-      action: 'Toggle address emojis',
-      category: SETTINGS_CATEGORY,
-    },
   },
   MODULES: {
     REMOVE_MODULE: {

src/store/settingsSlice.ts

@@ -42,7 +42,6 @@ export type SettingsState = {
     onChainSigning: boolean
   }
   transactionExecution: boolean
-  addressEmojis: boolean
 }
 
 export const initialState: SettingsState = {
@@ -69,7 +68,6 @@ export const initialState: SettingsState = {
     onChainSigning: false,
   },
   transactionExecution: true,
-  addressEmojis: false,
 }
 
 export const settingsSlice = createSlice({
@@ -94,9 +92,6 @@ export const settingsSlice = createSlice({
     setDarkMode: (state, { payload }: PayloadAction<SettingsState['theme']['darkMode']>) => {
       state.theme.darkMode = payload
     },
-    setAddressEmojis: (state, { payload }: PayloadAction<SettingsState['addressEmojis']>) => {
-      state.addressEmojis = payload
-    },
     setHiddenTokensForChain: (state, { payload }: PayloadAction<{ chainId: string; assets: string[] }>) => {
       const { chainId, assets } = payload
       state.hiddenTokens[chainId] = assets
@@ -132,7 +127,6 @@ export const {
   setCopyShortName,
   setQrShortName,
   setDarkMode,
-  setAddressEmojis,
   setHiddenTokensForChain,
   setTokenList,
   setRpc,