No withCall for all functional (#2042)

* No withCall for all functional

* Linting

* Remove HOC, unneeded eslint override

* Cleanups

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

@@ -1,27 +1,26 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2020 @polkadot/app-contracts 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 { ContractInfo } from '@polkadot/types/interfaces';
-import { ApiProps } from '@polkadot/react-api/types';
 
 import React, { useEffect, useState } from 'react';
 import { Option } from '@polkadot/types';
-import { withCalls } from '@polkadot/react-api/hoc';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import { InfoForInput } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
 import { useTranslation } from '../translate';
 
-interface Props extends ApiProps {
+interface Props {
   address?: string | null;
-  contracts_contractInfoOf?: Option<ContractInfo>;
   onChange: (isValid: boolean) => void;
 }
 
-function ValidateAddr ({ address, contracts_contractInfoOf, onChange }: Props): React.ReactElement<Props> | null {
+export default function ValidateAddr ({ address, onChange }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
+  const { api } = useApi();
+  const contractInfo = useCall<Option<ContractInfo>>(api.query.contracts.contractInfoOf, [address]);
   const [isAddress, setIsAddress] = useState(false);
   const [isStored, setIsStored] = useState(false);
 
@@ -35,8 +34,8 @@ function ValidateAddr ({ address, contracts_contractInfoOf, onChange }: Props):
   }, [address]);
 
   useEffect((): void => {
-    setIsStored(!!contracts_contractInfoOf && contracts_contractInfoOf.isSome);
-  }, [contracts_contractInfoOf]);
+    setIsStored(!!contractInfo?.isSome);
+  }, [contractInfo]);
 
   useEffect((): void => {
     onChange(isAddress && isStored);
@@ -48,18 +47,10 @@ function ValidateAddr ({ address, contracts_contractInfoOf, onChange }: Props):
 
   return (
     <InfoForInput type='error'>
-      {
-        isAddress
-          ? t('Unable to find deployed contract code at the specified address')
-          : t('The value is not in a valid address format')
+      {isAddress
+        ? t('Unable to find deployed contract code at the specified address')
+        : t('The value is not in a valid address format')
       }
     </InfoForInput>
   );
 }
-
-export default withCalls<Props>(
-  ['query.contracts.contractInfoOf', {
-    fallbacks: ['query.contract.contractInfoOf'],
-    paramName: 'address'
-  }]
-)(ValidateAddr);

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

@@ -2,14 +2,14 @@
 // 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 { StringOrNull } from '@polkadot/react-components/types';
-import { ComponentProps } from '../types';
+import { ComponentProps as Props } from '../types';
 
 import React, { useState, useEffect } from 'react';
+import { ApiPromise } from '@polkadot/api';
 import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { withApi } from '@polkadot/react-api/hoc';
 import { Button, CardGrid } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import Add from './Add';
@@ -17,28 +17,25 @@ import ContractCard from './Contract';
 import Call from './Call';
 import { getContractForAddress } from './util';
 
-interface Props extends ComponentProps, ApiProps {}
-
-function filterContracts ({ api, accounts, contracts: keyringContracts }: Props): ApiContract[] {
+function filterContracts (api: ApiPromise, { accounts, contracts: keyringContracts }: Props): ApiContract[] {
   return accounts && keyringContracts && Object.keys(keyringContracts)
     .map((address): ApiContract | null => getContractForAddress(api, address))
     .filter((contract: ApiContract | null): boolean => !!contract) as ApiContract[];
 }
 
-function Contracts (props: Props): React.ReactElement<Props> {
+export default function Contracts (props: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const { api } = useApi();
   const { accounts, basePath, contracts: keyringContracts, hasCode, showDeploy } = props;
-  // const { callAddress, callMessage, isAddOpen, isCallOpen } = this.state;
-
-  const [contracts, setContracts] = useState<ApiContract[]>(filterContracts(props));
+  const [contracts, setContracts] = useState<ApiContract[]>(filterContracts(api, props));
   const [callContractIndex, setCallContractIndex] = useState<number>(0);
   const [callMessageIndex, setCallMessageIndex] = useState<number>(0);
   const [isAddOpen, setIsAddOpen] = useState(false);
   const [isCallOpen, setIsCallOpen] = useState(false);
 
   useEffect((): void => {
-    setContracts(filterContracts(props));
-  }, [accounts, keyringContracts]);
+    setContracts(filterContracts(api, props));
+  }, [accounts, api, keyringContracts]);
 
   let callContract = contracts[callContractIndex] || null;
 
@@ -98,16 +95,14 @@ function Contracts (props: Props): React.ReactElement<Props> {
           </Button.Group>
         }
       >
-        {contracts.map((contract: ApiContract, index): React.ReactNode => {
-          return (
-            <ContractCard
-              basePath={basePath}
-              contract={contract}
-              key={contract.address.toString()}
-              onCall={_onCall(index)}
-            />
-          );
-        })}
+        {contracts.map((contract: ApiContract, index): React.ReactNode => (
+          <ContractCard
+            basePath={basePath}
+            contract={contract}
+            key={contract.address.toString()}
+            onCall={_onCall(index)}
+          />
+        ))}
       </CardGrid>
       <Add
         basePath={basePath}
@@ -125,5 +120,3 @@ function Contracts (props: Props): React.ReactElement<Props> {
     </>
   );
 }
-
-export default withApi(Contracts);

packages/react-query/src/Bonded.tsx

@@ -3,44 +3,38 @@
 // 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, StakingLedger } from '@polkadot/types/interfaces';
 
 import React from 'react';
-
-import { withCalls } from '@polkadot/react-api/hoc';
+import { useApi, useCall } from '@polkadot/react-hooks';
 
 import FormatBalance from './FormatBalance';
 
-interface Props extends BareProps, CallProps {
+interface Props extends BareProps {
   children?: React.ReactNode;
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
   label?: React.ReactNode;
-  staking_ledger?: StakingLedger | null;
 }
 
-export function BondedDisplay ({ children, className, label, staking_ledger }: Props): React.ReactElement<Props> {
+export default function BondedDisplay ({ children, className, label, params }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const controllerId = useCall<AccountId | null>(api.query.staking.bonded, [params], {
+    transform: (value): AccountId | null =>
+      value.unwrapOr(null)
+  });
+  const stakingLedger = useCall<StakingLedger | null>(api.query.staking.ledger, [controllerId], {
+    transform: (value): StakingLedger | null =>
+      value.unwrapOr(null)
+  });
+
   return (
     <FormatBalance
       className={className}
       label={label}
-      value={staking_ledger && staking_ledger.active}
+      value={stakingLedger?.active}
     >
       {children}
     </FormatBalance>
   );
 }
-
-export default withCalls<Props>(
-  ['query.staking.bonded', {
-    paramName: 'params',
-    propName: 'controllerId',
-    transform: (value): AccountId | null =>
-      value.unwrapOr(null)
-  }],
-  ['query.staking.ledger', {
-    paramName: 'controllerId',
-    transform: (value): StakingLedger | null =>
-      value.unwrapOr(null)
-  }]
-)(BondedDisplay);