Align treasury summary with democracy (#2684)

* Align treasury summary with democracy

* Linting

* Pass array

packages/page-democracy/src/Overview/Referendums.tsx

@@ -6,19 +6,17 @@ import { DeriveReferendumExt } from '@polkadot/api-derive/types';
 
 import React, { useMemo } from 'react';
 import { Table } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
 
 import Referendum from './Referendum';
 import { useTranslation } from '../translate';
 
 interface Props {
   className?: string;
+  referendums?: DeriveReferendumExt[];
 }
 
-function Referendums ({ className }: Props): React.ReactElement<Props> {
+function Referendums ({ className, referendums }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { api } = useApi();
-  const referendums = useCall<DeriveReferendumExt[]>(api.derive.democracy.referendums, []);
 
   const header = useMemo(() => [
     [t('referenda'), 'start', 2],

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

@@ -10,16 +10,17 @@ import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 
-const ZERO = new BN(0);
+interface Props {
+  referendumCount?: number;
+}
 
-function Summary (): React.ReactElement<{}> {
+function Summary ({ referendumCount }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const activeProposals = useCall<any[]>(api.derive.democracy.proposals, []);
   const bestNumber = useCall<BN>(api.derive.chain.bestNumber, []);
-  const nextActive = useCall<BN>(api.query.democracy.lowestUnbaked, []);
   const publicPropCount = useCall<BN>(api.query.democracy.publicPropCount, []);
-  const referendumCount = useCall<BN>(api.query.democracy.referendumCount, []);
+  const referendumTotal = useCall<BN>(api.query.democracy.referendumCount, []);
 
   return (
     <SummaryBox>
@@ -33,10 +34,10 @@ function Summary (): React.ReactElement<{}> {
       </section>
       <section>
         <CardSummary label={t('referenda')}>
-          {formatNumber(referendumCount && nextActive ? referendumCount.sub(nextActive) : ZERO)}
+          {formatNumber(referendumCount || 0)}
         </CardSummary>
         <CardSummary label={t('total')}>
-          {formatNumber(referendumCount)}
+          {formatNumber(referendumTotal || 0)}
         </CardSummary>
       </section>
       {bestNumber && (

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

@@ -2,10 +2,12 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { DeriveReferendumExt } from '@polkadot/api-derive/types';
+
 import React from 'react';
 import styled from 'styled-components';
 import { Button } from '@polkadot/react-components';
-import { useToggle } from '@polkadot/react-hooks';
+import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import DispatchQueue from './DispatchQueue';
@@ -20,14 +22,16 @@ interface Props {
   className?: string;
 }
 
-function Overview ({ className }: Props): React.ReactElement {
+function Overview ({ className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const { api } = useApi();
   const [isPreimageOpen, togglePreimage] = useToggle();
   const [isProposeOpen, togglePropose] = useToggle();
+  const referendums = useCall<DeriveReferendumExt[]>(api.derive.democracy.referendums, []);
 
   return (
     <div className={className}>
-      <Summary />
+      <Summary referendumCount={referendums?.length} />
       <Button.Group>
         <Button
           icon='add'
@@ -46,7 +50,7 @@ function Overview ({ className }: Props): React.ReactElement {
       {isProposeOpen && (
         <Propose onClose={togglePropose} />
       )}
-      <Referendums />
+      <Referendums referendums={referendums} />
       <Proposals />
       <DispatchQueue />
       <Externals />

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

@@ -5,6 +5,7 @@
 import { DeriveBalancesAccount } from '@polkadot/api-derive/types';
 import { Balance } from '@polkadot/types/interfaces';
 
+import BN from 'bn.js';
 import React from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
@@ -24,8 +25,9 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
   const { t } = useTranslation();
   const { api } = useApi();
   const bestNumber = useCall<Balance>(api.derive.chain.bestNumber, []);
-  const spendPeriod = api.consts.treasury.spendPeriod;
+  const totalProposals = useCall<BN>(api.query.treasury.proposalCount, []);
   const treasuryBalance = useCall<DeriveBalancesAccount>(api.derive.balances.account, [TREASURY_ACCOUNT]);
+  const spendPeriod = api.consts.treasury.spendPeriod;
 
   const value = treasuryBalance?.freeBalance.gtn(0)
     ? treasuryBalance.freeBalance.toString()
@@ -37,6 +39,11 @@ function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<P
         <CardSummary label={t('proposals')}>
           {formatNumber(proposalCount)}
         </CardSummary>
+        <CardSummary label={t('total')}>
+          {formatNumber(totalProposals || 0)}
+        </CardSummary>
+      </section>
+      <section>
         <CardSummary label={t('approved')}>
           {formatNumber(approvalCount)}
         </CardSummary>