Show parachain watermark delay (#4393)

packages/page-parachains/src/Overview/Parachain.tsx

@@ -4,14 +4,17 @@
 import type { Option } from '@polkadot/types';
 import type { BlockNumber, HeadData, ParaId } from '@polkadot/types/interfaces';
 
-import React from 'react';
+import BN from 'bn.js';
+import React, { useMemo } from 'react';
 
 import { useApi, useCall } from '@polkadot/react-hooks';
+import { BlockToTime } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
 import { sliceHex } from './util';
 
 interface Props {
+  bestNumber?: BN;
   className?: string;
   id: ParaId;
 }
@@ -24,23 +27,29 @@ const transformHead = {
 };
 
 const transformMark = {
-  transform: (watermark: Option<BlockNumber>): string | null =>
+  transform: (watermark: Option<BlockNumber>): BlockNumber | null =>
     watermark.isSome
-      ? watermark.unwrap().toHuman()
+      ? watermark.unwrap()
       : null
 };
 
-function Parachain ({ className = '', id }: Props): React.ReactElement<Props> {
+function Parachain ({ bestNumber, className = '', id }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const headHex = useCall<string | null>(api.query.paras.heads, [id], transformHead);
-  const watermark = useCall<string | null>(api.query.hrmp?.hrmpWatermarks, [id], transformMark);
+  const watermark = useCall<BlockNumber | null>(api.query.hrmp?.hrmpWatermarks, [id], transformMark);
+
+  const blockDelay = useMemo(
+    () => watermark && bestNumber && bestNumber.sub(watermark),
+    [bestNumber, watermark]
+  );
 
   return (
     <tr className={className}>
       <td className='number'><h1>{formatNumber(id)}</h1></td>
       <td />
       <td className='all start together hash'>{headHex}</td>
-      <td className='number'>{watermark}</td>
+      <td className='number'>{formatNumber(watermark)}</td>
+      <td className='number'>{blockDelay && <BlockToTime blocks={blockDelay} />}</td>
     </tr>
   );
 }

packages/page-parachains/src/Overview/ParachainList.tsx

@@ -3,9 +3,11 @@
 
 import type { ParaId } from '@polkadot/types/interfaces';
 
+import BN from 'bn.js';
 import React, { useRef } from 'react';
 
 import { Table } from '@polkadot/react-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import Parachain from './Parachain';
@@ -16,11 +18,13 @@ interface Props {
 
 function ParachainList ({ ids }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const { api } = useApi();
+  const bestNumber = useCall<BN>(api.derive.chain.bestNumber);
 
   const headerRef = useRef([
     [t('parachains'), 'start', 2],
     [t('heads'), 'start'],
-    [t('watermark')]
+    [t('watermark'), 2]
   ]);
 
   return (
@@ -30,6 +34,7 @@ function ParachainList ({ ids }: Props): React.ReactElement<Props> {
     >
       {ids?.map((id): React.ReactNode => (
         <Parachain
+          bestNumber={bestNumber}
           id={id}
           key={id.toString()}
         />

packages/page-parachains/src/Overview/Proposal.tsx

@@ -96,7 +96,7 @@ function Proposal ({ approvedIds, id, scheduled }: Props): React.ReactElement<Pr
                 </>
               )
             }
-            <td className='balance media--1100'>{proposal.proposal && <FormatBalance value={proposal.proposal.balance} />}</td>
+            <td className='number media--1100'>{proposal.proposal && <FormatBalance value={proposal.proposal.balance} />}</td>
             <td className='start hash together media--1700'>{initialHex}</td>
             <td className='start hash together media--1500'>{validationHex}</td>
             <td className='address all'>{proposal.proposal?.validators.map((validatorId) => (