convert and fix alphabetical order on the fly (#1186)

packages/app-extrinsics/src/Balance.tsx

@@ -5,18 +5,18 @@
 import { BareProps, CallProps } from '@polkadot/ui-api/types';
 
 import React from 'react';
-import { Balance } from '@polkadot/types';
+import { DerivedBalances } from '@polkadot/api-derive/types';
 import { withCalls, withMulti } from '@polkadot/ui-api';
 import { InputBalance } from '@polkadot/ui-app';
 
 type Props = BareProps & CallProps & {
-  balances_freeBalance?: Balance,
+  balances_all?: DerivedBalances,
   label?: React.ReactNode
 };
 
 class BalanceDisplay extends React.PureComponent<Props> {
   render () {
-    const { className, label, style, balances_freeBalance } = this.props;
+    const { className, label, style, balances_all } = this.props;
 
     return (
       <InputBalance
@@ -24,7 +24,7 @@ class BalanceDisplay extends React.PureComponent<Props> {
         isDisabled
         label={label}
         style={style}
-        defaultValue={balances_freeBalance}
+        defaultValue={balances_all && balances_all.freeBalance}
       />
     );
   }
@@ -33,6 +33,6 @@ class BalanceDisplay extends React.PureComponent<Props> {
 export default withMulti(
   BalanceDisplay,
   withCalls<Props>(
-    ['query.balances.freeBalance', { paramName: 'params' }]
+    ['derive.balances.all', { paramName: 'params' }]
   )
 );

packages/app-staking/src/Account/index.tsx

@@ -2,16 +2,17 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { DerivedBalancesMap, DerivedStaking } from '@polkadot/api-derive/types';
-import { AccountId, Balance, Exposure, StakingLedger, ValidatorPrefs } from '@polkadot/types';
+import { AccountFilter, RecentlyOfflineMap } from '../types';
+import { AccountId, Exposure, StakingLedger, ValidatorPrefs } from '@polkadot/types';
 import { ApiProps } from '@polkadot/ui-api/types';
-import { AddressMini, AddressSummary, Button, TxButton } from '@polkadot/ui-app';
+import { DerivedBalances, DerivedBalancesMap, DerivedStaking } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/ui-app/types';
 import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
+
 import React from 'react';
+import { AddressMini, AddressSummary, Button, TxButton } from '@polkadot/ui-app';
 import { withCalls } from '@polkadot/ui-api';
 
-import { AccountFilter, RecentlyOfflineMap } from '../types';
 import Bond from './Bond';
 import BondExtra from './BondExtra';
 import Nominating from './Nominating';
@@ -26,7 +27,7 @@ type Props = ApiProps & I18nProps & {
   filter: AccountFilter,
   isValidator: boolean,
   recentlyOffline: RecentlyOfflineMap,
-  freeBalance?: Balance,
+  balances_all?: DerivedBalances,
   staking_info?: DerivedStaking,
   stashOptions: Array<KeyringSectionOption>
 };
@@ -315,14 +316,14 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderButtons () {
-    const { accountId, freeBalance, t } = this.props;
+    const { accountId, balances_all, t } = this.props;
     const { isActiveStash, isActiveController, nominators, sessionId, stakingLedger, validatorPrefs } = this.state;
     const buttons = [];
 
     if (isActiveStash) {
       // only show a "Bond Additional" button if this stash account actually doesn't bond everything already
       // staking_ledger.total gives the total amount that can be slashed (any active amount + what is being unlocked)
-      if (freeBalance && stakingLedger && stakingLedger.total && (freeBalance.gt(stakingLedger.total))) {
+      if (balances_all && stakingLedger && stakingLedger.total && (balances_all.freeBalance.gt(stakingLedger.total))) {
         buttons.push(
           <Button
             isPrimary
@@ -456,9 +457,6 @@ export default translate(
   withCalls<Props>(
     ['derive.staking.info', { paramName: 'accountId' }],
     'query.staking.recentlyOffline',
-    ['query.balances.freeBalance', {
-      paramName: 'accountId',
-      propName: 'freeBalance'
-    }]
+    ['derive.balances.all', { paramName: 'accountId' }]
   )(Account)
 );

packages/ui-reactive/src/Balance.tsx

@@ -2,10 +2,12 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { AccountId, AccountIndex, Address } from '@polkadot/types';
 import { BareProps, CallProps } from '@polkadot/ui-api/types';
+import { DerivedBalances } from '@polkadot/api-derive/types';
 
 import React from 'react';
-import { AccountId, AccountIndex, Address, Balance } from '@polkadot/types';
+
 import { withCalls } from '@polkadot/ui-api';
 import { formatBalance } from '@polkadot/util';
 
@@ -13,12 +15,12 @@ type Props = BareProps & CallProps & {
   children?: React.ReactNode,
   label?: string,
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null,
-  balances_freeBalance?: Balance
+  balances_all?: DerivedBalances
 };
 
 export class BalanceDisplay extends React.PureComponent<Props> {
   render () {
-    const { children, className, label = '', style, balances_freeBalance } = this.props;
+    const { children, className, label = '', style, balances_all } = this.props;
 
     return (
       <div
@@ -26,8 +28,8 @@ export class BalanceDisplay extends React.PureComponent<Props> {
         style={style}
       >
         {label}{
-          balances_freeBalance
-            ? formatBalance(balances_freeBalance)
+          balances_all
+            ? formatBalance(balances_all.freeBalance)
             : '0'
           }{children}
       </div>
@@ -36,5 +38,5 @@ export class BalanceDisplay extends React.PureComponent<Props> {
 }
 
 export default withCalls<Props>(
-  ['query.balances.freeBalance', { paramName: 'params' }]
+  ['derive.balances.all', { paramName: 'params' }]
 )(BalanceDisplay);

packages/ui-reactive/src/Unlocking.tsx

@@ -13,7 +13,6 @@ import { TxButton } from '@polkadot/ui-app';
 import { withCalls } from '@polkadot/ui-api';
 
 type Props = BareProps & CallProps & I18nProps & {
-  balances_freeBalance?: BN,
   chain_bestNumber?: BN,
   controllerId?: AccountId,
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null,
@@ -133,7 +132,6 @@ export class UnlockingDisplay extends React.PureComponent<Props> {
 
 export default translate(
   withCalls<Props>(
-    ['query.balances.freeBalance', { paramName: 'params' }],
     ['query.staking.bonded', {
       paramName: 'params',
       propName: 'controllerId',