Voterlist (#7617)

* Voterlist

* Route

packages/page-staking/src/Bags/Rebag.tsx

@@ -38,7 +38,7 @@ function Rebag ({ bagUpper, stashIds }: Props): React.ReactElement<Props> | null
   );
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   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);

packages/page-staking/src/Bags/Stash.tsx

@@ -63,7 +63,7 @@ function Stash ({ bagLower, bagUpper, className, isLoading, list, stashId }: Pro
               isDisabled={isLoading}
               label={t<string>('Move up {{jumpCount}}', { replace: { jumpCount } })}
               params={[stashInfo.jump]}
-              tx={api.tx.bagsList.putInFrontOf}
+              tx={(api.tx.bagsList || api.tx.voterList).putInFrontOf}
             />
           )
           : null

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<Props> {
   const { t } = useTranslation();
-  const { api } = useApi();
-  const total = useCall<BN>(api.query.bagsList.counterForListNodes);
+  const mod = useQueryModule();
+  const total = useCall<BN>(mod.counterForListNodes);
 
   const myCount = useMemo(
     () => mapOwn && Object.values(mapOwn).reduce((count, n) => count + n.length, 0),

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<Option<PalletBagsListListNode>>(!!currId && api.query.bagsList.listNodes, [currId]);
+  const node = useCall<Option<PalletBagsListListNode>>(!!currId && mod.listNodes, [currId]);
 
   useEffect(
     () => setCurrent(

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<BagInfo[] | undefined>();
-  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));

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<PalletBagsListListNode>[]): 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<BagMap | undefined>();
-  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));

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);

packages/page-staking/src/index.tsx

@@ -129,7 +129,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
       name: 'targets',
       text: t<string>('Targets')
     },
-    hasStashes && isFunction(api.query.bagsList?.counterForListNodes) && {
+    hasStashes && isFunction((api.query.bagsList || api.query.voterList)?.counterForListNodes) && {
       name: 'bags',
       text: t<string>('Bags')
     },