Fix build

safe-global · Aug 1, 2023 · 40280ba · 40280ba
1 parent fb0ed48
commit 40280ba
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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<string>(() => (addressEmojis ? ethereumAddressToEmoji(address) : ''), [address, addressEmojis])
+type EmojiProps = {
+  address: string
+  size?: number
+}
 
-  return emoji ? (
+const Emoji = memo(function Emoji({ address, size = 40 }: EmojiProps): ReactElement {
+  return (
     <div className={css.emojiWrapper} style={{ fontSize: `${size * 0.7}px`, width: `${size}px`, height: `${size}px` }}>
-      {emoji}
+      {ethereumAddressToEmoji(address)}
     </div>
-  ) : null
+  )
+})
+
+const AddressEmoji = (props: EmojiProps): ReactElement | null => {
+  const { addressEmojis } = useAppSelector(selectSettings)
+  return addressEmojis ? <Emoji {...props} /> : null
 }
 
 export default AddressEmoji
diff --git 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 (
     <div className={css.container}>

diff --git 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
@@ -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,15 +123,15 @@ const Appearance: NextPage = () => {
                         onChange={handleToggle(setAddressEmojis, SETTINGS_EVENTS.APPEARANCE.ADDRESS_EMOJIS)}
                       />
                     }
-                    label="Enable address emojis"
+                    label="Enable emojis for Ethereum addresses"
                   />
                 </Grid>
 
                 <Grid item>
                   <Typography color="border.main">Preview:</Typography>
                 </Grid>
                 <Grid item xs>
-                  <PrefixedEthHashInfo address="0x0000000000000000000000000000000000000000" />
+                  <SafeIcon address="0x220866b1a2219f40e72f5c628b65d54268ca3a9d" />
                 </Grid>
               </Grid>
             </Grid>

diff --git 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 = {