From 3272ffab436aa7e9c2f5b1b22f53bf1c009839c0 Mon Sep 17 00:00:00 2001
From: Ewa Kowalska <30404388+ekowalsk@users.noreply.github.com>
Date: Thu, 4 Feb 2021 11:21:59 +0100
Subject: [PATCH] Bounties - Show on the extend bounty expiry modal the new
 expiry date (#4593)

---
 .../ExtendBountyExpiryAction.tsx              | 24 +++++++++++++++++--
 .../src/helpers/increaseDateByBlocks.ts       |  8 +++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 packages/page-bounties/src/helpers/increaseDateByBlocks.ts

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<Props> | 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 (
     <>
       <Modal
@@ -52,6 +57,21 @@ function ExtendBountyExpiryAction ({ curatorId, description, index, toggleOpen }
               <p>{t<string>('Only curator can extend the bounty time.')}</p>
             </Modal.Column>
           </Modal.Columns>
+          {expiryDate &&
+            <Modal.Columns>
+              <Modal.Column>
+                <Input
+                  help={t<string>('The extended expiry date does not depend on the current expiry date.')}
+                  isDisabled
+                  label={t<string>('new expiry date and time')}
+                  value={`${expiryDate.toLocaleDateString()} ${expiryDate.toLocaleTimeString()}`}
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t<string>(`Bounty expiry time will be set to ${timeAsText} from now.`)}</p>
+              </Modal.Column>
+            </Modal.Columns>
+          }
           <Modal.Columns>
             <Modal.Column>
               <Input
diff --git a/packages/page-bounties/src/helpers/increaseDateByBlocks.ts b/packages/page-bounties/src/helpers/increaseDateByBlocks.ts
new file mode 100644
index 0000000000..a1b4c04581
--- /dev/null
+++ b/packages/page-bounties/src/helpers/increaseDateByBlocks.ts
@@ -0,0 +1,8 @@
+// Copyright 2017-2021 @polkadot/app-treasury authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import BN from 'bn.js';
+
+export function increaseDateByBlocks (blocks: BN, blockTime: number): Date {
+  return new Date(Date.now() + blocks.muln(blockTime).toNumber());
+}