From f0ca1710b8ee38a2858669ed5ea7a2e55059947d Mon Sep 17 00:00:00 2001 From: Jaco Date: Thu, 2 Jun 2022 07:52:24 +0200 Subject: [PATCH] Voterlist (#7617) * Voterlist * Route --- packages/page-staking/src/Bags/Rebag.tsx | 2 +- packages/page-staking/src/Bags/Stash.tsx | 2 +- packages/page-staking/src/Bags/Summary.tsx | 7 ++++--- .../page-staking/src/Bags/useBagEntries.tsx | 8 +++++--- packages/page-staking/src/Bags/useBagsList.ts | 10 ++++++---- .../page-staking/src/Bags/useBagsNodes.tsx | 8 +++++--- .../page-staking/src/Bags/useQueryModule.ts | 19 +++++++++++++++++++ packages/page-staking/src/index.tsx | 2 +- 8 files changed, 42 insertions(+), 16 deletions(-) create mode 100644 packages/page-staking/src/Bags/useQueryModule.ts diff --git a/packages/page-staking/src/Bags/Rebag.tsx b/packages/page-staking/src/Bags/Rebag.tsx index deb243f761..f35ed42e13 100644 --- a/packages/page-staking/src/Bags/Rebag.tsx +++ b/packages/page-staking/src/Bags/Rebag.tsx @@ -38,7 +38,7 @@ function Rebag ({ bagUpper, stashIds }: Props): React.ReactElement | null ); const [selectedIds, setSelectedIds] = useState([]); const changes = useMemo( - () => selectedIds.map((stashId) => api.tx.bagsList.rebag(stashId)), + () => selectedIds.map((s) => (api.tx.bagsList || api.tx.voterList).rebag(s)), [api, selectedIds] ); const tx = useTxBatch(changes); diff --git a/packages/page-staking/src/Bags/Stash.tsx b/packages/page-staking/src/Bags/Stash.tsx index fe0c1b423f..4ad06bd9be 100644 --- a/packages/page-staking/src/Bags/Stash.tsx +++ b/packages/page-staking/src/Bags/Stash.tsx @@ -63,7 +63,7 @@ function Stash ({ bagLower, bagUpper, className, isLoading, list, stashId }: Pro isDisabled={isLoading} label={t('Move up {{jumpCount}}', { replace: { jumpCount } })} params={[stashInfo.jump]} - tx={api.tx.bagsList.putInFrontOf} + tx={(api.tx.bagsList || api.tx.voterList).putInFrontOf} /> ) : null diff --git a/packages/page-staking/src/Bags/Summary.tsx b/packages/page-staking/src/Bags/Summary.tsx index 089b852687..b06131d1db 100644 --- a/packages/page-staking/src/Bags/Summary.tsx +++ b/packages/page-staking/src/Bags/Summary.tsx @@ -7,10 +7,11 @@ import type { BagMap } from './types'; import React, { useMemo } from 'react'; import { CardSummary, Spinner, SummaryBox } from '@polkadot/react-components'; -import { useApi, useCall } from '@polkadot/react-hooks'; +import { useCall } from '@polkadot/react-hooks'; import { formatNumber, isNumber } from '@polkadot/util'; import { useTranslation } from '../translate'; +import useQueryModule from './useQueryModule'; interface Props { bags?: unknown[]; @@ -20,8 +21,8 @@ interface Props { function Summary ({ bags, className = '', mapOwn }: Props): React.ReactElement { const { t } = useTranslation(); - const { api } = useApi(); - const total = useCall(api.query.bagsList.counterForListNodes); + const mod = useQueryModule(); + const total = useCall(mod.counterForListNodes); const myCount = useMemo( () => mapOwn && Object.values(mapOwn).reduce((count, n) => count + n.length, 0), diff --git a/packages/page-staking/src/Bags/useBagEntries.tsx b/packages/page-staking/src/Bags/useBagEntries.tsx index 74edc267ba..9c36eae0cc 100644 --- a/packages/page-staking/src/Bags/useBagEntries.tsx +++ b/packages/page-staking/src/Bags/useBagEntries.tsx @@ -7,7 +7,9 @@ import type { PalletBagsListListNode } from '@polkadot/types/lookup'; import { useEffect, useState } from 'react'; -import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks'; +import { createNamedHook, useCall } from '@polkadot/react-hooks'; + +import useQueryModule from './useQueryModule'; interface Result { isCompleted: boolean; @@ -18,9 +20,9 @@ const EMPTY: [AccountId32 | null, Result] = [null, { isCompleted: false, list: [ const EMPTY_LIST: AccountId32[] = []; function useBagEntriesImpl (headId: AccountId32 | null, trigger: number): [boolean, AccountId32[]] { - const { api } = useApi(); + const mod = useQueryModule(); const [[currId, { isCompleted, list }], setCurrent] = useState<[AccountId32 | null, Result]>(EMPTY); - const node = useCall>(!!currId && api.query.bagsList.listNodes, [currId]); + const node = useCall>(!!currId && mod.listNodes, [currId]); useEffect( () => setCurrent( diff --git a/packages/page-staking/src/Bags/useBagsList.ts b/packages/page-staking/src/Bags/useBagsList.ts index 5d9e238563..08aa9af76d 100644 --- a/packages/page-staking/src/Bags/useBagsList.ts +++ b/packages/page-staking/src/Bags/useBagsList.ts @@ -8,9 +8,11 @@ import type { BagInfo } from './types'; import { useEffect, useState } from 'react'; -import { createNamedHook, useApi, useCall, useMapKeys } from '@polkadot/react-hooks'; +import { createNamedHook, useCall, useMapKeys } from '@polkadot/react-hooks'; import { BN_ZERO } from '@polkadot/util'; +import useQueryModule from './useQueryModule'; + const KEY_OPTS = { transform: (keys: StorageKey<[u64]>[]): BN[] => keys.map(({ args: [id] }) => id) @@ -51,10 +53,10 @@ function merge (prev: BagInfo[] | undefined, curr: BagInfo[]): BagInfo[] { } function useBagsListImpl (): BagInfo[] | undefined { - const { api } = useApi(); + const mod = useQueryModule(); const [result, setResult] = useState(); - const ids = useMapKeys(api.query.bagsList.listBags, KEY_OPTS); - const query = useCall(ids && ids.length !== 0 && api.query.bagsList.listBags.multi, [ids], MULTI_OPTS); + const ids = useMapKeys(mod.listBags, KEY_OPTS); + const query = useCall(ids && ids.length !== 0 && mod.listBags.multi, [ids], MULTI_OPTS); useEffect((): void => { query && setResult((prev) => merge(prev, query)); diff --git a/packages/page-staking/src/Bags/useBagsNodes.tsx b/packages/page-staking/src/Bags/useBagsNodes.tsx index 88c5b54aac..978326f6d2 100644 --- a/packages/page-staking/src/Bags/useBagsNodes.tsx +++ b/packages/page-staking/src/Bags/useBagsNodes.tsx @@ -7,7 +7,9 @@ import type { BagMap } from './types'; import { useEffect, useState } from 'react'; -import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks'; +import { createNamedHook, useCall } from '@polkadot/react-hooks'; + +import useQueryModule from './useQueryModule'; const MULTI_OPTS = { transform: (opts: Option[]): BagMap => @@ -40,9 +42,9 @@ function merge (prev: BagMap | undefined, curr: BagMap): BagMap { } function useBagsNodesImpl (stashIds: string[]): BagMap | undefined { - const { api } = useApi(); + const mod = useQueryModule(); const [result, setResult] = useState(); - const query = useCall(api.query.bagsList.listNodes.multi, [stashIds], MULTI_OPTS); + const query = useCall(mod.listNodes.multi, [stashIds], MULTI_OPTS); useEffect((): void => { query && setResult((prev) => merge(prev, query)); diff --git a/packages/page-staking/src/Bags/useQueryModule.ts b/packages/page-staking/src/Bags/useQueryModule.ts new file mode 100644 index 0000000000..f98f67f9e9 --- /dev/null +++ b/packages/page-staking/src/Bags/useQueryModule.ts @@ -0,0 +1,19 @@ +// Copyright 2017-2022 @polkadot/app-staking authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { AugmentedQueries } from '@polkadot/api-base/types'; + +import { useMemo } from 'react'; + +import { createNamedHook, useApi } from '@polkadot/react-hooks'; + +function useModuleImpl (): AugmentedQueries<'promise'>['bagsList'] { + const { api } = useApi(); + + return useMemo( + () => api.query.bagsList || api.query.voterList, + [api] + ); +} + +export default createNamedHook('useQueryModule', useModuleImpl); diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx index afa183f771..4d2e667470 100644 --- a/packages/page-staking/src/index.tsx +++ b/packages/page-staking/src/index.tsx @@ -129,7 +129,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement('Targets') }, - hasStashes && isFunction(api.query.bagsList?.counterForListNodes) && { + hasStashes && isFunction((api.query.bagsList || api.query.voterList)?.counterForListNodes) && { name: 'bags', text: t('Bags') },