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
polkadot-js · Dec 13, 2019 · 6c58db0 · 6c58db0
1 parent 7194215
commit 6c58db0
Show file tree

Hide file tree

Showing 110 changed files with 805 additions and 920 deletions.
diff --git 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
@@ -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
@@ -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,29 +37,22 @@ 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>
   );
 }
 
 // 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -7,16 +7,15 @@ 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';
 
 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
@@ -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
@@ -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
@@ -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>