Fix staking buttons to immediately show (#998)

* Fix staking buttons to immediately show

* Move back to params as a name, cleanup danglings

packages/app-123code/src/AccountSelector.tsx

@@ -30,13 +30,13 @@ export default class AccountSelector extends React.PureComponent<Props, State> {
         />
         <div className='medium'>
           <Bubble color='teal' icon='address card' label='index'>
-            <AccountIndex value={accountId} />
+            <AccountIndex params={accountId} />
           </Bubble>
           <Bubble color='yellow' icon='adjust' label='balance'>
-            <Balance params={[accountId]} />
+            <Balance params={accountId} />
           </Bubble>
           <Bubble color='yellow' icon='target' label='transactions'>
-            <Nonce params={[accountId]} />
+            <Nonce params={accountId} />
           </Bubble>
         </div>
       </section>

packages/app-explorer/src/BlockHeaders.tsx

@@ -58,4 +58,7 @@ class BlockHeaders extends React.PureComponent<Props> {
   }
 }
 
-export default withCall('derive.chain.subscribeNewHead', { propName: 'headers', transform })(BlockHeaders);
+export default withCall('derive.chain.subscribeNewHead', {
+  propName: 'headers',
+  transform
+})(BlockHeaders);

packages/app-extrinsics/src/Balance.tsx

@@ -30,4 +30,4 @@ class BalanceDisplay extends React.PureComponent<Props> {
   }
 }
 
-export default withCall('query.balances.freeBalance')(BalanceDisplay);
+export default withCall('query.balances.freeBalance', { paramName: 'params' })(BalanceDisplay);

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

@@ -6,6 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 
 import BN from 'bn.js';
 import React from 'react';
+import { AccountId } from '@polkadot/types';
 import { Button, InputAddress, InputBalance, Modal, TxButton, Dropdown } from '@polkadot/ui-app';
 
 import translate from '../translate';
@@ -13,7 +14,7 @@ import ValidateController from './ValidateController';
 
 type Props = I18nProps & {
   accountId: string,
-  controllerId: string | null,
+  controllerId?: AccountId | null,
   isOpen: boolean,
   onClose: () => void
 };
@@ -39,7 +40,7 @@ class Bond extends React.PureComponent<Props, State> {
     const { accountId, controllerId } = this.props;
 
     this.state = {
-      controllerId: controllerId || accountId,
+      controllerId: controllerId ? controllerId.toString() : accountId,
       destination: 0
     };
   }

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

@@ -6,6 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
 
 import React from 'react';
+import { AccountId } from '@polkadot/types';
 import { Button, InputAddress, Modal, TxButton } from '@polkadot/ui-app';
 
 import translate from '../translate';
@@ -14,7 +15,7 @@ type Props = I18nProps & {
   accountId: string,
   isOpen: boolean,
   onClose: () => void,
-  stashId: string,
+  stashId: AccountId,
   stashOptions: Array<KeyringSectionOption>
 };
 

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

@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { ValidatorPrefs } from '@polkadot/types';
+import { AccountId, ValidatorPrefs } from '@polkadot/types';
 import { Button, InputAddress, InputBalance, InputNumber, Modal, TxButton } from '@polkadot/ui-app';
 
 import translate from '../translate';
