fix: mf-4941 specify provider url (#10424)

* fix: mf-4941 specify provider url

* refactor: code style (#10432)

* fix: markdownlint

---------

Co-authored-by: guanbinrui <52657989+guanbinrui@users.noreply.github.com>
Co-authored-by: guanbinrui <guanbinrui@users.noreply.github.com>

packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx

@@ -1,9 +1,11 @@
+import { memo, useMemo } from 'react'
+import { useQuery } from '@tanstack/react-query'
 import { Icons } from '@masknet/icons'
-import { ImageIcon, ProgressiveText } from '@masknet/shared'
+import { ImageIcon, NetworkIcon, ProgressiveText } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { useEverSeen } from '@masknet/shared-base-ui'
 import { TextOverflowTooltip, makeStyles } from '@masknet/theme'
-import { useNativeToken, useNetworkDescriptors, useReverseAddress } from '@masknet/web3-hooks-base'
+import { useNativeToken, useNetwork, useNetworkDescriptors, useReverseAddress } from '@masknet/web3-hooks-base'
 import { ChainbaseHistory } from '@masknet/web3-providers'
 import { chainbase } from '@masknet/web3-providers/helpers'
 import { DebankTransactionDirection } from '@masknet/web3-providers/types'
@@ -23,8 +25,6 @@ import {
     type SchemaType,
 } from '@masknet/web3-shared-evm'
 import { Box, ListItem, ListItemText, Skeleton, Typography, alpha, type ListItemProps } from '@mui/material'
-import { useQuery } from '@tanstack/react-query'
-import { memo, useMemo } from 'react'
 import { formatTokenBalance, useI18N } from '../../../../../../utils/index.js'
 import { parseReceiverFromERC20TransferInput } from '../../utils.js'
 
@@ -275,9 +275,8 @@ export const RecentActivityItem = memo<RecentActivityItemProps>(function RecentA
     const candidate = transaction.candidates[transaction.indexId]
     const toAddress = candidate.to
     const { data: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, toAddress)
-    const descriptors = useNetworkDescriptors(NetworkPluginID.PLUGIN_EVM)
-    const networkDescriptor = descriptors.find((x) => x.chainId === transaction.chainId)
     const { data: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM, { chainId: transaction.chainId })
+    const network = useNetwork(NetworkPluginID.PLUGIN_EVM, transaction.chainId)
 
     const recipient = useMemo(() => {
         if (domain) return t('to_address', { address: formatDomainName(domain) })
@@ -289,7 +288,14 @@ export const RecentActivityItem = memo<RecentActivityItemProps>(function RecentA
             <Box className={classes.txIconContainer}>
                 {/* TODO specify cateType */}
                 <TransactionIcon cateType={'send'} />
-                <ImageIcon className={classes.badgeIcon} size={16} icon={networkDescriptor?.icon} />
+                <NetworkIcon
+                    pluginID={NetworkPluginID.PLUGIN_EVM}
+                    className={classes.badgeIcon}
+                    chainId={transaction.chainId}
+                    size={16}
+                    icon={network?.iconUrl}
+                    preferName={network?.isCustomized}
+                />
             </Box>
             <ListItemText
                 secondaryTypographyProps={{ component: 'div' }}

packages/shared/src/UI/modals/GasSettingModal/Prior1559GasSetting.tsx

@@ -93,7 +93,9 @@ export const Prior1559GasSetting = memo(
 
         const { data: nativeTokenPrice = 0 } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM)
 
-        const { data: gasOptions, isLoading: getGasOptionsLoading } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
+        const { data: gasOptions, isLoading: getGasOptionsLoading } = useGasOptions(NetworkPluginID.PLUGIN_EVM, {
+            chainId,
+        })
 
         const options = useMemo(
             () =>

packages/web3-hooks/base/src/useFungibleTokenBalance.ts

@@ -1,9 +1,9 @@
+import { noop } from 'lodash-es'
+import { useEffect } from 'react'
+import { useQuery } from '@tanstack/react-query'
 import type { NetworkPluginID } from '@masknet/shared-base'
 import type { ConnectionOptions } from '@masknet/web3-providers/types'
 import { isSameAddress } from '@masknet/web3-shared-base'
-import { useQuery } from '@tanstack/react-query'
-import { noop } from 'lodash-es'
-import { useEffect } from 'react'
 import { useChainContext } from './useContext.js'
 import { useWeb3Connection } from './useWeb3Connection.js'
 import { useWeb3State } from './useWeb3State.js'
@@ -27,7 +27,7 @@ export function useFungibleTokenBalance<T extends NetworkPluginID = NetworkPlugi
         queryKey: ['fungible-token', 'balance', pluginID, account, address, options],
         queryFn: async () => {
             if (!address) return '0'
-            return Web3.getFungibleTokenBalance(address, undefined)
+            return Web3.getFungibleTokenBalance(address, undefined, options)
         },
     })
 

packages/web3-hooks/base/src/useGasOptions.ts

@@ -12,6 +12,6 @@ export function useGasOptions<T extends NetworkPluginID = NetworkPluginID>(plugi
 
     return useQuery(['get-gas-options', pluginID, chainId, options], async () => {
         if (!Others.isValidChainId(chainId)) return
-        return Hub.getGasOptions(chainId)
+        return Hub.getGasOptions(chainId, options)
     })
 }

packages/web3-hooks/base/src/useNativeTokenPrice.ts

@@ -13,6 +13,9 @@ export function useNativeTokenPrice<T extends NetworkPluginID = NetworkPluginID>
     return useQuery({
         enabled: !!nativeTokenAddress,
         queryKey: ['native-token', 'price', pluginID, chainId, nativeTokenAddress, options],
-        queryFn: async () => Hub.getFungibleTokenPrice(chainId, nativeTokenAddress!),
+        queryFn: async () =>
+            Hub.getFungibleTokenPrice(chainId, nativeTokenAddress!, {
+                chainId,
+            }),
     })
 }

packages/web3-hooks/base/src/useNetwork.ts

@@ -1,15 +1,20 @@
 import { useMemo } from 'react'
 import { useSubscription } from 'use-subscription'
+import type { Web3Helper } from '@masknet/web3-helpers'
 import { EMPTY_STRING, type NetworkPluginID } from '@masknet/shared-base'
 import { useWeb3State } from './useWeb3State.js'
 import { useNetworks } from './useNetworks.js'
 
-export function useNetwork<T extends NetworkPluginID = NetworkPluginID>(pluginID?: T) {
+export function useNetwork<T extends NetworkPluginID = NetworkPluginID>(
+    pluginID?: T,
+    chainId?: Web3Helper.Definition[T]['ChainId'],
+) {
     const { Network } = useWeb3State(pluginID)
     const networks = useNetworks(pluginID)
     const networkID = useSubscription(Network?.networkID ?? EMPTY_STRING)
 
     return useMemo(() => {
+        if (chainId) return networks.find((x) => x.chainId === chainId)
         return networks.find((x) => x.ID === networkID)
-    }, [networks, networkID])
+    }, [chainId, networkID, networks])
 }

packages/web3-hooks/base/src/useNetworkBy.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react'
+import { useSubscription } from 'use-subscription'
+import { EMPTY_STRING, type NetworkPluginID } from '@masknet/shared-base'
+import { useWeb3State } from './useWeb3State.js'
+import { useNetworks } from './useNetworks.js'
+import type { Web3Helper } from '@masknet/web3-helpers'
+
+export function useNetworkBy<T extends NetworkPluginID = NetworkPluginID>(
+    pluginID?: T,
+    chainId?: Web3Helper.ChainIdScope<void, T>,
+) {
+    const { Network } = useWeb3State(pluginID)
+    const networks = useNetworks(pluginID)
+    const networkID = useSubscription(Network?.networkID ?? EMPTY_STRING)
+
+    return useMemo(() => {
+        if (chainId) return networks.find((x) => x.chainId === chainId)
+        return networks.find((x) => x.ID === networkID)
+    }, [networks, networkID, chainId])
+}

packages/web3-hooks/evm/src/useGasLimit.ts

@@ -1,9 +1,9 @@
+import { useQuery } from '@tanstack/react-query'
 import { unreachable } from '@masknet/kit'
 import { Contract, Web3 } from '@masknet/web3-providers'
-import type { NetworkPluginID } from '@masknet/shared-base'
+import { type NetworkPluginID } from '@masknet/shared-base'
 import { type ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { useChainContext } from '@masknet/web3-hooks-base'
-import { useQuery } from '@tanstack/react-query'
 
 export function useGasLimit(
     schemaType?: SchemaType,
@@ -14,6 +14,9 @@ export function useGasLimit(
     expectedChainId?: ChainId,
 ) {
     const { account, chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>({ chainId: expectedChainId })
+    const options = {
+        chainId,
+    }
 
     return useQuery({
         queryKey: ['gas-limit', chainId, schemaType, account, recipient, tokenId, amount],
@@ -31,24 +34,18 @@ export function useGasLimit(
                             value: amount,
                         },
                         undefined,
-                        {
-                            chainId,
-                        },
+                        options,
                     )
                     return Number.parseInt(gas ?? '0', 16)
                 case SchemaType.ERC20:
-                    return Contract.getERC20Contract(contractAddress, {
-                        chainId,
-                    })
+                    return Contract.getERC20Contract(contractAddress, options)
                         ?.methods?.transfer(recipient, amount ?? 0)
                         .estimateGas({
                             from: account,
                         })
                 case SchemaType.SBT:
                 case SchemaType.ERC721:
-                    return Contract.getERC721Contract(contractAddress, {
-                        chainId,
-                    })
+                    return Contract.getERC721Contract(contractAddress, options)
                         ?.methods.transferFrom(account, recipient, tokenId ?? '')
                         .estimateGas({
                             from: account,

packages/web3-providers/src/Web3/EVM/interceptors/CustomNetwork.ts

@@ -13,6 +13,12 @@ export class CustomNetwork implements Middleware<ConnectionContext> {
         return Web3StateRef.value.Network.networks?.getCurrentValue()
     }
 
+    private get customNetwork() {
+        if (!Web3StateRef.value?.Network) throw new Error('The web3 state does not load yet.')
+        const network = Web3StateRef.value.Network.network?.getCurrentValue()
+        return network?.isCustomized ? network : undefined
+    }
+
     async fn(context: ConnectionContext, next: () => Promise<void>) {
         const customNetwork = this.networks?.find((x) => x.isCustomized && isSameURL(x.rpcUrl, context.providerURL))
         if (!customNetwork || context.risky || !context.writeable || isMaskOnlyMethodType(context.method)) {
@@ -24,7 +30,10 @@ export class CustomNetwork implements Middleware<ConnectionContext> {
             const response = await this.Web3.getWeb3Provider({
                 chainId: context.chainId,
                 account: context.account,
-                providerURL: context.providerURL,
+                providerURL:
+                    context.providerURL ??
+                    // only attach providerURL when chainId got exactly matched.
+                    (this.customNetwork?.chainId === context.chainId ? this.customNetwork.rpcUrl : undefined),
             }).sendAsync(context.request, noop)
 
             const editor = ErrorEditor.from(null, response)