Democracy time countdown (#2359)

packages/page-democracy/src/Overview/DispatchEntry.tsx

@@ -5,9 +5,11 @@
 import { AccountId, Balance, BlockNumber, Hash, Proposal, ReferendumIndex } from '@polkadot/types/interfaces';
 import { ITuple } from '@polkadot/types/types';
 
+import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import { LinkExternal } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
+import { BlockToTime } from '@polkadot/react-query';
 import { Bytes, Option } from '@polkadot/types';
 import { formatNumber } from '@polkadot/util';
 
@@ -24,6 +26,7 @@ interface Props {
 export default function DispatchEntry ({ blockNumber, hash, referendumIndex }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
+  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []) || new BN(0);
   const preimage = useCall<Option<ITuple<[Bytes, AccountId, Balance, BlockNumber]>>
   >(api.query.democracy.preimages, [hash]);
   const [proposal, setProposal] = useState<Proposal | undefined>();
@@ -37,10 +40,11 @@ export default function DispatchEntry ({ blockNumber, hash, referendumIndex }: P
   return (
     <tr>
       <td className='number top'><h1>{formatNumber(referendumIndex)}</h1></td>
-      <td className='number top'>
+      <td className='number together top'>
         {blockNumber && (
           <>
             <label>{t('enact at')}</label>
+            <BlockToTime blocks={blockNumber.sub(bestNumber)} />
             {formatNumber(blockNumber)}
           </>
         )}

packages/page-democracy/src/Overview/Referendum.tsx

@@ -11,7 +11,7 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, LinkExternal } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
-import { FormatBalance } from '@polkadot/react-query';
+import { FormatBalance, BlockToTime } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
@@ -90,6 +90,7 @@ function Referendum ({ className, idNumber, value }: Props): React.ReactElement<
   }
 
   const enactBlock = value.info.end.add(value.info.delay);
+  const remainBlock = value.info.end.sub(bestNumber).subn(1);
 
   return (
     <tr className={className}>
@@ -101,10 +102,12 @@ function Referendum ({ className, idNumber, value }: Props): React.ReactElement<
       />
       <td className='number together top'>
         <label>{t('remaining')}</label>
-        {formatNumber(value.info.end.sub(bestNumber).subn(1))} blocks
+        <BlockToTime blocks={remainBlock} />
+        {t('{{blocks}} blocks', { replace: { blocks: formatNumber(remainBlock) } })}
       </td>
       <td className='number together top'>
         <label>{t('activate at')}</label>
+        <BlockToTime blocks={enactBlock.sub(bestNumber)} />
         {formatNumber(enactBlock)}
       </td>
       <td className='number together top'>

packages/react-query/src/BlockToTime.tsx

@@ -70,8 +70,8 @@ export default function BlockToTime ({ blocks, children, className, label, style
       time[2] ? (time[2] > 1) ? t('{{m}} mins', { replace: { m: time[2] } }) : t('1 min') : null,
       time[3] ? (time[3] > 1) ? t('{{s}} s', { replace: { s: time[3] } }) : t('1 s') : null
     ].filter((value): value is string => !!value)
-      .join(', ');
-  }, [api, t]);
+      .join(' ');
+  }, [api, blocks, t]);
 
   return (
     <div