Display lease period (#4842)

* Display lease period

* useLeasePeriod

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

@@ -10,6 +10,7 @@ import { BestNumber } from '@polkadot/react-query';
 import { formatNumber, isNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
+import useLeasePeriod from '../useLeasePeriod';
 
 interface Props {
   parachainCount?: number;
@@ -20,6 +21,7 @@ interface Props {
 function Summary ({ parachainCount, proposalCount, upcomingCount }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
+  const leaseInfo = useLeasePeriod();
 
   return (
     <SummaryBox>
@@ -46,6 +48,18 @@ function Summary ({ parachainCount, proposalCount, upcomingCount }: Props): Reac
           </CardSummary>
         )}
       </section>
+      {leaseInfo && (
+        <CardSummary
+          label={t<string>('lease period')}
+          progress={{
+            total: leaseInfo.length,
+            value: leaseInfo.remainder,
+            withTime: true
+          }}
+        >
+          {formatNumber(leaseInfo.currentPeriod)}
+        </CardSummary>
+      )}
       <section>
         <CardSummary
           className='media--1000'

packages/page-parachains/src/useLeasePeriod.ts

@@ -0,0 +1,34 @@
+// Copyright 2017-2021 @polkadot/app-parachains authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { BlockNumber } from '@polkadot/types/interfaces';
+
+import BN from 'bn.js';
+import { useMemo } from 'react';
+
+import { useApi, useCall } from '@polkadot/react-hooks';
+
+interface Result {
+  currentPeriod: BN;
+  length: BN;
+  remainder: BN;
+}
+
+export default function useLeasePeriod (): Result | null {
+  const { api } = useApi();
+  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+
+  return useMemo((): Result | null => {
+    if (api.consts.slots?.leasePeriod && bestNumber) {
+      const length = api.consts.slots.leasePeriod as BlockNumber;
+
+      return {
+        currentPeriod: bestNumber.div(length),
+        length,
+        remainder: bestNumber.mod(length)
+      };
+    }
+
+    return null;
+  }, [api, bestNumber]);
+}