Functional InputNumber with fixed bugs

packages/app-accounts/src/modals/Transfer.tsx

@@ -84,7 +84,7 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
     }
   }, [amount, recipientId, senderId]);
 
-  const transferrable = <span className='label'>{t('transferrable ')}</span>;
+  const transferrable = <span className='label'>{t('transferrable')}</span>;
 
   return (
     <Modal

packages/app-claims/src/Claim.tsx

@@ -10,7 +10,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { ApiContext } from '@polkadot/react-api';
 import { Button, Card } from '@polkadot/react-components';
-import { formatBalance } from '@polkadot/util';
+import { FormatBalance } from '@polkadot/react-query';
 
 import translate from './translate';
 import { addrToChecksum } from './util';
@@ -63,7 +63,7 @@ function Claim ({ button, className, ethereumAddress, t }: Props): React.ReactEl
           ? (
             <>
               {t('has a valid claim for')}
-              <h2>{formatBalance(claimValue)}</h2>
+              <h2><FormatBalance value={claimValue} /></h2>
               <Button.Group>{button}</Button.Group>
             </>
           )

packages/app-claims/src/index.tsx

@@ -14,7 +14,7 @@ import styled from 'styled-components';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { withApi, withMulti } from '@polkadot/react-api';
 import { Button, Card, Columar, Column, InputAddress, Tooltip } from '@polkadot/react-components';
-import { InputNumber } from '@polkadot/react-components/InputNumber';
+import { TokenUnit } from '@polkadot/react-components/InputNumber';
 import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal';
 import { u8aToHex, u8aToString } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
@@ -112,7 +112,7 @@ class App extends TxModal<Props, State> {
       <main>
         <header />
         <h1>
-          <Trans>claim your <em>{InputNumber.units}</em> tokens</Trans>
+          <Trans>claim your <em>{TokenUnit.abbr}</em> tokens</Trans>
         </h1>
         <Columar>
           <Column>

packages/app-contracts/src/Contracts/Call.tsx

@@ -167,6 +167,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
               help={t('The allotted value for this contract, i.e. the amount transferred to the contract as part of this call.')}
               isDisabled={isBusy}
               isError={!isEndowmentValid}
+              isZeroable
               label={t('value')}
               onChange={_onChangeEndowment}
               value={endowment}

packages/app-contracts/src/Deploy.tsx

@@ -21,7 +21,7 @@ import ContractModal, { ContractModalProps, ContractModalState } from './Modal';
 import Params from './Params';
 import store from './store';
 import translate from './translate';
-import { GAS_LIMIT } from './constants';
+import { ENDOWMENT, GAS_LIMIT } from './constants';
 
 type ConstructOptions = { key: string; text: React.ReactNode; value: string }[];
 
@@ -51,7 +51,7 @@ class Deploy extends ContractModal<Props, State> {
       ...this.defaultState,
       constructorIndex: -1,
       constructOptions: [],
-      endowment: new BN(0),
+      endowment: new BN(ENDOWMENT),
       gasLimit: new BN(GAS_LIMIT),
       isHashValid: false,
       params: [],
@@ -182,7 +182,7 @@ class Deploy extends ContractModal<Props, State> {
               <Dropdown
                 help={t('The deployment constructor information for this contract, as provided by the ABI.')}
                 isDisabled={contractAbi.abi.contract.constructors.length <= 1}
-                label={t('constructor ')}
+                label={t('constructor')}
                 onChange={this.onChangeConstructorIndex}
                 options={constructOptions}
                 style={{ fontFamily: 'monospace' }}

packages/app-council/src/Overview/VoteValue.tsx

@@ -29,7 +29,7 @@ function VoteValue ({ accountId, onChange, t }: Props): React.ReactElement<Props
     <InputBalance
       help={t('The amount that is associated with this vote. This value is is locked for the duration of the vote.')}
       label={t('vote value')}
-      labelExtra={<BalanceVoting label={t('voting balance ')} params={accountId} />}
+      labelExtra={<BalanceVoting label={<label>{t('voting balance')}</label>} params={accountId} />}
       onChange={_setVoteValue}
     />
   );

packages/app-democracy/src/Overview/Proposal.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 import { Option, Tuple, Vec } from '@polkadot/types';
 import { ActionItem, InputAddress, Labelled, Static } from '@polkadot/react-components';
 import { withCalls, withMulti } from '@polkadot/react-api';
-import { formatBalance } from '@polkadot/util';
+import { FormatBalance } from '@polkadot/react-query';
 
 import translate from '../translate';
 import Seconding from './Seconding';
@@ -42,7 +42,7 @@ function renderProposal ({ democracy_depositOf, t }: Props): React.ReactNode {
         ))}
       </Labelled>
       <Static label={t('balance')}>
-        {formatBalance(balance)}
+        <FormatBalance value={balance} />
       </Static>
     </div>
   );

packages/app-democracy/src/Overview/Referendum.tsx

