From 40280badf62a5c0e3524f28316c9d0182c7451f6 Mon Sep 17 00:00:00 2001 From: katspaugh Date: Tue, 1 Aug 2023 09:25:50 +0200 Subject: [PATCH] Fix build --- .../balances/AssetsTable/index.test.tsx | 4 ++++ .../balances/HiddenTokenButton/index.test.tsx | 1 + .../common/EthHashInfo/AddressEmoji.tsx | 23 ++++++++++++------- src/components/common/EthHashInfo/index.tsx | 2 +- .../common/EthHashInfo/styles.module.css | 2 +- src/pages/settings/appearance.tsx | 6 ++--- src/store/settingsSlice.ts | 2 +- 7 files changed, 26 insertions(+), 14 deletions(-) diff --git a/src/components/balances/AssetsTable/index.test.tsx b/src/components/balances/AssetsTable/index.test.tsx index 759db503d8..d22f7c1e9a 100644 --- a/src/components/balances/AssetsTable/index.test.tsx +++ b/src/components/balances/AssetsTable/index.test.tsx @@ -109,6 +109,7 @@ describe('AssetsTable', () => { onChainSigning: false, }, transactionExecution: true, + addressEmojis: false, }, }, }) @@ -215,6 +216,7 @@ describe('AssetsTable', () => { onChainSigning: false, }, transactionExecution: true, + addressEmojis: false, }, }, }) @@ -317,6 +319,7 @@ describe('AssetsTable', () => { onChainSigning: false, }, transactionExecution: true, + addressEmojis: false, }, }, }) @@ -416,6 +419,7 @@ 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 2df2e63fb0..b2a907e5be 100644 --- a/src/components/balances/HiddenTokenButton/index.test.tsx +++ b/src/components/balances/HiddenTokenButton/index.test.tsx @@ -87,6 +87,7 @@ describe('HiddenTokenToggle', () => { onChainSigning: false, }, transactionExecution: true, + addressEmojis: false, }, }, }) diff --git a/src/components/common/EthHashInfo/AddressEmoji.tsx b/src/components/common/EthHashInfo/AddressEmoji.tsx index 7338c341fe..c38857127b 100644 --- a/src/components/common/EthHashInfo/AddressEmoji.tsx +++ b/src/components/common/EthHashInfo/AddressEmoji.tsx @@ -1,9 +1,9 @@ +import { type ReactElement, memo } from 'react' import { useAppSelector } from '@/store' import { selectSettings } from '@/store/settingsSlice' -import { type ReactElement, useMemo } from 'react' import css from './styles.module.css' -export function ethereumAddressToEmoji(address: string): string { +function ethereumAddressToEmoji(address: string): string { // Convert the Ethereum address from hexadecimal to decimal const decimal = BigInt(address.slice(0, 6)) @@ -36,15 +36,22 @@ export function ethereumAddressToEmoji(address: string): string { return '' } -const AddressEmoji = ({ address, size = 40 }: { address: string; size?: number }): ReactElement | null => { - const { addressEmojis } = useAppSelector(selectSettings) - const emoji = useMemo(() => (addressEmojis ? ethereumAddressToEmoji(address) : ''), [address, addressEmojis]) +type EmojiProps = { + address: string + size?: number +} - return emoji ? ( +const Emoji = memo(function Emoji({ address, size = 40 }: EmojiProps): ReactElement { + return (
- {emoji} + {ethereumAddressToEmoji(address)}
- ) : null + ) +}) + +const AddressEmoji = (props: EmojiProps): ReactElement | null => { + const { addressEmojis } = useAppSelector(selectSettings) + return addressEmojis ? : null } export default AddressEmoji diff --git a/src/components/common/EthHashInfo/index.tsx b/src/components/common/EthHashInfo/index.tsx index 5f16c1dc91..5e3d52773e 100644 --- a/src/components/common/EthHashInfo/index.tsx +++ b/src/components/common/EthHashInfo/index.tsx @@ -21,7 +21,7 @@ const PrefixedEthHashInfo = ({ const addressBook = useAddressBook() const link = chain ? getBlockExplorerLink(chain, props.address) : undefined const name = showName ? props.name || addressBook[props.address] : undefined - const showEmoji = props.showAvatar !== false && !props.customAvatar + const showEmoji = settings.addressEmojis && props.showAvatar !== false && !props.customAvatar return (
diff --git a/src/components/common/EthHashInfo/styles.module.css b/src/components/common/EthHashInfo/styles.module.css index 58f440df39..76c85e409f 100644 --- a/src/components/common/EthHashInfo/styles.module.css +++ b/src/components/common/EthHashInfo/styles.module.css @@ -14,7 +14,7 @@ border-radius: 100%; border: 2px solid var(--color-secondary-light); color: #000; - background-color: rgba(255, 255, 255, 0.6); + background-color: rgba(255, 255, 255, 0.5); 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/pages/settings/appearance.tsx b/src/pages/settings/appearance.tsx index 6b9b17cd6f..602c32de28 100644 --- a/src/pages/settings/appearance.tsx +++ b/src/pages/settings/appearance.tsx @@ -15,7 +15,7 @@ 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 PrefixedEthHashInfo from '@/components/common/EthHashInfo' +import SafeIcon from '@/components/common/SafeIcon' const Appearance: NextPage = () => { const dispatch = useAppDispatch() @@ -123,7 +123,7 @@ const Appearance: NextPage = () => { onChange={handleToggle(setAddressEmojis, SETTINGS_EVENTS.APPEARANCE.ADDRESS_EMOJIS)} /> } - label="Enable address emojis" + label="Enable emojis for Ethereum addresses" /> @@ -131,7 +131,7 @@ const Appearance: NextPage = () => { Preview: - + diff --git a/src/store/settingsSlice.ts b/src/store/settingsSlice.ts index 7af6729bae..691e8d96f3 100644 --- a/src/store/settingsSlice.ts +++ b/src/store/settingsSlice.ts @@ -42,7 +42,7 @@ export type SettingsState = { onChainSigning: boolean } transactionExecution: boolean - addressEmojis?: boolean + addressEmojis: boolean } export const initialState: SettingsState = {