diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx index 906418c63b..f3bcca73f6 100644 --- a/packages/page-accounts/src/Accounts/Account.tsx +++ b/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(api.api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const balancesAll = useCall(api.api.derive.balances.all, [address]); const democracyLocks = useCall(api.api.derive.democracy?.locks, [address]); const recoveryInfo = useCall(api.api.query.recovery?.recoverable, [address], transformRecovery); diff --git a/packages/page-bounties/src/hooks/useBounties.tsx b/packages/page-bounties/src/hooks/useBounties.tsx index 6bc6ff1f21..3f689b49f6 100644 --- a/packages/page-bounties/src/hooks/useBounties.tsx +++ b/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(api.derive.bounties.bounties); const bountyIndex = useCall((api.query.bounties || api.query.treasury).bountyCount); - const bestNumber = useCall(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(); diff --git a/packages/page-calendar/src/useScheduled.ts b/packages/page-calendar/src/useScheduled.ts index b4be554c6f..2bf8dbe931 100644 --- a/packages/page-calendar/src/useScheduled.ts +++ b/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(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const councilMotions = useCall(api.derive.council?.proposals); const dispatches = useCall(api.derive.democracy?.dispatchQueue); const referendums = useCall(api.derive.democracy?.referendums); diff --git a/packages/page-contracts/src/Contracts/Contract.tsx b/packages/page-contracts/src/Contracts/Contract.tsx index 88f53285ba..886536faff 100644 --- a/packages/page-contracts/src/Contracts/Contract.tsx +++ b/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 | null { function Contract ({ className, contract, index, links, onCall }: Props): React.ReactElement | null { const { t } = useTranslation(); const { api } = useApi(); - const bestNumber = useCall(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const info = useCall(api.query.contracts.contractInfoOf, [contract.address], { transform: transformInfo }); const [evictAt, setEvictAt] = useState(null); const [isForgetOpen, toggleIsForgetOpen] = useToggle(); diff --git a/packages/page-council/src/Overview/index.tsx b/packages/page-council/src/Overview/index.tsx index a582bbebc4..5bbfbf3625 100644 --- a/packages/page-council/src/Overview/index.tsx +++ b/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 { const { api } = useApi(); - const bestNumber = useCall(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const electionsInfo = useCall(api.derive.elections.info); const allVotes = useCall>(api.derive.council.votes, undefined, transformVotes); diff --git a/packages/page-democracy/src/Execute/DispatchEntry.tsx b/packages/page-democracy/src/Execute/DispatchEntry.tsx index 59f8229fbf..0e19a01884 100644 --- a/packages/page-democracy/src/Execute/DispatchEntry.tsx +++ b/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 { - const { api } = useApi(); - const bestNumber = useCall(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); return ( diff --git a/packages/page-democracy/src/Execute/Scheduled.tsx b/packages/page-democracy/src/Execute/Scheduled.tsx index 29ec1bc74e..e5a773c89c 100644 --- a/packages/page-democracy/src/Execute/Scheduled.tsx +++ b/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 { - const { api } = useApi(); - const bestNumber = useCall(api.derive.chain.bestNumber); - + const bestNumber = useBestNumber(); const period = maybePeriodic.unwrapOr(null); const name = maybeId.unwrapOr(null); diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx index a173560d0c..e4b66e9f72 100644 --- a/packages/page-democracy/src/Overview/Referendum.tsx +++ b/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(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const totalIssuance = useCall(api.query.balances.totalIssuance); const { changeAye, changeNay } = useChangeCalc(status.threshold, votedAye, votedNay, votedTotal); const threshold = useMemo( diff --git a/packages/page-democracy/src/Overview/Summary.tsx b/packages/page-democracy/src/Overview/Summary.tsx index 7ddab1eaac..93709fbad3 100644 --- a/packages/page-democracy/src/Overview/Summary.tsx +++ b/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 { const { t } = useTranslation(); const { api } = useApi(); const activeProposals = useCall(api.derive.democracy.proposals); - const bestNumber = useCall(api.derive.chain.bestNumber); - const publicPropCount = useCall(api.query.democracy.publicPropCount); - const referendumTotal = useCall(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 ( diff --git a/packages/page-explorer/src/BlockInfo/index.tsx b/packages/page-explorer/src/BlockInfo/index.tsx index 437438fc9c..66c0b589d1 100644 --- a/packages/page-explorer/src/BlockInfo/index.tsx +++ b/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(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const { value } = useParams<{ value: string }>(); const [stateValue, setStateValue] = useState(value); diff --git a/packages/page-parachains/src/Auctions/Bid.tsx b/packages/page-parachains/src/Auctions/Bid.tsx index 520c76ac8e..fcbf2705d3 100644 --- a/packages/page-parachains/src/Auctions/Bid.tsx +++ b/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 const { t } = useTranslation(); const { api } = useApi(); const { hasAccounts } = useAccounts(); - const bestNumber = useCall(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const [accountId, setAccountId] = useState(null); const [amount, setAmount] = useState(BN_ZERO); const [paraId, setParaId] = useState(BN_ZERO); diff --git a/packages/page-parachains/src/Auctions/Summary.tsx b/packages/page-parachains/src/Auctions/Summary.tsx index ce43511b94..54511a7997 100644 --- a/packages/page-parachains/src/Auctions/Summary.tsx +++ b/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 { const { t } = useTranslation(); const { api } = useApi(); - const bestNumber = useCall(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const totalIssuance = useCall(api.query.balances?.totalIssuance); const [period, ending] = auctionInfo || []; diff --git a/packages/page-parachains/src/Auctions/useWinningData.ts b/packages/page-parachains/src/Auctions/useWinningData.ts index f98a15a42e..f76b1ce128 100644 --- a/packages/page-parachains/src/Auctions/useWinningData.ts +++ b/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): export default function useWinningData (auctionInfo: [LeasePeriodOf, BlockNumber] | null): Winning[] | null { const { api } = useApi(); const [result, setResult] = useState(null); - const bestNumber = useCall(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const trigger = useEventTrigger([api.events.auctions?.BidAccepted]); const triggerRef = useRef(trigger); const allEntries = useCall<[StorageKey<[BlockNumber]>, Option][]>(api.query.auctions?.winning.entries); diff --git a/packages/page-parachains/src/Crowdloan/index.tsx b/packages/page-parachains/src/Crowdloan/index.tsx index fbdd41bb23..fe17a68114 100644 --- a/packages/page-parachains/src/Crowdloan/index.tsx +++ b/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 { - const { api } = useApi(); - const bestNumber = useCall(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const { activeCap, activeRaised, funds, totalCap, totalRaised } = useFunds(); return ( diff --git a/packages/page-parachains/src/Crowdloan/useFunds.ts b/packages/page-parachains/src/Crowdloan/useFunds.ts index 026c1c8864..564f8b3222 100644 --- a/packages/page-parachains/src/Crowdloan/useFunds.ts +++ b/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(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const [paraIds, setParaIds] = useState([]); const trigger = useEventTrigger([api.events.crowdloan.Created]); const optFunds = useCallMulti[]>(paraIds.map((id) => [api.query.crowdloan.funds, id])); diff --git a/packages/page-parachains/src/Overview/ParachainList.tsx b/packages/page-parachains/src/Overview/ParachainList.tsx index 974be94393..2d3b0d639c 100644 --- a/packages/page-parachains/src/Overview/ParachainList.tsx +++ b/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 { const { t } = useTranslation(); const { api } = useApi(); - const bestNumber = useCall(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const lastBlock = useCall(api.derive.chain.subscribeNewBlocks); const [{ lastBacked, lastIncluded }, setLastEvents] = useState({ lastBacked: {}, lastIncluded: {} }); const [validators, validatorGroups] = useCallMulti<[AccountId[] | null, ParaValidatorIndex[][] | null]>([ diff --git a/packages/page-parachains/src/Overview/useLeasePeriod.ts b/packages/page-parachains/src/Overview/useLeasePeriod.ts index 41ef8ada8b..a6e75577ab 100644 --- a/packages/page-parachains/src/Overview/useLeasePeriod.ts +++ b/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(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); return useMemo((): LeasePeriod | null => { if (api.consts.slots?.leasePeriod && bestNumber) { diff --git a/packages/page-poll/src/index.tsx b/packages/page-poll/src/index.tsx index cb241dbab3..9ac789f87d 100644 --- a/packages/page-poll/src/index.tsx +++ b/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 { const { t } = useTranslation(); const { api } = useApi(); - const totals = useCall>(api.query.poll.totals); - const bestNumber = useCall(api.derive.chain.bestNumber); - const totalIssuance = useCall(api.query.balances.totalIssuance); + const bestNumber = useBestNumber(); + const [totalIssuance, totals] = useCallMulti([ + api.query.balances.totalIssuance, + api.query.poll.totals + ], optMulti); const [accountId, setAccountId] = useState(null); const [turnout, setTurnout] = useState(null); const [opt10m, setOpt10m] = useState(false); diff --git a/packages/page-society/src/Overview/Summary.tsx b/packages/page-society/src/Overview/Summary.tsx index 32a9b1c4bf..fb29165a45 100644 --- a/packages/page-society/src/Overview/Summary.tsx +++ b/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 { const { t } = useTranslation(); const { api } = useApi(); const members = useCall(api.derive.society.members); - const bestNumber = useCall(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const pot = useMemo((): string | null => { return info && info.pot.gtn(0) diff --git a/packages/page-treasury/src/Overview/Summary.tsx b/packages/page-treasury/src/Overview/Summary.tsx index f02eb4d2d9..1109448c29 100644 --- a/packages/page-treasury/src/Overview/Summary.tsx +++ b/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 { const { t } = useTranslation(); const { api } = useApi(); - const bestNumber = useCall(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const totalProposals = useCall(api.query.treasury.proposalCount); const { burn, spendPeriod, value } = useTreasury(); diff --git a/packages/page-treasury/src/Tips/Tips.tsx b/packages/page-treasury/src/Tips/Tips.tsx index 2c24364262..30e2df4ce3 100644 --- a/packages/page-treasury/src/Tips/Tips.tsx +++ b/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(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const tipsWithHashes = useCall<[[string[]], Option[]]>(hashes && (api.query.tips || api.query.treasury).tips.multi, [hashes], TIP_OPTS); const tips = useMemo( diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx index c1b5869c09..4f0bf236de 100644 --- a/packages/react-components/src/AddressInfo.tsx +++ b/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, bestNumbe function AddressInfo (props: Props): React.ReactElement { const { t } = useTranslation(); - const { api } = useApi(); - const bestNumber = useCall(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const { children, className = '', extraInfo, withBalanceToggle, withHexSessionId } = props; const lookup = useRef>({ diff --git a/packages/react-components/src/DemocracyLocks.tsx b/packages/react-components/src/DemocracyLocks.tsx index 099e629f81..2e6c5fa4cc 100644 --- a/packages/react-components/src/DemocracyLocks.tsx +++ b/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 | null { const { t } = useTranslation(); - const { api } = useApi(); - const bestNumber = useCall(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); const [trigger] = useState(() => `${Date.now()}-democracy-locks-${++id}`); const [{ maxBalance, sorted }, setState] = useState({ maxBalance: BN_ZERO, sorted: [] }); diff --git a/packages/react-hooks/src/index.ts b/packages/react-hooks/src/index.ts index d9c78710f6..7f006372f6 100644 --- a/packages/react-hooks/src/index.ts +++ b/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'; diff --git a/packages/react-hooks/src/useBestNumber.ts b/packages/react-hooks/src/useBestNumber.ts new file mode 100644 index 0000000000..663e6c6b2d --- /dev/null +++ b/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(api.derive.chain.bestNumber); +} diff --git a/packages/react-hooks/src/useCacheKey.ts b/packages/react-hooks/src/useCacheKey.ts index f9384a8a21..28125a5916 100644 --- a/packages/react-hooks/src/useCacheKey.ts +++ b/packages/react-hooks/src/useCacheKey.ts @@ -16,10 +16,15 @@ export function useCacheKey (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]; } diff --git a/packages/react-hooks/src/useTreasury.ts b/packages/react-hooks/src/useTreasury.ts index 7e33ffa9ca..963475b415 100644 --- a/packages/react-hooks/src/useTreasury.ts +++ b/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(); - const [burn, setBurn] = useState(); + const [result, setResult] = useState({ + spendPeriod: api.consts.treasury + ? api.consts.treasury.spendPeriod + : BN_ZERO + }); const treasuryBalance = useCall(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; } diff --git a/packages/react-hooks/src/useVotingStatus.ts b/packages/react-hooks/src/useVotingStatus.ts index c543bb3bc2..f5f825d95c 100644 --- a/packages/react-hooks/src/useVotingStatus.ts +++ b/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(api.derive.chain.bestNumber); + const bestNumber = useBestNumber(); return useMemo( () => bestNumber && votes