Display inactive issuance summary (#8534)

* Display inactive issuance summary

* Referenda issuance

* Adjust item availability

* active only on inactive availability

* optional explore inactive

packages/page-explorer/src/Summary.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { CardSummary, SummaryBox } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
-import { BestFinalized, BestNumber, BlockToTime, TimeNow, TotalIssuance } from '@polkadot/react-query';
+import { BestFinalized, BestNumber, BlockToTime, TimeNow, TotalInactive, TotalIssuance } from '@polkadot/react-query';
 import { BN_ONE, formatNumber } from '@polkadot/util';
 
 import SummarySession from './SummarySession';
@@ -36,20 +36,30 @@ function Summary ({ eventCount }: Props): React.ReactElement {
           </>
         )}
         {api.query.balances && (
-          <CardSummary
-            className='media--800'
-            label={t<string>('total issuance')}
-          >
-            <TotalIssuance />
-          </CardSummary>
+          <>
+            <CardSummary
+              className='media--800'
+              label={t<string>('total issuance')}
+            >
+              <TotalIssuance />
+            </CardSummary>
+            {!!api.query.balances.inactiveIssuance && (
+              <CardSummary
+                className='media--1300'
+                label={t<string>('inactive issuance')}
+              >
+                <TotalInactive />
+              </CardSummary>
+            )}
+          </>
         )}
       </section>
-      <section className='media--1200'>
+      <section className='media--1100'>
         <SummarySession withEra={false} />
       </section>
       <section>
         <CardSummary
-          className='media--1000'
+          className='media--1400'
           label={t<string>('last events')}
         >
           {formatNumber(eventCount)}

packages/page-referenda/src/Referenda/Summary.tsx

@@ -1,21 +1,27 @@
 // Copyright 2017-2022 @polkadot/app-referenda authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { BN } from '@polkadot/util';
 import type { Summary as SummaryType } from '../types';
 
 import React from 'react';
 
 import { CardSummary, Spinner, SummaryBox } from '@polkadot/react-components';
+import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 
 interface Props {
   className?: string;
+  issuanceActive?: BN;
+  issuanceInactive?: BN;
+  issuanceTotal?: BN;
   summary: SummaryType;
+  withIssuance?: boolean;
 }
 
-function Summary ({ className, summary: { refActive, refCount } }: Props): React.ReactElement<Props> {
+function Summary ({ className, issuanceActive, issuanceInactive, issuanceTotal, summary: { refActive, refCount }, withIssuance }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
@@ -34,6 +40,34 @@ function Summary ({ className, summary: { refActive, refCount } }: Props): React
           }
         </CardSummary>
       </section>
+      {withIssuance && (
+        <section>
+          {issuanceTotal && (
+            <CardSummary label={t<string>('total issuance')}>
+              <FormatBalance
+                value={issuanceTotal}
+                withSi
+              />
+            </CardSummary>
+          )}
+          {issuanceInactive && (
+            <CardSummary label={t<string>('inactive issuance')}>
+              <FormatBalance
+                value={issuanceInactive}
+                withSi
+              />
+            </CardSummary>
+          )}
+          {issuanceActive && issuanceInactive && (
+            <CardSummary label={t<string>('active issuance')}>
+              <FormatBalance
+                value={issuanceActive}
+                withSi
+              />
+            </CardSummary>
+          )}
+        </section>
+      )}
     </SummaryBox>
   );
 }

packages/page-referenda/src/Referenda/index.tsx

@@ -23,13 +23,14 @@ export { useCounterNamed as useCounter } from '../useCounter';
 
 interface Props {
   className?: string;
+  isConvictionVote?: boolean;
   members?: string[];
   palletReferenda: PalletReferenda;
   palletVote: PalletVote;
   ranks?: BN[];
 }
 
-function Referenda ({ className, members, palletReferenda, palletVote, ranks }: Props): React.ReactElement<Props> {
+function Referenda ({ className, isConvictionVote, members, palletReferenda, palletVote, ranks }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const totalIssuance = useCall<BN | undefined>(api.query.balances.totalIssuance);
@@ -72,7 +73,13 @@ function Referenda ({ className, members, palletReferenda, palletVote, ranks }:
 
   return (
     <div className={className}>
-      <Summary summary={summary} />
+      <Summary
+        issuanceActive={activeIssuance}
+        issuanceInactive={inactiveIssuance}
+        issuanceTotal={totalIssuance}
+        summary={summary}
+        withIssuance={isConvictionVote}
+      />
       <Button.Group>
         <Dropdown
           className='topDropdown'

packages/page-referenda/src/index.tsx

@@ -33,6 +33,7 @@ function App ({ basePath, className }: Props): React.ReactElement<Props> {
         items={tabsRef.current}
       />
       <Referenda
+        isConvictionVote
         palletReferenda='referenda'
         palletVote='convictionVoting'
       />

packages/react-query/src/TotalInactive.tsx

@@ -0,0 +1,36 @@
+// Copyright 2017-2022 @polkadot/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { useApi, useCall } from '@polkadot/react-hooks';
+
+import FormatBalance from './FormatBalance';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+}
+
+function TotalInactive ({ children, className = '', label }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const inactiveIssuance = useCall<string>(api.query.balances?.inactiveIssuance);
+
+  if (!inactiveIssuance) {
+    return null;
+  }
+
+  return (
+    <div className={className}>
+      {label || ''}
+      <FormatBalance
+        value={inactiveIssuance}
+        withSi
+      />
+      {children}
+    </div>
+  );
+}
+
+export default React.memo(TotalInactive);

packages/react-query/src/index.ts

@@ -19,4 +19,5 @@ export { default as NodeVersion } from './NodeVersion';
 export { default as Nonce } from './Nonce';
 export { default as SessionToTime } from './SessionToTime';
 export { default as TimeNow } from './TimeNow';
+export { default as TotalInactive } from './TotalInactive';
 export { default as TotalIssuance } from './TotalIssuance';