Extract Latency/API stats reusable chart (#7679)

* Extract Latency/API stats reusable chart

* Adjust

package.json

@@ -91,24 +91,24 @@
     "webpack-cli": "^4.9.2"
   },
   "resolutions": {
-    "@polkadot/api": "^8.6.3-8",
+    "@polkadot/api": "^8.6.3-9",
-    "@polkadot/api-augment": "^8.6.3-8",
+    "@polkadot/api-augment": "^8.6.3-9",
-    "@polkadot/api-base": "^8.6.3-8",
+    "@polkadot/api-base": "^8.6.3-9",
-    "@polkadot/api-contract": "^8.6.3-8",
+    "@polkadot/api-contract": "^8.6.3-9",
-    "@polkadot/api-derive": "^8.6.3-8",
+    "@polkadot/api-derive": "^8.6.3-9",
     "@polkadot/hw-ledger": "^9.3.2-1",
     "@polkadot/keyring": "^9.3.2-1",
     "@polkadot/networks": "^9.3.2-1",
     "@polkadot/phishing": "^0.13.51",
-    "@polkadot/rpc-augment": "^8.6.3-8",
+    "@polkadot/rpc-augment": "^8.6.3-9",
-    "@polkadot/rpc-core": "^8.6.3-8",
+    "@polkadot/rpc-core": "^8.6.3-9",
-    "@polkadot/rpc-provider": "^8.6.3-8",
+    "@polkadot/rpc-provider": "^8.6.3-9",
-    "@polkadot/types": "^8.6.3-8",
+    "@polkadot/types": "^8.6.3-9",
-    "@polkadot/types-augment": "^8.6.3-8",
+    "@polkadot/types-augment": "^8.6.3-9",
-    "@polkadot/types-codec": "^8.6.3-8",
+    "@polkadot/types-codec": "^8.6.3-9",
-    "@polkadot/types-create": "^8.6.3-8",
+    "@polkadot/types-create": "^8.6.3-9",
-    "@polkadot/types-known": "^8.6.3-8",
+    "@polkadot/types-known": "^8.6.3-9",
-    "@polkadot/types-support": "^8.6.3-8",
+    "@polkadot/types-support": "^8.6.3-9",
     "@polkadot/util": "^9.3.2-1",
     "@polkadot/util-crypto": "^9.3.2-1",
     "@polkadot/wasm-crypto": "^6.1.1",

packages/apps-config/package.json

@@ -29,10 +29,10 @@
     "@metaverse-network-sdk/type-definitions": "^0.0.1-13",
     "@parallel-finance/type-definitions": "1.7.1",
     "@phala/typedefs": "0.2.30",
-    "@polkadot/api": "^8.6.3-8",
+    "@polkadot/api": "^8.6.3-9",
-    "@polkadot/api-derive": "^8.6.3-8",
+    "@polkadot/api-derive": "^8.6.3-9",
     "@polkadot/networks": "^9.3.2-1",
-    "@polkadot/types": "^8.6.3-8",
+    "@polkadot/types": "^8.6.3-9",
     "@polkadot/util": "^9.3.2-1",
     "@polkadot/x-fetch": "^9.3.2-1",
     "@polymathnetwork/polymesh-types": "0.0.2",

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

@@ -5,6 +5,8 @@ import type { PalletAssetsAssetAccount } from '@polkadot/types/lookup';
 import type { Option } from '@polkadot/types-codec';
 import type { BN } from '@polkadot/util';
 
+import { useMemo } from 'react';
+
 import { createNamedHook, useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 
 interface AccountResult {
@@ -21,7 +23,7 @@ function isOptional (value: PalletAssetsAssetAccount | Option<PalletAssetsAssetA
   return (value as Option<PalletAssetsAssetAccount>).isSome || (value as Option<PalletAssetsAssetAccount>).isNone;
 }
 
-const queryOptions = {
+const OPTS = {
   transform: ([[params], accounts]: [[[BN, string][]], (PalletAssetsAssetAccount | Option<PalletAssetsAssetAccount>)[]]): Result => ({
     accounts: params
       .map(([, accountId], index) => {
@@ -46,7 +48,11 @@ const queryOptions = {
 function useBalancesImpl (id?: BN | null): AccountResult[] | null {
   const { api } = useApi();
   const { allAccounts } = useAccounts();
-  const query = useCall(id && api.query.assets.account.multi, id && [allAccounts.map((a) => [id, a])], queryOptions);
+  const keys = useMemo(
+    () => [allAccounts.map((a) => [id, a])],
+    [allAccounts, id]
+  );
+  const query = useCall(keys && api.query.assets.account.multi, keys, OPTS);
 
   return (query && id && (query.assetId === id) && query.accounts) || null;
 }

packages/page-contracts/package.json

@@ -14,6 +14,6 @@
   "version": "0.115.3-45",
   "dependencies": {
     "@babel/runtime": "^7.18.0",
-    "@polkadot/api-contract": "^8.6.3-8"
+    "@polkadot/api-contract": "^8.6.3-9"
   }
 }

packages/page-council/src/useCounter.ts

@@ -6,7 +6,7 @@ import type { DeriveCollectiveProposal } from '@polkadot/api-derive/types';
 import { createNamedHook, useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 
 const transformCounter = {
-  transform: (motions: DeriveCollectiveProposal[]) => motions.filter(({ votes }): boolean => !!votes).length
+  transform: (motions: DeriveCollectiveProposal[]) => motions.filter(({ votes }) => !!votes).length
 };
 
 function useCounterImpl (): number {

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

@@ -18,7 +18,7 @@ interface Props {
   className?: string;
 }
 
-const transformEntries = {
+const OPT_SCHED = {
   transform: (entries: [{ args: [BlockNumber] }, Option<Scheduled | PalletSchedulerScheduledV3>[]][]): ScheduledExt[] => {
     return entries
       .filter(([, all]) => all.some((o) => o.isSome))
@@ -51,7 +51,7 @@ function Schedule ({ className = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const bestNumber = useBestNumber();
-  const items = useCall<ScheduledExt[]>(api.query.scheduler.agenda.entries, undefined, transformEntries);
+  const items = useCall<ScheduledExt[]>(api.query.scheduler.agenda.entries, undefined, OPT_SCHED);
 
   const filtered = useMemo(
     () => bestNumber && items && items.filter(({ blockNumber }) => blockNumber.gte(bestNumber)),

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

@@ -36,7 +36,7 @@ interface ParamState {
 
 const DEFAULT_PARAMS: ParamState = { params: [], values: [] };
 
-const transformProposal = {
+const OPT_PROP = {
   transform: (optProp: Option<TreasuryProposal>) => optProp.unwrapOr(null)
 };
 
@@ -44,7 +44,7 @@ function TreasuryCell ({ className = '', value }: Props): React.ReactElement<Pro
   const { t } = useTranslation();
   const { api } = useApi();
   const [proposalId] = useState(() => value.unwrap());
-  const proposal = useCall<TreasuryProposal | null>(api.query.treasury.proposals, [proposalId], transformProposal);
+  const proposal = useCall<TreasuryProposal | null>(api.query.treasury.proposals, [proposalId], OPT_PROP);
   const [{ params, values }, setExtracted] = useState<ParamState>(DEFAULT_PARAMS);
 
   useEffect((): void => {

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

@@ -6,9 +6,10 @@ import type { Stats } from '@polkadot/react-components/ApiStats/types';
 import React, { useContext, useMemo } from 'react';
 import styled from 'styled-components';
 
-import { ApiStatsContext, CardSummary, Chart, Spinner, SummaryBox } from '@polkadot/react-components';
+import { ApiStatsContext, CardSummary, Spinner, SummaryBox } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
+import Chart from '../Latency/Chart';
 import { useTranslation } from '../translate';
 
 interface Props {
@@ -30,13 +31,6 @@ interface ChartInfo {
 
 const COLORS_BYTES = ['#00448c', '#008c44', '#acacac'];
 const COLORS_REQUESTS = ['#008c8c', '#00448c', '#8c4400', '#acacac'];
-const OPTIONS = {
-  animation: {
-    duration: 0
-  },
-  aspectRatio: 6,
-  maintainAspectRatio: true
-};
 
 function getPoints (all: Stats[]): ChartInfo {
   const bytesChart: ChartContents = {
@@ -124,26 +118,18 @@ function Api ({ className }: Props): React.ReactElement<Props> {
           <CardSummary label={t<string>('total sub')}>{formatNumber(tSub)}</CardSummary>
         </section>
       </SummaryBox>
-      <div className='container'>
+      <Chart
-        <h1>{t<string>('requests & subscriptions')}</h1>
+        colors={COLORS_REQUESTS}
-        <Chart.Line
+        legends={requestsLegend}
-          colors={COLORS_REQUESTS}
+        title={t<string>('requests')}
-          labels={requestsChart.labels}
+        value={requestsChart}
-          legends={requestsLegend}
+      />
-          options={OPTIONS}
+      <Chart
-          values={requestsChart.values}
+        colors={COLORS_BYTES}
-        />
+        legends={bytesLegend}
-      </div>
+        title={t<string>('transfer')}
-      <div className='container'>
+        value={bytesChart}
-        <h1>{t<string>('bytes')}</h1>
+      />
-        <Chart.Line
-          colors={COLORS_BYTES}
-          labels={bytesChart.labels}
-          legends={bytesLegend}
-          options={OPTIONS}
-          values={bytesChart.values}
-        />
-      </div>
     </div>
   );
 }

packages/page-explorer/src/Latency/Chart.tsx

@@ -0,0 +1,48 @@
+// Copyright 2017-2022 @polkadot/app-explorer authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ChartContents } from './types';
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { Chart } from '@polkadot/react-components';
+
+interface Props {
+  className?: string;
+  colors: string[];
+  legends: string[];
+  title: string;
+  value: ChartContents;
+}
+
+const OPTIONS = {
+  animation: {
+    duration: 0
+  },
+  aspectRatio: 6,
+  maintainAspectRatio: true
+};
+
+function ChartDisplay ({ className, colors, legends, title, value: { labels, values } }: Props): React.ReactElement<Props> {
+  return (
+    <div className={className}>
+      <h1>{title}</h1>
+      <Chart.Line
+        colors={colors}
+        labels={labels}
+        legends={legends}
+        options={OPTIONS}
+        values={values}
+      />
+    </div>
+  );
+}
+
+export default React.memo(styled(ChartDisplay)`
+  background: var(--bg-table);
+  border: 1px solid var(--border-table);
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+  padding: 1rem 1.5rem;
+`);

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

@@ -1,26 +1,22 @@
 // Copyright 2017-2022 @polkadot/app-explorer authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Detail } from './types';
+import type { ChartContents, Detail } from './types';
 
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
-import { CardSummary, Chart, Spinner, SummaryBox } from '@polkadot/react-components';
+import { CardSummary, Spinner, SummaryBox } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
+import Chart from './Chart';
 import useLatency from './useLatency';
 
 interface Props {
   className?: string;
 }
 
-interface ChartContents {
-  labels: string[];
-  values: number[][];
-}
-
 interface ChartInfo {
   blockLast: number;
   blocks: ChartContents;
@@ -33,13 +29,6 @@ const COLORS_TIMES = ['#8c8c00', '#acacac'];
 const COLORS_BLOCKS = ['#008c8c', '#acacac'];
 const COLORS_EVENTS = ['#00448c', '#8c0044', '#acacac'];
 const COLORS_TXS = ['#448c00', '#acacac'];
-const OPTIONS = {
-  animation: {
-    duration: 0
-  },
-  aspectRatio: 6,
-  maintainAspectRatio: true
-};
 
 function getPoints (details: Detail[], timeAvg: number): ChartInfo {
   const blocks: ChartContents = {
@@ -144,46 +133,30 @@ function Latency ({ className }: Props): React.ReactElement<Props> | null {
         </section>
         <CardSummary label={t<string>('last')}>{formatTime(blockLast, 1)}</CardSummary>
       </SummaryBox>
-      <div className='container'>
+      <Chart
-        <h1>{t<string>('blocktimes (last {{num}} blocks)', { replace: { num: times.labels.length } })}</h1>
+        colors={COLORS_TIMES}
-        <Chart.Line
+        legends={timesLegend}
-          colors={COLORS_TIMES}
+        title={t<string>('blocktimes (last {{num}} blocks)', { replace: { num: times.labels.length } })}
-          labels={times.labels}
+        value={times}
-          legends={timesLegend}
+      />
-          options={OPTIONS}
+      <Chart
-          values={times.values}
+        colors={COLORS_BLOCKS}
-        />
+        legends={blocksLegend}
-      </div>
+        title={t<string>('blocksize (last {{num}} blocks)', { replace: { num: blocks.labels.length } })}
-      <div className='container'>
+        value={blocks}
-        <h1>{t<string>('blocksize (last {{num}} blocks)', { replace: { num: blocks.labels.length } })}</h1>
+      />
-        <Chart.Line
+      <Chart
-          colors={COLORS_BLOCKS}
+        colors={COLORS_TXS}
-          labels={blocks.labels}
+        legends={extrinsicsLegend}
-          legends={blocksLegend}
+        title={t<string>('extrinsics (last {{num}} blocks)', { replace: { num: extrinsics.labels.length } })}
-          options={OPTIONS}
+        value={extrinsics}
-          values={blocks.values}
+      />
-        />
+      <Chart
-      </div>
+        colors={COLORS_EVENTS}
-      <div className='container'>
+        legends={eventsLegend}
-        <h1>{t<string>('extrinsics (last {{num}} blocks)', { replace: { num: extrinsics.labels.length } })}</h1>
+        title={t<string>('events (last {{num}} blocks)', { replace: { num: events.labels.length } })}
-        <Chart.Line
+        value={events}
-          colors={COLORS_TXS}
+      />
-          labels={extrinsics.labels}
-          legends={extrinsicsLegend}
-          options={OPTIONS}
-          values={extrinsics.values}
-        />
-      </div>
-      <div className='container'>
-        <h1>{t<string>('events (last {{num}} blocks)', { replace: { num: events.labels.length } })}</h1>
-        <Chart.Line
-          colors={COLORS_EVENTS}
-          labels={events.labels}
-          legends={eventsLegend}
-          options={OPTIONS}
-          values={events.values}
-        />
-      </div>
     </div>
   );
 }

packages/page-explorer/src/Latency/types.ts

@@ -28,3 +28,8 @@ export interface Result {
   timeMax: number;
   timeMin: number;
 }
+
+export interface ChartContents {
+  labels: string[];
+  values: number[][];
+}

packages/page-explorer/src/index.tsx

@@ -65,7 +65,7 @@ function createItemsRef (t: TFunction): TabItem[] {
       text: t<string>('Node info')
     },
     {
-      isHidden: true,
+      // isHidden: true,
       name: 'api',
       text: t<string>('API stats')
     }

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

@@ -14,7 +14,7 @@ interface State {
   info?: GiltInfo;
 }
 
-const optGiltInfo = {
+const OPT_GILT = {
   defaultValue: {} as GiltInfo,
   transform: ([activeTotal, queueTotals]: [ActiveGiltsTotal, [u32, BalanceOf][]]): GiltInfo => ({
     activeIndex: activeTotal.index.isZero()
@@ -32,7 +32,7 @@ function useInfoImpl (): State {
   const info = useCallMulti<GiltInfo>([
     api.query.gilt.activeTotal,
     api.query.gilt.queueTotals
-  ], optGiltInfo);
+  ], OPT_GILT);
 
   // useEffect((): void => {
   //   info.activeIndex &&

packages/page-membership/src/useCounter.ts

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

packages/page-nfts/src/useCollectionIds.ts

@@ -7,7 +7,7 @@ import type { EventRecord } from '@polkadot/types/interfaces';
 
 import { createNamedHook, useApi, useEventChanges, useMapKeys } from '@polkadot/react-hooks';
 
-const keyOptions = {
+const OPT_KEYS = {
   transform: (keys: StorageKey<[u32]>[]): u32[] =>
     keys
       .map(({ args: [id] }) => id)
@@ -31,7 +31,7 @@ function filter (records: EventRecord[]): Changes<u32> {
 
 function useCollectionIdsImpl (): u32[] {
   const { api } = useApi();
-  const startValue = useMapKeys(api.query.uniques.class, keyOptions);
+  const startValue = useMapKeys(api.query.uniques.class, OPT_KEYS);
 
   return useEventChanges([
     api.events.uniques.Created,

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

@@ -6,7 +6,7 @@ import type { Option } from '@polkadot/types';
 import type { AccountId, SocietyVote } from '@polkadot/types/interfaces';
 import type { VoteType } from '../types';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { AddressSmall } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
@@ -25,7 +25,11 @@ interface Props {
 
 function Candidate ({ allMembers, isMember, ownMembers, value: { accountId, kind, value } }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const votes = useCall<VoteType[]>(api.query.society.votes.multi, [allMembers.map((memberId): [AccountId, string] => [accountId, memberId])], {
+  const keys = useMemo(
+    () => [allMembers.map((memberId): [AccountId, string] => [accountId, memberId])],
+    [accountId, allMembers]
+  );
+  const votes = useCall<VoteType[]>(api.query.society.votes.multi, keys, {
     transform: (voteOpts: Option<SocietyVote>[]): VoteType[] =>
       voteOpts
         .map((voteOpt, index): [string, Option<SocietyVote>] => [allMembers[index], voteOpt])

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

@@ -21,7 +21,7 @@ interface Props {
   ownMembers: string[];
 }
 
-const transformVotes = {
+const OPT_VOTES = {
   transform: (members: DeriveSocietyMember[]): VoteType[] =>
     members
       .filter(({ vote }): boolean => !!vote)
@@ -31,7 +31,7 @@ const transformVotes = {
 function Defender ({ className = '', info, isMember, ownMembers }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const votes = useCall<VoteType[]>(api.derive.society.members, undefined, transformVotes);
+  const votes = useCall<VoteType[]>(api.derive.society.members, undefined, OPT_VOTES);
 
   const headerRef = useRef([
     [t('defender'), 'start'],

packages/page-society/src/Suspended/index.tsx

@@ -24,7 +24,7 @@ interface CandidateSuspend {
   bid: PalletSocietyBidKind;
 }
 
-const optExtractCandidates = {
+const OPT_CAN = {
   transform: (entries: [StorageKey<[AccountId]>, Option<ITuple<[BalanceOf, PalletSocietyBidKind]>>][]): CandidateSuspend[] =>
     entries
       .filter(([{ args: [accountId] }, opt]) => opt.isSome && accountId)
@@ -36,7 +36,7 @@ const optExtractCandidates = {
       .sort((a, b) => a.balance.cmp(b.balance))
 };
 
-const optExtractAccounts = {
+const OPT_ACC = {
   transform: (keys: StorageKey<[AccountId]>[]): AccountId[] =>
     keys
       .map(({ args: [accountId] }) => accountId)
@@ -46,8 +46,8 @@ const optExtractAccounts = {
 function Suspended ({ className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const candidates = useCall<CandidateSuspend[]>(api.query.society.suspendedCandidates.entries, undefined, optExtractCandidates);
+  const candidates = useCall<CandidateSuspend[]>(api.query.society.suspendedCandidates.entries, undefined, OPT_CAN);
-  const members = useCall<AccountId[]>(api.query.society.suspendedMembers.keys, undefined, optExtractAccounts);
+  const members = useCall<AccountId[]>(api.query.society.suspendedMembers.keys, undefined, OPT_ACC);
 
   const headerRef = useRef({
     candidates: [

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

@@ -24,14 +24,14 @@ interface ErrorState {
   isFatal: boolean;
 }
 
-const transformBonded = {
+const OPT_BOND = {
   transform: (value: Option<AccountId>): string | null =>
     value.isSome
       ? value.unwrap().toString()
       : null
 };
 
-const transformStash = {
+const OPT_STASH = {
   transform: (value: Option<StakingLedger>): string | null =>
     value.isSome
       ? value.unwrap().stash.toString()
@@ -41,8 +41,8 @@ const transformStash = {
 function ValidateController ({ accountId, controllerId, defaultController, onError }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const bondedId = useCall<string | null>(controllerId ? api.query.staking.bonded : null, [controllerId], transformBonded);
+  const bondedId = useCall<string | null>(controllerId ? api.query.staking.bonded : null, [controllerId], OPT_BOND);
-  const stashId = useCall<string | null>(controllerId ? api.query.staking.ledger : null, [controllerId], transformStash);
+  const stashId = useCall<string | null>(controllerId ? api.query.staking.ledger : null, [controllerId], OPT_STASH);
   const allBalances = useCall<DeriveBalancesAll>(controllerId ? api.derive.balances?.all : null, [controllerId]);
   const [{ error, isFatal }, setError] = useState<ErrorState>({ error: null, isFatal: false });
 

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

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

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

@@ -21,7 +21,7 @@ interface Props {
   recipient: string;
 }
 
-const transformBalance = {
+const OPT = {
   transform: ({ freeBalance, reservedBalance }: DeriveBalancesAll): BN =>
     freeBalance.add(reservedBalance)
 };
@@ -32,7 +32,7 @@ function TipEndorse ({ defaultId, hash, isMember, isTipped, median, members, rec
   const [isOpen, toggleOpen] = useToggle();
   const [accountId, setAccountId] = useState<string | null>(defaultId);
   const [value, setValue] = useState<BN | undefined>();
-  const totalBalance = useCall<BN>(api.derive.balances?.all, [recipient], transformBalance);
+  const totalBalance = useCall<BN>(api.derive.balances?.all, [recipient], OPT);
 
   const tipTx = (api.tx.tips || api.tx.treasury).tip;
 

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

@@ -13,7 +13,7 @@ interface Props {
   hash: Hash;
 }
 
-const transformTip = {
+const OPT = {
   transform: (optBytes: Option<Bytes>) =>
     optBytes.isSome
       ? hexToString(optBytes.unwrap().toHex())
@@ -22,7 +22,7 @@ const transformTip = {
 
 function TipReason ({ hash }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const reasonText = useCall<string | null>((api.query.tips || api.query.treasury).reasons, [hash], transformTip);
+  const reasonText = useCall<string | null>((api.query.tips || api.query.treasury).reasons, [hash], OPT);
 
   return (
     <td className='start all'>{reasonText || hash.toHex()}</td>

packages/page-treasury/src/useTipHashes.ts

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

packages/react-api/package.json

@@ -14,10 +14,10 @@
   "version": "0.115.3-45",
   "dependencies": {
     "@babel/runtime": "^7.18.0",
-    "@polkadot/api": "^8.6.3-8",
+    "@polkadot/api": "^8.6.3-9",
     "@polkadot/extension-compat-metamask": "^0.43.3-4",
     "@polkadot/extension-dapp": "^0.43.3-4",
-    "@polkadot/rpc-provider": "^8.6.3-8",
+    "@polkadot/rpc-provider": "^8.6.3-9",
     "fflate": "^0.7.3",
     "rxjs": "^7.5.5"
   }

packages/react-hooks/src/types.ts

@@ -1,6 +1,7 @@
 // Copyright 2017-2022 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { ApiPromise } from '@polkadot/api';
 import type { SubmittableExtrinsic } from '@polkadot/api/types';
 import type { DeriveAccountFlags, DeriveAccountRegistration } from '@polkadot/api-derive/types';
 import type { DisplayedJudgement } from '@polkadot/react-components/types';
@@ -15,7 +16,7 @@ export type CallParams = [] | CallParam[];
 export interface CallOptions <T> {
   defaultValue?: T;
   paramMap?: (params: any) => CallParams;
-  transform?: (value: any) => T;
+  transform?: (value: any, api: ApiPromise) => T;
   withParams?: boolean;
   withParamsTransform?: boolean;
 }

packages/react-hooks/src/useBestHash.ts

@@ -7,14 +7,14 @@ import { createNamedHook } from './createNamedHook';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
 
-const optCall = {
+const OPT = {
   transform: (header: Header) => header.hash.toHex()
 };
 
 function useBestHashImpl (): string | undefined {
   const { api } = useApi();
 
-  return useCall<string>(api.rpc.chain.subscribeNewHeads, undefined, optCall);
+  return useCall<string>(api.rpc.chain.subscribeNewHeads, undefined, OPT);
 }
 
 export const useBestHash = createNamedHook('useBestHash', useBestHashImpl);

packages/react-hooks/src/useCall.ts

@@ -1,6 +1,7 @@
 // Copyright 2017-2022 @polkadot/react-hooks authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { ApiPromise } from '@polkadot/api';
 import type { PromiseResult, QueryableStorageEntry } from '@polkadot/api/types';
 import type { StorageEntryTypeLatest } from '@polkadot/types/interfaces';
 import type { AnyFunction, Codec } from '@polkadot/types/types';
@@ -11,6 +12,7 @@ import { useEffect, useRef, useState } from 'react';
 
 import { isFunction, isNull, isUndefined, nextTick } from '@polkadot/util';
 
+import { useApi } from './useApi';
 import { useIsMountedRef } from './useIsMountedRef';
 
 type VoidFn = () => void;
@@ -103,7 +105,7 @@ export function unsubscribe (tracker: TrackerRef): void {
 }
 
 // subscribe, trying to play nice with the browser threads
-function subscribe <T> (mountedRef: MountedRef, tracker: TrackerRef, fn: TrackFn | undefined, params: CallParams, setValue: (value: any) => void, { transform = transformIdentity, withParams, withParamsTransform }: CallOptions<T> = {}): void {
+function subscribe <T> (api: ApiPromise, mountedRef: MountedRef, tracker: TrackerRef, fn: TrackFn | undefined, params: CallParams, setValue: (value: any) => void, { transform = transformIdentity, withParams, withParamsTransform }: CallOptions<T> = {}): void {
   const validParams = params.filter((p) => !isUndefined(p));
 
   unsubscribe(tracker);
@@ -125,10 +127,10 @@ function subscribe <T> (mountedRef: MountedRef, tracker: TrackerRef, fn: TrackFn
             try {
               setValue(
                 withParams
-                  ? [params, transform(value)]
+                  ? [params, transform(value, api)]
                   : withParamsTransform
-                    ? transform([params, value])
+                    ? transform([params, value], api)
-                    : transform(value)
+                    : transform(value, api)
               );
             } catch (error) {
               handleError(error as Error, tracker, fn);
@@ -158,6 +160,7 @@ export function throwOnError (tracker: Tracker): void {
 // 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 { api } = useApi();
   const mountedRef = useIsMountedRef();
   const tracker = useRef<Tracker>({ error: null, fn: null, isActive: false, serialized: null, subscriber: null, type: 'useCall' });
   const [value, setValue] = useState<T | undefined>((options || {}).defaultValue);
@@ -177,10 +180,10 @@ export function useCall <T> (fn: TrackFn | undefined | null | false, params?: Ca
         tracker.current.fn = fn;
         tracker.current.serialized = serialized;
 
-        subscribe(mountedRef, tracker, fn, mappedParams, setValue, options);
+        subscribe(api, mountedRef, tracker, fn, mappedParams, setValue, options);
       }
     }
-  }, [fn, options, mountedRef, params]);
+  }, [api, fn, options, mountedRef, params]);
 
   // throwOnError(tracker.current);
 

packages/react-hooks/src/useCallMulti.ts

@@ -20,7 +20,7 @@ interface TrackerRef {
 
 interface CallOptions <T> {
   defaultValue?: T;
-  transform?: (value: any) => T;
+  transform?: (value: any, api: ApiPromise) => T;
 }
 
 // subscribe, trying to play nice with the browser threads
@@ -47,7 +47,8 @@ function subscribe <T> (api: ApiPromise, mountedRef: MountedRef, tracker: Tracke
                     included[index]
                       ? value[++valueIndex]
                       : undefined
-                  )
+                  ),
+                  api
                 )
               );
             } catch (error) {

packages/react-hooks/src/useCollectiveMembers.ts

@@ -16,7 +16,7 @@ interface Result {
   members: string[];
 }
 
-const transformMembers = {
+const OPT = {
   transform: (accounts: AccountId[]) =>
     accounts.map((accountId) => accountId.toString())
 };
@@ -24,7 +24,7 @@ const transformMembers = {
 function useCollectiveMembersImpl (collective: CollectiveType): Result {
   const { api } = useApi();
   const { allAccounts, hasAccounts } = useAccounts();
-  const retrieved = useCall<string[]>(hasAccounts && api.derive[collective]?.members, undefined, transformMembers);
+  const retrieved = useCall<string[]>(hasAccounts && api.derive[collective]?.members, undefined, OPT);
 
   return useMemo(
     () => ({

packages/react-hooks/src/useIpfsFetch.ts

@@ -11,6 +11,10 @@ import { useEffect, useMemo, useState } from 'react';
 
 import { useIsMountedRef } from './useIsMountedRef';
 
+interface Options <T> extends CallOptions<T> {
+  transform?: (value: any) => T
+}
+
 function isCid (cid: string): boolean {
   return !!cid && (isIPFS.cid(cid) || isIPFS.base32cid(cid.toLowerCase()));
 }
@@ -41,20 +45,20 @@ async function fetchIpfsData <T> (ipfsHashes: string[]): Promise<Map<string, T>>
   return result;
 }
 
-function postProcessData <T> (ipfsData: Map<string, T>, options?: CallOptions<T>) {
+function postProcessData <T> (ipfsData: Map<string, T>, { transform }: Options<T> = {}) {
-  if (!options?.transform) {
+  if (!transform) {
     return ipfsData;
   }
 
   for (const [key, value] of ipfsData.entries()) {
-    ipfsData.set(key, options?.transform(value));
+    ipfsData.set(key, transform(value));
   }
 
   return ipfsData;
 }
 
 // FIXME This is generic, we cannot really use createNamedHook
-export function useIpfsFetch <T> (hashes: string[] | undefined, options?: CallOptions<T>): Map<string, T> | undefined {
+export function useIpfsFetch <T> (hashes: string[] | undefined, options?: Options<T>): Map<string, T> | undefined {
   const mountedRef = useIsMountedRef();
   const [value, setValue] = useState<Map<string, T> | undefined>();
 

packages/react-hooks/src/useProxies.ts

@@ -1,31 +1,34 @@
 // Copyright 2017-2022 @polkadot/react-hooks authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { AccountId } from '@polkadot/types/interfaces';
+import type { ApiPromise } from '@polkadot/api';
-import { NodeRuntimeProxyType, PalletProxyProxyDefinition } from '@polkadot/types/lookup';
+import type { AccountId } from '@polkadot/types/interfaces';
-import { BN } from '@polkadot/util';
+import type { NodeRuntimeProxyType, PalletProxyProxyDefinition } from '@polkadot/types/lookup';
+import type { BN } from '@polkadot/util';
 
 import { createNamedHook } from './createNamedHook';
 import { useAccounts } from './useAccounts';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
 
+const OPTS = {
+  transform: (result: [([AccountId, NodeRuntimeProxyType] | PalletProxyProxyDefinition)[], BN][], api: ApiPromise): [PalletProxyProxyDefinition[], BN][] =>
+    api.tx.proxy.addProxy.meta.args.length === 3
+      ? result as [PalletProxyProxyDefinition[], BN][]
+      : (result as [[AccountId, NodeRuntimeProxyType][], BN][]).map(([arr, bn]): [PalletProxyProxyDefinition[], BN] =>
+        [arr.map(([delegate, proxyType]): PalletProxyProxyDefinition =>
+          api.createType('ProxyDefinition', {
+            delegate,
+            proxyType
+          })), bn]
+      )
+};
+
 function useProxiesImpl (): [PalletProxyProxyDefinition[], BN][] | undefined {
   const { api } = useApi();
   const { allAccounts } = useAccounts();
 
-  return useCall<[PalletProxyProxyDefinition[], BN][]>(api.query.proxy?.proxies.multi, [allAccounts], {
+  return useCall<[PalletProxyProxyDefinition[], BN][]>(api.query.proxy?.proxies.multi, [allAccounts], OPTS);
-    transform: (result: [([AccountId, NodeRuntimeProxyType] | PalletProxyProxyDefinition)[], BN][]): [PalletProxyProxyDefinition[], BN][] =>
-      api.tx.proxy.addProxy.meta.args.length === 3
-        ? result as [PalletProxyProxyDefinition[], BN][]
-        : (result as [[AccountId, NodeRuntimeProxyType][], BN][]).map(([arr, bn]): [PalletProxyProxyDefinition[], BN] =>
-          [arr.map(([delegate, proxyType]): PalletProxyProxyDefinition =>
-            api.createType('ProxyDefinition', {
-              delegate,
-              proxyType
-            })), bn]
-        )
-  });
 }
 
 export const useProxies = createNamedHook('useProxies', useProxiesImpl);

packages/react-hooks/src/useSudo.ts

@@ -11,14 +11,14 @@ import { useAccounts } from './useAccounts';
 import { useApi } from './useApi';
 import { useCall } from './useCall';
 
-const transformSudo = {
+const OPT = {
   transform: (key: AccountId) => key.toString()
 };
 
 function useSudoImpl (): UseSudo {
   const { api } = useApi();
   const { allAccounts, hasAccounts } = useAccounts();
-  const sudoKey = useCall<string>(hasAccounts && api.query.sudo?.key, undefined, transformSudo);
+  const sudoKey = useCall<string>(hasAccounts && api.query.sudo?.key, undefined, OPT);
   const [hasSudoKey, setHasSudoKey] = useState(false);
 
   useEffect((): void => {

packages/react-query/src/Bonded.tsx

@@ -17,18 +17,18 @@ interface Props {
   label?: React.ReactNode;
 }
 
-const transformController = {
+const OPT_C = {
   transform: (value: Option<AccountId>) => value.unwrapOr(null)
 };
 
-const transformLedger = {
+const OPT_L = {
   transform: (value: Option<StakingLedger>) => value.unwrapOr(null)
 };
 
 function BondedDisplay ({ children, className = '', label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const controllerId = useCall<AccountId | null>(api.query.staking?.bonded, [params], transformController);
+  const controllerId = useCall<AccountId | null>(api.query.staking?.bonded, [params], OPT_C);
-  const stakingLedger = useCall<StakingLedger | null>(controllerId && api.query.staking?.ledger, [controllerId], transformLedger);
+  const stakingLedger = useCall<StakingLedger | null>(controllerId && api.query.staking?.ledger, [controllerId], OPT_L);
 
   return (
     <FormatBalance

packages/test-support/package.json

@@ -17,7 +17,7 @@
     "testcontainers": "^8.10.1"
   },
   "devDependencies": {
-    "@polkadot/types-support": "^8.6.3-8",
+    "@polkadot/types-support": "^8.6.3-9",
     "@testing-library/jest-dom": "^5.16.4",
     "tsconfig-paths": "^3.14.1"
   }

yarn.lock

@@ -2631,90 +2631,90 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-augment@npm:^8.6.3-8":
+"@polkadot/api-augment@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/api-augment@npm:8.6.3-8"
+  resolution: "@polkadot/api-augment@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@polkadot/api-base": 8.6.3-8
+    "@polkadot/api-base": 8.6.3-9
-    "@polkadot/rpc-augment": 8.6.3-8
+    "@polkadot/rpc-augment": 8.6.3-9
-    "@polkadot/types": 8.6.3-8
+    "@polkadot/types": 8.6.3-9
-    "@polkadot/types-augment": 8.6.3-8
+    "@polkadot/types-augment": 8.6.3-9
-    "@polkadot/types-codec": 8.6.3-8
+    "@polkadot/types-codec": 8.6.3-9
     "@polkadot/util": ^9.3.2-1
-  checksum: 4fbca37b6ba110b956d33f4cdc27813235ad837a6a33547d8d4d8659fab15ada540d0d42d7afbcfc108842767a994c017c1315236870cffc43bd4ef3bc1461ca
+  checksum: eef538f07c410002c353f1aeb9732273cbed056e2144f1c6bf691a09239df8eb039fd981817819a1f537e2e3ad2552e7aa4e03931385c496da498a8597a0dff2
   languageName: node
   linkType: hard
 
-"@polkadot/api-base@npm:^8.6.3-8":
+"@polkadot/api-base@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/api-base@npm:8.6.3-8"
+  resolution: "@polkadot/api-base@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@polkadot/rpc-core": 8.6.3-8
+    "@polkadot/rpc-core": 8.6.3-9
-    "@polkadot/types": 8.6.3-8
+    "@polkadot/types": 8.6.3-9
     "@polkadot/util": ^9.3.2-1
     rxjs: ^7.5.5
-  checksum: 9b07b74d75c174c00a040e3e81d20f0be8f1898998e52bd372ec8491a9943e2a64a54af50a66317205ab7485423514e9f7206b958677d929a32d7b193f97e960
+  checksum: 9223e832bdc2aee32ba9d0cf255e414e5578b1a8000a82f3ca3d6c5ca41f490e0dc20cec94cd48883b39c4ddd8ca56cb8fc37b8a4e8fc17879b93c893bee1f39
   languageName: node
   linkType: hard
 
-"@polkadot/api-contract@npm:^8.6.3-8":
+"@polkadot/api-contract@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/api-contract@npm:8.6.3-8"
+  resolution: "@polkadot/api-contract@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@polkadot/api": 8.6.3-8
+    "@polkadot/api": 8.6.3-9
-    "@polkadot/types": 8.6.3-8
+    "@polkadot/types": 8.6.3-9
-    "@polkadot/types-codec": 8.6.3-8
+    "@polkadot/types-codec": 8.6.3-9
-    "@polkadot/types-create": 8.6.3-8
+    "@polkadot/types-create": 8.6.3-9
     "@polkadot/util": ^9.3.2-1
     "@polkadot/util-crypto": ^9.3.2-1
     rxjs: ^7.5.5
-  checksum: 06366400e57b95a6f8b966d88abb937f91b3bdc96f57405d27bc71265911e55109de825a11fa7a83d1d9f74248d32be54ccc92ccbf83c17d32635d3cf1e87320
+  checksum: 4b560bd838ccff8e1dccca988bd101a7d04f791e3ba389ccf0a0dddf835644227ae45f1cb574cc7f046fd1ee645313445d2fbb3b888856794b4f2ce3dfa6b66f
   languageName: node
   linkType: hard
 
-"@polkadot/api-derive@npm:^8.6.3-8":
+"@polkadot/api-derive@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/api-derive@npm:8.6.3-8"
+  resolution: "@polkadot/api-derive@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@polkadot/api": 8.6.3-8
+    "@polkadot/api": 8.6.3-9
-    "@polkadot/api-augment": 8.6.3-8
+    "@polkadot/api-augment": 8.6.3-9
-    "@polkadot/api-base": 8.6.3-8
+    "@polkadot/api-base": 8.6.3-9
-    "@polkadot/rpc-core": 8.6.3-8
+    "@polkadot/rpc-core": 8.6.3-9
-    "@polkadot/types": 8.6.3-8
+    "@polkadot/types": 8.6.3-9
-    "@polkadot/types-codec": 8.6.3-8
+    "@polkadot/types-codec": 8.6.3-9
     "@polkadot/util": ^9.3.2-1
     "@polkadot/util-crypto": ^9.3.2-1
     rxjs: ^7.5.5
-  checksum: ae52235c6a1c664958387cccbc783755a43829df30d5babef847c18faf7a8fee932db66c5194768d6f44839dc369163d8ff657e205c26a8ec938ccb317b3175c
+  checksum: c654004ce37d9acad340281ae768c75c3d3a8845246962af9aaf3c51d552878a8f3811fa5241a5ec99b6d7de085d2a83e294aad8f81dcbc0e0740efe448aa564
   languageName: node
   linkType: hard
 
-"@polkadot/api@npm:^8.6.3-8":
+"@polkadot/api@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/api@npm:8.6.3-8"
+  resolution: "@polkadot/api@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@polkadot/api-augment": 8.6.3-8
+    "@polkadot/api-augment": 8.6.3-9
-    "@polkadot/api-base": 8.6.3-8
+    "@polkadot/api-base": 8.6.3-9
-    "@polkadot/api-derive": 8.6.3-8
+    "@polkadot/api-derive": 8.6.3-9
     "@polkadot/keyring": ^9.3.2-1
-    "@polkadot/rpc-augment": 8.6.3-8
+    "@polkadot/rpc-augment": 8.6.3-9
-    "@polkadot/rpc-core": 8.6.3-8
+    "@polkadot/rpc-core": 8.6.3-9
-    "@polkadot/rpc-provider": 8.6.3-8
+    "@polkadot/rpc-provider": 8.6.3-9
-    "@polkadot/types": 8.6.3-8
+    "@polkadot/types": 8.6.3-9
-    "@polkadot/types-augment": 8.6.3-8
+    "@polkadot/types-augment": 8.6.3-9
-    "@polkadot/types-codec": 8.6.3-8
+    "@polkadot/types-codec": 8.6.3-9
-    "@polkadot/types-create": 8.6.3-8
+    "@polkadot/types-create": 8.6.3-9
-    "@polkadot/types-known": 8.6.3-8
+    "@polkadot/types-known": 8.6.3-9
     "@polkadot/util": ^9.3.2-1
     "@polkadot/util-crypto": ^9.3.2-1
     eventemitter3: ^4.0.7
     rxjs: ^7.5.5
-  checksum: 52d7c3fbd2298ef20b3cba3f356289eab12ce5c3605b74258123db1cf452b1ebc6dee166936c9bdf9eb9330e579425e94a9e21ef144be420dd9e2ccc0e508c4e
+  checksum: 80d487c95d0f1887abd4170791208ef5677a7a091b8b47bf8b817636dc8f878df9dc38494e2b08f9c34929e8c16c214bba4412e3cedc09db93306c25012a84da
   languageName: node
   linkType: hard
 
@@ -2798,7 +2798,7 @@ __metadata:
   resolution: "@polkadot/app-contracts@workspace:packages/page-contracts"
   dependencies:
     "@babel/runtime": ^7.18.0
-    "@polkadot/api-contract": ^8.6.3-8
+    "@polkadot/api-contract": ^8.6.3-9
   languageName: unknown
   linkType: soft
 
@@ -3025,10 +3025,10 @@ __metadata:
     "@metaverse-network-sdk/type-definitions": ^0.0.1-13
     "@parallel-finance/type-definitions": 1.7.1
     "@phala/typedefs": 0.2.30
-    "@polkadot/api": ^8.6.3-8
+    "@polkadot/api": ^8.6.3-9
-    "@polkadot/api-derive": ^8.6.3-8
+    "@polkadot/api-derive": ^8.6.3-9
     "@polkadot/networks": ^9.3.2-1
-    "@polkadot/types": ^8.6.3-8
+    "@polkadot/types": ^8.6.3-9
     "@polkadot/util": ^9.3.2-1
     "@polkadot/x-fetch": ^9.3.2-1
     "@polymathnetwork/polymesh-types": 0.0.2
@@ -3333,10 +3333,10 @@ __metadata:
   resolution: "@polkadot/react-api@workspace:packages/react-api"
   dependencies:
     "@babel/runtime": ^7.18.0
-    "@polkadot/api": ^8.6.3-8
+    "@polkadot/api": ^8.6.3-9
     "@polkadot/extension-compat-metamask": ^0.43.3-4
     "@polkadot/extension-dapp": ^0.43.3-4
-    "@polkadot/rpc-provider": ^8.6.3-8
+    "@polkadot/rpc-provider": ^8.6.3-9
     fflate: ^0.7.3
     rxjs: ^7.5.5
   languageName: unknown
@@ -3471,41 +3471,41 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/rpc-augment@npm:^8.6.3-8":
+"@polkadot/rpc-augment@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/rpc-augment@npm:8.6.3-8"
+  resolution: "@polkadot/rpc-augment@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@polkadot/rpc-core": 8.6.3-8
+    "@polkadot/rpc-core": 8.6.3-9
-    "@polkadot/types": 8.6.3-8
+    "@polkadot/types": 8.6.3-9
-    "@polkadot/types-codec": 8.6.3-8
+    "@polkadot/types-codec": 8.6.3-9
     "@polkadot/util": ^9.3.2-1
-  checksum: f3ea34e98ecbad95f8171252b0687646b879464c53f0f65c910cc34eded3c448973e900ec08cd859db58129386ecd9f86ea04e90f463e710f29fc4b1684d35f0
+  checksum: 12267e1a383d1fa778eb5d45c9ad2b436d49d4afa9244f7d81e656c031b863bdebda50fec053ecdeb7b87b01fa671b4d0dcc21b9c961411969ec52c83c92d9a6
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-core@npm:^8.6.3-8":
+"@polkadot/rpc-core@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/rpc-core@npm:8.6.3-8"
+  resolution: "@polkadot/rpc-core@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@polkadot/rpc-augment": 8.6.3-8
+    "@polkadot/rpc-augment": 8.6.3-9
-    "@polkadot/rpc-provider": 8.6.3-8
+    "@polkadot/rpc-provider": 8.6.3-9
-    "@polkadot/types": 8.6.3-8
+    "@polkadot/types": 8.6.3-9
     "@polkadot/util": ^9.3.2-1
     rxjs: ^7.5.5
-  checksum: fc754d2508454849e085e0940c3d74accbe7bc25f877ec71c62f88b9c9d0c92304c58fe2fb2005de05871acb9f32d5b191311f0e45764a8447c326e6a2bb90d3
+  checksum: 8ec1d63b01cef90e9c5d86238590f64ee8aab315607650bceadc9397031d65fe5162425c844eac4603f9ba15b9381673623055726125109332410aa8dde001c3
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-provider@npm:^8.6.3-8":
+"@polkadot/rpc-provider@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/rpc-provider@npm:8.6.3-8"
+  resolution: "@polkadot/rpc-provider@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
     "@polkadot/keyring": ^9.3.2-1
-    "@polkadot/types": 8.6.3-8
+    "@polkadot/types": 8.6.3-9
-    "@polkadot/types-support": 8.6.3-8
+    "@polkadot/types-support": 8.6.3-9
     "@polkadot/util": ^9.3.2-1
     "@polkadot/util-crypto": ^9.3.2-1
     "@polkadot/x-fetch": ^9.3.2-1
@@ -3515,7 +3515,7 @@ __metadata:
     eventemitter3: ^4.0.7
     mock-socket: ^9.1.4
     nock: ^13.2.4
-  checksum: 3f09c16daf3c7108f653fb35991093515e8915df05c7c3ae095f97d8440531db81129d77680dc8d1df05e8dc30c1e7c89b575e9e49de3f3aa43df09cfcc97343
+  checksum: 79c6158be3d3438164cbbcf97abff1444b5d8036e9cdf9b900c43f74fa13b2e05d7963358ef7049ca44e9e03850d346bbdff08793b6115549df1a5eade492c9c
   languageName: node
   linkType: hard
 
@@ -3523,7 +3523,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@polkadot/test-support@workspace:packages/test-support"
   dependencies:
-    "@polkadot/types-support": ^8.6.3-8
+    "@polkadot/types-support": ^8.6.3-9
     "@testing-library/jest-dom": ^5.16.4
     "@testing-library/react": ^13.2.0
     testcontainers: ^8.10.1
@@ -3531,76 +3531,76 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/types-augment@npm:^8.6.3-8":
+"@polkadot/types-augment@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/types-augment@npm:8.6.3-8"
+  resolution: "@polkadot/types-augment@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@polkadot/types": 8.6.3-8
+    "@polkadot/types": 8.6.3-9
-    "@polkadot/types-codec": 8.6.3-8
+    "@polkadot/types-codec": 8.6.3-9
     "@polkadot/util": ^9.3.2-1
-  checksum: bc584d3441a04fe1ed3d1d1b23cf6ff2fb6d3dadb1880d0741c2bb9bfd3826f0c40593c655203b86539d2a14116549d0591c6d7899d717ad324551b527b3e702
+  checksum: adc0fa989d55d667a5e60db638aeed83d004b11de04c2cacf500332bec64f132cfd98055f80b34b478a1eeaa429c00e6dc73d665125782b28c844d02a330cf73
   languageName: node
   linkType: hard
 
-"@polkadot/types-codec@npm:^8.6.3-8":
+"@polkadot/types-codec@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/types-codec@npm:8.6.3-8"
+  resolution: "@polkadot/types-codec@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
     "@polkadot/util": ^9.3.2-1
-  checksum: f336b231e9d01527d831500ae4b1cf17e4eb8637d35dd21964376b2f48ebc666be3b0b491ea67b6e5c7b5a5391baab1a846012839843b355eb291bae80fcfdeb
+  checksum: e5e00b9e2d0371ced57345cfbea31275eb4e1adbb8c3aa8af8658f186d34be1f626a4771a3410868bab2a1bafde3b3d53d54a1da90a4ff47fbeab3cabd6fbc9e
   languageName: node
   linkType: hard
 
-"@polkadot/types-create@npm:^8.6.3-8":
+"@polkadot/types-create@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/types-create@npm:8.6.3-8"
+  resolution: "@polkadot/types-create@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@polkadot/types-codec": 8.6.3-8
+    "@polkadot/types-codec": 8.6.3-9
     "@polkadot/util": ^9.3.2-1
-  checksum: b4363e5ae80317b8667625b4bf65c169a6c54427acd481c6ebc9e7bba706634592b109b0164093bbdd5a76422f156df1563cfeb5a301fedafcbe590fdbb5ca27
+  checksum: a116b681e5e001fc23262120058a370bac4a5773f17018c864d691280bf85819c64a0c889a966a75f04128ec4d39e990756af5e3699a7390b46284e1b8b7404a
   languageName: node
   linkType: hard
 
-"@polkadot/types-known@npm:^8.6.3-8":
+"@polkadot/types-known@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/types-known@npm:8.6.3-8"
+  resolution: "@polkadot/types-known@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
     "@polkadot/networks": ^9.3.2-1
-    "@polkadot/types": 8.6.3-8
+    "@polkadot/types": 8.6.3-9
-    "@polkadot/types-codec": 8.6.3-8
+    "@polkadot/types-codec": 8.6.3-9
-    "@polkadot/types-create": 8.6.3-8
+    "@polkadot/types-create": 8.6.3-9
     "@polkadot/util": ^9.3.2-1
-  checksum: 3db1888c3f8a2fa51664404273a123e7a1a5d10afa0ff7128040fc7dd1d00612edd05a7d2bc26f25847d586e32322a1560140383e24d3072eff20d6be124caaa
+  checksum: 5d207e580ca38c4b5e8d6be9cbe4ccb9d3c4ce387a54f08a0ebc0f9f4fc70631e38bcacffe40e6b090c976bff6a01798f1ca3f9018010ddfd0fac86a5168dc5b
   languageName: node
   linkType: hard
 
-"@polkadot/types-support@npm:^8.6.3-8":
+"@polkadot/types-support@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/types-support@npm:8.6.3-8"
+  resolution: "@polkadot/types-support@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
     "@polkadot/util": ^9.3.2-1
-  checksum: d4b61da7d7117adc765126698b57cb4a9cceded9cefdff99745eac7acc6bab03638c5adb44d17539ec799054b8f209a2827787757d7571f09dec84dfd54e4153
+  checksum: b05d50c87c3b2e0443e2abd87c0d19c9fe086247aa8d064828aea7059b66acf3556f6a16d28f3835385a787b021d9d38546f724a673dd36d6212e4cfbcc2f62d
   languageName: node
   linkType: hard
 
-"@polkadot/types@npm:^8.6.3-8":
+"@polkadot/types@npm:^8.6.3-9":
-  version: 8.6.3-8
+  version: 8.6.3-9
-  resolution: "@polkadot/types@npm:8.6.3-8"
+  resolution: "@polkadot/types@npm:8.6.3-9"
   dependencies:
     "@babel/runtime": ^7.18.3
     "@polkadot/keyring": ^9.3.2-1
-    "@polkadot/types-augment": 8.6.3-8
+    "@polkadot/types-augment": 8.6.3-9
-    "@polkadot/types-codec": 8.6.3-8
+    "@polkadot/types-codec": 8.6.3-9
-    "@polkadot/types-create": 8.6.3-8
+    "@polkadot/types-create": 8.6.3-9
     "@polkadot/util": ^9.3.2-1
     "@polkadot/util-crypto": ^9.3.2-1
     rxjs: ^7.5.5
-  checksum: 72d0ed67e47b1bb0559a417ded56ff37f8615e51f47d15f73976f7f05ca289a5bf0301691dfe361d534128e100dcc4e60715d95ef369af7e9a812a6cebf8c094
+  checksum: b5892e62a4502d7bdae0788c41c6e567c36ac9def579b96c5883296d9ba4a71a28d2be691d0d38aa061ccacdd6f191f8973d85d05f4c19a9bbc524b151cfacdc
   languageName: node
   linkType: hard