Small cleanups on withCalls (#2040)

* Fixups

* More

* Some withCalls -> useCall

* Linting

* Always defined

* Re-apply democracy changes

* TimePeriod adjusted

* Cleanup imports

* Additional

* More conversions

* Small loading cleanups

* Small context updates

package.json

@@ -10,10 +10,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^0.99.0-beta.16",
-    "@polkadot/api-contract": "^0.99.0-beta.16",
+    "@polkadot/api": "^0.99.1",
+    "@polkadot/api-contract": "^0.99.1",
     "@polkadot/keyring": "^1.7.1",
-    "@polkadot/types": "^0.99.0-beta.16",
+    "@polkadot/types": "^0.99.1",
     "@polkadot/util": "^1.7.1",
     "@polkadot/util-crypto": "^1.7.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -36,8 +36,8 @@
   "devDependencies": {
     "@babel/core": "^7.7.5",
     "@babel/register": "^7.7.4",
-    "@babel/runtime": "^7.7.5",
-    "@polkadot/dev-react": "^0.32.0-beta.17",
+    "@babel/runtime": "^7.7.6",
+    "@polkadot/dev-react": "^0.32.0-beta.19",
     "@polkadot/ts": "^0.1.88",
     "autoprefixer": "^9.7.1",
     "empty": "^0.10.1",

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

@@ -27,7 +27,7 @@ function AccountSelector ({ className, onChange }: Props): React.ReactElement<Pr
       />
       <div className='medium'>
         <Bubble color='teal' icon='address card' label='index'>
-          <AccountIndex params={accountId} />
+          <AccountIndex value={accountId} />
         </Bubble>
         <Bubble color='yellow' icon='adjust' label='balance'>
           <Balance params={accountId} />

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

@@ -5,25 +5,24 @@
 
 import { DeriveStakingValidators } from '@polkadot/api-derive/types';
 import { BareProps, I18nProps } from '@polkadot/react-components/types';
+import { Balance, BlockNumber } from '@polkadot/types/interfaces';
 
-import BN from 'bn.js';
 import React from 'react';
-import { withCalls } from '@polkadot/react-api';
 import { Bubble, IdentityIcon } from '@polkadot/react-components';
-import { useApi } from '@polkadot/react-hooks';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatBalance, formatNumber } from '@polkadot/util';
 
 import translate from './translate';
 
-interface Props extends BareProps, I18nProps {
-  balances_totalIssuance?: BN;
-  chain_bestNumber?: BN;
-  chain_bestNumberLag?: BN;
-  staking_validators?: DeriveStakingValidators;
-}
+interface Props extends BareProps, I18nProps {}
 
-function SummaryBar ({ balances_totalIssuance, chain_bestNumber, chain_bestNumberLag, staking_validators }: Props): React.ReactElement<Props> {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function SummaryBar (props: Props): React.ReactElement<Props> {
   const { api, systemChain, systemName, systemVersion } = useApi();
+  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
+  const bestNumberLag = useCall<BlockNumber>(api.derive.chain.bestNumberLag, []);
+  const totalInsurance = useCall<Balance>(api.query.balances.totalIssuance, []);
+  const validators = useCall<DeriveStakingValidators>(api.derive.staking.validators, []);
 
   return (
     <summary>
@@ -38,17 +37,17 @@ function SummaryBar ({ balances_totalIssuance, chain_bestNumber, chain_bestNumbe
           {api.runtimeVersion.implName} v{api.runtimeVersion.implVersion.toString(10)}
         </Bubble>
         <Bubble icon='bullseye' label='best #'>
-          {formatNumber(chain_bestNumber)} ({formatNumber(chain_bestNumberLag)} lag)
+          {formatNumber(bestNumber)} ({formatNumber(bestNumberLag)} lag)
         </Bubble>
-        {staking_validators && (
+        {validators && (
           <Bubble icon='chess queen' label='validators'>{
-            staking_validators.validators.map((accountId, index): React.ReactNode => (
+            validators.validators.map((accountId, index): React.ReactNode => (
               <IdentityIcon key={index} value={accountId} size={20} />
             ))
           }</Bubble>
         )}
         <Bubble icon='circle' label='total tokens'>
-          {formatBalance(balances_totalIssuance)}
+          {formatBalance(totalInsurance)}
         </Bubble>
       </div>
     </summary>
@@ -56,11 +55,4 @@ function SummaryBar ({ balances_totalIssuance, chain_bestNumber, chain_bestNumbe
 }
 
 // inject the actual API calls automatically into props
-export default translate(
-  withCalls<Props>(
-    'derive.chain.bestNumber',
-    'derive.chain.bestNumberLag',
-    'derive.staking.validators',
-    'query.balances.totalIssuance'
-  )(SummaryBar)
-);
+export default translate(SummaryBar);

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

@@ -21,7 +21,7 @@ import translate from './translate';
 // define our internal types
 interface Props extends AppProps, I18nProps {}
 
-function App ({ className }: Props): React.ReactElement<Props> {
+function TemplateApp ({ className }: Props): React.ReactElement<Props> {
   const [accountId, setAccountId] = useState<string | null>(null);
 
   return (
@@ -35,4 +35,4 @@ function App ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(App);
+export default translate(TemplateApp);

packages/app-claims/src/index.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 import { Trans } from 'react-i18next';
 import styled from 'styled-components';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { withApi, withMulti } from '@polkadot/react-api';
+import { withApi, withMulti } from '@polkadot/react-api/hoc';
 import { Button, Card, Columar, Column, InputAddress, Tooltip } from '@polkadot/react-components';
 import { TokenUnit } from '@polkadot/react-components/InputNumber';
 import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal';
@@ -73,7 +73,7 @@ const Signature = styled.textarea`
   }
 `;
 
-class App extends TxModal<Props, State> {
+class ClaimsApp extends TxModal<Props, State> {
   constructor (props: Props) {
     super(props);
 
@@ -252,7 +252,7 @@ class App extends TxModal<Props, State> {
 }
 
 export default withMulti(
-  App,
+  ClaimsApp,
   translate,
   withApi
 );

packages/app-contracts/package.json

@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.7.5",
-    "@polkadot/api-contract": "^0.99.0-beta.16",
+    "@polkadot/api-contract": "^0.99.1",
     "@polkadot/react-components": "^0.38.1"
   }
 }

packages/app-contracts/src/Codes/Upload.tsx

@@ -8,7 +8,7 @@ import { ApiProps } from '@polkadot/react-api/types';
 import BN from 'bn.js';
 import React from 'react';
 import { SubmittableResult } from '@polkadot/api';
-import { withApi, withMulti } from '@polkadot/react-api';
+import { withApi, withMulti } from '@polkadot/react-api/hoc';
 import { Button, InputFile, TxButton } from '@polkadot/react-components';
 import { compactAddLength } from '@polkadot/util';
 

packages/app-contracts/src/Codes/ValidateCode.tsx

@@ -9,7 +9,7 @@ import { ApiProps } from '@polkadot/react-api/types';
 
 import React from 'react';
 import { Option } from '@polkadot/types';
-import { withCalls } from '@polkadot/react-api';
+import { withCalls } from '@polkadot/react-api/hoc';
 import { InfoForInput } from '@polkadot/react-components';
 import { isHex } from '@polkadot/util';
 

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

@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 
 import React from 'react';
-import { withApi } from '@polkadot/react-api';
+import { withApi } from '@polkadot/react-api/hoc';
 import { AddressRow, Button, Input } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 

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

@@ -12,7 +12,7 @@ import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { Button, Dropdown, IconLink, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components';
 import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { withApi, withMulti } from '@polkadot/react-api';
+import { withApi, withMulti } from '@polkadot/react-api/hoc';
 import { createValue } from '@polkadot/react-params/values';
 import { isNull } from '@polkadot/util';
 

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

@@ -9,7 +9,7 @@ import { ApiProps } from '@polkadot/react-api/types';
 
 import React, { useEffect, useState } from 'react';
 import { Option } from '@polkadot/types';
-import { withCalls } from '@polkadot/react-api';
+import { withCalls } from '@polkadot/react-api/hoc';
 import { InfoForInput } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 

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

@@ -8,7 +8,7 @@ import { ComponentProps } from '../types';
 
 import React, { useState, useEffect } from 'react';
 import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { withApi, withMulti } from '@polkadot/react-api';
+import { withApi, withMulti } from '@polkadot/react-api/hoc';
 import { Button, CardGrid } from '@polkadot/react-components';
 
 import translate from '../translate';

packages/app-contracts/src/Deploy.tsx

@@ -12,7 +12,7 @@ import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
 import { SubmittableResult } from '@polkadot/api';
 import { Abi } from '@polkadot/api-contract';
-import { withApi, withMulti } from '@polkadot/react-api';
+import { withApi, withMulti } from '@polkadot/react-api/hoc';
 import keyring from '@polkadot/ui-keyring';
 import { Button, Dropdown, InputBalance, MessageSignature, TxButton } from '@polkadot/react-components';
 import createValues from '@polkadot/react-params/values';

packages/app-contracts/src/index.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import { Route, Switch, RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
 import { HelpOverlay, Tabs } from '@polkadot/react-components';
-import { withMulti, withObservable } from '@polkadot/react-api';
+import { withMulti, withObservable } from '@polkadot/react-api/hoc';
 import keyring from '@polkadot/ui-keyring';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 
@@ -34,7 +34,7 @@ interface State {
   updated: number;
 }
 
-class App extends React.PureComponent<Props, State> {
+class ContractsApp extends React.PureComponent<Props, State> {
   public state: State = {
     constructorIndex: 0,
     hasContracts: false,
@@ -145,7 +145,7 @@ class App extends React.PureComponent<Props, State> {
 }
 
 export default withMulti(
-  withRouter(App),
+  withRouter(ContractsApp),
   translate,
   withObservable(keyring.accounts.subject, { propName: 'accounts' }),
   withObservable(keyring.contracts.subject, { propName: 'contracts' })

packages/app-council/src/Motions/Propose.tsx

@@ -7,7 +7,8 @@ import { Call, Proposal } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
 import React from 'react';
-import { withCalls, withMulti, registry } from '@polkadot/react-api';
+import { registry } from '@polkadot/react-api';
+import { withCalls, withMulti } from '@polkadot/react-api/hoc';
 import { Button, Extrinsic, InputNumber } from '@polkadot/react-components';
 import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal';
 import { createType } from '@polkadot/types';

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

@@ -6,7 +6,7 @@ import { ApiProps } from '@polkadot/react-api/types';
 import { ComponentProps } from './types';
 
 import React from 'react';
-import { withApi } from '@polkadot/react-api';
+import { withApi } from '@polkadot/react-api/hoc';
 import { Button } from '@polkadot/react-components';
 import TxModal, { TxModalState as State, TxModalProps } from '@polkadot/react-components/TxModal';
 

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

@@ -9,7 +9,7 @@ import { ComponentProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { withApi } from '@polkadot/react-api';
+import { withApi } from '@polkadot/react-api/hoc';
 import { AddressMulti, Button } from '@polkadot/react-components';
 import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal';
 

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

@@ -7,8 +7,8 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
-import { withCalls } from '@polkadot/react-api';
 import { InputBalance } from '@polkadot/react-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { BalanceVoting } from '@polkadot/react-query';
 import { formatBalance, isBn } from '@polkadot/util';
 
@@ -16,7 +16,6 @@ import translate from '../translate';
 
 interface Props extends I18nProps {
   accountId?: string | null;
-  allBalances?: DerivedBalances;
   onChange: (value: BN) => void;
 }
 
@@ -25,7 +24,9 @@ interface ValueState {
   value?: BN | string;
 }
 
-function VoteValue ({ accountId, allBalances, onChange, t }: Props): React.ReactElement<Props> | null {
+function VoteValue ({ accountId, onChange, t }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const allBalances = useCall<DerivedBalances>(api.derive.balances.all as any, [accountId]);
   const [{ selectedId, value }, setValue] = useState<ValueState>({});
 
   // TODO This may be useful elsewhere, so figure out a way to make this a utility
@@ -69,11 +70,4 @@ function VoteValue ({ accountId, allBalances, onChange, t }: Props): React.React
   );
 }
 
-export default translate(
-  withCalls<Props>(
-    ['derive.balances.all', {
-      paramName: 'accountId',
-      propName: 'allBalances'
-    }]
-  )(VoteValue)
-);
+export default translate(VoteValue);

packages/app-council/src/index.tsx

@@ -20,7 +20,7 @@ export { default as useCounter } from './useCounter';
 
 interface Props extends AppProps, BareProps, I18nProps {}
 
-function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
+function CouncilApp ({ basePath, className, t }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const { pathname } = useLocation();
   const motions = useCall<DerivedCouncilProposals>(api.derive.council.proposals, []);
@@ -58,7 +58,7 @@ function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
 }
 
 export default translate(
-  styled(App)`
+  styled(CouncilApp)`
     .council--hidden {
       display: none;
     }

packages/app-dashboard/src/index.tsx

@@ -35,7 +35,7 @@ function renderSpacer (route: Route, index: number): React.ReactNode {
   );
 }
 
-function App ({ className }: Props): React.ReactElement<Props> {
+function DashboardApp ({ className }: Props): React.ReactElement<Props> {
   const [routes] = useState(
     routing.routes.filter((route): boolean =>
       !!route && !route.display.isHidden && route.name !== 'dashboard'
@@ -52,7 +52,7 @@ function App ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(App)`
+export default styled(DashboardApp)`
   .routes {
     display: flex;
     flex-direction: row;

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

@@ -3,23 +3,18 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { I18nProps as Props } from '@polkadot/react-components/types';
-import { Hash, ReferendumIndex } from '@polkadot/types/interfaces';
-import { ITuple } from '@polkadot/types/types';
+import { BlockNumber, Hash, ReferendumIndex } from '@polkadot/types/interfaces';
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Table } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
-import { Option, StorageKey, Vec } from '@polkadot/types';
-import { u8aToHex } from '@polkadot/util';
 
 import translate from '../translate';
-import DispatchBlock from './DispatchBlock';
+import DispatchEntry from './DispatchEntry';
 
 function DispatchQueue ({ className, t }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
-  const [keyPrefix] = useState(u8aToHex(api.query.democracy.dispatchQueue.creator.iterKey));
-  const queued = useCall<[StorageKey, Option<Vec<Option<ITuple<[Hash, ReferendumIndex]>>>>
-  ][]>(api.query.democracy.dispatchQueue.entries as any, []);
+  const queued = useCall<[BlockNumber, Hash, ReferendumIndex][]>(api.query.democracy.dispatchQueue, []);
 
   if (!queued?.length) {
     return null;
@@ -32,12 +27,12 @@ function DispatchQueue ({ className, t }: Props): React.ReactElement<Props> | nu
         ? (
           <Table>
             <Table.Body>
-              {queued.map(([storageKey, entries]): React.ReactNode => (
-                <DispatchBlock
-                  entries={entries}
-                  key={storageKey.toString()}
-                  keyPrefix={keyPrefix}
-                  storageKey={storageKey}
+              {queued.map(([blockNumber, hash, referendumIndex]): React.ReactNode => (
+                <DispatchEntry
+                  blockNumber={blockNumber}
+                  hash={hash}
+                  key={referendumIndex.toString()}
+                  referendumIndex={referendumIndex}
                 />
               ))}
             </Table.Body>

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

@@ -5,12 +5,13 @@
 
 import { DerivedReferendumVote, DerivedReferendum } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
+import { BlockNumber } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { formatNumber } from '@polkadot/util';
-import { withCalls, withMulti } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 
 import translate from '../translate';
@@ -19,8 +20,6 @@ import Voting from './Voting';
 
 interface Props extends I18nProps {
   idNumber: BN;
-  chain_bestNumber?: BN;
-  democracy_referendumVotesFor?: DerivedReferendumVote[];
   value: DerivedReferendum;
 }
 
@@ -33,7 +32,10 @@ interface State {
   votedTotal: BN;
 }
 
-function Referendum ({ chain_bestNumber, className, democracy_referendumVotesFor, t, value }: Props): React.ReactElement<Props> | null {
+function Referendum ({ className, idNumber, t, value }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
+  const votesFor = useCall<DerivedReferendumVote[]>(api.derive.democracy.referendumVotesFor as any, [idNumber]);
   const [{ voteCountAye, voteCountNay, votedAye, votedNay }, setState] = useState<State>({
     voteCount: 0,
     voteCountAye: 0,
@@ -44,8 +46,8 @@ function Referendum ({ chain_bestNumber, className, democracy_referendumVotesFor
   });
 
   useEffect((): void => {
-    if (democracy_referendumVotesFor) {
-      const newState: State = democracy_referendumVotesFor.reduce((state, { balance, vote }): State => {
+    if (votesFor) {
+      const newState: State = votesFor.reduce((state, { balance, vote }): State => {
         if (vote.isAye) {
           state.voteCountAye++;
           state.votedAye = state.votedAye.add(balance);
@@ -73,9 +75,9 @@ function Referendum ({ chain_bestNumber, className, democracy_referendumVotesFor
 
       setState(newState);
     }
-  }, [democracy_referendumVotesFor]);
+  }, [votesFor]);
 
-  if (!chain_bestNumber || value.info.end.sub(chain_bestNumber).lten(0)) {
+  if (!bestNumber || value.info.end.sub(bestNumber).lten(0)) {
     return null;
   }
 
@@ -91,7 +93,7 @@ function Referendum ({ chain_bestNumber, className, democracy_referendumVotesFor
       />
       <td className='number together top'>
         <label>{t('remaining')}</label>
-        {formatNumber(value.info.end.sub(chain_bestNumber).subn(1))} blocks
+        {formatNumber(value.info.end.sub(bestNumber).subn(1))} blocks
       </td>
       <td className='number together top'>
         <label>{t('activate at')}</label>
@@ -112,7 +114,7 @@ function Referendum ({ chain_bestNumber, className, democracy_referendumVotesFor
   );
 }
 
-export default withMulti(
+export default translate(
   styled(Referendum)`
     .democracy--Referendum-results {
       margin-bottom: 1em;
@@ -121,10 +123,5 @@ export default withMulti(
         text-align: center;
       }
     }
-  `,
-  translate,
-  withCalls<Props>(
-    'derive.chain.bestNumber',
-    ['derive.democracy.referendumVotesFor', { paramName: 'idNumber' }]
-  )
+  `
 );

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

@@ -1,37 +1,26 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/app-democracy 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/react-components/types';
+import { I18nProps as Props } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
-import { withCalls } from '@polkadot/react-api';
 import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
 
-interface Props extends I18nProps {
-  chain_bestNumber?: BN;
-  democracy_nextTally?: BN;
-  democracy_publicPropCount?: BN;
-  democracy_referendumCount?: BN;
-}
+const ZERO = new BN(0);
 
-function Summary (props: Props): React.ReactElement<Props> {
+function Summary ({ t }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const activeProposals = useCall<any[]>(api.derive.democracy.proposals, []);
-
-  const {
-    chain_bestNumber,
-    democracy_nextTally = new BN(0),
-    democracy_publicPropCount,
-    democracy_referendumCount = new BN(0),
-    t
-  } = props;
+  const bestNumber = useCall<BN>(api.derive.chain.bestNumber, []);
+  const nextActive = useCall<BN>(api.query.democracy?.lowestUnbaked || api.query.democracy.nextTally, []);
+  const publicPropCount = useCall<BN>(api.query.democracy.publicPropCount, []);
+  const referendumCount = useCall<BN>(api.query.democracy.referendumCount, []);
 
   return (
     <SummaryBox>
@@ -40,23 +29,23 @@ function Summary (props: Props): React.ReactElement<Props> {
           {formatNumber(activeProposals?.length)}
         </CardSummary>
         <CardSummary label={t('total')}>
-          {formatNumber(democracy_publicPropCount)}
+          {formatNumber(publicPropCount)}
         </CardSummary>
       </section>
       <section>
         <CardSummary label={t('referenda')}>
-          {formatNumber(democracy_referendumCount.sub(democracy_nextTally))}
+          {formatNumber(referendumCount && nextActive ? referendumCount.sub(nextActive) : ZERO)}
         </CardSummary>
         <CardSummary label={t('total')}>
-          {formatNumber(democracy_referendumCount)}
+          {formatNumber(referendumCount)}
         </CardSummary>
       </section>
-      {chain_bestNumber && (
+      {bestNumber && (
         <section className='ui--media-medium'>
           <CardSummary
             label={t('launch period')}
             progress={{
-              value: chain_bestNumber.mod(api.consts.democracy.launchPeriod).addn(1),
+              value: bestNumber.mod(api.consts.democracy.launchPeriod).addn(1),
               total: api.consts.democracy.launchPeriod
             }}
           />
@@ -66,11 +55,4 @@ function Summary (props: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(
-  withCalls<Props>(
-    'query.democracy.nextTally',
-    'query.democracy.publicPropCount',
-    'query.democracy.referendumCount',
-    'derive.chain.bestNumber'
-  )(Summary)
-);
+export default translate(Summary);

packages/app-democracy/src/index.tsx

@@ -21,7 +21,7 @@ const hidden = uiSettings.uiMode === 'full'
   ? []
   : ['propose'];
 
-function App ({ basePath, t }: Props): React.ReactElement<Props> {
+function DemocracyApp ({ basePath, t }: Props): React.ReactElement<Props> {
   return (
     <main className='democracy--App'>
       <HelpOverlay md={basicMd} />
@@ -45,4 +45,4 @@ function App ({ basePath, t }: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(App);
+export default translate(DemocracyApp);

packages/app-explorer/src/BestHash.tsx

@@ -7,26 +7,22 @@ import { Header } from '@polkadot/types/interfaces';
 import { BareProps, CallProps } from '@polkadot/react-api/types';
 
 import React from 'react';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 interface Props extends BareProps, CallProps {
-  label?: string;
-  chain_subscribeNewHeads?: Header;
+  label?: React.ReactNode;
 }
 
-function BestHash ({ className, label = '', style, chain_subscribeNewHeads }: Props): React.ReactElement<Props> {
+export default function BestHash ({ className, label, style }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const newHead = useCall<Header>(api.rpc.chain.subscribeNewHeads, []);
+
   return (
     <div
       className={className}
       style={style}
     >
-      {label}{
-        chain_subscribeNewHeads
-          ? chain_subscribeNewHeads.hash.toHex()
-          : undefined
-      }
+      {label || ''}{newHead?.hash.toHex()}
     </div>
   );
 }
-
-export default withCalls<Props>('rpc.chain.subscribeNewHeads')(BestHash);

packages/app-explorer/src/BlockInfo/ByHash.tsx

@@ -9,8 +9,8 @@ import { I18nProps } from '@polkadot/react-components/types';
 import React from 'react';
 import styled from 'styled-components';
 import { HeaderExtended } from '@polkadot/api-derive';
-import { withCalls } from '@polkadot/react-api';
 import { Columar } from '@polkadot/react-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import BlockHeader from '../BlockHeader';
 import translate from '../translate';
@@ -19,14 +19,16 @@ import Extrinsics from './Extrinsics';
 import Logs from './Logs';
 
 interface Props extends I18nProps {
-  system_events?: EventRecord[];
-  chain_getBlock?: SignedBlock;
-  chain_getHeader?: HeaderExtended;
   value: string;
 }
 
-function BlockByHash ({ className, system_events, chain_getBlock, chain_getHeader }: Props): React.ReactElement<Props> | null {
-  if (!chain_getBlock || chain_getBlock.isEmpty || !chain_getHeader || chain_getHeader.isEmpty) {
+function BlockByHash ({ className, value }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const events = useCall<EventRecord[]>(api.query.system.events.at as any, [value], { isSingle: true });
+  const getBlock = useCall<SignedBlock>(api.rpc.chain.getBlock as any, [value], { isSingle: true });
+  const getHeader = useCall<HeaderExtended>(api.derive.chain.getHeader as any, [value]);
+
+  if (!getBlock || getBlock.isEmpty || !getHeader || getHeader.isEmpty) {
     return null;
   }
 
@@ -35,31 +37,27 @@ function BlockByHash ({ className, system_events, chain_getBlock, chain_getHeade
       <header>
         <BlockHeader
           className='exporer--BlockByHash-BlockHeader'
-          value={chain_getHeader}
+          value={getHeader}
           withExplorer
         />
       </header>
       <Columar>
         <Extrinsics
-          blockNumber={chain_getHeader.number.unwrap()}
-          value={chain_getBlock.block.extrinsics}
+          blockNumber={getHeader.number.unwrap()}
+          value={getBlock.block.extrinsics}
         />
-        <Events value={system_events} />
-        <Logs value={chain_getHeader.digest.logs} />
+        <Events value={events} />
+        <Logs value={getHeader.digest.logs} />
       </Columar>
     </div>
   );
 }
 
 export default translate(
-  withCalls<Props>(
-    ['rpc.chain.getBlock', { paramName: 'value' }],
-    ['derive.chain.getHeader', { paramName: 'value' }],
-    ['query.system.events', { atProp: 'value' }]
-  )(styled(BlockByHash)`
+  styled(BlockByHash)`
     .exporer--BlockByHash-BlockHeader {
       border: none;
       box-shadow: none;
     }
-  `)
+  `
 );

packages/app-explorer/src/BlockInfo/ByNumber.tsx

@@ -6,25 +6,23 @@
 import { Hash } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import BlockByHash from './ByHash';
 
 interface Props {
-  chain_getBlockHash?: Hash;
   value: string;
 }
 
-function BlockByNumber ({ chain_getBlockHash }: Props): React.ReactElement<Props> | null {
-  if (!chain_getBlockHash) {
+export default function BlockByNumber ({ value }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const getBlockHash = useCall<Hash>(api.rpc.chain.getBlockHash as any, [value]);
+
+  if (!getBlockHash) {
     return null;
   }
 
   return (
-    <BlockByHash value={chain_getBlockHash.toHex()} />
+    <BlockByHash value={getBlockHash.toHex()} />
   );
 }
-
-export default withCalls<Props>(
-  ['rpc.chain.getBlockHash', { paramName: 'value' }]
-)(BlockByNumber);

packages/app-explorer/src/BlockInfo/index.tsx

@@ -1,35 +1,33 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // 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 { BlockNumber } from '@polkadot/types/interfaces';
-import { BareProps } from '@polkadot/react-components/types';
+import { BareProps as Props } from '@polkadot/react-components/types';
 
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { isHex } from '@polkadot/util';
 
 import Query from '../Query';
 import BlockByHash from './ByHash';
 import BlockByNumber from './ByNumber';
 
-interface Props extends BareProps {
-  chain_bestNumber?: BlockNumber;
-}
-
-function Entry ({ chain_bestNumber }: Props): React.ReactElement<Props> | null {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function Entry (props: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
   const { value } = useParams();
   const [stateValue, setStateValue] = useState<string | undefined>(value);
 
   useEffect((): void => {
     if (value && value !== stateValue) {
       setStateValue(value);
-    } else if (!stateValue && chain_bestNumber) {
-      setStateValue(chain_bestNumber.toString());
+    } else if (!stateValue && bestNumber) {
+      setStateValue(bestNumber.toString());
     }
-  }, [chain_bestNumber, value]);
+  }, [bestNumber, value]);
 
   if (!stateValue) {
     return null;
@@ -49,5 +47,3 @@ function Entry ({ chain_bestNumber }: Props): React.ReactElement<Props> | null {
     </>
   );
 }
-
-export default withCalls<Props>('derive.chain.bestNumber')(Entry);

packages/app-explorer/src/SummarySession.tsx

@@ -5,9 +5,9 @@
 import { DerivedSessionInfo } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { CardSummary } from '@polkadot/react-components';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import translate from './translate';
 import { formatNumber } from '@polkadot/util';
@@ -69,16 +69,20 @@ function renderEra ({ sessionInfo, t, withEra = true }: Props): React.ReactNode
 }
 
 function SummarySession (props: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const sessionInfo = useCall<DerivedSessionInfo>(api.derive.session.info, []);
+  const [expanded, setExpanded] = useState<Props>(props);
+
+  useEffect((): void => {
+    setExpanded({ ...props, sessionInfo });
+  }, [props, sessionInfo]);
+
   return (
     <>
-      {renderSession(props)}
-      {renderEra(props)}
+      {renderSession(expanded)}
+      {renderEra(expanded)}
     </>
   );
 }
 
-export default translate(
-  withCalls<Props>(
-    ['derive.session.info', { propName: 'sessionInfo' }]
-  )(SummarySession)
-);
+export default translate(SummarySession);

packages/app-extrinsics/src/Balance.tsx

@@ -1,35 +1,30 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/react-query 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 { BareProps, CallProps } from '@polkadot/react-api/types';
+import { BareProps } from '@polkadot/react-api/types';
 
 import React from 'react';
 import { DerivedBalances } from '@polkadot/api-derive/types';
-import { withCalls, withMulti } from '@polkadot/react-api';
 import { InputBalance } from '@polkadot/react-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
-interface Props extends BareProps, CallProps {
-  balances_all?: DerivedBalances;
+interface Props extends BareProps {
   label?: React.ReactNode;
+  params?: any;
 }
 
-function BalanceDisplay ({ className, label, style, balances_all }: Props): React.ReactElement<Props> {
+export default function BalanceDisplay ({ className, label, params, style }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const allBalances = useCall<DerivedBalances>(api.derive.balances.all as any, [params]);
+
   return (
     <InputBalance
       className={className}
       isDisabled
       label={label}
       style={style}
-      defaultValue={balances_all && balances_all.freeBalance}
+      defaultValue={allBalances?.freeBalance}
     />
   );
 }
-
-export default withMulti(
-  BalanceDisplay,
-  withCalls<Props>(
-    ['derive.balances.all', { paramName: 'params' }]
-  )
-);

packages/app-extrinsics/src/Selection.tsx

@@ -10,7 +10,7 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 
 import React from 'react';
 import { Button, Extrinsic, InputAddress, TxButton, TxComponent } from '@polkadot/react-components';
-import { withApi, withMulti } from '@polkadot/react-api';
+import { withApi, withMulti } from '@polkadot/react-api/hoc';
 import { BalanceFree } from '@polkadot/react-query';
 
 import translate from './translate';

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

@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, CardGrid } from '@polkadot/react-components';
-import { withMulti, withObservable } from '@polkadot/react-api';
+import { withMulti, withObservable } from '@polkadot/react-api/hoc';
 
 import assetRegistry, { AssetsSubjectInfo } from './assetsRegistry';
 import AssetCard from './AssetCard';

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

@@ -12,7 +12,7 @@ import { Button, InputAddress, InputBalance, TxButton, Dropdown } from '@polkado
 import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
 import Checks from '@polkadot/react-signer/Checks';
-import { withMulti, withObservable } from '@polkadot/react-api';
+import { withMulti, withObservable } from '@polkadot/react-api/hoc';
 
 import assetRegistry, { AssetsSubjectInfo } from './assetsRegistry';
 import translate from './translate';

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

@@ -15,7 +15,7 @@ import translate from './translate';
 
 interface Props extends AppProps, BareProps, I18nProps {}
 
-function App ({ basePath, t }: Props): React.ReactElement<Props> {
+function AssetApp ({ basePath, t }: Props): React.ReactElement<Props> {
   return (
     <main className='treasury--App'>
       <header>
@@ -42,4 +42,4 @@ function App ({ basePath, t }: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(App);
+export default translate(AssetApp);

packages/app-js/src/index.tsx

@@ -11,7 +11,7 @@ import Playground from './Playground';
 
 interface Props extends AppProps, BareProps {}
 
-export default function AppJs ({ basePath }: Props): React.ReactElement<Props> {
+export default function ScriptingApp ({ basePath }: Props): React.ReactElement<Props> {
   return (
     <Switch>
       <Route path={`${basePath}/share/:base64`} component={Playground} />

packages/app-parachains/src/Overview/Parachain.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/app-parachains authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
@@ -11,7 +10,7 @@ import styled from 'styled-components';
 import { Bytes, Option } from '@polkadot/types';
 import { Card, Static } from '@polkadot/react-components';
 import { styles as rowStyles } from '@polkadot/react-components/Row';
-import { withCalls, withMulti } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
@@ -19,11 +18,16 @@ import translate from '../translate';
 interface Props extends I18nProps {
   className?: string;
   paraId: BN;
-  parachains_heads?: string | null;
-  parachains_relayDispatchQueueSize?: [BN, BN];
 }
 
-function Parachain ({ className, paraId, parachains_heads, parachains_relayDispatchQueueSize, t }: Props): React.ReactElement<Props> {
+function Parachain ({ className, paraId, t }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const heads = useCall<string | null>(api.query.parachains.heads, [paraId], {
+    transform: (heads: Option<Bytes>): string | null =>
+      heads.isSome ? heads.unwrap().toHex() : null
+  });
+  const relayDispatchQueueSize = useCall<[BN, BN]>(api.query.parachains.relayDispatchQueueSize, [paraId]);
+
   return (
     <Card className={className}>
       <div className='ui--Row'>
@@ -35,14 +39,14 @@ function Parachain ({ className, paraId, parachains_heads, parachains_relayDispa
         <Static
           help={t('the last heads of this parachain')}
           label={t('heads')}
-          value={parachains_heads || t('<unknown>')}
+          value={heads || t('<unknown>')}
         />
         <Static
           help={t('the relay dispatch queue size')}
           label={t('relay queue')}
           value={
-            parachains_relayDispatchQueueSize
-              ? formatNumber(parachains_relayDispatchQueueSize[0])
+            relayDispatchQueueSize
+              ? formatNumber(relayDispatchQueueSize[0])
               : '-'
           }
         />
@@ -51,21 +55,12 @@ function Parachain ({ className, paraId, parachains_heads, parachains_relayDispa
   );
 }
 
-export default withMulti(
+export default translate(
   styled(Parachain)`
     ${rowStyles}
 
     .parachains--Item-header {
       margin-bottom: 1rem;
     }
-  `,
-  translate,
-  withCalls<Props>(
-    ['query.parachains.heads', {
-      paramName: 'paraId',
-      transform: (heads: Option<Bytes>): string | null =>
-        heads.isSome ? heads.unwrap().toHex() : null
-    }],
-    ['query.parachains.relayDispatchQueueSize', { paramName: 'paraId' }]
-  )
+  `
 );

packages/app-parachains/src/Overview/Parachains.tsx

@@ -2,27 +2,26 @@
 // 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/react-components/types';
+import { I18nProps as Props } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React from 'react';
 import { Column } from '@polkadot/react-components';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import translate from '../translate';
 import Parachain from './Parachain';
 
-interface Props extends I18nProps {
-  parachains?: BN[];
-}
+function Parachains ({ t }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const parachains = useCall<BN[]>(api.query.registrar.parachains || api.query.parachains.parachains, []);
 
-function Parachains ({ parachains, t }: Props): React.ReactElement<Props> {
   return (
     <Column
       emptyText={t('no deployed parachains')}
       headerText={t('parachains')}
     >
-      {parachains && parachains.map((paraId): React.ReactNode => (
+      {parachains?.map((paraId): React.ReactNode => (
         <Parachain
           key={paraId.toString()}
           paraId={paraId}
@@ -32,11 +31,4 @@ function Parachains ({ parachains, t }: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(
-  withCalls<Props>(
-    ['query.registrar.parachains', {
-      fallbacks: ['query.parachains.parachains'],
-      propName: 'parachains'
-    }]
-  )(Parachains)
-);
+export default translate(Parachains);

packages/app-parachains/src/Overview/Summary.tsx

@@ -2,27 +2,26 @@
 // 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/react-components/types';
+import { I18nProps as Props } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
 
-interface Props extends I18nProps {
-  nextFreeId?: BN;
-  parachains?: BN[];
-}
+function Summary ({ t }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const nextFreeId = useCall<BN>(api.query.parachains.nextFreeId, []);
+  const parachains = useCall<BN[]>(api.query.registrar.parachains || api.query.parachains.parachains, []);
 
-function Summary ({ nextFreeId, parachains = [], t }: Props): React.ReactElement<Props> {
   return (
     <SummaryBox>
       <section>
         <CardSummary label={t('parachains')}>
-          {formatNumber(parachains.length)}
+          {formatNumber(parachains?.length)}
         </CardSummary>
       </section>
       {nextFreeId && (
@@ -36,15 +35,4 @@ function Summary ({ nextFreeId, parachains = [], t }: Props): React.ReactElement
   );
 }
 
-export default translate(
-  withCalls<Props>(
-    ['query.registrar.nextFreeId', {
-      fallbacks: ['query.parachains.nextFreeId'],
-      propName: 'nextFreeId'
-    }],
-    ['query.registrar.parachains', {
-      fallbacks: ['query.parachains.parachains'],
-      propName: 'parachains'
-    }]
-  )(Summary)
-);
+export default translate(Summary);

packages/app-parachains/src/index.tsx

@@ -13,7 +13,7 @@ import translate from './translate';
 
 interface Props extends AppProps, BareProps, I18nProps {}
 
-function App ({ basePath, t }: Props): React.ReactElement<Props> {
+function ParachainsApp ({ basePath, t }: Props): React.ReactElement<Props> {
   return (
     <main>
       <header>
@@ -35,4 +35,4 @@ function App ({ basePath, t }: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(App);
+export default translate(ParachainsApp);

packages/app-settings/src/index.tsx

@@ -21,7 +21,7 @@ const hidden = uiSettings.uiMode === 'full'
   ? []
   : ['developer'];
 
-function App (props: Props): React.ReactElement<Props> {
+function SettingsApp (props: Props): React.ReactElement<Props> {
   const _renderDeveloper = (): React.ReactNode => {
     return (
       <Developer {...props} />
@@ -57,4 +57,4 @@ function App (props: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(App);
+export default translate(SettingsApp);

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

@@ -12,7 +12,7 @@ import React from 'react';
 import { Available, Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 import { calcTxLength } from '@polkadot/react-signer/Checks';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { withCalls, withApi, withMulti } from '@polkadot/react-api';
+import { withCalls, withApi, withMulti } from '@polkadot/react-api/hoc';
 import { ZERO_BALANCE, ZERO_FEES } from '@polkadot/react-signer/Checks/constants';
 import { bnMax } from '@polkadot/util';
 

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

@@ -3,24 +3,24 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedBalances } from '@polkadot/api-derive/types';
-import { ApiProps } from '@polkadot/react-api/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import { Icon } from '@polkadot/react-components';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import translate from '../../translate';
 
-interface Props extends ApiProps, I18nProps {
-  allBalances?: DerivedBalances;
+interface Props extends I18nProps {
   accountId: string | null;
   onError: (error: string | null) => void;
   value?: BN | null;
 }
 
-function ValidateAmount ({ allBalances, onError, value, t }: Props): React.ReactElement<Props> | null {
+function ValidateAmount ({ accountId, onError, value, t }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const allBalances = useCall<DerivedBalances>(api.derive.balances.all as any, [accountId]);
   const [error, setError] = useState<string | null>(null);
 
   useEffect((): void => {
@@ -51,11 +51,4 @@ function ValidateAmount ({ allBalances, onError, value, t }: Props): React.React
   );
 }
 
-export default translate(
-  withCalls<Props>(
-    ['derive.balances.all', {
-      paramName: 'accountId',
-      propName: 'allBalances'
-    }]
-  )(ValidateAmount)
-);
+export default translate(ValidateAmount);

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

@@ -2,30 +2,46 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { ApiProps } from '@polkadot/react-api/types';
 import { I18nProps } from '@polkadot/react-components/types';
 import { AccountId, StakingLedger } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useState } from 'react';
 import { Icon } from '@polkadot/react-components';
 import { Option } from '@polkadot/types';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import translate from '../../translate';
 
-interface Props extends ApiProps, I18nProps {
+interface Props extends I18nProps {
   accountId: string | null;
-  bondedId?: string | null;
   controllerId: string | null;
   defaultController?: string;
   isUnsafeChain?: boolean;
   onError: (error: string | null) => void;
-  stashId?: string | null;
 }
 
 const DISTINCT = 'Distinct stash and controller accounts are recommended to ensure fund security.';
 
-function ValidateController ({ accountId, bondedId, controllerId, defaultController, isUnsafeChain, onError, stashId, t }: Props): React.ReactElement<Props> | null {
+function ValidateController ({ accountId, controllerId, defaultController, isUnsafeChain, onError, t }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const bondedId = useCall<string | null>(api.query.staking.bonded, [controllerId], {
+    transform: (value: Option<AccountId>): string | null => {
+      const extracted = value.unwrapOr(null);
+
+      return extracted
+        ? extracted.toString()
+        : null;
+    }
+  });
+  const stashId = useCall<string | null>(api.query.staking.ledger, [controllerId], {
+    transform: (value: Option<StakingLedger>): string | null => {
+      const extracted = value.unwrapOr({ stash: null }).stash;
+
+      return extracted
+        ? extracted.toString()
+        : null;
+    }
+  });
   const [error, setError] = useState<string | null>(null);
 
   useEffect((): void => {
@@ -62,30 +78,4 @@ function ValidateController ({ accountId, bondedId, controllerId, defaultControl
   );
 }
 
-export default translate(
-  withCalls<Props>(
-    ['query.staking.bonded', {
-      paramName: 'controllerId',
-      propName: 'bondedId',
-      transform: (value: Option<AccountId>): string | null => {
-        const extracted = value.unwrapOr(null);
-
-        return extracted
-          ? extracted.toString()
-          : null;
-      }
-    }],
-    ['query.staking.ledger', {
-      paramName: 'controllerId',
-      propName: 'stashId',
-      transform: (value: Option<StakingLedger>): string | null => {
-        const extracted = value.unwrapOr({ stash: null }).stash;
-
-        return extracted
-          ? extracted.toString()
-          : null;
-      }
-
-    }]
-  )(ValidateController)
-);
+export default translate(ValidateController);

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

@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Button, Icon, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-import { withApi, withMulti } from '@polkadot/react-api';
+import { withApi, withMulti } from '@polkadot/react-api/hoc';
 
 import translate from '../../translate';
 import detectUnsafe from '../../unsafeChains';

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

@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Button, Dropdown, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-import { withMulti } from '@polkadot/react-api';
+import { withMulti } from '@polkadot/react-api/hoc';
 
 import translate from '../../translate';
 import { rewardDestinationOptions } from '../constants';

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

@@ -12,7 +12,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Option } from '@polkadot/types';
 import { AddressInfo, Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-import { withCalls, withApi, withMulti } from '@polkadot/react-api';
+import { withCalls, withApi, withMulti } from '@polkadot/react-api/hoc';
 
 import translate from '../../translate';
 

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

@@ -8,7 +8,8 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { registry, withApi, withMulti } from '@polkadot/react-api';
+import { registry } from '@polkadot/react-api';
+import { withApi, withMulti } from '@polkadot/react-api/hoc';
 import { Button, InputAddress, InputBalance, InputNumber, Modal, TxButton, TxComponent } from '@polkadot/react-components';
 import { createType } from '@polkadot/types';
 

packages/app-staking/src/Actions/NewStake.tsx

@@ -10,7 +10,7 @@ import BN from 'bn.js';
 import React from 'react';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { Button, Dropdown, InputAddress, InputBalanceBonded, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-import { withApi, withMulti } from '@polkadot/react-api';
+import { withApi, withMulti } from '@polkadot/react-api/hoc';
 
 import translate from '../translate';
 import detectUnsafe from '../unsafeChains';

packages/app-staking/src/index.tsx

@@ -40,7 +40,7 @@ function transformStakingControllers ([stashes, controllers]: [AccountId[], Opti
   ];
 }
 
-function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
+function StakingApp ({ basePath, className, t }: Props): React.ReactElement<Props> {
   const { api, isSubstrateV2 } = useApi();
   const { hasAccounts } = useAccounts();
   const { pathname } = useLocation();
@@ -136,7 +136,7 @@ function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
 }
 
 export default translate(
-  styled(App)`
+  styled(StakingApp)`
     .staking--hidden {
       display: none;
     }

packages/app-storage/src/Query.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 { RenderFn, DefaultProps, ComponentRenderer } from '@polkadot/react-api/with/types';
+import { RenderFn, DefaultProps, ComponentRenderer } from '@polkadot/react-api/hoc/types';
 import { I18nProps } from '@polkadot/react-components/types';
 import { ConstValue } from '@polkadot/react-components/InputConsts/types';
 import { QueryTypes, StorageEntryPromise, StorageModuleQuery } from './types';
@@ -11,7 +11,7 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { unwrapStorageType } from '@polkadot/types/primitive/StorageKey';
 import { Button, Labelled } from '@polkadot/react-components';
-import { withCallDiv } from '@polkadot/react-api';
+import { withCallDiv } from '@polkadot/react-api/hoc';
 import valueToText from '@polkadot/react-params/valueToText';
 import { Compact, Option, Raw } from '@polkadot/types';
 import { isU8a, u8aToHex, u8aToString } from '@polkadot/util';

packages/app-sudo/src/Sudo.tsx

@@ -10,7 +10,8 @@ import { ComponentProps } from './types';
 import React from 'react';
 import { createType } from '@polkadot/types';
 import { Button, Icon, Extrinsic, TxButton, TxComponent } from '@polkadot/react-components';
-import { registry, withApi, withMulti } from '@polkadot/react-api';
+import { registry } from '@polkadot/react-api';
+import { withApi, withMulti } from '@polkadot/react-api/hoc';
 
 import translate from './translate';
 

packages/app-sudo/src/index.tsx

@@ -19,7 +19,7 @@ import translate from './translate';
 interface Props extends AppProps, I18nProps {
 }
 
-function App ({ basePath, t }: Props): React.ReactElement<Props> {
+function SudoApp ({ basePath, t }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const sudoKey = useCall<string>(api.query.sudo.key, [], { transform: (k): string => k.toString() });
   const { allAccounts } = useAccounts();
@@ -80,4 +80,4 @@ function App ({ basePath, t }: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(App);
+export default translate(SudoApp);

packages/app-tech-comm/src/index.tsx

@@ -18,7 +18,7 @@ export { default as useCounter } from './useCounter';
 
 interface Props extends AppProps, BareProps, I18nProps {}
 
-function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
+function TechCommApp ({ basePath, className, t }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const members = useCall<AccountId[]>(api.query.technicalCommittee.members, []);
   const proposals = useCall<Hash[]>(api.query.technicalCommittee.proposals, []);
@@ -59,4 +59,4 @@ function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(App);
+export default translate(TechCommApp);

packages/app-treasury/src/Overview/Approve.tsx

@@ -8,7 +8,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Button, Dropdown } from '@polkadot/react-components';
-import { withMulti, withApi, withCalls } from '@polkadot/react-api';
+import { withMulti, withApi, withCalls } from '@polkadot/react-api/hoc';
 import TxModal, { TxModalProps, TxModalState } from '@polkadot/react-components/TxModal';
 
 import translate from '../translate';

packages/app-treasury/src/index.tsx

@@ -17,7 +17,7 @@ export { default as useCounter } from './useCounter';
 
 interface Props extends AppProps, BareProps, I18nProps {}
 
-function App ({ basePath, t }: Props): React.ReactElement<Props> {
+function TreasuryApp ({ basePath, t }: Props): React.ReactElement<Props> {
   return (
     <main className='treasury--App'>
       <HelpOverlay md={basicMd} />
@@ -40,4 +40,4 @@ function App ({ basePath, t }: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(App);
+export default translate(TreasuryApp);

packages/apps-routing/package.json

@@ -10,6 +10,6 @@
   "contributors": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.5"
+    "@babel/runtime": "^7.7.6"
   }
 }

packages/apps/src/Apps.tsx

@@ -8,11 +8,11 @@ import { BareProps as Props } from '@polkadot/react-components/types';
 // we also need to export the default as hot(Apps) (last line)
 // import { hot } from 'react-hot-loader/root';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import store from 'store';
 import styled from 'styled-components';
-import { withCalls } from '@polkadot/react-api';
 import GlobalStyle from '@polkadot/react-components/styles';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import Signer from '@polkadot/react-signer';
 
 import ConnectingOverlay from './overlays/Connecting';
@@ -28,24 +28,22 @@ interface SidebarState {
   transition: SideBarTransition;
 }
 
-function Placeholder (): React.ReactElement {
+function WarmUp (): React.ReactElement {
+  const { api, isApiReady } = useApi();
+  const fees = useCall<any>(isApiReady ? api.derive.balances.fees : undefined, []);
+  const indexes = useCall<any>(isApiReady ? api.derive.accounts.indexes : undefined, []);
+  const staking = useCall<any>(isApiReady ? api.derive.staking.overview : undefined, []);
+  const [hasValues, setHasValues] = useState(false);
+
+  useEffect((): void => {
+    setHasValues(!!fees || !!indexes || !!staking);
+  }, []);
+
   return (
-    <div className='api-warm' />
+    <div className={`api-warm ${hasValues}`} />
   );
 }
 
-const WarmUp = withCalls<{}>(
-  'derive.accounts.indexes',
-  'derive.balances.fees',
-  'derive.staking.overview'
-  // This are very ineffective queries that
-  //   (a) adds load to the RPC node when activated globally
-  //   (b) is used in additional information (next-up)
-  // 'derive.staking.all'
-  // 'derive.staking.controllers'
-  // 'query.staking.nominators'
-)(Placeholder);
-
 function Apps ({ className }: Props): React.ReactElement<Props> {
   const [sidebar, setSidebar] = useState<SidebarState>({
     isCollapsed: false,

packages/apps/src/Content/Status.tsx

@@ -11,7 +11,8 @@ import { I18nProps } from '@polkadot/react-components/types';
 import React, { useEffect } from 'react';
 import keyringOption from '@polkadot/ui-keyring/options';
 import { Status as StatusDisplay } from '@polkadot/react-components';
-import { withCalls, withMulti, withObservable } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
+import { withMulti, withObservable } from '@polkadot/react-api/hoc';
 import { stringToU8a } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
@@ -21,15 +22,17 @@ interface Props extends I18nProps {
   optionsAll?: KeyringOptions;
   queueAction: QueueAction$Add;
   stqueue: QueueStatus[];
-  system_events?: EventRecord[];
   txqueue: QueueTx[];
 }
 
 let prevEventHash: string;
 
-function Status ({ optionsAll, queueAction, stqueue, system_events, t, txqueue }: Props): React.ReactElement<Props> {
+function Status ({ optionsAll, queueAction, stqueue, t, txqueue }: Props): React.ReactElement<Props> {
+  const { api, isApiReady } = useApi();
+  const events = useCall<EventRecord[]>(isApiReady ? api.query.system.events : undefined, []);
+
   useEffect((): void => {
-    const eventHash = xxhashAsHex(stringToU8a(JSON.stringify(system_events)));
+    const eventHash = xxhashAsHex(stringToU8a(JSON.stringify(events)));
 
     if (!optionsAll || eventHash === prevEventHash) {
       return;
@@ -38,7 +41,7 @@ function Status ({ optionsAll, queueAction, stqueue, system_events, t, txqueue }
     prevEventHash = eventHash;
 
     const addresses = optionsAll.account.map((account): string | null => account.value);
-    const statusses = system_events && system_events
+    const statusses = events && events
       .map(({ event: { data, method, section } }): ActionStatus | null => {
         if (section === 'balances' && method === 'Transfer') {
           const account = data[1].toString();
@@ -70,7 +73,7 @@ function Status ({ optionsAll, queueAction, stqueue, system_events, t, txqueue }
       .filter((item): boolean => !!item) as ActionStatus[];
 
     statusses && statusses.length && queueAction(statusses);
-  }, [system_events]);
+  }, [events]);
 
   return (
     <StatusDisplay
@@ -83,6 +86,5 @@ function Status ({ optionsAll, queueAction, stqueue, system_events, t, txqueue }
 export default withMulti(
   Status,
   translate,
-  withCalls<Props>('query.system.events'),
   withObservable(keyringOption.optionsSubject, { propName: 'optionsAll' })
 );

packages/apps/src/SideBar/Item.tsx

@@ -11,8 +11,7 @@ import React, { useEffect, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import { ApiPromise } from '@polkadot/api';
 import { Badge, Icon, Menu, Tooltip } from '@polkadot/react-components';
-import { withCalls, withMulti } from '@polkadot/react-api';
-import { useAccounts, useApi } from '@polkadot/react-hooks';
+import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 import { isFunction } from '@polkadot/util';
 
 import translate from '../translate';
@@ -23,7 +22,6 @@ interface Props extends I18nProps {
   isCollapsed: boolean;
   onClick: () => void;
   route: Route;
-  sudoKey?: AccountId;
 }
 
 const disabledLog: Map<string, string> = new Map();
@@ -76,9 +74,10 @@ function checkVisible (name: string, { api, isApiReady, isApiConnected }: ApiPro
   return notFound.length === 0;
 }
 
-function Item ({ route: { Modal, useCounter = DUMMY_COUNTER, display, i18n, icon, name }, t, isCollapsed, onClick, sudoKey }: Props): React.ReactElement<Props> | null {
+function Item ({ route: { Modal, useCounter = DUMMY_COUNTER, display, i18n, icon, name }, t, isCollapsed, onClick }: Props): React.ReactElement<Props> | null {
   const { allAccounts, hasAccounts } = useAccounts();
   const apiProps = useApi();
+  const sudoKey = useCall<AccountId>(apiProps.isApiReady ? apiProps.api.query.sudo?.key : undefined, []);
   const [hasSudo, setHasSudo] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
   const count = useCounter();
@@ -143,10 +142,4 @@ function Item ({ route: { Modal, useCounter = DUMMY_COUNTER, display, i18n, icon
   );
 }
 
-export default withMulti(
-  Item,
-  translate,
-  withCalls<Props>(
-    ['query.sudo.key', { propName: 'sudoKey' }]
-  )
-);
+export default translate(Item);

packages/react-api/package.json

@@ -30,8 +30,8 @@
   },
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
-    "@babel/runtime": "^7.7.5",
-    "@polkadot/api": "^0.99.0-beta.16",
+    "@babel/runtime": "^7.7.6",
+    "@polkadot/api": "^0.99.1",
     "@polkadot/extension-dapp": "^0.14.1",
     "edgeware-node-types": "^1.0.10",
     "rxjs-compat": "^6.5.3"

packages/react-api/src/index.ts

@@ -4,14 +4,22 @@
 
 import Api, { api } from './Api';
 import ApiContext from './ApiContext';
+import { withApi, withCalls, withCallDiv, withMulti, withObservable } from './hoc';
+import { clearLedger, getLedger, isLedger, isLedgerCapable } from './ledger';
 import registry from './typeRegistry';
 
-export * from './ledger';
-export * from './with';
-
 export {
   api,
   Api,
   ApiContext,
-  registry
+  registry,
+  withApi,
+  withCalls,
+  withCallDiv,
+  withMulti,
+  withObservable,
+  clearLedger,
+  getLedger,
+  isLedger,
+  isLedgerCapable
 };

packages/react-components/package.json

@@ -10,7 +10,7 @@
   "contributors": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.5",
+    "@babel/runtime": "^7.7.6",
     "@polkadot/keyring": "^1.7.1",
     "@polkadot/react-api": "^0.38.1",
     "@polkadot/react-identicon": "^0.48.0-beta.3",

packages/react-components/src/AddressInfo.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { formatBalance, formatNumber, isObject } from '@polkadot/util';
 import { Icon, Tooltip, TxButton } from '@polkadot/react-components';
-import { withCalls, withMulti } from '@polkadot/react-api';
+import { withCalls, withMulti } from '@polkadot/react-api/hoc';
 import { useAccounts } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 

packages/react-components/src/AddressMini.tsx

@@ -26,7 +26,7 @@ interface Props extends BareProps {
   isShort?: boolean;
   label?: React.ReactNode;
   type?: KeyringItemType;
-  value?: AccountId | AccountIndex | Address | string | null;
+  value?: AccountId | AccountIndex | Address | string | null | Uint8Array;
   withAddress?: boolean;
   withBalance?: boolean;
   withBonded?: boolean;
@@ -51,7 +51,7 @@ function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded
       <div className='ui--AddressMini-icon'>
         <IdentityIcon
           size={24}
-          value={value}
+          value={value as Uint8Array}
         />
         {iconInfo && (
           <div className='ui--AddressMini-icon-info'>
@@ -63,7 +63,7 @@ function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded
         {withAddress && (
           <div className='ui--AddressMini-address'>
             {withName
-              ? <AccountName params={value} />
+              ? <AccountName value={value} />
               : toShortAddress(value)
             }
           </div>

packages/react-components/src/AddressRow.tsx

@@ -11,7 +11,7 @@ import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
 import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
-import { withCalls, withMulti } from '@polkadot/react-api';
+import { withCalls, withMulti } from '@polkadot/react-api/hoc';
 import BaseIdentityIcon from '@polkadot/react-identicon';
 import keyring from '@polkadot/ui-keyring';
 

packages/react-components/src/AddressSmall.tsx

@@ -16,7 +16,7 @@ interface Props {
   onClickName?: () => void;
   overrideName?: React.ReactNode;
   toggle?: any;
-  value?: string | Address | AccountId;
+  value?: string | Address | AccountId | null | Uint8Array;
 }
 
 function AddressSmall ({ className, defaultName, onClickName, overrideName, toggle, value }: Props): React.ReactElement<Props> {
@@ -24,7 +24,7 @@ function AddressSmall ({ className, defaultName, onClickName, overrideName, togg
     <div className={`ui--AddressSmall ${className}`}>
       <IdentityIcon
         size={32}
-        value={value}
+        value={value as Uint8Array}
       />
       <div className='nameInfo'>
         <AccountName
@@ -32,10 +32,10 @@ function AddressSmall ({ className, defaultName, onClickName, overrideName, togg
           defaultName={defaultName}
           override={overrideName}
           onClick={onClickName}
-          params={value}
           toggle={toggle}
+          value={value}
         />
-        <AccountIndex params={value} />
+        <AccountIndex value={value} />
       </div>
     </div>
   );

packages/react-components/src/CodeRow.tsx

@@ -9,7 +9,8 @@ import { CodeStored } from '@polkadot/app-contracts/types';
 import React from 'react';
 import styled from 'styled-components';
 import { createType } from '@polkadot/types';
-import { registry, withMulti } from '@polkadot/react-api';
+import { registry } from '@polkadot/react-api';
+import { withMulti } from '@polkadot/react-api/hoc';
 import { classes, toShortAddress } from '@polkadot/react-components/util';
 import contracts from '@polkadot/app-contracts/store';
 

packages/react-components/src/IdentityIcon.tsx

@@ -2,21 +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 { AccountId } from '@polkadot/types/interfaces';
 import { IdentityProps } from '@polkadot/react-identicon/types';
 import { I18nProps } from './types';
 
 import React, { useContext, useEffect, useState } from 'react';
-import { withCalls, withMulti } from '@polkadot/react-api';
 import { useApi } from '@polkadot/react-hooks';
 import BaseIdentityIcon from '@polkadot/react-identicon';
 import uiSettings from '@polkadot/ui-settings';
+import { ValidatorsContext } from '@polkadot/react-query';
 
 import StatusContext from './Status/Context';
 import translate from './translate';
 
 interface Props extends IdentityProps, I18nProps {
-  validators?: AccountId[];
 }
 
 // overrides based on the actual software node type
@@ -33,24 +31,18 @@ export function getIdentityTheme (systemName: string): 'empty' {
   return ((uiSettings.icon === 'default' && NODES[systemName]) || uiSettings.icon) as 'empty';
 }
 
-function IdentityIcon ({ className, onCopy, prefix, size, style, t, theme, validators, value }: Props): React.ReactElement<Props> {
+function IdentityIcon ({ className, onCopy, prefix, size, style, t, theme, value }: Props): React.ReactElement<Props> {
   const { systemName } = useApi();
   const { queueAction } = useContext(StatusContext);
-  const [address, setAddress] = useState<string | undefined>();
+  const validators = useContext(ValidatorsContext);
   const [isValidator, setIsValidator] = useState(false);
   const thisTheme = theme || getIdentityTheme(systemName);
 
   useEffect((): void => {
-    setAddress(value?.toString());
-  }, [value]);
-
-  useEffect((): void => {
-    setIsValidator(
-      validators
-        ? validators.some((validator): boolean => validator.toString() === address)
-        : false
-    );
-  }, [address, validators]);
+    if (value) {
+      setIsValidator(validators.includes(value.toString()));
+    }
+  }, [value, validators]);
 
   const _onCopy = (account: string): void => {
     onCopy && onCopy(account);
@@ -71,18 +63,9 @@ function IdentityIcon ({ className, onCopy, prefix, size, style, t, theme, valid
       size={size}
       style={style}
       theme={thisTheme as 'substrate'}
-      value={address}
+      value={value?.toString()}
     />
   );
 }
 
-export default withMulti(
-  IdentityIcon,
-  translate,
-  withCalls<Props>(
-    ['derive.staking.validators', {
-      propName: 'validators',
-      transform: ({ validators }): AccountId[] => validators
-    }]
-  )
-);
+export default translate(IdentityIcon);

packages/react-components/src/InputAddress/KeyPair.tsx

@@ -28,7 +28,7 @@ function KeyPair ({ address, className, style }: Props): React.ReactElement<Prop
         value={address}
       />
       <div className='name'>
-        <AccountName params={address} />
+        <AccountName value={address} />
       </div>
       <div className='address'>
         {address}

packages/react-components/src/InputAddress/index.tsx

@@ -9,7 +9,7 @@ import { Option } from './types';
 import React from 'react';
 import store from 'store';
 import styled from 'styled-components';
-import { withMulti, withObservable } from '@polkadot/react-api';
+import { withMulti, withObservable } from '@polkadot/react-api/hoc';
 import keyring from '@polkadot/ui-keyring';
 import keyringOption from '@polkadot/ui-keyring/options';
 import createKeyringItem from '@polkadot/ui-keyring/options/item';

packages/react-components/src/InputBalanceBonded.tsx

@@ -13,7 +13,7 @@ import { BitLengthOption } from '@polkadot/react-components/constants';
 import { calcTxLength } from '@polkadot/react-signer/Checks';
 import { InputNumber } from '@polkadot/react-components';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { withCalls, withMulti, withApi } from '@polkadot/react-api';
+import { withCalls, withMulti, withApi } from '@polkadot/react-api/hoc';
 import { ZERO_BALANCE, ZERO_FEES } from '@polkadot/react-signer/Checks/constants';
 import { bnMax } from '@polkadot/util';
 

packages/react-components/src/TxButton.tsx

@@ -8,7 +8,7 @@ import { TxButtonProps as Props } from './types';
 
 import React from 'react';
 import { SubmittableResult } from '@polkadot/api';
-import { withApi } from '@polkadot/react-api';
+import { withApi } from '@polkadot/react-api/hoc';
 import { assert, isFunction, isUndefined } from '@polkadot/util';
 
 import Button from './Button';

packages/react-components/src/Voting.tsx

@@ -9,7 +9,7 @@ import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 import BN from 'bn.js';
 import React from 'react';
 import keyring from '@polkadot/ui-keyring';
-import { withMulti, withObservable } from '@polkadot/react-api';
+import { withMulti, withObservable } from '@polkadot/react-api/hoc';
 
 import translate from './translate';
 import Button from './Button';

packages/react-components/src/util/toShortAddress.ts

@@ -4,7 +4,7 @@
 
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
 
-export default function toShortAddress (_address?: AccountId | AccountIndex | Address | string | null): string {
+export default function toShortAddress (_address?: AccountId | AccountIndex | Address | string | null | Uint8Array): string {
   const address = (_address || '').toString();
 
   return (address.length > 13)

packages/react-hooks/package.json

@@ -30,6 +30,6 @@
   },
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
-    "@babel/runtime": "^7.7.5"
+    "@babel/runtime": "^7.7.6"
   }
 }

packages/react-hooks/src/useCall.tsx

@@ -6,9 +6,7 @@ import { Codec } from '@polkadot/types/types';
 import { CallOptions, CallParam, CallParams } from './types';
 
 import { useEffect, useRef, useState } from 'react';
-import { isUndefined } from '@polkadot/util';
-
-import { extractParams, transformIdentity } from './util';
+import { isNull, isUndefined } from '@polkadot/util';
 
 interface TrackFnCallback {
   (value: Codec): void;
@@ -31,6 +29,7 @@ interface TrackFn {
 interface Tracker {
   isActive: boolean;
   count: number;
+  paramCount: number;
   serialized: string | null;
   subscriber: TrackFnResult | null;
 }
@@ -39,10 +38,26 @@ interface TrackerRef {
   current: Tracker;
 }
 
+// the default transform, just returns what we have
+function transformIdentity (value: any): any {
+  return value;
+}
+
+// extract the serialized and mapped params, all ready for use in our call
+function extractParams (fn: any, params: any[], paramMap: (params: any[]) => any): [string, CallParams | null] {
+  return [
+    JSON.stringify({ f: fn?.name, p: params }),
+    params.length === 0 || !params.some((param): boolean => isNull(param) || isUndefined(null))
+      ? paramMap(params)
+      : null
+  ];
+}
+
 // unsubscribe and remove from  the tracker
 function unsubscribe (tracker: TrackerRef): void {
+  tracker.current.isActive = false;
+
   if (tracker.current.subscriber) {
-    tracker.current.isActive = false;
     tracker.current.subscriber.then((unsubFn): void => unsubFn());
     tracker.current.subscriber = null;
   }
@@ -55,20 +70,24 @@ function subscribe <T> (tracker: TrackerRef, fn: TrackFn | undefined, params: Ca
   unsubscribe(tracker);
 
   setTimeout((): void => {
-    tracker.current.isActive = true;
-    tracker.current.count = 0;
-    tracker.current.subscriber = fn && (!fn.meta || !fn.meta.type?.isDoubleMap || validParams.length === 2)
+    if (fn && (!fn.meta || !fn.meta.type?.isDoubleMap || validParams.length === 2)) {
+      // swap to acive mode and reset our count
+      tracker.current.isActive = true;
+      tracker.current.count = 0;
+
       // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
       // @ts-ignore We tried to get the typings right, close but no cigar...
-      ? fn(...params, (value: any): void => {
+      tracker.current.subscriber = fn(...params, (value: any): void => {
         // when we don't have an active sub, or single-shot, ignore (we use the isActive flag here
         // since .subscriber may not be set on immeditae callback)
         if (tracker.current.isActive && (!isSingle || !tracker.current.count)) {
           tracker.current.count++;
           setValue(transform(value));
         }
-      })
-      : null;
+      });
+    } else {
+      tracker.current.subscriber = null;
+    }
   }, 0);
 }
 
@@ -78,7 +97,7 @@ function subscribe <T> (tracker: TrackerRef, fn: TrackFn | undefined, params: Ca
 // FIXME The typings here need some serious TLC
 export default function useCall <T> (fn: TrackFn | undefined, params: CallParams, options: CallOptions<T> = {}): T | undefined {
   const [value, setValue] = useState<T | undefined>(options.defaultValue);
-  const tracker = useRef<Tracker>({ isActive: false, count: 0, serialized: null, subscriber: null });
+  const tracker = useRef<Tracker>({ isActive: false, count: 0, paramCount: -1, serialized: null, subscriber: null });
 
   // initial effect, we need an unsubscription
   useEffect((): () => void => {
@@ -89,13 +108,20 @@ export default function useCall <T> (fn: TrackFn | undefined, params: CallParams
 
   // on changes, re-subscribe
   useEffect((): void => {
+    // check if we have a function
     if (fn) {
-      const [serialized, mappedParams] = extractParams(fn, params, options.paramMap || transformIdentity);
+      const validParams = params.filter((param): boolean => !isUndefined(param));
 
-      if (mappedParams && serialized !== tracker.current.serialized) {
-        tracker.current.serialized = serialized;
+      // in the case on unmounting, the params may go empty, cater for this, don't trigger
+      if (validParams.length >= tracker.current.paramCount) {
+        const [serialized, mappedParams] = extractParams(fn, params, options.paramMap || transformIdentity);
 
-        subscribe(tracker, fn, mappedParams, setValue, options);
+        if (mappedParams && serialized !== tracker.current.serialized) {
+          tracker.current.paramCount = validParams.length;
+          tracker.current.serialized = serialized;
+
+          subscribe(tracker, fn, mappedParams, setValue, options);
+        }
       }
     }
   }, [fn, params]);

packages/react-hooks/src/util.ts

@@ -1,25 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-hooks 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 { CallParams } from './types';
-
-import { isNull, isUndefined } from '@polkadot/util';
-
-export const dummyPromise = Promise.resolve((): void => {
-  // we do nothing, this is a noop
-});
-
-export function transformIdentity (value: any): any {
-  return value;
-}
-
-// extract the serialized and mapped params, all ready for use in our call
-export function extractParams (fn: any, params: any[], paramMap: (params: any[]) => any): [string, CallParams | null] {
-  return [
-    JSON.stringify({ f: fn?.name, p: params }),
-    params.length === 0 || !params.some((param): boolean => isNull(param) || isUndefined(null))
-      ? paramMap(params)
-      : null
-  ];
-}

packages/react-query/package.json

@@ -30,6 +30,6 @@
   },
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
-    "@babel/runtime": "^7.7.5"
+    "@babel/runtime": "^7.7.6"
   }
 }

packages/react-query/src/AccountIndex.tsx

@@ -13,12 +13,12 @@ interface Props extends BareProps {
   children?: React.ReactNode;
   defaultValue?: string;
   label?: React.ReactNode;
-  params?: string | AccountId | Address | null;
+  value?: string | AccountId | Address | null | Uint8Array;
 }
 
-export default function AccountIndexDisplay ({ children, className, defaultValue, label, params, style }: Props): React.ReactElement<Props> {
+export default function AccountIndexDisplay ({ children, className, defaultValue, label, style, value }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const info = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [params]);
+  const info = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [value]);
   const [accountIndex, setAccountIndex] = useState<string | null>(null);
 
   useEffect((): void => {

packages/react-query/src/AccountName.tsx

@@ -16,14 +16,14 @@ interface Props extends BareProps {
   label?: React.ReactNode;
   onClick?: () => void;
   override?: React.ReactNode;
-  params?: AccountId | AccountIndex | Address | string | null;
   toggle?: any;
+  value?: AccountId | AccountIndex | Address | string | null | Uint8Array;
   withShort?: boolean;
 }
 
 const nameCache: Map<string, string> = new Map();
 
-function defaultOrAddr (defaultName = '', _address?: AccountId | AccountIndex | Address | string | null, _accountIndex?: AccountIndex | null): string {
+function defaultOrAddr (defaultName = '', _address?: AccountId | AccountIndex | Address | string | null | Uint8Array, _accountIndex?: AccountIndex | null): string {
   const accountId = (_address || '').toString();
   const cached = nameCache.get(accountId);
 
@@ -43,10 +43,10 @@ function defaultOrAddr (defaultName = '', _address?: AccountId | AccountIndex |
   return extracted;
 }
 
-export default function AccountName ({ children, className, defaultName, label, onClick, override, params, style, toggle, withShort }: Props): React.ReactElement<Props> {
+export default function AccountName ({ children, className, defaultName, label, onClick, override, style, toggle, value, withShort }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const info = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [params]);
-  const [name, setName] = useState(defaultOrAddr(defaultName, params));
+  const info = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [value]);
+  const [name, setName] = useState(defaultOrAddr(defaultName, value));
 
   useEffect((): void => {
     const { accountId, accountIndex, nickname } = info || {};
@@ -54,10 +54,10 @@ export default function AccountName ({ children, className, defaultName, label,
     if (nickname) {
       const name = nickname.toUpperCase();
 
-      nameCache.set((params || '').toString(), name);
+      nameCache.set((value || '').toString(), name);
       setName(name);
     } else {
-      setName(defaultOrAddr(defaultName, accountId || params, withShort ? null : accountIndex));
+      setName(defaultOrAddr(defaultName, accountId || value, withShort ? null : accountIndex));
     }
   }, [info, toggle]);
 

packages/react-query/src/Available.tsx

@@ -1,36 +1,33 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/react-query 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 { BareProps, CallProps } from '@polkadot/react-api/types';
+import { BareProps } from '@polkadot/react-api/types';
 import { DerivedBalances } from '@polkadot/api-derive/types';
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import FormatBalance from './FormatBalance';
 
-interface Props extends BareProps, CallProps {
-  balances_all?: DerivedBalances;
+interface Props extends BareProps {
   children?: React.ReactNode;
   label?: React.ReactNode;
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }
 
-function AvailableDisplay ({ balances_all, children, className, label }: Props): React.ReactElement<Props> {
+export default function AvailableDisplay ({ children, className, label, params }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const allBalances = useCall<DerivedBalances>(api.derive.balances.all as any, [params]);
+
   return (
     <FormatBalance
       className={className}
       label={label}
-      value={balances_all && balances_all.availableBalance}
+      value={allBalances?.availableBalance}
     >
       {children}
     </FormatBalance>
   );
 }
-
-export default withCalls<Props>(
-  ['derive.balances.all', { paramName: 'params' }]
-)(AvailableDisplay);

packages/react-query/src/Balance.tsx

@@ -1,37 +1,33 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/react-query 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 { BareProps, CallProps } from '@polkadot/react-api/types';
+import { BareProps } from '@polkadot/react-api/types';
 import { DerivedBalances } from '@polkadot/api-derive/types';
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
 
 import React from 'react';
-
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import FormatBalance from './FormatBalance';
 
-interface Props extends BareProps, CallProps {
+interface Props extends BareProps {
   children?: React.ReactNode;
   label?: React.ReactNode;
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
-  balances_all?: DerivedBalances;
 }
 
-export function BalanceDisplay ({ children, className, label, balances_all }: Props): React.ReactElement<Props> {
+export default function BalanceDisplay ({ children, className, label, params }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const allBalances = useCall<DerivedBalances>(api.derive.balances.all as any, [params]);
+
   return (
     <FormatBalance
       className={className}
       label={label}
-      value={balances_all && balances_all.freeBalance}
+      value={allBalances?.freeBalance}
     >
       {children}
     </FormatBalance>
   );
 }
-
-export default withCalls<Props>(
-  ['derive.balances.all', { paramName: 'params' }]
-)(BalanceDisplay);

packages/react-query/src/BalanceFree.tsx

@@ -1,36 +1,33 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/react-query 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 { BareProps, CallProps } from '@polkadot/react-api/types';
+import { BareProps } from '@polkadot/react-api/types';
 import { DerivedBalances } from '@polkadot/api-derive/types';
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import FormatBalance from './FormatBalance';
 
-interface Props extends BareProps, CallProps {
-  balances_all?: DerivedBalances;
+interface Props extends BareProps {
   children?: React.ReactNode;
   label?: React.ReactNode;
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }
 
-function BalanceFree ({ balances_all, children, className, label }: Props): React.ReactElement<Props> {
+export default function BalanceFree ({ children, className, label, params }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const allBalances = useCall<DerivedBalances>(api.derive.balances.all as any, [params]);
+
   return (
     <FormatBalance
       className={className}
       label={label}
-      value={balances_all?.freeBalance}
+      value={allBalances?.freeBalance}
     >
       {children}
     </FormatBalance>
   );
 }
-
-export default withCalls<Props>(
-  ['derive.balances.all', { paramName: 'params' }]
-)(BalanceFree);

packages/react-query/src/BalanceVoting.tsx

@@ -1,36 +1,33 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/react-query 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 { BareProps, CallProps } from '@polkadot/react-api/types';
+import { BareProps } from '@polkadot/react-api/types';
 import { DerivedBalances } from '@polkadot/api-derive/types';
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import FormatBalance from './FormatBalance';
 
-interface Props extends BareProps, CallProps {
-  balances_all?: DerivedBalances;
+interface Props extends BareProps {
   children?: React.ReactNode;
   label?: React.ReactNode;
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }
 
-function BalanceVoting ({ balances_all, children, className, label }: Props): React.ReactElement<Props> {
+export default function BalanceVoting ({ children, className, label, params }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const allBalances = useCall<DerivedBalances>(api.derive.balances.all as any, [params]);
+
   return (
     <FormatBalance
       className={className}
       label={label}
-      value={balances_all?.votingBalance}
+      value={allBalances?.votingBalance}
     >
       {children}
     </FormatBalance>
   );
 }
-
-export default withCalls<Props>(
-  ['derive.balances.all', { paramName: 'params' }]
-)(BalanceVoting);

packages/react-query/src/BestFinalized.tsx

@@ -1,34 +1,33 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/react-query 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 { BareProps, CallProps } from '@polkadot/react-api/types';
+import { BareProps } from '@polkadot/react-api/types';
 import { BlockNumber } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
 
-interface Props extends BareProps, CallProps {
+interface Props extends BareProps {
   children?: React.ReactNode;
   label?: React.ReactNode;
-  chain_bestNumberFinalized?: BlockNumber;
 }
 
-export function BestFinalized ({ children, className, label, style, chain_bestNumberFinalized }: Props): React.ReactElement<Props> {
+export default function BestFinalized ({ children, className, label, style }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const bestNumberFinalized = useCall<BlockNumber>(api.derive.chain.bestNumberFinalized as any, []);
+
   return (
     <div
       className={className}
       style={style}
     >
       {label || ''}{
-        chain_bestNumberFinalized
-          ? formatNumber(chain_bestNumberFinalized)
+        bestNumberFinalized
+          ? formatNumber(bestNumberFinalized)
           : '-'
       }{children}
     </div>
   );
 }
-
-export default withCalls<Props>('derive.chain.bestNumberFinalized')(BestFinalized);

packages/react-query/src/BestNumber.tsx

@@ -1,34 +1,33 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/react-query 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 { BareProps, CallProps } from '@polkadot/react-api/types';
+import { BareProps } from '@polkadot/react-api/types';
 import { BlockNumber } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
 
-interface Props extends BareProps, CallProps {
+interface Props extends BareProps {
   children?: React.ReactNode;
   label?: React.ReactNode;
-  chain_bestNumber?: BlockNumber;
 }
 
-export function BestNumber ({ children, className, label, style, chain_bestNumber }: Props): React.ReactElement<Props> {
+export default function BestNumber ({ children, className, label, style }: Props): React.ReactElement<Props> {
+  const { api, isApiReady } = useApi();
+  const bestNumber = useCall<BlockNumber>(isApiReady ? api.derive.chain.bestNumber as any : undefined, []);
+
   return (
     <div
       className={className}
       style={style}
     >
       {label || ''}{
-        chain_bestNumber
-          ? formatNumber(chain_bestNumber)
+        bestNumber
+          ? formatNumber(bestNumber)
           : '-'
       }{children}
     </div>
   );
 }
-
-export default withCalls<Props>('derive.chain.bestNumber')(BestNumber);

packages/react-query/src/BlockAuthors.tsx

@@ -23,10 +23,12 @@ const MAX_HEADERS = 25;
 
 const byAuthor: Record<string, string> = {};
 const BlockAuthorsContext: React.Context<Authors> = React.createContext<Authors>({ byAuthor, lastHeaders: [] });
+const ValidatorsContext: React.Context<string[]> = React.createContext<string[]>([]);
 
 function BlockAuthors ({ children }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [state, setState] = useState<Authors>({ byAuthor, lastHeaders: [] });
+  const [validators, setValidators] = useState<string[]>([]);
 
   useEffect((): void => {
     // TODO We should really unsub - but since this should just be used once,
@@ -36,6 +38,12 @@ function BlockAuthors ({ children }: Props): React.ReactElement<Props> {
       let lastBlockAuthors: string[] = [];
       let lastBlockNumber = '';
 
+      // subscribe to all validators
+      api.query.session && api.query.session.validators((validatorIds): void => {
+        setValidators(validatorIds.map((validatorId): string => validatorId.toString()));
+      });
+
+      // subscribe to new headers
       api.derive.chain.subscribeNewHeads((lastHeader): void => {
         if (lastHeader?.number) {
           const blockNumber = lastHeader.number.unwrap();
@@ -69,10 +77,12 @@ function BlockAuthors ({ children }: Props): React.ReactElement<Props> {
   }, []);
 
   return (
-    <BlockAuthorsContext.Provider value={state}>
-      {children}
-    </BlockAuthorsContext.Provider>
+    <ValidatorsContext.Provider value={validators}>
+      <BlockAuthorsContext.Provider value={state}>
+        {children}
+      </BlockAuthorsContext.Provider>
+    </ValidatorsContext.Provider>
   );
 }
 
-export { BlockAuthorsContext, BlockAuthors };
+export { BlockAuthorsContext, BlockAuthors, ValidatorsContext };

packages/react-query/src/Bonded.tsx

@@ -8,7 +8,7 @@ import { AccountId, AccountIndex, Address, StakingLedger } from '@polkadot/types
 
 import React from 'react';
 
-import { withCalls } from '@polkadot/react-api';
+import { withCalls } from '@polkadot/react-api/hoc';
 
 import FormatBalance from './FormatBalance';
 

packages/react-query/src/Chain.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/react-query authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

packages/react-query/src/LockedVote.tsx

@@ -1,35 +1,32 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/react-query 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 { BareProps, CallProps } from '@polkadot/react-api/types';
+import { BareProps } from '@polkadot/react-api/types';
 import { AccountId, AccountIndex, Address, BalanceOf } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import FormatBalance from './FormatBalance';
 
-interface Props extends BareProps, CallProps {
+interface Props extends BareProps {
   children?: React.ReactNode;
   label?: React.ReactNode;
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
-  electionsPhragmen_stakeOf?: BalanceOf;
 }
 
-export function LockedVote ({ children, className, electionsPhragmen_stakeOf, label }: Props): React.ReactElement<Props> {
+export default function LockedVote ({ children, className, label, params }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const stakeOf = useCall<BalanceOf>(api.query.electionsPhragmen.stakeOf, [params]);
+
   return (
     <FormatBalance
       className={className}
       label={label}
-      value={electionsPhragmen_stakeOf}
+      value={stakeOf}
     >
       {children}
     </FormatBalance>
   );
 }
-
-export default withCalls<Props>(
-  ['query.electionsPhragmen.stakeOf', { paramName: 'params' }]
-)(LockedVote);

packages/react-query/src/NodeName.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/react-query authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.

packages/react-query/src/NodeVersion.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/react-query authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.