Adjust parachain summary (#4373)

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

@@ -25,7 +25,7 @@ function Actions (): React.ReactElement<Props> {
           <Button
             icon='plus'
             isDisabled={true}
-            label={t<string>('Register')}
+            label={t<string>('Propose')}
             onClick={togglePropose}
           />
         )}

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

@@ -1,21 +1,21 @@
 // Copyright 2017-2021 @polkadot/app-parachains authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { ProposalExt } from './types';
+
 import React, { useRef } from 'react';
 
 import { Table } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 import Proposal from './Proposal';
-import useProposals from './useProposals';
 
 interface Props {
-  className?: string;
+  proposals?: ProposalExt[];
 }
 
-function Proposals (): React.ReactElement<Props> {
+function Proposals ({ proposals }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const proposals = useProposals();
 
   const headerRef = useRef([
     [t('proposals'), 'start', 2],

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

@@ -3,6 +3,7 @@
 
 import React from 'react';
 
+import SummarySession from '@polkadot/app-explorer/SummarySession';
 import { CardSummary, SummaryBox } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { BestNumber } from '@polkadot/react-query';
@@ -11,12 +12,12 @@ import { formatNumber, isNumber } from '@polkadot/util';
 import { useTranslation } from '../translate';
 
 interface Props {
-  canRegister?: boolean;
   parachainCount?: number;
+  proposalCount?: number;
   upcomingCount?: number;
 }
 
-function Summary ({ canRegister, parachainCount, upcomingCount }: Props): React.ReactElement<Props> {
+function Summary ({ parachainCount, proposalCount, upcomingCount }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
 
@@ -39,11 +40,11 @@ function Summary ({ canRegister, parachainCount, upcomingCount }: Props): React.
             {formatNumber(upcomingCount)}
           </CardSummary>
         )}
-      </section>
-      <section>
-        <CardSummary label={t<string>('registration')}>
-          {canRegister ? t<string>('open') : t<string>('closed')}
-        </CardSummary>
+        {isNumber(proposalCount) && (
+          <CardSummary label={t<string>('proposals')}>
+            {formatNumber(proposalCount)}
+          </CardSummary>
+        )}
       </section>
       <section>
         <CardSummary
@@ -52,6 +53,7 @@ function Summary ({ canRegister, parachainCount, upcomingCount }: Props): React.
         >
           <BestNumber />
         </CardSummary>
+        <SummarySession withEra={false} />
       </section>
     </SummaryBox>
   );

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

@@ -12,6 +12,7 @@ import Parachains from './ParachainList';
 import Proposals from './Proposals';
 import Summary from './Summary';
 import Upcoming from './UpcomingList';
+import useProposals from './useProposals';
 
 interface Props {
   className?: string;
@@ -21,11 +22,13 @@ function Overview (): React.ReactElement<Props> {
   const { api } = useApi();
   const paraIds = useCall<ParaId[]>(api.query.paras?.parachains);
   const upcomingIds = useCall<ParaId[]>(api.query.paras?.upcomingParas);
+  const proposals = useProposals();
 
   return (
     <>
       <Summary
         parachainCount={paraIds?.length}
+        proposalCount={proposals?.length}
         upcomingCount={upcomingIds?.length}
       />
       <Actions />
@@ -36,7 +39,7 @@ function Overview (): React.ReactElement<Props> {
         </>
       )}
       {api.query.parachainProposals && (
-        <Proposals />
+        <Proposals proposals={proposals} />
       )}
     </>
   );