refactor: improve big number practice

packages/dashboard/package.json

@@ -22,6 +22,7 @@
     "@masknet/shared-base": "workspace:*",
     "@masknet/storybook-shared": "workspace:*",
     "@masknet/theme": "workspace:*",
+    "@masknet/web3-shared-base": "workspace:*",
     "@masknet/web3-shared-evm": "workspace:*",
     "@msgpack/msgpack": "^2.7.1",
     "@servie/events": "^3.0.0",

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

@@ -178,7 +178,7 @@ export const TokenTableUI = memo<TokenTableUIProps>(({ onSwap, onSend, isLoading
                                         Utils?.formatBalance?.(second.balance, second.token.decimals) ?? '',
                                     )
 
-                                    if (firstValue.eq(secondValue)) return 0
+                                    if (firstValue.isEqualTo(secondValue)) return 0
 
                                     return Number(firstValue.lt(secondValue))
                                 })

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

@@ -15,6 +15,7 @@ import {
 import { useDashboardI18N } from '../../../../locales'
 import { ChangeNetworkTip } from './ChangeNetworkTip'
 import { getTokenUSDValue } from '../../utils/getTokenUSDValue'
+import { pow10 } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     icon: {
@@ -111,7 +112,7 @@ export const FungibleTokenTableRow = memo<TokenTableRowProps>(({ asset, onSend,
             <TableCell className={classes.cell} align="center" variant="body">
                 <Typography>
                     {asset.price?.[CurrencyType.USD]
-                        ? new BigNumber(asset.price[CurrencyType.USD] ?? '').gt(new BigNumber(10).pow(-6))
+                        ? new BigNumber(asset.price[CurrencyType.USD] ?? '').gt(pow10(-6))
                             ? Utils?.formatCurrency?.(Number.parseFloat(asset.price[CurrencyType.USD] ?? ''), '$')
                             : '<0.000001'
                         : '-'}

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

@@ -6,8 +6,6 @@ import {
     formatWeiToEther,
     FungibleTokenDetailed,
     isEIP1559Supported,
-    isGreaterThan,
-    isZero,
     TransactionStateType,
     useChainId,
     useFungibleTokenBalance,
@@ -16,6 +14,7 @@ import {
     useNativeTokenDetailed,
     useTokenTransferCallback,
 } from '@masknet/web3-shared-evm'
+import { isGreaterThan, isZero, multipliedBy, rightShift } from '@masknet/web3-shared-base'
 import BigNumber from 'bignumber.js'
 import { NetworkPluginID, useLookupAddress, useNetworkDescriptor, useWeb3State } from '@masknet/plugin-infra'
 import { FormattedAddress, TokenAmountPanel } from '@masknet/shared'
@@ -75,7 +74,7 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
     //#endregion
 
     // transfer amount
-    const transferAmount = new BigNumber(amount || '0').shiftedBy(selectedToken.decimals).toFixed()
+    const transferAmount = rightShift(amount || '0', selectedToken.decimals).toFixed()
     const erc20GasLimit = useGasLimit(
         selectedToken.type,
         selectedToken.address,
@@ -91,7 +90,7 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
 
     const gasFee = useMemo(() => {
         const price = is1559Supported && maxFee ? new BigNumber(maxFee) : gasPrice
-        return new BigNumber(gasLimit).multipliedBy(price)
+        return multipliedBy(gasLimit, price)
     }, [gasLimit, gasPrice, maxFee, is1559Supported])
     const gasFeeInUsd = formatWeiToEther(gasFee).multipliedBy(nativeTokenPrice)
 
@@ -120,7 +119,7 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
     //#region validation
     const validationMessage = useMemo(() => {
         if (!transferAmount || isZero(transferAmount)) return t.wallets_transfer_error_amount_absence()
-        if (isGreaterThan(new BigNumber(amount).shiftedBy(selectedToken.decimals).toFixed(), maxAmount))
+        if (isGreaterThan(rightShift(amount, selectedToken.decimals), maxAmount))
             return t.wallets_transfer_error_insufficient_balance({ symbol: selectedToken.symbol ?? '' })
         if (!address) return t.wallets_transfer_error_address_absence()
         if (!EthereumAddress.isValid(address)) return t.wallets_transfer_error_invalid_address()

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

@@ -28,7 +28,6 @@ import { Controller, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import TuneIcon from '@mui/icons-material/Tune'
-import BigNumber from 'bignumber.js'
 import { useNativeTokenPrice } from './useNativeTokenPrice'
 import { useNavigate } from 'react-router'
 import { RoutePaths } from '../../../../type'
@@ -39,6 +38,7 @@ import { TransferTab } from './types'
 import { NetworkPluginID, useLookupAddress, useNetworkDescriptor, useWeb3State } from '@masknet/plugin-infra'
 import { NetworkType } from '@masknet/public-api'
 import { useUpdateEffect } from 'react-use'
+import { multipliedBy } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     disabled: {
@@ -144,7 +144,7 @@ export const TransferERC721 = memo(() => {
     // gas price
     const { value: defaultGasPrice = '0' } = useGasPrice()
     const gasPrice = gasConfig.gasPrice || defaultGasPrice
-    const gasFee = useMemo(() => new BigNumber(gasLimit).multipliedBy(gasPrice), [gasLimit, gasPrice])
+    const gasFee = useMemo(() => multipliedBy(gasLimit, gasPrice), [gasLimit, gasPrice])
     const gasFeeInUsd = formatWeiToEther(gasFee).multipliedBy(nativeTokenPrice)
 
     // dialog

packages/mask/package.json

@@ -31,6 +31,7 @@
     "@masknet/shared-base": "workspace:*",
     "@masknet/theme": "workspace:*",
     "@masknet/web3-contracts": "workspace:*",
+    "@masknet/web3-shared-base": "workspace:*",
     "@masknet/web3-shared-evm": "workspace:*",
     "@msgpack/msgpack": "^2.7.1",
     "@servie/events": "^3.0.0",

packages/mask/src/components/shared/TokenPrice.tsx

@@ -1,7 +1,8 @@
 import type { FC, HTMLProps } from 'react'
-import BigNumber from 'bignumber.js'
+import type BigNumber from 'bignumber.js'
 import { ChainId, CurrencyType, isSameAddress, ZERO_ADDRESS } from '@masknet/web3-shared-evm'
 import { useNativeTokenPrice, useTokenPrice } from '../../plugins/Wallet/hooks/useTokenPrice'
+import { multipliedBy } from '@masknet/web3-shared-base'
 
 interface TokenPriceProps extends Omit<HTMLProps<HTMLSpanElement>, 'children'> {
     chainId: ChainId
@@ -20,5 +21,5 @@ export const TokenPrice: FC<TokenPriceProps> = ({
     const tokenPrice = useTokenPrice(chainId, contractAddress?.toLowerCase(), currencyType)
     const nativeTokenPrice = useNativeTokenPrice(chainId)
     const price = isSameAddress(contractAddress, ZERO_ADDRESS) ? nativeTokenPrice : tokenPrice
-    return <span {...rest}>${new BigNumber(amount).multipliedBy(price).toFixed(2)}</span>
+    return <span {...rest}>${multipliedBy(amount, price).toFixed(2)}</span>
 }

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

@@ -30,6 +30,7 @@ import { useNativeTokenPrice, useTokenPrice } from '../../../../../plugins/Walle
 import { LoadingPlaceholder } from '../../../components/LoadingPlaceholder'
 import { toHex } from 'web3-utils'
 import { NetworkPluginID, useReverseAddress, useWeb3State } from '@masknet/plugin-infra'
+import { isGreaterThan, leftShift, pow10 } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()(() => ({
     container: {
@@ -281,8 +282,7 @@ const ContractInteraction = memo(() => {
     // token estimated value
     const tokenPrice = useTokenPrice(chainId, !isNativeTokenInteraction ? token?.address : undefined)
     const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
-    const tokenValueUSD = new BigNumber(tokenAmount)
-        .shiftedBy(-(tokenDecimals ?? 0))
+    const tokenValueUSD = leftShift(tokenAmount, tokenDecimals)
         .times((!isNativeTokenInteraction ? tokenPrice : nativeTokenPrice) ?? 0)
         .toString()
 
@@ -334,7 +334,7 @@ const ContractInteraction = memo(() => {
                         {tokenDecimals !== undefined ? (
                             <>
                                 <Typography className={classes.amount}>
-                                    {new BigNumber(formatBalance(tokenAmount, tokenDecimals)).isGreaterThan(10 ** 9) ? (
+                                    {isGreaterThan(formatBalance(tokenAmount, tokenDecimals), pow10(9)) ? (
                                         'infinite'
                                     ) : (
                                         <FormattedBalance
@@ -346,7 +346,7 @@ const ContractInteraction = memo(() => {
                                     )}
                                 </Typography>
                                 <Typography>
-                                    {new BigNumber(tokenValueUSD).isGreaterThan(10 ** 9) ? (
+                                    {isGreaterThan(tokenValueUSD, pow10(9)) ? (
                                         'infinite'
                                     ) : (
                                         <FormattedCurrency value={tokenValueUSD} sign="$" formatter={formatCurrency} />
@@ -382,7 +382,7 @@ const ContractInteraction = memo(() => {
                             {t('popups_wallet_contract_interaction_total')}
                         </Typography>
                         <Typography className={classes.gasPrice}>
-                            {new BigNumber(totalUSD).isGreaterThan(10 ** 9) ? (
+                            {isGreaterThan(totalUSD, pow10(9)) ? (
                                 'infinite'
                             ) : (
                                 <FormattedCurrency value={totalUSD} sign="$" formatter={formatCurrency} />

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

@@ -24,6 +24,14 @@ import { useHistory } from 'react-router-dom'
 import { useNativeTokenPrice } from '../../../../../plugins/Wallet/hooks/useTokenPrice'
 import { PopupRoutes } from '@masknet/shared-base'
 import { toHex, fromWei } from 'web3-utils'
+import {
+    isGreaterThan,
+    isGreaterThanOrEqualTo,
+    isLessThan,
+    isLessThanOrEqualTo,
+    isPositive,
+    multipliedBy,
+} from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     options: {
@@ -187,19 +195,16 @@ export const GasSetting1559 = memo(() => {
                     .string()
                     .min(1, t('wallet_transfer_error_gas_limit_absence'))
                     .refine(
-                        (gasLimit) => new BigNumber(gasLimit).isGreaterThanOrEqualTo(minGasLimit ?? 0),
+                        (gasLimit) => isGreaterThanOrEqualTo(gasLimit, minGasLimit ?? 0),
                         t('popups_wallet_gas_fee_settings_min_gas_limit_tips', { limit: minGasLimit }),
                     ),
                 maxPriorityFeePerGas: zod
                     .string()
                     .min(1, t('wallet_transfer_error_max_priority_fee_absence'))
-                    .refine(
-                        (value) => new BigNumber(value).isPositive(),
-                        t('wallet_transfer_error_max_priority_gas_fee_positive'),
-                    ),
+                    .refine(isPositive, t('wallet_transfer_error_max_priority_gas_fee_positive')),
                 maxFeePerGas: zod.string().min(1, t('wallet_transfer_error_max_fee_absence')),
             })
-            .refine((data) => new BigNumber(data.maxPriorityFeePerGas).isLessThanOrEqualTo(data.maxFeePerGas), {
+            .refine((data) => isLessThanOrEqualTo(data.maxPriorityFeePerGas, data.maxFeePerGas), {
                 message: t('wallet_transfer_error_max_priority_gas_fee_imbalance'),
                 path: ['maxFeePerGas'],
             })
@@ -300,13 +305,12 @@ export const GasSetting1559 = memo(() => {
     //#region These are additional form rules that need to be prompted for but do not affect the validation of the form
     const maxPriorFeeHelperText = useMemo(() => {
         if (getGasOptionsLoading) return undefined
-        if (new BigNumber(maxPriorityFeePerGas).isLessThan(gasOptions?.low?.suggestedMaxPriorityFeePerGas ?? 0))
+        if (isLessThan(maxPriorityFeePerGas, gasOptions?.low?.suggestedMaxPriorityFeePerGas ?? 0))
             return t('wallet_transfer_error_max_priority_gas_fee_too_low')
         if (
-            new BigNumber(maxPriorityFeePerGas).isGreaterThan(
-                new BigNumber(gasOptions?.high?.suggestedMaxPriorityFeePerGas ?? 0).multipliedBy(
-                    HIGH_FEE_WARNING_MULTIPLIER,
-                ),
+            isGreaterThan(
+                maxPriorityFeePerGas,
+                multipliedBy(gasOptions?.high?.suggestedMaxPriorityFeePerGas ?? 0, HIGH_FEE_WARNING_MULTIPLIER),
             )
         )
             return t('wallet_transfer_error_max_priority_gas_fee_too_high')
@@ -315,11 +319,12 @@ export const GasSetting1559 = memo(() => {
 
     const maxFeeGasHelperText = useMemo(() => {
         if (getGasOptionsLoading) return undefined
-        if (new BigNumber(maxFeePerGas).isLessThan(gasOptions?.estimatedBaseFee ?? 0))
+        if (isLessThan(maxFeePerGas, gasOptions?.estimatedBaseFee ?? 0))
             return t('wallet_transfer_error_max_fee_too_low')
         if (
-            new BigNumber(maxFeePerGas).isGreaterThan(
-                new BigNumber(gasOptions?.high?.suggestedMaxFeePerGas ?? 0).multipliedBy(HIGH_FEE_WARNING_MULTIPLIER),
+            isGreaterThan(
+                maxFeePerGas,
+                multipliedBy(gasOptions?.high?.suggestedMaxFeePerGas ?? 0, HIGH_FEE_WARNING_MULTIPLIER),
             )
         )
             return t('wallet_transfer_error_max_fee_too_high')

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

@@ -28,6 +28,7 @@ import { useAsyncFn } from 'react-use'
 import { useContainer } from 'unstated-next'
 import { WalletContext } from '../hooks/useWalletContext'
 import Services from '../../../../service'
+import { isPositive, multipliedBy } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()({
     container: {
@@ -96,10 +97,7 @@ const ReplaceTransaction = memo(() => {
                 ? zod
                       .string()
                       .min(1, t('wallet_transfer_error_max_priority_fee_absence'))
-                      .refine(
-                          (value) => new BigNumber(value).isPositive(),
-                          t('wallet_transfer_error_max_priority_gas_fee_positive'),
-                      )
+                      .refine(isPositive, t('wallet_transfer_error_max_priority_gas_fee_positive'))
                 : zod.string().optional(),
             maxFeePerGas: is1559
                 ? zod.string().min(1, t('wallet_transfer_error_max_fee_absence'))
@@ -135,8 +133,7 @@ const ReplaceTransaction = memo(() => {
     const gasPriceEIP1559 = new BigNumber(maxFeePerGas ? maxFeePerGas : 0)
     const gasPricePrior1559 = new BigNumber(gasPrice ? gasPrice : 0)
 
-    const gasFee = new BigNumber(is1559 ? gasPriceEIP1559 : gasPricePrior1559)
-        .multipliedBy(gas ?? 0)
+    const gasFee = multipliedBy(is1559 ? gasPriceEIP1559 : gasPricePrior1559, gas ?? 0)
         .integerValue()
         .toFixed()
 

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

@@ -10,14 +10,13 @@ import {
     formatGweiToWei,
     formatWeiToGwei,
     formatEthereumAddress,
-    isGreaterThan,
-    isZero,
     useChainId,
     useGasLimit,
     useTokenTransferCallback,
     useWallet,
     useFungibleTokenBalance,
 } from '@masknet/web3-shared-evm'
+import { isZero, isGreaterThan, isGreaterThanOrEqualTo, multipliedBy, rightShift } from '@masknet/web3-shared-base'
 import { Controller, FormProvider, useForm, useFormContext } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useAsync, useAsyncFn, useUpdateEffect } from 'react-use'
@@ -155,18 +154,18 @@ export const Prior1559Transfer = memo<Prior1559TransferProps>(({ selectedAsset,
             amount: zod
                 .string()
                 .refine((amount) => {
-                    const transferAmount = new BigNumber(amount || '0').shiftedBy(selectedAsset?.token.decimals ?? 0)
+                    const transferAmount = rightShift(amount || '0', selectedAsset?.token.decimals)
                     return !!transferAmount || !isZero(transferAmount)
                 }, t('wallet_transfer_error_amount_absence'))
                 .refine((amount) => {
-                    const transferAmount = new BigNumber(amount || '0').shiftedBy(selectedAsset?.token.decimals ?? 0)
+                    const transferAmount = rightShift(amount || '0', selectedAsset?.token.decimals)
                     return !isGreaterThan(transferAmount, selectedAsset?.balance ?? 0)
                 }, t('wallet_transfer_error_insufficient_balance', { token: selectedAsset?.token.symbol })),
             gasLimit: zod
                 .string()
                 .min(1, t('wallet_transfer_error_gas_limit_absence'))
                 .refine(
-                    (gasLimit) => new BigNumber(gasLimit).isGreaterThanOrEqualTo(minGasLimitContext),
+                    (gasLimit) => isGreaterThanOrEqualTo(gasLimit, minGasLimitContext),
                     t('popups_wallet_gas_fee_settings_min_gas_limit_tips', { limit: minGasLimitContext }),
                 ),
             gasPrice: zod.string().min(1, t('wallet_transfer_error_gas_price_absence')),
@@ -206,7 +205,7 @@ export const Prior1559Transfer = memo<Prior1559TransferProps>(({ selectedAsset,
     const { value: minGasLimit, error } = useGasLimit(
         selectedAsset?.token.type,
         selectedAsset?.token.address,
-        new BigNumber(!!amount ? amount : 0).shiftedBy(selectedAsset?.token.decimals ?? 0).toFixed(),
+        rightShift(!!amount ? amount : 0, selectedAsset?.token.decimals).toFixed(),
         EthereumAddress.isValid(address) ? address : '',
     )
     //#endregion
@@ -220,7 +219,7 @@ export const Prior1559Transfer = memo<Prior1559TransferProps>(({ selectedAsset,
         let amount_ = new BigNumber(tokenBalance || '0')
         amount_ =
             selectedAsset?.token.type === EthereumTokenType.Native
-                ? amount_.minus(new BigNumber(30000).multipliedBy(gasPrice))
+                ? amount_.minus(multipliedBy(30000, gasPrice))
                 : amount_
 
         return amount_.toFixed()
@@ -246,9 +245,7 @@ export const Prior1559Transfer = memo<Prior1559TransferProps>(({ selectedAsset,
 
     const [{ loading }, onSubmit] = useAsyncFn(
         async (data: zod.infer<typeof schema>) => {
-            const transferAmount = new BigNumber(data.amount || '0')
-                .shiftedBy(selectedAsset?.token.decimals || 0)
-                .toFixed()
+            const transferAmount = rightShift(data.amount || '0', selectedAsset?.token.decimals).toFixed()
             await transferCallback(transferAmount, data.address, {
                 gasPrice: toHex(formatGweiToWei(data.gasPrice).toString()),
                 gas: new BigNumber(data.gasLimit).toNumber(),