refactor: use native token hook

packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC20.tsx

@@ -91,7 +91,7 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
     const transferAmount = rightShift(amount || '0', selectedToken.decimals).toFixed()
     const erc20GasLimit = useGasLimit(
         selectedToken.type === TokenType.Fungible
-            ? selectedToken.symbol === nativeToken.value?.symbol
+            ? selectedToken.symbol === nativeToken.symbol
                 ? EthereumTokenType.Native
                 : EthereumTokenType.ERC20
             : selectedToken.type,
@@ -300,7 +300,7 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
                         <Typography fontSize="14px" title={`$${gasFeeInUsd.toString()}`}>
                             {t.transfer_cost({
                                 gasFee: formatWeiToEther(gasFee).toFixed(6),
-                                symbol: nativeToken.value?.symbol ?? '',
+                                symbol: nativeToken.symbol ?? '',
                                 usd: gasFeeInUsd.toFixed(2),
                             })}
                         </Typography>

packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC721.tsx

@@ -406,7 +406,7 @@ export const TransferERC721 = memo(() => {
                             <Typography fontSize="14px">
                                 {t.transfer_cost({
                                     gasFee: formatWeiToEther(gasFee).toFixed(6),
-                                    symbol: nativeToken.value?.symbol ?? '',
+                                    symbol: nativeToken.symbol ?? '',
                                     usd: gasFeeInUsd.toFixed(2),
                                 })}
                             </Typography>

packages/dashboard/src/pages/Wallets/components/Transfer/index.tsx

@@ -19,7 +19,7 @@ export const Transfer = memo(() => {
     const { state } = useLocation() as {
         state: { token?: Web3Plugin.FungibleToken; erc721Token?: ERC721TokenDetailed; type?: TransferTab } | null
     }
-    const { value: nativeToken } = useNativeTokenDetailed()
+    const nativeToken = useNativeTokenDetailed()
     const transferTabsLabel: Record<TransferTab, string> = {
         [TransferTab.Token]: t.wallets_assets_token(),
         [TransferTab.Collectibles]: t.wallets_assets_collectibles(),

packages/dashboard/src/pages/Wallets/hooks/useERC20TokensDetailed.ts

@@ -12,7 +12,7 @@ import { useMemo } from 'react'
 
 export function useERC20TokensDetailed() {
     const { ERC20 } = useTokenListConstants()
-    const { value: nativeTokenDetailed } = useNativeTokenDetailed()
+    const nativeTokenDetailed = useNativeTokenDetailed()
     const { value: erc20TokensDetailed = [], loading: erc20TokensDetailedLoading } =
         useERC20TokensDetailedFromTokenLists(ERC20)
 

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

@@ -231,7 +231,7 @@ const ContractInteraction = memo(() => {
     }, [request, t])
 
     // token detailed
-    const { value: nativeToken } = useNativeTokenDetailed()
+    const nativeToken = useNativeTokenDetailed()
     const { value: token } = useERC20TokenDetailed(isNativeTokenInteraction ? '' : tokenAddress)
 
     // gas price

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

@@ -120,7 +120,7 @@ export const GasSetting1559 = memo(() => {
     const navigate = useNavigate()
     const [selected, setOption] = useState<number | null>(null)
     const [getGasLimitError, setGetGasLimitError] = useState(false)
-    const { value: nativeToken } = useNativeTokenDetailed()
+    const nativeToken = useNativeTokenDetailed()
     const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
 
     const { value, loading: getValueLoading } = useUnconfirmedRequest()

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

@@ -105,7 +105,7 @@ export const Prior1559GasSetting = memo(() => {
     const [getGasLimitError, setGetGasLimitError] = useState(false)
     const navigate = useNavigate()
     const [selected, setOption] = useState<number | null>(null)
-    const { value: nativeToken } = useNativeTokenDetailed()
+    const nativeToken = useNativeTokenDetailed()
 
     const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
 

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

@@ -76,7 +76,7 @@ const ReplaceTransaction = memo(() => {
     const defaultMaxPriorityFeePerGas =
         (transaction?.computedPayload?._tx as EthereumTransactionConfig).maxPriorityFeePerGas ?? 0
 
-    const { value: nativeToken } = useNativeTokenDetailed()
+    const nativeToken = useNativeTokenDetailed()
     const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
     const networkType = useNetworkType()
     const is1559 = isEIP1559Supported(getChainIdFromNetworkType(networkType))

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

@@ -71,7 +71,7 @@ const TokenDetail = memo(() => {
     const wallet = useWallet()
     const navigate = useNavigate()
     const { currentToken } = useContainer(WalletContext)
-    const { value: nativeToken } = useNativeTokenDetailed()
+    const nativeToken = useNativeTokenDetailed()
 
     const { value: isActiveSocialNetwork } = useAsync(async () => {
         const urls = compact((await browser.tabs.query({ active: true })).map((tab) => tab.url))

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

@@ -189,7 +189,7 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
     const [minGasLimitContext, setMinGasLimitContext] = useState(0)
     const [addressTip, setAddressTip] = useState<{ type: TransferAddressError; message: string } | null>()
 
-    const { value: nativeToken } = useNativeTokenDetailed()
+    const nativeToken = useNativeTokenDetailed()
 
     const etherPrice = useNativeTokenPrice(nativeToken?.chainId)
 

packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx

@@ -79,9 +79,7 @@ export function DonateDialog(props: DonateDialogProps) {
     // #endregion
 
     // #region the selected token
-    const [token = nativeTokenDetailed.value, setToken] = useState<FungibleTokenDetailed | undefined>(
-        nativeTokenDetailed.value,
-    )
+    const [token = nativeTokenDetailed, setToken] = useState<FungibleTokenDetailed | undefined>(nativeTokenDetailed)
     const tokenBalance = useFungibleTokenBalance(token?.type ?? EthereumTokenType.Native, token?.address ?? '')
     // #endregion
 

packages/mask/src/plugins/NextID/contexts/Tip/TipTaskProvider.tsx

@@ -24,7 +24,7 @@ export const TipTaskProvider: FC<React.PropsWithChildren<Props>> = ({ children,
     const { targetChainId } = TargetChainIdContext.useContainer()
     const chainId = useChainId()
     const [erc721Address, setErc721Address] = useState<string>('')
-    const { value: nativeTokenDetailed = null } = useNativeTokenDetailed(targetChainId)
+    const nativeTokenDetailed = useNativeTokenDetailed(targetChainId)
     const [token, setToken] = useState<ContextOptions['token']>(nativeTokenDetailed)
     const [erc721TokenId, setErc721TokenId] = useState<ContextOptions['erc721TokenId']>(null)
     const storedTokens = useSubscription(getStorage().addedTokens.subscription)

packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx

@@ -92,7 +92,7 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
     const { HAPPY_RED_PACKET_ADDRESS_V4 } = useRedPacketConstants()
 
     // #region select token
-    const { value: nativeTokenDetailed } = useNativeTokenDetailed()
+    const nativeTokenDetailed = useNativeTokenDetailed()
     const [token = nativeTokenDetailed, setToken] = useState<FungibleTokenDetailed | undefined>(origin?.token)
     const pickToken = usePickToken()
     const onSelectTokenChipClick = useCallback(async () => {

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

@@ -156,7 +156,7 @@ export const GasPrior1559Settings = memo<GasPrior1559SettingsProps>(
             [gasOptions, customGasPrice],
         )
 
-        const { value: nativeToken } = useNativeTokenDetailed()
+        const nativeToken = useNativeTokenDetailed()
         const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
 
         // #region Confirm function

packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useSortedTrades.ts

@@ -8,7 +8,7 @@ import { ChainId, EthereumTokenType, formatBalance, useNativeTokenDetailed } fro
 import { AllProviderTradeContext } from '../../../trader/useAllProviderTradeContext'
 
 export function useSortedTrades(traders: TradeInfo[], chainId: ChainId, gasPrice?: string) {
-    const { value: nativeToken } = useNativeTokenDetailed(chainId)
+    const nativeToken = useNativeTokenDetailed(chainId)
     const nativeTokenPrice = useNativeTokenPrice(chainId)
 
     const {

packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSetting1559.tsx

@@ -38,7 +38,7 @@ export const GasSetting1559: FC<GasSettingProps> = memo(
         const { t } = useI18N()
         const chainId = useChainId()
         const [selectedGasOption, setGasOption] = useState<GasOption | null>(gasOption)
-        const { value: nativeToken } = useNativeTokenDetailed()
+        const nativeToken = useNativeTokenDetailed()
         const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
 
         // #region Get suggest gas options data from meta swap api

packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSettingBar.tsx

@@ -28,7 +28,7 @@ export function GasSettingBar(props: GasSettingBarProps) {
     const { gasLimit, gasPrice, maxFee, priorityFee, onChange } = props
 
     const chainId = useChainId()
-    const { value: nativeTokenDetailed } = useNativeTokenDetailed()
+    const nativeTokenDetailed = useNativeTokenDetailed()
     const { value: gasPriceDefault = '0' } = useGasPrice()
 
     const [gasOption, setGasOption] = useState<GasOption>(GasOption.Medium)

packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/Prior1559GasSetting.tsx

@@ -37,9 +37,9 @@ export const Prior1559GasSetting: FC<GasSettingProps> = memo(
         const { t } = useI18N()
         const chainId = useChainId()
         const [selectedGasOption, setGasOption] = useState<GasOption | null>(gasOption)
-        const { value: nativeToken } = useNativeTokenDetailed()
+        const nativeToken = useNativeTokenDetailed()
 
-        const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
+        const nativeTokenPrice = useNativeTokenPrice(nativeToken.chainId)
 
         // #region Get gas options from debank
         const { value: gasOptions, loading: getGasOptionsLoading } = useAsync(async () => {

packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/TransactionDescription.tsx

@@ -121,7 +121,7 @@ export interface RecentTransactionDescriptionProps {
 export function RecentTransactionDescription(props: RecentTransactionDescriptionProps) {
     const chainId = useChainId()
     const { hash, computedPayload } = props
-    const { loading: getNativeTokenLoading, value: nativeTokenDetailed } = useNativeTokenDetailed()
+    const nativeTokenDetailed = useNativeTokenDetailed()
     let inputTokenAddress: string | undefined = ''
     let tokenAddress: string | undefined = ''
 
@@ -154,7 +154,7 @@ export function RecentTransactionDescription(props: RecentTransactionDescription
 
     const { loading: getERC20TokenLoading, value: tokenDetailed } = useERC20TokenDetailed(tokenAddress)
 
-    return !getNativeTokenLoading && !getERC20TokenLoading && !getInputERC20TokenLoading ? (
+    return !getERC20TokenLoading && !getInputERC20TokenLoading ? (
         <span>
             {getTransactionDescription(
                 chainId,

packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/getRedpacketDescription.tsx

@@ -43,7 +43,7 @@ export function CreateRedpacketDescription(props: CreateRedpacketDescriptionProp
     const { tokenAddress, tokenAmount } = props
     const { t } = useI18N()
 
-    const { value: nativeToken } = useNativeTokenDetailed()
+    const nativeToken = useNativeTokenDetailed()
     const { value: tokenDetailed } = useERC20TokenDetailed(tokenAddress)
     const token = isNativeTokenAddress(tokenAddress) ? nativeToken : tokenDetailed
 

packages/shared/src/UI/components/ERC20TokenList/index.tsx

@@ -52,7 +52,7 @@ export const ERC20TokenList = memo<ERC20TokenListProps>((props) => {
     const currentChainId = useChainId()
     const chainId = props.targetChainId ?? currentChainId
     const trustedERC20Tokens = useTrustedERC20Tokens()
-    const { value: nativeToken } = useNativeTokenDetailed(chainId)
+    const nativeToken = useNativeTokenDetailed(chainId)
     const [keyword, setKeyword] = useState('')
 
     const {

packages/web3-shared/evm/hooks/useAssets.ts

@@ -10,12 +10,7 @@ import { formatEthereumAddress } from '../utils'
 
 export function useAssets(tokens: FungibleTokenDetailed[], chainId?: ChainId | 'all') {
     const wallet = useWallet()
-    const {
-        value: nativeTokenDetailed,
-        loading: nativeTokenDetailedLoading,
-        error: nativeTokenDetailedError,
-        retry: retryNativeTokenDetailed,
-    } = useNativeTokenDetailed(chainId === 'all' ? undefined : chainId)
+    const nativeTokenDetailed = useNativeTokenDetailed(chainId === 'all' ? undefined : chainId)
 
     const {
         value: assetsFromChain = EMPTY_LIST,
@@ -32,10 +27,9 @@ export function useAssets(tokens: FungibleTokenDetailed[], chainId?: ChainId | '
     } = useAssetsFromProvider(chainId)
 
     const detailedTokensRetry = useCallback(() => {
-        retryNativeTokenDetailed()
         retryAssetsDetailedChain()
         retryAssetsDetailedDebank()
-    }, [retryNativeTokenDetailed, retryAssetsDetailedChain, retryAssetsDetailedDebank])
+    }, [retryAssetsDetailedChain, retryAssetsDetailedDebank])
 
     const matchedAssetsFromChain = useMemo(
         () => assetsFromChain.filter((x) => !chainId || chainId === 'all' || x.token.chainId === chainId),
@@ -50,8 +44,8 @@ export function useAssets(tokens: FungibleTokenDetailed[], chainId?: ChainId | '
 
     return {
         value: assets,
-        error: nativeTokenDetailedError || assetsDetailedChainError || assetsDetailedProviderError,
-        loading: nativeTokenDetailedLoading || assetsDetailedChainLoading || assetsDetailedProviderLoading,
+        error: assetsDetailedChainError || assetsDetailedProviderError,
+        loading: assetsDetailedChainLoading || assetsDetailedProviderLoading,
         retry: detailedTokensRetry,
     }
 }

packages/web3-shared/evm/hooks/useFungibleTokenDetailed.ts

@@ -3,6 +3,7 @@ import { unreachable } from '@dimensiondev/kit'
 import { ERC20TokenDetailed, EthereumTokenDetailedType, EthereumTokenType } from '../types'
 import { useERC20TokenDetailed } from './useERC20TokenDetailed'
 import { useNativeTokenDetailed } from './useNativeTokenDetailed'
+import { useAsyncRetry } from 'react-use'
 
 export function useFungibleTokenDetailed<
     P extends EthereumTokenDetailedType<EthereumTokenType.ERC20 | EthereumTokenType.Native>,
@@ -11,7 +12,8 @@ export function useFungibleTokenDetailed<
     address: string,
     token?: Partial<P>,
 ): AsyncStateRetry<P | undefined> {
-    const r1 = useNativeTokenDetailed()
+    const _r1 = useNativeTokenDetailed()
+    const r1 = useAsyncRetry(async () => _r1, [])
     const r2 = useERC20TokenDetailed(
         type === EthereumTokenType.ERC20 ? address : '',
         token as unknown as ERC20TokenDetailed,

packages/web3-shared/evm/hooks/useFungibleTokenWatched.tsx

@@ -6,7 +6,7 @@ import { useNativeTokenDetailed } from './useNativeTokenDetailed'
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
 export function useFungibleTokenWatched(initialToken?: FungibleTokenInitial): FungibleTokenWatched {
     const nativeToken = useNativeTokenDetailed()
-    const [token = nativeToken.value, setToken] = useState(initialToken)
+    const [token = nativeToken, setToken] = useState(initialToken)
 
     const [amount, setAmount] = useState('')
     const balance = useFungibleTokenBalance(token?.type ?? EthereumTokenType.Native, token?.address ?? '')

packages/web3-shared/evm/hooks/useNativeTokenDetailed.ts

@@ -1,9 +1,9 @@
-import { useAsyncRetry } from 'react-use'
+import { useMemo } from 'react'
 import { createNativeToken } from '../utils'
 import { useChainId } from './useChainId'
 import type { ChainId } from '../types'
 
 export function useNativeTokenDetailed(chainId?: ChainId) {
     const currentChainId = useChainId()
-    return useAsyncRetry(async () => createNativeToken(chainId ?? currentChainId), [currentChainId, chainId])
+    return useMemo(() => createNativeToken(chainId ?? currentChainId), [currentChainId, chainId])
 }