fix: bugfix for gas setting dialog with payment token (#10642)

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

@@ -9,25 +9,16 @@ import {
     useGasOptions,
     useNativeTokenAddress,
 } from '@masknet/web3-hooks-base'
-import { DepositPaymaster } from '@masknet/web3-providers'
 import { GasOptionType, ZERO, formatBalance, formatCurrency, scale10, toFixed } from '@masknet/web3-shared-base'
-import {
-    type EIP1559GasConfig,
-    type GasConfig,
-    type ChainId,
-    isNativeTokenAddress,
-    formatWeiToEther,
-} from '@masknet/web3-shared-evm'
+import { type EIP1559GasConfig, type GasConfig, type ChainId, formatWeiToEther } from '@masknet/web3-shared-evm'
 import { Typography, useTheme } from '@mui/material'
 import { Box } from '@mui/system'
 import { BigNumber } from 'bignumber.js'
 import { noop } from 'lodash-es'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { useAsync } from 'react-use'
-import { useContainer } from 'unstated-next'
 import { useI18N } from '../../../../utils/i18n-next-ui.js'
 import { useGasOptionsMenu } from '../../hook/useGasOptionsMenu.js'
-import { PopupContext } from '../../hook/usePopupContext.js'
+import { useGasRatio } from '../../hook/useGasRatio.js'
 
 interface GasSettingMenuProps {
     minimumGas: string
@@ -55,7 +46,7 @@ export const GasSettingMenu = memo<GasSettingMenuProps>(function GasSettingMenu(
 }) {
     const { t } = useI18N()
     const theme = useTheme()
-    const { smartPayChainId } = useContainer(PopupContext)
+    const gasRatio = useGasRatio(paymentToken)
     const [gasConfig = initConfig, setGasConfig] = useState<GasConfig | undefined>()
     const [gasOptionType, setGasOptionType] = useState<GasOptionType | undefined>(
         initConfig?.gasOptionType ?? GasOptionType.SLOW,
@@ -70,7 +61,7 @@ export const GasSettingMenu = memo<GasSettingMenuProps>(function GasSettingMenu(
         [onChange],
     )
 
-    const [menu, openMenu] = useGasOptionsMenu(minimumGas, !disable ? handleChange : noop)
+    const [menu, openMenu] = useGasOptionsMenu(minimumGas, !disable ? handleChange : noop, paymentToken)
 
     const [paymentTokenMenu, openPaymentTokenMenu] = useGasCurrencyMenu(
         NetworkPluginID.PLUGIN_EVM,
@@ -110,15 +101,6 @@ export const GasSettingMenu = memo<GasSettingMenuProps>(function GasSettingMenu(
         }
     }, [gasOptionType])
 
-    const { value: smartPayRatio } = useAsync(async () => {
-        if (!smartPayChainId) return
-        const depositPaymaster = new DepositPaymaster(smartPayChainId)
-        const ratio = await depositPaymaster.getRatio()
-
-        return ratio
-    }, [smartPayChainId])
-    const gasRatio = paymentToken && !isNativeTokenAddress(paymentToken) ? smartPayRatio : undefined
-
     const totalGas = useMemo(() => {
         if (!gasConfig) return ZERO
         const result = new BigNumber(

packages/mask/src/extension/popups/hook/index.ts

@@ -2,3 +2,4 @@ export * from './useParamTab.js'
 export * from './useTitle.js'
 export * from './useTokenParams.js'
 export * from './useFriends.js'
+export * from './useGasRatio.js'

packages/mask/src/extension/popups/hook/useGasOptionsMenu.tsx

@@ -46,7 +46,11 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-export function useGasOptionsMenu(minimumGas: string, callback: (config: GasConfig, type?: GasOptionType) => void) {
+export function useGasOptionsMenu(
+    minimumGas: string,
+    callback: (config: GasConfig, type?: GasOptionType) => void,
+    paymentToken?: string,
+) {
     const { t } = useI18N()
     const { classes } = useStyles()
     const { data: gasOptions } = useGasOptions()
@@ -59,13 +63,13 @@ export function useGasOptionsMenu(minimumGas: string, callback: (config: GasConf
     const handleClickCustom = useCallback(async () => {
         const result = await GasSettingModal.openAndWaitForClose({
             chainId,
-            config: { gas: minimumGas, ...customGasConfig },
+            config: { gas: minimumGas, paymentToken, ...customGasConfig },
         })
         if (!result) return
 
         setCustomGasConfig(result)
         callback(result)
-    }, [chainId, minimumGas, callback, customGasConfig])
+    }, [chainId, minimumGas, callback, customGasConfig, paymentToken])
 
     const handleClick = useCallback(
         (type?: GasOptionType, option?: GasOption) => {

packages/mask/src/extension/popups/hook/useGasRatio.ts

@@ -0,0 +1,19 @@
+import { useContainer } from 'unstated-next'
+import { PopupContext } from './usePopupContext.js'
+import { useAsync } from 'react-use'
+import { DepositPaymaster } from '@masknet/web3-providers'
+import { isNativeTokenAddress } from '@masknet/web3-shared-evm'
+
+export function useGasRatio(paymentToken?: string) {
+    const { smartPayChainId } = useContainer(PopupContext)
+
+    const { value: smartPayRatio } = useAsync(async () => {
+        if (!smartPayChainId) return
+        const depositPaymaster = new DepositPaymaster(smartPayChainId)
+        const ratio = await depositPaymaster.getRatio()
+
+        return ratio
+    }, [smartPayChainId])
+
+    return paymentToken && !isNativeTokenAddress(paymentToken) ? smartPayRatio : undefined
+}

packages/mask/src/extension/popups/modals/GasSettingModal/GasSettingDialog.tsx

@@ -1,7 +1,13 @@
 import { FormattedCurrency } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
-import { useChainIdSupport, useGasOptions, useNativeToken, useNativeTokenPrice } from '@masknet/web3-hooks-base'
+import {
+    useChainIdSupport,
+    useFungibleToken,
+    useFungibleTokenPrice,
+    useGasOptions,
+    useNativeTokenAddress,
+} from '@masknet/web3-hooks-base'
 import {
     GasOptionType,
     ZERO,
@@ -27,6 +33,7 @@ import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useI18N } from '../../../../utils/i18n-next-ui.js'
 import { BottomDrawer } from '../../components/index.js'
 import { ReplaceType, type GasSetting } from '../../pages/Wallet/type.js'
+import { useGasRatio } from '../../hook/useGasRatio.js'
 
 const useStyles = makeStyles()((theme) => ({
     title: {
@@ -77,10 +84,22 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
     const { t } = useI18N()
     const theme = useTheme()
     const { classes } = useStyles()
+    const gasRatio = useGasRatio(config.paymentToken)
     const isSupport1559 = useChainIdSupport(NetworkPluginID.PLUGIN_EVM, 'EIP1559', 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 })
+
+    const nativeTokenAddress = useNativeTokenAddress(NetworkPluginID.PLUGIN_EVM, { chainId })
+    const { data: token } = useFungibleToken(
+        NetworkPluginID.PLUGIN_EVM,
+        config.paymentToken ? config.paymentToken : nativeTokenAddress,
+        undefined,
+        { chainId },
+    )
+
+    const { data: tokenPrice } = useFungibleTokenPrice(
+        NetworkPluginID.PLUGIN_EVM,
+        config.paymentToken ? config.paymentToken : nativeTokenAddress,
+    )
 
     const [gasPrice = config.gasPrice || '', setGasPrice] = useState<string>()
     const [maxPriorityFeePerGas = config.maxPriorityFeePerGas || '', setMaxPriorityFeePerGas] = useState<string>()
@@ -99,10 +118,11 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
 
     const totalGas = useMemo(() => {
         if (!config.gas) return '0'
-        return formatGweiToWei((isSupport1559 ? maxFeePerGas : gasPrice) || ZERO)
-            .times(config.gas || ZERO)
-            .toFixed()
-    }, [gasPrice, config.gas, maxFeePerGas, isSupport1559])
+        const result = formatGweiToWei((isSupport1559 ? maxFeePerGas : gasPrice) || ZERO).times(config.gas || ZERO)
+
+        if (!gasRatio) return toFixed(result)
+        return toFixed(result.multipliedBy(gasRatio))
+    }, [gasPrice, config.gas, maxFeePerGas, isSupport1559, gasRatio])
 
     const gasPriceError = useMemo(() => {
         if (isSupport1559) return
@@ -227,9 +247,9 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
         <BottomDrawer open={open} title={title} onClose={onClose}>
             <Box display="flex" flexDirection="column" rowGap={1.5} mt={1.5}>
                 <Typography className={classes.preview}>
-                    {formatBalance(totalGas, nativeToken?.decimals, 4, false, true, 6)} {nativeToken?.symbol} ≈{' '}
+                    {formatBalance(totalGas, token?.decimals, 4, false, true, 6)} {token?.symbol} ≈{' '}
                     <FormattedCurrency
-                        value={formatWeiToEther(totalGas).times(nativeTokenPrice ?? 0)}
+                        value={formatWeiToEther(totalGas).times(tokenPrice ?? 0)}
                         formatter={formatCurrency}
                         options={{
                             onlyRemainTwoOrZeroDecimal: false,

packages/mask/src/extension/popups/pages/Wallet/type.ts

@@ -38,6 +38,7 @@ export type GasSetting = {
     gasPrice?: string
     maxPriorityFeePerGas?: string
     maxFeePerGas?: string
+    paymentToken?: string
 }
 
 export type TransactionDetail = {