diff --git a/src/components/balances/AssetsTable/index.test.tsx b/src/components/balances/AssetsTable/index.test.tsx index d22f7c1e9a..759db503d8 100644 --- a/src/components/balances/AssetsTable/index.test.tsx +++ b/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, }, }, }) diff --git a/src/components/balances/HiddenTokenButton/index.test.tsx b/src/components/balances/HiddenTokenButton/index.test.tsx index b2a907e5be..2df2e63fb0 100644 --- a/src/components/balances/HiddenTokenButton/index.test.tsx +++ b/src/components/balances/HiddenTokenButton/index.test.tsx @@ -87,7 +87,6 @@ describe('HiddenTokenToggle', () => { onChainSigning: false, }, transactionExecution: true, - addressEmojis: false, }, }, }) diff --git a/src/components/common/AddressEmoji/AddressEmoji.test.tsx b/src/components/common/AddressEmoji/AddressEmoji.test.tsx deleted file mode 100644 index e31f70e053..0000000000 --- a/src/components/common/AddressEmoji/AddressEmoji.test.tsx +++ /dev/null @@ -1,18 +0,0 @@ -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', () => { - for (let i = 0; i < 1000; 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('') - } - }) -}) diff --git a/src/components/common/AddressEmoji/index.tsx b/src/components/common/AddressEmoji/index.tsx deleted file mode 100644 index 2ea0bee19d..0000000000 --- a/src/components/common/AddressEmoji/index.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { type ReactElement, memo } from 'react' -import { useAppSelector } from '@/store' -import { selectSettings } from '@/store/settingsSlice' -import css from './styles.module.css' - -// Define the Unicode ranges for animal, fruit, and vegetable emojis -const unicodeRanges = [ - [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 -let totalEmojis = 0 -for (let range of unicodeRanges) { - totalEmojis += range[1] - range[0] + 1 -} - -export function ethereumAddressToEmoji(address: string): string { - // Convert the Ethereum address from hexadecimal to decimal - const decimal = BigInt(address.slice(0, 6)) - - // Calculate the index by taking the modulo of the decimal by the number of emojis - let index = Number(decimal % BigInt(totalEmojis)) - - // Find the corresponding emoji - for (let range of unicodeRanges) { - if (index < range[1] - range[0] + 1) { - return String.fromCodePoint(range[0] + index) - } else { - index -= range[1] - range[0] + 1 - } - } - - return '' -} - -type EmojiProps = { - address: string - size?: number -} - -export const Emoji = memo(function Emoji({ address, size = 40 }: EmojiProps): ReactElement { - return ( -
- {ethereumAddressToEmoji(address)} -
- ) -}) - -const AddressEmoji = (props: EmojiProps): ReactElement | null => { - const { addressEmojis } = useAppSelector(selectSettings) - return addressEmojis ? : null -} - -export default AddressEmoji diff --git a/src/components/common/AddressEmoji/styles.module.css b/src/components/common/AddressEmoji/styles.module.css deleted file mode 100644 index 6044213631..0000000000 --- a/src/components/common/AddressEmoji/styles.module.css +++ /dev/null @@ -1,19 +0,0 @@ -.container { - position: relative; -} - -.emojiWrapper { - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - position: absolute; - top: 0; - left: 0; - border-radius: 100%; - border: 2px solid var(--color-secondary-light); - color: #000; - 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); -} diff --git a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx index 34041dbdfb..732ab2db21 100644 --- a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx +++ b/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 && } )} diff --git a/src/components/common/EthHashInfo/index.tsx b/src/components/common/EthHashInfo/index.tsx index a9215df96e..7d6821f2ba 100644 --- a/src/components/common/EthHashInfo/index.tsx +++ b/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 ( {props.children} diff --git a/src/components/common/SafeIcon/index.tsx b/src/components/common/SafeIcon/index.tsx index febcf64f03..4ecfdddbbb 100644 --- a/src/components/common/SafeIcon/index.tsx +++ b/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
{threshold && owners ? : null} -
) diff --git a/src/components/settings/EmojiPreview/index.tsx b/src/components/settings/EmojiPreview/index.tsx deleted file mode 100644 index f01cfda5a8..0000000000 --- a/src/components/settings/EmojiPreview/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Alert, Box, Chip, SvgIcon, Typography } from '@mui/material' -import { ZERO_ADDRESS } from '@safe-global/safe-core-sdk/dist/src/utils/constants' -import InfoIcon from '@/public/images/notifications/info.svg' -import SafeIcon from '@/components/common/SafeIcon' - -const EmojiPreview = () => ( - <> - - - }> - - - Enable emojis for all Ethereum addresses and your Safe Accounts. - - - - {ZERO_ADDRESS} - - - -) - -export default EmojiPreview diff --git a/src/pages/settings/appearance.tsx b/src/pages/settings/appearance.tsx index 6b5bfab4d1..cc43ad6743 100644 --- a/src/pages/settings/appearance.tsx +++ b/src/pages/settings/appearance.tsx @@ -4,18 +4,11 @@ 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() @@ -23,12 +16,11 @@ const Appearance: NextPage = () => { 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, checked: boolean) => { dispatch(action(checked)) @@ -105,27 +97,6 @@ const Appearance: NextPage = () => { /> - - - - - Experimental - - - - - - } - label="Address emoji" - /> - - - diff --git a/src/services/analytics/events/settings.ts b/src/services/analytics/events/settings.ts index e55d417281..485faea317 100644 --- a/src/services/analytics/events/settings.ts +++ b/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: { diff --git a/src/store/settingsSlice.ts b/src/store/settingsSlice.ts index d31b752622..08939043be 100644 --- a/src/store/settingsSlice.ts +++ b/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) => { state.theme.darkMode = payload }, - setAddressEmojis: (state, { payload }: PayloadAction) => { - 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,