From 6c58db01876481c1c6fb00ecf66fdf22b7d3cfc3 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 13 Dec 2019 15:55:15 +0100
Subject: [PATCH] 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 +-
 packages/app-123code/src/AccountSelector.tsx  |   2 +-
 packages/app-123code/src/SummaryBar.tsx       |  36 +-
 packages/app-123code/src/index.tsx            |   4 +-
 packages/app-claims/src/index.tsx             |   6 +-
 packages/app-contracts/package.json           |   2 +-
 packages/app-contracts/src/Codes/Upload.tsx   |   2 +-
 .../app-contracts/src/Codes/ValidateCode.tsx  |   2 +-
 packages/app-contracts/src/Contracts/Add.tsx  |   2 +-
 packages/app-contracts/src/Contracts/Call.tsx |   2 +-
 .../src/Contracts/ValidateAddr.tsx            |   2 +-
 .../app-contracts/src/Contracts/index.tsx     |   2 +-
 packages/app-contracts/src/Deploy.tsx         |   2 +-
 packages/app-contracts/src/index.tsx          |   6 +-
 packages/app-council/src/Motions/Propose.tsx  |   3 +-
 .../src/Overview/SubmitCandidacy.tsx          |   2 +-
 packages/app-council/src/Overview/Vote.tsx    |   2 +-
 .../app-council/src/Overview/VoteValue.tsx    |  16 +-
 packages/app-council/src/index.tsx            |   4 +-
 packages/app-dashboard/src/index.tsx          |   4 +-
 .../src/Overview/DispatchQueue.tsx            |  25 +-
 .../app-democracy/src/Overview/Referendum.tsx |  29 +-
 .../app-democracy/src/Overview/Summary.tsx    |  44 +-
 packages/app-democracy/src/index.tsx          |   4 +-
 packages/app-explorer/src/BestHash.tsx        |  18 +-
 .../app-explorer/src/BlockInfo/ByHash.tsx     |  32 +-
 .../app-explorer/src/BlockInfo/ByNumber.tsx   |  16 +-
 packages/app-explorer/src/BlockInfo/index.tsx |  22 +-
 packages/app-explorer/src/SummarySession.tsx  |  22 +-
 packages/app-extrinsics/src/Balance.tsx       |  23 +-
 packages/app-extrinsics/src/Selection.tsx     |   2 +-
 packages/app-generic-asset/src/Assets.tsx     |   2 +-
 packages/app-generic-asset/src/Transfer.tsx   |   2 +-
 packages/app-generic-asset/src/index.tsx      |   4 +-
 packages/app-js/src/index.tsx                 |   2 +-
 .../app-parachains/src/Overview/Parachain.tsx |  33 +-
 .../src/Overview/Parachains.tsx               |  22 +-
 .../app-parachains/src/Overview/Summary.tsx   |  28 +-
 packages/app-parachains/src/index.tsx         |   4 +-
 packages/app-settings/src/index.tsx           |   4 +-
 .../src/Actions/Account/BondExtra.tsx         |   2 +-
 .../Actions/Account/InputValidateAmount.tsx   |  19 +-
 .../Account/InputValidationController.tsx     |  56 +-
 .../Actions/Account/SetControllerAccount.tsx  |   2 +-
 .../Actions/Account/SetRewardDestination.tsx  |   2 +-
 .../src/Actions/Account/Unbond.tsx            |   2 +-
 .../src/Actions/Account/Validate.tsx          |   3 +-
 packages/app-staking/src/Actions/NewStake.tsx |   2 +-
 packages/app-staking/src/index.tsx            |   4 +-
 packages/app-storage/src/Query.tsx            |   4 +-
 packages/app-sudo/src/Sudo.tsx                |   3 +-
 packages/app-sudo/src/index.tsx               |   4 +-
 packages/app-tech-comm/src/index.tsx          |   4 +-
 .../app-treasury/src/Overview/Approve.tsx     |   2 +-
 packages/app-treasury/src/index.tsx           |   4 +-
 packages/apps-routing/package.json            |   2 +-
 packages/apps/src/Apps.tsx                    |  30 +-
 packages/apps/src/Content/Status.tsx          |  16 +-
 packages/apps/src/SideBar/Item.tsx            |  15 +-
 packages/react-api/package.json               |   4 +-
 packages/react-api/src/{with => hoc}/api.tsx  |   0
 packages/react-api/src/{with => hoc}/call.tsx |   0
 .../react-api/src/{with => hoc}/callDiv.tsx   |   0
 packages/react-api/src/{with => hoc}/calls.ts |   0
 packages/react-api/src/{with => hoc}/index.ts |   0
 packages/react-api/src/{with => hoc}/multi.ts |   0
 .../src/{with => hoc}/observable.tsx          |   0
 packages/react-api/src/{with => hoc}/types.ts |   0
 packages/react-api/src/index.ts               |  16 +-
 packages/react-components/package.json        |   2 +-
 packages/react-components/src/AddressInfo.tsx |   2 +-
 packages/react-components/src/AddressMini.tsx |   6 +-
 packages/react-components/src/AddressRow.tsx  |   2 +-
 .../react-components/src/AddressSmall.tsx     |   8 +-
 packages/react-components/src/CodeRow.tsx     |   3 +-
 .../react-components/src/IdentityIcon.tsx     |  35 +-
 .../src/InputAddress/KeyPair.tsx              |   2 +-
 .../src/InputAddress/index.tsx                |   2 +-
 .../src/InputBalanceBonded.tsx                |   2 +-
 packages/react-components/src/TxButton.tsx    |   2 +-
 packages/react-components/src/Voting.tsx      |   2 +-
 .../src/util/toShortAddress.ts                |   2 +-
 packages/react-hooks/package.json             |   2 +-
 packages/react-hooks/src/useCall.tsx          |  56 +-
 packages/react-hooks/src/util.ts              |  25 -
 packages/react-query/package.json             |   2 +-
 packages/react-query/src/AccountIndex.tsx     |   6 +-
 packages/react-query/src/AccountName.tsx      |  14 +-
 packages/react-query/src/Available.tsx        |  19 +-
 packages/react-query/src/Balance.tsx          |  20 +-
 packages/react-query/src/BalanceFree.tsx      |  19 +-
 packages/react-query/src/BalanceVoting.tsx    |  19 +-
 packages/react-query/src/BestFinalized.tsx    |  19 +-
 packages/react-query/src/BestNumber.tsx       |  19 +-
 packages/react-query/src/BlockAuthors.tsx     |  18 +-
 packages/react-query/src/Bonded.tsx           |   2 +-
 packages/react-query/src/Chain.tsx            |   1 -
 packages/react-query/src/LockedVote.tsx       |  19 +-
 packages/react-query/src/NodeName.tsx         |   1 -
 packages/react-query/src/NodeVersion.tsx      |   1 -
 packages/react-query/src/Nonce.tsx            |  27 +-
 packages/react-query/src/TimeNow.tsx          |  31 +-
 packages/react-query/src/TimePeriod.tsx       |  36 +-
 packages/react-query/src/TotalIssuance.tsx    |  24 +-
 packages/react-query/src/index.ts             |   2 +-
 packages/react-signer/src/Checks/Proposal.tsx |  49 +-
 packages/react-signer/src/Checks/Transfer.tsx |  58 +-
 packages/react-signer/src/Checks/index.tsx    |  12 +-
 packages/react-signer/src/Modal.tsx           |   3 +-
 yarn.lock                                     | 506 ++++++++++--------
 110 files changed, 805 insertions(+), 920 deletions(-)
 rename packages/react-api/src/{with => hoc}/api.tsx (100%)
 rename packages/react-api/src/{with => hoc}/call.tsx (100%)
 rename packages/react-api/src/{with => hoc}/callDiv.tsx (100%)
 rename packages/react-api/src/{with => hoc}/calls.ts (100%)
 rename packages/react-api/src/{with => hoc}/index.ts (100%)
 rename packages/react-api/src/{with => hoc}/multi.ts (100%)
 rename packages/react-api/src/{with => hoc}/observable.tsx (100%)
 rename packages/react-api/src/{with => hoc}/types.ts (100%)
 delete mode 100644 packages/react-hooks/src/util.ts

diff --git a/package.json b/package.json
index 95b3cfa0bae..8c230b86a08 100644
--- a/package.json
+++ b/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",
diff --git a/packages/app-123code/src/AccountSelector.tsx b/packages/app-123code/src/AccountSelector.tsx
index 289b60b869c..b20e6b7e5c3 100644
--- a/packages/app-123code/src/AccountSelector.tsx
+++ b/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} />
diff --git a/packages/app-123code/src/SummaryBar.tsx b/packages/app-123code/src/SummaryBar.tsx
index a90ed0cb01d..966d36d733c 100644
--- a/packages/app-123code/src/SummaryBar.tsx
+++ b/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);
diff --git a/packages/app-123code/src/index.tsx b/packages/app-123code/src/index.tsx
index de0de71b2cb..5eeaf233750 100644
--- a/packages/app-123code/src/index.tsx
+++ b/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);
diff --git a/packages/app-claims/src/index.tsx b/packages/app-claims/src/index.tsx
index 164e99b1fad..f18d77163ef 100644
--- a/packages/app-claims/src/index.tsx
+++ b/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
 );
diff --git a/packages/app-contracts/package.json b/packages/app-contracts/package.json
index 6d7e80f9ca5..e36263c9cd0 100644
--- a/packages/app-contracts/package.json
+++ b/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"
   }
 }
diff --git a/packages/app-contracts/src/Codes/Upload.tsx b/packages/app-contracts/src/Codes/Upload.tsx
index 9871836bffb..011f2e746d1 100644
--- a/packages/app-contracts/src/Codes/Upload.tsx
+++ b/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';
 
diff --git a/packages/app-contracts/src/Codes/ValidateCode.tsx b/packages/app-contracts/src/Codes/ValidateCode.tsx
index 15717efdfae..6d143ec9496 100644
--- a/packages/app-contracts/src/Codes/ValidateCode.tsx
+++ b/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';
 
diff --git a/packages/app-contracts/src/Contracts/Add.tsx b/packages/app-contracts/src/Contracts/Add.tsx
index 196e8a61480..df8368a7892 100644
--- a/packages/app-contracts/src/Contracts/Add.tsx
+++ b/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';
 
diff --git a/packages/app-contracts/src/Contracts/Call.tsx b/packages/app-contracts/src/Contracts/Call.tsx
index c53cf6f3dfa..58fbd713c04 100644
--- a/packages/app-contracts/src/Contracts/Call.tsx
+++ b/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';
 
diff --git a/packages/app-contracts/src/Contracts/ValidateAddr.tsx b/packages/app-contracts/src/Contracts/ValidateAddr.tsx
index e977a9f4cc6..b00199b7040 100644
--- a/packages/app-contracts/src/Contracts/ValidateAddr.tsx
+++ b/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';
 
diff --git a/packages/app-contracts/src/Contracts/index.tsx b/packages/app-contracts/src/Contracts/index.tsx
index 934624061a3..b650fc89360 100644
--- a/packages/app-contracts/src/Contracts/index.tsx
+++ b/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';
diff --git a/packages/app-contracts/src/Deploy.tsx b/packages/app-contracts/src/Deploy.tsx
index bbee4ff42c8..3a20f7fb752 100644
--- a/packages/app-contracts/src/Deploy.tsx
+++ b/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';
diff --git a/packages/app-contracts/src/index.tsx b/packages/app-contracts/src/index.tsx
index ad23819c30e..45453c23945 100644
--- a/packages/app-contracts/src/index.tsx
+++ b/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' })
diff --git a/packages/app-council/src/Motions/Propose.tsx b/packages/app-council/src/Motions/Propose.tsx
index ecdd529d51d..25e9f611bf0 100644
--- a/packages/app-council/src/Motions/Propose.tsx
+++ b/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';
diff --git a/packages/app-council/src/Overview/SubmitCandidacy.tsx b/packages/app-council/src/Overview/SubmitCandidacy.tsx
index fcfc5a61047..b172f006e0c 100644
--- a/packages/app-council/src/Overview/SubmitCandidacy.tsx
+++ b/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';
 
diff --git a/packages/app-council/src/Overview/Vote.tsx b/packages/app-council/src/Overview/Vote.tsx
index dc0af7488ee..27110293168 100644
--- a/packages/app-council/src/Overview/Vote.tsx
+++ b/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';
 
diff --git a/packages/app-council/src/Overview/VoteValue.tsx b/packages/app-council/src/Overview/VoteValue.tsx
index b69e32dd337..0904b41b044 100644
--- a/packages/app-council/src/Overview/VoteValue.tsx
+++ b/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);
diff --git a/packages/app-council/src/index.tsx b/packages/app-council/src/index.tsx
index 56253aa3c2f..a89949e7926 100644
--- a/packages/app-council/src/index.tsx
+++ b/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;
     }
