useBestNumber hook (#4846)

* useBestNumber hook

* Cleanups

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

@@ -17,7 +17,7 @@ import styled, { ThemeContext } from 'styled-components';
 
 import { ApiPromise } from '@polkadot/api';
 import { AddressInfo, AddressMini, AddressSmall, Badge, Button, ChainLock, CryptoType, Forget, Icon, IdentityIcon, LinkExternal, Menu, Popup, StatusContext, Tags } from '@polkadot/react-components';
-import { useAccountInfo, useApi, useCall, useLedger, useToggle } from '@polkadot/react-hooks';
+import { useAccountInfo, useApi, useBestNumber, useCall, useLedger, useToggle } from '@polkadot/react-hooks';
 import { keyring } from '@polkadot/ui-keyring';
 import { BN_ZERO, formatBalance, formatNumber, isFunction } from '@polkadot/util';
 
@@ -92,7 +92,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
   const { queueExtrinsic } = useContext(StatusContext);
   const api = useApi();
   const { getLedger } = useLedger();
-  const bestNumber = useCall<BN>(api.api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const balancesAll = useCall<DeriveBalancesAll>(api.api.derive.balances.all, [address]);
   const democracyLocks = useCall<DeriveDemocracyLock[]>(api.api.derive.democracy?.locks, [address]);
   const recoveryInfo = useCall<RecoveryConfig | null>(api.api.query.recovery?.recoverable, [address], transformRecovery);

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

@@ -6,7 +6,7 @@ import type { SubmittableExtrinsic } from '@polkadot/api/types';
 import BN from 'bn.js';
 
 import { DeriveBounties } from '@polkadot/api-derive/types';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useCall } from '@polkadot/react-hooks';
 import { BalanceOf, BlockNumber, BountyIndex } from '@polkadot/types/interfaces';
 
 export type BountyApi = {
@@ -34,7 +34,7 @@ export function useBounties (): BountyApi {
   const { api } = useApi();
   const bounties = useCall<DeriveBounties>(api.derive.bounties.bounties);
   const bountyIndex = useCall<BountyIndex>((api.query.bounties || api.query.treasury).bountyCount);
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const constsBase = api.consts.bounties || api.consts.treasury;
   const bountyCuratorDeposit = (constsBase.bountyCuratorDeposit as BalanceOf).toBn();
   const bountyDepositBase = (constsBase.bountyDepositBase as BalanceOf).toBn();

packages/page-calendar/src/useScheduled.ts

@@ -9,7 +9,7 @@ import type { EntryInfo, EntryInfoTyped, EntryType } from './types';
 import BN from 'bn.js';
 import { useEffect, useState } from 'react';
 
-import { useApi, useBlockTime, useCall } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useBlockTime, useCall } from '@polkadot/react-hooks';
 import { BN_ONE } from '@polkadot/util';
 
 interface DateExt {
@@ -184,7 +184,7 @@ function addFiltered (state: EntryInfoTyped[], types: [EntryType, EntryInfo[]][]
 export default function useScheduled (): EntryInfo[] {
   const { api } = useApi();
   const [blockTime] = useBlockTime();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const councilMotions = useCall<DeriveCollectiveProposal[]>(api.derive.council?.proposals);
   const dispatches = useCall<DeriveDispatch[]>(api.derive.democracy?.dispatchQueue);
   const referendums = useCall<DeriveReferendumExt[]>(api.derive.democracy?.referendums);

packages/page-contracts/src/Contracts/Contract.tsx

@@ -12,7 +12,7 @@ import styled from 'styled-components';
 
 import { ContractPromise } from '@polkadot/api-contract';
 import { AddressInfo, AddressMini, Button, Forget } from '@polkadot/react-components';
-import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useCall, useToggle } from '@polkadot/react-hooks';
 import { BlockToTime } from '@polkadot/react-query';
 import { keyring } from '@polkadot/ui-keyring';
 import { formatNumber, isFunction, isUndefined } from '@polkadot/util';
@@ -35,7 +35,7 @@ function transformInfo (optInfo: Option<ContractInfo>): ContractInfo | null {
 function Contract ({ className, contract, index, links, onCall }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const info = useCall<ContractInfo | null>(api.query.contracts.contractInfoOf, [contract.address], { transform: transformInfo });
   const [evictAt, setEvictAt] = useState<BlockNumber | null>(null);
   const [isForgetOpen, toggleIsForgetOpen] = useToggle();

packages/page-council/src/Overview/index.tsx

@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { DeriveCouncilVotes, DeriveElectionsInfo } from '@polkadot/api-derive/types';
-import type { AccountId, BlockNumber } from '@polkadot/types/interfaces';
+import type { AccountId } from '@polkadot/types/interfaces';
 
 import React from 'react';
 
 import { Button } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useCall } from '@polkadot/react-hooks';
 
 import Candidates from './Candidates';
 import Members from './Members';
@@ -40,7 +40,7 @@ const transformVotes = {
 
 function Overview ({ className = '', prime }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const electionsInfo = useCall<DeriveElectionsInfo>(api.derive.elections.info);
   const allVotes = useCall<Record<string, AccountId[]>>(api.derive.council.votes, undefined, transformVotes);
 

packages/page-democracy/src/Execute/DispatchEntry.tsx

@@ -2,12 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { DeriveDispatch } from '@polkadot/api-derive/types';
-import type { BlockNumber } from '@polkadot/types/interfaces';
 
 import React from 'react';
 
 import { LinkExternal } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useBestNumber } from '@polkadot/react-hooks';
 import { BlockToTime } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
@@ -19,8 +18,7 @@ interface Props {
 }
 
 function DispatchEntry ({ value: { at, image, imageHash, index } }: Props): React.ReactElement<Props> {
-  const { api } = useApi();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
 
   return (
     <tr>

packages/page-democracy/src/Execute/Scheduled.tsx

@@ -1,13 +1,12 @@
 // Copyright 2017-2021 @polkadot/app-democracy authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { BlockNumber } from '@polkadot/types/interfaces';
 import type { ScheduledExt } from './types';
 
 import React from 'react';
 
 import { CallExpander } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useBestNumber } from '@polkadot/react-hooks';
 import { BlockToTime } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
@@ -17,9 +16,7 @@ interface Props {
 }
 
 function Scheduled ({ className = '', value: { blockNumber, call, maybeId, maybePeriodic } }: Props): React.ReactElement<Props> {
-  const { api } = useApi();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
-
+  const bestNumber = useBestNumber();
   const period = maybePeriodic.unwrapOr(null);
   const name = maybeId.unwrapOr(null);
 

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

@@ -2,14 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { DeriveReferendumExt } from '@polkadot/api-derive/types';
-import type { Balance, BlockNumber } from '@polkadot/types/interfaces';
+import type { Balance } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import { Badge, Button, Icon, LinkExternal } from '@polkadot/react-components';
-import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
+import { useAccounts, useApi, useBestNumber, useCall } from '@polkadot/react-hooks';
 import { BlockToTime } from '@polkadot/react-query';
 import { BN_ONE, formatNumber, isBoolean } from '@polkadot/util';
 
@@ -40,7 +40,7 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
   const { t } = useTranslation();
   const { api } = useApi();
   const { allAccounts } = useAccounts();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const totalIssuance = useCall<Balance>(api.query.balances.totalIssuance);
   const { changeAye, changeNay } = useChangeCalc(status.threshold, votedAye, votedNay, votedTotal);
   const threshold = useMemo(

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

@@ -5,7 +5,7 @@ import BN from 'bn.js';
 import React from 'react';
 
 import { CardSummary, SummaryBox } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useCall, useCallMulti } from '@polkadot/react-hooks';
 import { BN_ONE, formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
@@ -14,13 +14,19 @@ interface Props {
   referendumCount?: number;
 }
 
+const optMulti = {
+  defaultValue: [undefined, undefined] as [BN | undefined, BN | undefined]
+};
+
 function Summary ({ referendumCount }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const activeProposals = useCall<unknown[]>(api.derive.democracy.proposals);
-  const bestNumber = useCall<BN>(api.derive.chain.bestNumber);
-  const publicPropCount = useCall<BN>(api.query.democracy.publicPropCount);
-  const referendumTotal = useCall<BN>(api.query.democracy.referendumCount);
+  const bestNumber = useBestNumber();
+  const [publicPropCount, referendumTotal] = useCallMulti<[BN | undefined, BN | undefined]>([
+    api.query.democracy.publicPropCount,
+    api.query.democracy.referendumCount
+  ], optMulti);
 
   return (
     <SummaryBox>

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

@@ -1,12 +1,10 @@
 // Copyright 2017-2021 @polkadot/app-explorer authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { BlockNumber } from '@polkadot/types/interfaces';
-
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useBestNumber } from '@polkadot/react-hooks';
 import { isHex } from '@polkadot/util';
 
 import Query from '../Query';
@@ -14,8 +12,7 @@ import BlockByHash from './ByHash';
 import BlockByNumber from './ByNumber';
 
 function Entry (): React.ReactElement | null {
-  const { api } = useApi();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const { value } = useParams<{ value: string }>();
   const [stateValue, setStateValue] = useState<string | undefined>(value);
 

packages/page-parachains/src/Auctions/Bid.tsx

@@ -7,7 +7,7 @@ import type { AuctionIndex, BlockNumber, LeasePeriodOf } from '@polkadot/types/i
 import React, { useMemo, useState } from 'react';
 
 import { Button, Dropdown, InputAddress, InputBalance, InputNumber, Modal, TxButton } from '@polkadot/react-components';
-import { useAccounts, useApi, useCall, useToggle } from '@polkadot/react-hooks';
+import { useAccounts, useApi, useBestNumber, useToggle } from '@polkadot/react-hooks';
 import { BN_ZERO, formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
@@ -28,7 +28,7 @@ function Bid ({ auctionInfo, className, id }: Props): React.ReactElement<Props>
   const { t } = useTranslation();
   const { api } = useApi();
   const { hasAccounts } = useAccounts();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [amount, setAmount] = useState<BN | undefined>(BN_ZERO);
   const [paraId, setParaId] = useState<BN | undefined>(BN_ZERO);

packages/page-parachains/src/Auctions/Summary.tsx

@@ -7,7 +7,7 @@ import type { Winning } from './types';
 import React from 'react';
 
 import { CardSummary, SummaryBox } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useCall } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
@@ -23,7 +23,7 @@ interface Props {
 function Summary ({ auctionInfo, className, lastWinner, numAuctions }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const totalIssuance = useCall<Balance>(api.query.balances?.totalIssuance);
   const [period, ending] = auctionInfo || [];
 

packages/page-parachains/src/Auctions/useWinningData.ts

@@ -8,7 +8,7 @@ import type { WinnerData, Winning } from './types';
 import BN from 'bn.js';
 import { useEffect, useRef, useState } from 'react';
 
-import { useApi, useCall, useEventTrigger } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useCall, useEventTrigger } from '@polkadot/react-hooks';
 import { BN_ONE, BN_ZERO } from '@polkadot/util';
 
 import { RANGES } from './constants';
@@ -92,7 +92,7 @@ function mergeFirst (prev: Winning[] | null, optFirstData: Option<WinningData>):
 export default function useWinningData (auctionInfo: [LeasePeriodOf, BlockNumber] | null): Winning[] | null {
   const { api } = useApi();
   const [result, setResult] = useState<Winning[] | null>(null);
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const trigger = useEventTrigger([api.events.auctions?.BidAccepted]);
   const triggerRef = useRef(trigger);
   const allEntries = useCall<[StorageKey<[BlockNumber]>, Option<WinningData>][]>(api.query.auctions?.winning.entries);

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

@@ -1,11 +1,10 @@
 // Copyright 2017-2021 @polkadot/app-parachains authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import BN from 'bn.js';
 import React from 'react';
 
 import { Button } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useBestNumber } from '@polkadot/react-hooks';
 
 import FundAdd from './FundAdd';
 import Funds from './Funds';
@@ -17,8 +16,7 @@ interface Props {
 }
 
 function Crowdloan ({ className }: Props): React.ReactElement<Props> {
-  const { api } = useApi();
-  const bestNumber = useCall<BN>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const { activeCap, activeRaised, funds, totalCap, totalRaised } = useFunds();
 
   return (

packages/page-parachains/src/Crowdloan/useFunds.ts

@@ -8,7 +8,7 @@ import type { Campaign } from './types';
 import BN from 'bn.js';
 import { useEffect, useMemo, useState } from 'react';
 
-import { useApi, useCall, useCallMulti, useEventTrigger } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useCallMulti, useEventTrigger } from '@polkadot/react-hooks';
 import { BN_ZERO } from '@polkadot/util';
 
 interface Result {
@@ -83,7 +83,7 @@ function createResult (bestNumber: BlockNumber, funds: Campaign[], prev: Result)
 
 export default function useFunds (): Result {
   const { api } = useApi();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const [paraIds, setParaIds] = useState<ParaId[]>([]);
   const trigger = useEventTrigger([api.events.crowdloan.Created]);
   const optFunds = useCallMulti<Option<FundInfo>[]>(paraIds.map((id) => [api.query.crowdloan.funds, id]));

packages/page-parachains/src/Overview/ParachainList.tsx

@@ -9,7 +9,7 @@ import BN from 'bn.js';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import { Table } from '@polkadot/react-components';
-import { useApi, useCall, useCallMulti } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useCall, useCallMulti } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import Parachain from './Parachain';
@@ -45,7 +45,7 @@ function includeEntry (map: EventMap, event: Event, blockHash: string, blockNumb
 function ParachainList ({ ids, scheduled }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const bestNumber = useCall<BN>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const lastBlock = useCall<SignedBlockExtended>(api.derive.chain.subscribeNewBlocks);
   const [{ lastBacked, lastIncluded }, setLastEvents] = useState<LastEvents>({ lastBacked: {}, lastIncluded: {} });
   const [validators, validatorGroups] = useCallMulti<[AccountId[] | null, ParaValidatorIndex[][] | null]>([

packages/page-parachains/src/Overview/useLeasePeriod.ts

@@ -6,11 +6,11 @@ import type { LeasePeriod } from './types';
 
 import { useMemo } from 'react';
 
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useApi, useBestNumber } from '@polkadot/react-hooks';
 
 export default function useLeasePeriod (): LeasePeriod | null {
   const { api } = useApi();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
 
   return useMemo((): LeasePeriod | null => {
     if (api.consts.slots?.leasePeriod && bestNumber) {

packages/page-poll/src/index.tsx

@@ -10,7 +10,7 @@ import { Trans } from 'react-i18next';
 import styled from 'styled-components';
 
 import { Button, Columar, InputAddress, Progress, Spinner, Tabs, Toggle, TxButton } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useCallMulti } from '@polkadot/react-hooks';
 import { BlockToTime, FormatBalance } from '@polkadot/react-query';
 import { BN_MILLION, BN_ONE, BN_ZERO, bnMax, formatBalance, formatNumber } from '@polkadot/util';
 
@@ -21,17 +21,25 @@ interface Props {
   className?: string;
 }
 
+type MultiResult = [Balance | undefined, [Balance, Balance, Balance, Balance] | undefined];
+
 interface Turnout {
   percentage: number;
   voted: BN;
 }
 
+const optMulti = {
+  defaultValue: [undefined, undefined] as MultiResult
+};
+
 function PollApp ({ basePath, className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const totals = useCall<ITuple<[Balance, Balance, Balance, Balance]>>(api.query.poll.totals);
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
-  const totalIssuance = useCall<Balance>(api.query.balances.totalIssuance);
+  const bestNumber = useBestNumber();
+  const [totalIssuance, totals] = useCallMulti<MultiResult>([
+    api.query.balances.totalIssuance,
+    api.query.poll.totals
+  ], optMulti);
   const [accountId, setAccountId] = useState<string | null>(null);
   const [turnout, setTurnout] = useState<Turnout | null>(null);
   const [opt10m, setOpt10m] = useState(false);

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

@@ -8,7 +8,7 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import { CardSummary, SummaryBox } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useCall } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 
 import { useTranslation } from '../translate';
@@ -22,7 +22,7 @@ function Summary ({ className = '', info }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const members = useCall<unknown[]>(api.derive.society.members);
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
 
   const pot = useMemo((): string | null => {
     return info && info.pot.gtn(0)

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

@@ -1,13 +1,11 @@
 // Copyright 2017-2021 @polkadot/app-treasury authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Balance } from '@polkadot/types/interfaces';
-
 import BN from 'bn.js';
 import React from 'react';
 
 import { CardSummary, SummaryBox } from '@polkadot/react-components';
-import { useApi, useCall, useTreasury } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useCall, useTreasury } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
@@ -21,7 +19,7 @@ interface Props {
 function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const bestNumber = useCall<Balance>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const totalProposals = useCall<BN>(api.query.treasury.proposalCount);
 
   const { burn, spendPeriod, value } = useTreasury();

packages/page-treasury/src/Tips/Tips.tsx

@@ -2,14 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Option } from '@polkadot/types';
-import type { BlockNumber, OpenTip, OpenTipTo225 } from '@polkadot/types/interfaces';
+import type { OpenTip, OpenTipTo225 } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
 import React, { useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { Table, Toggle } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useCall } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import Tip from './Tip';
@@ -53,7 +53,7 @@ function Tips ({ className = '', defaultId, hashes, isMember, members, onRefresh
   const { t } = useTranslation();
   const { api } = useApi();
   const [onlyUntipped, setOnlyUntipped] = useState(false);
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const tipsWithHashes = useCall<[[string[]], Option<OpenTip>[]]>(hashes && (api.query.tips || api.query.treasury).tips.multi, [hashes], TIP_OPTS);
 
   const tips = useMemo(

packages/react-components/src/AddressInfo.tsx

@@ -11,7 +11,7 @@ import styled from 'styled-components';
 
 import { withCalls, withMulti } from '@polkadot/react-api/hoc';
 import { Expander, Icon, Tooltip } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useBestNumber } from '@polkadot/react-hooks';
 import { BlockToTime, FormatBalance } from '@polkadot/react-query';
 import { BN_ZERO, formatBalance, formatNumber, hexToString, isObject } from '@polkadot/util';
 
@@ -413,8 +413,7 @@ function renderBalances (props: Props, lookup: Record<string, string>, bestNumbe
 
 function AddressInfo (props: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { api } = useApi();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const { children, className = '', extraInfo, withBalanceToggle, withHexSessionId } = props;
 
   const lookup = useRef<Record<string, string>>({

packages/react-components/src/DemocracyLocks.tsx

@@ -8,7 +8,7 @@ import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useBestNumber } from '@polkadot/react-hooks';
 import { BlockToTime, FormatBalance } from '@polkadot/react-query';
 import { BN_ZERO, bnMax, formatBalance, formatNumber } from '@polkadot/util';
 
@@ -84,8 +84,7 @@ function groupLocks (t: TFunction, bestNumber: BN, locks: DeriveDemocracyLock[]
 
 function DemocracyLocks ({ className = '', value }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const { api } = useApi();
-  const bestNumber = useCall<BN>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
   const [trigger] = useState(() => `${Date.now()}-democracy-locks-${++id}`);
   const [{ maxBalance, sorted }, setState] = useState<State>({ maxBalance: BN_ZERO, sorted: [] });
 

packages/react-hooks/src/index.ts

@@ -7,6 +7,7 @@ export { useAccounts } from './useAccounts';
 export { useAddresses } from './useAddresses';
 export { useApi } from './useApi';
 export { useAvailableSlashes } from './useAvailableSlashes';
+export { useBestNumber } from './useBestNumber';
 export { useBlockTime } from './useBlockTime';
 export { useBlocksPerDays } from './useBlocksPerDays';
 export { useCacheKey } from './useCacheKey';

packages/react-hooks/src/useBestNumber.ts

@@ -0,0 +1,13 @@
+// Copyright 2017-2021 @polkadot/react-hooks authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { BlockNumber } from '@polkadot/types/interfaces';
+
+import { useApi } from './useApi';
+import { useCall } from './useCall';
+
+export function useBestNumber (): BlockNumber | undefined {
+  const { api } = useApi();
+
+  return useCall<BlockNumber>(api.derive.chain.bestNumber);
+}

packages/react-hooks/src/useCacheKey.ts

@@ -16,10 +16,15 @@ export function useCacheKey <T> (storageKeyBase: string): [(defaultValue?: T) =>
 
   // FIXME both these want "T"... incorrect
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const getter = useCallback((): T | undefined => store.get(storageKey) as T, [storageKey]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const setter = useCallback((value: T): T => store.set(storageKey, value) as T, [storageKey]);
+  const getter = useCallback(
+    (): T | undefined => store.get(storageKey) as T,
+    [storageKey]
+  );
+
+  const setter = useCallback(
+    (value: T): T => store.set(storageKey, value) as T,
+    [storageKey]
+  );
 
   return [getter, setter];
 }

packages/react-hooks/src/useTreasury.ts

@@ -13,37 +13,37 @@ import { BN_MILLION, BN_ZERO, stringToU8a } from '@polkadot/util';
 
 const TREASURY_ACCOUNT = stringToU8a('modlpy/trsry'.padEnd(32, '\0'));
 
-interface Treasury {
+interface Result {
   value?: Balance;
   burn?: BN;
   spendPeriod: BN;
 }
 
-export function useTreasury (): Treasury {
+export function useTreasury (): Result {
   const { api } = useApi();
-
-  const [value, setValue] = useState<Balance>();
-  const [burn, setBurn] = useState<BN>();
+  const [result, setResult] = useState<Result>({
+    spendPeriod: api.consts.treasury
+      ? api.consts.treasury.spendPeriod
+      : BN_ZERO
+  });
 
   const treasuryBalance = useCall<DeriveBalancesAccount>(api.derive.balances.account, [TREASURY_ACCOUNT]);
-  const spendPeriod = api.consts.treasury ? api.consts.treasury.spendPeriod : BN_ZERO;
 
   useEffect(() => {
     if (!api.consts.treasury) {
       return;
     }
 
-    setValue(treasuryBalance?.freeBalance.gtn(0)
-      ? treasuryBalance.freeBalance
-      : undefined);
-    setBurn(treasuryBalance?.freeBalance.gtn(0) && !api.consts.treasury.burn.isZero()
-      ? api.consts.treasury.burn.mul(treasuryBalance.freeBalance).div(BN_MILLION)
-      : BN_ZERO);
-  }, [api, treasuryBalance, spendPeriod]);
+    setResult(({ spendPeriod }) => ({
+      burn: treasuryBalance?.freeBalance.gtn(0) && !api.consts.treasury.burn.isZero()
+        ? api.consts.treasury.burn.mul(treasuryBalance.freeBalance).div(BN_MILLION)
+        : BN_ZERO,
+      spendPeriod,
+      value: treasuryBalance?.freeBalance.gtn(0)
+        ? treasuryBalance.freeBalance
+        : undefined
+    }));
+  }, [api, treasuryBalance]);
 
-  return {
-    burn,
-    spendPeriod,
-    value
-  };
+  return result;
 }

packages/react-hooks/src/useVotingStatus.ts

@@ -10,7 +10,7 @@ import { ApiPromise } from '@polkadot/api';
 import { isFunction } from '@polkadot/util';
 
 import { useApi } from './useApi';
-import { useCall } from './useCall';
+import { useBestNumber } from './useBestNumber';
 
 interface State {
   hasFailed: boolean;
@@ -54,7 +54,7 @@ function getStatus (api: ApiPromise, bestNumber: BlockNumber, votes: Votes, numM
 
 export function useVotingStatus (votes: Votes | null | undefined, numMembers: number, section: 'council' | 'technicalCommittee'): State {
   const { api } = useApi();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
+  const bestNumber = useBestNumber();
 
   return useMemo(
     () => bestNumber && votes