@@ -104,12 +104,12 @@ function Referendum ({ chain_bestNumber, className, democracy_enactmentPeriod, d
               values={[
                 {
                   colors: COLORS_AYE,
-                  label: `Aye, ${formatBalance(votedAye)} (${formatNumber(voteCountAye)})`,
+                  label: `Aye, ${formatBalance(votedAye, { forceUnit: '-' })} (${formatNumber(voteCountAye)})`,
                   value: votedAye.muln(10000).div(votedTotal).toNumber() / 100
                 },
                 {
                   colors: COLORS_NAY,
-                  label: `Nay, ${formatBalance(votedNay)} (${formatNumber(voteCountNay)})`,
+                  label: `Nay, ${formatBalance(votedNay, { forceUnit: '-' })} (${formatNumber(voteCountNay)})`,
                   value: votedNay.muln(10000).div(votedTotal).toNumber() / 100
                 }
               ]}

packages/app-generic-asset/src/Transfer.tsx

@@ -63,7 +63,7 @@ function Transfer ({ assets, className, onClose, recipientId: propRecipientId, s
     }
   };
 
-  const transferrable = <span className='label'>{t('transferrable ')}</span>;
+  const transferrable = <span className='label'>{t('transferrable')}</span>;
 
   return (
     <div>

packages/app-staking/src/Actions/Account/BondExtra.tsx

@@ -100,7 +100,7 @@ class BondExtra extends TxComponent<Props, State> {
   private renderContent (): React.ReactNode {
     const { stashId, systemChain, t } = this.props;
     const { amountError, maxAdditional, maxBalance } = this.state;
-    const transferrable = <span className='label'>{t('transferrable ')}</span>;
+    const transferrable = <span className='label'>{t('transferrable')}</span>;
     const isUnsafeChain = detectUnsafe(systemChain);
 
     return (

packages/react-api/src/Api.tsx

@@ -11,7 +11,7 @@ import ApiPromise from '@polkadot/api/promise';
 import { isWeb3Injected, web3Accounts, web3Enable } from '@polkadot/extension-dapp';
 import defaults from '@polkadot/rpc-provider/defaults';
 import { WsProvider } from '@polkadot/rpc-provider';
-import { InputNumber } from '@polkadot/react-components/InputNumber';
+import { TokenUnit } from '@polkadot/react-components/InputNumber';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
 import ApiSigner from '@polkadot/react-signer/ApiSigner';
@@ -152,7 +152,7 @@ export default class Api extends React.PureComponent<Props, State> {
       decimals: tokenDecimals,
       unit: tokenSymbol
     });
-    InputNumber.setUnit(tokenSymbol);
+    TokenUnit.setAbbr(tokenSymbol);
 
     // finally load the keyring
     keyring.loadAll({

packages/react-components/src/AddressInfo.tsx

@@ -12,6 +12,7 @@ import styled from 'styled-components';
 import { formatBalance, formatNumber, isObject } from '@polkadot/util';
 import { Icon, Tooltip, TxButton } from '@polkadot/react-components';
 import { withCalls, withMulti } from '@polkadot/react-api';
+import { FormatBalance } from '@polkadot/react-query';
 
 import CryptoType from './CryptoType';
 import Label from './Label';
@@ -165,7 +166,7 @@ function renderUnlocking ({ stakingInfo, t }: Props): React.ReactNode {
 
   return (
     <div>
-      {formatBalance(total)}
+      <FormatBalance value={total} />
       <Icon
         name='info circle'
         data-tip
@@ -177,7 +178,7 @@ function renderUnlocking ({ stakingInfo, t }: Props): React.ReactNode {
             {t('{{value}}, {{remaining}} blocks left', {
               replace: {
                 remaining: formatNumber(remainingBlocks),
-                value: formatBalance(value)
+                value: formatBalance(value, { forceUnit: '-' })
               }
             })}
           </div>
@@ -211,9 +212,10 @@ function renderValidatorPrefs ({ stakingInfo, t, withValidatorPrefs = false }: P
       {validatorPrefsDisplay.validatorPayment && stakingInfo.validatorPrefs.validatorPayment && (
         <>
           <Label label={t('commission')} />
-          <div className='result'>{
-            formatBalance(stakingInfo.validatorPrefs.validatorPayment)
-          }</div>
+          <FormatBalance
+            className='result'
+            value={stakingInfo.validatorPrefs.validatorPayment}
+          />
         </>
       )}
     </>
@@ -237,40 +239,61 @@ function renderBalances (props: Props): React.ReactNode {
       {balancesAll && balanceDisplay.total && (
         <>
           <Label label={t('total')} />
-          <div className='result'>{formatBalance(balancesAll.votingBalance)}</div>
+          <FormatBalance
+            className='result'
+            value={balancesAll.votingBalance}
+          />
         </>
       )}
       {balancesAll && balanceDisplay.available && (
         <>
           <Label label={t('transferrable')} />
-          <div className='result'>{formatBalance(balancesAll.availableBalance)}</div>
+          <FormatBalance
+            className='result'
+            value={balancesAll.availableBalance}
+          />
         </>
       )}
       {balancesAll && balanceDisplay.locked && balancesAll.lockedBalance && balancesAll.lockedBalance.gtn(0) && (
         <>
           <Label label={t('locked')} />
-          <div className='result'>{formatBalance(balancesAll.lockedBalance)}</div>
+          <FormatBalance
+            className='result'
+            value={balancesAll.lockedBalance}
+          />
         </>
       )}
       {balancesAll && balanceDisplay.reserved && balancesAll.reservedBalance && balancesAll.reservedBalance.gtn(0) && (
         <>
           <Label label={t('reserved')} />
-          <div className='result'>{formatBalance(balancesAll.reservedBalance)}</div>
+          <FormatBalance
+            className='result'
+            value={balancesAll.reservedBalance}
+          />
         </>
       )}
       {balanceDisplay.bonded && (ownBonded.gtn(0) || otherBonded.length !== 0) && (
         <>
           <Label label={t('bonded')} />
-          <div className='result'>{formatBalance(ownBonded)}{otherBonded.length !== 0 && (
-            ` (+${otherBonded.map((bonded): string => formatBalance(bonded)).join(', ')})`
-          )}</div>
+          <FormatBalance
+            className='result'
+            value={ownBonded}
+          >
+            {otherBonded.length !== 0 && (
+              <>&nbsp;(+{otherBonded.map((bonded, index): React.ReactNode =>
+                <FormatBalance key={index} value={bonded} />
+              )})</>
+            )}
+          </FormatBalance>
         </>
       )}
       {balanceDisplay.redeemable && stakingInfo && stakingInfo.redeemable && stakingInfo.redeemable.gtn(0) && (
         <>
           <Label label={t('redeemable')} />
-          <div className='result'>
-            {formatBalance(stakingInfo.redeemable)}
+          <FormatBalance
+            className='result'
+            value={stakingInfo.redeemable}
+          >
             {stakingInfo.controllerId && (
               <TxButton
                 accountId={stakingInfo.controllerId.toString()}
@@ -284,7 +307,7 @@ function renderBalances (props: Props): React.ReactNode {
                 tx='staking.withdrawUnbonded'
               />
             )}
-          </div>
+          </FormatBalance>
         </>
       )}
       {balanceDisplay.unlocking && stakingInfo && stakingInfo.unlocking && (
@@ -357,17 +380,18 @@ export default withMulti(
       opacity: 1;
 
       label {
-        grid-column:  1;
+        grid-column: 1;
         padding-right: 0.5rem;
         text-align: right;
+        vertical-align: middle;
 
         .help.circle.icon {
           display: none;
         }
       }
 
       .result {
-        grid-column:  2;
+        grid-column: 2;
 
         .icon {
           margin-left: .3em;

packages/react-components/src/AddressMini.tsx

@@ -114,6 +114,7 @@ export default styled(AddressMini)`
   .ui--AddressMini-balances {
     display: grid;
 
+    .ui--Balance,
     .ui--Bonded,
     .ui--LockedVote {
       font-size: 0.75rem;

packages/react-components/src/Balance.tsx

@@ -7,37 +7,47 @@ import { BareProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { formatBalance } from '@polkadot/util';
-import { Balance } from '@polkadot/react-query';
+import { Balance, FormatBalance } from '@polkadot/react-query';
 
 import { classes } from './util';
 
+export interface RenderProps extends BareProps {
+  className?: string;
+  label?: React.ReactNode;
+  value?: BN | BN[];
+}
+
 export interface Props extends BareProps {
   balance?: BN | BN[];
   label?: React.ReactNode;
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
   withLabel?: boolean;
 }
 
-function renderProvided ({ balance, className, label, style }: Props): React.ReactNode {
-  let value = `${formatBalance(Array.isArray(balance) ? balance[0] : balance)}`;
+export function renderProvided ({ className, label, value }: RenderProps): React.ReactNode {
+  let others: undefined | React.ReactNode;
 
-  if (Array.isArray(balance)) {
-    const totals = balance.filter((_, index): boolean => index !== 0);
-    const total = totals.reduce((total, value): BN => total.add(value), new BN(0)).gtn(0)
-      ? `(+${totals.map((balance): string => formatBalance(balance)).join(', ')})`
-      : '';
+  if (Array.isArray(value)) {
+    const totals = value.filter((_, index): boolean => index !== 0);
+    const total = totals.reduce((total, value): BN => total.add(value), new BN(0)).gtn(0);
 
-    value = `${value}  ${total}`;
+    if (total) {
+      others = totals.map((balance, index): React.ReactNode =>
+        <FormatBalance key={index} value={balance} />
+      );
+    }
   }
 
   return (
-    <div
+    <FormatBalance
       className={classes('ui--Balance', className)}
-      style={style}
+      label={label}
+      value={Array.isArray(value) ? value[0] : value}
     >
-      {label}{value}
-    </div>
+      {others && (
+        <span>&nbsp;(+{others})</span>
+      )}
+    </FormatBalance>
   );
 }
 
@@ -51,7 +61,7 @@ export default function BalanceDisplay (props: Props): React.ReactElement<Props>
   return balance
     ? (
       <>
-        {renderProvided(props)}
+        {renderProvided({ className, label, value: balance })}
       </>
     )
     : (