move targets to Nominations tab

polkadot-cloud · Apr 2, 2024 · b74b579 · b74b579
1 parent 511eb00
commit b74b579
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 26 deletions.
diff --git a/src/canvas/JoinPool/Nominations/index.tsx b/src/canvas/JoinPool/Nominations/index.tsx
@@ -6,9 +6,20 @@ import { ListWrapper } from 'modals/PoolNominations/Wrappers';
 import { useTranslation } from 'react-i18next';
 import { HeadingWrapper, NominationsWrapper } from '../Wrappers';
 import type { NominationsProps } from '../types';
+import { useValidators } from 'contexts/Validators/ValidatorEntries';
+import { useBondedPools } from 'contexts/Pools/BondedPools';
 
-export const Nominations = ({ stash, targets }: NominationsProps) => {
+export const Nominations = ({ stash, poolId }: NominationsProps) => {
   const { t } = useTranslation('modals');
+  const { poolsNominations } = useBondedPools();
+
+  const { validators } = useValidators();
+
+  // Extract validator entries from pool targets.
+  const targets = poolsNominations[poolId]?.targets || [];
+  const filteredTargets = validators.filter(({ address }) =>
+    targets.includes(address)
+  );
 
   return (
     <NominationsWrapper>
@@ -22,7 +33,7 @@ export const Nominations = ({ stash, targets }: NominationsProps) => {
           <ValidatorList
             format="nomination"
             bondFor="pool"
-            validators={targets}
+            validators={filteredTargets}
             nominator={stash}
             showMenu={false}
             displayFor="canvas"

diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx
@@ -9,7 +9,6 @@ import { useMemo, useState } from 'react';
 import { Header } from './Header';
 import { Overview } from './Overview';
 import { Nominations } from './Nominations';
-import { useValidators } from 'contexts/Validators/ValidatorEntries';
 import { usePoolPerformance } from 'contexts/Pools/PoolPerformance';
 import { MaxEraRewardPointsEras } from 'consts';
 import { useStaking } from 'contexts/Staking';
@@ -20,12 +19,11 @@ export const JoinPool = () => {
     config: { options },
   } = useOverlay().canvas;
   const { eraStakers } = useStaking();
-  const { validators } = useValidators();
   const { poolRewardPoints } = usePoolPerformance();
-  const { poolsMetaData, poolsNominations, bondedPools } = useBondedPools();
+  const { poolsMetaData, bondedPools } = useBondedPools();
 
   // The active canvas tab.
-  const [activeTab, setActiveTab] = useState(0);
+  const [activeTab, setActiveTab] = useState<number>(0);
 
   // Trigger re-render when chosen selected pool is incremented.
   const [selectedPoolCount, setSelectedPoolCount] = useState<number>(0);
@@ -37,18 +35,19 @@ export const JoinPool = () => {
     () =>
       bondedPools
         .filter((pool) => {
+          // Fetch reward point data for the pool.
           const rawEraRewardPoints =
             poolRewardPoints[pool.addresses.stash] || {};
           const rewardPoints = Object.values(rawEraRewardPoints);
-          const activeDaily = rewardPoints.every(
-            (points) => Number(points) > 0
-          );
-          return (
-            pool.state === 'Open' &&
-            activeDaily &&
-            rewardPoints.length === MaxEraRewardPointsEras
-          );
+
+          // Ensure pool has been active for every era in performance data.
+          const activeDaily =
+            rewardPoints.every((points) => Number(points) > 0) &&
+            rewardPoints.length === MaxEraRewardPointsEras;
+
+          return pool.state === 'Open' && activeDaily;
         })
+        // Ensure the pool is currently in the active set of backers.
         .filter((pool) =>
           eraStakers.stakers.find((staker) =>
             staker.others.find(({ who }) => who !== pool.addresses.stash)
@@ -57,7 +56,8 @@ export const JoinPool = () => {
     [bondedPools, poolRewardPoints]
   );
 
-  // The bonded pool to display. Use the provided poolId, or assign a random pool.
+  // The bonded pool to display. Use the provided `poolId`, or assign a random eligible filtered
+  // pool otherwise. Re-fetches when the selected pool count is incremented.
   const bondedPool = useMemo(
     () =>
       options?.poolId
@@ -68,22 +68,16 @@ export const JoinPool = () => {
     [selectedPoolCount]
   );
 
-  // The selected pool id. Use the provided poolId, or assign a random pool.
+  // The selected bonded pool id.
   const [selectedPoolId, setSelectedPoolId] = useState<number>(
-    options?.poolId || bondedPool?.id || 0
+    bondedPool?.id || 0
   );
 
   if (!bondedPool) {
     closeCanvas();
     return null;
   }
 
-  // Extract validator entries from pool targets
-  const targets = poolsNominations[bondedPool.id]?.targets || [];
-  const targetValidators = validators.filter(({ address }) =>
-    targets.includes(address)
-  );
-
   return (
     <CanvasFullScreenWrapper>
       <Header
@@ -102,8 +96,8 @@ export const JoinPool = () => {
           {activeTab === 0 && <Overview bondedPool={bondedPool} />}
           {activeTab === 1 && (
             <Nominations
+              poolId={bondedPool.id}
               stash={bondedPool.addresses.stash}
-              targets={targetValidators}
             />
           )}
         </div>

diff --git a/src/canvas/JoinPool/types.ts b/src/canvas/JoinPool/types.ts
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import type { BondedPool } from 'contexts/Pools/BondedPools/types';
-import type { Validator } from 'contexts/Validators/types';
 import type { Dispatch, SetStateAction } from 'react';
 
 export interface JoinPoolHeaderProps {
@@ -18,7 +17,7 @@ export interface JoinPoolHeaderProps {
 
 export interface NominationsProps {
   stash: string;
-  targets: Validator[];
+  poolId: number;
 }
 
 export interface AddressSectionProps {