Proper angle/percentage calc from BN (#3261)

packages/page-contracts/src/shared/InputMegaGas.tsx

@@ -40,7 +40,6 @@ function InputMegaGas ({ className, executionTime, help, isValid, label, megaGas
           </aside>
           <Progress
             className='contracts--InputMegaGas-progress'
-            color={percentage < 100 ? 'green' : 'red'}
             total={100}
             value={percentage}
           />

packages/page-poll/src/index.tsx

@@ -135,11 +135,8 @@ function PollApp ({ className }: Props): React.ReactElement<Props> {
                         <FormatBalance value={totals[index]} />
                         <Progress
                           isDisabled={!turnout}
-                          percent={
-                            turnout?.voted.gtn(0)
-                              ? totals[index].muln(10000).div(turnout.voted).toNumber() / 100
-                              : 0
-                          }
+                          total={turnout?.voted}
+                          value={totals[index]}
                         />
                       </div>
                     )

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

@@ -19,46 +19,53 @@ interface Props {
   totalStaked?: BN;
 }
 
+interface Progress {
+  hideValue: true;
+  total: BN;
+  value: BN;
+}
+
 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 [percentage, setPercentage] = useState<string | undefined>();
+  const [progressStake, setProgressStake] = useState<Progress | undefined>();
 
   useEffect((): void => {
-    totalIssuance && totalStaked && totalStaked.gtn(0) && setPercentage(
-      `${(totalStaked.muln(10000).div(totalIssuance).toNumber() / 100).toFixed(2)}%`
-    );
+    totalIssuance && totalStaked && totalStaked.gtn(0) && setProgressStake({
+      hideValue: true,
+      total: totalIssuance,
+      value: totalStaked
+    });
   }, [totalIssuance, totalStaked]);
 
   return (
     <SummaryBox>
       <section className='ui--media-small'>
-        {totalStaked && (
-          <CardSummary label={t<string>('total staked')}>
-            <FormatBalance
-              value={totalStaked}
-              withSi
-            />
-          </CardSummary>
-        )}
-        {totalStaked && totalIssuance && (
-          <CardSummary label=''>/</CardSummary>
-        )}
         {totalIssuance && (
-          <CardSummary label={t<string>('total issuance')}>
-            <FormatBalance
-              value={totalIssuance}
-              withSi
-            />
+          <CardSummary
+            label={`${totalStaked?.gtn(0) ? `${t<string>('total staked')}/` : ''}${t<string>('total issuance')}`}
+            progress={progressStake}
+          >
+            <div>
+              {totalStaked?.gtn(0) && (
+                <>
+                  <FormatBalance
+                    value={totalStaked}
+                    withCurrency={false}
+                    withSi
+                  />
+                  /
+                </>
+              )}
+              <FormatBalance
+                value={totalIssuance}
+                withSi
+              />
+            </div>
           </CardSummary>
         )}
       </section>
-      {percentage && (
-        <CardSummary label={t<string>('staked')}>
-          {percentage}
-        </CardSummary>
-      )}
       {numValidators && numNominators && (
         <CardSummary label={t<string>('validators/nominators')}>
           {numValidators}/{numNominators}

packages/page-staking/src/index.tsx

@@ -46,8 +46,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
     transform: (status: ElectionStatus) => status.isOpen
   });
   const hasQueries = useMemo(
-    (): boolean =>
-      hasAccounts && !!(api.query.imOnline?.authoredBlocks) && !!(api.query.staking.activeEra),
+    () => hasAccounts && !!(api.query.imOnline?.authoredBlocks) && !!(api.query.staking.activeEra),
     [api, hasAccounts]
   );
   const items = useMemo(() => [

packages/react-components/src/Progress.tsx

@@ -6,15 +6,13 @@ import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
 import { UInt } from '@polkadot/types';
-import { bnToBn, isBn, isUndefined } from '@polkadot/util';
+import { bnToBn } from '@polkadot/util';
 
 interface Props {
   className?: string;
   isDisabled?: boolean;
-  percent?: BN | number;
-  total?: UInt | BN | number;
-  value?: UInt | BN | number;
-  withSummary?: boolean;
+  total?: UInt | BN | number | null;
+  value?: UInt | BN | number | null;
 }
 
 interface RotateProps {
@@ -35,21 +33,16 @@ function DivClip ({ angle, type }: RotateProps): React.ReactElement<RotateProps>
 
 const Clip = React.memo(DivClip);
 
-function Progress ({ className = '', isDisabled, percent, total, value, withSummary = true }: Props): React.ReactElement<Props> | null {
-  const _total = bnToBn(total);
-  const _value = bnToBn(value);
-  const width = _total.gtn(0)
-    ? (100.0 * _value.toNumber() / _total.toNumber())
-    : isBn(percent)
-      ? percent.toNumber()
-      : percent;
+function Progress ({ className = '', isDisabled, total, value }: Props): React.ReactElement<Props> | null {
+  const _total = bnToBn(total || 0);
+  const angle = _total.gtn(0)
+    ? (bnToBn(value || 0).muln(36000).div(_total).toNumber() / 100)
+    : 0;
 
-  if (isUndefined(width) || width < 0) {
+  if (angle < 0) {
     return null;
   }
 
-  const angle = width * 360 / 100;
-
   return (
     <div className={`ui--Progress${isDisabled ? ' isDisabled' : ''} ${className}`}>
       <div className='background ui--highlight--bg' />
@@ -70,7 +63,7 @@ function Progress ({ className = '', isDisabled, percent, total, value, withSumm
         type='second'
       />
       <div className='inner'>
-        {withSummary && <div>{width.toFixed(1)}%</div>}
+        <div>{(angle * 100 / 360).toFixed(1)}%</div>
       </div>
     </div>
   );

packages/react-query/src/FormatBalance.tsx

@@ -17,6 +17,7 @@ interface Props {
   label?: React.ReactNode;
   labelPost?: string;
   value?: Compact<any> | BN | string | null | 'all';
+  withCurrency?: boolean;
   withSi?: boolean;
 }
 
@@ -24,21 +25,21 @@ interface Props {
 const M_LENGTH = 6 + 1;
 const K_LENGTH = 3 + 1;
 
-function format (value: Compact<any> | BN | string, currency: string, withSi?: boolean, _isShort?: boolean, labelPost?: string): React.ReactNode {
+function format (value: Compact<any> | BN | string, currency: string | null, 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);
 
   if (prefix.length > M_LENGTH) {
     // TODO Format with balance-postfix
-    return `${formatBalance(value)}${labelPost || ''}`;
+    return `${formatBalance(value, { withUnit: !!currency })}${labelPost || ''}`;
   }
 
-  return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && (<><span className='ui--FormatBalance-postfix'>{`000${postfix || ''}`.slice(-3)}</span></>)} {`${currency}${labelPost || ''}`}</>;
+  return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && (<><span className='ui--FormatBalance-postfix'>{`000${postfix || ''}`.slice(-3)}</span></>)}{`${currency ? ` ${currency}` : ''}${labelPost || ''}`}</>;
 }
 
-function FormatBalance ({ children, className = '', isShort, label, labelPost, value, withSi }: Props): React.ReactElement<Props> {
+function FormatBalance ({ children, className = '', isShort, label, labelPost, value, withCurrency = true, withSi }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const [currency] = useState(formatBalance.getDefaults().unit);
+  const [currency] = useState(withCurrency ? formatBalance.getDefaults().unit : null);
 
   // labelPost here looks messy, however we ensure we have one less text node
   return (