diff --git a/packages/app-dashboard/src/index.tsx b/packages/app-dashboard/src/index.tsx
index f2ceef5471f..557a1d21cd0 100644
--- a/packages/app-dashboard/src/index.tsx
+++ b/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;
diff --git a/packages/app-democracy/src/Overview/DispatchQueue.tsx b/packages/app-democracy/src/Overview/DispatchQueue.tsx
index 160a1ea6c5f..3958aa3346e 100644
--- a/packages/app-democracy/src/Overview/DispatchQueue.tsx
+++ b/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>
diff --git a/packages/app-democracy/src/Overview/Referendum.tsx b/packages/app-democracy/src/Overview/Referendum.tsx
index 5e6e62ec0f4..f6e3e08a470 100644
--- a/packages/app-democracy/src/Overview/Referendum.tsx
+++ b/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' }]
-  )
+  `
 );
diff --git a/packages/app-democracy/src/Overview/Summary.tsx b/packages/app-democracy/src/Overview/Summary.tsx
index efb5d427893..5e4b4468f2c 100644
--- a/packages/app-democracy/src/Overview/Summary.tsx
+++ b/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);
diff --git a/packages/app-democracy/src/index.tsx b/packages/app-democracy/src/index.tsx
index 70698aad71c..23452578fca 100644
--- a/packages/app-democracy/src/index.tsx
+++ b/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);
diff --git a/packages/app-explorer/src/BestHash.tsx b/packages/app-explorer/src/BestHash.tsx
index 90fc3fbe472..64d2266610b 100644
--- a/packages/app-explorer/src/BestHash.tsx
+++ b/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);
diff --git a/packages/app-explorer/src/BlockInfo/ByHash.tsx b/packages/app-explorer/src/BlockInfo/ByHash.tsx
index a331882e597..d3050601cf1 100644
--- a/packages/app-explorer/src/BlockInfo/ByHash.tsx
+++ b/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;
     }
-  `)
+  `
 );
diff --git a/packages/app-explorer/src/BlockInfo/ByNumber.tsx b/packages/app-explorer/src/BlockInfo/ByNumber.tsx
index b8a7f90d631..1e70b8106ad 100644
--- a/packages/app-explorer/src/BlockInfo/ByNumber.tsx
+++ b/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);
diff --git a/packages/app-explorer/src/BlockInfo/index.tsx b/packages/app-explorer/src/BlockInfo/index.tsx
index da622c78dcc..e6a4d93bf1d 100644
--- a/packages/app-explorer/src/BlockInfo/index.tsx
+++ b/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);
diff --git a/packages/app-explorer/src/SummarySession.tsx b/packages/app-explorer/src/SummarySession.tsx
index e755d012e16..8095ee0b283 100644
--- a/packages/app-explorer/src/SummarySession.tsx
+++ b/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);
diff --git a/packages/app-extrinsics/src/Balance.tsx b/packages/app-extrinsics/src/Balance.tsx
index 58722abe9e4..e9f2f1908dc 100644
--- a/packages/app-extrinsics/src/Balance.tsx
+++ b/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' }]
-  )
-);
diff --git a/packages/app-extrinsics/src/Selection.tsx b/packages/app-extrinsics/src/Selection.tsx
index 2ab6a3263d2..53b33b4695a 100644
--- a/packages/app-extrinsics/src/Selection.tsx
+++ b/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';
diff --git a/packages/app-generic-asset/src/Assets.tsx b/packages/app-generic-asset/src/Assets.tsx
index febd605d505..a2b5756a550 100644
--- a/packages/app-generic-asset/src/Assets.tsx
+++ b/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';
diff --git a/packages/app-generic-asset/src/Transfer.tsx b/packages/app-generic-asset/src/Transfer.tsx
index ce36b76bacf..7a775372a6f 100644
--- a/packages/app-generic-asset/src/Transfer.tsx
+++ b/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';
diff --git a/packages/app-generic-asset/src/index.tsx b/packages/app-generic-asset/src/index.tsx
index d2741f9e503..e1119210593 100644
--- a/packages/app-generic-asset/src/index.tsx
+++ b/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);
diff --git a/packages/app-js/src/index.tsx b/packages/app-js/src/index.tsx
index 1b7684b3842..5ca79c0dd6e 100644
--- a/packages/app-js/src/index.tsx
+++ b/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} />
diff --git a/packages/app-parachains/src/Overview/Parachain.tsx b/packages/app-parachains/src/Overview/Parachain.tsx
index 2d1dd8647d5..9eed408afb4 100644
--- a/packages/app-parachains/src/Overview/Parachain.tsx
+++ b/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' }]
-  )
+  `
 );
diff --git a/packages/app-parachains/src/Overview/Parachains.tsx b/packages/app-parachains/src/Overview/Parachains.tsx
index bdb346845e5..80035d221af 100644
--- a/packages/app-parachains/src/Overview/Parachains.tsx
+++ b/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);
diff --git a/packages/app-parachains/src/Overview/Summary.tsx b/packages/app-parachains/src/Overview/Summary.tsx
index c4f40060a4a..88e8df30a49 100644
--- a/packages/app-parachains/src/Overview/Summary.tsx
+++ b/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);
diff --git a/packages/app-parachains/src/index.tsx b/packages/app-parachains/src/index.tsx
index 6e1f056db8a..65568a82da4 100644
--- a/packages/app-parachains/src/index.tsx
+++ b/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);
diff --git a/packages/app-settings/src/index.tsx b/packages/app-settings/src/index.tsx
index 6a0c3992f24..4ff3233763b 100644
--- a/packages/app-settings/src/index.tsx
+++ b/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);
diff --git a/packages/app-staking/src/Actions/Account/BondExtra.tsx b/packages/app-staking/src/Actions/Account/BondExtra.tsx
index f8ab68745b1..2e4124f8b68 100644
--- a/packages/app-staking/src/Actions/Account/BondExtra.tsx
+++ b/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';
 
diff --git a/packages/app-staking/src/Actions/Account/InputValidateAmount.tsx b/packages/app-staking/src/Actions/Account/InputValidateAmount.tsx
index 595151cc474..c265ca2c113 100644
--- a/packages/app-staking/src/Actions/Account/InputValidateAmount.tsx
+++ b/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);
diff --git a/packages/app-staking/src/Actions/Account/InputValidationController.tsx b/packages/app-staking/src/Actions/Account/InputValidationController.tsx
index 4b5b5450f63..9201ee3a9e7 100644
--- a/packages/app-staking/src/Actions/Account/InputValidationController.tsx
+++ b/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);
diff --git a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
index 2bd41939c78..2fe88c42ea1 100644
--- a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
+++ b/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';
diff --git a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
index 16c9faa820e..f6edc278dbd 100644
--- a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
+++ b/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';
diff --git a/packages/app-staking/src/Actions/Account/Unbond.tsx b/packages/app-staking/src/Actions/Account/Unbond.tsx
index 0b321b171ba..b82fa87f1f6 100644
--- a/packages/app-staking/src/Actions/Account/Unbond.tsx
+++ b/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';
 
diff --git a/packages/app-staking/src/Actions/Account/Validate.tsx b/packages/app-staking/src/Actions/Account/Validate.tsx
index f6e8137650d..c662dda66ab 100644
--- a/packages/app-staking/src/Actions/Account/Validate.tsx
+++ b/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';
 
diff --git a/packages/app-staking/src/Actions/NewStake.tsx b/packages/app-staking/src/Actions/NewStake.tsx
index 81482ffcee6..ba08f06fe05 100644
--- a/packages/app-staking/src/Actions/NewStake.tsx
+++ b/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';
diff --git a/packages/app-staking/src/index.tsx b/packages/app-staking/src/index.tsx
index c153577a30f..53e16ee6a97 100644
--- a/packages/app-staking/src/index.tsx
+++ b/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;
     }
diff --git a/packages/app-storage/src/Query.tsx b/packages/app-storage/src/Query.tsx
index 01b3f6b7beb..3c198b25ead 100644
--- a/packages/app-storage/src/Query.tsx
+++ b/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';
diff --git a/packages/app-sudo/src/Sudo.tsx b/packages/app-sudo/src/Sudo.tsx
index e20b0fcc0cd..e6695f4e9a8 100644
--- a/packages/app-sudo/src/Sudo.tsx
+++ b/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';
 
diff --git a/packages/app-sudo/src/index.tsx b/packages/app-sudo/src/index.tsx
index 167ecf4ac8e..6f5fa9fbfd3 100644
--- a/packages/app-sudo/src/index.tsx
+++ b/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);
diff --git a/packages/app-tech-comm/src/index.tsx b/packages/app-tech-comm/src/index.tsx
index 77ffb517865..6e7ed419fa4 100644
--- a/packages/app-tech-comm/src/index.tsx
+++ b/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);
diff --git a/packages/app-treasury/src/Overview/Approve.tsx b/packages/app-treasury/src/Overview/Approve.tsx
index c0dae3e8c62..0497d8b6062 100644
--- a/packages/app-treasury/src/Overview/Approve.tsx
+++ b/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';
diff --git a/packages/app-treasury/src/index.tsx b/packages/app-treasury/src/index.tsx
index d1755eb6234..1883d031c56 100644
--- a/packages/app-treasury/src/index.tsx
+++ b/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);
diff --git a/packages/apps-routing/package.json b/packages/apps-routing/package.json
index dc09ac87c38..93a5e469b46 100644
--- a/packages/apps-routing/package.json
+++ b/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"
   }
 }
diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index 1f09ef22875..d315df61376 100644
--- a/packages/apps/src/Apps.tsx
+++ b/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,
diff --git a/packages/apps/src/Content/Status.tsx b/packages/apps/src/Content/Status.tsx
index 7bcd2a0adc4..7b97b431f6c 100644
--- a/packages/apps/src/Content/Status.tsx
+++ b/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' })
 );
diff --git a/packages/apps/src/SideBar/Item.tsx b/packages/apps/src/SideBar/Item.tsx
index 21cf279d699..62d1f790e4e 100644
--- a/packages/apps/src/SideBar/Item.tsx
+++ b/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);
diff --git a/packages/react-api/package.json b/packages/react-api/package.json
index c84e272be55..effe0feadff 100644
--- a/packages/react-api/package.json
+++ b/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"
diff --git a/packages/react-api/src/with/api.tsx b/packages/react-api/src/hoc/api.tsx
similarity index 100%
rename from packages/react-api/src/with/api.tsx
rename to packages/react-api/src/hoc/api.tsx
diff --git a/packages/react-api/src/with/call.tsx b/packages/react-api/src/hoc/call.tsx
similarity index 100%
rename from packages/react-api/src/with/call.tsx
rename to packages/react-api/src/hoc/call.tsx
diff --git a/packages/react-api/src/with/callDiv.tsx b/packages/react-api/src/hoc/callDiv.tsx
similarity index 100%
rename from packages/react-api/src/with/callDiv.tsx
rename to packages/react-api/src/hoc/callDiv.tsx
diff --git a/packages/react-api/src/with/calls.ts b/packages/react-api/src/hoc/calls.ts
similarity index 100%
rename from packages/react-api/src/with/calls.ts
rename to packages/react-api/src/hoc/calls.ts
diff --git a/packages/react-api/src/with/index.ts b/packages/react-api/src/hoc/index.ts
similarity index 100%
rename from packages/react-api/src/with/index.ts
rename to packages/react-api/src/hoc/index.ts
diff --git a/packages/react-api/src/with/multi.ts b/packages/react-api/src/hoc/multi.ts
similarity index 100%
rename from packages/react-api/src/with/multi.ts
rename to packages/react-api/src/hoc/multi.ts
diff --git a/packages/react-api/src/with/observable.tsx b/packages/react-api/src/hoc/observable.tsx
similarity index 100%
rename from packages/react-api/src/with/observable.tsx
rename to packages/react-api/src/hoc/observable.tsx
diff --git a/packages/react-api/src/with/types.ts b/packages/react-api/src/hoc/types.ts
similarity index 100%
rename from packages/react-api/src/with/types.ts
rename to packages/react-api/src/hoc/types.ts
diff --git a/packages/react-api/src/index.ts b/packages/react-api/src/index.ts
index 6477f498674..7ce2dfb4634 100644
--- a/packages/react-api/src/index.ts
+++ b/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
 };
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 2b7bfb6d1bb..91578905be7 100644
--- a/packages/react-components/package.json
+++ b/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",
diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx
index c34b19d858d..08109dcce09 100644
--- a/packages/react-components/src/AddressInfo.tsx
+++ b/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';
 
diff --git a/packages/react-components/src/AddressMini.tsx b/packages/react-components/src/AddressMini.tsx
index 56ea05261d2..7b660a4d440 100644
--- a/packages/react-components/src/AddressMini.tsx
+++ b/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>
diff --git a/packages/react-components/src/AddressRow.tsx b/packages/react-components/src/AddressRow.tsx
index 405b8cf6047..4c0aa6aa5d3 100644
--- a/packages/react-components/src/AddressRow.tsx
+++ b/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';
 
diff --git a/packages/react-components/src/AddressSmall.tsx b/packages/react-components/src/AddressSmall.tsx
index 9ef40e941d1..2dc6480f5b3 100644
--- a/packages/react-components/src/AddressSmall.tsx
+++ b/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>
   );
diff --git a/packages/react-components/src/CodeRow.tsx b/packages/react-components/src/CodeRow.tsx
index 8180278155d..c22fbc26d9e 100644
--- a/packages/react-components/src/CodeRow.tsx
+++ b/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';
 
