refactor: mf-4946 get network icon inside NetworkIcon (#10613)

* refactor: mf-4946 get network icon inside NetworkIcon * refactor: remove commented code --------- Co-authored-by: guanbinrui <52657989+guanbinrui@users.noreply.github.com>
DimensionDev · Aug 25, 2023 · 53ab129 · 53ab129
1 parent 59e057b
commit 53ab129
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 47 deletions.
diff --git a/packages/mask/src/extension/popups/components/NetworkSelector/index.tsx b/packages/mask/src/extension/popups/components/NetworkSelector/index.tsx
@@ -92,9 +92,7 @@ export const NetworkSelectorUI = memo<NetworkSelectorUIProps>(({ currentNetwork,
                             pluginID={NetworkPluginID.PLUGIN_EVM}
                             chainId={network.chainId}
                             size={20}
-                            color={network.color}
-                            name={network.name}
-                            preferName={network.isCustomized}
+                            network={network}
                         />
                     )}
 
@@ -119,9 +117,7 @@ export const NetworkSelectorUI = memo<NetworkSelectorUIProps>(({ currentNetwork,
                             pluginID={NetworkPluginID.PLUGIN_EVM}
                             chainId={currentNetwork.chainId}
                             size={20}
-                            color={currentNetwork.color}
-                            name={currentNetwork.name}
-                            preferName={currentNetwork?.isCustomized}
+                            network={currentNetwork}
                         />
                     )}
                     <Typography className={classes.title}>{currentNetwork?.name}</Typography>

diff --git a/packages/mask/src/extension/popups/components/TokenPicker/TokenItem.tsx b/packages/mask/src/extension/popups/components/TokenPicker/TokenItem.tsx
@@ -154,9 +154,8 @@ export const TokenItem = memo(function TokenItem({
                         className={classes.badgeIcon}
                         pluginID={NetworkPluginID.PLUGIN_EVM}
                         chainId={network.chainId}
-                        name={network.name}
                         size={16}
-                        preferName={network.isCustomized}
+                        network={network}
                     />
                 </Box>
             </ListItemIcon>

diff --git a/packages/mask/src/extension/popups/modals/ChooseNetworkModal/index.tsx b/packages/mask/src/extension/popups/modals/ChooseNetworkModal/index.tsx
@@ -102,9 +102,7 @@ const NetworkItem = memo(function NetworkItem({ network, currentNetworkId }: Net
                         pluginID={NetworkPluginID.PLUGIN_EVM}
                         chainId={network.chainId}
                         size={24}
-                        color={network.color}
-                        name={network.name}
-                        preferName={network.isCustomized}
+                        network={network}
                     />
                 )}
             </div>

diff --git a/packages/mask/src/extension/popups/pages/Wallet/Receive/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/Receive/index.tsx
@@ -152,8 +152,7 @@ export default memo(function Receive() {
                                 pluginID={NetworkPluginID.PLUGIN_EVM}
                                 chainId={currentNetwork.chainId}
                                 size={16}
-                                name={currentNetwork.name}
-                                preferName={currentNetwork.isCustomized}
+                                network={currentNetwork}
                             />
                         </div>
                     )}

diff --git a/packages/mask/src/extension/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx b/packages/mask/src/extension/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx
@@ -7,7 +7,7 @@ import {
     ChainContextProvider,
     useChainContext,
     useFungibleToken,
-    useNetworks,
+    useNetwork,
     useWallet,
     useWeb3Connection,
 } from '@masknet/web3-hooks-base'
@@ -135,8 +135,7 @@ export const FungibleTokenSection = memo(function FungibleTokenSection() {
         },
         [setParams],
     )
-    const networks = useNetworks()
-    const network = networks.find((x) => x.chainId === chainId)
+    const network = useNetwork(NetworkPluginID.PLUGIN_EVM, chainId)
     const { data: token, isLoading } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, address, undefined, { chainId })
 
     const [amount, setAmount] = useState('')
@@ -261,8 +260,7 @@ export const FungibleTokenSection = memo(function FungibleTokenSection() {
                         chainId={network?.chainId as ChainId}
                         className={classes.badgeIcon}
                         size={16}
-                        icon={network?.iconUrl}
-                        preferName={network?.isCustomized}
+                        network={network}
                     />
                 </Box>
                 <Box mr="auto" ml={2}>

diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx
@@ -350,8 +350,7 @@ export const RecentActivityItem = memo<RecentActivityItemProps>(function RecentA
                     className={classes.badgeIcon}
                     chainId={transaction.chainId}
                     size={16}
-                    icon={network?.iconUrl}
-                    preferName={network?.isCustomized}
+                    network={network}
                 />
             </Box>
             <ListItemText

diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx
@@ -132,8 +132,7 @@ const AssetItem = memo(function AssetItem({ asset, onItemClick, ...rest }: Asset
                     className={classes.badgeIcon}
                     chainId={asset.chainId}
                     size={16}
-                    icon={network?.iconUrl}
-                    preferName={network?.isCustomized}
+                    network={network}
                 />
             </Box>
             <ListItemText

diff --git a/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx b/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx
@@ -4,15 +4,15 @@ import { formatBalance, type FungibleToken } from '@masknet/web3-shared-base'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { TokenIcon } from '../TokenIcon/index.js'
 import { Icons } from '@masknet/icons'
-import { useFungibleTokenBalance, useNetworkDescriptor, useWeb3Others } from '@masknet/web3-hooks-base'
+import { useFungibleTokenBalance, useNetwork, useNetworkContext, useWeb3Others } from '@masknet/web3-hooks-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { makeStyles, LoadingBase, ActionButton } from '@masknet/theme'
 import { useSharedI18N } from '../../../locales/index.js'
 import { TokenListMode } from './type.js'
 import { SettingSwitch } from '../SettingSwitch/index.js'
 import { useTokenBlocked, useTokenTrusted } from './useTokenBlocked.js'
 import { FormattedBalance } from '../../wallet/index.js'
-import { DotLoading, ImageIcon } from '../index.js'
+import { DotLoading, NetworkIcon } from '../index.js'
 import { useAsyncFn } from 'react-use'
 
 const useStyles = makeStyles()((theme) => ({
@@ -124,7 +124,8 @@ export const getFungibleTokenItem = <T extends NetworkPluginID>(
         const isBlocked = useTokenBlocked(address)
         const isTrust = useTokenTrusted(address, token.chainId)
 
-        const networkDescriptor = useNetworkDescriptor(undefined, chainId)
+        const { pluginID } = useNetworkContext<T>()
+        const network = useNetwork(pluginID, chainId)
 
         const { source, selected } = useMemo(() => {
             return {
@@ -229,8 +230,13 @@ export const getFungibleTokenItem = <T extends NetworkPluginID>(
                                 name={name}
                                 logoURL={logoURL}
                             />
-                            {isHiddenChainIcon || !networkDescriptor?.icon ? null : (
-                                <ImageIcon className={classes.badgeIcon} size={16} icon={networkDescriptor?.icon} />
+                            {isHiddenChainIcon || !network?.iconUrl ? null : (
+                                <NetworkIcon
+                                    pluginID={pluginID}
+                                    chainId={chainId}
+                                    className={classes.badgeIcon}
+                                    size={16}
+                                />
                             )}
                         </Box>
                     </ListItemIcon>

diff --git a/packages/shared/src/UI/components/NetworkIcon/index.tsx b/packages/shared/src/UI/components/NetworkIcon/index.tsx
@@ -1,29 +1,34 @@
 import type { Web3Helper } from '@masknet/web3-helpers'
-import { useNetworks, useWeb3Others } from '@masknet/web3-hooks-base'
+import { useNetwork } from '@masknet/web3-hooks-base'
 import type { NetworkPluginID } from '@masknet/shared-base'
 import { ImageIcon, type ImageIconProps } from '../ImageIcon/index.js'
 import { ChainIcon } from '../index.js'
 import { memo } from 'react'
+import type { ReasonableNetwork } from '@masknet/web3-shared-base'
 
 export interface NetworkIconProps extends ImageIconProps {
     pluginID: NetworkPluginID
     chainId: Web3Helper.ChainIdAll
-    name?: string
-    /** Don't show image but name instead */
-    preferName?: boolean
+    /**
+     * It's allow to add custom network with duplicate chainIds. Network could
+     * be specified with this prop.
+     */
+    network?: ReasonableNetwork<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll, Web3Helper.NetworkTypeAll>
 }
 
 export const NetworkIcon = memo(function NetworkIcon(props: NetworkIconProps) {
-    const { pluginID, chainId, name, icon, preferName, ...rest } = props
-    const Others = useWeb3Others(pluginID)
-    const networkType = Others.chainResolver.networkType(chainId)
-    const networkIcon = networkType ? Others.networkResolver.networkIcon(networkType) : undefined
-    const networks = useNetworks(pluginID)
-    const iconUrl = networkIcon || icon
+    const { pluginID, chainId, icon, network: expectedNetwork, ...rest } = props
+    const fallbackNetwork = useNetwork(pluginID, chainId)
+    const network = expectedNetwork || fallbackNetwork
+    const iconUrl = network?.iconUrl || icon
 
-    if (iconUrl && !preferName) return <ImageIcon size={20} {...rest} icon={iconUrl} />
-    const network = networks.find((x) => x.chainId === chainId)
+    if (iconUrl && !network?.isCustomized) return <ImageIcon size={20} {...rest} icon={iconUrl} />
     return (
-        <ChainIcon size={rest?.size || 20} name={name || network?.name} color={rest.color} className={rest.className} />
+        <ChainIcon
+            size={rest?.size || 20}
+            name={network?.name}
+            color={rest.color || network?.color}
+            className={rest.className}
+        />
     )
 })
diff --git a/packages/shared/src/UI/components/SelectNetworkSidebar/index.tsx b/packages/shared/src/UI/components/SelectNetworkSidebar/index.tsx
@@ -84,13 +84,7 @@ export const SelectNetworkSidebar = memo(function SelectNetworkSidebar({
                     className={classes.networkButton}
                     disableRipple
                     onClick={() => onChainChange?.(x.chainId)}>
-                    <NetworkIcon
-                        pluginID={pluginID}
-                        chainId={x.chainId}
-                        name={x.name}
-                        size={24}
-                        preferName={x.isCustomized}
-                    />
+                    <NetworkIcon pluginID={pluginID} chainId={x.chainId} size={24} network={x} />
                     {chainId === x.chainId ? <Icons.BorderedSuccess className={classes.indicator} size={12} /> : null}
                 </Button>
             ))}