Combine upcoming ids (threads & queued) (#4850)

polkadot-js · Mar 14, 2021 · 7b5a98d · 7b5a98d
1 parent f08d38b
commit 7b5a98d
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 197 deletions.
diff --git a/packages/page-parachains/src/Overview/Parathread.tsx b/packages/page-parachains/src/Overview/Parathread.tsx
diff --git a/packages/page-parachains/src/Overview/Parathreads.tsx b/packages/page-parachains/src/Overview/Parathreads.tsx
diff --git a/packages/page-parachains/src/Overview/Upcoming.tsx b/packages/page-parachains/src/Overview/Upcoming.tsx
@@ -3,7 +3,7 @@
 
 import type BN from 'bn.js';
 import type { Option, Vec } from '@polkadot/types';
-import type { AccountId, BalanceOf, ParaGenesisArgs, ParaId, ParaLifecycle } from '@polkadot/types/interfaces';
+import type { AccountId, BalanceOf, HeadData, ParaGenesisArgs, ParaId, ParaLifecycle } from '@polkadot/types/interfaces';
 import type { ITuple } from '@polkadot/types/types';
 import type { LeaseInfo, QueuedAction } from './types';
 
@@ -13,7 +13,6 @@ import { ParaLink } from '@polkadot/react-components';
 import { useApi, useCallMulti } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
 
-import { useTranslation } from '../translate';
 import { sliceHex } from '../util';
 import Lifecycle from './Lifecycle';
 
@@ -24,18 +23,23 @@ interface Props {
 }
 
 interface MultiState {
+  headHex: string | null;
   leases: LeaseInfo[];
   lifecycle: ParaLifecycle | null;
-  upcomingGenesis: ParaGenesisArgs | null;
 }
 
 const optMulti = {
   defaultValue: {
+    headHex: null,
     leases: [],
-    lifecycle: null,
-    upcomingGenesis: null
+    lifecycle: null
   },
-  transform: ([optGenesis, optLifecycle, leases]: [Option<ParaGenesisArgs>, Option<ParaLifecycle>, Vec<Option<ITuple<[AccountId, BalanceOf]>>>]): MultiState => ({
+  transform: ([optHead, optGenesis, optLifecycle, leases]: [Option<HeadData>, Option<ParaGenesisArgs>, Option<ParaLifecycle>, Vec<Option<ITuple<[AccountId, BalanceOf]>>>]): MultiState => ({
+    headHex: optHead.isSome
+      ? sliceHex(optHead.unwrap())
+      : optGenesis.isSome
+        ? sliceHex(optGenesis.unwrap().genesisHead)
+        : null,
     leases: leases
       ? leases
         .map((optLease, period): LeaseInfo | null => {
@@ -53,15 +57,14 @@ const optMulti = {
         })
         .filter((item): item is LeaseInfo => !!item)
       : [],
-    lifecycle: optLifecycle.unwrapOr(null),
-    upcomingGenesis: optGenesis.unwrapOr(null)
+    lifecycle: optLifecycle.unwrapOr(null)
   })
 };
 
 function Upcoming ({ currentPeriod, id, nextAction }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
   const { api } = useApi();
-  const { leases, lifecycle, upcomingGenesis } = useCallMulti<MultiState>([
+  const { headHex, leases, lifecycle } = useCallMulti<MultiState>([
+    [api.query.paras.heads, id],
     [api.query.paras.upcomingParasGenesis, id],
     [api.query.paras.paraLifecycles, id],
     [api.query.slots?.leases, id]
@@ -71,11 +74,7 @@ function Upcoming ({ currentPeriod, id, nextAction }: Props): React.ReactElement
     <tr>
       <td className='number'><h1>{formatNumber(id)}</h1></td>
       <td className='badge together'><ParaLink id={id} /></td>
-      <td className='start together hash'>
-        {upcomingGenesis && (
-          sliceHex(upcomingGenesis.genesisHead)
-        )}
-      </td>
+      <td className='start together hash'>{headHex}</td>
       <td className='start'>
         <Lifecycle
           lifecycle={lifecycle}
@@ -88,11 +87,6 @@ function Upcoming ({ currentPeriod, id, nextAction }: Props): React.ReactElement
           leases.map(({ period }) => formatNumber(currentPeriod.addn(period))).join(', ')
         }
       </td>
-      <td className='number'>
-        {upcomingGenesis && (
-          upcomingGenesis.parachain.isTrue ? t('Yes') : t('No')
-        )}
-      </td>
     </tr>
   );
 }

diff --git a/packages/page-parachains/src/Overview/Upcomings.tsx b/packages/page-parachains/src/Overview/Upcomings.tsx
@@ -23,11 +23,10 @@ function Upcomings ({ actionsQueue, currentPeriod, ids }: Props): React.ReactEle
 
   const headerRef = useRef([
     [t('upcoming'), 'start', 2],
-    [t('genesis'), 'start'],
+    [t('head'), 'start'],
     [t('lifecycle'), 'start'],
     [],
-    [t('leases'), 'start'],
-    [t('parachain'), 'start']
+    [t('leases'), 'start']
   ]);
 
   return (

diff --git a/packages/page-parachains/src/Overview/index.tsx b/packages/page-parachains/src/Overview/index.tsx
@@ -4,18 +4,17 @@
 import type { ParaId } from '@polkadot/types/interfaces';
 import type { Proposals } from '../types';
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-import { useApi, useCall, useEventTrigger, useIsMountedRef } from '@polkadot/react-hooks';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import Actions from './Actions';
 import Parachains from './Parachains';
-import Parathreads from './Parathreads';
 import Summary from './Summary';
 import Upcomings from './Upcomings';
 import useActionsQueue from './useActionsQueue';
 import useLeasePeriod from './useLeasePeriod';
-import useParathreads from './useParathreads';
+import useUpcomingIds from './useUpcomingIds';
 
 interface Props {
   className?: string;
@@ -25,25 +24,9 @@ interface Props {
 function Overview ({ className, proposals }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const paraIds = useCall<ParaId[]>(api.query.paras?.parachains);
-  const mountedRef = useIsMountedRef();
   const actionsQueue = useActionsQueue();
   const leasePeriod = useLeasePeriod();
-  const threadIds = useParathreads();
-  const trigger = useEventTrigger([api.events.session.NewSession, api.events.registrar?.Registered]);
-  const [upcomingIds, setUpcomingIds] = useState<ParaId[]>([]);
-
-  useEffect((): void => {
-    trigger &&
-      api.query.paras?.upcomingParasGenesis
-        ?.keys<[ParaId]>()
-        .then((keys): void => {
-          mountedRef.current &&
-            setUpcomingIds(
-              keys.map(({ args: [paraId] }) => paraId)
-            );
-        })
-        .catch(console.error);
-  }, [api, mountedRef, trigger]);
+  const upcomingIds = useUpcomingIds();
 
   return (
     <div className={className}>
@@ -61,11 +44,6 @@ function Overview ({ className, proposals }: Props): React.ReactElement<Props> {
             ids={paraIds}
             scheduled={proposals?.scheduled}
           />
-          <Parathreads
-            actionsQueue={actionsQueue}
-            currentPeriod={leasePeriod && leasePeriod.currentPeriod}
-            ids={threadIds}
-          />
           <Upcomings
             actionsQueue={actionsQueue}
             currentPeriod={leasePeriod && leasePeriod.currentPeriod}

diff --git a/...parachains/src/Overview/useParathreads.ts → ...parachains/src/Overview/useUpcomingIds.ts b/...parachains/src/Overview/useParathreads.ts → ...parachains/src/Overview/useUpcomingIds.ts
@@ -8,9 +8,9 @@ import { useEffect, useState } from 'react';
 
 import { useApi, useEventTrigger } from '@polkadot/react-hooks';
 
-export default function useParathreads (): ParaId[] | undefined {
+export default function useUpomingIds (): ParaId[] | undefined {
   const { api } = useApi();
-  const trigger = useEventTrigger([api.events.session.NewSession]);
+  const trigger = useEventTrigger([api.events.session.NewSession, api.events.registrar?.Registered]);
   const [result, setResult] = useState<ParaId[] | undefined>();
 
   useEffect((): void => {
@@ -22,7 +22,12 @@ export default function useParathreads (): ParaId[] | undefined {
             .map(([{ args: [paraId] }, optValue]): ParaId | null => {
               const value = optValue.unwrap();
 
-              return (value && (value.isParathread || value.isUpgradingToParachain || value.isOutgoingParathread))
+              return value && (
+                value.isParathread ||
+                value.isUpgradingToParachain ||
+                value.isOutgoingParathread ||
+                value.isOnboarding
+              )
                 ? paraId
                 : null;
             })