L1-287: Show AZERO max issuance

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, TotalInactive, TotalIssuance } from '@polkadot/react-query';
+import { AzeroCap, BestFinalized, BestNumber, BlockToTime, TimeNow, TotalInactive, TotalIssuance } from '@polkadot/react-query';
 import { BN_ONE, formatNumber } from '@polkadot/util';
 
 import SummarySession from './SummarySession.js';
@@ -43,6 +43,14 @@ function Summary ({ eventCount }: Props): React.ReactElement {
             >
               <TotalIssuance />
             </CardSummary>
+            {api.query.aleph.azeroCap && (
+              <CardSummary
+                className='media--800'
+                label={t('max issuance')}
+              >
+                <AzeroCap />
+              </CardSummary>
+            )}
             {!!api.query.balances.inactiveIssuance && (
               <CardSummary
                 className='media--1300'

packages/react-query/src/AzeroCap.tsx

@@ -0,0 +1,33 @@
+// Copyright 2017-2024 @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.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+}
+
+function TotalIssuance ({ children, className = '', label }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const azeroCap = useCall<string>(api.query.aleph.azeroCap);
+
+  return (
+    <div className={className}>
+      {label || ''}
+      <FormatBalance
+        className={azeroCap ? '' : '--tmp'}
+        value={azeroCap}
+        withSi
+      />
+      {children}
+    </div>
+  );
+}
+
+export default React.memo(TotalIssuance);

packages/react-query/src/index.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export { default as Available } from './Available.js';
+export { default as AzeroCap } from './AzeroCap.js';
 export { default as BalanceFree } from './BalanceFree.js';
 export { default as BalanceVoting } from './BalanceVoting.js';
 export { default as BestFinalized } from './BestFinalized.js';