refactor: better useCall hook type inference

packages/apps/src/Content/Status.tsx

@@ -66,7 +66,7 @@ function Status ({ optionsAll }: Props): React.ReactElement<Props> {
   const { api, isApiReady } = useApi();
   const { allAccounts } = useAccounts();
   const { t } = useTranslation();
-  const events = useCall<EventRecord[]>(isApiReady && api.query.system?.events);
+  const events = useCall(isApiReady && api.query.system?.events);
 
   useEffect((): void => {
     const filtered = filterEvents(allAccounts, t, optionsAll, events);

packages/apps/src/Menu/ChainInfo.tsx

@@ -1,8 +1,6 @@
 // Copyright 2017-2023 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { RuntimeVersion } from '@polkadot/types/interfaces';
-
 import React from 'react';
 
 import { ChainImg, Icon, styled } from '@polkadot/react-components';
@@ -17,7 +15,7 @@ interface Props {
 
 function ChainInfo ({ className }: Props): React.ReactElement<Props> {
   const { api, isApiReady } = useApi();
-  const runtimeVersion = useCall<RuntimeVersion>(isApiReady && api.rpc.state.subscribeRuntimeVersion);
+  const runtimeVersion = useCall(isApiReady && api.rpc.state.subscribeRuntimeVersion);
   const { ipnsChain } = useIpfs();
   const [isEndpointsVisible, toggleEndpoints] = useToggle();
   const canToggle = !ipnsChain;

packages/apps/src/Menu/index.tsx

@@ -4,7 +4,6 @@
 import type { TFunction } from 'i18next';
 import type { Route, Routes } from '@polkadot/apps-routing/types';
 import type { ApiProps } from '@polkadot/react-api/types';
-import type { AccountId } from '@polkadot/types/interfaces';
 import type { Group, Groups, ItemRoute } from './types.js';
 
 import React, { useMemo, useRef } from 'react';
@@ -92,7 +91,7 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
   const { allAccounts, hasAccounts } = useAccounts();
   const apiProps = useApi();
   const { allowTeleport } = useTeleport();
-  const sudoKey = useCall<AccountId>(apiProps.isApiReady && apiProps.api.query.sudo?.key);
+  const sudoKey = useCall(apiProps.isApiReady && apiProps.api.query.sudo?.key);
   const location = useLocation();
 
   const externalRef = useRef(createExternals(t));

packages/apps/src/WarmUp.tsx

@@ -7,9 +7,9 @@ import { useApi, useCall } from '@polkadot/react-hooks';
 
 function WarmUp (): React.ReactElement {
   const { api, isApiReady } = useApi();
-  const indexes = useCall<unknown>(isApiReady && api.derive.accounts?.indexes);
-  const registrars = useCall<unknown>(isApiReady && api.query.identity?.registrars);
-  const issuance = useCall<unknown>(isApiReady && api.query.balances?.totalIssuance);
+  const indexes = useCall(isApiReady && api.derive.accounts?.indexes);
+  const registrars = useCall(isApiReady && api.query.identity?.registrars);
+  const issuance = useCall(isApiReady && api.query.balances?.totalIssuance);
   const [hasValues, setHasValues] = useState(false);
 
   useEffect((): void => {

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

@@ -3,7 +3,7 @@
 
 import type { ApiPromise } from '@polkadot/api';
 import type { SubmittableExtrinsic } from '@polkadot/api/types';
-import type { DeriveDemocracyLock, DeriveStakingAccount } from '@polkadot/api-derive/types';
+import type { DeriveStakingAccount } from '@polkadot/api-derive/types';
 import type { Ledger } from '@polkadot/hw-ledger';
 import type { ActionStatus } from '@polkadot/react-components/Status/types';
 import type { Option } from '@polkadot/types';
@@ -155,8 +155,8 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
   const bestNumber = useBestNumber();
   const balancesAll = useBalancesAll(address);
   const stakingInfo = useStakingInfo(address);
-  const democracyLocks = useCall<DeriveDemocracyLock[]>(api.api.derive.democracy?.locks, [address]);
-  const recoveryInfo = useCall<RecoveryConfig | null>(api.api.query.recovery?.recoverable, [address], transformRecovery);
+  const democracyLocks = useCall(api.api.derive.democracy?.locks, [address]);
+  const recoveryInfo = useCall(api.api.query.recovery?.recoverable, [address], transformRecovery);
   const multiInfos = useMultisigApprovals(address);
   const proxyInfo = useProxies(address);
   const { flags: { isDevelopment, isEditable, isEthereum, isExternal, isHardware, isInjected, isMultisig, isProxied }, genesisHash, identity, name: accName, onSetGenesisHash, tags } = useAccountInfo(address);

packages/page-accounts/src/Accounts/useMultisigApprovals.ts

@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 
 import { createNamedHook, useApi, useBlockEvents, useIncrement, useIsMountedRef } from '@polkadot/react-hooks';
 
-function useMultisigApprovalsImpl (address: string): [H256, Multisig][] | undefined {
+function useMultisigApprovalsImpl (address: string) {
   const { events } = useBlockEvents();
   const { api } = useApi();
   const [multiInfos, setMultiInfos] = useState<[H256, Multisig][] | undefined>();

packages/page-accounts/src/modals/IdentityMain.tsx

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { ApiPromise } from '@polkadot/api';
-import type { Data, Option } from '@polkadot/types';
-import type { IdentityInfo, Registration } from '@polkadot/types/interfaces';
+import type { Data } from '@polkadot/types';
+import type { IdentityInfo } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useState } from 'react';
 
@@ -70,7 +70,7 @@ function checkValue (hasValue: boolean, value: string | null | undefined, minLen
 function IdentityMain ({ address, className = '', onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const identityOpt = useCall<Option<Registration>>(api.query.identity.identityOf, [address]);
+  const identityOpt = useCall(api.query.identity.identityOf, [address]);
   const [{ info, okAll, okDiscord, okDisplay, okEmail, okLegal, okRiot, okTwitter, okWeb }, setInfo] = useState<ValueState>({ info: {}, okAll: false });
   const [hasEmail, setHasEmail] = useState(false);
   const [hasLegal, setHasLegal] = useState(false);

packages/page-accounts/src/modals/IdentitySub.tsx

@@ -87,7 +87,7 @@ function IdentitySubModal ({ address, className, onClose }: Props): React.ReactE
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const queryIds = useSubidentities(address);
-  const queryInfos = useCall<[[string[]], Option<ITuple<[AccountId, Data]>>[]]>(queryIds && queryIds.length !== 0 && api.query.identity.superOf.multi, [queryIds], transformInfo);
+  const queryInfos: [[string[]], Option<ITuple<[AccountId, Data]>>[]] | undefined = useCall(queryIds && queryIds.length !== 0 && api.query.identity.superOf.multi, [queryIds], transformInfo);
   const [infos, setInfos] = useState<[string, string][] | undefined>();
 
   useEffect((): void => {

packages/page-accounts/src/modals/InputValidateAmount.tsx

@@ -1,7 +1,6 @@
 // Copyright 2017-2023 @polkadot/app-staking authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { DeriveBalancesAll } from '@polkadot/api-derive/types';
 import type { BN } from '@polkadot/util';
 import type { AmountValidateState } from '../Accounts/types.js';
 
@@ -22,7 +21,7 @@ interface Props {
 function ValidateAmount ({ amount, delegatingAccount, onError }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const delegatingAccountBalance = useCall<DeriveBalancesAll>(api.derive.balances?.all, [delegatingAccount]);
+  const delegatingAccountBalance = useCall(api.derive.balances?.all, [delegatingAccount]);
   const [{ error, warning }, setResult] = useState<AmountValidateState>({ error: null, warning: null });
 
   useEffect((): void => {

packages/page-addresses/src/modals/Create.tsx

@@ -1,7 +1,6 @@
 // Copyright 2017-2023 @polkadot/app-addresses authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { DeriveAccountInfo } from '@polkadot/api-derive/types';
 import type { ActionStatus } from '@polkadot/react-components/Status/types';
 import type { ModalProps as Props } from '../types.js';
 
@@ -33,7 +32,7 @@ function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props>
   const { api, isEthereum } = useApi();
   const [{ isNameValid, name }, setName] = useState<NameState>({ isNameValid: false, name: '' });
   const [{ address, addressInput, isAddressExisting, isAddressValid }, setAddress] = useState<AddrState>({ address: '', addressInput: '', isAddressExisting: false, isAddressValid: false, isPublicKey: false });
-  const info = useCall<DeriveAccountInfo>(!!address && isAddressValid && api.derive.accounts.info, [address]);
+  const info = useCall(!!address && isAddressValid && api.derive.accounts.info, [address]);
   const isValid = (isAddressValid && isNameValid) && !!info?.accountId;
 
   const _onChangeAddress = useCallback(

packages/page-alliance/src/Members/Member.tsx

@@ -54,7 +54,7 @@ function Member ({ bestNumber, className, info: { accountId, role }, isPrime, is
       <td className='address all relative'>
         <AddressSmall value={accountId} />
         <div className='absolute'>
-          {(info && info.isRetiringAt && (
+          {(info && info.retiringAt && (
             <Tag
               color='yellow'
               hover={t<string>('Is retiring')}
@@ -92,7 +92,7 @@ function Member ({ bestNumber, className, info: { accountId, role }, isPrime, is
               <Menu>
                 {hasNotice && (
                   <Menu.Item
-                    isDisabled={!!(info && info.isRetiringAt)}
+                    isDisabled={!!(info && info.retiringAt)}
                     label={t<string>('Announce retirement')}
                     onClick={doNotice}
                   />
@@ -103,7 +103,7 @@ function Member ({ bestNumber, className, info: { accountId, role }, isPrime, is
                       info.isUpForKicking ||
                       (
                         hasNotice
-                          ? !bestNumber || !info.isRetiringAt || info.isRetiringAt.lt(bestNumber)
+                          ? !bestNumber || !info.retiringAt || info.retiringAt.lt(bestNumber)
                           : false
                       )
                     )

packages/page-alliance/src/index.tsx

@@ -1,8 +1,6 @@
 // Copyright 2017-2023 @polkadot/app-alliance authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Hash } from '@polkadot/types/interfaces';
-
 import React, { useCallback, useMemo } from 'react';
 import { Route, Routes } from 'react-router';
 
@@ -32,7 +30,7 @@ const DEFAULT_THRESHOLD = 2 / 3;
 function AllianceApp ({ basePath, className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const proposalHashes = useCall<Hash[]>(api.derive.alliance.proposalHashes);
+  const proposalHashes = useCall(api.derive.alliance.proposalHashes);
   const { isMember: isVoter, members: voters, prime } = useCollectiveMembers('alliance');
   const accouncements = useAnnoucements();
   const members = useMembers();

packages/page-alliance/src/useAnnoucements.ts

@@ -13,10 +13,10 @@ const OPT_ANN = {
     cids.map(createCid)
 };
 
-function useAnnouncementsImpl (): Cid[] | undefined {
+function useAnnouncementsImpl () {
   const { api } = useApi();
 
-  return useCall<Cid[]>(api.query.alliance.announcements, [], OPT_ANN);
+  return useCall(api.query.alliance.announcements, [], OPT_ANN);
 }
 
 export default createNamedHook('useAnnouncements', useAnnouncementsImpl);

packages/page-alliance/src/useCounter.ts

@@ -7,7 +7,7 @@ import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
 function useCounterImpl (): number {
   const { api, isApiReady } = useApi();
-  const proposalHashes = useCall<unknown[]>(isApiReady && api.derive.alliance.proposalHashes);
+  const proposalHashes = useCall(isApiReady && api.derive.alliance.proposalHashes);
 
   return useMemo(
     () => (proposalHashes && proposalHashes.length) || 0,

packages/page-alliance/src/useMemberInfo.ts

@@ -2,17 +2,16 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { bool, Option, UInt } from '@polkadot/types';
-import type { MemberInfo } from './types.js';
 
 import { useMemo } from 'react';
 
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
-function useMemberInfoImpl (accountId: string): MemberInfo | undefined {
+function useMemberInfoImpl (accountId: string) {
   const { api } = useApi();
-  const upForKicking = useCall<bool>(api.query.alliance.upForKicking, [accountId]);
-  const retiringAt = useCall<Option<UInt>>(api.query.alliance.retiringMembers, [accountId]);
-  const depositOf = useCall<Option<UInt>>(api.query.alliance.depositOf, [accountId]);
+  const upForKicking: bool | undefined = useCall(api.query.alliance.upForKicking, [accountId]);
+  const retiringAt: Option<UInt> | undefined = useCall(api.query.alliance.retiringMembers, [accountId]);
+  const depositOf: Option<UInt> | undefined = useCall(api.query.alliance.depositOf, [accountId]);
 
   return useMemo(
     () => depositOf && {

packages/page-alliance/src/useMembers.ts

@@ -34,12 +34,12 @@ function addMembers (prev: Member[], ...query: AccountId32[][]): Member[] {
   return all.reverse();
 }
 
-function useMembersImpl (): Member[] | undefined {
+function useMembersImpl () {
   const { api } = useApi();
   const [state, setState] = useState<Member[] | undefined>();
-  const role0 = useCall<AccountId32[]>(api.query.alliance.members, [ROLES[0]]);
-  const role1 = useCall<AccountId32[]>(api.query.alliance.members, [ROLES[1]]);
-  const role2 = useCall<AccountId32[]>(api.query.alliance.members, [ROLES[2]]);
+  const role0 = useCall(api.query.alliance.members, [ROLES[0]]);
+  const role1 = useCall(api.query.alliance.members, [ROLES[1]]);
+  const role2 = useCall(api.query.alliance.members, [ROLES[2]]);
 
   useEffect((): void => {
     role0 && role1 && role2 &&

packages/page-alliance/src/useRule.ts

@@ -16,10 +16,10 @@ const OPT_RULE = {
       : { cid: null, hasRule: false }
 };
 
-function useRuleImpl (): Rule | undefined {
+function useRuleImpl () {
   const { api } = useApi();
 
-  return useCall<Rule>(api.query.alliance.rule, [], OPT_RULE);
+  return useCall(api.query.alliance.rule, [], OPT_RULE);
 }
 
 export default createNamedHook('useRule', useRuleImpl);

packages/page-alliance/src/useUnscrupulous.ts

@@ -3,7 +3,6 @@
 
 import type { Bytes } from '@polkadot/types';
 import type { AccountId32 } from '@polkadot/types/interfaces';
-import type { Unscrupulous } from './types.js';
 
 import { useMemo } from 'react';
 
@@ -23,10 +22,10 @@ const OPT_WEB = {
     mapString(websites.filter((b) => b.isAscii))
 };
 
-function useUnscrupulousImpl (): Unscrupulous | undefined {
+function useUnscrupulousImpl () {
   const { api } = useApi();
-  const accounts = useCall<string[]>(api.query.alliance.unscrupulousAccounts, [], OPT_ACC);
-  const websites = useCall<string[]>(api.query.alliance.unscrupulousWebsites, [], OPT_WEB);
+  const accounts = useCall(api.query.alliance.unscrupulousAccounts, [], OPT_ACC);
+  const websites = useCall(api.query.alliance.unscrupulousWebsites, [], OPT_WEB);
 
   return useMemo(
     () => accounts && websites && { accounts, websites },

packages/page-assets/src/Balances/useBalances.ts

@@ -49,7 +49,7 @@ function useBalancesImpl (id?: BN | null): AccountResult[] | null {
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const keys = useMemo(
-    () => [allAccounts.map((a) => [id, a])],
+    () => [allAccounts.map((a) => [id, a])] as const,
     [allAccounts, id]
   );
   const query = useCall(keys && api.query.assets.account.multi, keys, OPTS);

packages/page-assets/src/useAssetIds.ts

@@ -29,7 +29,7 @@ function filter (records: EventRecord[]): Changes<u32> {
   return { added, removed };
 }
 
-function useAssetIdsImpl (): u32[] | undefined {
+function useAssetIdsImpl () {
   const { api } = useApi();
   const startValue = useMapKeys(api.query.assets.asset, EMPTY_PARAMS, OPT_KEY);
 

packages/page-assets/src/useAssetInfos.ts

@@ -48,11 +48,11 @@ function extractInfo (allAccounts: string[], id: BN, optDetails: Option<PalletAs
   };
 }
 
-function useAssetInfosImpl (ids?: BN[]): AssetInfo[] | undefined {
+function useAssetInfosImpl (ids?: BN[]) {
   const { api } = useApi();
   const { allAccounts } = useAccounts();
-  const metadata = useCall<[[BN[]], PalletAssetsAssetMetadata[]]>(api.query.assets.metadata.multi, [ids], QUERY_OPTS);
-  const details = useCall<[[BN[]], Option<PalletAssetsAssetDetails>[]]>(api.query.assets.asset.multi, [ids], QUERY_OPTS);
+  const metadata: [[BN[]], PalletAssetsAssetMetadata[]] | undefined = useCall(api.query.assets.metadata.multi, [ids], QUERY_OPTS);
+  const details: [[BN[]], Option<PalletAssetsAssetDetails>[]] | undefined = useCall(api.query.assets.asset.multi, [ids], QUERY_OPTS);
   const [state, setState] = useState<AssetInfo[] | undefined>();
 
   useEffect((): void => {

packages/page-bounties/src/hooks/useBalance.ts

@@ -1,15 +1,12 @@
 // Copyright 2017-2023 @polkadot/app-bounties authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { DeriveBalancesAll } from '@polkadot/api-derive/types';
-import type { Balance } from '@polkadot/types/interfaces';
-
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
-function useBalanceImpl (accountId: string | null): Balance | undefined {
+function useBalanceImpl (accountId: string | null) {
   const { api } = useApi();
 
-  return useCall<DeriveBalancesAll>(api.derive.balances?.all, [accountId])?.availableBalance;
+  return useCall(api.derive.balances?.all, [accountId])?.availableBalance;
 }
 
 export const useBalance = createNamedHook('useBalance', useBalanceImpl);

packages/page-bounties/src/hooks/useBounties.tsx

@@ -73,9 +73,9 @@ function getStatics (api: ApiPromise): BountyApiStatics {
 
 function useBountiesImpl (): BountyApi {
   const { api } = useApi();
-  const bounties = useCall<DeriveBounties>(api.derive.bounties.bounties);
-  const bountyCount = useCall<BN>((api.query.bounties || api.query.treasury).bountyCount);
-  const childCount = useCall<BN>(api.query.childBounties?.childBountyCount);
+  const bounties = useCall(api.derive.bounties.bounties);
+  const bountyCount = useCall((api.query.bounties || api.query.treasury).bountyCount);
+  const childCount = useCall(api.query.childBounties?.childBountyCount);
   const bestNumber = useBestNumber();
 
   const statics = useMemo(

packages/page-bounties/src/useCounter.ts

@@ -1,15 +1,13 @@
 // Copyright 2017-2023 @polkadot/app-bounties authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { DeriveBounties } from '@polkadot/api-derive/types';
-
 import { useMemo } from 'react';
 
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
 function useCounterImpl (): number {
   const { api, isApiReady } = useApi();
-  const bounties = useCall<DeriveBounties>(isApiReady && api.derive.bounties?.bounties);
+  const bounties = useCall(isApiReady && api.derive.bounties?.bounties);
 
   return useMemo(
     () => bounties?.length || 0,

packages/page-calendar/src/useScheduled.ts

@@ -202,13 +202,13 @@ function useScheduledImpl (): EntryInfoTyped[] {
   const blockTime = useBlockInterval();
   const bestNumber = useBestNumber();
   const leaseRangeMax = useLeaseRangeMax();
-  const auctionInfo = useCall<Option<ITuple<[LeasePeriodOf, BlockNumber]>>>(api.query.auctions?.auctionInfo);
-  const councilMotions = useCall<DeriveCollectiveProposal[]>(api.derive.council?.proposals);
-  const dispatches = useCall<DeriveDispatch[]>(api.derive.democracy?.dispatchQueue);
-  const referendums = useCall<DeriveReferendumExt[]>(api.derive.democracy?.referendums);
-  const scheduled = useCall<ScheduleEntry[]>(api.query.scheduler?.agenda?.entries);
-  const sessionInfo = useCall<DeriveSessionProgress>(api.derive.session?.progress);
-  const slashes = useCall<SlashEntry[]>(api.query.staking?.unappliedSlashes.entries);
+  const auctionInfo: Option<ITuple<[LeasePeriodOf, BlockNumber]>> | undefined = useCall(api.query.auctions?.auctionInfo);
+  const councilMotions: DeriveCollectiveProposal[] | undefined = useCall(api.derive.council?.proposals);
+  const dispatches: DeriveDispatch[] | undefined = useCall(api.derive.democracy?.dispatchQueue);
+  const referendums: DeriveReferendumExt[] | undefined = useCall(api.derive.democracy?.referendums);
+  const scheduled: ScheduleEntry[] | undefined = useCall(api.query.scheduler?.agenda?.entries);
+  const sessionInfo: DeriveSessionProgress | undefined = useCall(api.derive.session?.progress);
+  const slashes: SlashEntry[] | undefined = useCall(api.query.staking?.unappliedSlashes.entries);
   const [state, setState] = useState<EntryInfoTyped[]>([]);
 
   useEffect((): void => {