From 3da6f477e6929ef08699e1050321ff830a3b8a8e Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Fri, 10 Jun 2022 20:01:51 +0800 Subject: [PATCH 01/14] feat(lucky drop): pre gas minus --- .../SNSAdaptor/RedPacketConfirmDialog.tsx | 93 +++++++++++++++---- .../SNSAdaptor/hooks/useCreateCallback.tsx | 15 ++- .../src/plugins/RedPacket/locales/en-US.json | 2 + 3 files changed, 87 insertions(+), 23 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx index cb1bb5b55307..7ae2fe5576fb 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx @@ -8,11 +8,19 @@ import LaunchIcon from '@mui/icons-material/Launch' import { FormattedBalance, useOpenShareTxDialog } from '@masknet/shared' import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton' import { useI18N } from '../locales' -import { RedPacketSettings, useCreateCallback } from './hooks/useCreateCallback' -import { useAccount, useChainId, useNetworkType, useWeb3 } from '@masknet/plugin-infra/web3' -import { NetworkPluginID, formatBalance } from '@masknet/web3-shared-base' +import { RedPacketSettings, useCreateCallback, useCreateParams } from './hooks/useCreateCallback' +import { + useAccount, + useChainId, + useNetworkType, + useWeb3, + useNativeToken, + useZeroAddress, +} from '@masknet/plugin-infra/web3' +import { NetworkPluginID, formatBalance, isSameAddress } from '@masknet/web3-shared-base' import type { RedPacketJSONPayload, RedPacketRecord } from '../types' import { RedPacketRPC } from '../messages' +import { useGasConfig } from '../../Trader/SNSAdaptor/trader/hooks/useGasConfig' const useStyles = makeStyles()((theme) => ({ link: { @@ -91,11 +99,36 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM) const account = useAccount(NetworkPluginID.PLUGIN_EVM) const networkType = useNetworkType(NetworkPluginID.PLUGIN_EVM) + const nativeTokenAddress = useZeroAddress(NetworkPluginID.PLUGIN_EVM) const { address: publicKey, privateKey } = useMemo( () => web3?.eth.accounts.create() ?? { address: '', privateKey: '' }, [web3], )! - const [{ loading: isCreating }, createCallback] = useCreateCallback(settings!, contract_version, publicKey) + const { value: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM) + + // #region amount minus estimate gas fee + const { gasPrice } = useGasConfig(chainId) + const { value: createParams } = useCreateParams(settings!, contract_version, publicKey) + const estimateGasFee = !createParams?.gas + ? undefined + : gasPrice && gasPrice !== '0' + ? new BigNumber(gasPrice).multipliedBy(createParams.gas ?? '0').toFixed() + : undefined + + const isNativeToken = isSameAddress(settings?.token?.address ?? '', nativeTokenAddress) + let total = isNativeToken + ? new BigNumber(settings?.total ?? '0').minus(estimateGasFee ?? '0').toFixed() + : (settings?.total as string) + const isBalanceInsufficient = new BigNumber(total).isLessThanOrEqualTo(0) + total = isBalanceInsufficient ? '0' : total + + const formatTotal = formatBalance(total, settings?.token?.decimals ?? 18, isNativeToken ? 6 : 0) + const [{ loading: isCreating }, createCallback] = useCreateCallback( + { ...settings!, total }, + contract_version, + publicKey, + ) + // #endregion const openShareTxDialog = useOpenShareTxDialog() const createRedpacket = useCallback(async () => { const receipt = await createCallback() @@ -210,26 +243,43 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { - {settings?.isRandom ? null : ( + {!estimateGasFee ? null : ( <> - {t.amount_per_share()} + {t.estimate_gas_fee()} )} + {settings?.isRandom ? null : ( + <> + + + {t.amount_per_share()} + + + + + {isBalanceInsufficient ? '0' : (Number(formatTotal) / (settings?.shares ?? 1)).toFixed(6)}{' '} + {settings?.token?.symbol} + + + + )} + {t.amount_total()} @@ -237,12 +287,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { - + {formatTotal} {settings?.token?.symbol} @@ -259,11 +304,19 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { - - {t.send_symbol({ - amount: formatBalance(settings?.total, settings?.token?.decimals ?? 0), - symbol: settings?.token?.symbol ?? '-', - })} + + {!isBalanceInsufficient + ? t.send_symbol({ + amount: formatTotal, + symbol: settings?.token?.symbol ?? '-', + }) + : t.insufficient_balance()} diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx index 8e8792fbf12f..45506487e8c4 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx @@ -1,5 +1,5 @@ import { useCallback } from 'react' -import { useAsyncFn } from 'react-use' +import { useAsync, useAsyncFn } from 'react-use' import Web3Utils from 'web3-utils' import type { TransactionReceipt } from 'web3-core' import { useAccount, useChainId } from '@masknet/plugin-infra/web3' @@ -54,7 +54,11 @@ interface CreateParams { gasError: Error | null } -export function useCreateParams(redPacketSettings: RedPacketSettings | undefined, version: number, publicKey: string) { +export function useCreateParamsCallback( + redPacketSettings: RedPacketSettings | undefined, + version: number, + publicKey: string, +) { const account = useAccount(NetworkPluginID.PLUGIN_EVM) const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) const { NATIVE_TOKEN_ADDRESS } = useTokenConstants(chainId) @@ -107,11 +111,16 @@ export function useCreateParams(redPacketSettings: RedPacketSettings | undefined return getCreateParams } +export function useCreateParams(redPacketSettings: RedPacketSettings, version: number, publicKey: string) { + const getCreateParams = useCreateParamsCallback(redPacketSettings, version, publicKey) + return useAsync(() => getCreateParams(), [redPacketSettings, version, publicKey]) +} + export function useCreateCallback(redPacketSettings: RedPacketSettings, version: number, publicKey: string) { const account = useAccount(NetworkPluginID.PLUGIN_EVM) const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) const redPacketContract = useRedPacketContract(chainId, version) - const getCreateParams = useCreateParams(redPacketSettings, version, publicKey) + const getCreateParams = useCreateParamsCallback(redPacketSettings, version, publicKey) return useAsyncFn(async () => { const { token } = redPacketSettings diff --git a/packages/mask/src/plugins/RedPacket/locales/en-US.json b/packages/mask/src/plugins/RedPacket/locales/en-US.json index b3491141c7f6..fa73aba4715c 100644 --- a/packages/mask/src/plugins/RedPacket/locales/en-US.json +++ b/packages/mask/src/plugins/RedPacket/locales/en-US.json @@ -52,10 +52,12 @@ "select_existing": "Past", "create_new": "New", "send_symbol": "Send {{amount}} {{symbol}}", + "insufficient_balance": "Insufficient Balance", "back": "Back", "hint": "You can withdraw the remaining balance 24 hours after the Lucky Drop is sent.", "amount_total": "Amount Total", "amount_per_share": "Amount per Share", + "estimate_gas_fee": "Estimate gas fee", "shares": "Shares", "average": "Average", "random": "Random", From 9f6474460697dab7b5e4bc88d02468669e46c7e3 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Sun, 12 Jun 2022 21:33:27 +0800 Subject: [PATCH 02/14] chore: reply code review --- .../RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx index 7ae2fe5576fb..fb4c6394088f 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx @@ -15,12 +15,12 @@ import { useNetworkType, useWeb3, useNativeToken, - useZeroAddress, + useNativeTokenAddress, + useGasConfig, } from '@masknet/plugin-infra/web3' import { NetworkPluginID, formatBalance, isSameAddress } from '@masknet/web3-shared-base' import type { RedPacketJSONPayload, RedPacketRecord } from '../types' import { RedPacketRPC } from '../messages' -import { useGasConfig } from '../../Trader/SNSAdaptor/trader/hooks/useGasConfig' const useStyles = makeStyles()((theme) => ({ link: { @@ -99,7 +99,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM) const account = useAccount(NetworkPluginID.PLUGIN_EVM) const networkType = useNetworkType(NetworkPluginID.PLUGIN_EVM) - const nativeTokenAddress = useZeroAddress(NetworkPluginID.PLUGIN_EVM) + const nativeTokenAddress = useNativeTokenAddress(NetworkPluginID.PLUGIN_EVM) const { address: publicKey, privateKey } = useMemo( () => web3?.eth.accounts.create() ?? { address: '', privateKey: '' }, [web3], @@ -115,7 +115,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { ? new BigNumber(gasPrice).multipliedBy(createParams.gas ?? '0').toFixed() : undefined - const isNativeToken = isSameAddress(settings?.token?.address ?? '', nativeTokenAddress) + const isNativeToken = isSameAddress(settings?.token?.address, nativeTokenAddress) let total = isNativeToken ? new BigNumber(settings?.total ?? '0').minus(estimateGasFee ?? '0').toFixed() : (settings?.total as string) From 5bf85abf238dab3f8bcfd5b2c74e0bd1706b346a Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Mon, 27 Jun 2022 11:44:58 +0800 Subject: [PATCH 03/14] chore: solve error --- .../plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx | 2 +- .../plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx index d24543263e62..be0f23012564 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx @@ -16,8 +16,8 @@ import { useWeb3, useNativeToken, useNativeTokenAddress, - useGasConfig, } from '@masknet/plugin-infra/web3' +import { useGasConfig } from '@masknet/plugin-infra/web3-evm' import { NetworkPluginID, formatBalance, isSameAddress } from '@masknet/web3-shared-base' import type { RedPacketJSONPayload, RedPacketRecord } from '../types' import { RedPacketRPC } from '../messages' diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx index 01463bf3835d..380744bdb658 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx @@ -124,13 +124,12 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version: const account = useAccount(NetworkPluginID.PLUGIN_EVM) const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) const redPacketContract = useRedPacketContract(chainId, version) - const getCreateParams = useCreateParams(redPacketSettings, version, publicKey) + const { value: createParams } = useCreateParams(redPacketSettings, version, publicKey) const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM) const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM) return useAsyncFn(async () => { const { token } = redPacketSettings - const createParams = await getCreateParams() if (!token || !redPacketContract || !createParams) return const { gas, params, paramsObj, gasError } = createParams @@ -171,5 +170,5 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version: } } return { hash, receipt } - }, [account, connection, redPacketContract, redPacketSettings, chainId, getCreateParams]) + }, [account, connection, redPacketContract, redPacketSettings, chainId, createParams]) } From 4193c6ee7a42b9417eea618bd9b50f5416929240 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Mon, 27 Jun 2022 20:05:44 +0800 Subject: [PATCH 04/14] fix: solve conflict --- .../src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx index be0f23012564..728d4aa6cff9 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx @@ -310,7 +310,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { {!isBalanceInsufficient ? t.send_symbol({ - amount: formatBalance(settings?.total, settings?.token?.decimals ?? 0), + amount: formatTotal, symbol: settings?.token?.symbol ?? '-', }) : t.insufficient_balance()} From 72e7d185128c6677d4c44505fd5bc0604267bf5c Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Mon, 27 Jun 2022 20:34:14 +0800 Subject: [PATCH 05/14] chore: format balance --- .../SNSAdaptor/RedPacketConfirmDialog.tsx | 7 ++++++- .../src/plugins/RedPacket/SNSAdaptor/index.tsx | 17 ++++++++++++++--- .../descriptors/RedPacket.ts | 14 ++++++++++++-- 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx index 728d4aa6cff9..d2e2f0de87c8 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx @@ -119,6 +119,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { let total = isNativeToken ? new BigNumber(settings?.total ?? '0').minus(estimateGasFee ?? '0').toFixed() : (settings?.total as string) + const isWaitGasBeMinus = !estimateGasFee && isNativeToken const isBalanceInsufficient = new BigNumber(total).isLessThanOrEqualTo(0) total = isBalanceInsufficient ? '0' : total @@ -307,7 +308,11 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { - + {!isBalanceInsufficient ? t.send_symbol({ amount: formatTotal, diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx index b052fd414538..3418d4cfba6f 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx @@ -1,5 +1,12 @@ import { type Plugin, usePluginWrapper, PluginId } from '@masknet/plugin-infra/content-script' -import { ChainId, SchemaType, chainResolver, networkResolver, NetworkType } from '@masknet/web3-shared-evm' +import { + ChainId, + SchemaType, + chainResolver, + networkResolver, + NetworkType, + isNativeTokenAddress, +} from '@masknet/web3-shared-evm' import { base } from '../base' import { RedPacketMetaKey, RedPacketNftMetaKey } from '../constants' import { @@ -157,8 +164,12 @@ function ERC20RedpacketBadge(props: ERC20RedpacketBadgeProps) { return (
A Lucky Drop with{' '} - {formatBalance(payload.total, tokenDetailed?.decimals ?? 0)} $ - {tokenDetailed?.symbol ?? tokenDetailed?.name ?? 'Token'} from {payload.sender.name} + {formatBalance( + payload.total, + tokenDetailed?.decimals ?? 0, + isNativeTokenAddress(payload.token?.address) ? 6 : 0, + )}{' '} + ${tokenDetailed?.symbol ?? tokenDetailed?.name ?? 'Token'} from {payload.sender.name}
) } diff --git a/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/RedPacket.ts b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/RedPacket.ts index 5f5bc9fec986..6425c7b39574 100644 --- a/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/RedPacket.ts +++ b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/RedPacket.ts @@ -1,5 +1,10 @@ import { i18NextInstance } from '@masknet/shared-base' -import { ChainId, getNftRedPacketConstants, getRedPacketConstants } from '@masknet/web3-shared-evm' +import { + ChainId, + getNftRedPacketConstants, + getRedPacketConstants, + isNativeTokenAddress, +} from '@masknet/web3-shared-evm' import type { TransactionDescriptor } from '../types' import { Web3StateSettings } from '../../../settings' import { isSameAddress, formatBalance, TransactionContext } from '@masknet/web3-shared-base' @@ -20,7 +25,12 @@ export class RedPacketDescriptor implements TransactionDescriptor { }) const token = await connection?.getFungibleToken(context.parameters?._token_addr ?? '') - const amount = formatBalance(context.parameters?._total_tokens, token?.decimals) + + const amount = formatBalance( + context.parameters?._total_tokens, + token?.decimals, + isNativeTokenAddress(context.parameters?._token_addr) ? 6 : 0, + ) return { chainId: context.chainId, From 6b1f702400fbd1a91f06b425ae34f0d4a382713d Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Tue, 28 Jun 2022 17:48:26 +0800 Subject: [PATCH 06/14] chore: apply confition apply only sum of gas and total greater than balance --- .../SNSAdaptor/RedPacketConfirmDialog.tsx | 31 ++++++++++++------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx index d2e2f0de87c8..5ae259631bdb 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx @@ -1,22 +1,23 @@ import BigNumber from 'bignumber.js' import classNames from 'classnames' import { useCallback, useEffect, useMemo, useRef } from 'react' -import { chainResolver, explorerResolver, isNativeTokenAddress, useRedPacketConstants } from '@masknet/web3-shared-evm' -import { Grid, Link, Paper, Typography } from '@mui/material' -import { makeStyles } from '@masknet/theme' -import LaunchIcon from '@mui/icons-material/Launch' -import { FormattedBalance, useOpenShareTxDialog } from '@masknet/shared' -import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton' -import { useI18N } from '../locales' -import { RedPacketSettings, useCreateCallback, useCreateParams } from './hooks/useCreateCallback' import { useAccount, useChainId, + useBalance, useNetworkType, useWeb3, useNativeToken, useNativeTokenAddress, } from '@masknet/plugin-infra/web3' +import { chainResolver, explorerResolver, isNativeTokenAddress, useRedPacketConstants } from '@masknet/web3-shared-evm' +import { Grid, Link, Paper, Typography } from '@mui/material' +import { makeStyles } from '@masknet/theme' +import LaunchIcon from '@mui/icons-material/Launch' +import { FormattedBalance, useOpenShareTxDialog } from '@masknet/shared' +import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton' +import { useI18N } from '../locales' +import { RedPacketSettings, useCreateCallback, useCreateParams } from './hooks/useCreateCallback' import { useGasConfig } from '@masknet/plugin-infra/web3-evm' import { NetworkPluginID, formatBalance, isSameAddress } from '@masknet/web3-shared-base' import type { RedPacketJSONPayload, RedPacketRecord } from '../types' @@ -87,6 +88,8 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { const t = useI18N() const { onBack, settings, onCreated, onClose } = props const { classes } = useStyles() + const { value: balance = '0', loading: loadingBalance } = useBalance(NetworkPluginID.PLUGIN_EVM) + console.log({ balance }) const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) useEffect(() => { if (settings?.token?.chainId !== chainId) onClose() @@ -116,10 +119,14 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { : undefined const isNativeToken = isSameAddress(settings?.token?.address, nativeTokenAddress) - let total = isNativeToken - ? new BigNumber(settings?.total ?? '0').minus(estimateGasFee ?? '0').toFixed() - : (settings?.total as string) - const isWaitGasBeMinus = !estimateGasFee && isNativeToken + let total = + isNativeToken && + new BigNumber(balance).isLessThan( + new BigNumber(settings?.total ?? '0').plus(new BigNumber(estimateGasFee ?? '')), + ) + ? new BigNumber(settings?.total ?? '0').minus(estimateGasFee ?? '0').toFixed() + : (settings?.total as string) + const isWaitGasBeMinus = (!estimateGasFee || loadingBalance) && isNativeToken const isBalanceInsufficient = new BigNumber(total).isLessThanOrEqualTo(0) total = isBalanceInsufficient ? '0' : total From 5938a9765432ca54b757ba9685b1a2870fb6df15 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 29 Jun 2022 09:37:05 +0800 Subject: [PATCH 07/14] chore: increase estimate gas --- .../plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx index 5ae259631bdb..aa4e9405e282 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx @@ -89,7 +89,6 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { const { onBack, settings, onCreated, onClose } = props const { classes } = useStyles() const { value: balance = '0', loading: loadingBalance } = useBalance(NetworkPluginID.PLUGIN_EVM) - console.log({ balance }) const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) useEffect(() => { if (settings?.token?.chainId !== chainId) onClose() @@ -115,7 +114,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { const estimateGasFee = !createParams?.gas ? undefined : gasPrice && gasPrice !== '0' - ? new BigNumber(gasPrice).multipliedBy(createParams.gas ?? '0').toFixed() + ? new BigNumber(gasPrice).multipliedBy(createParams.gas * 1.5).toFixed() : undefined const isNativeToken = isSameAddress(settings?.token?.address, nativeTokenAddress) @@ -129,8 +128,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { const isWaitGasBeMinus = (!estimateGasFee || loadingBalance) && isNativeToken const isBalanceInsufficient = new BigNumber(total).isLessThanOrEqualTo(0) total = isBalanceInsufficient ? '0' : total - - const formatTotal = formatBalance(total, settings?.token?.decimals ?? 18, isNativeToken ? 6 : 0) + const formatTotal = formatBalance(total, settings?.token?.decimals ?? 18, isNativeToken ? 3 : 0) const [{ loading: isCreating }, createCallback] = useCreateCallback( { ...settings!, total }, contract_version, From b8f292c59eeb4291b30e9583f47c9ff251d514d5 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Thu, 30 Jun 2022 10:28:31 +0800 Subject: [PATCH 08/14] chore: format significant --- .../src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx | 6 +++--- .../plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx index a322d1715fe3..a93ec9d003aa 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx @@ -109,7 +109,7 @@ export function RedPacket(props: RedPacketProps) { return t.description_claimed( availability.claimed_amount ? { - amount: formatBalance(availability.claimed_amount, token.decimals, 8), + amount: formatBalance(availability.claimed_amount, token.decimals, 6), symbol: token.symbol, } : { amount: '-', symbol: '-' }, @@ -122,7 +122,7 @@ export function RedPacket(props: RedPacketProps) { if (listOfStatus.includes(RedPacketStatus.expired) && canRefund) return t.description_refund({ - balance: formatBalance(availability.balance, token.decimals), + balance: formatBalance(availability.balance, token.decimals, 6), symbol: token.symbol ?? '-', }) if (listOfStatus.includes(RedPacketStatus.refunded)) return t.description_refunded() @@ -130,7 +130,7 @@ export function RedPacket(props: RedPacketProps) { if (listOfStatus.includes(RedPacketStatus.empty)) return t.description_empty() if (!payload.password) return t.description_broken() return t.description_failover({ - total: formatBalance(payload.total, token.decimals), + total: formatBalance(payload.total, token.decimals, 6), symbol: token.symbol ?? '-', shares: payload.shares.toString() ?? '-', }) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx index aa4e9405e282..8d7ca9dea580 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx @@ -266,7 +266,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { decimals={nativeToken?.decimals} symbol={nativeToken?.symbol} formatter={formatBalance} - significant={6} + significant={isNativeToken ? 3 : 0} /> From 4b67e7cf92ecfb5fcc974fe47e651266b6dc21c3 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Thu, 30 Jun 2022 11:18:33 +0800 Subject: [PATCH 09/14] chore: reply code review --- .../plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx index 380744bdb658..9fef50607064 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx @@ -124,12 +124,13 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version: const account = useAccount(NetworkPluginID.PLUGIN_EVM) const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) const redPacketContract = useRedPacketContract(chainId, version) - const { value: createParams } = useCreateParams(redPacketSettings, version, publicKey) + const getCreateParams = useCreateParamsCallback(redPacketSettings, version, publicKey) const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM) const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM) return useAsyncFn(async () => { const { token } = redPacketSettings + const createParams = await getCreateParams() if (!token || !redPacketContract || !createParams) return const { gas, params, paramsObj, gasError } = createParams @@ -170,5 +171,5 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version: } } return { hash, receipt } - }, [account, connection, redPacketContract, redPacketSettings, chainId, createParams]) + }, [account, connection, redPacketContract, redPacketSettings, chainId]) } From f56f2bd8aa259c3bed45cd98ae3c5b5f99dfa739 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Fri, 1 Jul 2022 11:18:01 +0800 Subject: [PATCH 10/14] chore: format significant --- .../src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx index a93ec9d003aa..9beeb9f23a12 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx @@ -109,7 +109,7 @@ export function RedPacket(props: RedPacketProps) { return t.description_claimed( availability.claimed_amount ? { - amount: formatBalance(availability.claimed_amount, token.decimals, 6), + amount: formatBalance(availability.claimed_amount, token.decimals, 2), symbol: token.symbol, } : { amount: '-', symbol: '-' }, @@ -122,7 +122,7 @@ export function RedPacket(props: RedPacketProps) { if (listOfStatus.includes(RedPacketStatus.expired) && canRefund) return t.description_refund({ - balance: formatBalance(availability.balance, token.decimals, 6), + balance: formatBalance(availability.balance, token.decimals, 2), symbol: token.symbol ?? '-', }) if (listOfStatus.includes(RedPacketStatus.refunded)) return t.description_refunded() @@ -130,7 +130,7 @@ export function RedPacket(props: RedPacketProps) { if (listOfStatus.includes(RedPacketStatus.empty)) return t.description_empty() if (!payload.password) return t.description_broken() return t.description_failover({ - total: formatBalance(payload.total, token.decimals, 6), + total: formatBalance(payload.total, token.decimals, 2), symbol: token.symbol ?? '-', shares: payload.shares.toString() ?? '-', }) From f6a14d28b9ed4e4ec9115a475f440582ff91d52b Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Fri, 8 Jul 2022 11:02:17 +0800 Subject: [PATCH 11/14] chore: i18n --- .../plugins/RedPacket/SNSAdaptor/index.tsx | 19 ++++++++++++------- .../src/plugins/RedPacket/locales/en-US.json | 1 + 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx index 3418d4cfba6f..1b8aa23efa1d 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx @@ -15,6 +15,7 @@ import { renderWithRedPacketMetadata, renderWithRedPacketNftMetadata, } from './helpers' +import { useI18N } from '../locales' import type { RedPacketJSONPayload, RedPacketNftJSONPayload } from '../types' import RedPacketDialog from './RedPacketDialog' import { RedPacketInPost } from './RedPacketInPost' @@ -154,6 +155,7 @@ interface ERC20RedpacketBadgeProps { function ERC20RedpacketBadge(props: ERC20RedpacketBadgeProps) { const { payload } = props + const t = useI18N() const { value: fetchedToken } = useFungibleToken( NetworkPluginID.PLUGIN_EVM, payload.token?.address ?? payload.token?.address, @@ -163,13 +165,16 @@ function ERC20RedpacketBadge(props: ERC20RedpacketBadgeProps) { const tokenDetailed = payload.token?.schema === SchemaType.Native ? nativeCurrency : payload.token ?? fetchedToken return (
- A Lucky Drop with{' '} - {formatBalance( - payload.total, - tokenDetailed?.decimals ?? 0, - isNativeTokenAddress(payload.token?.address) ? 6 : 0, - )}{' '} - ${tokenDetailed?.symbol ?? tokenDetailed?.name ?? 'Token'} from {payload.sender.name} + + {t.badge({ + balance: formatBalance( + payload.total, + tokenDetailed?.decimals ?? 0, + isNativeTokenAddress(payload.token?.address) ? 6 : 0, + ), + tokenName: tokenDetailed?.symbol ?? tokenDetailed?.name ?? 'Token', + sender: payload.sender.name, + })}
) } diff --git a/packages/mask/src/plugins/RedPacket/locales/en-US.json b/packages/mask/src/plugins/RedPacket/locales/en-US.json index 1bd8f3e0957b..8f79904442b5 100644 --- a/packages/mask/src/plugins/RedPacket/locales/en-US.json +++ b/packages/mask/src/plugins/RedPacket/locales/en-US.json @@ -2,6 +2,7 @@ "promote": "🧧🧧🧧 Try sending Lucky Drop to your friends with tokens or NFTs to share the joy now! Install Mask.io to send your first Lucky Drop.", "promote_short": "🧧🧧🧧 Try sending Lucky Drop to your friends with Mask.io.", "nft_shift_select_tip": "You can also use {{text}} to select multiple NFTs.", + "badge": "A Lucky Drop with {{balance}} {{tokenName}} from {{sender}}", "collections": "Collections", "select_a_token": "Select a Token", "search": "Search", From bb651a794e84a0319286b8b0e9e0f230d5a52661 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Fri, 8 Jul 2022 18:15:25 +0800 Subject: [PATCH 12/14] chore: reply code review --- .../src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx index 8783306ee596..7ca1725515b4 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx @@ -123,7 +123,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { let total = isNativeToken && new BigNumber(balance).isLessThan( - new BigNumber(settings?.total ?? '0').plus(new BigNumber(estimateGasFee ?? '')), + new BigNumber(settings?.total ?? '0').plus(new BigNumber(estimateGasFee ?? '0')), ) ? new BigNumber(settings?.total ?? '0').minus(estimateGasFee ?? '0').toFixed() : (settings?.total as string) From aaaff5fc631124ab4b161ab7850b924444e755b8 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Fri, 8 Jul 2022 20:11:32 +0800 Subject: [PATCH 13/14] chore: use big number --- .../src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx index 7ca1725515b4..c70c95674ac8 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx @@ -287,7 +287,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { {isBalanceInsufficient ? '0' - : (Number(formatTotal) / (settings?.shares ?? 1)).toFixed(6)}{' '} + : new BigNumber(formatTotal).div(settings?.shares ?? 1).toFixed(6)}{' '} {settings?.token?.symbol} From e54233666d58b1b2adf8f0823597449fdfaafb07 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Mon, 11 Jul 2022 15:36:51 +0800 Subject: [PATCH 14/14] chore: add useTransactionValue hook --- .../SNSAdaptor/RedPacketConfirmDialog.tsx | 21 +++------------ packages/plugin-infra/src/web3/EVM/index.ts | 1 + .../src/web3/EVM/useTransactionValue.ts | 27 +++++++++++++++++++ 3 files changed, 32 insertions(+), 17 deletions(-) create mode 100644 packages/plugin-infra/src/web3/EVM/useTransactionValue.ts diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx index c70c95674ac8..e7feaca80ae2 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx @@ -18,7 +18,7 @@ import { FormattedBalance, useOpenShareTxDialog } from '@masknet/shared' import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton' import { useI18N } from '../locales' import { RedPacketSettings, useCreateCallback, useCreateParams } from './hooks/useCreateCallback' -import { useGasConfig } from '@masknet/plugin-infra/web3-evm' +import { useTransactionValue } from '@masknet/plugin-infra/web3-evm' import { NetworkPluginID, formatBalance, isSameAddress } from '@masknet/web3-shared-base' import type { RedPacketJSONPayload, RedPacketRecord } from '../types' import { RedPacketRPC } from '../messages' @@ -111,25 +111,12 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { const { value: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM) // #region amount minus estimate gas fee - const { gasPrice } = useGasConfig(chainId) const { value: createParams } = useCreateParams(settings!, contract_version, publicKey) - const estimateGasFee = !createParams?.gas - ? undefined - : gasPrice && gasPrice !== '0' - ? new BigNumber(gasPrice).multipliedBy(createParams.gas * 1.5).toFixed() - : undefined - const isNativeToken = isSameAddress(settings?.token?.address, nativeTokenAddress) - let total = - isNativeToken && - new BigNumber(balance).isLessThan( - new BigNumber(settings?.total ?? '0').plus(new BigNumber(estimateGasFee ?? '0')), - ) - ? new BigNumber(settings?.total ?? '0').minus(estimateGasFee ?? '0').toFixed() - : (settings?.total as string) + const { transactionValue, estimateGasFee } = useTransactionValue(settings?.total, createParams?.gas) const isWaitGasBeMinus = (!estimateGasFee || loadingBalance) && isNativeToken - const isBalanceInsufficient = new BigNumber(total).isLessThanOrEqualTo(0) - total = isBalanceInsufficient ? '0' : total + const isBalanceInsufficient = new BigNumber(transactionValue).isLessThanOrEqualTo(0) + const total = isNativeToken ? (isBalanceInsufficient ? '0' : transactionValue) : (settings?.total as string) const formatTotal = formatBalance(total, settings?.token?.decimals ?? 18, isNativeToken ? 3 : 0) const [{ loading: isCreating }, createCallback] = useCreateCallback( { ...settings!, total }, diff --git a/packages/plugin-infra/src/web3/EVM/index.ts b/packages/plugin-infra/src/web3/EVM/index.ts index edb258a194ec..9076bf6a2163 100644 --- a/packages/plugin-infra/src/web3/EVM/index.ts +++ b/packages/plugin-infra/src/web3/EVM/index.ts @@ -8,6 +8,7 @@ export * from './useERC721ContractIsApproveForAll' export * from './useERC721ContractSetApproveForAllCallback' export * from './useERC721TokenTransferCallback' export * from './useGasConfig' +export * from './useTransactionValue' export * from './useMulticall' export * from './useNativeTokenTransferCallback' export * from './useNativeTokenWrapperCallback' diff --git a/packages/plugin-infra/src/web3/EVM/useTransactionValue.ts b/packages/plugin-infra/src/web3/EVM/useTransactionValue.ts new file mode 100644 index 000000000000..a3e53b2f9ec1 --- /dev/null +++ b/packages/plugin-infra/src/web3/EVM/useTransactionValue.ts @@ -0,0 +1,27 @@ +import { useBalance } from '../useBalance' +import BigNumber from 'bignumber.js' +import { useGasConfig } from './useGasConfig' +import { useChainId } from '../useChainId' +import { NetworkPluginID } from '@masknet/web3-shared-base' + +export function useTransactionValue(originalValue: BigNumber.Value | undefined, gas: number | undefined) { + const { value: balance = '0' } = useBalance(NetworkPluginID.PLUGIN_EVM) + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) + + // #region amount minus estimate gas fee + const { gasPrice } = useGasConfig(chainId) + + const estimateGasFee = !gas + ? undefined + : gasPrice && gasPrice !== '0' + ? new BigNumber(gasPrice).multipliedBy(gas * 1.5).toFixed() + : undefined + + const transactionValue = new BigNumber(balance).isLessThan( + new BigNumber(originalValue ?? '0').plus(new BigNumber(estimateGasFee ?? '0')), + ) + ? new BigNumber(originalValue ?? '0').minus(estimateGasFee ?? '0').toFixed() + : (originalValue as string) + + return { transactionValue, estimateGasFee } +}