Show lease activation (#4936)

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

@@ -0,0 +1,45 @@
+// Copyright 2017-2021 @polkadot/app-parachains authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type BN from 'bn.js';
+import type { LeasePeriod } from '../types';
+
+import React, { useMemo } from 'react';
+
+import { BlockToTime } from '@polkadot/react-query';
+import { BN_ONE, bnToBn } from '@polkadot/util';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  leasePeriod?: LeasePeriod | null;
+  value?: number | BN | null;
+}
+
+function LeaseBlocks ({ children, className, leasePeriod, value }: Props): React.ReactElement<Props> | null {
+  console.log(JSON.stringify({ leasePeriod, value }));
+
+  const blocks = useMemo(
+    () => leasePeriod && value &&
+      bnToBn(value)
+        .sub(BN_ONE)
+        .imul(leasePeriod.length)
+        .iadd(leasePeriod.remainder),
+    [leasePeriod, value]
+  );
+
+  if (!leasePeriod || !blocks) {
+    return null;
+  }
+
+  return (
+    <BlockToTime
+      className={className}
+      value={blocks}
+    >
+      {children}
+    </BlockToTime>
+  );
+}
+
+export default React.memo(LeaseBlocks);

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

@@ -53,7 +53,7 @@ function Summary ({ leasePeriod, parachainCount, proposalCount, upcomingCount }:
             label={t<string>('lease period')}
             progress={{
               total: leasePeriod.length,
-              value: leasePeriod.remainder,
+              value: leasePeriod.progress,
               withTime: true
             }}
           />

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

@@ -1,10 +1,10 @@
 // Copyright 2017-2021 @polkadot/app-parachains authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type BN from 'bn.js';
 import type { Option, Vec } from '@polkadot/types';
 import type { AccountId, BalanceOf, HeadData, ParaGenesisArgs, ParaId, ParaInfo, ParaLifecycle } from '@polkadot/types/interfaces';
 import type { ITuple } from '@polkadot/types/types';
+import type { LeasePeriod } from '../types';
 import type { LeaseInfo, QueuedAction } from './types';
 
 import React from 'react';
@@ -15,11 +15,12 @@ import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import { sliceHex } from '../util';
+import LeaseBlocks from './LeaseBlocks';
 import Lifecycle from './Lifecycle';
 
 interface Props {
-  currentPeriod: BN | null;
   id: ParaId;
+  leasePeriod: LeasePeriod | null;
   nextAction?: QueuedAction;
 }
 
@@ -67,7 +68,7 @@ const optMulti = {
   })
 };
 
-function Upcoming ({ currentPeriod, id, nextAction }: Props): React.ReactElement<Props> {
+function Upcoming ({ id, leasePeriod, nextAction }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { headHex, leases, lifecycle, manager } = useCallMulti<MultiState>([
@@ -90,11 +91,18 @@ function Upcoming ({ currentPeriod, id, nextAction }: Props): React.ReactElement
           nextAction={nextAction}
         />
       </td>
-      <td className='all' />
-      <td className='start together'>
-        {currentPeriod && leases && (
+      <td className='all number together'>
+        {leasePeriod && leasePeriod.currentPeriod && leases && (
           leases.length
-            ? leases.map(({ period }) => formatNumber(currentPeriod.addn(period))).join(', ')
+            ? (
+              <>
+                <div>{leases.map(({ period }) => formatNumber(leasePeriod.currentPeriod.addn(period))).join(', ')}</div>
+                <LeaseBlocks
+                  leasePeriod={leasePeriod}
+                  value={leases[0]?.period}
+                />
+              </>
+            )
             : t('None')
         )}
       </td>

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

@@ -1,8 +1,8 @@
 // Copyright 2017-2021 @polkadot/app-parachains authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type BN from 'bn.js';
 import type { ParaId } from '@polkadot/types/interfaces';
+import type { LeasePeriod } from '../types';
 import type { QueuedAction } from './types';
 
 import React, { useRef } from 'react';
@@ -14,19 +14,18 @@ import Upcoming from './Upcoming';
 
 interface Props {
   actionsQueue: QueuedAction[];
-  currentPeriod: BN | null;
   ids?: ParaId[];
+  leasePeriod: LeasePeriod | null;
 }
 
-function Upcomings ({ actionsQueue, currentPeriod, ids }: Props): React.ReactElement<Props> {
+function Upcomings ({ actionsQueue, ids, leasePeriod }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const headerRef = useRef([
     [t('upcoming'), 'start', 3],
     [t('head'), 'start'],
     [t('lifecycle'), 'start'],
-    [],
-    [t('leases'), 'start']
+    [t('leases')]
   ]);
 
   return (
@@ -36,9 +35,9 @@ function Upcomings ({ actionsQueue, currentPeriod, ids }: Props): React.ReactEle
     >
       {ids?.map((id): React.ReactNode => (
         <Upcoming
-          currentPeriod={currentPeriod}
           id={id}
           key={id.toString()}
+          leasePeriod={leasePeriod}
           nextAction={actionsQueue.find(({ paraIds }) =>
             paraIds.some((p) => p.eq(id))
           )}

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

@@ -45,8 +45,8 @@ function Overview ({ className, leasePeriod, proposals }: Props): React.ReactEle
           />
           <Upcomings
             actionsQueue={actionsQueue}
-            currentPeriod={leasePeriod && leasePeriod.currentPeriod}
             ids={upcomingIds}
+            leasePeriod={leasePeriod}
           />
         </>
       )}

packages/page-parachains/src/types.ts

@@ -25,6 +25,7 @@ export interface ScheduledProposals {
 export interface LeasePeriod {
   currentPeriod: BN;
   length: BN;
+  progress: BN;
   remainder: BN;
 }
 

packages/page-parachains/src/useLeasePeriod.ts

@@ -15,11 +15,13 @@ export default function useLeasePeriod (): LeasePeriod | null {
   return useMemo((): LeasePeriod | null => {
     if (api.consts.slots?.leasePeriod && bestNumber) {
       const length = api.consts.slots.leasePeriod as BlockNumber;
+      const progress = bestNumber.mod(length);
 
       return {
         currentPeriod: bestNumber.div(length),
         length,
-        remainder: bestNumber.mod(length)
+        progress,
+        remainder: length.sub(progress)
       };
     }