From 68a90cbc76b8f627449fd3a798a84075f66d8a97 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 13 Jan 2021 19:49:34 +0100
Subject: [PATCH] Display parachain issuance (#4399)

---
 .../src/Overview/Parachain.tsx                |  9 +++---
 .../src/Overview/ParachainList.tsx            |  3 +-
 packages/react-query/src/FormatBalance.tsx    | 28 ++++++++++++++-----
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/packages/page-parachains/src/Overview/Parachain.tsx b/packages/page-parachains/src/Overview/Parachain.tsx
index 23a995e9b4..3a86b08dc7 100644
--- a/packages/page-parachains/src/Overview/Parachain.tsx
+++ b/packages/page-parachains/src/Overview/Parachain.tsx
@@ -3,13 +3,13 @@
 
 import type { LinkOption } from '@polkadot/apps-config/settings/types';
 import type { Option } from '@polkadot/types';
-import type { BlockNumber, HeadData, ParaId } from '@polkadot/types/interfaces';
+import type { Balance, BlockNumber, HeadData, ParaId } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
 import React, { useMemo } from 'react';
 
 import { useApi, useCall, useParaApi } from '@polkadot/react-hooks';
-import { BlockToTime } from '@polkadot/react-query';
+import { BlockToTime, FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
 import { sliceHex } from './util';
@@ -50,7 +50,7 @@ function Parachain ({ bestNumberFinalized, className = '', id }: Props): React.R
   const headHex = useCall<string | null>(api.query.paras.heads, [id], transformHead);
   const watermark = useCall<BlockNumber | null>(api.query.hrmp?.hrmpWatermarks, [id], transformMark);
   const paraBest = useCall<BlockNumber>(paraApi?.derive.chain.bestNumber);
-  // const endpoints = useParaEndpoints(id);
+  const paraIssu = useCall<Balance>(paraApi?.query.balances?.totalIssuance);
 
   const blockDelay = useMemo(
     () => watermark && bestNumberFinalized && bestNumberFinalized.sub(watermark),
@@ -68,8 +68,9 @@ function Parachain ({ bestNumberFinalized, className = '', id }: Props): React.R
       <td className='together'>{chainLink}</td>
       <td className='all start together hash'>{headHex}</td>
       <td className='number'>{blockDelay && <BlockToTime blocks={blockDelay} />}</td>
-      <td className='number'>{formatNumber(watermark)}</td>
+      <td className='number'>{watermark && formatNumber(watermark)}</td>
       <td className='number'>{paraBest && formatNumber(paraBest)}</td>
+      <td className='number'>{paraIssu && <FormatBalance valueFormatted={paraIssu.toHuman()} />}</td>
     </tr>
   );
 }
diff --git a/packages/page-parachains/src/Overview/ParachainList.tsx b/packages/page-parachains/src/Overview/ParachainList.tsx
index 291b9b4893..1248516d57 100644
--- a/packages/page-parachains/src/Overview/ParachainList.tsx
+++ b/packages/page-parachains/src/Overview/ParachainList.tsx
@@ -25,7 +25,8 @@ function ParachainList ({ ids }: Props): React.ReactElement<Props> {
     [t('parachains'), 'start', 2],
     [t('heads'), 'start'],
     [t('watermark'), 'undefined', 2],
-    [t('chain best')]
+    [t('chain best')],
+    [t('issuance')]
   ]);
 
   return (
diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx
index 35565cc120..c7e67a95e3 100644
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@@ -19,6 +19,7 @@ interface Props {
   label?: React.ReactNode;
   labelPost?: string;
   value?: Compact<any> | BN | string | null | 'all';
+  valueFormatted?: string;
   withCurrency?: boolean;
   withSi?: boolean;
 }
@@ -27,6 +28,17 @@ interface Props {
 const M_LENGTH = 6 + 1;
 const K_LENGTH = 3 + 1;
 
+function formatDisplay (prefix: string, postfix: string, unit: string, label = '', isShort = false): React.ReactNode {
+  return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && <span className='ui--FormatBalance-postfix'>{`0000${postfix || ''}`.slice(-4)}</span>}<span className='ui--FormatBalance-unit'> {unit}</span>{label}</>;
+}
+
+function splitFormat (value: string, label?: string, isShort?: boolean): React.ReactNode {
+  const [prefix, postfixFull] = value.split('.');
+  const [postfix, unit] = postfixFull.split(' ');
+
+  return formatDisplay(prefix, postfix, unit, label, isShort);
+}
+
 function format (value: Compact<any> | BN | string, withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: string): React.ReactNode {
   const [prefix, postfix] = formatBalance(value, { forceUnit: '-', withSi: false }).split('.');
   const isShort = _isShort || (withSi && prefix.length >= K_LENGTH);
@@ -40,21 +52,23 @@ function format (value: Compact<any> | BN | string, withCurrency = true, withSi?
     return <>{major}.<span className='ui--FormatBalance-postfix'>{minor}</span><span className='ui--FormatBalance-unit'>{unit}{unit ? unitPost : ` ${unitPost}`}</span>{labelPost || ''}</>;
   }
 
-  return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && <span className='ui--FormatBalance-postfix'>{`0000${postfix || ''}`.slice(-4)}</span>}<span className='ui--FormatBalance-unit'> {unitPost}</span>{labelPost || ''}</>;
+  return formatDisplay(prefix, postfix, unitPost, labelPost, isShort);
 }
 
-function FormatBalance ({ children, className = '', isShort, label, labelPost, value, withCurrency, withSi }: Props): React.ReactElement<Props> {
+function FormatBalance ({ children, className = '', isShort, label, labelPost, value, valueFormatted, withCurrency, withSi }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   // labelPost here looks messy, however we ensure we have one less text node
   return (
     <div className={`ui--FormatBalance ${className}`}>
       {label ? <>{label}&nbsp;</> : ''}<span className='ui--FormatBalance-value'>{
-        value
-          ? value === 'all'
-            ? t<string>('everything{{labelPost}}', { replace: { labelPost } })
-            : format(value, withCurrency, withSi, isShort, labelPost)
-          : `-${labelPost || ''}`
+        valueFormatted
+          ? splitFormat(valueFormatted, labelPost, isShort)
+          : value
+            ? value === 'all'
+              ? t<string>('everything{{labelPost}}', { replace: { labelPost } })
+              : format(value, withCurrency, withSi, isShort, labelPost)
+            : `-${labelPost || ''}`
       }</span>{children}
     </div>
   );