Support for optional usage of pallet_balance (#2578)

* Allow polkadot UI to function without having pallet_balance enabled

* Update packages/page-123code/src/SummaryBar.tsx

Co-Authored-By: Jaco Greeff <jacogr@gmail.com>

* formatting

* fix spacing

Co-authored-by: Jaco Greeff <jacogr@gmail.com>

packages/page-123code/src/SummaryBar.tsx

@@ -17,7 +17,7 @@ function SummaryBar (): React.ReactElement {
   const { api, systemChain, systemName, systemVersion } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
   const bestNumberLag = useCall<BlockNumber>(api.derive.chain.bestNumberLag, []);
-  const totalInsurance = useCall<Balance>(api.query.balances.totalIssuance, []);
+  const totalIssuance = useCall<Balance>(api.query.balances?.totalIssuance, []);
   const validators = useCall<DeriveStakingValidators>(api.derive.staking.validators, []);
 
   return (
@@ -42,9 +42,14 @@ function SummaryBar (): React.ReactElement {
             ))
           }</Bubble>
         )}
-        <Bubble icon='circle' label='total tokens'>
-          {formatBalance(totalInsurance)}
-        </Bubble>
+        {totalIssuance && (
+          <Bubble
+            icon='circle'
+            label='total tokens'
+          >
+            {formatBalance(totalIssuance)}
+          </Bubble>
+        )}
       </div>
     </summary>
   );

packages/page-explorer/src/Summary.tsx

@@ -4,6 +4,7 @@
 
 import BN from 'bn.js';
 import React from 'react';
+import { useApi } from '@polkadot/react-hooks';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
 import { BestFinalized, BestNumber, BlockToTime, TimeNow, TotalIssuance } from '@polkadot/react-query';
 
@@ -14,6 +15,7 @@ const ONE_BLOCK = new BN(1);
 
 function Summary (): React.ReactElement<{}> {
   const { t } = useTranslation();
+  const { api } = useApi();
 
   return (
     <SummaryBox>
@@ -27,12 +29,14 @@ function Summary (): React.ReactElement<{}> {
         >
           <BlockToTime blocks={ONE_BLOCK} />
         </CardSummary>
-        <CardSummary
-          className='ui--media-small'
-          label={t('total issuance')}
-        >
-          <TotalIssuance />
-        </CardSummary>
+        {api.query.balances && (
+          <CardSummary
+            className='ui--media-small'
+            label={t('total issuance')}
+          >
+            <TotalIssuance />
+          </CardSummary>
+        )}
       </section>
       <section className='ui--media-large'>
         <SummarySession withEra={false} />

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

@@ -22,7 +22,7 @@ interface Props {
 function Summary ({ lastReward, numNominators, numValidators, totalStaked }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const totalIssuance = useCall<Balance>(api.query.balances.totalIssuance, []);
+  const totalIssuance = useCall<Balance>(api.query.balances?.totalIssuance, []);
   const [percentage, setPercentage] = useState<string | undefined>();
 
   useEffect((): void => {

packages/react-query/src/TotalIssuance.tsx

@@ -15,7 +15,7 @@ interface Props extends BareProps {
 
 function TotalIssuance ({ children, className, label, style }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const totalIssuance = useCall<string>(api.query.balances.totalIssuance, []);
+  const totalIssuance = useCall<string>(api.query.balances?.totalIssuance, []);
 
   return (
     <div