fixup! fix: token icon

DimensionDev · Jan 13, 2025 · d0498bd · d0498bd
1 parent 4a03997
commit d0498bd
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 32 deletions.
diff --git a/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx b/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx
@@ -3,23 +3,19 @@ import { Icons } from '@masknet/icons'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { ActionButton, CheckBoxIndicator, LoadingBase, makeStyles } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
-import { useFungibleTokenBalance, useNetwork, useNetworkContext, useWeb3Utils } from '@masknet/web3-hooks-base'
+import { useFungibleTokenBalance, useNetworkContext, useWeb3Utils } from '@masknet/web3-hooks-base'
 import { formatBalance, type FungibleToken } from '@masknet/web3-shared-base'
 import { Box, Link, ListItem, ListItemIcon, ListItemText, Typography } from '@mui/material'
 import { memo, useMemo } from 'react'
 import { useAsyncFn } from 'react-use'
 import { FormattedBalance } from '../../wallet/index.js'
-import { DotLoading, NetworkIcon } from '../index.js'
+import { DotLoading } from '../index.js'
 import { SettingSwitch } from '../SettingSwitch/index.js'
 import { TokenIcon } from '../TokenIcon/index.js'
 import { TokenListMode } from './type.js'
 import { useTokenBlocked, useTokenTrusted } from './useTokenBlocked.js'
 
 const useStyles = makeStyles()((theme) => ({
-    icon: {
-        width: 36,
-        height: 36,
-    },
     list: {
         maxHeight: '100%',
         padding: theme.spacing(1.5),
@@ -79,13 +75,6 @@ const useStyles = makeStyles()((theme) => ({
     link: {
         color: theme.palette.maskColor.second,
     },
-    badgeIcon: {
-        position: 'absolute',
-        right: -6,
-        bottom: -4,
-        border: `1px solid ${theme.palette.common.white}`,
-        borderRadius: '50%',
-    },
     dotLoadingWrapper: {
         display: 'flex',
         flexDirection: 'column-reverse',
@@ -136,7 +125,6 @@ export const getFungibleTokenItem = <T extends NetworkPluginID>({
         const isTrust = useTokenTrusted(address, token.chainId)
 
         const { pluginID } = useNetworkContext<T>()
-        const network = useNetwork(pluginID, chainId)
 
         const source = useMemo(() => getSource(address), [getSource, address])
         const selected = useMemo(() => isSelected(address, chainId), [isSelected, address, chainId])
@@ -233,7 +221,6 @@ export const getFungibleTokenItem = <T extends NetworkPluginID>({
             <div style={style}>
                 <ListItem
                     title={address}
-                    key={address}
                     button
                     className={`${classes.list} dashboard token-list`}
                     onClick={() => {
@@ -247,20 +234,15 @@ export const getFungibleTokenItem = <T extends NetworkPluginID>({
                     <ListItemIcon>
                         <Box position="relative">
                             <TokenIcon
-                                className={classes.icon}
+                                pluginID={pluginID}
                                 chainId={chainId}
                                 address={address}
                                 name={name}
                                 logoURL={logoURL}
+                                disableBadge={isHiddenChainIcon}
+                                size={36}
+                                badgeSize={16}
                             />
-                            {isHiddenChainIcon || !network?.iconUrl ? null : (
-                                <NetworkIcon
-                                    pluginID={pluginID}
-                                    chainId={chainId}
-                                    className={classes.badgeIcon}
-                                    size={16}
-                                />
-                            )}
                         </Box>
                     </ListItemIcon>
                     <ListItemText classes={{ primary: classes.text }}>

diff --git a/packages/shared/src/UI/components/TokenIcon/index.tsx b/packages/shared/src/UI/components/TokenIcon/index.tsx
@@ -74,17 +74,18 @@ export const TokenIcon = memo(function TokenIcon(props: TokenIconProps) {
     const url = logoURL || token?.logoURL || data
     const icon = <Icon {...rest} logoURL={url} name={text} />
 
-    if (disableBadge) return icon
     return (
         <div className={cx(classes.container, className)} style={{ height: rest.size, width: rest.size }}>
             {icon}
-            <NetworkIcon
-                pluginID={pluginID}
-                className={classes.badgeIcon}
-                chainId={chainId}
-                size={badgeSize}
-                network={network}
-            />
+            {disableBadge ? null : (
+                <NetworkIcon
+                    pluginID={pluginID}
+                    className={classes.badgeIcon}
+                    chainId={chainId}
+                    size={badgeSize}
+                    network={network}
+                />
+            )}
         </div>
     )
 })
diff --git a/packages/shared/src/UI/components/TokenTransactionConfirmModal/index.tsx b/packages/shared/src/UI/components/TokenTransactionConfirmModal/index.tsx
@@ -65,6 +65,7 @@ const useStyles = makeStyles()((theme) => ({
     tokenIcon: {
         margin: 'auto',
         border: `1px ${theme.palette.maskColor.secondaryLine} solid`,
+        borderRadius: '50%',
     },
     icon: {
         filter: 'drop-shadow(0px 6px 12px rgba(61, 194, 51, 0.20))',
@@ -124,6 +125,7 @@ export function TokenTransactionConfirmModal({
                                 name={token.symbol ?? token.name}
                                 chainId={token.chainId}
                                 size={90}
+                                disableBadge
                             />
                         :   <Icons.FillSuccess className={classes.icon} size={90} />}
                         <Typography className={classes.congratulation} mt="19.5px">