diff --git a/packages/react-components/src/IdentityIcon.tsx b/packages/react-components/src/IdentityIcon.tsx
index 0986206c8b3..2c1eba93d63 100644
--- a/packages/react-components/src/IdentityIcon.tsx
+++ b/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);
diff --git a/packages/react-components/src/InputAddress/KeyPair.tsx b/packages/react-components/src/InputAddress/KeyPair.tsx
index 088be095322..4a9fda53923 100644
--- a/packages/react-components/src/InputAddress/KeyPair.tsx
+++ b/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}
diff --git a/packages/react-components/src/InputAddress/index.tsx b/packages/react-components/src/InputAddress/index.tsx
index 957d90bb3cf..3df84b8b5db 100644
--- a/packages/react-components/src/InputAddress/index.tsx
+++ b/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';
diff --git a/packages/react-components/src/InputBalanceBonded.tsx b/packages/react-components/src/InputBalanceBonded.tsx
index af6d67eb524..968e70a9970 100644
--- a/packages/react-components/src/InputBalanceBonded.tsx
+++ b/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';
 
diff --git a/packages/react-components/src/TxButton.tsx b/packages/react-components/src/TxButton.tsx
index 1ad614f4d0e..966d9513f08 100644
--- a/packages/react-components/src/TxButton.tsx
+++ b/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';
diff --git a/packages/react-components/src/Voting.tsx b/packages/react-components/src/Voting.tsx
index a8559c45d95..372c322888c 100644
--- a/packages/react-components/src/Voting.tsx
+++ b/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';
diff --git a/packages/react-components/src/util/toShortAddress.ts b/packages/react-components/src/util/toShortAddress.ts
index a54c2b72caa..9f225a59047 100644
--- a/packages/react-components/src/util/toShortAddress.ts
+++ b/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)
diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
index ca35fe7d71d..f2ba68d3f11 100644
--- a/packages/react-hooks/package.json
+++ b/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"
   }
 }
diff --git a/packages/react-hooks/src/useCall.tsx b/packages/react-hooks/src/useCall.tsx
index b750aa9093a..ac74008edaf 100644
--- a/packages/react-hooks/src/useCall.tsx
+++ b/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]);
diff --git a/packages/react-hooks/src/util.ts b/packages/react-hooks/src/util.ts
deleted file mode 100644
index dcf4c924c58..00000000000
--- a/packages/react-hooks/src/util.ts
+++ /dev/null
@@ -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
-  ];
-}
diff --git a/packages/react-query/package.json b/packages/react-query/package.json
index 41c407c5ed5..71e4b73940f 100644
--- a/packages/react-query/package.json
+++ b/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"
   }
 }
diff --git a/packages/react-query/src/AccountIndex.tsx b/packages/react-query/src/AccountIndex.tsx
index 598d9d3ee17..a2a61c305b9 100644
--- a/packages/react-query/src/AccountIndex.tsx
+++ b/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 => {
diff --git a/packages/react-query/src/AccountName.tsx b/packages/react-query/src/AccountName.tsx
index 89f63dcd4c4..e2506889f4e 100644
--- a/packages/react-query/src/AccountName.tsx
+++ b/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]);
 
diff --git a/packages/react-query/src/Available.tsx b/packages/react-query/src/Available.tsx
index 685463c63e0..c450b9e8d0d 100644
--- a/packages/react-query/src/Available.tsx
+++ b/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);
diff --git a/packages/react-query/src/Balance.tsx b/packages/react-query/src/Balance.tsx
index a7a413a3475..c4fc49e5218 100644
--- a/packages/react-query/src/Balance.tsx
+++ b/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);
diff --git a/packages/react-query/src/BalanceFree.tsx b/packages/react-query/src/BalanceFree.tsx
index 6568bf03d9e..4b481be10df 100644
--- a/packages/react-query/src/BalanceFree.tsx
+++ b/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);
diff --git a/packages/react-query/src/BalanceVoting.tsx b/packages/react-query/src/BalanceVoting.tsx
index 733fbaee273..ad0486c543b 100644
--- a/packages/react-query/src/BalanceVoting.tsx
+++ b/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);
diff --git a/packages/react-query/src/BestFinalized.tsx b/packages/react-query/src/BestFinalized.tsx
index 7d3741948e9..e40e6079d8f 100644
--- a/packages/react-query/src/BestFinalized.tsx
+++ b/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);
diff --git a/packages/react-query/src/BestNumber.tsx b/packages/react-query/src/BestNumber.tsx
index 6818cf7b729..09bdfad7227 100644
--- a/packages/react-query/src/BestNumber.tsx
+++ b/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);
diff --git a/packages/react-query/src/BlockAuthors.tsx b/packages/react-query/src/BlockAuthors.tsx
index 9fab38425a9..00101afeede 100644
--- a/packages/react-query/src/BlockAuthors.tsx
+++ b/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 };
diff --git a/packages/react-query/src/Bonded.tsx b/packages/react-query/src/Bonded.tsx
index 1ee4eafd68a..677e66c6f68 100644
--- a/packages/react-query/src/Bonded.tsx
+++ b/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';
 
diff --git a/packages/react-query/src/Chain.tsx b/packages/react-query/src/Chain.tsx
index 97977638269..eba42fa9b6e 100644
--- a/packages/react-query/src/Chain.tsx
+++ b/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.
diff --git a/packages/react-query/src/LockedVote.tsx b/packages/react-query/src/LockedVote.tsx
index 2a514c034f6..fa2dce834d1 100644
--- a/packages/react-query/src/LockedVote.tsx
+++ b/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);
diff --git a/packages/react-query/src/NodeName.tsx b/packages/react-query/src/NodeName.tsx
index ba36fb58873..2a1b586e750 100644
--- a/packages/react-query/src/NodeName.tsx
+++ b/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.
diff --git a/packages/react-query/src/NodeVersion.tsx b/packages/react-query/src/NodeVersion.tsx
index af465d5245c..9b2b3fe7876 100644
--- a/packages/react-query/src/NodeVersion.tsx
+++ b/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.
diff --git a/packages/react-query/src/Nonce.tsx b/packages/react-query/src/Nonce.tsx
index feb35e36ce6..f3ba73b030b 100644
--- a/packages/react-query/src/Nonce.tsx
+++ b/packages/react-query/src/Nonce.tsx
@@ -3,38 +3,27 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedBalances } from '@polkadot/api-derive/types';
-import { BareProps, CallProps } from '@polkadot/react-api/types';
+import { BareProps } from '@polkadot/react-api/types';
 
 import BN from 'bn.js';
 import React from 'react';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
-import { withCalls } from '@polkadot/react-api';
 
