diff --git a/packages/neuron-ui/src/components/NervosDAO/hooks.ts b/packages/neuron-ui/src/components/NervosDAO/hooks.ts index 0f417e346b..cd65926072 100644 --- a/packages/neuron-ui/src/components/NervosDAO/hooks.ts +++ b/packages/neuron-ui/src/components/NervosDAO/hooks.ts @@ -1,4 +1,4 @@ -import { useEffect, useCallback } from 'react' +import { useEffect, useCallback, useRef } from 'react' import { TFunction } from 'i18next' import { AppActions, StateAction } from 'states/stateProvider/reducer' import { updateNervosDaoData, clearNervosDaoData } from 'states/stateProvider/actionCreators' @@ -32,7 +32,6 @@ const { SHANNON_CKB_RATIO, MAX_DECIMAL_DIGITS, } = CONSTANTS -let timer: NodeJS.Timeout const getRecordKey = ({ depositOutPoint, outPoint }: State.NervosDAORecord) => { return depositOutPoint ? `${depositOutPoint.txHash}-${depositOutPoint.index}` : `${outPoint.txHash}-${outPoint.index}` @@ -128,8 +127,8 @@ export const useClearGeneratedTx = (dispatch: React.Dispatch) => }) }, [dispatch]) -export const useUpdateDepositValue = ({ - setDepositValue, + +export const useGenerateDaoDepositTx = ({ setErrorMessage, clearGeneratedTx, maxDepositAmount, @@ -139,9 +138,9 @@ export const useUpdateDepositValue = ({ maxDepositErrorMessage, isBalanceReserved, t, + depositValue, suggestFeeRate, }: { - setDepositValue: React.Dispatch> setErrorMessage: React.Dispatch> clearGeneratedTx: () => void maxDepositAmount: bigint @@ -151,36 +150,34 @@ export const useUpdateDepositValue = ({ maxDepositErrorMessage: string isBalanceReserved: boolean t: TFunction - suggestFeeRate: number | string -}) => - useCallback( - (value: string) => { - const amount = value.replace(/,/g, '') - if (Number.isNaN(+amount) || /[^\d.]/.test(amount) || +amount < 0) { - return - } - clearTimeout(timer) - timer = setTimeout(() => { + depositValue: string + suggestFeeRate: string | number +}) => { + const timer = useRef>() + useEffect( + () => { + clearTimeout(timer.current) + timer.current = setTimeout(() => { setErrorMessage('') clearGeneratedTx() - + try { - validateAmount(amount) + validateAmount(depositValue) } catch (err) { if (isErrorWithI18n(err)) { setErrorMessage( - t(`messages.codes.${err.code}`, { fieldName: 'deposit', fieldValue: amount, length: MAX_DECIMAL_DIGITS }) + t(`messages.codes.${err.code}`, { fieldName: 'deposit', fieldValue: depositValue, length: MAX_DECIMAL_DIGITS }) ) } return } - - if (BigInt(CKBToShannonFormatter(amount)) < BigInt(MIN_DEPOSIT_AMOUNT * SHANNON_CKB_RATIO)) { + + if (BigInt(CKBToShannonFormatter(depositValue)) < BigInt(MIN_DEPOSIT_AMOUNT * SHANNON_CKB_RATIO)) { setErrorMessage(t('nervos-dao.minimal-fee-required', { minimal: MIN_DEPOSIT_AMOUNT })) return } - - const capacity = CKBToShannonFormatter(amount, CapacityUnit.CKB) + + const capacity = CKBToShannonFormatter(depositValue, CapacityUnit.CKB) if (BigInt(capacity) < maxDepositAmount) { generateDaoDepositTx({ feeRate: `${suggestFeeRate}`, @@ -211,8 +208,7 @@ export const useUpdateDepositValue = ({ } else { setErrorMessage(t(`messages.codes.${ErrorCode.AmountNotEnough}`)) } - }, 500) - setDepositValue(amount) + }) }, [ clearGeneratedTx, @@ -222,12 +218,31 @@ export const useUpdateDepositValue = ({ walletID, maxDepositErrorMessage, t, - setDepositValue, setErrorMessage, isBalanceReserved, + depositValue, suggestFeeRate, ] ) +} + +export const useUpdateDepositValue = ({ + setDepositValue, +}: { + setDepositValue: React.Dispatch> +}) => + useCallback( + (value: string) => { + const amount = value.replace(/,/g, '') + if (Number.isNaN(+amount) || /[^\d.]/.test(amount) || +amount < 0) { + return + } + setDepositValue(amount) + }, + [ + setDepositValue, + ] + ) export const useOnDepositValueChange = ({ updateDepositValue }: { updateDepositValue: (value: string) => void }) => useCallback( @@ -290,7 +305,6 @@ export const useOnDepositDialogSubmit = ({ }) => useCallback(() => { setShowDepositDialog(false) - setDepositValue(`${MIN_DEPOSIT_AMOUNT}`) dispatch({ type: AppActions.RequestPassword, payload: { @@ -576,4 +590,5 @@ export default { useOnSlide, useUpdateWithdrawList, useUpdateDepositEpochList, + useGenerateDaoDepositTx, } diff --git a/packages/neuron-ui/src/components/NervosDAO/index.tsx b/packages/neuron-ui/src/components/NervosDAO/index.tsx index 3bb9cc88cd..170d941fa2 100644 --- a/packages/neuron-ui/src/components/NervosDAO/index.tsx +++ b/packages/neuron-ui/src/components/NervosDAO/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState, useMemo, useCallback } from 'react' -import { useState as useGlobalState, useDispatch, AppActions } from 'states' +import { useState as useGlobalState, useDispatch } from 'states' import { useTranslation } from 'react-i18next' import { ReactComponent as TooltipIcon } from 'widgets/Icons/Tooltip.svg' @@ -15,12 +15,9 @@ import { getCurrentUrl, getSyncStatus, CKBToShannonFormatter, - ErrorCode, - CapacityUnit, - isSuccessResponse, } from 'utils' -import { generateDaoDepositTx, openExternal } from 'services/remote' +import { openExternal } from 'services/remote' import DepositDialog from 'components/DepositDialog' import WithdrawDialog from 'components/WithdrawDialog' @@ -73,8 +70,7 @@ const NervosDAO = () => { const [depositEpochList, setDepositEpochList] = useState>(new Map()) const [isBalanceReserved, setIsBalanceReserved] = useState(true) const clearGeneratedTx = hooks.useClearGeneratedTx(dispatch) - const updateDepositValue = hooks.useUpdateDepositValue({ - setDepositValue, + hooks.useGenerateDaoDepositTx({ setErrorMessage, clearGeneratedTx, maxDepositAmount, @@ -84,8 +80,10 @@ const NervosDAO = () => { maxDepositErrorMessage, isBalanceReserved, t, - suggestFeeRate, + depositValue, + suggestFeeRate }) + const updateDepositValue = hooks.useUpdateDepositValue({ setDepositValue }) const onDepositValueChange = hooks.useOnDepositValueChange({ updateDepositValue }) const onDepositDialogDismiss = hooks.useOnDepositDialogDismiss({ @@ -158,6 +156,11 @@ const NervosDAO = () => { url: getCurrentUrl(networkID, networks), }) + const onOpenDepositDialog = useCallback(() => { + setDepositValue(`${MIN_DEPOSIT_AMOUNT}`) + setShowDepositDialog(true) + }, []) + const MemoizedRecords = useMemo(() => { const onTabClick = (e: React.SyntheticEvent) => { const { @@ -258,27 +261,6 @@ const NervosDAO = () => { } }, [maxDepositAmount, depositValue, setDepositValue]) - useEffect(() => { - generateDaoDepositTx({ - feeRate: `${suggestFeeRate}`, - capacity: CKBToShannonFormatter(depositValue, CapacityUnit.CKB), - walletID: wallet.id, - }).then(res => { - if (isSuccessResponse(res)) { - dispatch({ - type: AppActions.UpdateGeneratedTx, - payload: res.result, - }) - } else if (res.status === 0) { - setErrorMessage(`${typeof res.message === 'string' ? res.message : res.message.content}`) - } else if (res.status === ErrorCode.CapacityNotEnoughForChange) { - setErrorMessage(t(`messages.codes.106`)) - } else { - setErrorMessage(t(`messages.codes.${res.status}`)) - } - }) - }, [suggestFeeRate, depositValue]) - const MemoizedDepositDialog = useMemo(() => { return ( {