Cleanup "as any" on derive with useCall (#2549)

* Cleanup "as any" on derive with useCall

* Alignment

packages/page-accounts/src/Accounts/Account.tsx

@@ -45,8 +45,8 @@ function calcVisible (filter: string, name: string, tags: string[]): boolean {
 function Account ({ account: { address, meta }, className, filter, isFavorite, toggleFavorite }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const api = useApi();
-  const info = useCall<DeriveAccountInfo>(api.api.derive.accounts.info as any, [address]);
-  const balancesAll = useCall<DeriveBalancesAll>(api.api.derive.balances.all as any, [address]);
+  const info = useCall<DeriveAccountInfo>(api.api.derive.accounts.info, [address]);
+  const balancesAll = useCall<DeriveBalancesAll>(api.api.derive.balances.all, [address]);
   const recoveryInfo = useCall<RecoveryConfig | null>(api.api.query.recovery?.recoverable, [address], {
     transform: (opt: Option<RecoveryConfig>) => opt.unwrapOr(null)
   });

packages/page-accounts/src/Contacts/Address.tsx

@@ -31,8 +31,8 @@ const isEditable = true;
 function Address ({ address, className, filter, isFavorite, toggleFavorite }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const api = useApi();
-  const info = useCall<DeriveAccountInfo>(api.api.derive.accounts.info as any, [address]);
-  const balancesAll = useCall<DeriveBalancesAll>(api.api.derive.balances.all as any, [address]);
+  const info = useCall<DeriveAccountInfo>(api.api.derive.accounts.info, [address]);
+  const balancesAll = useCall<DeriveBalancesAll>(api.api.derive.balances.all, [address]);
   const [tags, setTags] = useState<string[]>([]);
   const [accName, setAccName] = useState('');
   const [current, setCurrent] = useState<KeyringAddress | null>(null);

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

@@ -18,7 +18,7 @@ interface Props {
 function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const queued = useCall<DeriveDispatch[]>(api.derive.democracy.dispatchQueue as any, []);
+  const queued = useCall<DeriveDispatch[]>(api.derive.democracy.dispatchQueue, []);
 
   return (
     <Table

packages/page-democracy/src/useChangeCalc.ts

@@ -19,7 +19,7 @@ const ZERO = new BN(0);
 
 export default function useChangeCalc (threshold: VoteThreshold, votedAye: BN, votedNay: BN, votedTotal: BN): Result {
   const { api } = useApi();
-  const sqrtElectorate = useCall<BN>(api.derive.democracy.sqrtElectorate as any, []);
+  const sqrtElectorate = useCall<BN>(api.derive.democracy.sqrtElectorate, []);
   const [result, setResult] = useState<Result>({ changeAye: ZERO, changeNay: ZERO });
 
   useEffect((): void => {

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

@@ -24,9 +24,9 @@ interface Props {
 function BlockByHash ({ className, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   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]);
+  const events = useCall<EventRecord[]>(api.query.system.events.at, [value], { isSingle: true });
+  const getBlock = useCall<SignedBlock>(api.rpc.chain.getBlock, [value], { isSingle: true });
+  const getHeader = useCall<HeaderExtended>(api.derive.chain.getHeader, [value]);
 
   const blockNumber = getHeader?.number.unwrap();
   const parentHash = getHeader?.parentHash.toHex();

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

@@ -16,7 +16,7 @@ interface Props {
 
 function BlockByNumber ({ value }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
-  const getBlockHash = useCall<Hash>(api.rpc.chain.getBlockHash as any, [value]);
+  const getBlockHash = useCall<Hash>(api.rpc.chain.getBlockHash, [value]);
 
   if (!getBlockHash) {
     return <Spinner />;

packages/page-extrinsics/src/Balance.tsx

@@ -16,7 +16,7 @@ interface Props extends BareProps {
 
 function BalanceDisplay ({ className, label, params, style }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all as any, [params]);
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [params]);
 
   return (
     <InputBalance

packages/page-parachains/src/Parachain/index.tsx

@@ -31,7 +31,7 @@ function Parachain ({ basePath, className, isMine, paraInfoRef, sudoKey }: Props
   const { id } = useParams();
   const [isMenuOpen, toggleMenu] = useToggle();
   const { isOpen: isDeregisterOpen, onClose: onDeregisterClose, onOpen: onDeregisterOpen } = useModal();
-  const parachain = useCall<DeriveParachainFull | null>(api.derive.parachains.info as any, [id || null]);
+  const parachain = useCall<DeriveParachainFull | null>(api.derive.parachains.info, [id || null]);
 
   if (isUndefined(parachain)) {
     return (

packages/page-society/src/Overview/Candidate.tsx

@@ -24,7 +24,7 @@ interface Props {
 
 function Candidate ({ allMembers, isMember, ownMembers, value: { accountId, kind, value } }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const votes = useCall<VoteType[]>(api.query.society.votes.multi as any, [allMembers.map((memberId): [AccountId, string] => [accountId, memberId])] as any, {
+  const votes = useCall<VoteType[]>(api.query.society.votes.multi, [allMembers.map((memberId): [AccountId, string] => [accountId, memberId])] as any, {
     transform: (voteOpts: Option<SocietyVote>[]): VoteType[] =>
       voteOpts
         .map((voteOpt, index): [string, Option<SocietyVote>] => [allMembers[index], voteOpt])

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

@@ -20,7 +20,7 @@ interface Props {
 function ValidateAmount ({ accountId, onError, value }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all as any, [accountId]);
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [accountId]);
   const [error, setError] = useState<string | null>(null);
 
   useEffect((): void => {

packages/page-staking/src/Actions/Account/index.tsx

@@ -29,7 +29,7 @@ interface Props {
   activeEra?: EraIndex;
   allStashes?: string[];
   className?: string;
-  isInElection?: boolean;
+  isDisabled?: boolean;
   isOwnStash: boolean;
   next?: string[];
   onUpdateType: (stashId: string, type: 'validator' | 'nominator' | 'started' | 'other') => void;
@@ -90,13 +90,13 @@ function getStakeState (allAccounts: string[], allStashes: string[] | undefined,
   };
 }
 
-function Account ({ allStashes, className, isInElection, isOwnStash, next, onUpdateType, stashId, validators }: Props): React.ReactElement<Props> {
+function Account ({ allStashes, className, isDisabled, isOwnStash, next, onUpdateType, stashId, validators }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const validateInfo = useCall<ValidatorInfo>(api.query.staking.validators, [stashId]);
-  const balancesAll = useCall<DeriveBalancesAll>(api.derive.balances.all as any, [stashId]);
-  const stakingAccount = useCall<DeriveStakingAccount>(api.derive.staking.account as any, [stashId]);
+  const balancesAll = useCall<DeriveBalancesAll>(api.derive.balances.all, [stashId]);
+  const stakingAccount = useCall<DeriveStakingAccount>(api.derive.staking.account, [stashId]);
   const [{ controllerId, destination, destinationId, hexSessionIdNext, hexSessionIdQueue, isLoading, isOwnController, isStashNominating, isStashValidating, nominees, sessionIds, stakingLedger }, setStakeState] = useState<StakeState>({ controllerId: null, destinationId: 0, hexSessionIdNext: null, hexSessionIdQueue: null, isLoading: true, isOwnController: false, isStashNominating: false, isStashValidating: false, sessionIds: [] });
   const [activeNoms, setActiveNoms] = useState<string[]>([]);
   const inactiveNoms = useInactives(stashId, nominees);
@@ -256,7 +256,7 @@ function Account ({ allStashes, className, isInElection, isOwnStash, next, onUpd
                   <TxButton
                     accountId={controllerId}
                     icon='stop'
-                    isDisabled={!isOwnController || isInElection}
+                    isDisabled={!isOwnController || isDisabled}
                     isPrimary={false}
                     key='stop'
                     label={t('Stop')}
@@ -269,7 +269,7 @@ function Account ({ allStashes, className, isInElection, isOwnStash, next, onUpd
                       ? (
                         <Button
                           icon='sign-in'
-                          isDisabled={!isOwnController || isInElection}
+                          isDisabled={!isOwnController || isDisabled}
                           key='set'
                           label={t('Session Key')}
                           onClick={toggleSetSession}
@@ -278,7 +278,7 @@ function Account ({ allStashes, className, isInElection, isOwnStash, next, onUpd
                       : (
                         <Button
                           icon='check circle outline'
-                          isDisabled={!isOwnController || isInElection}
+                          isDisabled={!isOwnController || isDisabled}
                           key='validate'
                           label={t('Validate')}
                           onClick={toggleValidate}
@@ -288,7 +288,7 @@ function Account ({ allStashes, className, isInElection, isOwnStash, next, onUpd
                     <Button.Or key='nominate.or' />
                     <Button
                       icon='hand paper outline'
-                      isDisabled={!isOwnController || isInElection}
+                      isDisabled={!isOwnController || isDisabled}
                       key='nominate'
                       label={t('Nominate')}
                       onClick={toggleNominate}
@@ -303,7 +303,7 @@ function Account ({ allStashes, className, isInElection, isOwnStash, next, onUpd
                 trigger={
                   <Button
                     icon='setting'
-                    isDisabled={isInElection}
+                    isDisabled={isDisabled}
                     onClick={toggleSettings}
                   />
                 }

packages/page-staking/src/Actions/index.tsx

@@ -56,7 +56,7 @@ function Actions ({ allStashes, className, isInElection, next, validators }: Pro
 
   return (
     <div className={className}>
-      <NewStake isInElection={isInElection} />
+      <NewStake />
       <ElectionBanner isInElection={isInElection} />
       <Table
         empty={t('No funds staked yet. Bond funds to validate or nominate a validator')}
@@ -72,7 +72,7 @@ function Actions ({ allStashes, className, isInElection, next, validators }: Pro
           <Account
             activeEra={activeEra}
             allStashes={allStashes}
-            isInElection={isInElection}
+            isDisabled={isInElection}
             isOwnStash={isOwnStash}
             key={stashId}
             next={next}

packages/page-staking/src/Actions/useUnbondDuration.ts

@@ -2,20 +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 { DeriveSessionInfo } from '@polkadot/api-derive/types';
+
 import BN from 'bn.js';
 import { useEffect, useState } from 'react';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
+const ONE = new BN(1);
+
 export default function useUnbondDuration (): BN | undefined {
   const { api } = useApi();
-  const eraLength = useCall<BN>(api.derive.session?.eraLength as any, []);
+  const sessionInfo = useCall<DeriveSessionInfo>(api.derive.session.info, []);
   const [duration, setDuration] = useState<BN | undefined>();
 
   useEffect((): void => {
-    eraLength && setDuration(
-      eraLength.mul(api.consts.staking?.bondingDuration)
+    // We check sessionLength, for aura this is not properly calculated (not exposed),
+    // so the actual real block value would be invalid here
+    sessionInfo?.sessionLength.gt(ONE) && setDuration(
+      sessionInfo.eraLength.mul(api.consts.staking.bondingDuration)
     );
-  }, [api, eraLength]);
+  }, [api, sessionInfo]);
 
   return duration;
 }

packages/page-staking/src/Overview/Address/index.tsx

@@ -105,8 +105,8 @@ function checkVisibility (api: ApiPromise, address: string, filterName: string,
 
 function Address ({ address, className, filterName, hasQueries, isAuthor, isElected, isFavorite, isMain, lastBlock, onlineCount, onlineMessage, points, setNominators, toggleFavorite }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
-  const accountInfo = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [address]);
-  const stakingInfo = useCall<DeriveStakingQuery>(isMain && api.derive.staking.query as any, [address]);
+  const accountInfo = useCall<DeriveAccountInfo>(api.derive.accounts.info, [address]);
+  const stakingInfo = useCall<DeriveStakingQuery>(isMain && api.derive.staking.query, [address]);
   const [{ commission, nominators, stakeOther, stakeOwn }, setStakingState] = useState<StakingState>({ nominators: [] });
   const [isVisible, setIsVisible] = useState(true);
 

packages/page-staking/src/Payouts/PayButton.tsx

@@ -13,7 +13,7 @@ import { useApi, useToggle } from '@polkadot/react-hooks';
 import { useTranslation } from '../translate';
 
 interface Props {
-  isInElection?: boolean;
+  isDisabled?: boolean;
   payout?: PayoutValidator | PayoutValidator[];
 }
 
@@ -40,7 +40,7 @@ function createExtrinsic (api: ApiPromise, payout: PayoutValidator | PayoutValid
     );
 }
 
-function PayButton ({ isInElection, payout }: Props): React.ReactElement<Props> {
+function PayButton ({ isDisabled, payout }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const { t } = useTranslation();
   const [isVisible, togglePayout] = useToggle();
@@ -103,7 +103,7 @@ function PayButton ({ isInElection, payout }: Props): React.ReactElement<Props>
       )}
       <Button
         icon='percent'
-        isDisabled={isInElection || isPayoutEmpty}
+        isDisabled={isDisabled || isPayoutEmpty}
         label={Array.isArray(payout) ? t('Payout all') : t('Payout')}
         onClick={togglePayout}
       />

packages/page-staking/src/Payouts/Stash.tsx

@@ -18,7 +18,7 @@ import { createErasString } from './util';
 
 interface Props {
   className?: string;
-  isInElection?: boolean;
+  isDisabled?: boolean;
   payout: PayoutStash;
   stakerPayoutsAfter: BN;
 }
@@ -37,12 +37,12 @@ function createPrevPayout (api: ApiPromise, payoutRewards: DeriveStakerReward[])
     : api.tx.utility.batch(payoutRewards.map((reward) => createPrevPayoutType(api, reward)));
 }
 
-function Stash ({ className, isInElection, payout: { available, rewards, stashId }, stakerPayoutsAfter }: Props): React.ReactElement<Props> | null {
+function Stash ({ className, isDisabled, payout: { available, rewards, stashId }, stakerPayoutsAfter }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const [extrinsic, setExtrinsic] = useState<SubmittableExtrinsic<'promise'> | null>(null);
   const [eraStr, setEraStr] = useState('');
-  const stakingAccount = useCall<DeriveStakingAccount>(api.derive.staking.account as any, [stashId]);
+  const stakingAccount = useCall<DeriveStakingAccount>(api.derive.staking.account, [stashId]);
 
   useEffect((): void => {
     rewards && setEraStr(
@@ -87,7 +87,7 @@ function Stash ({ className, isInElection, payout: { available, rewards, stashId
             accountId={stakingAccount.controllerId}
             extrinsic={extrinsic}
             icon='credit card outline'
-            isDisabled={!extrinsic || isInElection}
+            isDisabled={!extrinsic || isDisabled}
             isPrimary={false}
             label={t('Payout')}
             withSpinner={false}

packages/page-staking/src/Payouts/Validator.tsx

@@ -15,7 +15,7 @@ import { createErasString } from './util';
 
 interface Props {
   className?: string;
-  isInElection?: boolean;
+  isDisabled?: boolean;
   payout: PayoutValidator;
 }
 
@@ -25,7 +25,7 @@ interface State {
   numNominators: number;
 }
 
-function Payout ({ className, isInElection, payout }: Props): React.ReactElement<Props> {
+function Payout ({ className, isDisabled, payout }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [{ eraStr, nominators, numNominators }, setState] = useState<State>({
     eraStr: '',
@@ -79,7 +79,7 @@ function Payout ({ className, isInElection, payout }: Props): React.ReactElement
       </td>
       <td className='button'>
         <PayButton
-          isInElection={isInElection}
+          isDisabled={isDisabled}
           payout={payout}
         />
       </td>

packages/page-staking/src/Payouts/index.tsx

@@ -104,7 +104,7 @@ function Payouts ({ className, isInElection }: Props): React.ReactElement<Props>
       {api.tx.staking.payoutStakers && (
         <Button.Group>
           <PayButton
-            isInElection={isInElection}
+            isDisabled={isInElection}
             payout={validators}
           />
         </Button.Group>
@@ -123,7 +123,7 @@ function Payouts ({ className, isInElection }: Props): React.ReactElement<Props>
       >
         {stashes?.map((payout): React.ReactNode => (
           <Stash
-            isInElection={isInElection}
+            isDisabled={isInElection}
             key={payout.stashId}
             payout={payout}
             stakerPayoutsAfter={stakerPayoutsAfter}
@@ -143,7 +143,7 @@ function Payouts ({ className, isInElection }: Props): React.ReactElement<Props>
         >
           {validators?.map((payout): React.ReactNode => (
             <Validator
-              isInElection={isInElection}
+              isDisabled={isInElection}
               key={payout.validatorId}
               payout={payout}
             />

packages/page-staking/src/Query/ChartPoints.tsx

@@ -42,7 +42,7 @@ function ChartPoints ({ validatorId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [{ chart, labels }, setChart] = useState<ChartInfo>({ chart: [], labels: [] });
-  const stakerPoints = useCall<DeriveStakerPoints[]>(api.derive.staking.stakerPoints as any, [validatorId, true]);
+  const stakerPoints = useCall<DeriveStakerPoints[]>(api.derive.staking.stakerPoints, [validatorId, true]);
   const legends = useMemo(() => [
     t('points'),
     t('average')

packages/page-staking/src/Query/ChartRewards.tsx

@@ -56,9 +56,9 @@ function ChartRewards ({ validatorId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [{ chart, labels }, setChart] = useState<ChartInfo>({ chart: [], labels: [] });
-  const ownSlashes = useCall<DeriveOwnSlashes[]>(api.derive.staking.ownSlashes as any, [validatorId, true]);
-  const erasRewards = useCall<DeriveEraRewards[]>(api.derive.staking.erasRewards as any, []);
-  const stakerPoints = useCall<DeriveStakerPoints[]>(api.derive.staking.stakerPoints as any, [validatorId, true]);
+  const ownSlashes = useCall<DeriveOwnSlashes[]>(api.derive.staking.ownSlashes, [validatorId, true]);
+  const erasRewards = useCall<DeriveEraRewards[]>(api.derive.staking.erasRewards, []);
+  const stakerPoints = useCall<DeriveStakerPoints[]>(api.derive.staking.stakerPoints, [validatorId, true]);
   const { currency, divisor } = useMemo((): { currency: string; divisor: BN } => ({
     currency: formatBalance.getDefaults().unit,
     divisor: new BN('1'.padEnd(formatBalance.getDefaults().decimals + 1, '0'))

packages/page-staking/src/Query/ChartStake.tsx

@@ -50,7 +50,7 @@ function ChartStake ({ validatorId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [{ chart, labels }, setChart] = useState<ChartInfo>({ chart: [], labels: [] });
-  const ownExposure = useCall<DeriveOwnExposure[]>(api.derive.staking.ownExposure as any, [validatorId, true]);
+  const ownExposure = useCall<DeriveOwnExposure[]>(api.derive.staking.ownExposure, [validatorId, true]);
   const { currency, divisor } = useMemo((): { currency: string; divisor: BN } => ({
     currency: formatBalance.getDefaults().unit,
     divisor: new BN('1'.padEnd(formatBalance.getDefaults().decimals + 1, '0'))

packages/page-staking/src/Targets/index.tsx

@@ -171,7 +171,7 @@ function Targets ({ className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { allAccounts } = useAccounts();
-  const lastEra = useCall<BN>(api.derive.session.indexes as any, [], {
+  const lastEra = useCall<BN>(api.derive.session.indexes, [], {
     defaultValue: new BN(0),
     transform: ({ activeEra }: DeriveSessionIndexes) =>
       activeEra.gtn(0) ? activeEra.subn(1) : new BN(0)

packages/page-treasury/src/Overview/Summary.tsx

@@ -23,9 +23,9 @@ interface Props {
 function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const bestNumber = useCall<Balance>(api.derive.chain.bestNumber as any, []);
+  const bestNumber = useCall<Balance>(api.derive.chain.bestNumber, []);
   const spendPeriod = api.consts.treasury.spendPeriod;
-  const treasuryBalance = useCall<DeriveBalancesAccount>(api.derive.balances.account as any, [TREASURY_ACCOUNT]);
+  const treasuryBalance = useCall<DeriveBalancesAccount>(api.derive.balances.account, [TREASURY_ACCOUNT]);
 
   const value = treasuryBalance?.freeBalance.gtn(0)
     ? treasuryBalance.freeBalance.toString()

packages/react-components/src/AccountIndex.tsx

@@ -19,7 +19,7 @@ interface Props extends BareProps {
 
 function AccountIndex ({ children, className, defaultValue, label, style, value }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
-  const info = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [value]);
+  const info = useCall<DeriveAccountInfo>(api.derive.accounts.info, [value]);
   const [accountIndex, setAccountIndex] = useState<string | null>(null);
 
   useEffect((): void => {

packages/react-components/src/AccountName.tsx

@@ -178,7 +178,7 @@ function AccountName ({ children, className, defaultName, label, noName, onClick
   const { api } = useApi();
   const { isRegistrar, registrars } = useRegistrars(noName);
   const [isJudgementOpen, toggleJudgement] = useToggle();
-  const info = useCall<DeriveAccountInfo>(!noName && api.derive.accounts.info as any, [value]);
+  const info = useCall<DeriveAccountInfo>(!noName && api.derive.accounts.info, [value]);
   const [name, setName] = useState<React.ReactNode>(() => extractName((value || '').toString(), undefined, defaultName));
 
   // set the actual nickname, local name, accountIndex, accountId

packages/react-components/src/AddressToggle.tsx

@@ -48,7 +48,7 @@ function getIsFiltered (address: string, filter?: string, info?: DeriveAccountIn
 
 function AddressToggle ({ address, className, filter, isHidden, noName, noToggle, onChange, value }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
-  const info = useCall<DeriveAccountInfo>(!noName && api.derive.accounts.info as any, [address]);
+  const info = useCall<DeriveAccountInfo>(!noName && api.derive.accounts.info, [address]);
   const [isFiltered, setIsFiltered] = useState(false);
 
   useEffect((): void => {

packages/react-components/src/IdentityIcon.tsx

@@ -22,7 +22,7 @@ export function getIdentityTheme (systemName: string): 'substrate' {
 function IdentityIcon ({ className, onCopy, prefix, size, theme, value }: Props): React.ReactElement<Props> {
   const { api, isApiReady, systemName } = useApi();
   const { t } = useTranslation();
-  const info = useCall<DeriveAccountInfo>(isApiReady && api.derive.accounts.info as any, [value]);
+  const info = useCall<DeriveAccountInfo>(isApiReady && api.derive.accounts.info, [value]);
   const { queueAction } = useContext(StatusContext);
   const validators = useContext(ValidatorsContext);
   const [isValidator, setIsValidator] = useState(false);

packages/react-components/src/StakingUnbonding.tsx

@@ -29,7 +29,7 @@ function remainingBlocks (remainingEras: BN, { eraLength, eraProgress }: DeriveS
 
 function StakingUnbonding ({ className, stakingInfo }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
-  const progress = useCall<DeriveSessionProgress>(api.derive.session.progress as any, []);
+  const progress = useCall<DeriveSessionProgress>(api.derive.session.progress, []);
   const { t } = useTranslation();
 
   if (!stakingInfo?.unlocking || !progress) {

packages/react-components/src/Table/Body.tsx

@@ -77,8 +77,11 @@ export default React.memo(styled(Body)`
 
     &.button {
       text-align: right;
-      vertical-align: middle;
       white-space: nowrap;
+
+      > * {
+        vertical-align: middle;
+      }
     }
 
     &.combined {

packages/react-components/src/VoteValue.tsx

@@ -27,7 +27,7 @@ interface ValueState {
 function VoteValue ({ accountId, autoFocus, onChange }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all as any, [accountId]);
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [accountId]);
   const [{ selectedId, value }, setValue] = useState<ValueState>({});
 
   // TODO This may be useful elsewhere, so figure out a way to make this a utility

packages/react-hooks/src/useCall.ts

@@ -2,7 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Codec } from '@polkadot/types/types';
 import { CallOptions, CallParam, CallParams } from './types';
 
 import { useEffect, useRef, useState } from 'react';
@@ -10,17 +9,10 @@ import { isNull, isUndefined } from '@polkadot/util';
 
 import useIsMountedRef, { MountedRef } from './useIsMountedRef';
 
-interface TrackFnCallback {
-  (value: Codec): void;
-}
-
 type TrackFnResult = Promise<() => void>;
 
 interface TrackFn {
-  (a: CallParam, b: CallParam, c: CallParam, cb: TrackFnCallback): TrackFnResult;
-  (a: CallParam, b: CallParam, cb: TrackFnCallback): TrackFnResult;
-  (a: CallParam, cb: TrackFnCallback): TrackFnResult;
-  (cb: TrackFnCallback): TrackFnResult;
+  (...params: CallParam[]): TrackFnResult;
   meta?: {
     type: {
       isDoubleMap: boolean;

packages/react-hooks/src/useOwnEraRewards.ts

@@ -33,7 +33,7 @@ export default function useOwnEraRewards (): OwnRewards {
   const { api } = useApi();
   const mountedRef = useIsMountedRef();
   const stashIds = useOwnStashIds();
-  const available = useCall<[[string[]], DeriveStakerReward[][]]>(stashIds && api.derive.staking?.stakerRewardsMulti as any, [stashIds], { withParams: true });
+  const available = useCall<[[string[]], DeriveStakerReward[][]]>(stashIds && api.derive.staking?.stakerRewardsMulti, [stashIds], { withParams: true });
   const [state, setState] = useState<OwnRewards>({ rewardCount: 0 });
 
   useEffect((): void => {

packages/react-hooks/src/useOwnStashes.ts

@@ -36,8 +36,8 @@ export default function useOwnStashes (): [string, IsInKeyring][] | undefined {
   const { allAccounts, hasAccounts } = useAccounts();
   const mountedRef = useIsMountedRef();
   const { api } = useApi();
-  const ownBonded = useCall<Option<AccountId>[]>(hasAccounts && api.query.staking?.bonded.multi as any, [allAccounts]);
-  const ownLedger = useCall<Option<StakingLedger>[]>(hasAccounts && api.query.staking?.ledger.multi as any, [allAccounts]);
+  const ownBonded = useCall<Option<AccountId>[]>(hasAccounts && api.query.staking?.bonded.multi, [allAccounts]);
+  const ownLedger = useCall<Option<StakingLedger>[]>(hasAccounts && api.query.staking?.ledger.multi, [allAccounts]);
   const [state, setState] = useState<[string, IsInKeyring][] | undefined>();
 
   useEffect((): void => {

packages/react-query/src/Available.tsx

@@ -19,7 +19,7 @@ interface Props extends BareProps {
 
 function AvailableDisplay ({ children, className, label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all as any, [params]);
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [params]);
 
   return (
     <FormatBalance

packages/react-query/src/Balance.tsx

@@ -19,7 +19,7 @@ interface Props extends BareProps {
 
 function BalanceDisplay ({ children, className, label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all as any, [params]);
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [params]);
 
   return (
     <FormatBalance

packages/react-query/src/BalanceFree.tsx

@@ -19,7 +19,7 @@ interface Props extends BareProps {
 
 function BalanceFree ({ children, className, label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all as any, [params]);
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [params]);
 
   return (
     <FormatBalance

packages/react-query/src/BalanceVoting.tsx

@@ -19,7 +19,7 @@ interface Props extends BareProps {
 
 function BalanceVoting ({ children, className, label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all as any, [params]);
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [params]);
 
   return (
     <FormatBalance

packages/react-query/src/BestFinalized.tsx

@@ -16,7 +16,7 @@ interface Props extends BareProps {
 
 function BestFinalized ({ children, className, label, style }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const bestNumberFinalized = useCall<BlockNumber>(api.derive.chain.bestNumberFinalized as any, []);
+  const bestNumberFinalized = useCall<BlockNumber>(api.derive.chain.bestNumberFinalized, []);
 
   return (
     <div

packages/react-query/src/LockedVote.tsx

@@ -19,7 +19,7 @@ interface Props extends BareProps {
 
 function LockedVote ({ children, className, label, params }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
-  const info = useCall<DeriveCouncilVote>(api.derive.council.votesOf as any, [params]);
+  const info = useCall<DeriveCouncilVote>(api.derive.council.votesOf, [params]);
 
   if (!info?.stake.gtn(0)) {
     return null;

packages/react-query/src/Nonce.tsx

@@ -19,7 +19,7 @@ interface Props extends BareProps {
 
 function Nonce ({ children, className, label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all as any, [params]);
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [params]);
 
   return (
     <div className={className}>

packages/react-signer/src/Checks/Transfer.tsx

@@ -30,7 +30,7 @@ interface State extends ExtraFees {
 function Transfer ({ amount, fees, onChange, recipientId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all as any, [recipientId]);
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances.all, [recipientId]);
   const [{ isCreation, isNoEffect }, setState] = useState<State>({
     extraAmount: new BN(0),
     extraFees: new BN(0),