How to use the @polkadot/util.formatBalance function in @polkadot/util

text={stakingInfo.unlocking.map(({ remainingBlocks, value }, index): React.ReactNode => (
          <div>
            {t('{{value}}, {{remaining}} blocks left', {
              replace: {
                remaining: formatNumber(remainingBlocks),
                value: formatBalance(value, { forceUnit: '-' })
              }
            })}
          </div>
        ))}
        trigger='unlocking-trigger'

{isBelowMinimum && (
        <div>
          
          {t('The deposit is below the {{minimum}} minimum required for the proposal to be evaluated', {
            replace: {
              minimum: formatBalance(minDeposit, { forceUnit: '-' })
            }
          })}
        </div>
      )}
      {!extraAmount.isZero() &amp;&amp; (
        <div>
          
          {t('The deposit of {{deposit}} will be reserved until the proposal is completed', {
            replace: {
              deposit: formatBalance(extraAmount, { forceUnit: '-' })
            }
          })}
        </div>
      )}
    
  );
}

private renderResults (): React.ReactNode {
    const { voteCount, voteCountAye, voteCountNay, votedAye, votedNay, votedTotal } = this.state;

    if (voteCount === 0 || votedTotal.eqn(0)) {
      return null;
    }

    return (
      <div>
        
      </div>
    );
  }
}

public render (): React.ReactNode {
    const { democracy_minimumDeposit = new BN(0), t } = this.props;
    const { extraAmount, isBelowMinimum } = this.state;

    return (
      <>
        {
          isBelowMinimum
            ? <div>{t('The deposit is below the {{minimum}} minimum required for the proposal to be evaluated', {
              replace: {
                minimum: formatBalance(democracy_minimumDeposit)
              }
            })}</div>
            : undefined
        }
        {
          extraAmount.isZero()
            ? undefined
            : <div>{t('The deposit of {{deposit}} will be reserved until the proposal is completed', {
              replace: {
                deposit: formatBalance(extraAmount)
              }
            })}</div>
        }
      
    );
  }

export default function TotalIssuance ({ children, className, label, style }: Props): React.ReactElement {
  const { api } = useApi();
  const totalIssuance = useCall(api.query.balances.totalIssuance, [], {
    transform: (totalIssuance: Balance): string =>
      totalIssuance?.toString()
  });

  return (
    <div style="{style}">
      {label || ''}{
        totalIssuance
          ? `${formatBalance(totalIssuance, false)}${formatBalance.calcSi(totalIssuance).value}`
          : '-'
      }{children}
    </div>
  );
}

public render (): React.ReactNode {
    const { fees, t } = this.props;
    const { isCreation, isNoEffect } = this.state;

    return (
      <>
        {
          isNoEffect
            ? (
              <div>
                
                {t('The final recipient balance is less or equal to {{existentialDeposit}} (the existential amount) and will not be reflected',
                  {
                    replace: {
                      existentialDeposit: formatBalance(fees.existentialDeposit)
                    }
                  }
                )}
              </div>
            )
            : undefined
        }
        {
          isCreation
            ? <div>{t('A fee of {{creationFee}} will be deducted from the sender since the destination account does not exist', {
              replace: {
                creationFee: formatBalance(fees.creationFee)
              }
            })}</div>
            : undefined
        }

useEffect((): void => {
    if (totalInsurance && totalStaked?.gtn(0)) {
      setStakeInfo({
        percentage: `${(totalStaked.muln(10000).div(totalInsurance).toNumber() / 100).toFixed(2)}%`,
        staked: `${formatBalance(totalStaked, false)}${formatBalance.calcSi(totalStaked.toString()).value}`
      });
    }
  }, [totalInsurance, totalStaked]);

}

  const [ownBonded, otherBonded] = calcBonded(staking_info, balanceDisplay.bonded);

  return (
    <>
      {balanceDisplay.total && (
        <>
          <label label="{t('total')}">
          <div>{formatBalance(balances_all.votingBalance)}</div>
        
      )}
      {balanceDisplay.available &amp;&amp; (
        &lt;&gt;
          <label label="{t('available')}">
          <div>{formatBalance(balances_all.availableBalance)}</div>
        
      )}
      {balanceDisplay.bonded &amp;&amp; (ownBonded.gtn(0) || otherBonded.length !== 0) &amp;&amp; (
        &lt;&gt;
          <label label="{t('bonded')}">
          <div>{formatBalance(ownBonded)}{otherBonded.length !== 0 &amp;&amp; (
            ` (+${otherBonded.map((bonded): string =&gt; formatBalance(bonded)).join(', ')})`
          )}</div>
        
      )}
      {balanceDisplay.redeemable &amp;&amp; staking_info &amp;&amp; staking_info.redeemable &amp;&amp; staking_info.redeemable.gtn(0) &amp;&amp; (
        &lt;&gt;
          <label label="{t('redeemable')}">
          <div>
            {formatBalance(staking_info.redeemable)}
            {staking_info.controllerId &amp;&amp; (</div></label></label></label></label>

const renderDetailedBalances = (): React.ReactElement => {
    const { availableBalance, lockedBalance, reservedBalance } = allBalances!;

    return (
      
        <span><b>Available:</b> {formatBalance(availableBalance)}</span>
        <span>
          {
            allStaking &amp;&amp; allStaking.redeemable &amp;&amp;
            
              <b>Redeemable:</b>
              {formatBalance(allStaking.redeemable)}
              {allStaking.redeemable.gtn(0) &amp;&amp; renderRedeemButton()}
            
          }
        </span>
        <span><b>Reserved:</b>{reservedBalance &amp;&amp; {formatBalance(reservedBalance)}}</span>
        <span><b>Locked:</b>{lockedBalance &amp;&amp; {formatBalance(lockedBalance)}}</span>
        {renderUnlocking()}
      
    );
  };

return (
    <>
      <div>
      {validatorPrefsDisplay.unstakeThreshold &amp;&amp; (staking_info.validatorPrefs as ValidatorPrefs0to145).unstakeThreshold &amp;&amp; (
        &lt;&gt;
          <label label="{t('unstake">
          <div>
            {(staking_info.validatorPrefs as ValidatorPrefs0to145).unstakeThreshold.toString()}
          </div>
        
      )}
      {validatorPrefsDisplay.validatorPayment &amp;&amp; staking_info.validatorPrefs.validatorPayment &amp;&amp; (
        &lt;&gt;
          <label label="{t('commission')}">
          <div>{
            formatBalance(staking_info.validatorPrefs.validatorPayment)
          }</div>
        
      )}
    
  );
}
</label></label></div>