diff --git a/packages/mask/src/extension/popups/components/NetworkSelector/index.tsx b/packages/mask/src/extension/popups/components/NetworkSelector/index.tsx index 093886514540..b92609c5e5bf 100644 --- a/packages/mask/src/extension/popups/components/NetworkSelector/index.tsx +++ b/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 ( x.chainId === currentChainId) ?? networks[0]} + currentNetwork={networks.find((x) => x.chainId === chainId) ?? networks[0]} onChainChange={onChainChange} networks={networks} /> diff --git a/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx index 75298e83442c..a358274bf83b 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx +++ b/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx @@ -15,8 +15,9 @@ 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' @@ -24,7 +25,6 @@ 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() diff --git a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/GasSetting/index.tsx index 6fb1d0e13b08..cb3b2cc30f86 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/index.tsx +++ b/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 (
{t('popups_wallet_gas_fee_settings')} diff --git a/packages/mask/src/extension/popups/pages/Wallet/ReplaceTransaction/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ReplaceTransaction/index.tsx index 0861d2598eb1..1c645fab477a 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/ReplaceTransaction/index.tsx +++ b/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(() => { diff --git a/packages/mask/src/extension/popups/pages/Wallet/Transfer/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/Transfer/index.tsx index 05729160830d..796187e3053f 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/Transfer/index.tsx +++ b/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) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/SettingsDialog.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/SettingsDialog.tsx index 7f53c02e843a..3ff3234e570f 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/SettingsDialog.tsx +++ b/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() const [unconfirmedSlippage, setUnconfirmedSlippage] = useState(slippage) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TraderView.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TraderView.tsx index 96b895b5867b..d9a0c65acf76 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TraderView.tsx +++ b/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