fix: read network type from wrong place

packages/mask/src/extension/popups/components/NetworkSelector/index.tsx

@@ -2,14 +2,10 @@ import { memo, useCallback } from 'react'
 import { Box, MenuItem, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { Flags } from '../../../../../shared'
-import { ChainId, ProviderType, useAccount } from '@masknet/web3-shared-evm'
+import { ChainId, ProviderType, useAccount, useChainId, useProviderType } from '@masknet/web3-shared-evm'
 import { getRegisteredWeb3Networks, NetworkPluginID, Web3Plugin } from '@masknet/plugin-infra'
-import {
-    currentMaskWalletAccountSettings,
-    currentMaskWalletChainIdSettings,
-    currentProviderSettings,
-} from '../../../../plugins/Wallet/settings'
-import { ChainIcon, useMenu, useValueRef, WalletIcon } from '@masknet/shared'
+import { currentMaskWalletAccountSettings } from '../../../../plugins/Wallet/settings'
+import { ChainIcon, useMenu, WalletIcon } from '@masknet/shared'
 import { ArrowDownRound } from '@masknet/icons'
 import { WalletRPC } from '../../../../plugins/Wallet/messages'
 
@@ -49,11 +45,11 @@ const useStyles = makeStyles()((theme) => ({
 export const NetworkSelector = memo(() => {
     const networks = getRegisteredWeb3Networks()
     const account = useAccount()
-    const currentChainId = useValueRef(currentMaskWalletChainIdSettings)
-    const currentProvider = useValueRef(currentProviderSettings)
+    const chainId = useChainId()
+    const providerType = useProviderType()
     const onChainChange = useCallback(
         async (chainId: ChainId) => {
-            if (currentProvider === ProviderType.MaskWallet) {
+            if (providerType === ProviderType.MaskWallet) {
                 await WalletRPC.updateAccount({
                     chainId,
                 })
@@ -63,12 +59,12 @@ export const NetworkSelector = memo(() => {
                 account: currentMaskWalletAccountSettings.value,
             })
         },
-        [currentProvider, account],
+        [providerType, account],
     )
 
     return (
         <NetworkSelectorUI
-            currentNetwork={networks.find((x) => x.chainId === currentChainId) ?? networks[0]}
+            currentNetwork={networks.find((x) => x.chainId === chainId) ?? networks[0]}
             onChainChange={onChainChange}
             networks={networks}
         />

packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx

@@ -15,16 +15,16 @@ import {
     useChainId,
     useERC20TokenDetailed,
     useNativeTokenDetailed,
+    useNetworkType,
 } from '@masknet/web3-shared-evm'
-import { FormattedBalance, FormattedCurrency, TokenIcon, useValueRef } from '@masknet/shared'
+import { FormattedBalance, FormattedCurrency, TokenIcon } from '@masknet/shared'
 import { Link, Typography } from '@mui/material'
 import { useI18N } from '../../../../../utils'
 import { PopupRoutes } from '@masknet/shared-base'
 import { LoadingButton } from '@mui/lab'
 import { unreachable } from '@dimensiondev/kit'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import Services from '../../../../service'
-import { currentNetworkSettings } from '../../../../../plugins/Wallet/settings'
 import BigNumber from 'bignumber.js'
 import { useNativeTokenPrice, useTokenPrice } from '../../../../../plugins/Wallet/hooks/useTokenPrice'
 import { LoadingPlaceholder } from '../../../components/LoadingPlaceholder'
@@ -136,7 +136,7 @@ const ContractInteraction = memo(() => {
     const location = useLocation()
     const history = useHistory()
     const chainId = useChainId()
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
     const [transferError, setTransferError] = useState(false)
     const { value: request, loading: requestLoading } = useUnconfirmedRequest()
 

packages/mask/src/extension/popups/pages/Wallet/GasSetting/index.tsx

@@ -1,12 +1,10 @@
 import { memo } from 'react'
 import { makeStyles } from '@masknet/theme'
 import { Typography } from '@mui/material'
-import { useValueRef } from '@masknet/shared'
-import { NetworkType } from '@masknet/web3-shared-evm'
+import { NetworkType, useNetworkType } from '@masknet/web3-shared-evm'
 import { useI18N } from '../../../../../utils'
 import { GasSetting1559 } from './GasSetting1559'
 import { Prior1559GasSetting } from './Prior1559GasSetting'
-import { currentNetworkSettings } from '../../../../../plugins/Wallet/settings'
 
 const useStyles = makeStyles()(() => ({
     container: {
@@ -30,7 +28,7 @@ const useStyles = makeStyles()(() => ({
 const GasSetting = memo(() => {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
     return (
         <main className={classes.container}>
             <Typography className={classes.title}>{t('popups_wallet_gas_fee_settings')}</Typography>

packages/mask/src/extension/popups/pages/Wallet/ReplaceTransaction/index.tsx

@@ -12,13 +12,12 @@ import {
     getChainIdFromNetworkType,
     isEIP1559Supported,
     useNativeTokenDetailed,
+    useNetworkType,
 } from '@masknet/web3-shared-evm'
-import { useValueRef } from '@masknet/shared'
-import { currentNetworkSettings } from '../../../../../plugins/Wallet/settings'
+import { z as zod } from 'zod'
 import BigNumber from 'bignumber.js'
 import { useI18N } from '../../../../../utils'
 import { hexToNumber, toHex } from 'web3-utils'
-import { z as zod } from 'zod'
 import { Controller, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { StyledInput } from '../../../components/StyledInput'
@@ -79,7 +78,7 @@ const ReplaceTransaction = memo(() => {
 
     const { value: nativeToken } = useNativeTokenDetailed()
     const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
     const is1559 = isEIP1559Supported(getChainIdFromNetworkType(networkType))
 
     const schema = useMemo(() => {

packages/mask/src/extension/popups/pages/Wallet/Transfer/index.tsx

@@ -1,11 +1,10 @@
 import { memo, useMemo, useState } from 'react'
-import { makeStyles } from '@masknet/theme'
-import { formatBalance, NetworkType, ProviderType, useWallets } from '@masknet/web3-shared-evm'
 import { MenuItem, Typography } from '@mui/material'
-import { FormattedBalance, TokenIcon, useMenu, useValueRef } from '@masknet/shared'
+import { makeStyles } from '@masknet/theme'
+import { formatBalance, NetworkType, ProviderType, useNetworkType, useWallets } from '@masknet/web3-shared-evm'
+import { FormattedBalance, TokenIcon, useMenu } from '@masknet/shared'
 import { useContainer } from 'unstated-next'
 import { WalletContext } from '../hooks/useWalletContext'
-import { currentNetworkSettings } from '../../../../../plugins/Wallet/settings'
 import { Transfer1559 } from './Transfer1559'
 import { Prior1559Transfer } from './Prior1559Transfer'
 
@@ -26,7 +25,7 @@ const useStyles = makeStyles()({
 
 const Transfer = memo(() => {
     const { classes } = useStyles()
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
     const wallets = useWallets(ProviderType.MaskWallet)
     const { assets, currentToken } = useContainer(WalletContext)
     const [selectedAsset, setSelectedAsset] = useState(currentToken)

packages/mask/src/plugins/Trader/SNSAdaptor/trader/SettingsDialog.tsx

@@ -9,9 +9,8 @@ import { InjectedDialog } from '../../../../components/shared/InjectedDialog'
 import { PluginTraderMessages } from '../../messages'
 import { ExpandMore } from '@mui/icons-material'
 import { Gas1559Settings } from './Gas1559Settings'
-import { currentNetworkSettings } from '../../../Wallet/settings'
 import { GasPrior1559Settings } from './GasPrior1559Settings'
-import { GasOptionConfig, NetworkType } from '@masknet/web3-shared-evm'
+import { GasOptionConfig, NetworkType, useNetworkType } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -47,7 +46,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
     const classes = useStylesExtends(useStyles(), props)
 
     const slippage = useValueRef(currentSlippageSettings)
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
 
     const [gasConfig, setGasConfig] = useState<GasOptionConfig>()
     const [unconfirmedSlippage, setUnconfirmedSlippage] = useState(slippage)

packages/mask/src/plugins/Trader/SNSAdaptor/trending/TraderView.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
 import { Link, Tab, Tabs } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { useValueRef } from '@masknet/shared'
 import { useI18N, useSettingsSwitcher } from '../../../../utils'
 import type { TagType } from '../../types'
 import { DataProvider, TradeProvider } from '@masknet/public-api'
@@ -22,9 +21,8 @@ import { TrendingViewDeck } from './TrendingViewDeck'
 import { currentDataProviderSettings } from '../../settings'
 import { useAvailableCoins } from '../../trending/useAvailableCoins'
 import { usePreferredCoinId } from '../../trending/useCurrentCoinId'
-import { EthereumTokenType, useFungibleTokenDetailed, useChainIdValid } from '@masknet/web3-shared-evm'
+import { EthereumTokenType, useFungibleTokenDetailed, useChainIdValid, useNetworkType } from '@masknet/web3-shared-evm'
 import { TradeContext, useTradeContext } from '../../trader/useTradeContext'
-import { currentNetworkSettings } from '../../../Wallet/settings'
 
 const useStyles = makeStyles<{ isPopper: boolean }>()((theme, props) => {
     return {
@@ -114,7 +112,7 @@ export function TraderView(props: TraderViewProps) {
     const chainIdValid = useChainIdValid()
 
     //#region track network type
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
     useEffect(() => setTabIndex(0), [networkType])
     //#endregion