@@ -16,7 +16,7 @@ type Props = I18nProps & {
   isOpen: boolean,
   onClose: () => void,
   preferences: ValidatorPrefs,
-  stashId: string
+  stashId: AccountId
 };
 
 type State = {
@@ -81,7 +81,7 @@ class Staking extends React.PureComponent<Props, State> {
           <TxButton
             accountId={accountId}
             isPrimary
-            label={t('Stake')}
+            label={t('Validate')}
             onClick={onClose}
             params={[{
               unstakeThreshold,

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

@@ -6,10 +6,10 @@ import { DerivedBalancesMap } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/ui-app/types';
 import { ApiProps } from '@polkadot/ui-api/types';
 import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
-import { AccountFilter, Nominators, RecentlyOfflineMap } from '../types';
+import { AccountFilter, RecentlyOfflineMap } from '../types';
 
 import React from 'react';
-import { AccountId, Balance, Exposure, Option, StakingLedger, ValidatorPrefs } from '@polkadot/types';
+import { AccountId, Exposure, Option, StakingLedger, ValidatorPrefs } from '@polkadot/types';
 import { AddressMini, AddressSummary, Button, TxButton } from '@polkadot/ui-app';
 import { withCalls } from '@polkadot/ui-api';
 
@@ -23,65 +23,41 @@ import translate from '../translate';
 type Props = ApiProps & I18nProps & {
   accountId: string,
   balances: DerivedBalancesMap,
-  balanceArray: (_address: AccountId | string) => Array<Balance> | undefined,
-  controllers: Array<string>,
+  controllerId?: AccountId | null,
   filter: AccountFilter,
   isValidator: boolean,
   name: string,
-  nominators: Nominators,
   recentlyOffline: RecentlyOfflineMap,
-  session_nextKeyFor?: Option<AccountId>,
-  staking_bonded?: Option<AccountId>,
-  staking_ledger?: Option<StakingLedger>,
+  sessionId?: AccountId | null,
+  stashId?: AccountId | null,
   staking_stakers?: Exposure,
+  staking_nominators?: [Array<AccountId>],
   staking_validators?: [ValidatorPrefs],
-  stashes: Array<string>,
   stashOptions: Array<KeyringSectionOption>,
   validators: Array<string>
 };
 
 type State = {
-  controllerId: string | null,
   isBondOpen: boolean,
   isBondExtraOpen: boolean,
   isNominateOpen: boolean,
   isSessionKeyOpen: boolean,
   isValidatingOpen: boolean,
-  isUnbondOpen: boolean,
-  sessionId: string | null,
-  stashId: string | null
+  isUnbondOpen: boolean
 };
 
 class Account extends React.PureComponent<Props, State> {
   state: State = {
-    controllerId: null,
     isBondOpen: false,
     isBondExtraOpen: false,
     isSessionKeyOpen: false,
     isNominateOpen: false,
     isValidatingOpen: false,
-    isUnbondOpen: false,
-    sessionId: null,
-    stashId: null
+    isUnbondOpen: false
   };
 
-  static getDerivedStateFromProps ({ session_nextKeyFor, staking_bonded, staking_ledger }: Props, state: State): Partial<State> {
-    return {
-      controllerId: staking_bonded && staking_bonded.isSome
-        ? staking_bonded.unwrap().toString()
-        : null,
-      sessionId: session_nextKeyFor && session_nextKeyFor.isSome
-        ? session_nextKeyFor.unwrap().toString()
-        : null,
-      stashId: staking_ledger && staking_ledger.isSome
-        ? staking_ledger.unwrap().stash.toString()
-        : null
-    };
-  }
-
   render () {
-    const { accountId, balanceArray, filter, name } = this.props;
-    const { controllerId, stashId } = this.state;
+    const { accountId, controllerId, filter, name, stashId } = this.props;
 
     if ((filter === 'controller' && !stashId) || (filter === 'stash' && !controllerId) || (filter === 'unbonded' && (controllerId || stashId))) {
       return null;
@@ -95,7 +71,6 @@ class Account extends React.PureComponent<Props, State> {
         {this.renderSessionKey()}
         {this.renderValidating()}
         <AddressSummary
-          balance={balanceArray(accountId)}
           name={name}
           value={accountId}
           identIconSize={96}
@@ -117,8 +92,8 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderBond () {
-    const { accountId } = this.props;
-    const { controllerId, isBondOpen } = this.state;
+    const { accountId, controllerId } = this.props;
+    const { isBondOpen } = this.state;
 
     return (
       <Bond
@@ -144,8 +119,8 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderValidating () {
-    const { accountId, staking_validators } = this.props;
-    const { isValidatingOpen, stashId } = this.state;
+    const { accountId, stashId, staking_validators } = this.props;
+    const { isValidatingOpen } = this.state;
 
     if (!staking_validators || !isValidatingOpen || !stashId) {
       return null;
@@ -193,19 +168,10 @@ class Account extends React.PureComponent<Props, State> {
   //   );
   // }
 
-  private getNominees () {
-    const { nominators } = this.props;
-    const { stashId } = this.state;
-
-    return stashId ? nominators[stashId] : null;
-  }
-
   private renderNominee () {
-    const { recentlyOffline, t } = this.props;
+    const { recentlyOffline, staking_nominators, t } = this.props;
 
-    const nominees = this.getNominees();
-
-    if (!nominees || !nominees.length) {
+    if (!staking_nominators || !staking_nominators[0].length) {
       return null;
     }
 
@@ -213,11 +179,11 @@ class Account extends React.PureComponent<Props, State> {
       <div className='staking--Account-detail'>
         <label className='staking--label'>{t('nominating')}</label>
         {
-          nominees.map((nomineeId, index) => (
+          staking_nominators[0].map((nomineeId, index) => (
             <AddressMini
               key={index}
               value={nomineeId}
-              offlineStatus={recentlyOffline[nomineeId]}
+              offlineStatus={recentlyOffline[nomineeId.toString()]}
               withBalance={false}
               withBonded
             />
@@ -252,8 +218,7 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderControllerId () {
-    const { recentlyOffline, t } = this.props;
-    const { controllerId } = this.state;
+    const { controllerId, recentlyOffline, t } = this.props;
 
     if (!controllerId) {
       return null;
@@ -264,15 +229,14 @@ class Account extends React.PureComponent<Props, State> {
         <label className='staking--label'>{t('controller')}</label>
         <AddressMini
           value={controllerId}
-          offlineStatus={recentlyOffline[controllerId]}
+          offlineStatus={recentlyOffline[controllerId.toString()]}
         />
       </div>
     );
   }
 
   private renderSessionId () {
-    const { t } = this.props;
-    const { sessionId } = this.state;
+    const { sessionId, t } = this.props;
 
     if (!sessionId) {
       return null;
@@ -287,8 +251,7 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderStashId () {
-    const { recentlyOffline, t } = this.props;
-    const { stashId } = this.state;
+    const { recentlyOffline, stashId, t } = this.props;
 
     if (!stashId) {
       return null;
@@ -299,7 +262,7 @@ class Account extends React.PureComponent<Props, State> {
         <label className='staking--label'>{t('stash')}</label>
         <AddressMini
           value={stashId}
-          offlineStatus={recentlyOffline[stashId]}
+          offlineStatus={recentlyOffline[stashId.toString()]}
           withBalance={false}
           withBonded
         />
@@ -308,8 +271,8 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderNominating () {
-    const { accountId, stashOptions } = this.props;
-    const { isNominateOpen, stashId } = this.state;
+    const { accountId, stashId, stashOptions } = this.props;
+    const { isNominateOpen } = this.state;
 
     if (!stashId) {
       return null;
@@ -327,8 +290,7 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   private renderButtons () {
-    const { accountId, controllers, t } = this.props;
-    const { sessionId, controllerId, stashId } = this.state;
+    const { accountId, controllerId, sessionId, stashId, staking_nominators, staking_validators, t } = this.props;
     const buttons = [];
 
     if (!stashId) {
@@ -352,16 +314,19 @@ class Account extends React.PureComponent<Props, State> {
         );
       }
     } else {
-      const nominees = this.getNominees();
-      const isNominating = nominees && nominees.length;
-      const isValidating = controllers.indexOf(accountId) !== -1;
+      const isNominating = staking_nominators && staking_nominators[0].length;
+      const isValidating = staking_validators && !(staking_validators[0].isEmpty);
 
       if (isValidating || isNominating) {
         buttons.push(
           <TxButton
             accountId={accountId}
             isNegative
-            label={isValidating ? t('Stop Validating') : t('Stop Nominating')}
+            label={
+              isNominating
+                ? t('Stop Nominating')
+                : t('Stop Validating')
+            }
             key='stop'
             tx='staking.chill'
           />
@@ -439,10 +404,26 @@ class Account extends React.PureComponent<Props, State> {
 export default translate(
   withCalls<Props>(
     'query.staking.recentlyOffline',
-    ['query.session.nextKeyFor', { paramName: 'accountId' }],
-    ['query.staking.bonded', { paramName: 'accountId' }],
-    ['query.staking.ledger', { paramName: 'accountId' }],
+    ['query.session.nextKeyFor', {
+      paramName: 'accountId',
+      propName: 'sessionId',
+      transform: (session: Option<AccountId>) =>
+        session.unwrapOr(null)
+    }],
+    ['query.staking.bonded', {
+      paramName: 'accountId',
+      propName: 'controllerId',
+      transform: (bonded: Option<AccountId>) =>
+        bonded.unwrapOr(null)
+    }],
+    ['query.staking.ledger', {
+      paramName: 'accountId',
+      propName: 'stashId',
+      transform: (ledger: Option<StakingLedger>) =>
+        ledger.unwrapOr({ stash: null }).stash
+    }],
     ['query.staking.stakers', { paramName: 'accountId' }],
-    ['query.staking.validators', { paramName: 'accountId' }]
+    ['query.staking.nominators', { paramName: 'stashId' }],
+    ['query.staking.validators', { paramName: 'stashId' }]
   )(Account)
 );

packages/app-staking/src/Accounts.tsx

@@ -66,7 +66,7 @@ class Accounts extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { balances, balanceArray, controllers, nominators, recentlyOffline, stashes, t, validators } = this.props;
+    const { balances, recentlyOffline, t, validators } = this.props;
     const { filter, filterOptions } = this.state;
     const accounts = keyring.getAccounts();
 
@@ -90,15 +90,11 @@ class Accounts extends React.PureComponent<Props, State> {
               <Account
                 accountId={address}
                 balances={balances}
-                balanceArray={balanceArray}
-                controllers={controllers}
                 filter={filter}
                 isValidator={validators.includes(address)}
                 key={address}
                 name={name}
-                nominators={nominators}
                 recentlyOffline={recentlyOffline}
-                stashes={stashes}
                 stashOptions={this.getStashOptions()}
                 validators={validators}
               />

packages/app-staking/src/Overview/Address.tsx

@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { Nominators, RecentlyOfflineMap } from '../types';
 
 import React from 'react';
-import { AccountId, Balance, Option, StakingLedger } from '@polkadot/types';
+import { AccountId, Option, StakingLedger } from '@polkadot/types';
 import { withCalls, withMulti } from '@polkadot/ui-api/with';
 import { AddressMini, AddressRow, RecentlyOffline } from '@polkadot/ui-app';
 import { getAddrName } from '@polkadot/ui-app/util';
@@ -18,7 +18,6 @@ import translate from '../translate';
 type Props = I18nProps & {
   address: string,
   balances: DerivedBalancesMap,
-  balanceArray: (_address: AccountId | string) => Array<Balance> | undefined,
   defaultName: string,
   lastAuthor: string,
   lastBlock: string,

packages/app-staking/src/Overview/CurrentList.tsx

@@ -7,14 +7,12 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { Nominators, RecentlyOfflineMap } from '../types';
 
 import React from 'react';
-import { AccountId, Balance } from '@polkadot/types';
 
 import translate from '../translate';
 import Address from './Address';
 
 type Props = I18nProps & {
   balances: DerivedBalancesMap,
-  balanceArray: (_address: AccountId | string) => Array<Balance> | undefined,
   current: Array<string>,
   lastAuthor?: string,
   lastBlock: string,
@@ -66,7 +64,7 @@ class CurrentList extends React.PureComponent<Props> {
   }
 
   private renderColumn (addresses: Array<string>, defaultName: string) {
-    const { balances, balanceArray, lastAuthor, lastBlock, nominators, recentlyOffline, t } = this.props;
+    const { balances, lastAuthor, lastBlock, nominators, recentlyOffline, t } = this.props;
 
     if (addresses.length === 0) {
       return (
@@ -80,7 +78,6 @@ class CurrentList extends React.PureComponent<Props> {
           <Address
             address={address}
             balances={balances}
-            balanceArray={balanceArray}
             defaultName={defaultName}
             key={address}
             lastAuthor={lastAuthor}

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

@@ -23,7 +23,7 @@ const ZERO = new Balance(0);
 
 class Overview extends React.PureComponent<Props> {
   render () {
-    const { balances, balanceArray, chain_subscribeNewHead, controllers, nominators, recentlyOffline, validators } = this.props;
+    const { balances, chain_subscribeNewHead, controllers, nominators, recentlyOffline, validators } = this.props;
     const nextSorted = this.sortByBalance(
       controllers.filter((address) =>
         !validators.includes(address)
@@ -50,7 +50,6 @@ class Overview extends React.PureComponent<Props> {
         />
         <CurrentList
           balances={balances}
-          balanceArray={balanceArray}
           current={validatorsSorted}
           lastBlock={lastBlock}
           lastAuthor={lastAuthor}

packages/app-staking/src/index.tsx

@@ -10,7 +10,7 @@ import { ComponentProps, Nominators, RecentlyOffline, RecentlyOfflineMap } from
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
-import { AccountId, Balance, Option } from '@polkadot/types';
+import { AccountId, Option } from '@polkadot/types';
 import { HelpOverlay } from '@polkadot/ui-app';
 import Tabs, { TabItem } from '@polkadot/ui-app/Tabs';
 import { withCalls, withMulti, withObservable } from '@polkadot/ui-api';
@@ -135,7 +135,6 @@ class App extends React.PureComponent<Props, State> {
       return (
         <Component
           balances={balances}
-          balanceArray={this.balanceArray}
           controllers={controllers}
           nominators={nominators}
           recentlyOffline={recentlyOffline}
@@ -145,23 +144,6 @@ class App extends React.PureComponent<Props, State> {
       );
     };
   }
-
-  private balanceArray = (_address: AccountId | string): Array<Balance> | undefined => {
-    const { balances = {} } = this.props;
-
-    if (!_address) {
-      return undefined;
-    }
-
-    const address = _address.toString();
-
-    return balances[address]
-      ? [
-        balances[address].stakingBalance,
-        balances[address].nominatedBalance
-      ]
-      : undefined;
-  }
 }
 
 export default withMulti(

packages/app-staking/src/types.ts

@@ -4,7 +4,7 @@
 
 import BN from 'bn.js';
 import { DerivedBalancesMap } from '@polkadot/api-derive/types';
-import { AccountId, Balance, BlockNumber } from '@polkadot/types';
+import { AccountId, BlockNumber } from '@polkadot/types';
 
 export type Nominators = {
   // stash account and who is being nominated
@@ -13,7 +13,6 @@ export type Nominators = {
 
 export type ComponentProps = {
   balances: DerivedBalancesMap,
-  balanceArray: (_address: AccountId | string) => Array<Balance> | undefined,
   controllers: Array<string>,
   nominators: Nominators,
   recentlyOffline: RecentlyOfflineMap,

packages/app-storage/src/Query.tsx

@@ -51,7 +51,11 @@ class Query extends React.PureComponent<Props, State> {
       const defaultProps = { className: 'ui--output' };
 
       // render function to create an element for the query results which is plugged to the api
-      const renderHelper = withCallDiv('subscribe', { params: [key, ...values] });
+      const renderHelper = withCallDiv('subscribe', {
+        paramName: 'params',
+        paramValid: true,
+        params: [key, ...values]
+      });
       const Component = renderHelper(
         // By default we render a simple div node component with the query results in it
         (value: any) => valueToText(type, value, true, true),

packages/ui-api/src/types.ts

@@ -31,11 +31,6 @@ export type OnChangeCb = OnChangeCb$Obs | OnChangeCb$Fn;
 export type ChangeProps = {
   callOnResult?: OnChangeCb
 };
-
-export type ParamProps = {
-  params?: any
-};
-
 export type CallState = {
   callResult?: any;
   callUpdated?: boolean;
@@ -44,7 +39,7 @@ export type CallState = {
 
 export type CallProps = ApiProps & CallState;
 
-export type BaseProps<T> = BareProps & CallProps & ChangeProps & ParamProps & {
+export type BaseProps<T> = BareProps & CallProps & ChangeProps & {
   children?: React.ReactNode,
   label?: string,
   render?: (value?: T) => React.ReactNode

packages/ui-api/src/with/call.tsx

@@ -23,7 +23,7 @@ const NOOP = () => {
   // ignore
 };
 
-export default function withCall<P extends ApiProps> (endpoint: string, { at, atProp, callOnResult, params = [], paramName = 'params', propName, transform = echoTransform }: Options = {}): (Inner: React.ComponentType<ApiProps>) => React.ComponentType<any> {
+export default function withCall<P extends ApiProps> (endpoint: string, { at, atProp, callOnResult, params = [], paramName, paramValid = false, propName, transform = echoTransform }: Options = {}): (Inner: React.ComponentType<ApiProps>) => React.ComponentType<any> {
   return (Inner: React.ComponentType<ApiProps>): React.ComponentType<Subtract<P, ApiProps>> => {
     class WithPromise extends React.Component<P, State> {
       state: State = {
@@ -91,20 +91,30 @@ export default function withCall<P extends ApiProps> (endpoint: string, { at, at
         }
       }
 
-      private getParams (props: any): Array<any> {
-        const paramValue = props[paramName];
+      private getParams (props: any): [boolean, Array<any>] {
+        const paramValue = paramName
+          ? props[paramName]
+          : undefined;
 
         if (atProp) {
           at = props[atProp];
         }
 
-        return isUndefined(paramValue)
+        // When we are specifying a param and have an invalid, don't use it. For 'params',
+        // we default to the original types, i.e. no validation (query app uses this)
+        if (!paramValid && paramName && (isUndefined(paramValue) || isNull(paramValue))) {
+          return [false, []];
+        }
+
+        const values = isUndefined(paramValue)
           ? params
           : params.concat(
             Array.isArray(paramValue)
               ? paramValue
               : [paramValue]
           );
+
+        return [true, values];
       }
 
       private getApiMethod (newParams: Array<any>): [Method, Array<any>, boolean] {
@@ -145,7 +155,11 @@ export default function withCall<P extends ApiProps> (endpoint: string, { at, at
         ];
       }
 
-      private async subscribe (newParams: Array<any>) {
+      private async subscribe ([isValid, newParams]: [boolean, Array<any>]) {
+        if (!isValid) {
+          return;
+        }
+
         const { api } = this.props;
 
         await api.isReady;

packages/ui-api/src/with/types.ts

@@ -19,6 +19,7 @@ export type Options = {
   callOnResult?: OnChangeCb,
   params?: Array<any>,
   paramName?: string,
+  paramValid?: boolean,
   propName?: string,
   transform?: Transform
 };

packages/ui-app/src/AddressMini.tsx

@@ -88,7 +88,7 @@ export default class AddressMini extends React.PureComponent<Props> {
       <BalanceDisplay
         balance={balance}
         className='ui--AddressSummary-balance'
-        value={value}
+        params={value}
       />
     );
   }
@@ -104,7 +104,7 @@ export default class AddressMini extends React.PureComponent<Props> {
       <BondedDisplay
         className='ui--AddressSummary-balance'
         label=''
-        value={value}
+        params={value}
       />
     );
   }

packages/ui-app/src/AddressSummary.tsx

@@ -149,7 +149,7 @@ class AddressSummary extends React.PureComponent<Props> {
         balance={balance}
         className='ui--AddressSummary-balance'
         label={t('balance ')}
-        value={accountId}
+        params={accountId}
       />
     );
   }
@@ -167,7 +167,7 @@ class AddressSummary extends React.PureComponent<Props> {
       <BondedDisplay
         className='ui--AddressSummary-bonded'
         label={t('bonded ')}
-        value={accountId}
+        params={accountId}
       />
     );
   }

packages/ui-app/src/Balance.tsx

@@ -15,15 +15,15 @@ import { classes } from './util';
 export type Props = BareProps & {
   balance?: Balance | Array<Balance> | BN,
   label?: string,
-  value?: AccountId | AccountIndex | Address | string | Uint8Array | null,
+  params?: AccountId | AccountIndex | Address | string | Uint8Array | null,
   withLabel?: boolean
 };
 
 export default class BalanceDisplay extends React.PureComponent<Props> {
   render () {
-    const { balance, className, label, value, style } = this.props;
+    const { balance, className, label, params, style } = this.props;
 
-    if (!value) {
+    if (!params) {
       return null;
     }
 
@@ -33,7 +33,7 @@ export default class BalanceDisplay extends React.PureComponent<Props> {
         <RxBalance
           className={classes('ui--Balance', className)}
           label={label}
-          params={value}
+          params={params}
           style={style}
         />
       );

packages/ui-app/src/Bonded.tsx

@@ -12,14 +12,15 @@ import { classes } from './util';
 
 export type Props = BareProps & {
   label?: string,
-  value?: AccountId | AccountIndex | Address | string | Uint8Array | null,
+  params?: AccountId | AccountIndex | Address | string | Uint8Array | null,
   withLabel?: boolean
 };
 
 export default class BondedDisplay extends React.PureComponent<Props> {
   render () {
-    const { value, className, label, style } = this.props;
-    if (!value) {
+    const { params, className, label, style } = this.props;
+
+    if (!params) {
       return null;
     }
 
@@ -27,7 +28,7 @@ export default class BondedDisplay extends React.PureComponent<Props> {
       <RxBonded
         className={classes('ui--Bonded', className)}
         label={label}
-        value={value}
+        params={params}
         style={style}
       />
     );

packages/ui-reactive/src/AccountIndex.tsx

@@ -34,4 +34,4 @@ export class AccountIndexDisplay extends React.PureComponent<Props> {
   }
 }
 
-export default withCall('derive.accounts.idAndIndex', { paramName: 'value' })(AccountIndexDisplay);
+export default withCall('derive.accounts.idAndIndex', { paramName: 'params' })(AccountIndexDisplay);

packages/ui-reactive/src/Balance.tsx

@@ -34,4 +34,4 @@ export class BalanceDisplay extends React.PureComponent<Props> {
   }
 }
 
-export default withCall('query.balances.freeBalance')(BalanceDisplay);
+export default withCall('query.balances.freeBalance', { paramName: 'params' })(BalanceDisplay);

packages/ui-reactive/src/Bonded.tsx

@@ -12,7 +12,7 @@ import { formatBalance } from '@polkadot/util';
 
 type Props = BareProps & CallProps & {
   children?: React.ReactNode,
-  value?: AccountId | AccountIndex | Address | string | Uint8Array | null,
+  params?: AccountId | AccountIndex | Address | string | Uint8Array | null,
   label?: string,
   staking_ledger?: Option<StakingLedger>
 };
@@ -44,8 +44,10 @@ export class BondedDisplay extends React.PureComponent<Props> {
 
 export default withCalls<Props>(
   ['query.staking.bonded', {
-    paramName: 'value',
-    transform: (value) => value.unwrapOr(null)
+    paramName: 'params',
+    propName: 'controllerId',
+    transform: (value) =>
+      value.unwrapOr(null)
   }],
-  ['query.staking.ledger', { paramName: 'staking_bonded' }]
+  ['query.staking.ledger', { paramName: 'controllerId' }]
 )(BondedDisplay);

packages/ui-reactive/src/Nonce.tsx

@@ -34,4 +34,4 @@ export class Nonce extends React.PureComponent<Props> {
   }
 }
 
-export default withCall('query.system.accountNonce')(Nonce);
+export default withCall('query.system.accountNonce', { paramName: 'params' })(Nonce);