diff --git a/packages/page-bounties/src/BountyActions/ExtendBountyExpiryAction.tsx b/packages/page-bounties/src/BountyActions/ExtendBountyExpiryAction.tsx index 442ac349aa..5b8b6ad50e 100644 --- a/packages/page-bounties/src/BountyActions/ExtendBountyExpiryAction.tsx +++ b/packages/page-bounties/src/BountyActions/ExtendBountyExpiryAction.tsx @@ -3,9 +3,11 @@ import type { AccountId, BountyIndex } from '@polkadot/types/interfaces'; -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; +import { increaseDateByBlocks } from '@polkadot/app-bounties/helpers/increaseDateByBlocks'; import { Input, InputAddress, Modal, TxButton } from '@polkadot/react-components'; +import { useBlockTime } from '@polkadot/react-hooks'; import { truncateTitle } from '../helpers'; import { useBounties } from '../hooks'; @@ -20,13 +22,16 @@ interface Props { function ExtendBountyExpiryAction ({ curatorId, description, index, toggleOpen }: Props): React.ReactElement | null { const { t } = useTranslation(); - const { extendBountyExpiry } = useBounties(); + const { bountyUpdatePeriod, extendBountyExpiry } = useBounties(); const [remark, setRemark] = useState(''); + const [blockTime, timeAsText] = useBlockTime(bountyUpdatePeriod); const onRemarkChange = useCallback((value: string) => { setRemark(value); }, []); + const expiryDate = useMemo(() => bountyUpdatePeriod && increaseDateByBlocks(bountyUpdatePeriod, blockTime), [bountyUpdatePeriod, blockTime]); + return ( <> {t('Only curator can extend the bounty time.')}

+ {expiryDate && + + + ('The extended expiry date does not depend on the current expiry date.')} + isDisabled + label={t('new expiry date and time')} + value={`${expiryDate.toLocaleDateString()} ${expiryDate.toLocaleTimeString()}`} + /> + + +

{t(`Bounty expiry time will be set to ${timeAsText} from now.`)}

+
+
+ }