refactor: use react-query in useGasOptions (#10374)

* refactor: use react-query in useGasOptions * refactor: use react-query in useGasPrice
DimensionDev · Aug 13, 2023 · bdc129e · bdc129e
1 parent 2559bcd
commit bdc129e
Show file tree

Hide file tree

Showing 21 changed files with 34 additions and 40 deletions.
diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC20.tsx b/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC20.tsx
@@ -87,7 +87,7 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
     const { classes } = useStyles()
     const [gasLimit_, setGasLimit_] = useState(0)
 
-    const { value: defaultGasPrice = '0' } = useGasPrice(NetworkPluginID.PLUGIN_EVM)
+    const { data: defaultGasPrice = '0' } = useGasPrice(NetworkPluginID.PLUGIN_EVM)
 
     const [selectedToken, setSelectedToken] = useState(token)
 

diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC721.tsx b/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC721.tsx
@@ -217,7 +217,7 @@ export const TransferERC721 = memo(() => {
     }
 
     // gas price
-    const { value: defaultGasPrice = '0' } = useGasPrice()
+    const { data: defaultGasPrice = '0' } = useGasPrice()
     const gasPrice = gasConfig.gasPrice || defaultGasPrice
     const gasFee = useMemo(() => multipliedBy(gasLimit, gasPrice), [gasLimit, gasPrice])
     const gasFeeInUsd = formatWeiToEther(gasFee).multipliedBy(nativeTokenPrice)

diff --git a/packages/dashboard/src/pages/Wallets/hooks/useGasConfig.ts b/packages/dashboard/src/pages/Wallets/hooks/useGasConfig.ts
@@ -25,9 +25,9 @@ export function useGasConfig(gasLimit: number, minGasLimit: number): GasConfigPr
     const [priorityFee, setPriorityFee] = useState<BigNumber.Value>(0)
 
     const is1559Supported = useMemo(() => ChainResolver.isFeatureSupported(chainId, 'EIP1559'), [chainId])
-    const { value: defaultGasPrice = '0' } = useGasPrice(NetworkPluginID.PLUGIN_EVM)
+    const { data: defaultGasPrice = '0' } = useGasPrice(NetworkPluginID.PLUGIN_EVM)
     const gasPrice = customGasPrice || defaultGasPrice
-    const { value: gasOptions } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
+    const { data: gasOptions } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
 
     useEffect(() => GasSettingModal.close(), [])
 

diff --git a/packages/mask/src/extension/popups/components/GasSettingMenu/index.tsx b/packages/mask/src/extension/popups/components/GasSettingMenu/index.tsx
@@ -84,7 +84,7 @@ export const GasSettingMenu = memo<GasSettingMenuProps>(function GasSettingMenu(
         paymentToken,
     )
 
-    const { value: gasOptions } = useGasOptions()
+    const { data: gasOptions } = useGasOptions()
 
     const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>({ chainId: defaultChainId })
     const isSupport1559 = useChainIdSupport(NetworkPluginID.PLUGIN_EVM, 'EIP1559', chainId)

diff --git a/packages/mask/src/extension/popups/hook/useGasOptionsMenu.tsx b/packages/mask/src/extension/popups/hook/useGasOptionsMenu.tsx
@@ -49,7 +49,7 @@ const useStyles = makeStyles()((theme) => ({
 export function useGasOptionsMenu(minimumGas: string, callback: (config: GasConfig, type?: GasOptionType) => void) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const { value: gasOptions } = useGasOptions()
+    const { data: gasOptions } = useGasOptions()
 
     const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
     const isSupport1559 = useChainIdSupport(NetworkPluginID.PLUGIN_EVM, 'EIP1559', chainId)

diff --git a/packages/mask/src/extension/popups/modals/GasSettingModal/GasSettingDialog.tsx b/packages/mask/src/extension/popups/modals/GasSettingModal/GasSettingDialog.tsx
@@ -77,7 +77,7 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
     const theme = useTheme()
     const { classes } = useStyles()
     const isSupport1559 = useChainIdSupport(NetworkPluginID.PLUGIN_EVM, 'EIP1559', chainId)
-    const { value: gasOptions } = useGasOptions(NetworkPluginID.PLUGIN_EVM, { chainId })
+    const { data: gasOptions } = useGasOptions(NetworkPluginID.PLUGIN_EVM, { chainId })
     const { data: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM, { chainId })
     const { data: nativeTokenPrice } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM, { chainId })
 

diff --git a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/GasSetting1559.tsx b/packages/mask/src/extension/popups/pages/Wallet/GasSetting/GasSetting1559.tsx
@@ -117,7 +117,7 @@ export const GasSetting1559 = memo(() => {
     })
 
     const { value, loading: getValueLoading } = useUnconfirmedRequest()
-    const { value: gasOptions, loading: getGasOptionsLoading } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
+    const { data: gasOptions, isLoading: getGasOptionsLoading } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
 
     // #region Gas options
     const options = useMemo(

diff --git a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx b/packages/mask/src/extension/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx
@@ -93,7 +93,7 @@ const minGasPriceOfChain: ChainIdOptionalRecord<BigNumber.Value> = {
 export const Prior1559GasSetting = memo(() => {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const { value: gasOptions_ } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
+    const { data: gasOptions_ } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
     const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
     const { value, loading: getValueLoading } = useUnconfirmedRequest()
     const navigate = useNavigate()

diff --git a/packages/mask/src/extension/popups/pages/Wallet/Transfer/useDefaultGasConfig.ts b/packages/mask/src/extension/popups/pages/Wallet/Transfer/useDefaultGasConfig.ts
@@ -6,7 +6,7 @@ import type { ChainId } from '@masknet/web3-shared-evm'
 export function useDefaultGasConfig(chainId: ChainId, gasLimit: string) {
     const Others = useWeb3Others()
     const isSupportEIP1559 = Others.chainResolver.isFeatureSupported(chainId, 'EIP1559')
-    const { value: gasOptions } = useGasOptions(NetworkPluginID.PLUGIN_EVM, {
+    const { data: gasOptions } = useGasOptions(NetworkPluginID.PLUGIN_EVM, {
         chainId,
     })
 

diff --git a/packages/plugins/Gitcoin/src/SiteAdaptor/hooks/useDonateCallback.ts b/packages/plugins/Gitcoin/src/SiteAdaptor/hooks/useDonateCallback.ts
@@ -57,7 +57,7 @@ export function useDonateCallback(
     }, [address, grantAmount, tipAmount, token, GITCOIN_MAINTAINER_ADDRESS, GITCOIN_ETH_ADDRESS])
 
     const { gasPrice } = useGasConfig(chainId)
-    const { value: defaultGasPrice = '1' } = useGasPrice(NetworkPluginID.PLUGIN_EVM, { chainId })
+    const { data: defaultGasPrice = '1' } = useGasPrice(NetworkPluginID.PLUGIN_EVM, { chainId })
     const gasState = useAsync(async () => {
         if (!bulkCheckoutContract || !token) return '0'
         const price = !gasPrice || gasPrice === '0' ? defaultGasPrice : gasPrice

diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketDialog.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketDialog.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react'
 import { compact } from 'lodash-es'
 import Web3Utils from 'web3-utils'
 import { CrossIsolationMessages, NetworkPluginID, PluginID } from '@masknet/shared-base'
-import { useChainContext, useChainIdValid, useGasPrice, useNetworkContext } from '@masknet/web3-hooks-base'
+import { useChainContext, useGasPrice } from '@masknet/web3-hooks-base'
 import { ApplicationBoardModal, InjectedDialog, NetworkTab, useCurrentLinkedPersona } from '@masknet/shared'
 import { ChainId, type GasConfig, GasEditor } from '@masknet/web3-shared-evm'
 import { type RedPacketJSONPayload } from '@masknet/web3-providers/types'
@@ -58,14 +58,12 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
     const t = useI18N()
     const [showHistory, setShowHistory] = useState(false)
     const [gasOption, setGasOption] = useState<GasConfig>()
-    const { pluginID } = useNetworkContext()
 
     const [step, setStep] = useState(CreateRedPacketPageStep.NewRedPacketPage)
 
     const state = useState(DialogTabs.create)
     const [isNFTRedPacketLoaded, setIsNFTRedPacketLoaded] = useState(false)
     const { account, chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
-    const chainIdValid = useChainIdValid(NetworkPluginID.PLUGIN_EVM, chainId)
     const approvalDefinition = useActivatedPlugin(PluginID.RedPacket, 'any')
     const [currentTab, onChange, tabs] = useTabs('tokens', 'collectibles')
     const { classes } = useStyles({ currentTab, showHistory })
@@ -77,7 +75,6 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
         )
     }, [currentTab === tabs.tokens, approvalDefinition?.enableRequirement.web3])
 
-    const networkTabChainId = chainIdValid && chainIdList.includes(chainId) ? chainId : ChainId.Mainnet
     // #region token lucky drop
     const [settings, setSettings] = useState<RedPacketSettings>()
     // #endregion
@@ -171,7 +168,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
         : t.details()
 
     // #region gas config
-    const { value: defaultGasPrice } = useGasPrice(NetworkPluginID.PLUGIN_EVM, { chainId })
+    const { data: defaultGasPrice } = useGasPrice(NetworkPluginID.PLUGIN_EVM, { chainId })
     const handleGasSettingChange = useCallback(
         (gasConfig: GasConfig) => {
             const editor = GasEditor.fromConfig(chainId, gasConfig)

diff --git a/packages/plugins/Tips/src/components/TokenSection/GasSettingsBar.tsx b/packages/plugins/Tips/src/components/TokenSection/GasSettingsBar.tsx
@@ -21,7 +21,7 @@ export function GasSettingsBar() {
     const { data: nativeTokenPrice = 0 } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM, {
         chainId,
     })
-    const { value: defaultGasPrice = '1' } = useGasPrice(NetworkPluginID.PLUGIN_EVM, { chainId })
+    const { data: defaultGasPrice = '1' } = useGasPrice(NetworkPluginID.PLUGIN_EVM, { chainId })
     const nativeToken = useMemo(() => ChainResolver.nativeCurrency(chainId), [chainId])
     const GAS_LIMIT = isNativeToken ? ETH_GAS_LIMIT : ERC20_GAS_LIMIT
     const { value: gasLimit = GAS_LIMIT } = useGasLimit()

diff --git a/packages/shared/src/UI/components/SettingsBoard/Context.tsx b/packages/shared/src/UI/components/SettingsBoard/Context.tsx
@@ -64,10 +64,10 @@ export function useSettingsContext(initial?: {
     )
 
     const {
-        value: gasOptions,
-        loading: gasOptionsLoading,
+        data: gasOptions,
+        isLoading: gasOptionsLoading,
         error: gasOptionsError,
-        retry: gasOptionRetry,
+        refetch: gasOptionRetry,
     } = useGasOptions(pluginID, {
         chainId,
     })

diff --git a/packages/shared/src/UI/modals/GasSettingModal/GasSetting1559.tsx b/packages/shared/src/UI/modals/GasSettingModal/GasSetting1559.tsx
@@ -95,7 +95,7 @@ export const GasSetting1559 = memo(
             chainId,
         })
 
-        const { value: gasOptions, loading: getGasOptionsLoading } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
+        const { data: gasOptions, isLoading: getGasOptionsLoading } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
 
         // #region Gas options
         const options = useMemo(

diff --git a/packages/shared/src/UI/modals/GasSettingModal/Prior1559GasSetting.tsx b/packages/shared/src/UI/modals/GasSettingModal/Prior1559GasSetting.tsx
@@ -93,7 +93,7 @@ export const Prior1559GasSetting = memo(
 
         const { data: nativeTokenPrice = 0 } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM)
 
-        const { value: gasOptions, loading: getGasOptionsLoading } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
+        const { data: gasOptions, isLoading: getGasOptionsLoading } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
 
         const options = useMemo(
             () =>

diff --git a/packages/shared/src/UI/wallet/GasSettingBar.tsx b/packages/shared/src/UI/wallet/GasSettingBar.tsx
@@ -23,7 +23,7 @@ export function GasSettingBar(props: GasSettingBarProps) {
 
     const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
     const { data: nativeTokenDetailed } = useFungibleToken(NetworkPluginID.PLUGIN_EVM)
-    const { value: gasPriceDefault = '0' } = useGasPrice(NetworkPluginID.PLUGIN_EVM)
+    const { data: gasPriceDefault = '0' } = useGasPrice(NetworkPluginID.PLUGIN_EVM)
 
     const [gasOption, setGasOptionType] = useState<GasOptionType>(GasOptionType.NORMAL)
 

diff --git a/packages/web3-hooks/base/src/useGasOption.ts b/packages/web3-hooks/base/src/useGasOption.ts
@@ -9,12 +9,12 @@ export function useGasOption<T extends NetworkPluginID = NetworkPluginID>(
     optionType?: GasOptionType,
     options?: HubOptions<T>,
 ) {
-    const gasOptions = useGasOptions(pluginID, options)
+    const { data: gasOptions } = useGasOptions(pluginID, options)
 
     return useMemo(() => {
         return {
             ...gasOptions,
-            value: gasOptions.value?.[optionType ?? GasOptionType.NORMAL],
+            value: gasOptions?.[optionType ?? GasOptionType.NORMAL],
         }
     }, [gasOptions, optionType])
 }
diff --git a/packages/web3-hooks/base/src/useGasOptions.ts b/packages/web3-hooks/base/src/useGasOptions.ts
@@ -1,6 +1,6 @@
-import { useAsyncRetry } from 'react-use'
 import type { NetworkPluginID } from '@masknet/shared-base'
 import type { HubOptions } from '@masknet/web3-providers/types'
+import { useQuery } from '@tanstack/react-query'
 import { useChainContext } from './useContext.js'
 import { useWeb3Hub } from './useWeb3Hub.js'
 import { useWeb3Others } from './useWeb3Others.js'
@@ -10,8 +10,8 @@ export function useGasOptions<T extends NetworkPluginID = NetworkPluginID>(plugi
     const Hub = useWeb3Hub(pluginID, options)
     const Others = useWeb3Others(pluginID)
 
-    return useAsyncRetry(async () => {
+    return useQuery(['get-gas-options', pluginID, chainId, options], async () => {
         if (!Others.isValidChainId(chainId)) return
         return Hub.getGasOptions(chainId)
-    }, [chainId, Hub, Others])
+    })
 }
diff --git a/packages/web3-hooks/base/src/useGasPrice.ts b/packages/web3-hooks/base/src/useGasPrice.ts
@@ -1,22 +1,19 @@
-import { useMemo } from 'react'
-import { useAsyncRetry } from 'react-use'
 import type { NetworkPluginID } from '@masknet/shared-base'
 import { GasOptionType } from '@masknet/web3-shared-base'
 import type { ConnectionOptions } from '@masknet/web3-providers/types'
 import { useWeb3Connection } from './useWeb3Connection.js'
 import { useGasOption } from './useGasOption.js'
+import { useQuery } from '@tanstack/react-query'
 
 export function useGasPrice<T extends NetworkPluginID = NetworkPluginID>(pluginID?: T, options?: ConnectionOptions<T>) {
     const Web3 = useWeb3Connection(pluginID, options)
     const gasOption = useGasOption(pluginID, GasOptionType.NORMAL)
-    const gasPrice = useAsyncRetry(async () => {
+    const gasPrice = useQuery(['get-gas-price', pluginID, options], async () => {
         return Web3.getGasPrice()
-    }, [Web3])
+    })
 
-    return useMemo(() => {
-        return {
-            ...gasPrice,
-            value: gasOption?.value?.suggestedMaxFeePerGas ?? gasPrice.value,
-        }
-    }, [gasPrice, gasOption])
+    return {
+        ...gasPrice,
+        data: gasOption?.value?.suggestedMaxFeePerGas ?? gasPrice.data,
+    }
 }
diff --git a/packages/web3-hooks/evm/src/useGasConfig.ts b/packages/web3-hooks/evm/src/useGasConfig.ts
@@ -5,7 +5,7 @@ import type { Web3Helper } from '@masknet/web3-helpers'
 
 export function useGasConfig(chainId: Web3Helper.ChainIdAll) {
     const [gasConfig, setGasConfig] = useState<GasConfig>()
-    const { value: gasOptions } = useGasOptions()
+    const { data: gasOptions } = useGasOptions()
 
     const editor = GasEditor.fromGasOptions(chainId as ChainId, gasOptions)
 

diff --git a/packages/web3-providers/src/DeBank/apis/GasOptionAPI.ts b/packages/web3-providers/src/DeBank/apis/GasOptionAPI.ts
@@ -8,7 +8,7 @@ import type { GasOptionAPI_Base } from '../../entry-types.js'
 
 export class DeBankGasOptionAPI implements GasOptionAPI_Base.Provider<ChainId, GasOption> {
     async getGasOptions(chainId: ChainId): Promise<Record<GasOptionType, GasOption>> {
-        const { CHAIN_ID = '' } = getDeBankConstants(chainId)
+        const { CHAIN_ID } = getDeBankConstants(chainId)
         if (!CHAIN_ID) throw new Error('Failed to get gas price.')
 
         const result = await fetchSquashedJSON<GasPriceResponse>(