Hooks (most, no generic) via createNamedHook (#6451)

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

@@ -3,9 +3,9 @@
 
 import { useMemo } from 'react';
 
-import { useAccounts, useAddresses } from '@polkadot/react-hooks';
+import { createNamedHook, useAccounts, useAddresses } from '@polkadot/react-hooks';
 
-export default function useKnownAddresses (exclude?: string): string[] {
+function useKnownAddressesImpl (exclude?: string): string[] {
   const { allAccounts } = useAccounts();
   const { allAddresses } = useAddresses();
 
@@ -14,3 +14,5 @@ export default function useKnownAddresses (exclude?: string): string[] {
     [allAccounts, allAddresses, exclude]
   );
 }
+
+export default createNamedHook('useKnownAddresses', useKnownAddressesImpl);

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

@@ -6,10 +6,10 @@ import type { H256, Multisig } from '@polkadot/types/interfaces';
 
 import { useContext, useEffect, useState } from 'react';
 
-import { useApi, useIncrement, useIsMountedRef } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useIncrement, useIsMountedRef } from '@polkadot/react-hooks';
 import { EventsContext } from '@polkadot/react-query';
 
-export default function useMultisigApprovals (address: string): [H256, Multisig][] {
+function useMultisigApprovalsImpl (address: string): [H256, Multisig][] {
   const { events } = useContext(EventsContext);
   const { api } = useApi();
   const [multiInfos, setMultiInfos] = useState<[H256, Multisig][]>([]);
@@ -49,3 +49,5 @@ export default function useMultisigApprovals (address: string): [H256, Multisig]
 
   return multiInfos;
 }
+
+export default createNamedHook('useMultisigApprovals', useMultisigApprovalsImpl);

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

@@ -3,19 +3,20 @@
 
 import type BN from 'bn.js';
 import type { Vec } from '@polkadot/types';
-import type { AccountId, BalanceOf, ProxyDefinition, ProxyType } from '@polkadot/types/interfaces';
+import type { AccountId, BalanceOf } from '@polkadot/types/interfaces';
+import type { NodeRuntimeProxyType, PalletProxyProxyDefinition } from '@polkadot/types/lookup';
 import type { ITuple } from '@polkadot/types/types';
 
 import { useEffect, useState } from 'react';
 
-import { useAccounts, useApi, useIsMountedRef } from '@polkadot/react-hooks';
+import { createNamedHook, useAccounts, useApi, useIsMountedRef } from '@polkadot/react-hooks';
 import { BN_ZERO } from '@polkadot/util';
 
 interface Proxy {
   address: string;
   delay: BN;
   isOwned: boolean;
-  type: ProxyType;
+  type: NodeRuntimeProxyType;
 }
 
 interface State {
@@ -30,7 +31,7 @@ const EMPTY_STATE: State = {
   proxies: []
 };
 
-function createProxy (allAccounts: string[], delegate: AccountId, type: ProxyType, delay = BN_ZERO): Proxy {
+function createProxy (allAccounts: string[], delegate: AccountId, type: NodeRuntimeProxyType, delay = BN_ZERO): Proxy {
   const address = delegate.toString();
 
   return {
@@ -41,7 +42,7 @@ function createProxy (allAccounts: string[], delegate: AccountId, type: ProxyTyp
   };
 }
 
-export default function useProxies (address?: string | null): State {
+function useProxiesImpl (address?: string | null): State {
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const mountedRef = useIsMountedRef();
@@ -52,13 +53,13 @@ export default function useProxies (address?: string | null): State {
 
     address && api.query.proxy &&
       api.query.proxy
-        .proxies<ITuple<[Vec<ITuple<[AccountId, ProxyType]> | ProxyDefinition>, BalanceOf]>>(address)
+        .proxies<ITuple<[Vec<ITuple<[AccountId, NodeRuntimeProxyType]> | PalletProxyProxyDefinition>, BalanceOf]>>(address)
         .then(([_proxies]): void => {
           const proxies = api.tx.proxy.addProxy.meta.args.length === 3
-            ? (_proxies as ProxyDefinition[]).map(({ delay, delegate, proxyType }) =>
+            ? (_proxies as PalletProxyProxyDefinition[]).map(({ delay, delegate, proxyType }) =>
               createProxy(allAccounts, delegate, proxyType, delay)
             )
-            : (_proxies as [AccountId, ProxyType][]).map(([delegate, proxyType]) =>
+            : (_proxies as [AccountId, NodeRuntimeProxyType][]).map(([delegate, proxyType]) =>
               createProxy(allAccounts, delegate, proxyType)
             );
           const owned = proxies.filter(({ isOwned }) => isOwned);
@@ -74,3 +75,5 @@ export default function useProxies (address?: string | null): State {
 
   return known;
 }
+
+export default createNamedHook('useProxies', useProxiesImpl);

packages/page-accounts/src/useCounter.ts

@@ -1,10 +1,12 @@
 // Copyright 2017-2021 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { useAccounts } from '@polkadot/react-hooks';
+import { createNamedHook, useAccounts } from '@polkadot/react-hooks';
 
-export default function useCounter (): string | null {
+function useCounterImpl (): string | null {
   const { hasAccounts } = useAccounts();
 
   return hasAccounts ? null : '!';
 }
+
+export default createNamedHook('useCounter', useCounterImpl);

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

@@ -4,7 +4,7 @@
 import type BN from 'bn.js';
 import type { PalletAssetsAssetBalance } from '@polkadot/types/lookup';
 
-import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 
 interface BalanceResult {
   accountId: string;
@@ -29,10 +29,12 @@ const queryOptions = {
   withParamsTransform: true
 };
 
-export default function useBalances (id?: BN | null): BalanceResult[] | null {
+function useBalancesImpl (id?: BN | null): BalanceResult[] | null {
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const query = useCall(id && api.query.assets.account.multi, id && [allAccounts.map((a) => [id, a])], queryOptions);
 
   return (query && id && (query.assetId === id) && query.balances) || null;
 }
+
+export default createNamedHook('useBalances', useBalancesImpl);

packages/page-assets/src/useAssetIds.ts

@@ -4,7 +4,7 @@
 import type { StorageKey } from '@polkadot/types';
 import type { AssetId } from '@polkadot/types/interfaces';
 
-import { useApi, useEventTrigger, useMapKeys } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useEventTrigger, useMapKeys } from '@polkadot/react-hooks';
 
 function extractAssetIds (keys: StorageKey<[AssetId]>[]): AssetId[] {
   return keys
@@ -12,9 +12,11 @@ function extractAssetIds (keys: StorageKey<[AssetId]>[]): AssetId[] {
     .sort((a, b) => a.cmp(b));
 }
 
-export default function useAssetIds (): AssetId[] | undefined {
+function useAssetIdsImpl (): AssetId[] | undefined {
   const { api } = useApi();
   const trigger = useEventTrigger([api.events.assets.Created, api.events.assets.Destroyed]);
 
   return useMapKeys(api.query.assets.asset, { at: trigger.blockHash, transform: extractAssetIds });
 }
+
+export default createNamedHook('useAssetIds', useAssetIdsImpl);

packages/page-assets/src/useAssetInfos.ts

@@ -9,7 +9,7 @@ import type { AssetInfo } from './types';
 
 import { useEffect, useState } from 'react';
 
-import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 
 const EMPTY_FLAGS = {
   isAdminMe: false,
@@ -48,7 +48,7 @@ function extractInfo (allAccounts: string[], id: BN, optDetails: Option<PalletAs
   };
 }
 
-export default function useAssetInfos (ids?: BN[]): AssetInfo[] | undefined {
+function useAssetInfosImpl (ids?: BN[]): AssetInfo[] | undefined {
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const metadata = useCall<[[BN[]], PalletAssetsAssetMetadata[]]>(api.query.assets.metadata.multi, [ids], QUERY_OPTS);
@@ -66,3 +66,5 @@ export default function useAssetInfos (ids?: BN[]): AssetInfo[] | undefined {
 
   return state;
 }
+
+export default createNamedHook('useAssetInfos', useAssetInfosImpl);

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

@@ -4,10 +4,12 @@
 import type { Balance } from '@polkadot/types/interfaces';
 
 import { DeriveBalancesAll } from '@polkadot/api-derive/types';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
-export function useBalance (accountId: string | null): Balance | undefined {
+function useBalanceImpl (accountId: string | null): Balance | undefined {
   const { api } = useApi();
 
   return useCall<DeriveBalancesAll>(api.derive.balances?.all, [accountId])?.availableBalance;
 }
+
+export const useBalance = createNamedHook('useBalance', useBalanceImpl);

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

@@ -5,7 +5,7 @@ import type BN from 'bn.js';
 import type { SubmittableExtrinsicFunction } from '@polkadot/api/types';
 
 import { DeriveBounties } from '@polkadot/api-derive/types';
-import { useApi, useBestNumber, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useBestNumber, useCall } from '@polkadot/react-hooks';
 import { BalanceOf, BlockNumber, BountyIndex } from '@polkadot/types/interfaces';
 
 export type BountyApi = {
@@ -29,7 +29,7 @@ export type BountyApi = {
   unassignCurator: SubmittableExtrinsicFunction<'promise'>;
 };
 
-export function useBounties (): BountyApi {
+function useBountiesImpl (): BountyApi {
   const { api } = useApi();
   const bounties = useCall<DeriveBounties>(api.derive.bounties.bounties);
   const bountyIndex = useCall<BountyIndex>((api.query.bounties || api.query.treasury).bountyCount);
@@ -72,3 +72,5 @@ export function useBounties (): BountyApi {
     unassignCurator
   };
 }
+
+export const useBounties = createNamedHook('useBounties', useBountiesImpl);

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

@@ -1,14 +1,18 @@
 // Copyright 2017-2021 @polkadot/app-bounties authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { BountyStatusType } from '@polkadot/app-bounties/types';
+
 import { useCallback } from 'react';
 
 import { getBountyStatus } from '@polkadot/app-bounties/helpers';
-import { BountyStatusType } from '@polkadot/app-bounties/types';
+import { createNamedHook } from '@polkadot/react-hooks';
 import { BountyStatus } from '@polkadot/types/interfaces';
 
-export function useBountyStatus (status: BountyStatus): BountyStatusType {
+function useBountyStatusImpl (status: BountyStatus): BountyStatusType {
   const updateStatus = useCallback(() => getBountyStatus(status), [status]);
 
   return updateStatus();
 }
+
+export const useBountyStatus = createNamedHook('useBountyStatus', useBountyStatusImpl);

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

@@ -5,32 +5,34 @@ import type { AccountId } from '@polkadot/types/interfaces';
 
 import { useMemo } from 'react';
 
-import { useAccounts, useCollectiveMembers } from '@polkadot/react-hooks';
+import { createNamedHook, useAccounts, useCollectiveMembers } from '@polkadot/react-hooks';
 
 import { UserRole } from '../types';
 
 export type UserRolesInfo = { roles: UserRole[], isCurator: boolean };
 
-export function useUserRole (curatorId?: AccountId): UserRolesInfo {
+function useUserRoleImpl (curatorId?: AccountId): UserRolesInfo {
   const { allAccounts, hasAccounts } = useAccounts();
-
   const { isMember } = useCollectiveMembers('council');
 
-  const isCurator = useMemo(() => curatorId && allAccounts.includes(curatorId.toString()), [allAccounts, curatorId]);
+  return useMemo((): UserRolesInfo => {
+    const isCurator = !!curatorId && allAccounts.includes(curatorId.toString());
+    const roles: UserRole[] = [];
 
-  const roles: UserRole[] = [];
+    if (isCurator) {
+      roles.push('Curator');
+    }
 
-  if (isCurator) {
-    roles.push('Curator');
-  }
+    if (isMember) {
+      roles.push('Member');
+    }
 
-  if (isMember) {
-    roles.push('Member');
-  }
+    if (hasAccounts) {
+      roles.push('User');
+    }
 
-  if (hasAccounts) {
-    roles.push('User');
-  }
-
-  return { isCurator: !!isCurator, roles };
+    return { isCurator, roles };
+  }, [allAccounts, curatorId, hasAccounts, isMember]);
 }
+
+export const useUserRole = createNamedHook('useUserRole', useUserRoleImpl);

packages/page-bounties/src/useCounter.ts

@@ -4,9 +4,9 @@
 import { useMemo } from 'react';
 
 import { DeriveBounties } from '@polkadot/api-derive/types';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
-export default function useCounter (): number {
+function useCounterImpl (): number {
   const { api, isApiReady } = useApi();
   const bounties = useCall<DeriveBounties>(isApiReady && api.derive.bounties?.bounties);
 
@@ -15,3 +15,5 @@ export default function useCounter (): number {
     [bounties]
   );
 }
+
+export default createNamedHook('useCounter', useCounterImpl);

packages/page-calendar/src/useScheduled.ts

@@ -11,7 +11,7 @@ import type { EntryInfo, EntryInfoTyped, EntryType } from './types';
 import { useEffect, useState } from 'react';
 
 import { useLeaseRangeMax } from '@polkadot/app-parachains/useLeaseRanges';
-import { useApi, useBestNumber, useBlockTime, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useBestNumber, useBlockTime, useCall } from '@polkadot/react-hooks';
 import { BN_ONE, BN_ZERO } from '@polkadot/util';
 
 interface DateExt {
@@ -196,7 +196,7 @@ function addFiltered (state: EntryInfoTyped[], types: [EntryType, EntryInfo[]][]
 }
 
 // TODO council votes, tips closing
-export default function useScheduled (): EntryInfo[] {
+function useScheduledImpl (): EntryInfo[] {
   const { api } = useApi();
   const [blockTime] = useBlockTime();
   const bestNumber = useBestNumber();
@@ -261,3 +261,5 @@ export default function useScheduled (): EntryInfo[] {
 
   return state;
 }
+
+export default createNamedHook('useScheduled', useScheduledImpl);

packages/page-claims/src/useCounter.ts

@@ -1,10 +1,14 @@
 // Copyright 2017-2021 @polkadot/app-settings authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { createNamedHook } from '@polkadot/react-hooks';
+
 import usePolkadotPreclaims from './usePolkadotPreclaims';
 
-export default function useCounter (): number {
+function useCounterImpl (): number {
   const needAttest = usePolkadotPreclaims();
 
   return needAttest.length;
 }
+
+export default createNamedHook('useCounter', useCounterImpl);

packages/page-claims/src/usePolkadotPreclaims.ts

@@ -8,9 +8,9 @@ import type { Codec } from '@polkadot/types/types';
 
 import { useEffect, useState } from 'react';
 
-import { useAccounts, useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
+import { createNamedHook, useAccounts, useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
 
-export default function usePolkadotPreclaims (): string[] {
+function usePolkadotPreclaimsImpl (): string[] {
   const { allAccounts } = useAccounts();
   const { api } = useApi();
   const mountedRef = useIsMountedRef();
@@ -48,3 +48,5 @@ export default function usePolkadotPreclaims (): string[] {
 
   return needsAttest;
 }
+
+export default createNamedHook('usePolkadotPreclaims', usePolkadotPreclaimsImpl);

packages/page-contracts/src/useAbi.ts

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { Abi } from '@polkadot/api-contract';
 import { api } from '@polkadot/react-api';
+import { createNamedHook } from '@polkadot/react-hooks';
 import { u8aToString } from '@polkadot/util';
 
 import store from './store';
@@ -46,7 +47,7 @@ const EMPTY: AbiState = {
   isAbiValid: false
 };
 
-export default function useAbi (initialValue: [string | null | undefined, Abi | null | undefined] = [null, null], codeHash: string | null = null, isRequired = false): UseAbi {
+function useAbiImpl (initialValue: [string | null | undefined, Abi | null | undefined] = [null, null], codeHash: string | null = null, isRequired = false): UseAbi {
   const [state, setAbi] = useState<AbiState>(() => fromInitial(initialValue, isRequired));
 
   useEffect(
@@ -98,3 +99,5 @@ export default function useAbi (initialValue: [string | null | undefined, Abi |
     onRemoveAbi
   };
 }
+
+export default createNamedHook('useAbi', useAbiImpl);

packages/page-contracts/src/useCodes.ts

@@ -5,7 +5,7 @@ import type { CodeStored } from './types';
 
 import { useEffect, useState } from 'react';
 
-import { useIsMountedRef } from '@polkadot/react-hooks';
+import { createNamedHook, useIsMountedRef } from '@polkadot/react-hooks';
 
 import store from './store';
 
@@ -16,15 +16,17 @@ interface UseCodes {
 
 const DEFAULT_STATE: UseCodes = { allCodes: [], codeTrigger: Date.now() };
 
-export function useCodes (): UseCodes {
+function useCodesImpl (): UseCodes {
   const mountedRef = useIsMountedRef();
   const [state, setState] = useState<UseCodes>(DEFAULT_STATE);
 
   useEffect(
     (): void => {
       const triggerUpdate = (): void => {
-        mountedRef.current &&
-        setState({ allCodes: store.getAllCode(), codeTrigger: Date.now() });
+        mountedRef.current && setState({
+          allCodes: store.getAllCode(),
+          codeTrigger: Date.now()
+        });
       };
 
       store.on('new-code', triggerUpdate);
@@ -37,3 +39,5 @@ export function useCodes (): UseCodes {
 
   return state;
 }
+
+export const useCodes = createNamedHook('useCodes', useCodesImpl);

packages/page-contracts/src/useContracts.ts

@@ -3,7 +3,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { useIsMountedRef } from '@polkadot/react-hooks';
+import { createNamedHook, useIsMountedRef } from '@polkadot/react-hooks';
 import { keyring } from '@polkadot/ui-keyring';
 
 interface UseContracts {
@@ -12,9 +12,13 @@ interface UseContracts {
   isContract: (address: string) => boolean;
 }
 
-const DEFAULT_STATE: UseContracts = { allContracts: [], hasContracts: false, isContract: () => false };
+const DEFAULT_STATE: UseContracts = {
+  allContracts: [],
+  hasContracts: false,
+  isContract: () => false
+};
 
-export function useContracts (): UseContracts {
+function useContractsImpl (): UseContracts {
   const mountedRef = useIsMountedRef();
   const [state, setState] = useState<UseContracts>(DEFAULT_STATE);
 
@@ -37,3 +41,5 @@ export function useContracts (): UseContracts {
 
   return state;
 }
+
+export const useContracts = createNamedHook('useContracts', useContractsImpl);

packages/page-contracts/src/useWeight.ts

@@ -7,10 +7,10 @@ import type { UseWeight } from './types';
 
 import { useCallback, useMemo, useState } from 'react';
 
-import { useApi, useBlockTime } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useBlockTime } from '@polkadot/react-hooks';
 import { BN_MILLION, BN_TEN, BN_ZERO } from '@polkadot/util';
 
-export default function useWeight (): UseWeight {
+function useWeightImpl (): UseWeight {
   const { api } = useApi();
   const [blockTime] = useBlockTime();
   const [megaGas, _setMegaGas] = useState<BN>(
@@ -63,3 +63,5 @@ export default function useWeight (): UseWeight {
     };
   }, [api, blockTime, isEmpty, megaGas, setIsEmpty, setMegaGas]);
 }
+
+export default createNamedHook('useWeight', useWeightImpl);

packages/page-council/src/useCounter.ts

@@ -3,16 +3,18 @@
 
 import type { DeriveCollectiveProposal } from '@polkadot/api-derive/types';
 
-import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 
 const transformCounter = {
   transform: (motions: DeriveCollectiveProposal[]) => motions.filter(({ votes }): boolean => !!votes).length
 };
 
-export default function useCounter (): number {
+function useCounterImpl (): number {
   const { hasAccounts } = useAccounts();
   const { api, isApiReady } = useApi();
   const counter = useCall<number>(isApiReady && hasAccounts && api.derive.council?.proposals, undefined, transformCounter) || 0;
 
   return counter;
 }
+
+export default createNamedHook('useCounter', useCounterImpl);

packages/page-council/src/useModuleElections.ts

@@ -3,20 +3,21 @@
 
 import { useMemo } from 'react';
 
-import { useApi } from '@polkadot/react-hooks';
+import { createNamedHook, useApi } from '@polkadot/react-hooks';
 
-export function useModuleElections (): string | null {
+function useModuleElectionsImpl (): string | null {
   const { api } = useApi();
 
   return useMemo(
-    (): string | null =>
-      api.tx.phragmenElection
-        ? 'phragmenElection'
-        : api.tx.electionsPhragmen
-          ? 'electionsPhragmen'
-          : api.tx.elections
-            ? 'elections'
-            : null,
+    () => api.tx.phragmenElection
+      ? 'phragmenElection'
+      : api.tx.electionsPhragmen
+        ? 'electionsPhragmen'
+        : api.tx.elections
+          ? 'elections'
+          : null,
     [api]
   );
 }
+
+export const useModuleElections = createNamedHook('useModuleElections', useModuleElectionsImpl);

packages/page-democracy/src/Execute/useCounter.ts

@@ -1,11 +1,13 @@
 // Copyright 2017-2021 @polkadot/app-democracy authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
-export default function useCounter (): number {
+function useCounterImpl (): number {
   const { api } = useApi();
   const queued = useCall<unknown[]>(api.derive.democracy.dispatchQueue);
 
   return queued?.length || 0;
 }
+
+export default createNamedHook('useCounter', useCounterImpl);

packages/page-democracy/src/useChangeCalc.ts

@@ -6,7 +6,7 @@ import type { VoteThreshold } from '@polkadot/types/interfaces';
 
 import { useEffect, useState } from 'react';
 
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 import { BN_ZERO } from '@polkadot/util';
 
 import { approxChanges } from './util';
@@ -16,7 +16,7 @@ interface Result {
   changeNay: BN;
 }
 
-export default function useChangeCalc (threshold: VoteThreshold, votedAye: BN, votedNay: BN, votedTotal: BN): Result {
+function useChangeCalcImpl (threshold: VoteThreshold, votedAye: BN, votedNay: BN, votedTotal: BN): Result {
   const { api } = useApi();
   const sqrtElectorate = useCall<BN>(api.derive.democracy.sqrtElectorate);
   const [result, setResult] = useState<Result>({ changeAye: BN_ZERO, changeNay: BN_ZERO });
@@ -29,3 +29,5 @@ export default function useChangeCalc (threshold: VoteThreshold, votedAye: BN, v
 
   return result;
 }
+
+export default createNamedHook('useChangeCalc', useChangeCalcImpl);

packages/page-democracy/src/useCounter.ts

@@ -3,9 +3,9 @@
 
 import { useEffect, useState } from 'react';
 
-import { useAccounts, useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
+import { createNamedHook, useAccounts, useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
 
-export default function useCounter (): number {
+function useCounterImpl (): number {
   const { hasAccounts } = useAccounts();
   const { api, isApiReady } = useApi();
   const mountedRef = useIsMountedRef();
@@ -22,3 +22,5 @@ export default function useCounter (): number {
 
   return counter;
 }
+
+export default createNamedHook('useCounter', useCounterImpl);

packages/page-gilt/src/Overview/useInfo.ts

@@ -7,7 +7,7 @@ import type { GiltInfo, QueueTotal } from './types';
 
 import { useMemo } from 'react';
 
-import { useApi, useCallMulti } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCallMulti } from '@polkadot/react-hooks';
 import { BN_ONE } from '@polkadot/util';
 
 interface State {
@@ -27,7 +27,7 @@ const optGiltInfo = {
   })
 };
 
-export default function useInfo (): State {
+function useInfoImpl (): State {
   const { api } = useApi();
   const info = useCallMulti<GiltInfo>([
     api.query.gilt.activeTotal,
@@ -47,3 +47,5 @@ export default function useInfo (): State {
     [info]
   );
 }
+
+export default createNamedHook('useInfo', useInfoImpl);

packages/page-gilt/src/useProxies.ts

@@ -7,11 +7,11 @@ import type { ITuple } from '@polkadot/types/types';
 
 import { useEffect, useState } from 'react';
 
-import { useAccounts, useApi, useIsMountedRef } from '@polkadot/react-hooks';
+import { createNamedHook, useAccounts, useApi, useIsMountedRef } from '@polkadot/react-hooks';
 
 type ProxyResult = ITuple<[Vec<ProxyDefinition>, BalanceOf]>;
 
-export function useProxies (): Record<string, string[]> {
+function useProxiesImpl (): Record<string, string[]> {
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const mountedRef = useIsMountedRef();
@@ -38,3 +38,5 @@ export function useProxies (): Record<string, string[]> {
 
   return state;
 }
+
+export const useProxies = createNamedHook('useProxies', useProxiesImpl);

packages/page-membership/src/useCounter.ts

@@ -3,15 +3,17 @@
 
 import type { Hash } from '@polkadot/types/interfaces';
 
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
 const transformCounter = {
   transform: (proposals: Hash[]) => proposals.length
 };
 
-export default function useCounter (): number {
+function useCounterImpl (): number {
   const { api, isApiReady } = useApi();
   const counter = useCall<number>(isApiReady && api.query.membership?.proposals, undefined, transformCounter) || 0;
 
   return counter;
 }
+
+export default createNamedHook('useCounter', useCounterImpl);

packages/page-settings/src/useChainInfo.ts

@@ -7,12 +7,12 @@ import { useMemo } from 'react';
 
 import { getSystemColor, getSystemIcon } from '@polkadot/apps-config';
 import { DEFAULT_DECIMALS, DEFAULT_SS58 } from '@polkadot/react-api';
-import { useApi } from '@polkadot/react-hooks';
+import { createNamedHook, useApi } from '@polkadot/react-hooks';
 import { getSpecTypes } from '@polkadot/types-known';
 import { formatBalance, isNumber } from '@polkadot/util';
 import { base64Encode } from '@polkadot/util-crypto';
 
-export default function useChainInfo (): ChainInfo | null {
+function useChainInfoImpl (): ChainInfo | null {
   const { api, isApiReady, isEthereum, specName, systemChain, systemName } = useApi();
 
   return useMemo(
@@ -38,3 +38,5 @@ export default function useChainInfo (): ChainInfo | null {
     [api, isApiReady, specName, systemChain, systemName, isEthereum]
   );
 }
+
+export default createNamedHook('useChainInfo', useChainInfoImpl);

packages/page-settings/src/useCounter.ts

@@ -1,10 +1,14 @@
 // Copyright 2017-2021 @polkadot/app-settings authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { createNamedHook } from '@polkadot/react-hooks';
+
 import useExtensions from './useExtensions';
 
-export default function useCounter (): number {
+function useCounterImpl (): number {
   const { count } = useExtensions();
 
   return count;
 }
+
+export default createNamedHook('useCounter', useCounterImpl);

packages/page-settings/src/useExtensions.ts

@@ -7,7 +7,7 @@ import type { InjectedExtension, InjectedMetadataKnown, MetadataDef } from '@pol
 import { useEffect, useMemo, useState } from 'react';
 import store from 'store';
 
-import { useApi } from '@polkadot/react-hooks';
+import { createNamedHook, useApi } from '@polkadot/react-hooks';
 
 interface ExtensionKnown {
   extension: InjectedExtension;
@@ -141,7 +141,7 @@ async function getKnown (api: ApiPromise, extensions: InjectedExtension[], _: nu
 
 const EMPTY_STATE = { count: 0, extensions: [] };
 
-export default function useExtensions (): Extensions {
+function useExtensionsImpl (): Extensions {
   const { api, extensions, isApiReady, isDevelopment } = useApi();
   const [all, setAll] = useState<ExtensionKnown[] | undefined>();
   const [trigger, setTrigger] = useState(0);
@@ -167,3 +167,5 @@ export default function useExtensions (): Extensions {
     [all, api, isApiReady, isDevelopment]
   );
 }
+
+export default createNamedHook('useExtensions', useExtensionsImpl);

packages/page-society/src/useCounter.ts

@@ -3,11 +3,13 @@
 
 import type { Bid } from '@polkadot/types/interfaces';
 
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
-export default function useCounter (): number {
+function useCounterImpl (): number {
   const { api } = useApi();
   const bids = useCall<Bid[]>(api.query.society?.candidates);
 
   return bids?.length || 0;
 }
+
+export default createNamedHook('useCounter', useCounterImpl);

packages/page-society/src/useMembers.ts

@@ -6,7 +6,7 @@ import type { OwnMembers } from './types';
 
 import { useEffect, useState } from 'react';
 
-import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 
 const EMPTY_MEMBERS: OwnMembers = { allMembers: [], isMember: false, ownMembers: [] };
 
@@ -19,7 +19,7 @@ function transform (allAccounts: string[], members: DeriveSocietyMember[]): OwnM
   return { allMembers, isMember: ownMembers.length !== 0, ownMembers };
 }
 
-export default function useMembers (): OwnMembers {
+function useMembersImpl (): OwnMembers {
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const [state, setState] = useState<OwnMembers>(EMPTY_MEMBERS);
@@ -33,3 +33,5 @@ export default function useMembers (): OwnMembers {
 
   return state;
 }
+
+export default createNamedHook('useMembers', useMembersImpl);

packages/page-society/src/useVoters.ts

@@ -7,7 +7,7 @@ import type { Voters } from './types';
 
 import { useEffect, useState } from 'react';
 
-import { useApi, useCall, useEventTrigger } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall, useEventTrigger } from '@polkadot/react-hooks';
 
 const EMPTY_VOTERS: Voters = {};
 
@@ -39,7 +39,7 @@ async function getVoters (api: ApiPromise, candidates: DeriveSocietyCandidate[])
   return { candidates, skeptics, voters };
 }
 
-export default function useVoters (): Voters {
+function useVotersImpl (): Voters {
   const { api } = useApi();
   const voteTrigger = useEventTrigger([api.events.society.Vote]);
   const candidates = useCall<DeriveSocietyCandidate[]>(api.derive.society.candidates);
@@ -52,3 +52,5 @@ export default function useVoters (): Voters {
 
   return state;
 }
+
+export default createNamedHook('useVoters', useVotersImpl);

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

@@ -9,7 +9,7 @@ import type { EraIndex, Exposure, Nominations, SlashingSpans } from '@polkadot/t
 import { useEffect, useState } from 'react';
 
 import { ApiPromise } from '@polkadot/api';
-import { useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
 import { BN_ZERO } from '@polkadot/util';
 
 interface Inactives {
@@ -82,7 +82,7 @@ function extractState (api: ApiPromise, stashId: string, slashes: Option<Slashin
   };
 }
 
-export default function useInactives (stashId: string, nominees?: string[]): Inactives {
+function useInactivesImpl (stashId: string, nominees?: string[]): Inactives {
   const { api } = useApi();
   const mountedRef = useIsMountedRef();
   const [state, setState] = useState<Inactives>({});
@@ -124,3 +124,5 @@ export default function useInactives (stashId: string, nominees?: string[]): Ina
 
   return state;
 }
+
+export default createNamedHook('useInactives', useInactivesImpl);

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

@@ -6,10 +6,10 @@ import type { DeriveSessionInfo } from '@polkadot/api-derive/types';
 
 import { useMemo } from 'react';
 
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 import { BN_ONE } from '@polkadot/util';
 
-export default function useUnbondDuration (): BN | undefined {
+function useUnbondDurationImpl (): BN | undefined {
   const { api } = useApi();
   const sessionInfo = useCall<DeriveSessionInfo>(api.derive.session.info);
 
@@ -20,3 +20,5 @@ export default function useUnbondDuration (): BN | undefined {
     [api, sessionInfo]
   );
 }
+
+export default createNamedHook('useUnbondDuration', useUnbondDurationImpl);

packages/page-staking/src/Payouts/useEraBlocks.ts

@@ -7,10 +7,10 @@ import type { Forcing } from '@polkadot/types/interfaces';
 
 import { useMemo } from 'react';
 
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 import { BN_ONE } from '@polkadot/util';
 
-export default function useEraBlocks (era?: BN): BN | undefined {
+function useEraBlocksImpl (era?: BN): BN | undefined {
   const { api } = useApi();
   const depth = useCall<BN>(api.query.staking.historyDepth);
   const progress = useCall<DeriveSessionProgress>(api.derive.session.progress);
@@ -36,3 +36,5 @@ export default function useEraBlocks (era?: BN): BN | undefined {
     [depth, era, forcing, progress]
   );
 }
+
+export default createNamedHook('useEraBlocks', useEraBlocksImpl);

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

@@ -7,10 +7,10 @@ import type { SessionRewards } from '../types';
 
 import { useEffect, useState } from 'react';
 
-import { useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
 import { BN_ONE, BN_ZERO, isFunction } from '@polkadot/util';
 
-export default function useBlockCounts (accountId: string, sessionRewards: SessionRewards[]): u32[] {
+function useBlockCountsImpl (accountId: string, sessionRewards: SessionRewards[]): u32[] {
   const { api } = useApi();
   const mountedRef = useIsMountedRef();
   const indexes = useCall<DeriveSessionIndexes>(api.derive.session?.indexes);
@@ -40,3 +40,5 @@ export default function useBlockCounts (accountId: string, sessionRewards: Sessi
 
   return counts;
 }
+
+export default createNamedHook('useBlockCounts', useBlockCountsImpl);

packages/page-staking/src/Targets/useOwnNominators.ts

@@ -5,9 +5,13 @@ import type { StakerState } from '@polkadot/react-hooks/types';
 
 import { useMemo } from 'react';
 
-export default function useOwnNominators (ownStashes?: StakerState[]): StakerState[] | undefined {
+import { createNamedHook } from '@polkadot/react-hooks';
+
+function useOwnNominatorsImpl (ownStashes?: StakerState[]): StakerState[] | undefined {
   return useMemo(
     () => ownStashes && ownStashes.filter(({ isOwnController, isStashValidating }) => isOwnController && !isStashValidating),
     [ownStashes]
   );
 }
+
+export default createNamedHook('useOwnNominators', useOwnNominatorsImpl);

packages/page-staking/src/useIdentities.ts

@@ -3,7 +3,7 @@
 
 import type { DeriveHasIdentity } from '@polkadot/api-derive/types';
 
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
 function transformIdentity ([[validatorIds], hasIdentities]: [[string[]], DeriveHasIdentity[]]): Record<string, DeriveHasIdentity> {
   return validatorIds.reduce((result: Record<string, DeriveHasIdentity>, validatorId, index): Record<string, DeriveHasIdentity> => {
@@ -15,9 +15,11 @@ function transformIdentity ([[validatorIds], hasIdentities]: [[string[]], Derive
 
 type Result = Record<string, DeriveHasIdentity>;
 
-export default function useIdentities (validatorIds: string[] = []): Result | undefined {
+function useIdentitiesImpl (validatorIds: string[] = []): Result | undefined {
   const { api } = useApi();
   const allIdentity = useCall<Result>(api.derive.accounts.hasIdentityMulti, [validatorIds], { transform: transformIdentity, withParamsTransform: true });
 
   return allIdentity;
 }
+
+export default createNamedHook('useIdentities', useIdentitiesImpl);

packages/page-staking/src/useNominations.ts

@@ -7,7 +7,7 @@ import type { NominatedBy } from './types';
 
 import { useMemo } from 'react';
 
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
 type Result = Record<string, NominatedBy[]>;
 
@@ -33,7 +33,7 @@ function extractNominators (nominations: [StorageKey, Option<Nominations>][]): R
   }, {});
 }
 
-export default function useNominations (isActive = true): Result | undefined {
+function useNominationsImpl (isActive = true): Result | undefined {
   const { api } = useApi();
   const nominators = useCall<[StorageKey, Option<Nominations>][]>(isActive && api.query.staking.nominators.entries);
 
@@ -42,3 +42,5 @@ export default function useNominations (isActive = true): Result | undefined {
     [nominators]
   );
 }
+
+export default createNamedHook('useNominations', useNominationsImpl);

packages/page-staking/src/useSortedTargets.ts

@@ -10,7 +10,7 @@ import type { SortedTargets, TargetSortBy, ValidatorInfo } from './types';
 import BN from 'bn.js';
 import { useMemo } from 'react';
 
-import { useAccounts, useApi, useCall, useCallMulti, useInflation } from '@polkadot/react-hooks';
+import { createNamedHook, useAccounts, useApi, useCall, useCallMulti, useInflation } from '@polkadot/react-hooks';
 import { arrayFlatten, BN_HUNDRED, BN_MAX_INTEGER, BN_ONE, BN_ZERO } from '@polkadot/util';
 
 interface LastEra {
@@ -272,7 +272,7 @@ const transformMulti = {
   })
 };
 
-export default function useSortedTargets (favorites: string[], withLedger: boolean): SortedTargets {
+function useSortedTargetsImpl (favorites: string[], withLedger: boolean): SortedTargets {
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const { counterForNominators, counterForValidators, historyDepth, maxNominatorsCount, maxValidatorsCount, minNominatorBond, minValidatorBond, totalIssuance } = useCallMulti<MultiResult>([
@@ -318,3 +318,5 @@ export default function useSortedTargets (favorites: string[], withLedger: boole
     ...partial
   };
 }
+
+export default createNamedHook('useSortedTargets', useSortedTargetsImpl);

packages/page-tech-comm/src/useCounter.ts

@@ -3,15 +3,17 @@
 
 import type { Hash } from '@polkadot/types/interfaces';
 
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
 const transformCounter = {
   transform: (proposals: Hash[]) => proposals.length
 };
 
-export default function useCounter (): number {
+function useCounterImpl (): number {
   const { api, isApiReady } = useApi();
   const counter = useCall<number>(isApiReady && api.derive.technicalCommittee?.proposals, undefined, transformCounter) || 0;
 
   return counter;
 }
+
+export default createNamedHook('useCounter', useCounterImpl);

packages/page-treasury/src/useCounter.ts

@@ -5,9 +5,9 @@ import type { DeriveTreasuryProposals } from '@polkadot/api-derive/types';
 
 import { useMemo } from 'react';
 
-import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
+import { createNamedHook, useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 
-export default function useCounter (): number {
+function useCounterImpl (): number {
   const { hasAccounts } = useAccounts();
   const { api, isApiReady } = useApi();
   const proposals = useCall<DeriveTreasuryProposals>(isApiReady && hasAccounts && api.derive.treasury?.proposals);
@@ -17,3 +17,5 @@ export default function useCounter (): number {
     [proposals]
   );
 }
+
+export default createNamedHook('useCounter', useCounterImpl);

packages/page-treasury/src/useTipHashes.ts

@@ -4,15 +4,17 @@
 import type { StorageKey } from '@polkadot/types';
 import type { Hash } from '@polkadot/types/interfaces';
 
-import { useApi, useEventTrigger, useMapKeys } from '@polkadot/react-hooks';
+import { createNamedHook, useApi, useEventTrigger, useMapKeys } from '@polkadot/react-hooks';
 
 function extractHashes (keys: StorageKey<[Hash]>[]): string[] {
   return keys.map(({ args: [hash] }) => hash.toHex());
 }
 
-export default function useTipHashes (): string[] | undefined {
+function useTipHashesImpl (): string[] | undefined {
   const { api } = useApi();
   const trigger = useEventTrigger([api.events.tips?.NewTip, api.events.tips?.TipClosed, api.events.tips?.TipRetracted]);
 
   return useMapKeys((api.query.tips || api.query.treasury)?.tips, { at: trigger.blockHash, transform: extractHashes });
 }
+
+export default createNamedHook('useTipHashes', useTipHashesImpl);

packages/react-components/src/InputRpc/useRpcs.ts

@@ -5,11 +5,11 @@ import type { DefinitionRpcExt } from '@polkadot/types/types';
 
 import { useMemo } from 'react';
 
-import { useApi } from '@polkadot/react-hooks';
+import { createNamedHook, useApi } from '@polkadot/react-hooks';
 
 import { getAllRpc } from './rpcs';
 
-export default function useRpcs (): Record<string, Record<string, DefinitionRpcExt>> {
+function useRpcsImpl (): Record<string, Record<string, DefinitionRpcExt>> {
   const { api } = useApi();
 
   return useMemo(
@@ -17,3 +17,5 @@ export default function useRpcs (): Record<string, Record<string, DefinitionRpcE
     [api]
   );
 }
+
+export default createNamedHook('useRpcs', useRpcsImpl);

packages/react-hooks/src/index.ts

@@ -1,6 +1,7 @@
 // Copyright 2017-2021 @polkadot/react-hooks authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+export { createNamedHook } from './createNamedHook';
 export { useAccountId } from './useAccountId';
 export { useAccountInfo } from './useAccountInfo';
 export { useAccounts } from './useAccounts';
@@ -34,7 +35,6 @@ export { useLoadingDelay } from './useLoadingDelay';
 export { useMapEntries } from './useMapEntries';
 export { useMapKeys } from './useMapKeys';
 export { useModal } from './useModal';
-export { createNamedHook } from './useNamedHook';
 export { useNonEmptyString } from './useNonEmptyString';
 export { useNonZeroBn } from './useNonZeroBn';
 export { useOwnEraRewards } from './useOwnEraRewards';

packages/react-hooks/src/useAccountId.ts

@@ -3,7 +3,9 @@
 
 import { useCallback, useState } from 'react';
 
-export function useAccountId (initialValue: string | null = null, onChangeAccountId?: (_: string | null) => void): [string | null, (_: string | null) => void] {
+import { createNamedHook } from './createNamedHook';
+
+function useAccountIdImpl (initialValue: string | null = null, onChangeAccountId?: (_: string | null) => void): [string | null, (_: string | null) => void] {
   const [accountId, setAccountId] = useState<string | null>(initialValue);
 
   const _setAccountId = useCallback(
@@ -17,3 +19,5 @@ export function useAccountId (initialValue: string | null = null, onChangeAccoun
 
   return [accountId, _setAccountId];
 }
+
+export const useAccountId = createNamedHook('useAccountId', useAccountIdImpl);

packages/react-hooks/src/useAccountInfo.ts

@@ -11,11 +11,11 @@ import { useCallback, useEffect, useState } from 'react';
 import { keyring } from '@polkadot/ui-keyring';
 import { isFunction } from '@polkadot/util';
 
+import { createNamedHook } from './createNamedHook';
 import { useAccounts } from './useAccounts';
 import { useAddresses } from './useAddresses';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
-import { createNamedHook } from './useNamedHook';
 import { useToggle } from './useToggle';
 
 const IS_NONE = {

packages/react-hooks/src/useAccounts.ts

@@ -7,8 +7,8 @@ import { keyring } from '@polkadot/ui-keyring';
 import { u8aToHex } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
+import { createNamedHook } from './createNamedHook';
 import { useIsMountedRef } from './useIsMountedRef';
-import { createNamedHook } from './useNamedHook';
 
 export interface UseAccounts {
   allAccounts: string[];

packages/react-hooks/src/useAddresses.ts

@@ -5,8 +5,8 @@ import { useEffect, useState } from 'react';
 
 import { keyring } from '@polkadot/ui-keyring';
 
+import { createNamedHook } from './createNamedHook';
 import { useIsMountedRef } from './useIsMountedRef';
-import { createNamedHook } from './useNamedHook';
 
 interface UseAddresses {
   allAddresses: string[];

packages/react-hooks/src/useApi.ts

@@ -7,6 +7,10 @@ import { useContext } from 'react';
 
 import { ApiContext } from '@polkadot/react-api';
 
-export function useApi (): ApiProps {
+import { createNamedHook } from './createNamedHook';
+
+function useApiImpl (): ApiProps {
   return useContext(ApiContext);
 }
+
+export const useApi = createNamedHook('useApi', useApiImpl);

packages/react-hooks/src/useApiUrl.ts

@@ -7,13 +7,14 @@ import { ApiPromise, WsProvider } from '@polkadot/api';
 import { typesBundle, typesChain } from '@polkadot/apps-config';
 import { isString } from '@polkadot/util';
 
+import { createNamedHook } from './createNamedHook';
 import { useIsMountedRef } from './useIsMountedRef';
 
 function disconnect (api: ApiPromise | null): void {
   api && api.disconnect().catch(console.error);
 }
 
-export function useApiUrl (url?: string | string[]): ApiPromise | null {
+function useApiUrlImpl (url?: string | string[]): ApiPromise | null {
   const apiRef = useRef<ApiPromise | null>(null);
   const mountedRef = useIsMountedRef();
   const [state, setState] = useState<ApiPromise | null>(null);
@@ -53,3 +54,5 @@ export function useApiUrl (url?: string | string[]): ApiPromise | null {
 
   return state;
 }
+
+export const useApiUrl = createNamedHook('useApiUrl', useApiUrlImpl);

packages/react-hooks/src/useAvailableSlashes.ts

@@ -11,10 +11,10 @@ import { useEffect, useState } from 'react';
 
 import { BN_ONE } from '@polkadot/util';
 
+import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
 import { useIsMountedRef } from './useIsMountedRef';
-import { createNamedHook } from './useNamedHook';
 
 type Unsub = () => void;
 

packages/react-hooks/src/useBalancesAll.ts

@@ -3,9 +3,9 @@
 
 import type { DeriveBalancesAll } from '@polkadot/api-derive/types';
 
+import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
-import { createNamedHook } from './useNamedHook';
 
 /**
  * Gets the account full balance information

packages/react-hooks/src/useBestHash.ts

@@ -3,9 +3,9 @@
 
 import type { Header } from '@polkadot/types/interfaces';
 
+import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
-import { createNamedHook } from './useNamedHook';
 
 const optCall = {
   transform: (header: Header) => header.hash.toHex()

packages/react-hooks/src/useBestNumber.ts

@@ -3,9 +3,9 @@
 
 import type { BlockNumber } from '@polkadot/types/interfaces';
 
+import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
-import { createNamedHook } from './useNamedHook';
 
 function useBestNumberImpl (): BlockNumber | undefined {
   const { api } = useApi();

packages/react-hooks/src/useBlockTime.ts

@@ -8,9 +8,9 @@ import { useMemo } from 'react';
 
 import { BN, BN_ONE, BN_THOUSAND, BN_TWO, bnToBn, extractTime } from '@polkadot/util';
 
+import { createNamedHook } from './createNamedHook';
 import { useTranslation } from './translate';
 import { useApi } from './useApi';
-import { createNamedHook } from './useNamedHook';
 
 type Result = [number, string, Time];
 

packages/react-hooks/src/useBlocksPerDays.ts

@@ -5,8 +5,8 @@ import { useMemo } from 'react';
 
 import { BN, bnToBn } from '@polkadot/util';
 
+import { createNamedHook } from './createNamedHook';
 import { useBlockTime } from './useBlockTime';
-import { createNamedHook } from './useNamedHook';
 
 const A_DAY = new BN(24 * 60 * 60 * 1000);
 

packages/react-hooks/src/useCacheKey.ts

@@ -7,6 +7,7 @@ import store from 'store';
 import { useApi } from './useApi';
 
 // create a chain-specific key for the local cache
+// FIXME Since we use generics, this cannot be a createNamedHook as of yet
 export function useCacheKey <T> (storageKeyBase: string): [(defaultValue?: T) => T | undefined, (value: T) => T] {
   const { api, isDevelopment } = useApi();
   const storageKey = useMemo(

packages/react-hooks/src/useCall.ts

@@ -137,6 +137,7 @@ function subscribe <T> (mountedRef: MountedRef, tracker: TrackerRef, fn: TrackFn
 //  - returns a promise with an unsubscribe function
 //  - has a callback to set the value
 // FIXME The typings here need some serious TLC
+// FIXME This is generic, we cannot really use createNamedHook
 export function useCall <T> (fn: TrackFn | undefined | null | false, params?: CallParams | null, options?: CallOptions<T>): T | undefined {
   const mountedRef = useIsMountedRef();
   const tracker = useRef<Tracker>({ isActive: false, serialized: null, subscriber: null });

packages/react-hooks/src/useCallMulti.ts

@@ -64,6 +64,7 @@ function subscribe <T> (api: ApiPromise, mountedRef: MountedRef, tracker: Tracke
 }
 
 // very much copied from useCall
+// FIXME This is generic, we cannot really use createNamedHook
 export function useCallMulti <T> (calls?: QueryableStorageMultiArg<'promise'>[] | null | false, options?: CallOptions<T>): T {
   const { api } = useApi();
   const mountedRef = useIsMountedRef();

packages/react-hooks/src/useCollectiveInstance.ts

@@ -8,7 +8,7 @@ import { useMemo } from 'react';
 import { useApi } from '@polkadot/react-hooks';
 import { isFunction } from '@polkadot/util';
 
-import { createNamedHook } from './useNamedHook';
+import { createNamedHook } from './createNamedHook';
 
 function useCollectiveInstanceImpl (instanceType: CollectiveType, instanceIndex?: number): CollectiveType | null {
   const { api } = useApi();

packages/react-hooks/src/useCollectiveMembers.ts

@@ -6,10 +6,10 @@ import type { CollectiveType } from './types';
 
 import { useMemo } from 'react';
 
+import { createNamedHook } from './createNamedHook';
 import { useAccounts } from './useAccounts';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
-import { createNamedHook } from './useNamedHook';
 
 interface Result {
   isMember: boolean;

packages/react-hooks/src/useDebounce.ts

@@ -7,7 +7,7 @@ import { useIsMountedRef } from './useIsMountedRef';
 
 const DEFAULT_DELAY = 250;
 
-// Debounces inputs
+// FIXE Due to generics, cannot use createNamedHook
 export function useDebounce <T> (value: T, delay?: number): T {
   const mountedRef = useIsMountedRef();
   const [debouncedValue, setDebouncedValue] = useState(value);

packages/react-hooks/src/useDelegations.ts

@@ -5,7 +5,7 @@ import type { PalletDemocracyVoteVoting } from '@polkadot/types/lookup';
 
 import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 
-import { createNamedHook } from './useNamedHook';
+import { createNamedHook } from './createNamedHook';
 
 function useDelegationsImpl (): PalletDemocracyVoteVoting[] | undefined {
   const { api } = useApi();

packages/react-hooks/src/useElementPosition.ts

@@ -3,8 +3,9 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { useScroll } from '@polkadot/react-hooks/useScroll';
-import { useWindowSize } from '@polkadot/react-hooks/useWindowSize';
+import { createNamedHook } from './createNamedHook';
+import { useScroll } from './useScroll';
+import { useWindowSize } from './useWindowSize';
 
 export interface ElementPosition {
   x: number,
@@ -13,7 +14,7 @@ export interface ElementPosition {
   height: number,
 }
 
-export function useElementPosition (ref: React.MutableRefObject<HTMLElement | undefined | null>): ElementPosition | undefined {
+function useElementPositionImpl (ref: React.MutableRefObject<HTMLElement | undefined | null>): ElementPosition | undefined {
   const [elementPosition, setElementPosition] = useState<ElementPosition>();
   const windowSize = useWindowSize();
   const scrollY = useScroll();
@@ -33,3 +34,5 @@ export function useElementPosition (ref: React.MutableRefObject<HTMLElement | un
 
   return elementPosition;
 }
+
+export const useElementPosition = createNamedHook('useElementPosition', useElementPositionImpl);

packages/react-hooks/src/useEventTrigger.ts

@@ -7,10 +7,10 @@ import type { EventRecord } from '@polkadot/types/interfaces';
 
 import { useEffect, useState } from 'react';
 
+import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
 import { useIsMountedRef } from './useIsMountedRef';
-import { createNamedHook } from './useNamedHook';
 
 type EventCheck = AugmentedEvent<'promise'> | false | undefined | null;
 

packages/react-hooks/src/useExtrinsicTrigger.ts

@@ -6,10 +6,10 @@ import type { SignedBlockExtended } from '@polkadot/api-derive/types';
 
 import { useEffect, useState } from 'react';
 
+import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
 import { useIsMountedRef } from './useIsMountedRef';
-import { createNamedHook } from './useNamedHook';
 
 type ExtrinsicCheck = SubmittableExtrinsicFunction<'promise'> | false | undefined | null;
 

packages/react-hooks/src/useFavorites.ts

@@ -1,18 +1,19 @@
 // Copyright 2017-2021 @polkadot/react-hooks authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
+import { createNamedHook } from './createNamedHook';
 import { useCacheKey } from './useCacheKey';
 
 // hook for favorites with local storage
-export function useFavorites (storageKeyBase: string): [string[], (address: string) => void] {
+function useFavoritesImpl (storageKeyBase: string): [string[], (address: string) => void] {
   const [getCache, setCache] = useCacheKey<string[]>(storageKeyBase);
   const [favorites, setFavorites] = useState<string[]>(() => getCache() || []);
 
   const toggleFavorite = useCallback(
     (address: string): void => setFavorites(
-      (favorites: string[]) => setCache(
+      (favorites) => setCache(
         favorites.includes(address)
           ? favorites.filter((a) => address !== a)
           : [...favorites, address]
@@ -21,5 +22,10 @@ export function useFavorites (storageKeyBase: string): [string[], (address: stri
     [setCache]
   );
 
-  return [favorites, toggleFavorite];
+  return useMemo(
+    () => [favorites, toggleFavorite],
+    [favorites, toggleFavorite]
+  );
 }
+
+export const useFavorites = createNamedHook('useFavorites', useFavoritesImpl);

packages/react-hooks/src/useFormField.ts

@@ -15,6 +15,7 @@ type ValidateFn<T> = (_: T) => boolean;
 
 const defaultValidate = (): boolean => true;
 
+// FIXME Since we use generics, this cannot be a createNamedHook as of yet
 export function useFormField<T> (defaultValue: T | null, validate: ValidateFn<T> = defaultValidate): FormField<T> {
   const [value, setValue] = useState<T | null>(defaultValue);
   const isValid = useMemo(

packages/react-hooks/src/useIncrement.ts

@@ -3,9 +3,10 @@
 
 import { useCallback, useState } from 'react';
 
+import { createNamedHook } from './createNamedHook';
 import { useIsMountedRef } from './useIsMountedRef';
 
-export function useIncrement (defaultValue = 1): [number, () => void, (value: number) => void] {
+function useIncrementImpl (defaultValue = 1): [number, () => void, (value: number) => void] {
   const mountedRef = useIsMountedRef();
   const [value, setValue] = useState(defaultValue);
 
@@ -18,3 +19,5 @@ export function useIncrement (defaultValue = 1): [number, () => void, (value: nu
 
   return [value, increment, setValue];
 }
+
+export const useIncrement = createNamedHook('useIncrement', useIncrementImpl);

packages/react-hooks/src/useInflation.ts

@@ -10,9 +10,9 @@ import { useEffect, useState } from 'react';
 import { getInflationParams } from '@polkadot/apps-config';
 import { BN_MILLION, BN_ZERO } from '@polkadot/util';
 
+import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
-import { createNamedHook } from './useNamedHook';
 
 const EMPTY: Inflation = { idealInterest: 0, idealStake: 0, inflation: 0, stakedFraction: 0, stakedReturn: 0 };
 

packages/react-hooks/src/useIpfs.ts

@@ -3,6 +3,8 @@
 
 import { useState } from 'react';
 
+import { createNamedHook } from './createNamedHook';
+
 const KNOWN = ['ipfs', 'ipns'];
 const SECTIONS = KNOWN.map((part) => `/${part}/`);
 const LOCAL_IPFS = '.ipfs.localhost';
@@ -111,8 +113,10 @@ export function extractIpfsDetails (): State {
       : extractOther(url);
 }
 
-export function useIpfs (): State {
+function useIpfsImpl (): State {
   const [state] = useState(() => extractIpfsDetails());
 
   return state;
 }
+
+export const useIpfs = createNamedHook('useIpfs', useIpfsImpl);

packages/react-hooks/src/useIsMountedRef.ts

@@ -3,9 +3,11 @@
 
 import { useEffect, useRef } from 'react';
 
+import { createNamedHook } from './createNamedHook';
+
 export type MountedRef = React.MutableRefObject<boolean>;
 
-export function useIsMountedRef (): MountedRef {
+function useIsMountedRefImpl (): MountedRef {
   const isMounted = useRef(false);
 
   useEffect((): () => void => {
@@ -18,3 +20,5 @@ export function useIsMountedRef (): MountedRef {
 
   return isMounted;
 }
+
+export const useIsMountedRef = createNamedHook('useIsMountedRef', useIsMountedRefImpl);

packages/react-hooks/src/useJudgements.tsx

@@ -7,8 +7,8 @@ import { useMemo } from 'react';
 
 import { getJudgements } from './utils/getJudgements';
 import { matchRegistrarAccountsWithIndexes } from './utils/matchRegistrarAccountsWithIndexes';
+import { createNamedHook } from './createNamedHook';
 import { useAccountInfo } from './useAccountInfo';
-import { createNamedHook } from './useNamedHook';
 import { useRegistrars } from './useRegistrars';
 
 function useJudgementsImpl (address: string): UseJudgements {

packages/react-hooks/src/useLedger.ts

@@ -11,8 +11,8 @@ import { knownGenesis, knownLedger } from '@polkadot/networks/defaults';
 import uiSettings from '@polkadot/ui-settings';
 import { assert } from '@polkadot/util';
 
+import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
-import { createNamedHook } from './useNamedHook';
 
 interface StateBase {
   isLedgerCapable: boolean;

packages/react-hooks/src/useLoadingDelay.ts

@@ -3,9 +3,10 @@
 
 import { useEffect, useState } from 'react';
 
+import { createNamedHook } from './createNamedHook';
 import { useIsMountedRef } from './useIsMountedRef';
 
-export function useLoadingDelay (delay = 100): boolean {
+function useLoadingDelayImpl (delay = 100): boolean {
   const mountedRef = useIsMountedRef();
   const [isLoading, setIsLoading] = useState(true);
 
@@ -19,3 +20,5 @@ export function useLoadingDelay (delay = 100): boolean {
 
   return isLoading;
 }
+
+export const useLoadingDelay = createNamedHook('useLoadingDelay', useLoadingDelayImpl);

packages/react-hooks/src/useMapEntries.ts

@@ -10,6 +10,7 @@ interface Options <T> {
   transform?: (value: any[]) => T;
 }
 
+// FIXME This is generic, we cannot really use createNamedHook
 export function useMapEntries <T = any> (entry?: QueryableStorageEntry<'promise'> | null | false, { at, transform }: Options<T> = {}): T | undefined {
   const [state, setState] = useState<T | undefined>();
 

packages/react-hooks/src/useMapKeys.ts

@@ -10,6 +10,7 @@ interface Options <T> {
   transform?: (value: any[]) => T[];
 }
 
+// FIXME This is generic, we cannot really use createNamedHook
 export function useMapKeys <T = any> (entry?: QueryableStorageEntry<'promise'> | null | false, { at, transform }: Options<T> = {}): T[] | undefined {
   const [state, setState] = useState<T[] | undefined>();
 

packages/react-hooks/src/useModal.ts

@@ -5,9 +5,10 @@ import type { ModalState } from './types';
 
 import { useCallback } from 'react';
 
+import { createNamedHook } from './createNamedHook';
 import { useToggle } from './useToggle';
 
-export function useModal (defaultIsOpen?: boolean, onOpen?: () => void, onClose?: () => void): ModalState {
+function useModalImpl (defaultIsOpen?: boolean, onOpen?: () => void, onClose?: () => void): ModalState {
   const [isOpen, , setIsOpen] = useToggle(defaultIsOpen || false);
   const _onOpen = useCallback(
     (): void => {
@@ -28,3 +29,5 @@ export function useModal (defaultIsOpen?: boolean, onOpen?: () => void, onClose?
 
   return { isOpen, onClose: _onClose, onOpen: _onOpen };
 }
+
+export const useModal = createNamedHook('useModal', useModalImpl);

packages/react-hooks/src/useNonEmptyString.ts

@@ -1,12 +1,15 @@
 // Copyright 2017-2021 @polkadot/react-hooks authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { createNamedHook } from './createNamedHook';
 import { FormField, useFormField } from './useFormField';
 
 function isValid (value?: string | null): boolean {
   return (value && value.length > 0) || false;
 }
 
-export function useNonEmptyString (initialValue = ''): FormField<string> {
+function useNonEmptyStringImpl (initialValue = ''): FormField<string> {
   return useFormField(initialValue, isValid);
 }
+
+export const useNonEmptyString = createNamedHook('useNonEmptyString', useNonEmptyStringImpl);

packages/react-hooks/src/useNonZeroBn.ts

@@ -7,14 +7,17 @@ import { useMemo } from 'react';
 
 import { BN_ZERO, bnToBn } from '@polkadot/util';
 
+import { createNamedHook } from './createNamedHook';
 import { FormField, useFormField } from './useFormField';
 
 function isValid (value: BN): boolean {
   return !value.isZero();
 }
 
-export function useNonZeroBn (initialValue: BN | number = BN_ZERO): FormField<BN> {
+function useNonZeroBnImpl (initialValue: BN | number = BN_ZERO): FormField<BN> {
   const value = useMemo(() => bnToBn(initialValue), [initialValue]);
 
   return useFormField(value, isValid);
 }
+
+export const useNonZeroBn = createNamedHook('useNonZeroBn', useNonZeroBnImpl);

packages/react-hooks/src/useOwnEraRewards.ts

@@ -10,10 +10,10 @@ import { useEffect, useState } from 'react';
 
 import { BN_ZERO } from '@polkadot/util';
 
+import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
 import { useIsMountedRef } from './useIsMountedRef';
-import { createNamedHook } from './useNamedHook';
 import { useOwnStashIds } from './useOwnStashes';
 
 interface State {

packages/react-hooks/src/useOwnStashInfos.ts

@@ -11,10 +11,10 @@ import { useEffect, useMemo, useState } from 'react';
 
 import { u8aConcat, u8aToHex } from '@polkadot/util';
 
+import { createNamedHook } from './createNamedHook';
 import { useAccounts } from './useAccounts';
 import { useApi } from './useApi';
 import { useIsMountedRef } from './useIsMountedRef';
-import { createNamedHook } from './useNamedHook';
 import { useOwnStashes } from './useOwnStashes';
 
 type ValidatorInfo = ITuple<[ValidatorPrefs, Codec]> | ValidatorPrefs;

packages/react-hooks/src/useOwnStashes.ts

@@ -6,10 +6,10 @@ import type { AccountId, StakingLedger } from '@polkadot/types/interfaces';
 
 import { useMemo } from 'react';
 
+import { createNamedHook } from './createNamedHook';
 import { useAccounts } from './useAccounts';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
-import { createNamedHook } from './useNamedHook';
 
 type IsInKeyring = boolean;
 

packages/react-hooks/src/useParaApi.ts

@@ -8,6 +8,7 @@ import { useEffect, useState } from 'react';
 
 import { ApiPromise } from '@polkadot/api';
 
+import { createNamedHook } from './createNamedHook';
 import { useApiUrl } from './useApiUrl';
 import { useIsMountedRef } from './useIsMountedRef';
 import { useParaEndpoints } from './useParaEndpoints';
@@ -35,7 +36,7 @@ function arrayShuffle (result: string[]): string[] {
   return result;
 }
 
-export function useParaApi (paraId: BN | number): Result {
+function useParaApiImpl (paraId: BN | number): Result {
   const mountedRef = useIsMountedRef();
   const endpoints = useParaEndpoints(paraId);
   const [state, setState] = useState<Result>(() => ({
@@ -63,3 +64,5 @@ export function useParaApi (paraId: BN | number): Result {
 
   return state;
 }
+
+export const useParaApi = createNamedHook('useParaApi', useParaApiImpl);

packages/react-hooks/src/useParaEndpoints.ts

@@ -9,6 +9,7 @@ import { useMemo } from 'react';
 import { createWsEndpoints } from '@polkadot/apps-config';
 import { bnToBn } from '@polkadot/util';
 
+import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
 
 const endpoints = createWsEndpoints((key: string, value: string | undefined) => value || key);
@@ -25,7 +26,7 @@ function extractParaEndpoints (allEndpoints: LinkOption[], paraId: BN | number):
   return allEndpoints.filter(({ paraId }) => paraId === numId);
 }
 
-export function useRelayEndpoints (): LinkOption[] {
+function useRelayEndpointsImpl (): LinkOption[] {
   const { api } = useApi();
 
   return useMemo(
@@ -34,7 +35,9 @@ export function useRelayEndpoints (): LinkOption[] {
   );
 }
 
-export function useParaEndpoints (paraId: BN | number): LinkOption[] {
+export const useRelayEndpoints = createNamedHook('useRelayEndpoints', useRelayEndpointsImpl);
+
+function useParaEndpointsImpl (paraId: BN | number): LinkOption[] {
   const endpoints = useRelayEndpoints();
 
   return useMemo(
@@ -43,7 +46,9 @@ export function useParaEndpoints (paraId: BN | number): LinkOption[] {
   );
 }
 
-export function useIsParasLinked (ids?: (BN | number)[] | null): Record<string, boolean> {
+export const useParaEndpoints = createNamedHook('useParaEndpoints', useParaEndpointsImpl);
+
+function useIsParasLinkedImpl (ids?: (BN | number)[] | null): Record<string, boolean> {
   const endpoints = useRelayEndpoints();
 
   return useMemo(
@@ -56,3 +61,5 @@ export function useIsParasLinked (ids?: (BN | number)[] | null): Record<string,
     [endpoints, ids]
   );
 }
+
+export const useIsParasLinked = createNamedHook('useIsParasLinked', useIsParasLinkedImpl);

packages/react-hooks/src/usePassword.ts

@@ -5,6 +5,8 @@ import { useEffect, useState } from 'react';
 
 import { keyring } from '@polkadot/ui-keyring';
 
+import { createNamedHook } from './createNamedHook';
+
 interface PasswordProps {
   password: string;
   setPassword: React.Dispatch<string>;
@@ -12,7 +14,7 @@ interface PasswordProps {
   setIsPasswordValid: React.Dispatch<boolean>;
 }
 
-export function usePassword (): PasswordProps {
+function usePasswordImpl (): PasswordProps {
   const [password, setPassword] = useState('');
   const [isPasswordValid, setIsPasswordValid] = useState(false);
 
@@ -27,3 +29,5 @@ export function usePassword (): PasswordProps {
     setPassword
   };
 }
+
+export const usePassword = createNamedHook('usePassword', usePasswordImpl);

packages/react-hooks/src/usePopupWindow.ts

@@ -1,21 +1,28 @@
 // Copyright 2017-2021 @polkadot/react-hooks authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { HorizontalPosition, VerticalPosition } from '@polkadot/react-components/Popup/types';
 import { getPosition } from '@polkadot/react-components/Popup/utils';
 
+import { createNamedHook } from './createNamedHook';
 import { useElementPosition } from './useElementPosition';
 import { useScroll } from './useScroll';
 import { useWindowSize } from './useWindowSize';
 
-export function usePopupWindow (
-  windowRef: React.RefObject<HTMLDivElement>,
-  triggerRef: React.RefObject<HTMLDivElement>,
-  position: HorizontalPosition
-): {renderWindowPosition: {x: number, y: number} | undefined, verticalPosition: VerticalPosition | undefined} {
-  const [renderWindowPosition, setRenderWindowPosition] = useState<{x: number, y: number}>();
+interface Coord {
+  x: number;
+  y: number;
+}
+
+interface Result {
+  renderWindowPosition?: Coord;
+  verticalPosition: VerticalPosition | undefined
+}
+
+function usePopupWindowImpl (windowRef: React.RefObject<HTMLDivElement>, triggerRef: React.RefObject<HTMLDivElement>, position: HorizontalPosition): Result {
+  const [renderWindowPosition, setRenderWindowPosition] = useState<Coord>();
   const [verticalPosition, setVerticalPosition] = useState<VerticalPosition>();
   const windowPosition = useElementPosition(windowRef);
   const triggerPosition = useElementPosition(triggerRef);
@@ -35,5 +42,10 @@ export function usePopupWindow (
     }
   }, [position, scrollY, triggerPosition, verticalPosition, windowPosition, windowSize]);
 
-  return { renderWindowPosition, verticalPosition };
+  return useMemo(
+    () => ({ renderWindowPosition, verticalPosition }),
+    [renderWindowPosition, verticalPosition]
+  );
 }
+
+export const usePopupWindow = createNamedHook('usePopupWindow', usePopupWindowImpl);

packages/react-hooks/src/useProxies.ts

@@ -6,10 +6,10 @@ import BN from 'bn.js';
 import { AccountId } from '@polkadot/types/interfaces';
 import { NodeRuntimeProxyType, PalletProxyProxyDefinition } from '@polkadot/types/lookup';
 
+import { createNamedHook } from './createNamedHook';
 import { useAccounts } from './useAccounts';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
-import { createNamedHook } from './useNamedHook';
 
 function useProxiesImpl (): [PalletProxyProxyDefinition[], BN][] | undefined {
   const { api } = useApi();

packages/react-hooks/src/useRegistrars.ts

@@ -7,10 +7,10 @@ import type { Registrar } from './types';
 
 import { useMemo } from 'react';
 
+import { createNamedHook } from './createNamedHook';
 import { useAccounts } from './useAccounts';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
-import { createNamedHook } from './useNamedHook';
 
 interface RegistrarNull {
   address: string | null;

packages/react-hooks/src/useSavedFlags.ts

@@ -36,6 +36,7 @@ function getSetters <T extends Flags> (flags: T, setFlags: React.Dispatch<React.
   }, {} as Setters<T>);
 }
 
+// TODO Uses generics, we cannot use createNameHook as of yet
 export function useSavedFlags <T extends Flags> (storageKey: string, initial: T): State<T> {
   const [flags, setFlags] = useState(() => getInitial(storageKey, initial));
   const [setters] = useState(() => getSetters(initial, setFlags));

packages/react-hooks/src/useScroll.ts

@@ -3,7 +3,9 @@
 
 import { useCallback, useEffect, useState } from 'react';
 
-export function useScroll (): number {
+import { createNamedHook } from './createNamedHook';
+
+function useScrollImpl (): number {
   const [scrollY, setScrollY] = useState(window.pageYOffset);
   const setYOffset = useCallback((): void => setScrollY(window.pageYOffset), []);
 
@@ -21,3 +23,5 @@ export function useScroll (): number {
 
   return scrollY;
 }
+
+export const useScroll = createNamedHook('useScroll', useScrollImpl);

packages/react-hooks/src/useStakingInfo.ts

@@ -3,9 +3,9 @@
 
 import type { DeriveStakingAccount } from '@polkadot/api-derive/types';
 
+import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
-import { createNamedHook } from './useNamedHook';
 
 function useStakingInfoImpl (accountId: string | null): DeriveStakingAccount | undefined {
   const { api } = useApi();

packages/react-hooks/src/useStepper.ts

@@ -1,11 +1,13 @@
 // Copyright 2017-2021 @polkadot/react-hooks authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+
+import { createNamedHook } from './createNamedHook';
 
 type Result = [number, () => void, () => void, (step: number) => void];
 
-export function useStepper (): Result {
+function useStepperImpl (): Result {
   const [step, setStep] = useState(1);
 
   const nextStep = useCallback(
@@ -18,5 +20,10 @@ export function useStepper (): Result {
     []
   );
 
-  return [step, nextStep, prevStep, setStep];
+  return useMemo(
+    () => [step, nextStep, prevStep, setStep],
+    [step, nextStep, prevStep, setStep]
+  );
 }
+
+export const useStepper = createNamedHook('useStepper', useStepperImpl);

packages/react-hooks/src/useSubidentities.ts

@@ -3,9 +3,9 @@
 
 import { AccountId, BalanceOf } from '@polkadot/types/interfaces';
 
+import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
-import { createNamedHook } from './useNamedHook';
 
 function useSubidentitiesImpl (address: string): AccountId[] | undefined {
   const { api } = useApi();

packages/react-hooks/src/useSudo.ts

@@ -6,10 +6,10 @@ import type { UseSudo } from './types';
 
 import { useEffect, useState } from 'react';
 
+import { createNamedHook } from './createNamedHook';
 import { useAccounts } from './useAccounts';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
-import { createNamedHook } from './useNamedHook';
 
 const transformSudo = {
   transform: (key: AccountId) => key.toString()

packages/react-hooks/src/useTeleport.ts

@@ -9,9 +9,9 @@ import { useEffect, useState } from 'react';
 import { createWsEndpoints } from '@polkadot/apps-config';
 import { isNumber } from '@polkadot/util';
 
+import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
-import { createNamedHook } from './useNamedHook';
 
 interface Teleport {
   allowTeleport: boolean;

packages/react-hooks/src/useToggle.ts

@@ -1,12 +1,13 @@
 // Copyright 2017-2021 @polkadot/react-hooks authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { createNamedHook } from './createNamedHook';
 import { useIsMountedRef } from './useIsMountedRef';
 
 // Simple wrapper for a true/false toggle
-export function useToggle (defaultValue = false, onToggle?: (isActive: boolean) => void): [boolean, () => void, (value: boolean) => void] {
+function useToggleImpl (defaultValue = false, onToggle?: (isActive: boolean) => void): [boolean, () => void, (value: boolean) => void] {
   const mountedRef = useIsMountedRef();
   const [isActive, setActive] = useState(defaultValue);
 
@@ -29,5 +30,10 @@ export function useToggle (defaultValue = false, onToggle?: (isActive: boolean)
     [isActive, onToggle]
   );
 
-  return [isActive, _toggleActive, _setActive];
+  return useMemo(
+    () => [isActive, _toggleActive, _setActive],
+    [isActive, _toggleActive, _setActive]
+  );
 }
+
+export const useToggle = createNamedHook('useToggle', useToggleImpl);