use bondedPool.memberCounter

src/canvas/PoolMembers/Lists/FetchPage.tsx

@@ -51,7 +51,7 @@ export const MembersListInner = ({
   };
 
   // pagination
-  const totalPages = Math.ceil(memberCount / listItemsPerPage);
+  const totalPages = Math.ceil(Number(memberCount) / listItemsPerPage);
   const pageEnd = listItemsPerPage - 1;
   const pageStart = pageEnd - (listItemsPerPage - 1);
 

src/canvas/PoolMembers/Lists/types.ts

@@ -15,5 +15,5 @@ export type DefaultMembersListProps = MembersListProps & {
 };
 
 export type FetchpageMembersListProps = MembersListProps & {
-  memberCount: number;
+  memberCount: string;
 };

src/canvas/PoolMembers/Members.tsx

@@ -18,15 +18,16 @@ export const Members = () => {
   const { mode } = useTheme();
   const { pluginEnabled } = usePlugins();
   const { getMembersOfPoolFromNode } = usePoolMembers();
-  const { activePool, isOwner, isBouncer, activePoolMemberCount } =
-    useActivePool();
+  const { activePool, isOwner, isBouncer } = useActivePool();
 
   const { colors } = useNetwork().networkData;
   const annuncementBorderColor = colors.secondary[mode];
 
   const showBlockedPrompt =
     activePool?.bondedPool?.state === 'Blocked' && (isOwner() || isBouncer());
 
+  const memberCount = activePool?.bondedPool?.memberCounter ?? '0';
+
   const membersListProps = {
     batchKey: 'active_pool_members',
     pagination: true,
@@ -80,7 +81,7 @@ export const Members = () => {
         {pluginEnabled('subscan') ? (
           <FetchPageMemberList
             {...membersListProps}
-            memberCount={activePoolMemberCount}
+            memberCount={memberCount}
           />
         ) : (
           <DefaultMemberList

src/contexts/Pools/ActivePool/defaults.ts

@@ -31,6 +31,5 @@ export const defaultActivePoolContext: ActivePoolContextState = {
   setActivePoolId: (p) => {},
   activePool: null,
   activePoolNominations: null,
-  activePoolMemberCount: 0,
   pendingPoolRewards: new BigNumber(0),
 };

src/contexts/Pools/ActivePool/index.tsx

@@ -11,16 +11,12 @@ import {
   useRef,
   useState,
 } from 'react';
-import type { Sync } from 'types';
 import { useEffectIgnoreInitial } from '@w3ux/hooks';
-import { usePlugins } from 'contexts/Plugins';
 import { useNetwork } from 'contexts/Network';
 import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useApi } from '../../Api';
 import { useBondedPools } from '../BondedPools';
-import { usePoolMembers } from '../PoolMembers';
 import type { ActivePoolContextState } from './types';
-import { SubscanController } from 'controllers/SubscanController';
 import { useCreatePoolAccounts } from 'hooks/useCreatePoolAccounts';
 import { useBalances } from 'contexts/Balances';
 import { ActivePoolsController } from 'controllers/ActivePoolsController';
@@ -38,12 +34,11 @@ export const useActivePool = () => useContext(ActivePoolContext);
 export const ActivePoolProvider = ({ children }: { children: ReactNode }) => {
   const { network } = useNetwork();
   const { isReady, api } = useApi();
-  const { pluginEnabled } = usePlugins();
   const { getPoolMembership } = useBalances();
   const { activeAccount } = useActiveAccounts();
   const createPoolAccounts = useCreatePoolAccounts();
-  const { getMembersOfPoolFromNode } = usePoolMembers();
   const { getAccountPoolRoles, bondedPools } = useBondedPools();
+
   const membership = getPoolMembership(activeAccount);
 
   // Determine active pools to subscribe to. Dependencies of `activeAccount`, and `membership` mean
@@ -103,12 +98,6 @@ export const ActivePoolProvider = ({ children }: { children: ReactNode }) => {
       ? poolNominations[activePoolId]
       : null;
 
-  // Store the member count of the selected pool.
-  const [activePoolMemberCount, setactivePoolMemberCount] = useState<number>(0);
-
-  // Keep track of whether the pool member count is being fetched.
-  const fetchingMemberCount = useRef<Sync>('unsynced');
-
   // Sync active pool subscriptions.
   const syncActivePoolSubscriptions = async () => {
     if (api && accountPoolIds.length) {
@@ -230,41 +219,6 @@ export const ActivePoolProvider = ({ children }: { children: ReactNode }) => {
     return new BigNumber(0);
   };
 
-  // Gets the member count of the currently selected pool. If Subscan is enabled, it is used instead of the connected node.
-  const getMemberCount = async () => {
-    if (!activePool?.id) {
-      setactivePoolMemberCount(0);
-      return;
-    }
-    // If `Subscan` plugin is enabled, fetch member count directly from the API.
-    if (
-      pluginEnabled('subscan') &&
-      fetchingMemberCount.current === 'unsynced'
-    ) {
-      fetchingMemberCount.current = 'syncing';
-      const poolDetails = await SubscanController.handleFetchPoolDetails(
-        activePool.id
-      );
-      fetchingMemberCount.current = 'synced';
-      setactivePoolMemberCount(poolDetails?.member_count || 0);
-      return;
-    }
-    // If no plugin available, fetch all pool members from RPC and filter them to determine current
-    // pool member count. NOTE: Expensive operation.
-    setactivePoolMemberCount(
-      getMembersOfPoolFromNode(activePool?.id || 0)?.length || 0
-    );
-  };
-
-  // Fetch pool member count. We use `membership` as a dependency as the member count could change
-  // in the UI when active account's membership changes. NOTE: Do not have `poolMembersNode` as a
-  // dependency - could trigger many re-renders if value is constantly changing - more suited as a
-  // custom event.
-  useEffect(() => {
-    fetchingMemberCount.current = 'unsynced';
-    getMemberCount();
-  }, [activeAccount, activePool, membership?.poolId]);
-
   // Re-calculate pending rewards when membership changes.
   useEffectIgnoreInitial(() => {
     if (isReady) {
@@ -308,7 +262,6 @@ export const ActivePoolProvider = ({ children }: { children: ReactNode }) => {
         getPoolRoles,
         setActivePoolId,
         activePool,
-        activePoolMemberCount,
         activePoolNominations,
         pendingPoolRewards,
       }}

src/contexts/Pools/ActivePool/types.ts

@@ -19,7 +19,6 @@ export interface ActivePoolContextState {
   setActivePoolId: (p: string) => void;
   activePool: ActivePool | null;
   activePoolNominations: Nominations | null;
-  activePoolMemberCount: number;
   pendingPoolRewards: BigNumber;
 }
 

src/controllers/SubscanController/index.ts

@@ -5,7 +5,6 @@ import type {
   SubscanPoolClaim,
   SubscanData,
   SubscanPayout,
-  SubscanPoolDetails,
   SubscanPoolMember,
   SubscanRequestBody,
   SubscanEraPoints,
@@ -26,7 +25,6 @@ export class SubscanController {
   // List of endpoints to be used for Subscan API calls.
   static ENDPOINTS = {
     eraStat: '/api/scan/staking/era_stat',
-    poolDetails: '/api/scan/nomination_pool/pool',
     poolMembers: '/api/scan/nomination_pool/pool/members',
     poolRewards: '/api/scan/nomination_pool/rewards',
     rewardSlash: '/api/v2/scan/account/reward_slash',
@@ -45,7 +43,7 @@ export class SubscanController {
   static payoutData: Record<string, SubscanData> = {};
 
   // Subscan pool data, keyed by `<network>-<poolId>-<key1>-<key2>...`.
-  static poolData: Record<string, SubscanPoolDetails | PoolMember[]> = {};
+  static poolData: Record<string, PoolMember[]> = {};
 
   // Subscan era points data, keyed by `<network>-<address>-<era>`.
   static eraPointsData: Record<string, SubscanEraPoints[]> = {};
@@ -178,19 +176,6 @@ export class SubscanController {
       .splice(0, result.list.length - 1);
   };
 
-  // Fetch a pool's details from Subscan.
-  static fetchPoolDetails = async (
-    poolId: number
-  ): Promise<SubscanPoolDetails> => {
-    const result = await this.makeRequest(this.ENDPOINTS.poolDetails, {
-      pool_id: poolId,
-    });
-    if (!result) {
-      return { member_count: 0 };
-    }
-    return { member_count: result.member_count };
-  };
-
   // Fetch a pool's era points from Subscan.
   static fetchEraPoints = async (
     address: string,
@@ -235,20 +220,6 @@ export class SubscanController {
     }
   };
 
-  // Handle fetching pool details.
-  static handleFetchPoolDetails = async (poolId: number) => {
-    const dataKey = `${this.network}-${poolId}-details}`;
-    const currentValue = this.poolData[dataKey];
-
-    if (currentValue) {
-      return currentValue as SubscanPoolDetails;
-    } else {
-      const result = await this.fetchPoolDetails(poolId);
-      this.poolData[dataKey] = result;
-      return result;
-    }
-  };
-
   // Handle fetching era point history.
   static handleFetchEraPoints = async (address: string, era: number) => {
     const dataKey = `${this.network}-${address}-${era}}`;

src/controllers/SubscanController/types.ts

@@ -39,8 +39,7 @@ export interface SubscanRequestPagination {
 export type SubscanResult =
   | SubscanPayout[]
   | SubscanPoolClaim[]
-  | SubscanPoolMember[]
-  | SubscanPoolDetails;
+  | SubscanPoolMember[];
 
 export interface SubscanPoolClaim {
   account_display: {
@@ -89,10 +88,6 @@ export interface SubscanPoolMember {
   claimable: string;
 }
 
-export interface SubscanPoolDetails {
-  member_count: number;
-}
-
 export interface SubscanEraPoints {
   era: number;
   reward_point: number;

src/pages/Pools/Home/PoolStats/index.tsx

@@ -20,12 +20,12 @@ export const PoolStats = () => {
   const {
     networkData: { units, unit },
   } = useNetwork();
+  const { activePool } = useActivePool();
   const { getCurrentCommission } = usePoolCommission();
-  const { activePool, activePoolMemberCount } = useActivePool();
 
   const poolId = activePool?.id || 0;
 
-  const { state, points } = activePool?.bondedPool || {};
+  const { state, points, memberCounter } = activePool?.bondedPool || {};
   const currentCommission = getCurrentCommission(poolId);
 
   const bonded = planckToUnit(
@@ -65,13 +65,13 @@ export const PoolStats = () => {
   items.push(
     {
       label: t('pools.poolMembers'),
-      value: `${activePoolMemberCount}`,
+      value: `${memberCounter}`,
       button: {
         text: t('pools.browseMembers'),
         onClick: () => {
           openCanvas({ key: 'PoolMembers', size: 'xl' });
         },
-        disabled: activePoolMemberCount === 0,
+        disabled: memberCounter === '0',
       },
     },
     {