From 5c42fad8cf46bbf765585fa91b28c5b68be17f2d Mon Sep 17 00:00:00 2001 From: unclebill Date: Thu, 14 Jul 2022 00:04:13 +0800 Subject: [PATCH 1/2] fix: don't change props --- .../plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx index 5b3e0329fc63..2f641c838c0c 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx @@ -179,7 +179,8 @@ export interface RedPacketInHistoryListProps { onSelect: (payload: RedPacketJSONPayload) => void } export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) { - const { history, onSelect } = props + const { onSelect } = props + const history: RedPacketInHistoryListProps['history'] = { ...props.history } const t = useI18N() const { classes } = useStyles() const account = useAccount(NetworkPluginID.PLUGIN_EVM) From 5b4d4f35066a894dc6906527a788c35969950333 Mon Sep 17 00:00:00 2001 From: unclebill Date: Thu, 14 Jul 2022 00:10:06 +0800 Subject: [PATCH 2/2] fixup! fix: don't change props --- .../SNSAdaptor/RedPacketInHistoryList.tsx | 43 +++++++++++-------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx index 2f641c838c0c..e5fb4975f681 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx @@ -1,4 +1,4 @@ -import { MouseEvent, useCallback, useState } from 'react' +import { MouseEvent, useCallback, useState, useMemo } from 'react' import { useAsync } from 'react-use' import { Interface } from '@ethersproject/abi' import BigNumber from 'bignumber.js' @@ -179,8 +179,7 @@ export interface RedPacketInHistoryListProps { onSelect: (payload: RedPacketJSONPayload) => void } export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) { - const { onSelect } = props - const history: RedPacketInHistoryListProps['history'] = { ...props.history } + const { history, onSelect } = props const t = useI18N() const { classes } = useStyles() const account = useAccount(NetworkPluginID.PLUGIN_EVM) @@ -210,33 +209,37 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) { rpid: eventParams.id, creation_time: eventParams.creation_time.toNumber() * 1000, } - }, [connection, history, HAPPY_RED_PACKET_ADDRESS_V4]) + }, [connection, history.txid, HAPPY_RED_PACKET_ADDRESS_V4]) const rpid = receipt?.rpid ?? '' const creation_time = receipt?.creation_time ?? 0 - history.rpid = rpid + const patchedHistory: RedPacketJSONPayload | RedPacketJSONPayloadFromChain = useMemo( + () => ({ ...props.history, rpid }), + [props.history, rpid], + ) const { value: availability, computed: { canRefund, canSend, listOfStatus, isPasswordValid }, retry: revalidateAvailability, - } = useAvailabilityComputed(account, { ...history, creation_time }) + } = useAvailabilityComputed(account, { ...patchedHistory, creation_time }) const claimerNumber = availability ? Number(availability.claimed) : 0 const total_remaining = availability?.balance const [{ loading: isRefunding }, refunded, refundCallback] = useRefundCallback( - history.contract_version, + patchedHistory.contract_version, account, rpid, ) const tokenAddress = - (history as RedPacketJSONPayload).token?.address ?? (history as RedPacketJSONPayloadFromChain).token_address + (patchedHistory as RedPacketJSONPayload).token?.address ?? + (patchedHistory as RedPacketJSONPayloadFromChain).token_address const { value: tokenDetailed } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, tokenAddress ?? '') const historyToken = { - ...pick(tokenDetailed ?? (history as RedPacketJSONPayload).token, ['decimals', 'symbol']), + ...pick(tokenDetailed ?? (patchedHistory as RedPacketJSONPayload).token, ['decimals', 'symbol']), address: tokenAddress, } as FungibleToken @@ -245,8 +248,8 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) { await refundCallback() revalidateAvailability() } - if (canSend) onSelect(removeUselessSendParams({ ...history, token: historyToken })) - }, [onSelect, refundCallback, canRefund, canSend, history, historyToken]) + if (canSend) onSelect(removeUselessSendParams({ ...patchedHistory, token: historyToken })) + }, [onSelect, refundCallback, canRefund, canSend, patchedHistory, historyToken]) // #region password lost tips const [anchorEl, setAnchorEl] = useState<(EventTarget & HTMLButtonElement) | null>(null) @@ -273,24 +276,26 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
- {history.sender.message === '' ? t.best_wishes() : history.sender.message} + {patchedHistory.sender.message === '' + ? t.best_wishes() + : patchedHistory.sender.message}
{t.history_duration({ startTime: dateTimeFormat(new Date(creation_time)), - endTime: dateTimeFormat(new Date(creation_time + history.duration), false), + endTime: dateTimeFormat(new Date(creation_time + patchedHistory.duration), false), })} {t.history_total_amount({ - amount: formatBalance(history.total, historyToken?.decimals, 6), + amount: formatBalance(patchedHistory.total, historyToken?.decimals, 6), symbol: historyToken?.symbol, })} {t.history_split_mode({ - mode: history.is_random ? t.random() : t.average(), + mode: patchedHistory.is_random ? t.random() : t.average(), })}
@@ -337,7 +342,7 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
@@ -347,7 +352,7 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) { }} values={{ claimedShares: String(claimerNumber), - shares: String(history.shares), + shares: String(patchedHistory.shares), }} /> @@ -358,9 +363,9 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) { span: , }} values={{ - amount: formatBalance(history.total, historyToken?.decimals, 6), + amount: formatBalance(patchedHistory.total, historyToken?.decimals, 6), claimedAmount: formatBalance( - new BigNumber(history.total).minus(total_remaining ?? 0), + new BigNumber(patchedHistory.total).minus(total_remaining ?? 0), historyToken?.decimals, 6, ),