-interface Props extends BareProps, CallProps {
-  accountNonce?: BN;
+interface Props extends BareProps {
   callOnResult?: (accountNonce: BN) => void;
   children?: React.ReactNode;
   label?: React.ReactNode;
   params?: string | null;
 }
 
-export function Nonce ({ accountNonce, children, className, label }: Props): React.ReactElement<Props> {
+export default function Nonce ({ children, className, label, params }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const allBalances = useCall<DerivedBalances>(api.derive.balances.all as any, [params]);
+
   return (
     <div className={className}>
-      {label || ''}{
-        accountNonce
-          ? formatNumber(accountNonce)
-          : '0'
-      }{children}
+      {label || ''}{formatNumber(allBalances?.accountNonce)}{children}
     </div>
   );
 }
-
-export default withCalls<Props>(
-  ['derive.balances.all', {
-    paramName: 'params',
-    propName: 'accountNonce',
-    transform: ({ accountNonce }: DerivedBalances): BN =>
-      accountNonce
-  }]
-)(Nonce);
diff --git a/packages/react-query/src/TimeNow.tsx b/packages/react-query/src/TimeNow.tsx
index 3e2c51222a6..3de95dfedd7 100644
--- a/packages/react-query/src/TimeNow.tsx
+++ b/packages/react-query/src/TimeNow.tsx
@@ -1,26 +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 { Moment } from '@polkadot/types/interfaces';
-import { BareProps, CallProps } from '@polkadot/react-api/types';
+import { BareProps } from '@polkadot/react-api/types';
 
-import React from 'react';
-import { withCalls } from '@polkadot/react-api';
+import BN from 'bn.js';
+import React, { useEffect, useState } from 'react';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import Elapsed from './Elapsed';
 
-interface Props extends BareProps, CallProps {
+interface Props extends BareProps {
   children?: React.ReactNode;
   label?: React.ReactNode;
-  timestamp_now?: Moment;
 }
 
-export function TimeNow ({ children, className, isSubstrateV2, label, style, timestamp_now }: Props): React.ReactElement<Props> {
-  const value = isSubstrateV2 || !timestamp_now
-    ? timestamp_now
-    : timestamp_now.muln(1000); // for 1.x, timestamps are in seconds
+export default function TimeNow ({ children, className, label, style }: Props): React.ReactElement<Props> {
+  const { api, isSubstrateV2 } = useApi();
+  const timestamp = useCall<Moment>(api.query.timestamp.now, []);
+  const [now, setNow] = useState<BN | undefined>();
+
+  useEffect((): void => {
+    setNow(
+      isSubstrateV2 || !timestamp
+        ? timestamp
+        : timestamp.muln(1000)
+    );
+  }, [timestamp, isSubstrateV2]);
 
   return (
     <div
@@ -28,10 +35,8 @@ export function TimeNow ({ children, className, isSubstrateV2, label, style, tim
       style={style}
     >
       {label || ''}
-      <Elapsed value={value} />
+      <Elapsed value={now} />
       {children}
     </div>
   );
 }
-
-export default withCalls<Props>('query.timestamp.now')(TimeNow);
diff --git a/packages/react-query/src/TimePeriod.tsx b/packages/react-query/src/TimePeriod.tsx
index 650b674d5f9..67145ef4e00 100644
--- a/packages/react-query/src/TimePeriod.tsx
+++ b/packages/react-query/src/TimePeriod.tsx
@@ -1,49 +1,35 @@
-/* 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 { Moment } from '@polkadot/types/interfaces';
-import { BareProps, CallProps } from '@polkadot/react-api/types';
+import { BareProps } from '@polkadot/react-api/types';
 
 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 {
-  babe_expectedBlockTime?: Moment;
+interface Props extends BareProps {
   children?: React.ReactNode;
   label?: React.ReactNode;
-  timestamp_minimumPeriod?: Moment;
 }
 
-export function TimePeriod ({ babe_expectedBlockTime, children, className, label, style, timestamp_minimumPeriod }: Props): React.ReactElement<Props> {
+export default function TimePeriod ({ children, className, label, style }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const minimumPeriod = api.consts?.timestamp.minimumPeriod || useCall<Moment>(api.query.timestamp.minimumPeriod, []);
+
   return (
     <div
       className={className}
       style={style}
     >
       {label || ''}{
-        babe_expectedBlockTime
-          ? `${formatNumber(babe_expectedBlockTime.toNumber() / 1000)}s`
-          : timestamp_minimumPeriod
-            ? `${formatNumber(timestamp_minimumPeriod.gtn(1000) ? (timestamp_minimumPeriod.toNumber() / 500) : (timestamp_minimumPeriod.toNumber() * 2))}s`
+        api.consts?.babe?.expectedBlockTime
+          ? `${formatNumber(api.consts.babe.expectedBlockTime.toNumber() / 1000)}s`
+          : minimumPeriod
+            ? `${formatNumber(minimumPeriod.gtn(1000) ? (minimumPeriod.toNumber() / 500) : (minimumPeriod.toNumber() * 2))}s`
             : '-'
       }{children}
     </div>
   );
 }
-
-// NOTE we are not combining this into one with a fallback, it becomes slightly tricky.
-// There must be a cleaner way with this logic, but as of now it works on Alex & Kusama
-//  - babe bas the exact value in miliseconds
-//  - non-babe on 2.x has the value in miliseconds (not catered for here)
-//  - anything non-babe, i.e. Aura, needs to be multiplied by 2
-export default withCalls<Props>(
-  // substrate 2.x: consts.babe.expectedBlockTime
-  'consts.babe.expectedBlockTime',
-  // substrate 1.x: 'query.timestamp.blockPeriod'
-  ['consts.timestamp.minimumPeriod', {
-    fallbacks: ['query.timestamp.minimumPeriod']
-  }]
-)(TimePeriod);
diff --git a/packages/react-query/src/TotalIssuance.tsx b/packages/react-query/src/TotalIssuance.tsx
index 9cf3d20a9cc..0d7be5e70f7 100644
--- a/packages/react-query/src/TotalIssuance.tsx
+++ b/packages/react-query/src/TotalIssuance.tsx
@@ -1,25 +1,25 @@
-/* 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 { Balance } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import { withCalls } from '@polkadot/react-api';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatBalance } from '@polkadot/util';
 
-interface Props extends BareProps, CallProps {
+interface Props extends BareProps {
   children?: React.ReactNode;
   label?: React.ReactNode;
-  balances_totalIssuance?: Balance;
 }
 
-export function TotalIssuance ({ children, className, label, style, balances_totalIssuance }: Props): React.ReactElement<Props> {
-  const value = balances_totalIssuance
-    ? balances_totalIssuance.toString()
-    : null;
+export default function TotalIssuance ({ children, className, label, style }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const totalIssuance = useCall<string>(api.query.balances.totalIssuance, [], {
+    transform: (totalIssuance: Balance): string =>
+      totalIssuance?.toString()
+  });
 
   return (
     <div
@@ -27,12 +27,10 @@ export function TotalIssuance ({ children, className, label, style, balances_tot
       style={style}
     >
       {label || ''}{
-        value
-          ? `${formatBalance(value, false)}${formatBalance.calcSi(value).value}`
+        totalIssuance
+          ? `${formatBalance(totalIssuance, false)}${formatBalance.calcSi(totalIssuance).value}`
           : '-'
       }{children}
     </div>
   );
 }
-
-export default withCalls<Props>('query.balances.totalIssuance')(TotalIssuance);
diff --git a/packages/react-query/src/index.ts b/packages/react-query/src/index.ts
index f7c5b7948c1..d2bd2336357 100644
--- a/packages/react-query/src/index.ts
+++ b/packages/react-query/src/index.ts
@@ -8,7 +8,7 @@ export { default as Available } from './Available';
 export { default as Balance } from './Balance';
 export { default as BalanceFree } from './BalanceFree';
 export { default as BalanceVoting } from './BalanceVoting';
-export { BlockAuthors, BlockAuthorsContext } from './BlockAuthors';
+export { BlockAuthors, BlockAuthorsContext, ValidatorsContext } from './BlockAuthors';
 export { default as Bonded } from './Bonded';
 export { default as BestFinalized } from './BestFinalized';
 export { default as BestNumber } from './BestNumber';
diff --git a/packages/react-signer/src/Checks/Proposal.tsx b/packages/react-signer/src/Checks/Proposal.tsx
index f2fac94bc23..cc473293b26 100644
--- a/packages/react-signer/src/Checks/Proposal.tsx
+++ b/packages/react-signer/src/Checks/Proposal.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/react-signer authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
@@ -10,8 +9,8 @@ import { ExtraFees } from './types';
 import BN from 'bn.js';
 import React, { useState, useEffect } from 'react';
 import { Compact, UInt } from '@polkadot/types';
-import { withCalls, withMulti } from '@polkadot/react-api';
 import { Icon } from '@polkadot/react-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatBalance } from '@polkadot/util';
 
 import translate from '../translate';
@@ -29,7 +28,9 @@ interface State extends ExtraFees {
 
 const ZERO = new BN(0);
 
-export function Proposal ({ deposit, democracy_minimumDeposit = ZERO, onChange, t }: Props): React.ReactElement<Props> {
+export function Proposal ({ deposit, onChange, t }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const minDeposit = api.consts.democracy.minimumDeposit || useCall<BN>(api.query.democracy.minimumDeposit, []);
   const [{ extraAmount, isBelowMinimum }, setState] = useState<State>({
     extraFees: ZERO,
     extraAmount: ZERO,
@@ -38,23 +39,25 @@ export function Proposal ({ deposit, democracy_minimumDeposit = ZERO, onChange,
   });
 
   useEffect((): void => {
-    const extraAmount = deposit instanceof Compact
-      ? deposit.toBn()
-      : deposit;
-    const isBelowMinimum = extraAmount.lt(democracy_minimumDeposit);
-    const update = {
-      extraAmount,
-      extraFees: ZERO,
-      extraWarn: isBelowMinimum
-    };
+    if (minDeposit) {
+      const extraAmount = deposit instanceof Compact
+        ? deposit.toBn()
+        : deposit;
+      const isBelowMinimum = extraAmount.lt(minDeposit);
+      const update = {
+        extraAmount,
+        extraFees: ZERO,
+        extraWarn: isBelowMinimum
+      };
 
-    onChange(update);
+      onChange(update);
 
-    setState({
-      ...update,
-      isBelowMinimum
-    });
-  }, [democracy_minimumDeposit]);
+      setState({
+        ...update,
+        isBelowMinimum
+      });
+    }
+  }, [minDeposit]);
 
   return (
     <>
@@ -63,7 +66,7 @@ export function Proposal ({ deposit, democracy_minimumDeposit = ZERO, onChange,
           <Icon name='warning sign' />
           {t('The deposit is below the {{minimum}} minimum required for the proposal to be evaluated', {
             replace: {
-              minimum: formatBalance(democracy_minimumDeposit, { forceUnit: '-' })
+              minimum: formatBalance(minDeposit, { forceUnit: '-' })
             }
           })}
         </div>
@@ -82,10 +85,4 @@ export function Proposal ({ deposit, democracy_minimumDeposit = ZERO, onChange,
   );
 }
 
-export default withMulti(
-  Proposal,
-  translate,
-  withCalls<Props>(
-    ['consts.democracy.minimumDeposit', { fallbacks: ['query.democracy.minimumDeposit'] }]
-  )
-);
+export default translate(Proposal);
diff --git a/packages/react-signer/src/Checks/Transfer.tsx b/packages/react-signer/src/Checks/Transfer.tsx
index ba63174dee0..7325fc6b28e 100644
--- a/packages/react-signer/src/Checks/Transfer.tsx
+++ b/packages/react-signer/src/Checks/Transfer.tsx
@@ -1,27 +1,25 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2019 @polkadot/react-signer 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 { DerivedBalances, DerivedFees } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
+import { AccountId } from '@polkadot/types/interfaces';
 import { ExtraFees } from './types';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import { Compact, UInt } from '@polkadot/types';
-import { withCalls, withMulti } from '@polkadot/react-api';
 import { Icon } from '@polkadot/react-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatBalance } from '@polkadot/util';
 
 import translate from '../translate';
-import { ZERO_BALANCE } from './constants';
 
 interface Props extends I18nProps {
   amount: BN | Compact<UInt>;
   fees: DerivedFees;
-  balances_all?: DerivedBalances;
-  recipientId: string;
+  recipientId: string | AccountId;
   onChange: (fees: ExtraFees) => void;
 }
 
@@ -30,7 +28,9 @@ interface State extends ExtraFees {
   isNoEffect: boolean;
 }
 
-export function Transfer ({ amount, balances_all = ZERO_BALANCE, fees, onChange, t }: Props): React.ReactElement<Props> {
+export function Transfer ({ amount, fees, onChange, recipientId, t }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const allBalances = useCall<DerivedBalances>(api.derive.balances.all as any, [recipientId]);
   const [{ isCreation, isNoEffect }, setState] = useState<State>({
     extraFees: new BN(0),
     extraAmount: new BN(0),
@@ -40,30 +40,28 @@ export function Transfer ({ amount, balances_all = ZERO_BALANCE, fees, onChange,
   });
 
   useEffect((): void => {
-    let extraFees = new BN(fees.transferFee);
+    if (allBalances) {
+      let extraFees = new BN(fees.transferFee);
 
-    if (balances_all.votingBalance.isZero()) {
-      extraFees = extraFees.add(fees.creationFee);
-    }
+      if (allBalances.votingBalance.isZero()) {
+        extraFees = extraFees.add(fees.creationFee);
+      }
 
-    const extraAmount = amount instanceof Compact ? amount.unwrap() : new BN(amount);
-    const isCreation = balances_all.votingBalance.isZero() && fees.creationFee.gtn(0);
-    const isNoEffect = extraAmount.add(balances_all.votingBalance).lt(fees.existentialDeposit);
-    const extraWarn = isCreation || isNoEffect;
-    const update = {
-      extraAmount,
-      extraFees,
-      extraWarn
-    };
+      const extraAmount = amount instanceof Compact ? amount.unwrap() : new BN(amount);
+      const isCreation = allBalances.votingBalance.isZero() && fees.creationFee.gtn(0);
+      const isNoEffect = extraAmount.add(allBalances.votingBalance).lt(fees.existentialDeposit);
+      const extraWarn = isCreation || isNoEffect;
+      const update = { extraAmount, extraFees, extraWarn };
 
-    onChange(update);
+      onChange(update);
 
-    setState({
-      ...update,
-      isCreation,
-      isNoEffect
-    });
-  }, [amount, balances_all, fees]);
+      setState({
+        ...update,
+        isCreation,
+        isNoEffect
+      });
+    }
+  }, [amount, allBalances, fees]);
 
   return (
     <>
@@ -91,10 +89,4 @@ export function Transfer ({ amount, balances_all = ZERO_BALANCE, fees, onChange,
   );
 }
 
-export default withMulti(
-  Transfer,
-  translate,
-  withCalls<Props>(
-    ['derive.balances.all', { paramName: 'recipientId' }]
-  )
-);
+export default translate(Transfer);
diff --git a/packages/react-signer/src/Checks/index.tsx b/packages/react-signer/src/Checks/index.tsx
index 72145ec535d..86abdf36f28 100644
--- a/packages/react-signer/src/Checks/index.tsx
+++ b/packages/react-signer/src/Checks/index.tsx
@@ -6,13 +6,13 @@
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { I18nProps } from '@polkadot/react-components/types';
 import { DerivedFees, DerivedBalances, DerivedContractFees } from '@polkadot/api-derive/types';
+import { AccountId } from '@polkadot/types/interfaces';
 import { IExtrinsic } from '@polkadot/types/types';
 import { ExtraFees } from './types';
 
 import BN from 'bn.js';
 import React, { useState, useEffect } from 'react';
 import { Compact, UInt } from '@polkadot/types';
-// import { withCalls } from '@polkadot/react-api';
 import { Icon } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { compactToU8a, formatBalance } from '@polkadot/util';
@@ -185,15 +185,15 @@ export function FeeDisplay ({ accountId, balances_all = ZERO_BALANCE, balances_f
         <>
           {(extSection === 'balances' && extMethod === 'transfer') && (
             <Transfer
-              amount={extrinsic.args[1]}
+              amount={extrinsic.args[1] as Compact<UInt>}
               fees={balances_fees}
-              recipientId={extrinsic.args[0]}
+              recipientId={extrinsic.args[0] as AccountId}
               onChange={setExtra}
             />
           )}
           {(extSection === 'democracy' && extMethod === 'propose') && (
             <Proposal
-              deposit={extrinsic.args[1]}
+              deposit={extrinsic.args[1] as Compact<UInt>}
               fees={balances_fees}
               onChange={setExtra}
             />
@@ -202,14 +202,14 @@ export function FeeDisplay ({ accountId, balances_all = ZERO_BALANCE, balances_f
             <>
               {(extMethod === 'call') && (
                 <ContractCall
-                  endowment={extrinsic.args[1] as unknown as Compact<UInt>}
+                  endowment={extrinsic.args[1] as Compact<UInt>}
                   fees={contract_fees}
                   onChange={setExtra}
                 />
               )}
               {(extMethod === 'create') && (
                 <ContractDeploy
-                  endowment={extrinsic.args[0] as unknown as Compact<UInt>}
+                  endowment={extrinsic.args[0] as Compact<UInt>}
                   fees={contract_fees}
                   onChange={setExtra}
                 />
diff --git a/packages/react-signer/src/Modal.tsx b/packages/react-signer/src/Modal.tsx
index c623adebfa0..bd40ffb25f3 100644
--- a/packages/react-signer/src/Modal.tsx
+++ b/packages/react-signer/src/Modal.tsx
@@ -18,7 +18,8 @@ import { SubmittableResult } from '@polkadot/api';
 import { web3FromSource } from '@polkadot/extension-dapp';
 import { createType } from '@polkadot/types';
 import { Button, InputBalance, Modal, Toggle, ErrorBoundary } from '@polkadot/react-components';
-import { registry, withApi, withMulti, withObservable } from '@polkadot/react-api';
+import { registry } from '@polkadot/react-api';
+import { withApi, withMulti, withObservable } from '@polkadot/react-api/hoc';
 import keyring from '@polkadot/ui-keyring';
 import { assert, isFunction } from '@polkadot/util';
 import { format } from '@polkadot/util/logger';
diff --git a/yarn.lock b/yarn.lock
index f3dc87d9634..db4b7ddf4fc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -666,7 +666,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-runtime@^7.4.0", "@babel/plugin-transform-runtime@^7.7.5":
+"@babel/plugin-transform-runtime@^7.4.0", "@babel/plugin-transform-runtime@^7.7.6":
   version "7.7.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.7.6.tgz#4f2b548c88922fb98ec1c242afd4733ee3e12f61"
   integrity sha512-tajQY+YmXR7JjTwRvwL4HePqoL3DYxpYXIHKVvrOIvJmeHe2y1w4tz5qz9ObUDC9m76rCzIMPyn4eERuwA4a4A==
@@ -787,7 +787,7 @@
     js-levenshtein "^1.1.3"
     semver "^5.3.0"
 
-"@babel/preset-env@^7.7.5":
+"@babel/preset-env@^7.7.6":
   version "7.7.6"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.6.tgz#39ac600427bbb94eec6b27953f1dfa1d64d457b2"
   integrity sha512-k5hO17iF/Q7tR9Jv8PdNBZWYW6RofxhnxKjBMc0nG4JTaWvOTiPoO/RLFwAKcA4FpmuBFm6jkoqaRJLGi0zdaQ==
@@ -882,7 +882,7 @@
     core-js "^2.6.5"
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.5":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.5", "@babel/runtime@^7.7.6":
   version "7.7.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.6.tgz#d18c511121aff1b4f2cd1d452f1bac9601dd830f"
   integrity sha512-BWAJxpNVa0QlE5gZdWjSxXtemZyZ9RmrmVozxt3NUXeZhVIJ5ANyqmMc0JDrivBZyxUuQvFxlvH4OWWOogGfUw==
@@ -2044,55 +2044,55 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@polkadot/api-contract@^0.99.0-beta.16":
-  version "0.99.0-beta.16"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.99.0-beta.16.tgz#eff01e21bb8b24dcdd70e0491648c5a24c1ccbdd"
-  integrity sha512-NVgAFBoyi3mwG6JpJLTtTEICje4ReMMT4F0nUz8tatsHhBmQvIMDfdF42fWg0MKizPui2JGkc55On5ABYmf/Bg==
+"@polkadot/api-contract@^0.99.1":
+  version "0.99.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.99.1.tgz#a264f2250731aaa00038dca0738ddb43fbbd70b9"
+  integrity sha512-lJs2i+4tkRG1Ko5a8yEw6/HO1KQ9EM4j0tiHsY1DZzQSujpOpPMB2ekaE27CiDIgKLMBUlEzzBWYh9m059tpSg==
   dependencies:
-    "@babel/runtime" "^7.7.5"
-    "@polkadot/types" "^0.99.0-beta.16"
+    "@babel/runtime" "^7.7.6"
+    "@polkadot/types" "^0.99.1"
 
-"@polkadot/api-derive@^0.99.0-beta.16":
-  version "0.99.0-beta.16"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.99.0-beta.16.tgz#e0d7a2f6acfd47c399b3d040ec4661ebb02e8319"
-  integrity sha512-sg7gRfIAuf1HIjyUn1O7sfPoGpMwfaOm8sObjTFJmZT2vaqFQhyhvhejHcQZkQhRKP52tX+dxDmW/BcMf+9nyg==
+"@polkadot/api-derive@^0.99.1":
+  version "0.99.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.99.1.tgz#dd494360707a897bd445a99199aa6d85c863e503"
+  integrity sha512-Zqg8jc9vLcfmgNdMip6Z25+0vM+OdhMR7TnXd+iDOOE65cT8pJ+MOVTrDYFgWSYjNLFbBhraXW46U9DPJA+UEw==
   dependencies:
-    "@babel/runtime" "^7.7.5"
-    "@polkadot/api" "^0.99.0-beta.16"
-    "@polkadot/types" "^0.99.0-beta.16"
+    "@babel/runtime" "^7.7.6"
+    "@polkadot/api" "^0.99.1"
+    "@polkadot/types" "^0.99.1"
 
-"@polkadot/api@^0.99.0-beta.16":
-  version "0.99.0-beta.16"
-  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.99.0-beta.16.tgz#fbb2ae5fa82ae4b53d2769a74c9a81448e5c5d35"
-  integrity sha512-43vU3gObyv8vzSiTUxXzXH/JAsiItNmNwaF6o7wuTnIGcVy+f/Lj8BuwKLt3AC3LwbakxDMEdZHGVfiJ8lJuaA==
+"@polkadot/api@^0.99.1":
+  version "0.99.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.99.1.tgz#ff5fa4dc3600060d73f20d1d7261bccc502bc6e0"
+  integrity sha512-pVTGcj2CpO7cuh5sGUs7aRvmBQVQxTawAVXaQNP4pcAwJcmqxWIYXtxCpvBm1gUMctMJ7N/fcO75M6csQ/zrOg==
   dependencies:
-    "@babel/runtime" "^7.7.5"
-    "@polkadot/api-derive" "^0.99.0-beta.16"
+    "@babel/runtime" "^7.7.6"
+    "@polkadot/api-derive" "^0.99.1"
     "@polkadot/keyring" "^1.7.1"
-    "@polkadot/metadata" "^0.99.0-beta.16"
-    "@polkadot/rpc-core" "^0.99.0-beta.16"
-    "@polkadot/rpc-provider" "^0.99.0-beta.16"
-    "@polkadot/types" "^0.99.0-beta.16"
+    "@polkadot/metadata" "^0.99.1"
+    "@polkadot/rpc-core" "^0.99.1"
+    "@polkadot/rpc-provider" "^0.99.1"
+    "@polkadot/types" "^0.99.1"
     "@polkadot/util-crypto" "^1.7.1"
 
-"@polkadot/dev-react@^0.32.0-beta.17":
-  version "0.32.0-beta.17"
-  resolved "https://registry.yarnpkg.com/@polkadot/dev-react/-/dev-react-0.32.0-beta.17.tgz#7288fcc106d2d602f8a96093189aa75ff0ae4c9a"
-  integrity sha512-BzsidfCNZfU+uIrADQYn4yCs5owbBkH8J3xcrPW6afUI6UKV7rR8nraowvZ7EcXP2v7Z932aPLijaUp/6lX/0Q==
+"@polkadot/dev-react@^0.32.0-beta.19":
+  version "0.32.0-beta.19"
+  resolved "https://registry.yarnpkg.com/@polkadot/dev-react/-/dev-react-0.32.0-beta.19.tgz#42cb2ecdc1ee3e89c40b62d5e4f91166239a6296"
+  integrity sha512-8eVRDIc4+pcdrSUyn6dkqAjTp3fh/10pfWOfZREZS4mrWOPpT/6FiyZrwJu/fcjVFWgm3R3cKZIVsaoE5Jvjzw==
   dependencies:
     "@babel/core" "^7.7.5"
     "@babel/plugin-syntax-dynamic-import" "^7.2.0"
     "@babel/preset-react" "^7.7.0"
-    "@polkadot/dev" "^0.32.0-beta.17"
-    "@types/react" "^16.9.15"
+    "@polkadot/dev" "^0.32.0-beta.19"
+    "@types/react" "^16.9.16"
     "@types/react-dom" "^16.9.4"
-    "@types/react-native" "^0.60.24"
-    "@types/styled-components" "^4.4.0"
+    "@types/react-native" "^0.60.25"
+    "@types/styled-components" "^4.4.1"
     babel-loader "^8.0.6"
     babel-plugin-styled-components "^1.10.6"
     browserslist "^4.8.2"
-    copy-webpack-plugin "^5.0.5"
-    css-loader "^3.2.1"
+    copy-webpack-plugin "^5.1.1"
+    css-loader "^3.3.2"
     enzyme "^3.10.0"
     enzyme-adapter-react-16 "^1.15.1"
     eslint-plugin-react "^7.17.0"
@@ -2113,10 +2113,10 @@
     webpack-serve "^3.2.0"
     worker-loader "^2.0.0"
 
-"@polkadot/dev@^0.32.0-beta.17":
-  version "0.32.0-beta.17"
-  resolved "https://registry.yarnpkg.com/@polkadot/dev/-/dev-0.32.0-beta.17.tgz#15a5eba6dade2a109db450641d010524c16c34a4"
-  integrity sha512-F9QwipTz2bTlJH5FvbJCibeHwK5SYAm6IA3VJgjCgrzljqF2hghG8hblhV2WlZsJE5uDDimq1PwIc6HJmEP7jQ==
+"@polkadot/dev@^0.32.0-beta.19":
+  version "0.32.0-beta.19"
+  resolved "https://registry.yarnpkg.com/@polkadot/dev/-/dev-0.32.0-beta.19.tgz#9f4e9a78a559f4e050842a6a06365d16d7003188"
+  integrity sha512-Ozftw1CLtu/K4c8039/b2qBvvrLDSA8GsZi9MdwN0t17AuGmkWruiZ8apd3M4Cqfc7q7NbiwGfOvCdk/7tpTfw==
   dependencies:
     "@babel/cli" "^7.7.5"
     "@babel/core" "^7.7.5"
@@ -2126,15 +2126,15 @@
     "@babel/plugin-proposal-object-rest-spread" "^7.7.4"
     "@babel/plugin-proposal-optional-chaining" "^7.7.5"
     "@babel/plugin-proposal-pipeline-operator" "^7.7.4"
-    "@babel/plugin-transform-runtime" "^7.7.5"
-    "@babel/preset-env" "^7.7.5"
+    "@babel/plugin-transform-runtime" "^7.7.6"
+    "@babel/preset-env" "^7.7.6"
     "@babel/preset-typescript" "^7.7.4"
     "@babel/register" "^7.7.4"
-    "@babel/runtime" "^7.7.5"
+    "@babel/runtime" "^7.7.6"
     "@types/jest" "^24.0.23"
-    "@types/node" "^12.12.14"
-    "@typescript-eslint/eslint-plugin" "2.10.0"
-    "@typescript-eslint/parser" "2.10.0"
+    "@types/node" "^12.12.17"
+    "@typescript-eslint/eslint-plugin" "2.11.0"
+    "@typescript-eslint/parser" "2.11.0"
     babel-core "^7.0.0-bridge.0"
     babel-jest "^24.9.0"
     babel-plugin-module-resolver "^3.2.0"
@@ -2144,7 +2144,7 @@
     eslint "^6.7.2"
     eslint-config-semistandard "^15.0.0"
     eslint-config-standard "^14.1.0"
-    eslint-plugin-import "^2.18.2"
+    eslint-plugin-import "^2.19.1"
     eslint-plugin-node "^10.0.0"
     eslint-plugin-promise "^4.2.1"
     eslint-plugin-standard "^4.0.1"
@@ -2156,7 +2156,7 @@
     madge "^3.6.0"
     mkdirp "^0.5.1"
     rimraf "^3.0.0"
-    typedoc "^0.15.3"
+    typedoc "^0.15.4"
     typedoc-plugin-markdown "^2.2.14"
     typedoc-plugin-no-inherit "^1.1.10"
     typescript "^3.7.3"
@@ -2177,12 +2177,12 @@
   dependencies:
     "@babel/runtime" "^7.7.5"
 
-"@polkadot/jsonrpc@^0.99.0-beta.16":
-  version "0.99.0-beta.16"
-  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.99.0-beta.16.tgz#13e1c7236434d4e321686db5433220af4e71c3b5"
-  integrity sha512-z3mvLmolv4chaf3TRlLeDTgZFU8YtSBV62A6y9B/N4M0a4cDtlL/minO9H2qnJwRD7uISqDXtEozrizR5f9OVw==
+"@polkadot/jsonrpc@^0.99.1":
+  version "0.99.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.99.1.tgz#15c35a5c4f0796f7347099c288d806ec215e602f"
+  integrity sha512-IviosdZUm5kA92+FCBf2LYhEdGZnTt5owuyZfVEDV+2HEXr3zivSyBtZkBhmH6Qn5W5Je/sVM8VJ+6pC8ShozA==
   dependencies:
-    "@babel/runtime" "^7.7.5"
+    "@babel/runtime" "^7.7.6"
 
 "@polkadot/keyring@^1.7.1":
   version "1.7.1"
@@ -2193,13 +2193,13 @@
     "@polkadot/util" "^1.7.1"
     "@polkadot/util-crypto" "^1.7.1"
 
-"@polkadot/metadata@^0.99.0-beta.16":
-  version "0.99.0-beta.16"
-  resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-0.99.0-beta.16.tgz#23421f67dc4a526ced76d746a4227503e3cb0246"
-  integrity sha512-XPXzcvsU58MEouUC8PnGrryAl31EQMHqWmLlHUyREDCZ8MUZgw+ivplHwf5Ar2bnZvLHYKghmVFcyB6F/4NFzQ==
+"@polkadot/metadata@^0.99.1":
+  version "0.99.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-0.99.1.tgz#26ee6478729a518eb6dd13ac23241d1fcd7d67f8"
+  integrity sha512-GJBkFCviIz/yev30gYLrCDLX7OG7goD0O+HWD9rIFe88J0OhmGL+ULu+xPVNSD+jzvBOPZ3FpxN4p60C5XFoVg==
   dependencies:
-    "@babel/runtime" "^7.7.5"
-    "@polkadot/types" "^0.99.0-beta.16"
+    "@babel/runtime" "^7.7.6"
+    "@polkadot/types" "^0.99.1"
     "@polkadot/util" "^1.7.1"
     "@polkadot/util-crypto" "^1.7.1"
 
@@ -2228,25 +2228,25 @@
     qrcode-generator "^1.4.4"
     react-qr-reader "^2.2.1"
 
-"@polkadot/rpc-core@^0.99.0-beta.16":
-  version "0.99.0-beta.16"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.99.0-beta.16.tgz#ceb6a4d54b3c8c660ff685cba2e55d7f27984ed8"
-  integrity sha512-HZQjZfGVWMcFZRgIOuIf5p/qKKCp3D+MqQzBWYGpTIUzmDMiQDPnYvQt/zKokXbV7MrCIMJtq06c0izTmWMsQw==
+"@polkadot/rpc-core@^0.99.1":
+  version "0.99.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.99.1.tgz#a46ba29200128d099f5d11d4fee10ed7d739b3ac"
+  integrity sha512-P0Bq2ehef38Mv69WxL3FkTvlw4QlGABf7fBrPhuZDLywNHoKrOkLHW1bBoRN7nk94IodFxpV0k6GksBahZFj7g==
   dependencies:
-    "@babel/runtime" "^7.7.5"
-    "@polkadot/jsonrpc" "^0.99.0-beta.16"
-    "@polkadot/rpc-provider" "^0.99.0-beta.16"
-    "@polkadot/types" "^0.99.0-beta.16"
+    "@babel/runtime" "^7.7.6"
+    "@polkadot/jsonrpc" "^0.99.1"
+    "@polkadot/rpc-provider" "^0.99.1"
+    "@polkadot/types" "^0.99.1"
     "@polkadot/util" "^1.7.1"
     rxjs "^6.5.3"
 
-"@polkadot/rpc-provider@^0.99.0-beta.16":
-  version "0.99.0-beta.16"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.99.0-beta.16.tgz#948ab9ef630b8ffccae00c10aea0398ce6ff4f30"
-  integrity sha512-/m0zeNEZEyLMtU6gVaffOGWBCLkcZpeXda+kVSFaJqTghrUz4MPuiH2TsC80BK02Lpz0K4w3VA9s+H2wrJOOcA==
+"@polkadot/rpc-provider@^0.99.1":
+  version "0.99.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.99.1.tgz#510a4235e031d59c3c5ae9dc113be5901aaf43c9"
+  integrity sha512-VFVSPjurw3aWYceaeYZUlkRMaaXWQ2Es8K9Xz7CsCiJf1+4uTKLeLseD3isfsL56RGpgdtZ1zgFUIexDSOxDAQ==
   dependencies:
-    "@babel/runtime" "^7.7.5"
-    "@polkadot/metadata" "^0.99.0-beta.16"
+    "@babel/runtime" "^7.7.6"
+    "@polkadot/metadata" "^0.99.1"
     "@polkadot/util" "^1.7.1"
     "@polkadot/util-crypto" "^1.7.1"
     eventemitter3 "^4.0.0"
@@ -2260,13 +2260,13 @@
   dependencies:
     "@types/chrome" "^0.0.91"
 
-"@polkadot/types@^0.99.0-beta.16":
-  version "0.99.0-beta.16"
-  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.99.0-beta.16.tgz#d6bc5d5d293564e8bb1fa6d7041f7aaeb466fbe2"
-  integrity sha512-XkAWdD+STV0TDoDWYwkDmdDhSLeHbk8yySYtQGUP2EpzkxC3NWfWKHEEbxLe4qWK6zzBlF9kw5XUywvf5+CnJw==
+"@polkadot/types@^0.99.1":
+  version "0.99.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.99.1.tgz#a14f2d38f82e2e4cfd042922df5d70a7f78d86c5"
+  integrity sha512-iuN+GNS9bd3h+9/EodFPtzm6a+jzoLVpDbmxfDnEiyGrzf2JfQK08P/5v1H+9cCmNbcK8fP9LQdG4vBWvJPDmw==
   dependencies:
-    "@babel/runtime" "^7.7.5"
-    "@polkadot/metadata" "^0.99.0-beta.16"
+    "@babel/runtime" "^7.7.6"
+    "@polkadot/metadata" "^0.99.1"
     "@polkadot/util" "^1.7.1"
     "@polkadot/util-crypto" "^1.7.1"
     "@types/memoizee" "^0.4.3"
@@ -2393,9 +2393,9 @@
     "@types/babel__traverse" "*"
 
 "@types/babel__generator@*":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.0.tgz#f1ec1c104d1bb463556ecb724018ab788d0c172a"
-  integrity sha512-c1mZUu4up5cp9KROs/QAw0gTeHrw/x7m52LcnvMxxOZ03DmLwPV0MlGmlgzV3cnSdjhJOZsj7E7FHeioai+egw==
+  version "7.6.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.1.tgz#4901767b397e8711aeb99df8d396d7ba7b7f0e04"
+  integrity sha512-bBKm+2VPJcMRVwNhxKu8W+5/zT7pwNEqeokFOmbvVSqGzFneNxYcEBro9Ac7/N9tlsaPYnZLK8J1LWKkMsLAew==
   dependencies:
     "@babel/types" "^7.0.0"
 
@@ -2436,9 +2436,9 @@
     base-x "^3.0.6"
 
 "@types/chart.js@^2.8.10":
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.9.4.tgz#19d12fae10536e7a2a6ea768c7a3811c626ca455"
-  integrity sha512-uKF7vOdTTAfrsKREKG4oojDqE/dQ5GkwdMRQGfk19aKmeC4wIF6eTWdN98PA8d+F4TPI8hy7oOTB6/JoWepEJw==
+  version "2.9.5"
+  resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.9.5.tgz#41c9997a59b6da2b23acdf4e8d73270bb9730d4e"
+  integrity sha512-pTqoAQkXw7mY+1Po1ziICPPKjEriO8AKrcLBJ3bf45h7SF22bWZ+Jm+4ogPg2W6Y+73CspersFGysHlAw3cm2A==
 
 "@types/chrome@^0.0.91":
   version "0.0.91"
@@ -2507,6 +2507,14 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a"
   integrity sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw==
 
+"@types/hoist-non-react-statics@*":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/i18next@^13.0.0":
   version "13.0.0"
   resolved "https://registry.yarnpkg.com/@types/i18next/-/i18next-13.0.0.tgz#403ef338add0104e74d9759f1b39217e7c5d4084"
@@ -2594,10 +2602,10 @@
   dependencies:
     "@types/node" "*"
 
-"@types/node@*", "@types/node@>= 8", "@types/node@^12.12.14":
-  version "12.12.14"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.14.tgz#1c1d6e3c75dba466e0326948d56e8bd72a1903d2"
-  integrity sha512-u/SJDyXwuihpwjXy7hOOghagLEV1KdAST6syfnOk6QZAMzZuWZqXy5aYYZbh8Jdpd4escVFP0MvftHNDb9pruA==
+"@types/node@*", "@types/node@>= 8", "@types/node@^12.12.17":
+  version "12.12.17"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.17.tgz#191b71e7f4c325ee0fb23bc4a996477d92b8c39b"
+  integrity sha512-Is+l3mcHvs47sKy+afn2O1rV4ldZFU7W8101cNlOd+MRbjM4Onida8jSZnJdTe/0Pcf25g9BNIUsuugmE6puHA==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
@@ -2640,10 +2648,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-native@*", "@types/react-native@^0.60.24":
-  version "0.60.24"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.24.tgz#0648aff3a910f29b8a892cecd0ec3199697bd31f"
-  integrity sha512-wI4C39mrEWpnx2JHCGsDKKcB22CNCKUWjLO6Mwt2yzgKD7crawuTjeHpBej/OiD/3df2X8rluuSmJ1xRcOZNAg==
+"@types/react-native@*", "@types/react-native@^0.60.25":
+  version "0.60.25"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.25.tgz#65cb0bf5dd0631079215b63525458e4123c1c90e"
+  integrity sha512-827dIVvSTxSH5uTpsJJH7O4wpRuw0rm3yIzRL3a2yKawA0nyhgC1GPKTXHFIn2GfSdXn1Gty2dJ+k6uDZF3MWQ==
   dependencies:
     "@types/prop-types" "*"
     "@types/react" "*"
@@ -2679,10 +2687,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.15":
-  version "16.9.15"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.15.tgz#aeabb7a50f96c9e31a16079ada20ede9ed602977"
-  integrity sha512-WsmM1b6xQn1tG3X2Hx4F3bZwc2E82pJXt5OPs2YJgg71IzvUoKOSSSYOvLXYCg1ttipM+UuA4Lj3sfvqjVxyZw==
+"@types/react@*", "@types/react@^16.9.16":
+  version "16.9.16"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.16.tgz#4f12515707148b1f53a8eaa4341dae5dfefb066d"
+  integrity sha512-dQ3wlehuBbYlfvRXfF5G+5TbZF3xqgkikK7DWAsQXe2KnzV+kjD4W2ea+ThCrKASZn9h98bjjPzoTYzfRqyBkw==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
@@ -2704,11 +2712,12 @@
   resolved "https://registry.yarnpkg.com/@types/store/-/store-2.0.2.tgz#6263d4f1aab225032ea55b17d94f3b725a21c943"
   integrity sha512-ZPHnXkzmGMfk+pHqAGzTSpA9CbsHmJLgkvOl5w52LZ0XTxB1ZIHWZzQ7lEtjTNWScBbsQekg8TjApMXkMe4nkw==
 
-"@types/styled-components@*", "@types/styled-components@^4.1.21", "@types/styled-components@^4.4.0":
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.0.tgz#15a3d59533fd3a5bd013db4a7c4422ec542c59d2"
-  integrity sha512-QFl+w3hQJNHE64Or3PXMFpC3HAQDiuQLi5o9m1XPEwYWfgCZtAribO5ksjxnO8U0LG8Parh0ESCgVxo4VfxlHg==
+"@types/styled-components@*", "@types/styled-components@^4.1.21", "@types/styled-components@^4.4.1":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.1.tgz#bc40cf5ce0708032f4b148b04ab3c470d3e74026"
+  integrity sha512-cQXT4pkAkM0unk/s26UBrJx9RmJ2rNUn2aDTgzp1rtu+tTkScebE78jbxNWhlqkA43XF3d41CcDlyl9Ldotm2g==
   dependencies:
+    "@types/hoist-non-react-statics" "*"
     "@types/react" "*"
     "@types/react-native" "*"
     csstype "^2.2.0"
@@ -2740,40 +2749,40 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@2.10.0":
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.10.0.tgz#c4cb103275e555e8a7e9b3d14c5951eb6d431e70"
-  integrity sha512-rT51fNLW0u3fnDGnAHVC5nu+Das+y2CpW10yqvf6/j5xbuUV3FxA3mBaIbM24CXODXjbgUznNb4Kg9XZOUxKAw==
+"@typescript-eslint/eslint-plugin@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.11.0.tgz#4477c33491ccf0a9a3f4a30ef84978fa0ea0cad2"
+  integrity sha512-G2HHA1vpMN0EEbUuWubiCCfd0R3a30BB+UdvnFkxwZIxYEGOrWEXDv8tBFO9f44CWc47Xv9lLM3VSn4ORLI2bA==
   dependencies:
-    "@typescript-eslint/experimental-utils" "2.10.0"
+    "@typescript-eslint/experimental-utils" "2.11.0"
     eslint-utils "^1.4.3"
     functional-red-black-tree "^1.0.1"
     regexpp "^3.0.0"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@2.10.0":
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.10.0.tgz#8db1656cdfd3d9dcbdbf360b8274dea76f0b2c2c"
-  integrity sha512-FZhWq6hWWZBP76aZ7bkrfzTMP31CCefVIImrwP3giPLcoXocmLTmr92NLZxuIcTL4GTEOE33jQMWy9PwelL+yQ==
+"@typescript-eslint/experimental-utils@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.11.0.tgz#cef18e6b122706c65248a5d8984a9779ed1e52ac"
+  integrity sha512-YxcA/y0ZJaCc/fB/MClhcDxHI0nOBB7v2/WxBju2cOTanX7jO9ttQq6Fy4yW9UaY5bPd9xL3cun3lDVqk67sPQ==
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/typescript-estree" "2.10.0"
+    "@typescript-eslint/typescript-estree" "2.11.0"
     eslint-scope "^5.0.0"
 
-"@typescript-eslint/parser@2.10.0":
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.10.0.tgz#24b2e48384ab6d5a6121e4c4faf8892c79657ad3"
-  integrity sha512-wQNiBokcP5ZsTuB+i4BlmVWq6o+oAhd8en2eSm/EE9m7BgZUIfEeYFd6z3S+T7bgNuloeiHA1/cevvbBDLr98g==
+"@typescript-eslint/parser@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.11.0.tgz#cdcc3be73ee31cbef089af5ff97ccaa380ef6e8b"
+  integrity sha512-DyGXeqhb3moMioEFZIHIp7oXBBh7dEfPTzGrlyP0Mi9ScCra4SWEGs3kPd18mG7Sy9Wy8z88zmrw5tSGL6r/6A==
   dependencies:
     "@types/eslint-visitor-keys" "^1.0.0"
-    "@typescript-eslint/experimental-utils" "2.10.0"
-    "@typescript-eslint/typescript-estree" "2.10.0"
+    "@typescript-eslint/experimental-utils" "2.11.0"
+    "@typescript-eslint/typescript-estree" "2.11.0"
     eslint-visitor-keys "^1.1.0"
 
-"@typescript-eslint/typescript-estree@2.10.0", "@typescript-eslint/typescript-estree@^2.4.0":
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.10.0.tgz#89cdabd5e8c774e9d590588cb42fb9afd14dcbd9"
-  integrity sha512-oOYnplddQNm/LGVkqbkAwx4TIBuuZ36cAQq9v3nFIU9FmhemHuVzAesMSXNQDdAzCa5bFgCrfD3JWhYVKlRN2g==
+"@typescript-eslint/typescript-estree@2.11.0", "@typescript-eslint/typescript-estree@^2.4.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.11.0.tgz#21ada6504274cd1644855926312c798fc697e9fb"
+  integrity sha512-HGY4+d4MagO6cKMcKfIKaTMxcAv7dEVnji2Zi+vi5VV8uWAM631KjAB5GxFcexMYrwKT0EekRiiGK1/Sd7VFGA==
   dependencies:
     debug "^4.1.1"
     eslint-visitor-keys "^1.1.0"
@@ -2867,9 +2876,9 @@
     camelcase "^5.0.0"
 
 "@vue/component-compiler-utils@^3.0.0":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.0.2.tgz#7daf8aaf0d5faa66e7c8a1f6fea315630e45fbc9"
-  integrity sha512-BSnY2PmW4QwU1AOcGSNYAmEPLjdQ9itl1YpLCWtpwMA5Jy/aqWNuzZ9+ZZ8h6yZJ53W95tVkEP6yrXJ/zUHdEA==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.1.0.tgz#64cd394925f5af1f9c3228c66e954536f5311857"
+  integrity sha512-OJ7swvl8LtKtX5aYP8jHhO6fQBIRIGkU6rvWzK+CGJiNOnvg16nzcBkd9qMZzW8trI2AsqAKx263nv7kb5rhZw==
   dependencies:
     consolidate "^0.15.1"
     hash-sum "^1.0.2"
@@ -3565,12 +3574,12 @@ array-ify@^1.0.0:
   integrity sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=
 
 array-includes@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
-  integrity sha1-GEtI9i2S10UrsxsyMWXH+L0CJm0=
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.0.tgz#48a929ef4c6bb1fa6dc4a92c9b023a261b0ca404"
+  integrity sha512-ONOEQoKrvXPKk7Su92Co0YMqYO32FfqJTzkKU9u2UpIXyYZIzLSvpdg4AwvSw4mSUW0czu6inK+zby6Oj6gDjQ==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.7.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.0"
 
 array-union@^1.0.1, array-union@^1.0.2:
   version "1.0.2"
@@ -3608,13 +3617,12 @@ array.prototype.find@^2.1.0:
     es-abstract "^1.13.0"
 
 array.prototype.flat@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.2.tgz#8f3c71d245ba349b6b64b4078f76f5576f1fd723"
-  integrity sha512-VXjh7lAL4KXKF2hY4FnEW9eRW6IhdvFW1sN/JwLbmECbCgACCnBHNyP3lFiYuttr0jxRN9Bsc5+G27dMseSWqQ==
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz#0de82b426b0318dbfdb940089e38b043d37f6c7b"
+  integrity sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.15.0"
-    function-bind "^1.1.1"
+    es-abstract "^1.17.0-next.1"
 
 arrify@^1.0.1:
   version "1.0.1"
@@ -5047,10 +5055,10 @@ copy-to-clipboard@^3:
   dependencies:
     toggle-selection "^1.0.6"
 
-copy-webpack-plugin@^5.0.2, copy-webpack-plugin@^5.0.5:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.0.5.tgz#731df6a837a2ef0f8f8e2345bdfe9b7c62a2da68"
-  integrity sha512-7N68eIoQTyudAuxkfPT7HzGoQ+TsmArN/I3HFwG+lVE3FNzqvZKIiaxtYh4o3BIznioxUvx9j26+Rtsc9htQUQ==
+copy-webpack-plugin@^5.0.2, copy-webpack-plugin@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.1.tgz#5481a03dea1123d88a988c6ff8b78247214f0b88"
+  integrity sha512-P15M5ZC8dyCjQHWwd4Ia/dm0SgVvZJMYeykVIVYXbGyqO4dWB5oyPHp9i7wjwo5LhtlhKbiBCdS2NvM07Wlybg==
   dependencies:
     cacache "^12.0.3"
     find-cache-dir "^2.1.0"
@@ -5062,21 +5070,21 @@ copy-webpack-plugin@^5.0.2, copy-webpack-plugin@^5.0.5:
     normalize-path "^3.0.0"
     p-limit "^2.2.1"
     schema-utils "^1.0.0"
-    serialize-javascript "^2.1.0"
+    serialize-javascript "^2.1.2"
     webpack-log "^2.0.0"
 
 core-js-compat@^3.4.7:
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.4.7.tgz#39f8080b1d92a524d6d90505c42b9c5c1eb90611"
-  integrity sha512-57+mgz/P/xsGdjwQYkwtBZR3LuISaxD1dEwVDtbk8xJMqAmwqaxLOvnNT7kdJ7jYE/NjNptyzXi+IQFMi/2fCw==
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.5.0.tgz#5a11a619a9e9dd2dcf1c742b2060bc4a2143e5b6"
+  integrity sha512-E7iJB72svRjJTnm9HDvujzNVMCm3ZcDYEedkJ/sDTNsy/0yooCd9Cg7GSzE7b4e0LfIkjijdB1tqg0pGwxWeWg==
   dependencies:
-    browserslist "^4.8.0"
+    browserslist "^4.8.2"
     semver "^6.3.0"
 
 core-js@^2.4.0, core-js@^2.6.5:
-  version "2.6.10"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f"
-  integrity sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
+  integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
@@ -5247,10 +5255,10 @@ css-loader@^2.1.1:
     postcss-value-parser "^3.3.0"
     schema-utils "^1.0.0"
 
-css-loader@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.2.1.tgz#62849b45a414b7bde0bfba17325a026471040eae"
-  integrity sha512-q40kYdcBNzMvkIImCL2O+wk8dh+RGwPPV9Dfz3n7XtOYPXqe2Z6VgtvoxjkLHz02gmhepG9sOAJOUlx+3hHsBg==
+css-loader@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.3.2.tgz#41b2086528aa4fbf8c0692e874bc14f081129b21"
+  integrity sha512-4XSiURS+YEK2fQhmSaM1onnUm0VKWNf6WWBYjkp9YbSDGCBTVZ5XOM6Gkxo8tLgQlzkZOBJvk9trHlDk4gjEYg==
   dependencies:
     camelcase "^5.3.1"
     cssesc "^3.0.0"
@@ -5588,7 +5596,7 @@ dedent@^0.7.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
-deep-equal@^1.0.1:
+deep-equal@^1.0.1, deep-equal@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
   integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
@@ -6102,11 +6110,11 @@ edgeware-node-types@^1.0.10:
   integrity sha512-0e56OWLDowEvEj30mJ+Sp72WlaGayRobxE7q3vSBTH1wNiPTafLQ53NMCO68j6V0aTycMzC373VR08iGKoDf5g==
 
 editions@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/editions/-/editions-2.2.0.tgz#dacd0c2a9441ebef592bba316a6264febb337f35"
-  integrity sha512-RYg3iEA2BDLCNVe8PUkD+ox5vAKxB9XS/mAhx1bdxGCF0CpX077C0pyTA9t5D6idCYA3avl5/XDHKPsHFrygfw==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/editions/-/editions-2.3.0.tgz#47f2d5309340bce93ab5eb6ad755b9e90ff825e4"
+  integrity sha512-jeXYwHPKbitU1l14dWlsl5Nm+b1Hsm7VX73BsrQ4RVwEcAQQIPFHTZAbVtuIGxZBrpdT2FXd8lbtrNBrzZxIsA==
   dependencies:
-    errlop "^1.1.2"
+    errlop "^2.0.0"
     semver "^6.3.0"
 
 ee-first@1.1.1:
@@ -6314,12 +6322,10 @@ err-code@^1.0.0:
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
   integrity sha1-BuARbTAo9q70gGhJ6w6mp0iuaWA=
 
-errlop@^1.1.2:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/errlop/-/errlop-1.6.0.tgz#1d925f440b8727b6238b3972208823176d4e7c17"
-  integrity sha512-t+bvL0FM4vSHNE1Qya+g2u0+IokiA0EV18lUczdL30OHgkbHwT00n9UrH2hvnDafIEPqfKpa1EzuDAFsQCOwUQ==
-  dependencies:
-    editions "^2.2.0"
+errlop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/errlop/-/errlop-2.0.0.tgz#52b97d35da1b0795e2647b5d2d3a46d17776f55a"
+  integrity sha512-z00WIrQhtOMUnjdTG0O4f6hMG64EVccVDBy2WwgjcF8S4UB1exGYuc2OFwmdQmsJwLQVEIHWHPCz/omXXgAZHw==
 
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
@@ -6340,7 +6346,7 @@ error-inject@^1.0.0:
   resolved "https://registry.yarnpkg.com/error-inject/-/error-inject-1.0.0.tgz#e2b3d91b54aed672f309d950d154850fa11d4f37"
   integrity sha1-4rPZG1Su1nLzCdlQ0VSFD6EdTzc=
 
-es-abstract@^1.12.0, es-abstract@^1.13.0, es-abstract@^1.15.0, es-abstract@^1.5.1, es-abstract@^1.7.0:
+es-abstract@^1.13.0:
   version "1.16.3"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.16.3.tgz#52490d978f96ff9f89ec15b5cf244304a5bca161"
   integrity sha512-WtY7Fx5LiOnSYgF5eg/1T+GONaGmpvpPdCpSnYij+U2gDTL0UPfWrhDw7b2IYb+9NQJsYpCA0wOQvZfsd6YwRw==
@@ -6356,6 +6362,23 @@ es-abstract@^1.12.0, es-abstract@^1.13.0, es-abstract@^1.15.0, es-abstract@^1.5.
     string.prototype.trimleft "^2.1.0"
     string.prototype.trimright "^2.1.0"
 
+es-abstract@^1.17.0-next.0, es-abstract@^1.17.0-next.1:
+  version "1.17.0-next.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.0-next.1.tgz#94acc93e20b05a6e96dacb5ab2f1cb3a81fc2172"
+  integrity sha512-7MmGr03N7Rnuid6+wyhD9sHNE2n4tFSwExnU2lQl3lIo2ShXWGePY80zYaoMOmILWv57H0amMjZGHNzzGG70Rw==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.1.4"
+    is-regex "^1.0.4"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimleft "^2.1.0"
+    string.prototype.trimright "^2.1.0"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -6461,7 +6484,7 @@ eslint-import-resolver-node@^0.3.2:
     debug "^2.6.9"
     resolve "^1.5.0"
 
-eslint-module-utils@^2.4.0:
+eslint-module-utils@^2.4.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.5.0.tgz#cdf0b40d623032274ccd2abd7e64c4e524d6e19c"
   integrity sha512-kCo8pZaNz2dsAW7nCUjuVoI11EBXXpIzfNxmaoLhXoRDOnqXLC4iSGVRdZPhOitfbdEfMEfKOiENaK6wDPZEGw==
@@ -6482,22 +6505,23 @@ eslint-plugin-eslint-plugin@^2.1.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-eslint-plugin/-/eslint-plugin-eslint-plugin-2.1.0.tgz#a7a00f15a886957d855feacaafee264f039e62d5"
   integrity sha512-kT3A/ZJftt28gbl/Cv04qezb/NQ1dwYIbi8lyf806XMxkus7DvOVCLIfTXMrorp322Pnoez7+zabXH29tADIDg==
 
-eslint-plugin-import@^2.18.2:
-  version "2.18.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.18.2.tgz#02f1180b90b077b33d447a17a2326ceb400aceb6"
-  integrity sha512-5ohpsHAiUBRNaBWAF08izwUGlbrJoJJ+W9/TBwsGoR1MnlgfwMIKrFeSjWbt6moabiXW9xNvtFz+97KHRfI4HQ==
+eslint-plugin-import@^2.19.1:
+  version "2.19.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.19.1.tgz#5654e10b7839d064dd0d46cd1b88ec2133a11448"
+  integrity sha512-x68131aKoCZlCae7rDXKSAQmbT5DQuManyXo2sK6fJJ0aK5CWAkv6A6HJZGgqC8IhjQxYPgo6/IY4Oz8AFsbBw==
   dependencies:
     array-includes "^3.0.3"
+    array.prototype.flat "^1.2.1"
     contains-path "^0.1.0"
     debug "^2.6.9"
     doctrine "1.5.0"
     eslint-import-resolver-node "^0.3.2"
-    eslint-module-utils "^2.4.0"
+    eslint-module-utils "^2.4.1"
     has "^1.0.3"
     minimatch "^3.0.4"
     object.values "^1.1.0"
     read-pkg-up "^2.0.0"
-    resolve "^1.11.0"
+    resolve "^1.12.0"
 
 eslint-plugin-node@^10.0.0:
   version "10.0.0"
@@ -7421,9 +7445,9 @@ get-caller-file@^2.0.1:
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
 get-own-enumerable-property-symbols@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.1.tgz#6f7764f88ea11e0b514bd9bd860a132259992ca4"
-  integrity sha512-09/VS4iek66Dh2bctjRkowueRJbY1JDGR1L/zRxO1Qk8Uxs6PnqaNSqalpizPT+CDjre3hnEsuzvhgomz9qYrA==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
+  integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
 
 get-pkg-repo@^1.0.0:
   version "1.4.0"
@@ -7934,9 +7958,11 @@ hex-color-regex@^1.1.0:
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
 highlight.js@^9.16.2:
-  version "9.16.2"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.16.2.tgz#68368d039ffe1c6211bcc07e483daf95de3e403e"
-  integrity sha512-feMUrVLZvjy0oC7FVJQcSQRqbBq9kwqnYE4+Kj9ZjbHh3g+BisiPgF49NyQbVLNdrL/qqZr3Ca9yOKwgn2i/tw==
+  version "9.17.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.17.1.tgz#14a4eded23fd314b05886758bb906e39dd627f9a"
+  integrity sha512-TA2/doAur5Ol8+iM3Ov7qy3jYcr/QiJ2eDTdRF4dfbjG7AaaB99J5G+zSl11ljbl6cIcahgPY6SKb3sC3EJ0fw==
+  dependencies:
+    handlebars "^4.5.3"
 
 history@^4.9.0:
   version "4.10.1"
@@ -8271,9 +8297,9 @@ i18next-xhr-backend@^3.2.2:
     "@babel/runtime" "^7.5.5"
 
 i18next@*, i18next@^19.0.0:
-  version "19.0.1"
-  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.0.1.tgz#11347b9d5f2ceb4a03750a06010cc249fe065d31"
-  integrity sha512-xZjzCcInvkgx3ZzymkySZ/ULOZyAMXTmQP22Hvnf5CMRqrxe3BXhg6CBtpGSVPMiANnHOmPiNVWHLSncnffnxw==
+  version "19.0.2"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.0.2.tgz#d72502ef031403572703f2e9f013cae005265444"
+  integrity sha512-fBa43Ann2udP1CQAz3IQpOZ1dGAkmi3mMfzisOhH17igneSRbvZ7P2RNbL+L1iRYKMufBmVwnC7G3gqcyviZ9g==
   dependencies:
     "@babel/runtime" "^7.3.1"
 
@@ -11134,9 +11160,11 @@ now-and-later@^2.0.0:
     once "^1.3.2"
 
 npm-bundled@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.0.tgz#2e8fdb7e69eff2df963937b696243316537c284b"
-  integrity sha512-ez6dcKBFNo4FvlMqscBEFUum6M2FTLW5grqm3DyBKB5XOyKVCeeWvAuoZtbmW/5Cv8EM2bQUOA6ufxa/TKVN0g==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
+  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
+  dependencies:
+    npm-normalize-package-bin "^1.0.1"
 
 npm-lifecycle@^3.1.2:
   version "3.1.4"
@@ -11152,6 +11180,11 @@ npm-lifecycle@^3.1.2:
     umask "^1.1.0"
     which "^1.3.1"
 
+npm-normalize-package-bin@^1.0.0, npm-normalize-package-bin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
+  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
+
 "npm-package-arg@^4.0.0 || ^5.0.0 || ^6.0.0", npm-package-arg@^6.0.0, npm-package-arg@^6.1.0:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-6.1.1.tgz#02168cb0a49a2b75bf988a28698de7b529df5cb7"
@@ -11163,9 +11196,9 @@ npm-lifecycle@^3.1.2:
     validate-npm-package-name "^3.0.0"
 
 npm-packlist@^1.1.6, npm-packlist@^1.4.4:
-  version "1.4.6"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.6.tgz#53ba3ed11f8523079f1457376dd379ee4ea42ff4"
-  integrity sha512-u65uQdb+qwtGvEJh/DgQgW1Xg7sqeNbmxYyrvlNznaVTjV3E5P6F/EFjM+BVHXl7JJlsdG8A64M0XI8FI/IOlg==
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.7.tgz#9e954365a06b80b18111ea900945af4f88ed4848"
+  integrity sha512-vAj7dIkp5NhieaGZxBJB8fF4R0078rqsmhJcAfXZ6O7JJhjhPK96n5Ry1oZcfLXgfun0GWTZPOxaEyqv8GBykQ==
   dependencies:
     ignore-walk "^3.0.1"
     npm-bundled "^1.0.1"
@@ -11292,32 +11325,32 @@ object.assign@^4.0.4, object.assign@^4.1.0:
     object-keys "^1.0.11"
 
 object.entries@^1.0.4, object.entries@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519"
-  integrity sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.1.tgz#ee1cf04153de02bb093fec33683900f57ce5399b"
+  integrity sha512-ilqR7BgdyZetJutmDPfXCDffGa0/Yzl2ivVNpbx/g4UeWrCdRnFDUBrKJGLhGieRHDATnyZXWBeCb29k9CJysQ==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.12.0"
+    es-abstract "^1.17.0-next.1"
     function-bind "^1.1.1"
     has "^1.0.3"
 
 object.fromentries@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.1.tgz#050f077855c7af8ae6649f45c80b16ee2d31e704"
-  integrity sha512-PUQv8Hbg3j2QX0IQYv3iAGCbGcu4yY4KQ92/dhA4sFSixBmSmp13UpDLs6jGK8rBtbmhNNIK99LD2k293jpiGA==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.2.tgz#4a09c9b9bb3843dd0f89acdb517a794d4f355ac9"
+  integrity sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.15.0"
+    es-abstract "^1.17.0-next.1"
     function-bind "^1.1.1"
     has "^1.0.3"
 
 object.getownpropertydescriptors@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
-  integrity sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
+  integrity sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.5.1"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
 object.omit@^2.0.0:
   version "2.0.1"
@@ -11335,12 +11368,12 @@ object.pick@^1.3.0:
     isobject "^3.0.1"
 
 object.values@^1.0.4, object.values@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.0.tgz#bf6810ef5da3e5325790eaaa2be213ea84624da9"
-  integrity sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
+  integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.12.0"
+    es-abstract "^1.17.0-next.1"
     function-bind "^1.1.1"
     has "^1.0.3"
 
@@ -13216,9 +13249,9 @@ react-hot-loader@^4.12.18:
     source-map "^0.7.3"
 
 react-i18next@^11.0.1:
-  version "11.2.5"
-  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.2.5.tgz#b2b3cfde63cc46be8f1f99218e90425aa483ce8f"
-  integrity sha512-1vUDLEZ/PSoiyt2CDitreyb6OG4PP/XHXtMHX1akC0I1vgUfZY77DuCugtnMEfl4rQtP7g2KC+bRu3U3pebFRg==
+  version "11.2.6"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.2.6.tgz#4ac333fcb991b11281242e37bfebb84a6963b48f"
+  integrity sha512-aKoxq2Vyc+WuDcB3Dq8K5NNI1WvrR2OIvZUNkEVLpb6pFttcheNBloXLV3vdbBD3k/9f5F4JVZgA9N9scr7w/A==
   dependencies:
     "@babel/runtime" "^7.3.1"
     html-parse-stringify2 "2.0.1"
@@ -13248,12 +13281,13 @@ react-markdown@^4.2.2:
     xtend "^4.0.1"
 
 react-popper@^1.3.4:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.6.tgz#32122f83af8fda01bdd4f86625ddacaf64fdd06d"
-  integrity sha512-kLTfa9z8n+0jJvRVal9+vIuirg41rObg4Bbrvv/ZfsGPQDN9reyVVSxqnHF1ZNgXgV7x11PeUfd5ItF8DZnqhg==
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
+  integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
   dependencies:
     "@babel/runtime" "^7.1.2"
     create-react-context "^0.3.0"
+    deep-equal "^1.1.1"
     popper.js "^1.14.4"
     prop-types "^15.6.1"
     typed-styles "^0.0.7"
@@ -13339,14 +13373,14 @@ read-cmd-shim@^1.0.1:
     graceful-fs "^4.1.2"
 
 "read-package-json@1 || 2", read-package-json@^2.0.0, read-package-json@^2.0.13:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/read-package-json/-/read-package-json-2.1.0.tgz#e3d42e6c35ea5ae820d9a03ab0c7291217fc51d5"
-  integrity sha512-KLhu8M1ZZNkMcrq1+0UJbR8Dii8KZUqB0Sha4mOx/bknfKI/fyrQVrG/YIt2UOtG667sD8+ee4EXMM91W9dC+A==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/read-package-json/-/read-package-json-2.1.1.tgz#16aa66c59e7d4dad6288f179dd9295fd59bb98f1"
+  integrity sha512-dAiqGtVc/q5doFz6096CcnXhpYk0ZN8dEKVkGLU0CsASt8SrgF6SF7OTKAYubfvFhWaqofl+Y8HK19GR8jwW+A==
   dependencies:
     glob "^7.1.1"
     json-parse-better-errors "^1.0.1"
     normalize-package-data "^2.0.0"
-    slash "^1.0.0"
+    npm-normalize-package-bin "^1.0.0"
   optionalDependencies:
     graceful-fs "^4.1.2"
 
@@ -13623,9 +13657,9 @@ regjsgen@^0.5.0:
   integrity sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg==
 
 regjsparser@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.0.tgz#f1e6ae8b7da2bae96c99399b868cd6c933a2ba9c"
-  integrity sha512-RQ7YyokLiQBomUJuUG8iGVvkgOLxwyZM8k6d3q5SAXpg4r5TZJZigKFvC6PpD+qQ98bCDC5YelPeA3EucDoNeQ==
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.1.tgz#5b6b28c418f312ef42898dc6865ae2d4b9f0f7a2"
+  integrity sha512-7LutE94sz/NKSYegK+/4E77+8DipxF+Qn2Tmu362AcmsF2NYq/wx3+ObvU90TKEhjf7hQoFXo23ajjrXP7eUgg==
   dependencies:
     jsesc "~0.5.0"
 
@@ -13863,7 +13897,7 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.13.1, resolve@^1.2.0, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.8.1, resolve@^1.9.0:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.2.0, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.8.1, resolve@^1.9.0:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.13.1.tgz#be0aa4c06acd53083505abb35f4d66932ab35d16"
   integrity sha512-CxqObCX8K8YtAhOBRg+lrcdn+LK+WYOS8tSjqSFbjtrI5PnS63QPhZl4+yKfrU9tdsbMu9Anr/amegT87M9Z6w==
@@ -14130,9 +14164,9 @@ semantic-ui-css@^2.3.1:
     jquery x.*
 
 semantic-ui-react@^0.88.1:
-  version "0.88.1"
-  resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.88.1.tgz#006d63f838b651370d68e73510327308f19ff6fd"
-  integrity sha512-fCCDnRXiVJUJ9icFVSu0n0pZ2cg2QssiLM2nP4pz6aODQpPZTPtXVI6V/hFciwJ+GPkV6WZAmEmFLxR7nRVF4Q==
+  version "0.88.2"
+  resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.88.2.tgz#3d4b54f8b799769b412435c8531475fd34aa4149"
+  integrity sha512-+02kN2z8PuA/cMdvDUsHhbJmBzxxgOXVHMFr9XK7zGb0wkW9A6OPQMFokWz7ozlVtKjN6r7zsb+Qvjk/qq1OWw==
   dependencies:
     "@babel/runtime" "^7.1.2"
     "@semantic-ui-react/event-stack" "^3.1.0"
@@ -14185,10 +14219,10 @@ serialize-javascript@^1.3.0:
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
   integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==
 
-serialize-javascript@^2.1.0, serialize-javascript@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.1.tgz#952907a04a3e3a75af7f73d92d15e233862048b2"
-  integrity sha512-MPLPRpD4FNqWq9tTIjYG5LesFouDhdyH0EPY3gVK4DRD5+g4aDqdNSzLIwceulo3Yj+PL1bPh6laE5+H6LTcrQ==
+serialize-javascript@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
+  integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
 
 serve-index@^1.9.1:
   version "1.9.1"
@@ -14716,9 +14750,9 @@ stream-http@^2.7.2:
     xtend "^4.0.0"
 
 stream-shift@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
-  integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
+  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
 strict-uri-encode@^1.0.0:
   version "1.1.0"
@@ -15161,15 +15195,15 @@ temp@~0.4.0:
   integrity sha1-ZxrWPVe+D+nXKUZks/xABjZnimA=
 
 terser-webpack-plugin@^1.4.1:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.2.tgz#e23c0d554587d1f473bd0cf68627720e733890a4"
-  integrity sha512-fdEb91kR2l+BVgES77N/NTXWZlpX6vX+pYPjnX5grcDYBF2CMnzJiXX4NNlna4l04lvCW39lZ+O/jSvUhHH/ew==
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
+  integrity sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==
   dependencies:
     cacache "^12.0.2"
     find-cache-dir "^2.1.0"
     is-wsl "^1.1.0"
     schema-utils "^1.0.0"
-    serialize-javascript "^2.1.1"
+    serialize-javascript "^2.1.2"
     source-map "^0.6.1"
     terser "^4.1.2"
     webpack-sources "^1.4.0"
@@ -15583,10 +15617,10 @@ typedoc-plugin-no-inherit@^1.1.10:
   resolved "https://registry.yarnpkg.com/typedoc-plugin-no-inherit/-/typedoc-plugin-no-inherit-1.1.10.tgz#559d2fa68bc5d31052bf058399c2c135f9af2f68"
   integrity sha512-BhSFAWlBTh9Bf6PSfruIqdQBM8gd/Gj8hVuRk5pVWkHu4I/SB24LzFr5gAo52ZlaQSeN72+VOkkRD6tNYl8Enw==
 
-typedoc@^0.15.3:
-  version "0.15.3"
-  resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.15.3.tgz#8f5a038cfc1160f70cbc57e37908653483dca689"
-  integrity sha512-RGX+dgnm9fyg5KHj81/ZhMiee0FfvJnjBXedhedhMWlrtM4YRv3pn8sYCWRt5TMi1Jli3/JG224pbFo3/3uaGw==
+typedoc@^0.15.4:
+  version "0.15.4"
+  resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.15.4.tgz#23f2c1e2be41af879c0f1358aeb76cd4d39d9aeb"
+  integrity sha512-XzrV8sM44j4nXGSKt99VOkFCPGLUH9DHGGvcgZJbvqdSG7/iR3HztNjpsLyTu1nybZLLjcClLRuWJDO3icXzYA==
   dependencies:
     "@types/minimatch" "3.0.3"
     fs-extra "^8.1.0"
@@ -15624,9 +15658,9 @@ uglify-js@3.4.x:
     source-map "~0.6.1"
 
 uglify-js@^3.1.4:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.1.tgz#35c7de17971a4aa7689cd2eae0a5b39bb838c0c5"
-  integrity sha512-pnOF7jY82wdIhATVn87uUY/FHU+MDUdPLkmGFvGoclQmeu229eTkbG5gjGGBi3R7UuYYSEeYXY/TTY5j2aym2g==
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.2.tgz#cb1a601e67536e9ed094a92dd1e333459643d3f9"
+  integrity sha512-uhRwZcANNWVLrxLfNFEdltoPNhECUR3lc+UdJoG9CBpMcSnKyWA94tc3eAujB1GcMY5Uwq8ZMp4qWpxWYDQmaA==
   dependencies:
     commander "~2.20.3"
     source-map "~0.6.1"