Adjust summary balance displays

packages/app-society/src/Overview/Summary.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { AccountIndex, IdentityIcon, SummaryBox, CardSummary } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
-import { formatBalance } from '@polkadot/util';
+import { FormatBalance } from '@polkadot/react-query';
 
 import { useTranslation } from '../translate';
 
@@ -90,10 +90,10 @@ function Summary ({ className }: Props): React.ReactElement<Props> {
       )}
       <section>
         <CardSummary label={t('pot')}>
-          {pot
-            ? <>{formatBalance(pot, { withSi: false })}{formatBalance.calcSi(pot).value}</>
-            : '-'
-          }
+          <FormatBalance
+            value={pot}
+            withSi
+          />
         </CardSummary>
       </section>
     </SummaryBox>

packages/app-staking/src/Targets/Summary.tsx

@@ -8,7 +8,7 @@ import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
-import { formatBalance } from '@polkadot/util';
+import { FormatBalance } from '@polkadot/react-query';
 
 import { useTranslation } from '../translate';
 
@@ -19,29 +19,18 @@ interface Props {
 
 interface StakeInfo {
   percentage: string;
-  staked: string | null;
 }
 
 export default function Summary ({ lastReward, totalStaked }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const totalInsurance = useCall<Balance>(api.query.balances.totalIssuance, []);
-  const [{ percentage, staked }, setStakeInfo] = useState<StakeInfo>({ percentage: '-', staked: null });
-  const [total, setTotal] = useState<string | null>(null);
-
-  useEffect((): void => {
-    if (totalInsurance) {
-      setTotal(
-        `${formatBalance(totalInsurance, { withSi: false })}${formatBalance.calcSi(totalInsurance.toString()).value}`
-      );
-    }
-  }, [totalInsurance]);
+  const [{ percentage }, setStakeInfo] = useState<StakeInfo>({ percentage: '-' });
 
   useEffect((): void => {
     if (totalInsurance && totalStaked?.gtn(0)) {
       setStakeInfo({
-        percentage: `${(totalStaked.muln(10000).div(totalInsurance).toNumber() / 100).toFixed(2)}%`,
-        staked: `${formatBalance(totalStaked, { withSi: false })}${formatBalance.calcSi(totalStaked.toString()).value}`
+        percentage: `${(totalStaked.muln(10000).div(totalInsurance).toNumber() / 100).toFixed(2)}%`
       });
     }
   }, [totalInsurance, totalStaked]);
@@ -50,22 +39,27 @@ export default function Summary ({ lastReward, totalStaked }: Props): React.Reac
     <SummaryBox>
       <section className='ui--media-small'>
         <CardSummary label={t('total staked')}>
-          {staked || '-'}
+          <FormatBalance
+            value={totalStaked}
+            withSi
+          />
         </CardSummary>
         <CardSummary label=''>/</CardSummary>
         <CardSummary label={t('total issuance')}>
-          {total || '-'}
+          <FormatBalance
+            value={totalInsurance}
+            withSi
+          />
         </CardSummary>
       </section>
       <CardSummary label={t('staked')}>
         {percentage}
       </CardSummary>
       <CardSummary label={t('last reward')}>
-        {
-          lastReward.gtn(0)
-            ? `${formatBalance(lastReward, { withSi: false })}`
-            : '-'
-        }
+        <FormatBalance
+          value={lastReward}
+          withSi
+        />
       </CardSummary>
     </SummaryBox>
   );

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

@@ -6,7 +6,8 @@ import BN from 'bn.js';
 import React from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
-import { formatBalance, formatNumber, stringToU8a } from '@polkadot/util';
+import { FormatBalance } from '@polkadot/react-query';
+import { formatNumber, stringToU8a } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 
@@ -41,7 +42,10 @@ export default function Summary ({ approvalCount, proposalCount }: Props): React
       <section>
         {value && (
           <CardSummary label={t('available')}>
-            {formatBalance(value, { withSi: false })}{formatBalance.calcSi(value).value}
+            <FormatBalance
+              value={value}
+              withSi
+            />
           </CardSummary>
         )}
       </section>

packages/react-components/src/CardSummary.tsx

@@ -87,6 +87,10 @@ export default styled(CardSummary)`
   justify-content: flex-end;
   padding: 0rem 1.5rem 0.5rem 1.5rem;
 
+  .ui--FormatBalance .balance-postfix {
+    opacity: 1;
+  }
+
   > div {
     font-size: 2.1rem;
     font-weight: 100;

packages/react-query/src/FormatBalance.tsx

@@ -14,6 +14,7 @@ interface Props extends BareProps {
   children?: React.ReactNode;
   label?: React.ReactNode;
   value?: Compact<any> | BN | string | null;
+  withSi?: boolean;
 }
 
 // for million, 2 * 3-grouping + comma
@@ -30,14 +31,28 @@ function format (value: Compact<any> | BN | string, currency: string): React.Rea
   return <>{prefix}.<span className='balance-postfix'>{`000${postfix || ''}`.slice(-3)}</span> {currency}</>;
 }
 
-function FormatBalance ({ children, className, label, value }: Props): React.ReactElement<Props> {
+function formatSi (value: Compact<any> | BN | string): React.ReactNode {
+  const strValue = ((value as Compact<any>).toBn ? (value as Compact<any>).toBn() : value).toString();
+  const [prefix, postfix] = strValue === '0'
+    ? ['0', '0']
+    : formatBalance(value, { withSi: false }).split('.');
+  const unit = strValue === '0'
+    ? ''
+    : formatBalance.calcSi(strValue).value;
+
+  return <>{prefix}.<span className='balance-postfix'>{`000${postfix || ''}`.slice(-3)}</span>{unit === '-' ? '' : unit}</>;
+}
+
+function FormatBalance ({ children, className, label, value, withSi }: Props): React.ReactElement<Props> {
   const [currency] = useState(formatBalance.getDefaults().unit);
 
   return (
     <div className={`ui--FormatBalance ${className}`}>
       {label || ''}{
         value
-          ? format(value, currency)
+          ? withSi
+            ? formatSi(value)
+            : format(value, currency)
           : '-'
       }{children}
     </div>

packages/react-query/src/TotalIssuance.tsx

@@ -3,11 +3,10 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { BareProps } from '@polkadot/react-api/types';
-import { Balance } from '@polkadot/types/interfaces';
 
 import React from 'react';
 import { useApi, useCall } from '@polkadot/react-hooks';
-import { formatBalance } from '@polkadot/util';
+import FormatBalance from './FormatBalance';
 
 interface Props extends BareProps {
   children?: React.ReactNode;
@@ -16,21 +15,19 @@ interface Props extends BareProps {
 
 export default function TotalIssuance ({ children, className, label, style }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const totalIssuance = useCall<string>(api.query.balances.totalIssuance, [], {
-    transform: (totalIssuance: Balance): string =>
-      totalIssuance?.toString()
-  });
+  const totalIssuance = useCall<string>(api.query.balances.totalIssuance, []);
 
   return (
     <div
       className={className}
       style={style}
     >
-      {label || ''}{
-        totalIssuance
-          ? `${formatBalance(totalIssuance, { withSi: false })}${formatBalance.calcSi(totalIssuance).value}`
-          : '-'
-      }{children}
+      {label || ''}
+      <FormatBalance
+        value={totalIssuance}
+        withSi
+      />
+      {children}
     </div>
   );
 }