Cleanup api call usage (#617)

* Rename apiPromise -> api * First attemp at React render component (unused) * Cleanup api call usage * Cleanup linting * Remove render component * Adjustments on HOC types (& usage)
2019-01-18 23:04:13 +01:00 · 2019-01-18 23:04:13 +01:00 · eb0abb8307
commit eb0abb8307
parent 67a9a481e5
58 changed files with 390 additions and 409 deletions
--- a/packages/app-democracy/src/Proposal.tsx
+++ b/packages/app-democracy/src/Proposal.tsx
@ -16,7 +16,7 @@ import Item from './Item';
 import translate from './translate';

 type Props = I18nProps & {
-  query_democracy_depositOf?: Tuple,
+  democracy_depositOf?: Tuple,
  idNumber: BN,
  value: Tuple
 };
@ -35,14 +35,14 @@ class ProposalDisplay extends React.PureComponent<Props> {
  }

  private renderExtra () {
-    const { query_democracy_depositOf, t } = this.props;
+    const { democracy_depositOf, t } = this.props;

-    if (!query_democracy_depositOf) {
+    if (!democracy_depositOf) {
      return null;
    }

-    const balance = query_democracy_depositOf[0] as Balance;
-    const addresses = query_democracy_depositOf[1] as Vector<AccountId>;
+    const balance = democracy_depositOf[0] as Balance;
+    const addresses = democracy_depositOf[1] as Vector<AccountId>;

    return (
      <div className='democracy--Proposal-info'>
@ -76,5 +76,5 @@ class ProposalDisplay extends React.PureComponent<Props> {
 export default withMulti(
  ProposalDisplay,
  translate,
-  withCall('query.democracy.depositOf', { paramProp: 'idNumber' })
+  withCall('query.democracy.depositOf', { paramName: 'idNumber' })
 );
--- a/packages/app-democracy/src/Proposals.tsx
+++ b/packages/app-democracy/src/Proposals.tsx
@ -12,7 +12,7 @@ import Proposal from './Proposal';
 import translate from './translate';

 type Props = I18nProps & {
-  query_democracy_publicProps?: Array<Tuple>
+  democracy_publicProps?: Array<Tuple>
 };

 class Proposals extends React.PureComponent<Props> {
@ -30,9 +30,9 @@ class Proposals extends React.PureComponent<Props> {
  }

  private renderProposals () {
-    const { query_democracy_publicProps, t } = this.props;
+    const { democracy_publicProps, t } = this.props;

-    if (!query_democracy_publicProps || !query_democracy_publicProps.length) {
+    if (!democracy_publicProps || !democracy_publicProps.length) {
      return (
        <div className='ui disabled'>
          {t('proposals.none', {
@ -42,7 +42,7 @@ class Proposals extends React.PureComponent<Props> {
      );
    }

-    return query_democracy_publicProps.map((proposal) => (
+    return democracy_publicProps.map((proposal) => (
      <Proposal
        idNumber={proposal[0]}
        key={proposal[0].toString()}
--- a/packages/app-democracy/src/Referendum.tsx
+++ b/packages/app-democracy/src/Referendum.tsx
@ -27,9 +27,9 @@ const COLORS_NAY = settings.uiTheme === 'substrate'
  : ['#d75ea1', '#e189ba'];

 type Props = I18nProps & {
-  derive_chain_bestNumber?: BN,
-  derive_democracy_referendumVotesFor?: Array<DerivedReferendumVote>,
-  query_democracy_publicDelay?: BN,
+  chain_bestNumber?: BN,
+  democracy_referendumVotesFor?: Array<DerivedReferendumVote>,
+  democracy_publicDelay?: BN,
  idNumber: BN,
  value: ReferendumInfo
 };
@ -59,12 +59,12 @@ class Referendum extends React.PureComponent<Props, State> {
    };
  }

-  static getDerivedStateFromProps ({ derive_democracy_referendumVotesFor }: Props, prevState: State): State | null {
-    if (!derive_democracy_referendumVotesFor) {
+  static getDerivedStateFromProps ({ democracy_referendumVotesFor }: Props, prevState: State): State | null {
+    if (!democracy_referendumVotesFor) {
      return null;
    }

-    const newState: State = derive_democracy_referendumVotesFor.reduce((state, { balance, vote }) => {
+    const newState: State = democracy_referendumVotesFor.reduce((state, { balance, vote }) => {
      if (vote.ltn(0)) {
        state.voteCountYay++;
        state.votedYay = state.votedYay.add(balance);
@ -94,9 +94,9 @@ class Referendum extends React.PureComponent<Props, State> {
  }

  render () {
-    const { derive_chain_bestNumber, idNumber, value } = this.props;
+    const { chain_bestNumber, idNumber, value } = this.props;

-    if (!derive_chain_bestNumber || value.end.sub(derive_chain_bestNumber).lten(0)) {
+    if (!chain_bestNumber || value.end.sub(chain_bestNumber).lten(0)) {
      return null;
    }

@ -113,13 +113,13 @@ class Referendum extends React.PureComponent<Props, State> {
  }

  private renderExtra () {
-    const { derive_chain_bestNumber, query_democracy_publicDelay, t, value: { end, threshold } } = this.props;
+    const { chain_bestNumber, democracy_publicDelay, t, value: { end, threshold } } = this.props;

-    if (!derive_chain_bestNumber) {
+    if (!chain_bestNumber) {
      return null;
    }

-    const enactBlock = (query_democracy_publicDelay || new BN(0)).add(end);
+    const enactBlock = (democracy_publicDelay || new BN(0)).add(end);

    return (
      <div className='democracy--Referendum-info'>
@ -132,7 +132,7 @@ class Referendum extends React.PureComponent<Props, State> {
            defaultValue: 'block #{{blockNumber}}, {{remaining}} blocks remaining',
            replace: {
              blockNumber: numberFormat(end),
-              remaining: numberFormat(end.sub(derive_chain_bestNumber).subn(1))
+              remaining: numberFormat(end.sub(chain_bestNumber).subn(1))
            }
          })}
        </Static>
@ -193,6 +193,6 @@ export default withMulti(
  Referendum,
  translate,
  withCall('derive.chain.bestNumber'),
-  withCall('derive.democracy.referendumVotesFor', { paramProp: 'idNumber' }),
+  withCall('derive.democracy.referendumVotesFor', { paramName: 'idNumber' }),
  withCall('query.democracy.publicDelay')
 );
--- a/packages/app-democracy/src/Referendums.tsx
+++ b/packages/app-democracy/src/Referendums.tsx
@ -13,9 +13,9 @@ import Referendum from './Referendum';
 import translate from './translate';

 type Props = I18nProps & {
-  query_democracy_nextTally?: BN,
-  query_democracy_referendumCount?: BN,
-  derive_democracy_referendums?: Array<ReferendumInfo>
+  democracy_nextTally?: BN,
+  democracy_referendumCount?: BN,
+  democracy_referendums?: Array<ReferendumInfo>
 };

 class Referendums extends React.PureComponent<Props> {
@ -33,10 +33,10 @@ class Referendums extends React.PureComponent<Props> {
  }

  private renderReferendums () {
-    const { query_democracy_nextTally, derive_democracy_referendums, query_democracy_referendumCount, t } = this.props;
-    const referendumCount = (query_democracy_referendumCount || new BN(0)).toNumber();
+    const { democracy_nextTally, democracy_referendums, democracy_referendumCount, t } = this.props;
+    const referendumCount = (democracy_referendumCount || new BN(0)).toNumber();

-    if (!derive_democracy_referendums || !derive_democracy_referendums.length || (referendumCount === (query_democracy_nextTally || new BN(0)).toNumber())) {
+    if (!democracy_referendums || !democracy_referendums.length || (referendumCount === (democracy_nextTally || new BN(0)).toNumber())) {
      return (
        <div className='ui disabled'>
          {t('proposals.none', {
@ -46,9 +46,9 @@ class Referendums extends React.PureComponent<Props> {
      );
    }

-    const startIndex = referendumCount - derive_democracy_referendums.length;
+    const startIndex = referendumCount - democracy_referendums.length;

-    return derive_democracy_referendums.map((referendum, index) => (
+    return democracy_referendums.map((referendum, index) => (
      <Referendum
        idNumber={index + startIndex}
        key={index}
--- a/packages/app-democracy/src/Summary.tsx
+++ b/packages/app-democracy/src/Summary.tsx
@ -13,18 +13,18 @@ import { numberFormat } from '@polkadot/ui-reactive/util/index';
 import translate from './translate';

 type Props = I18nProps & {
-  derive_chain_bestNumber?: BN,
-  query_democracy_launchPeriod?: BN,
-  query_democracy_nextTally?: BN,
-  query_democracy_publicDelay?: BN,
-  query_democracy_publicPropCount?: BN,
-  query_democracy_referendumCount?: BN,
-  query_democracy_votingPeriod?: BN
+  chain_bestNumber?: BN,
+  democracy_launchPeriod?: BN,
+  democracy_nextTally?: BN,
+  democracy_publicDelay?: BN,
+  democracy_publicPropCount?: BN,
+  democracy_referendumCount?: BN,
+  democracy_votingPeriod?: BN
 };

 class Summary extends React.PureComponent<Props> {
  render () {
-    const { derive_chain_bestNumber = new BN(0), query_democracy_launchPeriod, query_democracy_nextTally, query_democracy_publicPropCount, query_democracy_referendumCount, query_democracy_votingPeriod, t } = this.props;
+    const { chain_bestNumber = new BN(0), democracy_launchPeriod, democracy_nextTally, democracy_publicPropCount, democracy_referendumCount, democracy_votingPeriod, t } = this.props;

    return (
      <summary>
@ -34,21 +34,21 @@ class Summary extends React.PureComponent<Props> {
              defaultValue: 'proposals'
            })}
          >
-            {numberFormat(query_democracy_publicPropCount)}
+            {numberFormat(democracy_publicPropCount)}
          </CardSummary>
          <CardSummary
            label={t('summary.referendumCount', {
              defaultValue: 'referendums'
            })}
          >
-            {numberFormat(query_democracy_referendumCount)}
+            {numberFormat(democracy_referendumCount)}
          </CardSummary>
          <CardSummary
            label={t('summary.active', {
              defaultValue: 'active num'
            })}
          >
-            {numberFormat((query_democracy_referendumCount || new BN(0)).sub(query_democracy_nextTally || new BN(0)))}
+            {numberFormat((democracy_referendumCount || new BN(0)).sub(democracy_nextTally || new BN(0)))}
          </CardSummary>
        </section>
        <section>
@ -57,8 +57,8 @@ class Summary extends React.PureComponent<Props> {
              defaultValue: 'voting period'
            })}
            progress={{
-              value: derive_chain_bestNumber.mod(query_democracy_votingPeriod || new BN(1)).addn(1),
-              total: query_democracy_votingPeriod || new BN(1)
+              value: chain_bestNumber.mod(democracy_votingPeriod || new BN(1)).addn(1),
+              total: democracy_votingPeriod || new BN(1)
            }}
          />
          <CardSummary
@ -66,8 +66,8 @@ class Summary extends React.PureComponent<Props> {
              defaultValue: 'launch period'
            })}
            progress={{
-              value: derive_chain_bestNumber.mod(query_democracy_launchPeriod || new BN(1)).addn(1),
-              total: query_democracy_launchPeriod || new BN(1)
+              value: chain_bestNumber.mod(democracy_launchPeriod || new BN(1)).addn(1),
+              total: democracy_launchPeriod || new BN(1)
            }}
          />
        </section>
--- a/packages/app-democracy/src/VotingButtons.tsx
+++ b/packages/app-democracy/src/VotingButtons.tsx
@ -47,14 +47,14 @@ class VotingButton extends React.PureComponent<Props> {
  }

  private doVote (vote: boolean) {
-    const { accountId, apiPromise, queueExtrinsic, referendumId } = this.props;
+    const { accountId, api, queueExtrinsic, referendumId } = this.props;

    if (!accountId) {
      return;
    }

    queueExtrinsic({
-      extrinsic: apiPromise.tx.democracy.vote(referendumId, vote ? -1 : 0),
+      extrinsic: api.tx.democracy.vote(referendumId, vote ? -1 : 0),
      accountId
    });
  }
--- a/packages/app-explorer/src/BestHash.tsx
+++ b/packages/app-explorer/src/BestHash.tsx
@ -2,20 +2,20 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import { BareProps } from '@polkadot/ui-api/types';
+import { BareProps, CallProps } from '@polkadot/ui-api/types';

 import React from 'react';
 import { Header } from '@polkadot/types';
 import { withCall } from '@polkadot/ui-api/index';

-type Props = BareProps & {
+type Props = BareProps & CallProps & {
  label?: string,
-  rpc_chain_subscribeNewHead?: Header
+  chain_subscribeNewHead?: Header
 };

 class BestHash extends React.PureComponent<Props> {
  render () {
-    const { className, label = '', style, rpc_chain_subscribeNewHead } = this.props;
+    const { className, label = '', style, chain_subscribeNewHead } = this.props;

    return (
      <div
@ -23,8 +23,8 @@ class BestHash extends React.PureComponent<Props> {
        style={style}
      >
        {label}{
-          rpc_chain_subscribeNewHead
-            ? rpc_chain_subscribeNewHead.hash.toHex()
+          chain_subscribeNewHead
+            ? chain_subscribeNewHead.hash.toHex()
            : undefined
          }
      </div>
@ -32,4 +32,4 @@ class BestHash extends React.PureComponent<Props> {
  }
 }

-export default withCall('rpc.chain.subscribeNewHead', {})(BestHash);
+export default withCall('rpc.chain.subscribeNewHead')(BestHash);
--- a/packages/app-explorer/src/BlockByHash/BlockByHash.tsx
+++ b/packages/app-explorer/src/BlockByHash/BlockByHash.tsx
@ -8,6 +8,7 @@ import { ApiProps } from '@polkadot/ui-api/types';
 import React from 'react';
 import { AddressMini, Call } from '@polkadot/ui-app/index';
 import { EventRecord, Extrinsic, Method, SignedBlock } from '@polkadot/types';
+import { HeaderExtended } from '@polkadot/types/Header';
 import { withCall, withMulti } from '@polkadot/ui-api/index';
 import { numberFormat } from '@polkadot/ui-reactive/util/index';

@ -17,48 +18,47 @@ import Events from './Events';
 import Logs from './Logs';

 type Props = ApiProps & I18nProps & {
-  query_system_events?: Array<EventRecord>,
-  rpc_chain_getBlock?: SignedBlock,
+  system_events?: Array<EventRecord>,
+  chain_getBlock?: SignedBlock,
+  chain_getHeader?: HeaderExtended,
  value: string
 };

 class BlockByHash extends React.PureComponent<Props> {
  render () {
-    const { query_system_events, rpc_chain_getBlock } = this.props;
+    const { system_events, chain_getBlock, chain_getHeader } = this.props;

-    if (!rpc_chain_getBlock || !rpc_chain_getBlock.block) {
+    if (!chain_getBlock || !chain_getHeader) {
      return null;
    }

-    const { block: { header } } = rpc_chain_getBlock;
-
    return [
      <header key='header'>
        <BlockHeader
-          value={header}
+          value={chain_getHeader}
          withExtrinsics
        />
      </header>,
      this.renderExtrinsics(),
      <Events
        key='events'
-        value={query_system_events}
+        value={system_events}
      />,
      <Logs
        key='logs'
-        value={header.digest.logs}
+        value={chain_getHeader.digest.logs}
      />
    ];
  }

  private renderExtrinsics () {
-    const { rpc_chain_getBlock, t } = this.props;
+    const { chain_getBlock, t } = this.props;

-    if (!rpc_chain_getBlock) {
+    if (!chain_getBlock) {
      return null;
    }

-    const { block: { extrinsics } } = rpc_chain_getBlock;
+    const { block: { extrinsics } } = chain_getBlock;

    return (
      <section key='extrinsics'>
@ -123,6 +123,7 @@ class BlockByHash extends React.PureComponent<Props> {
 export default withMulti(
  BlockByHash,
  translate,
-  withCall('rpc.chain.getBlock', { paramProp: 'value' }),
+  withCall('rpc.chain.getBlock', { paramName: 'value' }),
+  withCall('derive.chain.getHeader', { paramName: 'value' }),
  withCall('query.system.events', { atProp: 'value' })
 );
--- a/packages/app-explorer/src/BlockHeader/BlockHash.tsx
+++ b/packages/app-explorer/src/BlockHeader/BlockHash.tsx
@ -1,38 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/ui-app/types';
-
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { withCall } from '@polkadot/ui-api/index';
-import { BlockNumber, Hash } from '@polkadot/types';
-
-type Props = I18nProps & {
-  blockNumber: BlockNumber,
-  rpc_chain_getBlockHash?: Hash,
-  withLink?: boolean
-};
-
-class BlockHash extends React.PureComponent<Props> {
-  render () {
-    const { rpc_chain_getBlockHash, withLink } = this.props;
-
-    if (!rpc_chain_getBlockHash) {
-      return null;
-    }
-
-    const hashHex = rpc_chain_getBlockHash.toHex();
-
-    return (
-      withLink
-        ? <Link to={`/explorer/hash/${hashHex}`}>{hashHex}</Link>
-        : hashHex
-    );
-  }
-}
-
-export default withCall('rpc.chain.getBlockHash', {
-  paramProp: 'blockNumber'
-})(BlockHash);
--- a/packages/app-explorer/src/BlockHeader/Extrinsics.tsx
+++ b/packages/app-explorer/src/BlockHeader/Extrinsics.tsx
@ -11,14 +11,14 @@ import translate from '../translate';

 type Props = I18nProps & {
  hash: Uint8Array,
-  rpc_chain_getBlock: any
+  chain_getBlock: any
 };

 class Extrinsics extends React.PureComponent<Props> {
  render () {
-    const { rpc_chain_getBlock, t } = this.props;
+    const { chain_getBlock, t } = this.props;

-    if (!rpc_chain_getBlock || !rpc_chain_getBlock.extrinsics) {
+    if (!chain_getBlock || !chain_getBlock.extrinsics) {
      return null;
    }

@ -29,7 +29,7 @@ class Extrinsics extends React.PureComponent<Props> {
          {t('extrinsics.count', {
            defaultValue: '{{count}} in block',
            replace: {
-              count: rpc_chain_getBlock.extrinsics.length
+              count: chain_getBlock.extrinsics.length
            }
          })}
        </td>
@ -42,5 +42,5 @@ class Extrinsics extends React.PureComponent<Props> {
 export default withMulti(
  Extrinsics,
  translate,
-  withCall('rpc.chain.getBlock', { paramProp: 'hash' })
+  withCall('rpc.chain.getBlock', { paramName: 'hash' })
 );
--- a/packages/app-explorer/src/BlockHeader/index.tsx
+++ b/packages/app-explorer/src/BlockHeader/index.tsx
@ -2,41 +2,35 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import { AccountId, Header } from '@polkadot/types';
 import { BareProps } from '@polkadot/ui-app/types';

 import './BlockHeader.css';

 import React from 'react';
 import { Link } from 'react-router-dom';
-import { withCall } from '@polkadot/ui-api/index';
+import { HeaderExtended } from '@polkadot/types/Header';
 import { AddressMini } from '@polkadot/ui-app/index';
 import numberFormat from '@polkadot/ui-reactive/util/numberFormat';

 import Extrinsics from './Extrinsics';

 type Props = BareProps & {
-  query_session_validators?: Array<AccountId>,
-  value?: Header,
+  value?: HeaderExtended,
  withExtrinsics?: boolean,
  withLink?: boolean
 };

-class BlockHeader extends React.PureComponent<Props> {
+export default class BlockHeader extends React.PureComponent<Props> {
  render () {
-    const { query_session_validators = [], value, withExtrinsics = false, withLink = false } = this.props;
+    const { value, withExtrinsics = false, withLink = false } = this.props;

    if (!value) {
      return null;
    }

-    const { blockNumber, digest: { logs }, extrinsicsRoot, parentHash, stateRoot } = value;
+    const { author, blockNumber, extrinsicsRoot, parentHash, stateRoot } = value;
    const parentHex = parentHash.toHex();
    const hashHex = value.hash.toHex();
-    const digestItem = logs.find(({ type }) => type === 'Seal');
-    const authorId = digestItem && query_session_validators.length
-      ? query_session_validators[digestItem.asSeal.slot.toNumber() % query_session_validators.length]
-      : undefined;

    return (
      <article className='explorer--BlockHeader'>
@ -72,8 +66,8 @@ class BlockHeader extends React.PureComponent<Props> {
            }
          </div>
          <div className='author'>{
-            authorId
-              ? <AddressMini value={authorId} />
+            author
+              ? <AddressMini value={author} />
              : undefined
          }</div>
        </div>
@ -81,5 +75,3 @@ class BlockHeader extends React.PureComponent<Props> {
    );
  }
 }
-
-export default withCall('query.session.validators')(BlockHeader);
--- a/packages/app-explorer/src/BlockHeaders.tsx
+++ b/packages/app-explorer/src/BlockHeaders.tsx
@ -2,18 +2,19 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import { Header } from '@polkadot/types';
+import { CallProps } from '@polkadot/ui-api/types';

 import React from 'react';
+import { HeaderExtended } from '@polkadot/types/Header';
 import { withCall } from '@polkadot/ui-api/index';

 import BlockHeader from './BlockHeader';

 export const MAX_ITEMS = 15;

-let blockHeaders: Array<Header> = [];
+let blockHeaders: Array<HeaderExtended> = [];

-const transform = (header: Header): Array<Header> => {
+const transform = (header: HeaderExtended): Array<HeaderExtended> => {
  if (!header) {
    return blockHeaders;
  }
@ -34,8 +35,8 @@ const transform = (header: Header): Array<Header> => {
  return blockHeaders;
 };

-type Props = {
-  headers?: Array<Header>
+type Props = CallProps & {
+  headers?: Array<HeaderExtended>
 };

 class BlockHeaders extends React.PureComponent<Props> {
--- a/packages/app-explorer/src/EventsRecent.tsx
+++ b/packages/app-explorer/src/EventsRecent.tsx
@ -15,7 +15,7 @@ import Events from './Events';
 import translate from './translate';

 type Props = I18nProps & {
-  query_system_events?: Array<EventRecord>
+  system_events?: Array<EventRecord>
 };

 type State = {
@ -33,14 +33,14 @@ class EventsRecent extends React.PureComponent<Props, State> {
    };
  }

-  static getDerivedStateFromProps ({ query_system_events = [] }: Props, prevState: State): State | null {
-    const prevEventHash = xxhashAsHex(stringToU8a(JSON.stringify(query_system_events)));
+  static getDerivedStateFromProps ({ system_events = [] }: Props, prevState: State): State | null {
+    const prevEventHash = xxhashAsHex(stringToU8a(JSON.stringify(system_events)));

    if (prevEventHash === prevState.prevEventHash) {
      return null;
    }

-    const recentEvents = query_system_events
+    const recentEvents = system_events
      .filter(({ event }) => event.section !== 'system')
      .concat(prevState.recentEvents)
      .filter((_, index) => index < MAX_ITEMS);
--- a/packages/app-explorer/src/SummarySession.tsx
+++ b/packages/app-explorer/src/SummarySession.tsx
@ -13,13 +13,13 @@ import { withCall, withMulti } from '@polkadot/ui-api/index';
 import translate from './translate';

 type Props = I18nProps & {
-  derive_session_eraLength?: BN,
-  derive_session_eraProgress?: BN,
-  derive_session_sessionProgress?: BN,
+  session_eraLength?: BN,
+  session_eraProgress?: BN,
+  session_sessionProgress?: BN,
  // FIXME Replaced in poc-3
  // sessionBrokenValue?: BN,
  // sessionBrokenPercentLate?: BN,
-  query_session_sessionLength?: BlockNumber,
+  session_sessionLength?: BlockNumber,
  withBroken?: boolean,
  withEra?: boolean,
  withSession?: boolean
@ -59,7 +59,7 @@ class SummarySession extends React.PureComponent<Props> {
  // }

  private renderEra () {
-    const { derive_session_eraLength, derive_session_eraProgress, t, withEra = true } = this.props;
+    const { session_eraLength, session_eraProgress, t, withEra = true } = this.props;

    if (!withEra) {
      return null;
@ -72,15 +72,15 @@ class SummarySession extends React.PureComponent<Props> {
          defaultValue: 'era'
        })}
        progress={{
-          total: derive_session_eraLength,
-          value: derive_session_eraProgress
+          total: session_eraLength,
+          value: session_eraProgress
        }}
      />
    );
  }

  private renderSession () {
-    const { derive_session_sessionProgress, query_session_sessionLength, t, withSession = true } = this.props;
+    const { session_sessionProgress, session_sessionLength, t, withSession = true } = this.props;

    if (!withSession) {
      return null;
@ -93,8 +93,8 @@ class SummarySession extends React.PureComponent<Props> {
          defaultValue: 'session'
        })}
        progress={{
-          total: query_session_sessionLength || new BN(0),
-          value: derive_session_sessionProgress
+          total: session_sessionLength || new BN(0),
+          value: session_sessionProgress
        }}
      />
    );
--- a/packages/app-extrinsics/src/Params/Call.tsx
+++ b/packages/app-extrinsics/src/Params/Call.tsx
@ -14,10 +14,10 @@ type Props = ApiProps & BaseProps;

 class Call extends React.PureComponent<Props> {
  render () {
-    const { apiDefaultTx, apiPromise, className, isDisabled, isError, label, onChange, style, withLabel } = this.props;
+    const { apiDefaultTx, api, className, isDisabled, isError, label, onChange, style, withLabel } = this.props;
    const defaultValue = (() => {
      try {
-        return apiPromise.tx.balances.transfer;
+        return api.tx.balances.transfer;
      } catch (error) {
        return apiDefaultTx;
      }
--- a/packages/app-extrinsics/src/Params/Proposal.tsx
+++ b/packages/app-extrinsics/src/Params/Proposal.tsx
@ -15,10 +15,10 @@ type Props = ApiProps & BaseProps;

 class ProposalDisplay extends React.PureComponent<Props> {
  render () {
-    const { apiDefaultTx, apiPromise, className, isDisabled, isError, label, style, withLabel } = this.props;
+    const { apiDefaultTx, api, className, isDisabled, isError, label, style, withLabel } = this.props;
    const defaultValue = (() => {
      try {
-        return apiPromise.tx.consensus.setCode;
+        return api.tx.consensus.setCode;
      } catch (error) {
        return apiDefaultTx;
      }
--- a/packages/app-extrinsics/src/Selection.tsx
+++ b/packages/app-extrinsics/src/Selection.tsx
@ -34,11 +34,11 @@ class Selection extends React.PureComponent<Props, State> {
  } as State;

  render () {
-    const { apiDefaultTx, apiPromise, t } = this.props;
+    const { apiDefaultTx, api, t } = this.props;
    const { isValid, accountId } = this.state;
    const defaultExtrinsic = (() => {
      try {
-        return apiPromise.tx.balances.transfer;
+        return api.tx.balances.transfer;
      } catch (error) {
        return apiDefaultTx;
      }
@ -123,7 +123,7 @@ class Selection extends React.PureComponent<Props, State> {
  }

  private onQueue (isUnsigned: boolean): void {
-    const { apiPromise, queueExtrinsic } = this.props;
+    const { api, queueExtrinsic } = this.props;
    const { method, isValid, accountId } = this.state;

    if (!isValid || !method) {
@ -136,7 +136,7 @@ class Selection extends React.PureComponent<Props, State> {
      accountId: isUnsigned
        ? undefined
        : accountId,
-      extrinsic: apiPromise.tx[fn.section][fn.method](...method.args),
+      extrinsic: api.tx[fn.section][fn.method](...method.args),
      isUnsigned
    });
  }
--- a/packages/app-staking/src/Overview/Summary.tsx
+++ b/packages/app-staking/src/Overview/Summary.tsx
@ -18,13 +18,13 @@ type Props = I18nProps & {
  balances: DerivedBalancesMap,
  intentions: Array<string>,
  lastLengthChange?: BN,
-  query_staking_validatorCount?: BN,
+  staking_validatorCount?: BN,
  validators: Array<string>
 };

 class Summary extends React.PureComponent<Props> {
  render () {
-    const { className, intentions, style, t, query_staking_validatorCount, validators } = this.props;
+    const { className, intentions, style, t, staking_validatorCount, validators } = this.props;

    return (
      <summary
@ -37,7 +37,7 @@ class Summary extends React.PureComponent<Props> {
              defaultValue: 'validators'
            })}
          >
-            {validators.length}/{query_staking_validatorCount ? query_staking_validatorCount.toString() : '-'}
+            {validators.length}/{staking_validatorCount ? staking_validatorCount.toString() : '-'}
          </CardSummary>
          <CardSummary
            label={t('summary.intentions', {
--- a/packages/app-staking/src/StakeList/Account.tsx
+++ b/packages/app-staking/src/StakeList/Account.tsx
@ -22,8 +22,8 @@ type Props = ApiProps & I18nProps & {
  balances: DerivedBalancesMap,
  balanceArray: (_address: AccountId | string) => Array<Balance> | undefined,
  name: string,
-  query_staking_nominating?: AccountId,
-  query_staking_nominatorsFor?: Array<string>,
+  staking_nominating?: AccountId,
+  staking_nominatorsFor?: Array<string>,
  intentions: Array<string>,
  isValidator: boolean,
  queueExtrinsic: QueueTx$ExtrinsicAdd,
@ -45,8 +45,8 @@ class Account extends React.PureComponent<Props, State> {
    };
  }

-  static getDerivedStateFromProps ({ query_staking_nominating }: Props) {
-    const isNominating = !!query_staking_nominating && !query_staking_nominating.isEmpty;
+  static getDerivedStateFromProps ({ staking_nominating }: Props) {
+    const isNominating = !!staking_nominating && !staking_nominating.isEmpty;

    return {
      isNominating
@ -82,32 +82,32 @@ class Account extends React.PureComponent<Props, State> {
  }

  private renderNominee () {
-    const { query_staking_nominating, balanceArray } = this.props;
+    const { staking_nominating, balanceArray } = this.props;
    const { isNominating } = this.state;

-    if (!isNominating || !query_staking_nominating) {
+    if (!isNominating || !staking_nominating) {
      return null;
    }

    return (
      <AddressMini
-        balance={balanceArray(query_staking_nominating)}
-        value={query_staking_nominating}
+        balance={balanceArray(staking_nominating)}
+        value={staking_nominating}
        withBalance
      />
    );
  }

  private renderNominators () {
-    const { query_staking_nominatorsFor } = this.props;
+    const { staking_nominatorsFor } = this.props;

-    if (!query_staking_nominatorsFor) {
+    if (!staking_nominatorsFor) {
      return null;
    }

    return (
      <div className='ui--Nominators'>
-        {query_staking_nominatorsFor.map((nominator) => (
+        {staking_nominatorsFor.map((nominator) => (
          <AddressMini
            isPadded={false}
            key={nominator}
@ -120,7 +120,7 @@ class Account extends React.PureComponent<Props, State> {
  }

  private renderButtons () {
-    const { accountId, intentions, query_staking_nominating, t } = this.props;
+    const { accountId, intentions, staking_nominating, t } = this.props;
    const { isNominating } = this.state;
    const isIntending = intentions.includes(accountId);
    const canStake = !isIntending && !isNominating;
@ -152,7 +152,7 @@ class Account extends React.PureComponent<Props, State> {
        <Button.Group>
          <UnnominateButton
            accountId={accountId || ''}
-            nominating={query_staking_nominating || ''}
+            nominating={staking_nominating || ''}
            onClick={this.unnominate}
          />
        </Button.Group>
@ -190,37 +190,37 @@ class Account extends React.PureComponent<Props, State> {
  }

  private nominate = (nominee: string) => {
-    const { apiPromise } = this.props;
+    const { api } = this.props;

-    this.send(apiPromise.tx.staking.nominate(nominee));
+    this.send(api.tx.staking.nominate(nominee));

    this.toggleNominate();
  }

  private unnominate = (index: number) => {
-    const { apiPromise } = this.props;
+    const { api } = this.props;

-    this.send(apiPromise.tx.staking.unnominate(index));
+    this.send(api.tx.staking.unnominate(index));
  }

  private stake = () => {
-    const { apiPromise } = this.props;
+    const { api } = this.props;

-    this.send(apiPromise.tx.staking.stake());
+    this.send(api.tx.staking.stake());
  }

  private unstake = () => {
-    const { apiPromise } = this.props;
+    const { api } = this.props;

    const { accountId, intentions } = this.props;

-    this.send(apiPromise.tx.staking.unstake(intentions.indexOf(accountId)));
+    this.send(api.tx.staking.unstake(intentions.indexOf(accountId)));
  }
 }

 export default withMulti(
  Account,
  translate,
-  withCall('query.staking.nominatorsFor', { paramProp: 'accountId' }),
-  withCall('query.staking.nominating', { paramProp: 'accountId' })
+  withCall('query.staking.nominatorsFor', { paramName: 'accountId' }),
+  withCall('query.staking.nominating', { paramName: 'accountId' })
 );
--- a/packages/app-staking/src/StakeList/UnnominateButton.tsx
+++ b/packages/app-staking/src/StakeList/UnnominateButton.tsx
@ -13,15 +13,15 @@ import translate from '../translate';
 type Props = I18nProps & {
  accountId: string,
  nominating: string,
-  query_staking_nominatorsFor: Array<string>,
+  staking_nominatorsFor: Array<string>,
  onClick: (index: number) => void
 };

 class UnnominateButton extends React.Component<Props> {
  render () {
-    const { nominating, query_staking_nominatorsFor, style, t } = this.props;
+    const { nominating, staking_nominatorsFor, style, t } = this.props;

-    if (!nominating || !query_staking_nominatorsFor) {
+    if (!nominating || !staking_nominatorsFor) {
      return null;
    }

@ -39,10 +39,10 @@ class UnnominateButton extends React.Component<Props> {
  }

  onClick = () => {
-    const { accountId, query_staking_nominatorsFor, onClick } = this.props;
+    const { accountId, staking_nominatorsFor, onClick } = this.props;

    onClick(
-      query_staking_nominatorsFor
+      staking_nominatorsFor
        .map((accountId) =>
          accountId.toString()
        )
@ -53,5 +53,5 @@ class UnnominateButton extends React.Component<Props> {
 export default withMulti(
  UnnominateButton,
  translate,
-  withCall('query.staking.nominatorsFor', { paramProp: 'nominating' })
+  withCall('query.staking.nominatorsFor', { paramName: 'nominating' })
 );
--- a/packages/app-staking/src/index.tsx
+++ b/packages/app-staking/src/index.tsx
@ -24,7 +24,7 @@ type Props = I18nProps & {
  balances?: DerivedBalancesMap,
  intentions?: Array<AccountId>,
  onStatusChange: (status: ActionStatus) => void,
-  query_session_validators?: Array<AccountId>
+  session_validators?: Array<AccountId>
 };

 type State = {
@ -51,12 +51,12 @@ class App extends React.PureComponent<Props, State> {
    };
  }

-  static getDerivedStateFromProps ({ query_session_validators, intentions }: Props): State {
+  static getDerivedStateFromProps ({ session_validators, intentions }: Props): State {
    return {
      intentions: (intentions || []).map((accountId) =>
        accountId.toString()
      ),
-      validators: (query_session_validators || []).map((authorityId) =>
+      validators: (session_validators || []).map((authorityId) =>
        authorityId.toString()
      )
    } as State;
--- a/packages/app-storage/src/Selection/Modules.tsx
+++ b/packages/app-storage/src/Selection/Modules.tsx
@ -35,9 +35,9 @@ class Modules extends React.PureComponent<Props, State> {
  constructor (props: Props) {
    super(props);

-    const { apiPromise } = this.props;
+    const { api } = this.props;

-    this.defaultValue = apiPromise.query.timestamp.now;
+    this.defaultValue = api.query.timestamp.now;
    this.state = {
      isValid: true,
      key: this.defaultValue,
--- a/packages/app-transfer/src/Submit.tsx
+++ b/packages/app-transfer/src/Submit.tsx
@ -16,7 +16,7 @@ import translate from './translate';
 type Props = I18nProps & {
  isDisabled: boolean,
  accountId?: string,
-  query_system_accountNonce?: Index,
+  system_accountNonce?: Index,
  extrinsic: SubmittableExtrinsic | null,
  queueExtrinsic: QueueTx$ExtrinsicAdd
 };
@ -40,7 +40,7 @@ class Submit extends React.PureComponent<Props> {
  }

  private onMakeTransfer = () => {
-    const { accountId, query_system_accountNonce, extrinsic, queueExtrinsic } = this.props;
+    const { accountId, system_accountNonce, extrinsic, queueExtrinsic } = this.props;

    if (!extrinsic) {
      return;
@ -49,7 +49,7 @@ class Submit extends React.PureComponent<Props> {
    queueExtrinsic({
      extrinsic,
      accountId,
-      accountNonce: query_system_accountNonce
+      accountNonce: system_accountNonce
    } as QueueTx$Extrinsic);
  }
 }
@ -57,5 +57,5 @@ class Submit extends React.PureComponent<Props> {
 export default withMulti(
  Submit,
  translate,
-  withCall('query.system.accountNonce', { paramProp: 'accountId' })
+  withCall('query.system.accountNonce', { paramName: 'accountId' })
 );
--- a/packages/app-transfer/src/Transfer.tsx
+++ b/packages/app-transfer/src/Transfer.tsx
@ -133,10 +133,10 @@ class Transfer extends React.PureComponent<Props, State> {

  private nextState (newState: Partial<State>): void {
    this.setState((prevState: State): State => {
-      const { apiPromise } = this.props;
+      const { api } = this.props;
      const { accountId = prevState.accountId, amount = prevState.amount, recipientId = prevState.recipientId, hasAvailable = prevState.hasAvailable } = newState;
      const extrinsic = accountId && recipientId
-        ? apiPromise.tx.balances.transfer(recipientId, amount)
+        ? api.tx.balances.transfer(recipientId, amount)
        : null;

      return {
--- a/packages/apps/src/SideBar/Item.tsx
+++ b/packages/apps/src/SideBar/Item.tsx
@ -39,7 +39,7 @@ class Item extends React.PureComponent<Props> {
  }

  private isApiAvailable () {
-    const { apiPromise, isApiConnected, isApiReady, route: { isApiGated, name, needsApi } } = this.props;
+    const { api, isApiConnected, isApiReady, route: { isApiGated, name, needsApi } } = this.props;

    if (isApiGated && (!isApiReady || !isApiConnected)) {
      return false;
@ -51,7 +51,7 @@ class Item extends React.PureComponent<Props> {
      const [area, section, method] = endpoint.split('.');

      try {
-        return !isFunction((apiPromise as any)[area][section][method]);
+        return !isFunction((api as any)[area][section][method]);
      } catch (error) {
        return true;
      }
--- a/packages/apps/src/Status.tsx
+++ b/packages/apps/src/Status.tsx
@ -20,15 +20,15 @@ type Props = I18nProps & {
  optionsAll?: KeyringOptions,
  queueAction: QueueAction$Add,
  stqueue: Array<QueueStatus>,
-  query_system_events?: Array<EventRecord>,
+  system_events?: Array<EventRecord>,
  txqueue: Array<QueueTx>
 };

 let prevEventHash: string;

 class Status extends React.PureComponent<Props> {
-  componentDidUpdate ({ optionsAll = { account: [] as any } as KeyringOptions, queueAction, query_system_events, t }: Props) {
-    const eventHash = xxhashAsHex(stringToU8a(JSON.stringify(query_system_events || [])));
+  componentDidUpdate ({ optionsAll = { account: [] as any } as KeyringOptions, queueAction, system_events, t }: Props) {
+    const eventHash = xxhashAsHex(stringToU8a(JSON.stringify(system_events || [])));

    if (eventHash === prevEventHash) {
      return;
@ -38,7 +38,7 @@ class Status extends React.PureComponent<Props> {

    const addresses = optionsAll.account.map((account) => account.value);

-    (query_system_events || []).forEach(({ event: { data, method, section } }) => {
+    (system_events || []).forEach(({ event: { data, method, section } }) => {
      if (section === 'balances' && method === 'Transfer') {
        const account = data[1].toString();

--- a/packages/ui-api/src/Api.tsx
+++ b/packages/ui-api/src/Api.tsx
@ -36,9 +36,9 @@ export default class ApiWrapper extends React.PureComponent<Props, State> {
    const { url } = props;
    const provider = new WsProvider(url);
    const setApi = (provider: ProviderInterface): void => {
-      const apiPromise = new ApiPromise(provider);
+      const api = new ApiPromise(provider);

-      this.setState({ apiPromise }, () => {
+      this.setState({ api }, () => {
        this.updateSubscriptions();
      });
    };
@ -48,7 +48,7 @@ export default class ApiWrapper extends React.PureComponent<Props, State> {
    this.state = {
      isApiConnected: false,
      isApiReady: false,
-      apiPromise: new ApiPromise(provider),
+      api: new ApiPromise(provider),
      setApiUrl
    } as State;
  }
@ -58,7 +58,7 @@ export default class ApiWrapper extends React.PureComponent<Props, State> {
  }

  private updateSubscriptions () {
-    const { apiPromise } = this.state;
+    const { api } = this.state;

    [
      this.subscribeIsConnected,
@ -66,7 +66,7 @@ export default class ApiWrapper extends React.PureComponent<Props, State> {
      this.subscribeChain
    ].map((fn: Function) => {
      try {
-        return fn(apiPromise);
+        return fn(api);
      } catch (error) {
        console.error(error);
        return null;
@ -126,13 +126,13 @@ export default class ApiWrapper extends React.PureComponent<Props, State> {
  }

  render () {
-    const { apiDefaultTx, apiPromise, chain, isApiConnected, isApiReady, setApiUrl } = this.state;
+    const { api, apiDefaultTx, chain, isApiConnected, isApiReady, setApiUrl } = this.state;

    return (
      <ApiContext.Provider
        value={{
+          api,
          apiDefaultTx,
-          apiPromise,
          isApiConnected,
          isApiReady: isApiReady && !!chain,
          setApiUrl
--- a/packages/ui-api/src/types.ts
+++ b/packages/ui-api/src/types.ts
@ -15,10 +15,10 @@ export type BareProps = {
 };

 export type ApiProps = {
+  api: ApiPromise,
+  apiDefaultTx: SubmittableExtrinsicFunction,
  isApiConnected: boolean,
  isApiReady: boolean,
-  apiDefaultTx: SubmittableExtrinsicFunction,
-  apiPromise: ApiPromise,
  setApiUrl: (url?: string) => void
 };

@ -35,13 +35,15 @@ export type ParamProps = {
  params?: any
 };

-export type CallProps = {
+export type CallState = {
+  callResult?: any;
  callUpdated?: boolean;
  callUpdatedAt?: number;
-  callResult?: any;
 };

-export type BaseProps<T> = BareProps & ApiProps & ChangeProps & ParamProps & CallProps & {
+export type CallProps = ApiProps & CallState;
+
+export type BaseProps<T> = BareProps & CallProps & ChangeProps & ParamProps & {
  children?: React.ReactNode,
  label?: string,
  render?: (value?: T) => React.ReactNode
--- a/packages/ui-api/src/util/intervalObservable.ts
+++ b/packages/ui-api/src/util/intervalObservable.ts
@ -2,13 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import { CallProps } from '../types';
+import { CallState } from '../types';

 import { interval } from 'rxjs/observable/interval';

 const interval$ = interval(500);

-export default function intervalSubscribe<T, Props, State extends CallProps> (that: React.Component<Props, State>) {
+export default function intervalSubscribe<T, Props, State extends CallState> (that: React.Component<Props, State>) {
  return interval$.subscribe(() => {
    const elapsed = Date.now() - ((that.state.callUpdatedAt as number) || 0);
    const callUpdated = elapsed <= 1500;
--- a/packages/ui-api/src/with/api.tsx
+++ b/packages/ui-api/src/with/api.tsx
@ -16,7 +16,7 @@ export default function withApi <P extends ApiProps> (Inner: React.ComponentType
      return (
        <ApiConsumer>
          {(apiProps?: ApiProps) => {
-            assert(apiProps && apiProps.apiPromise, `Application root must be wrapped inside 'rx-react/Api' to provide API context`);
+            assert(apiProps && apiProps.api, `Application root must be wrapped inside 'rx-react/Api' to provide API context`);

            return (
              // @ts-ignore Something here with the props are going wonky
--- a/packages/ui-api/src/with/call.tsx
+++ b/packages/ui-api/src/with/call.tsx
@ -2,8 +2,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import { ApiProps, CallProps } from '../types';
-import { HOC, Options } from './types';
+import { ApiProps, CallState, Subtract } from '../types';
+import { Options } from './types';

 import React from 'react';
 import { assert, isUndefined } from '@polkadot/util';
@ -17,7 +17,7 @@ interface Method {
  at: (hash: Uint8Array | string, ...params: Array<any>) => Promise<any>;
 }

-type State = CallProps & {
+type State = CallState & {
  destroy?: () => void,
  propName: string,
  timerId: number
@ -27,8 +27,8 @@ const NOOP = () => {
  // ignore
 };

-export default function withCall<P extends ApiProps> (endpoint: string, { at, atProp, callOnResult, params = [], paramProp = 'params', propName, transform = echoTransform }: Options = {}): HOC {
-  return (Inner: React.ComponentType<ApiProps>): React.ComponentType<any> => {
+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> {
+  return (Inner: React.ComponentType<ApiProps>): React.ComponentType<Subtract<P, ApiProps>> => {
    class WithPromise extends React.Component<P, State> {
      state: State;
      isActive: boolean = true;
@ -36,10 +36,10 @@ export default function withCall<P extends ApiProps> (endpoint: string, { at, at
      constructor (props: P) {
        super(props);

-        const [area, section, method] = endpoint.split('.');
+        const [, section, method] = endpoint.split('.');

        this.state = {
-          propName: `${area}_${section}_${method}`,
+          propName: `${section}_${method}`,
          callResult: void 0,
          callUpdated: false,
          callUpdatedAt: 0,
@ -98,7 +98,7 @@ export default function withCall<P extends ApiProps> (endpoint: string, { at, at
      }

      private getParams (props: any): Array<any> {
-        const paramValue = props[paramProp];
+        const paramValue = props[paramName];

        if (atProp) {
          at = props[atProp];
@ -114,7 +114,7 @@ export default function withCall<P extends ApiProps> (endpoint: string, { at, at
      }

      private getApiMethod (newParams: Array<any>): [Method, Array<any>, boolean] {
-        const { apiPromise } = this.props;
+        const { api } = this.props;

        if (endpoint === 'subscribe') {
          const [fn, ...params] = newParams;
@ -132,7 +132,7 @@ export default function withCall<P extends ApiProps> (endpoint: string, { at, at
        assert(['rpc', 'query', 'derive'].includes(area), `Unknown api.${area}, expected rpc, query or derive`);
        assert(!at || area === 'query', 'Only able todo an at query on the api.query interface');

-        const apiSection = (apiPromise as any)[area][section];
+        const apiSection = (api as any)[area][section];

        assert(apiSection && apiSection[method], `Unable to find api.${area}.${section}.${method}`);

@ -144,9 +144,9 @@ export default function withCall<P extends ApiProps> (endpoint: string, { at, at
      }

      private async subscribe (newParams: Array<any>) {
-        const { apiPromise } = this.props;
+        const { api } = this.props;

-        await apiPromise.isReady;
+        await api.isReady;

        try {
          const [apiMethod, params, isSubscription] = this.getApiMethod(newParams);
--- a/packages/ui-api/src/with/observable.tsx
+++ b/packages/ui-api/src/with/observable.tsx
@ -4,7 +4,7 @@

 // TODO: Lots of duplicated code between this and withObservable, surely there is a better way of doing this?

-import { CallProps } from '../types';
+import { CallState } from '../types';
 import { HOC, Options, DefaultProps, RenderFn } from './types';

 import React from 'react';
@ -14,7 +14,7 @@ import { catchError, map } from 'rxjs/operators';
 import echoTransform from '../transform/echo';
 import { intervalObservable, isEqual, triggerChange } from '../util/index';

-type State = CallProps & {
+type State = CallState & {
  subscriptions: Array<any>; // FIXME subscriptions
 };

--- a/packages/ui-api/src/with/types.ts
+++ b/packages/ui-api/src/with/types.ts
@ -18,7 +18,7 @@ export type Options = {
  atProp?: string,
  callOnResult?: OnChangeCb,
  params?: Array<any>,
-  paramProp?: string,
+  paramName?: string,
  propName?: string,
  transform?: Transform
 };
--- a/packages/ui-app/src/AddressMini.tsx
+++ b/packages/ui-app/src/AddressMini.tsx
@ -19,21 +19,21 @@ type Props = BareProps & {
  children?: React.ReactNode,
  isPadded?: boolean,
  isShort?: boolean,
-  query_session_validators?: Array<AccountId>,
+  session_validators?: Array<AccountId>,
  value?: AccountId | AccountIndex | Address | string,
  withBalance?: boolean
 };

 class AddressMini extends React.PureComponent<Props> {
  render () {
-    const { children, className, isPadded = true, isShort = true, query_session_validators, style, value } = this.props;
+    const { children, className, isPadded = true, isShort = true, session_validators, style, value } = this.props;

    if (!value) {
      return null;
    }

    const address = value.toString();
-    const isValidator = (query_session_validators || []).find((validator) =>
+    const isValidator = (session_validators || []).find((validator) =>
      validator.toString() === address
    );

--- a/packages/ui-app/src/AddressRow.tsx
+++ b/packages/ui-app/src/AddressRow.tsx
@ -35,6 +35,6 @@ class AddressRow extends AddressSummary {
 export default withMulti(
  AddressRow,
  translate,
-  withCall('derive.accounts.idAndIndex', { paramProp: 'value' }),
+  withCall('derive.accounts.idAndIndex', { paramName: 'value' }),
  withCall('query.session.validators')
 );
--- a/packages/ui-app/src/AddressSummary.tsx
+++ b/packages/ui-app/src/AddressSummary.tsx
@ -16,7 +16,7 @@ import IdentityIcon from './IdentityIcon';
 import translate from './translate';

 export type Props = I18nProps & {
-  derive_accounts_idAndIndex?: [AccountId?, AccountIndex?],
+  accounts_idAndIndex?: [AccountId?, AccountIndex?],
  balance?: Balance | Array<Balance>,
  children?: React.ReactNode,
  name?: string,
@ -25,7 +25,7 @@ export type Props = I18nProps & {
  withIndex?: boolean,
  identIconSize?: number,
  isShort?: boolean,
-  query_session_validators?: Array<AccountId>,
+  session_validators?: Array<AccountId>,
  withCopy?: boolean,
  withIcon?: boolean,
  withNonce?: boolean
@ -35,8 +35,8 @@ const DEFAULT_ADDR = '5'.padEnd(16, 'x');

 class AddressSummary extends React.PureComponent<Props> {
  render () {
-    const { derive_accounts_idAndIndex = [], className, style } = this.props;
-    const [accountId, accountIndex] = derive_accounts_idAndIndex;
+    const { accounts_idAndIndex = [], className, style } = this.props;
+    const [accountId, accountIndex] = accounts_idAndIndex;
    const isValid = accountId || accountIndex;

    return (
@ -82,8 +82,8 @@ class AddressSummary extends React.PureComponent<Props> {
  }

  protected renderAccountId () {
-    const { derive_accounts_idAndIndex = [], name, isShort = true } = this.props;
-    const [accountId, accountIndex] = derive_accounts_idAndIndex;
+    const { accounts_idAndIndex = [], name, isShort = true } = this.props;
+    const [accountId, accountIndex] = accounts_idAndIndex;

    if (!accountId && accountIndex) {
      return null;
@ -110,8 +110,8 @@ class AddressSummary extends React.PureComponent<Props> {
  }

  protected renderAccountIndex () {
-    const { derive_accounts_idAndIndex = [] } = this.props;
-    const [, accountIndex] = derive_accounts_idAndIndex;
+    const { accounts_idAndIndex = [] } = this.props;
+    const [, accountIndex] = accounts_idAndIndex;

    if (!accountIndex) {
      return null;
@ -149,15 +149,15 @@ class AddressSummary extends React.PureComponent<Props> {
  }

  protected renderIcon (className: string = 'ui--AddressSummary-icon', size?: number) {
-    const { derive_accounts_idAndIndex = [], identIconSize = 96, query_session_validators, value, withIcon = true } = this.props;
+    const { accounts_idAndIndex = [], identIconSize = 96, session_validators, value, withIcon = true } = this.props;

    if (!withIcon) {
      return null;
    }

-    const [_accountId] = derive_accounts_idAndIndex;
+    const [_accountId] = accounts_idAndIndex;
    const accountId = (_accountId || '').toString();
-    const isValidator = (query_session_validators || []).find((validator) =>
+    const isValidator = (session_validators || []).find((validator) =>
      validator.toString() === accountId
    );

@ -172,8 +172,8 @@ class AddressSummary extends React.PureComponent<Props> {
  }

  protected renderNonce () {
-    const { derive_accounts_idAndIndex = [], t, withNonce = true } = this.props;
-    const [accountId] = derive_accounts_idAndIndex;
+    const { accounts_idAndIndex = [], t, withNonce = true } = this.props;
+    const [accountId] = accounts_idAndIndex;

    if (!withNonce || !accountId) {
      return null;
@ -214,6 +214,6 @@ export {
 export default withMulti(
  AddressSummary,
  translate,
-  withCall('derive.accounts.idAndIndex', { paramProp: 'value' }),
+  withCall('derive.accounts.idAndIndex', { paramName: 'value' }),
  withCall('query.session.validators')
 );
--- a/packages/ui-app/src/InputExtrinsic/SelectMethod.tsx
+++ b/packages/ui-app/src/InputExtrinsic/SelectMethod.tsx
@ -14,7 +14,7 @@ import classes from '../util/classes';
 import translate from '../translate';

 type Props = I18nProps & {
-  apiPromise: ApiPromise,
+  api: ApiPromise,
  isError?: boolean,
  label?: string,
  onChange: (value: MethodFunction) => void,
@ -25,14 +25,14 @@ type Props = I18nProps & {

 class SelectMethod extends React.PureComponent<Props> {
  render () {
-    const { apiPromise, className, isError, label = '', onChange, options, style, t, value, withLabel } = this.props;
+    const { api, className, isError, label = '', onChange, options, style, t, value, withLabel } = this.props;

    if (!options.length) {
      return null;
    }

    const transform = (method: string): MethodFunction =>
-      apiPromise.tx[value.section][method];
+      api.tx[value.section][method];

    return (
        <Dropdown
--- a/packages/ui-app/src/InputExtrinsic/index.tsx
+++ b/packages/ui-app/src/InputExtrinsic/index.tsx
@ -47,15 +47,15 @@ class InputExtrinsic extends React.PureComponent<Props, State> {
    } as State;
  }

-  static getDerivedStateFromProps ({ apiPromise }: Props, { value }: State): State | null {
+  static getDerivedStateFromProps ({ api }: Props, { value }: State): State | null {
    return {
-      optionsMethod: methodOptions(apiPromise, value.section),
-      optionsSection: sectionOptions(apiPromise)
+      optionsMethod: methodOptions(api, value.section),
+      optionsSection: sectionOptions(api)
    } as State;
  }

  render () {
-    const { apiPromise, className, labelMethod, labelSection, style, withLabel } = this.props;
+    const { api, className, labelMethod, labelSection, style, withLabel } = this.props;
    const { optionsMethod, optionsSection, value } = this.state;

    return (
@ -72,7 +72,7 @@ class InputExtrinsic extends React.PureComponent<Props, State> {
          withLabel={withLabel}
        />
        <SelectMethod
-          apiPromise={apiPromise}
+          api={api}
          className='large'
          label={labelMethod}
          onChange={this.onKeyChange}
@ -98,15 +98,15 @@ class InputExtrinsic extends React.PureComponent<Props, State> {
  }

  onSectionChange = (newSection: string): void => {
-    const { apiPromise } = this.props;
+    const { api } = this.props;
    const { value } = this.state;

    if (newSection === value.section) {
      return;
    }

-    const optionsMethod = methodOptions(apiPromise, newSection);
-    const fn = apiPromise.tx[newSection][optionsMethod[0].value];
+    const optionsMethod = methodOptions(api, newSection);
+    const fn = api.tx[newSection][optionsMethod[0].value];

    this.setState({ optionsMethod }, () =>
      this.onKeyChange(fn)
--- a/packages/ui-app/src/InputExtrinsic/options/method.tsx
+++ b/packages/ui-app/src/InputExtrinsic/options/method.tsx
@ -7,8 +7,8 @@ import { DropdownOptions } from '../../util/types';
 import React from 'react';
 import ApiPromise from '@polkadot/api/promise';

-export default function createOptions (apiPromise: ApiPromise, sectionName: string): DropdownOptions {
-  const section = apiPromise.tx[sectionName];
+export default function createOptions (api: ApiPromise, sectionName: string): DropdownOptions {
+  const section = api.tx[sectionName];

  if (!section) {
    return [];
--- a/packages/ui-app/src/InputExtrinsic/options/section.ts
+++ b/packages/ui-app/src/InputExtrinsic/options/section.ts
@ -6,9 +6,9 @@ import { DropdownOptions } from '../../util/types';

 import ApiPromise from '@polkadot/api/promise';

-export default function createOptions (apiPromise: ApiPromise): DropdownOptions {
+export default function createOptions (api: ApiPromise): DropdownOptions {
  return Object
-    .keys(apiPromise.tx)
+    .keys(api.tx)
    .sort()
    .map((name) => ({
      text: name,
--- a/packages/ui-app/src/InputStorage/SelectKey.tsx
+++ b/packages/ui-app/src/InputStorage/SelectKey.tsx
@ -25,14 +25,14 @@ type Props = ApiProps & I18nProps & {

 class SelectKey extends React.PureComponent<Props> {
  render () {
-    const { apiPromise, className, isError, label = '', onChange, options, style, t, value, withLabel } = this.props;
+    const { api, className, isError, label = '', onChange, options, style, t, value, withLabel } = this.props;

    if (!options.length) {
      return null;
    }

    const transform = (method: string): StorageFunction =>
-      apiPromise.query[value.section][method];
+      api.query[value.section][method];

    return (
      <Dropdown
--- a/packages/ui-app/src/InputStorage/index.tsx
+++ b/packages/ui-app/src/InputStorage/index.tsx
@ -42,11 +42,11 @@ class InputStorage extends React.PureComponent<Props, State> {
  constructor (props: Props) {
    super(props);

-    const { apiPromise, defaultValue: { section } } = this.props;
+    const { api, defaultValue: { section } } = this.props;

    this.state = {
-      optionsMethod: keyOptions(apiPromise, section),
-      optionsSection: sectionOptions(apiPromise),
+      optionsMethod: keyOptions(api, section),
+      optionsSection: sectionOptions(api),
      value: this.props.defaultValue
    };
  }
@ -94,15 +94,15 @@ class InputStorage extends React.PureComponent<Props, State> {
  }

  private onSectionChange = (newSection: string): void => {
-    const { apiPromise } = this.props;
+    const { api } = this.props;
    const { value } = this.state;

    if (newSection === value.section) {
      return;
    }

-    const optionsMethod = keyOptions(apiPromise, newSection);
-    const newValue = apiPromise.query[newSection][optionsMethod[0].value];
+    const optionsMethod = keyOptions(api, newSection);
+    const newValue = api.query[newSection][optionsMethod[0].value];

    this.setState({ optionsMethod }, () =>
      this.onKeyChange(newValue)
--- a/packages/ui-app/src/InputStorage/options/key.tsx
+++ b/packages/ui-app/src/InputStorage/options/key.tsx
@ -7,8 +7,8 @@ import { DropdownOptions } from '../../util/types';
 import React from 'react';
 import ApiPromise from '@polkadot/api/promise';

-export default function createOptions (apiPromise: ApiPromise, sectionName: string): DropdownOptions {
-  const section = apiPromise.query[sectionName];
+export default function createOptions (api: ApiPromise, sectionName: string): DropdownOptions {
+  const section = api.query[sectionName];

  if (!section) {
    return [];
--- a/packages/ui-app/src/InputStorage/options/section.ts
+++ b/packages/ui-app/src/InputStorage/options/section.ts
@ -6,9 +6,9 @@ import { DropdownOptions } from '../../util/types';

 import ApiPromise from '@polkadot/api/promise';

-export default function createOptions (apiPromise: ApiPromise): DropdownOptions {
+export default function createOptions (api: ApiPromise): DropdownOptions {
  return Object
-    .keys(apiPromise.query)
+    .keys(api.query)
    .sort()
    .map((name) => ({
      text: name,
--- a/packages/ui-reactive/src/Balance.tsx
+++ b/packages/ui-reactive/src/Balance.tsx
@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import { BareProps } from '@polkadot/ui-api/types';
+import { BareProps, CallProps } from '@polkadot/ui-api/types';

 import React from 'react';
 import { Balance } from '@polkadot/types';
@ -10,15 +10,15 @@ import { withCall } from '@polkadot/ui-api/index';

 import { balanceFormat } from './util/index';

-type Props = BareProps & {
+type Props = BareProps & CallProps & {
  children?: React.ReactNode,
  label?: string,
-  query_balances_freeBalance: Balance
+  balances_freeBalance?: Balance
 };

 class BalanceDisplay extends React.PureComponent<Props> {
  render () {
-    const { children, className, label = '', style, query_balances_freeBalance } = this.props;
+    const { children, className, label = '', style, balances_freeBalance } = this.props;

    return (
      <div
@ -26,8 +26,8 @@ class BalanceDisplay extends React.PureComponent<Props> {
        style={style}
      >
        {label}{
-          query_balances_freeBalance
-            ? balanceFormat(query_balances_freeBalance)
+          balances_freeBalance
+            ? balanceFormat(balances_freeBalance)
            : '0'
          }{children}
      </div>
--- a/packages/ui-reactive/src/BestFinalised.tsx
+++ b/packages/ui-reactive/src/BestFinalised.tsx
@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import { BareProps } from '@polkadot/ui-api/types';
+import { BareProps, CallProps } from '@polkadot/ui-api/types';

 import React from 'react';
 import { BlockNumber } from '@polkadot/types';
@ -10,15 +10,15 @@ import { withCall } from '@polkadot/ui-api/index';

 import { numberFormat } from './util/index';

-type Props = BareProps & {
+type Props = BareProps & CallProps & {
  children?: React.ReactNode,
  label?: string,
-  derive_chain_bestNumberFinalised?: BlockNumber
+  chain_bestNumberFinalised?: BlockNumber
 };

 class BestFinalised extends React.PureComponent<Props> {
  render () {
-    const { children, className, label = '', style, derive_chain_bestNumberFinalised } = this.props;
+    const { children, className, label = '', style, chain_bestNumberFinalised } = this.props;

    return (
      <div
@ -26,8 +26,8 @@ class BestFinalised extends React.PureComponent<Props> {
        style={style}
      >
        {label}{
-          derive_chain_bestNumberFinalised
-            ? numberFormat(derive_chain_bestNumberFinalised)
+          chain_bestNumberFinalised
+            ? numberFormat(chain_bestNumberFinalised)
            : '-'
          }{children}
      </div>
--- a/packages/ui-reactive/src/BestNumber.tsx
+++ b/packages/ui-reactive/src/BestNumber.tsx
@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import { BareProps } from '@polkadot/ui-api/types';
+import { BareProps, CallProps } from '@polkadot/ui-api/types';

 import React from 'react';
 import { BlockNumber } from '@polkadot/types';
@ -10,15 +10,15 @@ import { withCall } from '@polkadot/ui-api/index';

 import { numberFormat } from './util/index';

-type Props = BareProps & {
+type Props = BareProps & CallProps & {
  children?: React.ReactNode,
  label?: string,
-  derive_chain_bestNumber?: BlockNumber
+  chain_bestNumber?: BlockNumber
 };

 class BestNumber extends React.PureComponent<Props> {
  render () {
-    const { children, className, label = '', style, derive_chain_bestNumber } = this.props;
+    const { children, className, label = '', style, chain_bestNumber } = this.props;

    return (
      <div
@ -26,8 +26,8 @@ class BestNumber extends React.PureComponent<Props> {
        style={style}
      >
        {label}{
-          derive_chain_bestNumber
-            ? numberFormat(derive_chain_bestNumber)
+          chain_bestNumber
+            ? numberFormat(chain_bestNumber)
            : '-'
          }{children}
      </div>
--- a/packages/ui-reactive/src/Chain.tsx
+++ b/packages/ui-reactive/src/Chain.tsx
@ -2,28 +2,28 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import { BareProps } from '@polkadot/ui-api/types';
+import { BareProps, CallProps } from '@polkadot/ui-api/types';

 import React from 'react';
 import { Text } from '@polkadot/types';
 import { withCall } from '@polkadot/ui-api/index';

-type Props = BareProps & {
+type Props = BareProps & CallProps & {
  children?: React.ReactNode,
  label?: string,
-  rpc_system_chain?: Text
+  system_chain?: Text
 };

 class Chain extends React.PureComponent<Props> {
  render () {
-    const { children, className, label = '', style, rpc_system_chain = 'unknown' } = this.props;
+    const { children, className, label = '', style, system_chain = 'unknown' } = this.props;

    return (
      <div
        className={className}
        style={style}
      >
-        {label}{rpc_system_chain.toString()}{children}
+        {label}{system_chain.toString()}{children}
      </div>
    );
  }
--- a/packages/ui-reactive/src/NodeName.tsx
+++ b/packages/ui-reactive/src/NodeName.tsx
@ -2,28 +2,28 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import { BareProps } from '@polkadot/ui-api/types';
+import { BareProps, CallProps } from '@polkadot/ui-api/types';

 import React from 'react';
 import { Text } from '@polkadot/types';
 import { withCall } from '@polkadot/ui-api/index';

-type Props = BareProps & {
+type Props = BareProps & CallProps & {
  children?: React.ReactNode,
  label?: string,
-  rpc_system_name?: Text
+  system_name?: Text
 };

 class NodeName extends React.PureComponent<Props> {
  render () {
-    const { children, className, label = '', style, rpc_system_name = 'unknown' } = this.props;
+    const { children, className, label = '', style, system_name = 'unknown' } = this.props;

    return (
      <div
        className={className}
        style={style}
      >
-        {label}{rpc_system_name.toString()}{children}
+        {label}{system_name.toString()}{children}
      </div>
    );
  }
--- a/packages/ui-reactive/src/NodeVersion.tsx
+++ b/packages/ui-reactive/src/NodeVersion.tsx
@ -2,28 +2,28 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import { BareProps } from '@polkadot/ui-api/types';
+import { BareProps, CallProps } from '@polkadot/ui-api/types';

 import React from 'react';
 import { Text } from '@polkadot/types';
 import { withCall } from '@polkadot/ui-api/index';

-type Props = BareProps & {
+type Props = BareProps & CallProps & {
  children?: React.ReactNode,
  label?: string,
-  rpc_system_version?: Text
+  system_version?: Text
 };

 class NodeVersion extends React.PureComponent<Props> {
  render () {
-    const { children, className, label = '', style, rpc_system_version = 'unknown' } = this.props;
+    const { children, className, label = '', style, system_version = 'unknown' } = this.props;

    return (
      <div
        className={className}
        style={style}
      >
-        {label}{rpc_system_version.toString()}{children}
+        {label}{system_version.toString()}{children}
      </div>
    );
  }
--- a/packages/ui-reactive/src/Nonce.tsx
+++ b/packages/ui-reactive/src/Nonce.tsx
@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import { BareProps } from '@polkadot/ui-api/types';
+import { BareProps, CallProps } from '@polkadot/ui-api/types';

 import React from 'react';
 import { Index } from '@polkadot/types';
@ -10,15 +10,15 @@ import { withCall } from '@polkadot/ui-api/index';

 import { numberFormat } from './util/index';

-type Props = BareProps & {
+type Props = BareProps & CallProps & {
  children?: React.ReactNode,
  label?: string,
-  query_system_accountNonce: Index
+  system_accountNonce?: Index
 };

 class Nonce extends React.PureComponent<Props> {
  render () {
-    const { children, className, label = '', style, query_system_accountNonce } = this.props;
+    const { children, className, label = '', style, system_accountNonce } = this.props;

    return (
      <div
@ -26,8 +26,8 @@ class Nonce extends React.PureComponent<Props> {
        style={style}
      >
        {label}{
-          query_system_accountNonce
-            ? numberFormat(query_system_accountNonce)
+          system_accountNonce
+            ? numberFormat(system_accountNonce)
            : '0'
          }{children}
      </div>
--- a/packages/ui-reactive/src/TimeNow.tsx
+++ b/packages/ui-reactive/src/TimeNow.tsx
@ -2,12 +2,35 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

+import { BareProps, CallProps } from '@polkadot/ui-api/types';
+
+import React from 'react';
+import { Moment } from '@polkadot/types';
 import { withCall } from '@polkadot/ui-api/index';

 import Elapsed from './Elapsed';

-const Component: React.ComponentType<any> = withCall('query.timestamp.now', { propName: 'value' })(
-  Elapsed
-);
+type Props = BareProps & CallProps & {
+  children?: React.ReactNode,
+  label?: string,
+  timestamp_now?: Moment
+};

-export default Component;
+class TimeNow extends React.PureComponent<Props> {
+  render () {
+    const { children, className, label = '', style, timestamp_now } = this.props;
+
+    return (
+      <div
+        className={className}
+        style={style}
+      >
+        {label}
+        <Elapsed value={timestamp_now} />
+        {children}
+      </div>
+    );
+  }
+}
+
+export default withCall('query.timestamp.now')(TimeNow);
--- a/packages/ui-reactive/src/TimePeriod.tsx
+++ b/packages/ui-reactive/src/TimePeriod.tsx
@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

-import { BareProps } from '@polkadot/ui-api/types';
+import { BareProps, CallProps } from '@polkadot/ui-api/types';

 import React from 'react';
 import { Moment } from '@polkadot/types';
@ -10,15 +10,15 @@ import { withCall } from '@polkadot/ui-api/index';

 import { numberFormat } from './util/index';

-type Props = BareProps & {
+type Props = BareProps & CallProps & {
  children?: React.ReactNode,
  label?: string,
-  query_timestamp_blockPeriod: Moment
+  timestamp_blockPeriod?: Moment
 };

 class TimePeriod extends React.PureComponent<Props> {
  render () {
-    const { children, className, label = '', style, query_timestamp_blockPeriod } = this.props;
+    const { children, className, label = '', style, timestamp_blockPeriod } = this.props;

    return (
      <div
@ -26,8 +26,8 @@ class TimePeriod extends React.PureComponent<Props> {
        style={style}
      >
        {label}{
-          query_timestamp_blockPeriod
-            ? `${numberFormat(query_timestamp_blockPeriod.toNumber() * 2)}s`
+          timestamp_blockPeriod
+            ? `${numberFormat(timestamp_blockPeriod.toNumber() * 2)}s`
            : '-'
          }{children}
      </div>
--- a/packages/ui-signer/src/Fees/Proposal.tsx
+++ b/packages/ui-signer/src/Fees/Proposal.tsx
@ -18,7 +18,7 @@ import translate from '../translate';
 type Props = I18nProps & {
  deposit: BN | Compact,
  fees: DerivedFees,
-  query_democracy_minimumDeposit?: BN
+  democracy_minimumDeposit?: BN
  onChange: (fees: ExtraFees) => void
 };
 type State = ExtraFees & {
@ -37,11 +37,11 @@ class Proposal extends React.PureComponent<Props, State> {
    };
  }

-  static getDerivedStateFromProps ({ deposit, query_democracy_minimumDeposit = new BN(0), onChange }: Props): State {
+  static getDerivedStateFromProps ({ deposit, democracy_minimumDeposit = new BN(0), onChange }: Props): State {
    const extraAmount = deposit instanceof Compact
      ? deposit.toBn()
      : deposit;
-    const isBelowMinimum = extraAmount.lt(query_democracy_minimumDeposit);
+    const isBelowMinimum = extraAmount.lt(democracy_minimumDeposit);

    const update = {
      extraAmount,
@ -58,7 +58,7 @@ class Proposal extends React.PureComponent<Props, State> {
  }

  render () {
-    const { query_democracy_minimumDeposit = new BN(0), t } = this.props;
+    const { democracy_minimumDeposit = new BN(0), t } = this.props;
    const { extraAmount, isBelowMinimum } = this.state;

    return [
@ -66,7 +66,7 @@ class Proposal extends React.PureComponent<Props, State> {
        ? <div key='belowmin'><Icon name='warning sign' />{t('proposal.belowmin', {
          defaultValue: 'The deposit is below the {{minimum}} minimum required for the proposal to be evaluated',
          replace: {
-            minimum: balanceFormat(query_democracy_minimumDeposit)
+            minimum: balanceFormat(democracy_minimumDeposit)
          }
        })}</div>
        : undefined,
--- a/packages/ui-signer/src/Fees/Transfer.tsx
+++ b/packages/ui-signer/src/Fees/Transfer.tsx
@ -19,7 +19,7 @@ import { ZERO_BALANCE } from './constants';
 type Props = I18nProps & {
  amount: BN | Compact,
  fees: DerivedFees,
-  derive_balances_votingBalance?: DerivedBalances,
+  balances_votingBalance?: DerivedBalances,
  recipientId: string,
  onChange: (fees: ExtraFees) => void
 };
@ -42,16 +42,16 @@ class Transfer extends React.PureComponent<Props, State> {
    };
  }

-  static getDerivedStateFromProps ({ amount, recipientId, derive_balances_votingBalance = ZERO_BALANCE, fees, onChange }: Props): State {
+  static getDerivedStateFromProps ({ amount, recipientId, balances_votingBalance = ZERO_BALANCE, fees, onChange }: Props): State {
    let extraFees = fees.transferFee;

-    if (derive_balances_votingBalance.votingBalance.isZero()) {
+    if (balances_votingBalance.votingBalance.isZero()) {
      extraFees = extraFees.add(fees.creationFee);
    }

    const extraAmount = amount instanceof Compact ? amount.toBn() : new BN(amount);
-    const isCreation = derive_balances_votingBalance.votingBalance.isZero() && fees.creationFee.gtn(0);
-    const isNoEffect = extraAmount.add(derive_balances_votingBalance.votingBalance).lte(fees.existentialDeposit);
+    const isCreation = balances_votingBalance.votingBalance.isZero() && fees.creationFee.gtn(0);
+    const isNoEffect = extraAmount.add(balances_votingBalance.votingBalance).lte(fees.existentialDeposit);
    const extraWarn = isCreation || isNoEffect;
    const update = {
      extraAmount,
@ -93,5 +93,5 @@ class Transfer extends React.PureComponent<Props, State> {
 export default withMulti(
  Transfer,
  translate,
-  withCall('derive.balances.votingBalance', { paramProp: 'recipientId' })
+  withCall('derive.balances.votingBalance', { paramName: 'recipientId' })
 );
--- a/packages/ui-signer/src/Fees/index.tsx
+++ b/packages/ui-signer/src/Fees/index.tsx
@ -31,12 +31,12 @@ type State = ExtraFees & {
 };

 type Props = I18nProps & {
-  derive_balances_fees?: DerivedFees,
-  derive_balances_votingBalance?: DerivedBalances,
+  balances_fees?: DerivedFees,
+  balances_votingBalance?: DerivedBalances,
  accountId?: string | null,
  extrinsic: Extrinsic | null,
  onChange?: (hasAvailble: boolean) => void,
-  query_system_accountNonce?: BN
+  system_accountNonce?: BN
 };

 const LENGTH_PUBLICKEY = 32 + 1; // publicKey + prefix
@ -61,7 +61,7 @@ class FeeDisplay extends React.PureComponent<Props, State> {
    };
  }

-  static getDerivedStateFromProps ({ accountId, derive_balances_votingBalance = ZERO_BALANCE, extrinsic, derive_balances_fees = ZERO_FEES, query_system_accountNonce = new BN(0) }: Props, prevState: State): State | null {
+  static getDerivedStateFromProps ({ accountId, balances_votingBalance = ZERO_BALANCE, extrinsic, balances_fees = ZERO_FEES, system_accountNonce = new BN(0) }: Props, prevState: State): State | null {
    if (!accountId || !extrinsic) {
      return null;
    }
@ -69,7 +69,7 @@ class FeeDisplay extends React.PureComponent<Props, State> {
    const fn = Method.findFunction(extrinsic.callIndex);
    const extMethod = fn.method;
    const extSection = fn.section;
-    const txLength = SIGNATURE_SIZE + compactToU8a(query_system_accountNonce).length + (
+    const txLength = SIGNATURE_SIZE + compactToU8a(system_accountNonce).length + (
      extrinsic
        ? extrinsic.encodedLength
        : 0
@ -85,13 +85,13 @@ class FeeDisplay extends React.PureComponent<Props, State> {
      ? prevState.extraWarn
      : false;
    const allFees = extraFees
-      .add(derive_balances_fees.transactionBaseFee)
-      .add(derive_balances_fees.transactionByteFee.muln(txLength));
+      .add(balances_fees.transactionBaseFee)
+      .add(balances_fees.transactionByteFee.muln(txLength));

    const allTotal = extraAmount.add(allFees);
-    const hasAvailable = derive_balances_votingBalance.freeBalance.gte(allTotal);
-    const isRemovable = derive_balances_votingBalance.votingBalance.sub(allTotal).lte(derive_balances_fees.existentialDeposit);
-    const isReserved = derive_balances_votingBalance.freeBalance.isZero() && derive_balances_votingBalance.reservedBalance.gtn(0);
+    const hasAvailable = balances_votingBalance.freeBalance.gte(allTotal);
+    const isRemovable = balances_votingBalance.votingBalance.sub(allTotal).lte(balances_fees.existentialDeposit);
+    const isReserved = balances_votingBalance.freeBalance.isZero() && balances_votingBalance.reservedBalance.gtn(0);
    const allWarn = extraWarn;

    return {
@ -180,10 +180,10 @@ class FeeDisplay extends React.PureComponent<Props, State> {
  }

  private renderProposal () {
-    const { extrinsic, derive_balances_fees } = this.props;
+    const { extrinsic, balances_fees } = this.props;
    const { extMethod, extSection } = this.state;

-    if (!derive_balances_fees || !extrinsic || extSection !== 'democracy' || extMethod !== 'propose') {
+    if (!balances_fees || !extrinsic || extSection !== 'democracy' || extMethod !== 'propose') {
      return null;
    }

@ -192,17 +192,17 @@ class FeeDisplay extends React.PureComponent<Props, State> {
    return (
      <Proposal
        deposit={deposit}
-        fees={derive_balances_fees}
+        fees={balances_fees}
        onChange={this.onExtraUpdate}
      />
    );
  }

  private renderTransfer () {
-    const { extrinsic, derive_balances_fees } = this.props;
+    const { extrinsic, balances_fees } = this.props;
    const { extMethod, extSection } = this.state;

-    if (!derive_balances_fees || !extrinsic || extSection !== 'balances' || extMethod !== 'transfer') {
+    if (!balances_fees || !extrinsic || extSection !== 'balances' || extMethod !== 'transfer') {
      return null;
    }

@ -211,7 +211,7 @@ class FeeDisplay extends React.PureComponent<Props, State> {
    return (
      <Transfer
        amount={amount}
-        fees={derive_balances_fees}
+        fees={balances_fees}
        recipientId={recipientId}
        onChange={this.onExtraUpdate}
      />
@ -227,6 +227,6 @@ export default withMulti(
  FeeDisplay,
  translate,
  withCall('derive.balances.fees'),
-  withCall('derive.balances.votingBalance', { paramProp: 'accountId' }),
-  withCall('query.system.accountNonce', { paramProp: 'accountId' })
+  withCall('derive.balances.votingBalance', { paramName: 'accountId' }),
+  withCall('query.system.accountNonce', { paramName: 'accountId' })
 );
--- a/packages/ui-signer/src/Modal.tsx
+++ b/packages/ui-signer/src/Modal.tsx
@ -281,10 +281,10 @@ class Signer extends React.PureComponent<Props, State> {
  }

  private async submitRpc ({ method, section }: RpcMethod, values: Array<any>): Promise<QueueTx$Result> {
-    const { apiPromise } = this.props;
+    const { api } = this.props;

    try {
-      const result = await (apiPromise.rpc as any)[section][method](...values);
+      const result = await (api.rpc as any)[section][method](...values);

      console.log('submitRpc: result ::', format(result));

--- a/yarn.lock
+++ b/yarn.lock
@ -1385,31 +1385,31 @@
  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
  integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==

-"@polkadot/api-derive@^0.40.8":
-  version "0.40.8"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.40.8.tgz#e19e4a5b8893a44d120dfb8f9e92a860cbf7a455"
-  integrity sha512-ZVOW/ZBIOgONeY6UFmx/geV5m9ilKz6/awK5wqrJmPR2dV9zPH8BPIP57hB6k7SH5bi0Pf3Hw2pPvCCKadNVfw==
+"@polkadot/api-derive@^0.40.9":
+  version "0.40.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.40.9.tgz#f9d4877772435751836a6006e5e2c9f7e973d95b"
+  integrity sha512-TCkRlJP4tjPkuk6RF9175KXjikQzrDgzkA1HjgJ6J63XldaMJVN+Z82LZPA5hwDsd9QwUA7mxIWfmPWK8bP4ig==
  dependencies:
    "@babel/runtime" "^7.2.0"
-    "@polkadot/api" "^0.40.8"
-    "@polkadot/types" "^0.40.8"
+    "@polkadot/api" "^0.40.9"
+    "@polkadot/types" "^0.40.9"
    "@types/memoizee" "^0.4.2"
    "@types/rx" "^4.1.1"
    memoizee "^0.4.14"
    rxjs "^6.3.3"

-"@polkadot/api@^0.40.8":
-  version "0.40.8"
-  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.40.8.tgz#2ef46b7255d5101895af251535549133fd5d72f8"
-  integrity sha512-wyP2fqxqMVy1LYnmSzyXe3mAHp0GN3lswihvZR13xj4nbIMnEUWJ/gnS/m34uh/lK3hYSr3NCgI5N6jzXyJtXQ==
+"@polkadot/api@^0.40.9":
+  version "0.40.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.40.9.tgz#276d7a02d933d8712719f08c7ee1528b05fb2ade"
+  integrity sha512-6FTYUUL2cYQO5eRYyuemQl245t8GKagX924wz8RvbURM/xHa3YrWdiDGzJN5p5ZN743SYmguQpxEGmPcg5bYKA==
  dependencies:
    "@babel/runtime" "^7.2.0"
-    "@polkadot/api-derive" "^0.40.8"
-    "@polkadot/extrinsics" "^0.40.8"
-    "@polkadot/rpc-provider" "^0.40.8"
-    "@polkadot/rpc-rx" "^0.40.8"
-    "@polkadot/storage" "^0.40.8"
-    "@polkadot/types" "^0.40.8"
+    "@polkadot/api-derive" "^0.40.9"
+    "@polkadot/extrinsics" "^0.40.9"
+    "@polkadot/rpc-provider" "^0.40.9"
+    "@polkadot/rpc-rx" "^0.40.9"
+    "@polkadot/storage" "^0.40.9"
+    "@polkadot/types" "^0.40.9"
    "@types/rx" "^4.1.1"
    rxjs "^6.3.3"

@ -1503,19 +1503,19 @@
    typedoc-plugin-no-inherit "^1.1.2"
    typescript "^3.2.2"

-"@polkadot/extrinsics@^0.40.8":
-  version "0.40.8"
-  resolved "https://registry.yarnpkg.com/@polkadot/extrinsics/-/extrinsics-0.40.8.tgz#a6a2f96da01068eaee77ba25f375065de6a0d1af"
-  integrity sha512-dZsSjLYMqcwxVr+nTI4VsOmKS5ZQHFxQfd910gleQPY69ybYbwIPjGnCxXEdlNuthl3WdvdgA2AIyMLImMQ/xw==
+"@polkadot/extrinsics@^0.40.9":
+  version "0.40.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/extrinsics/-/extrinsics-0.40.9.tgz#a3cdb9a9374425460e01656176dadbc1054cbbf7"
+  integrity sha512-VhtFhhLHLK5I4zfCBktF//U4vpD1SXDAbcAAxdJFqpGCZ+mYvCHW2iH9Q8clbqyX+sR+43riQhU+D+fPbNaxJQ==
  dependencies:
    "@babel/runtime" "^7.2.0"
-    "@polkadot/types" "^0.40.8"
+    "@polkadot/types" "^0.40.9"
    "@polkadot/util" "^0.33.35"

-"@polkadot/jsonrpc@^0.40.8":
-  version "0.40.8"
-  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.40.8.tgz#0c7673094634910c52e8de343394d2ca4911bc7a"
-  integrity sha512-XqTvlSSVCFT22XpZLOuqyQLPUQFVWPFINgBR20RBlSABtdJhgByB1wlo+bTEJXBHo1b6a/yAZ/a7Ia1U7VbpMA==
+"@polkadot/jsonrpc@^0.40.9":
+  version "0.40.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.40.9.tgz#57b4cc3e3997f23aac10383c4ff3e745be71f345"
+  integrity sha512-pG7KntkBgPh6rc3elT7lb0xiuZs4GYTRtdYEn1hmCeKDewGP9XlMbisukwFdvJVj5wJy74XYXOKgunrUAVOU3Q==
  dependencies:
    "@babel/runtime" "^7.2.0"

@ -1530,25 +1530,25 @@
    "@types/bs58" "^4.0.0"
    bs58 "^4.0.1"

-"@polkadot/rpc-core@^0.40.8":
-  version "0.40.8"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.40.8.tgz#9fc25ff7a9c056382808fd17da1ef8f0975c9da0"
-  integrity sha512-NsqZyV0rQ/w3/+u5KCg4b4sDYSqoHUTAbDNlexqWtRgFCK4TX7lh5FCMcbM6vPq3feVfOtmZfsy23CU78LUrSg==
+"@polkadot/rpc-core@^0.40.9":
+  version "0.40.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.40.9.tgz#ba0a3b3ae0547faefbc17085a19cbea37c3085bd"
+  integrity sha512-wITrByI6d6yyGURvwqC8DgQoDyBtNKMDPlAxEIH0hRe9Q1wg6bF2HWS6l33sYptm5hQAR9/UqxRtyjKcaUYEHg==
  dependencies:
    "@babel/runtime" "^7.2.0"
-    "@polkadot/jsonrpc" "^0.40.8"
-    "@polkadot/rpc-provider" "^0.40.8"
-    "@polkadot/types" "^0.40.8"
+    "@polkadot/jsonrpc" "^0.40.9"
+    "@polkadot/rpc-provider" "^0.40.9"
+    "@polkadot/types" "^0.40.9"
    "@polkadot/util" "^0.33.35"

-"@polkadot/rpc-provider@^0.40.8":
-  version "0.40.8"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.40.8.tgz#925c956659849c4ea77b27983e4b977f373e6621"
-  integrity sha512-1TB9g1vD1oOE+jK2wwlqFE0sR4DLdDt15wtoD4RgJcQ8QJwtSpneMizSAjrHXxwtf/6CofIeAJB8DbFhBdUp1A==
+"@polkadot/rpc-provider@^0.40.9":
+  version "0.40.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.40.9.tgz#e0dcf886df7b2bb3bf0b4b38b5028ddaec53ccb2"
+  integrity sha512-B48QHHdiVKEFJfeEQN19pJrWZEde7QpCL3lcZpTQrBj2FkF4/tD7YwQG0bmwHdrHcV5IvxxlFeE/vxrmfCWjCQ==
  dependencies:
    "@babel/runtime" "^7.2.0"
    "@polkadot/keyring" "^0.33.35"
-    "@polkadot/storage" "^0.40.8"
+    "@polkadot/storage" "^0.40.9"
    "@polkadot/util" "^0.33.35"
    "@polkadot/util-crypto" "^0.33.35"
    "@types/nock" "^9.3.0"
@ -1556,25 +1556,25 @@
    isomorphic-fetch "^2.2.1"
    websocket "^1.0.28"

-"@polkadot/rpc-rx@^0.40.8":
-  version "0.40.8"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-rx/-/rpc-rx-0.40.8.tgz#4afe9868035a3e5770b5e4d40ee18b0895b681af"
-  integrity sha512-0Sn9mSqnjBcY2yIKH+0LIF8C+nvrXnClcWBSvKtQEC9TSL09gDNnKuV989UWfk8x13NNxhaqML3GBfjGPmrUhA==
+"@polkadot/rpc-rx@^0.40.9":
+  version "0.40.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-rx/-/rpc-rx-0.40.9.tgz#4cbecb2561833d4cbc32d9f730b10d15155bee5a"
+  integrity sha512-zAoX6oWje/TlOf9mXGQe8KjFbdcDut7zf2iG8hhAHJKA4JAB0y6+K/fSew9TCNilMIxPiEU/sN+Qp/8BbF5Zog==
  dependencies:
    "@babel/runtime" "^7.2.0"
-    "@polkadot/rpc-core" "^0.40.8"
-    "@polkadot/rpc-provider" "^0.40.8"
+    "@polkadot/rpc-core" "^0.40.9"
+    "@polkadot/rpc-provider" "^0.40.9"
    "@types/rx" "^4.1.1"
    rxjs "^6.3.3"

-"@polkadot/storage@^0.40.8":
-  version "0.40.8"
-  resolved "https://registry.yarnpkg.com/@polkadot/storage/-/storage-0.40.8.tgz#208ccff0b919309da662de596a8900f067de035b"
-  integrity sha512-ZxPtBAZbJgH9rSkf/HU7IC6NkEc1lDRNGsSXiR8QFXRawomyCe36uewVALEHipHJv/viFgDdhKwdLym5RUNQhg==
+"@polkadot/storage@^0.40.9":
+  version "0.40.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/storage/-/storage-0.40.9.tgz#b8d631b2eaa8d639a5c16250900726d46e40cf0a"
+  integrity sha512-rOEEfVIEP2kg3nVyZTfMv+b89FLkyJCHdHW0d0SXhPr6cMX6qoKtfCGiQWzpaiGPY1wQiZbcQHetW3fZ/AEFaw==
  dependencies:
    "@babel/runtime" "^7.2.0"
    "@polkadot/keyring" "^0.33.35"
-    "@polkadot/types" "^0.40.8"
+    "@polkadot/types" "^0.40.9"
    "@polkadot/util" "^0.33.35"
    "@polkadot/util-crypto" "^0.33.35"

@ -1583,10 +1583,10 @@
  resolved "https://registry.yarnpkg.com/@polkadot/ts/-/ts-0.1.51.tgz#4ce26923b3d34c026e14081975718b716c988483"
  integrity sha512-p+uQIZqxtlQGTQoNcd8mED66qfyPA4qy8HmCMpUYDaFHKNpZ7qun0dqSoT0NvUB32KTSQitKhf/N0att8sEdow==

-"@polkadot/types@^0.40.8":
-  version "0.40.8"
-  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.40.8.tgz#1dd56a06cbbc4485241371589091661d7fbc1f75"
-  integrity sha512-dkSIbfLIBWiftrJJRbukC/531qCDzCsPxXScQrFeTwkIuiqfXsCWe8Q3/QMw614K7pBuWPWkfGqE9PIPzaBrKw==
+"@polkadot/types@^0.40.9":
+  version "0.40.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.40.9.tgz#32f7df6895769a9da07e8dd2adacadbef729ccef"
+  integrity sha512-L6TuP8tdM/0AKpLnTsnBA1YBr69Oehiw+0f0Fdfgqr36DrdpdlGvp5CsArV8wbWFJkChecEtQwPQPqX9+fCczA==
  dependencies:
    "@babel/runtime" "^7.2.0"
    "@polkadot/keyring" "^0.33.35"