From fb5008d0ebae166943ee6b3749f4c350758c9315 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Tue, 9 Apr 2024 10:36:08 +0700 Subject: [PATCH] feat(ux): Simplify pool list, fetch performance on More (#2070) --- src/contexts/Pools/PoolPerformance/types.ts | 9 +- src/library/List/defaults.ts | 2 +- .../Labels/{JoinPool.tsx => More.tsx} | 17 +++- src/library/ListItem/Labels/PoolBonded.tsx | 89 ++++++------------- .../ListItem/Labels/PoolNominateStatus.tsx | 70 +++++++++++++++ src/library/ListItem/Wrappers.ts | 59 ++++++++++-- src/library/Pool/index.tsx | 21 ++--- src/library/PoolList/index.tsx | 23 +---- 8 files changed, 183 insertions(+), 107 deletions(-) rename src/library/ListItem/Labels/{JoinPool.tsx => More.tsx} (67%) create mode 100644 src/library/ListItem/Labels/PoolNominateStatus.tsx diff --git a/src/contexts/Pools/PoolPerformance/types.ts b/src/contexts/Pools/PoolPerformance/types.ts index 62828a25f8..6f0a735f1c 100644 --- a/src/contexts/Pools/PoolPerformance/types.ts +++ b/src/contexts/Pools/PoolPerformance/types.ts @@ -24,8 +24,9 @@ export interface PoolPerformanceContextInterface { } // Fetching status for keys. -export type PoolPerformanceTasks = Partial< - Record +export type PoolPerformanceTasks = Record< + PoolRewardPointsKey, + PoolPerformanceTaskStatus >; // Performance fetching status. @@ -42,10 +43,10 @@ export interface PoolPerformanceTaskStatus { */ // Supported reward points batch keys. -export type PoolRewardPointsKey = 'pool_join' | 'pool_page'; +export type PoolRewardPointsKey = string; // Pool reward batches, keyed by batch key. -export type PoolRewardPointsMap = Partial>; +export type PoolRewardPointsMap = Record; // Pool reward points are keyed by era, then by pool address. diff --git a/src/library/List/defaults.ts b/src/library/List/defaults.ts index 1cfbba438e..9941325af3 100644 --- a/src/library/List/defaults.ts +++ b/src/library/List/defaults.ts @@ -17,7 +17,7 @@ export const defaultContext: ListContextInterface = { }; // The amount of pools per page. -export const poolsPerPage = 21; +export const poolsPerPage = 30; // The amount of validators per page. export const validatorsPerPage = 30; diff --git a/src/library/ListItem/Labels/JoinPool.tsx b/src/library/ListItem/Labels/More.tsx similarity index 67% rename from src/library/ListItem/Labels/JoinPool.tsx rename to src/library/ListItem/Labels/More.tsx index b15d8d503c..b0e7682be5 100644 --- a/src/library/ListItem/Labels/JoinPool.tsx +++ b/src/library/ListItem/Labels/More.tsx @@ -5,30 +5,39 @@ import { faCaretRight } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useTranslation } from 'react-i18next'; import { useOverlay } from 'kits/Overlay/Provider'; +import { usePoolPerformance } from 'contexts/Pools/PoolPerformance'; +import type { BondedPool } from 'contexts/Pools/BondedPools/types'; -export const JoinPool = ({ - id, +export const More = ({ + pool, setActiveTab, disabled, }: { - id: number; + pool: BondedPool; setActiveTab: (t: number) => void; disabled: boolean; }) => { const { t } = useTranslation('tips'); const { openCanvas } = useOverlay().canvas; + const { startPoolRewardPointsFetch } = usePoolPerformance(); + + const { id, addresses } = pool; + + // Define a unique pool performance data key + const performanceKey = `pool_page_standalone_${id}`; return (
-
+
- +   +
- + {currentCommission > 0 && ( )} + - - - + diff --git a/src/library/PoolList/index.tsx b/src/library/PoolList/index.tsx index a348e6f6b7..ebff45c5a4 100644 --- a/src/library/PoolList/index.tsx +++ b/src/library/PoolList/index.tsx @@ -28,10 +28,8 @@ import { usePoolList } from './context'; import type { PoolListProps } from './types'; import type { BondedPool } from 'contexts/Pools/BondedPools/types'; import { useSyncing } from 'hooks/useSyncing'; -import { useValidators } from 'contexts/Validators/ValidatorEntries'; import { useApi } from 'contexts/Api'; import { useEffectIgnoreInitial } from '@w3ux/hooks'; -import { usePoolPerformance } from 'contexts/Pools/PoolPerformance'; export const PoolList = ({ allowMoreCols, @@ -49,11 +47,9 @@ export const PoolList = ({ const { activeEra } = useApi(); const { syncing } = useSyncing(); const { applyFilter } = usePoolFilters(); - const { erasRewardPointsFetched } = useValidators(); const { listFormat, setListFormat } = usePoolList(); - const { startPoolRewardPointsFetch } = usePoolPerformance(); + const { poolSearchFilter, poolsNominations } = useBondedPools(); const { getFilters, getSearchTerm, setSearchTerm } = useFilters(); - const { poolSearchFilter, poolsNominations, bondedPools } = useBondedPools(); const includes = getFilters('include', 'pools'); const excludes = getFilters('exclude', 'pools'); @@ -81,12 +77,12 @@ export const PoolList = ({ // Whether this the initial render. const [synced, setSynced] = useState(false); - // pagination + // Handle Pagination. const totalPages = Math.ceil(listPools.length / poolsPerPage); const pageEnd = page * poolsPerPage - 1; const pageStart = pageEnd - (poolsPerPage - 1); - // get paged subset of list items. + // Get paged subset of list items. const poolsToDisplay = listPools.slice(pageStart).slice(0, poolsPerPage); // Handle resetting of pool list when provided pools change. @@ -96,7 +92,7 @@ export const PoolList = ({ setSynced(true); }; - // handle filter / order update + // Handle filter / order update const handlePoolsFilterUpdate = () => { const filteredPools = filterPoolList(); setListPools(filteredPools); @@ -119,17 +115,6 @@ export const PoolList = ({ setSearchTerm('pools', newValue); }; - // Fetch pool performance data when list items or page changes. Requires `erasRewardPoints` and - // `bondedPools` to be fetched. - useEffect(() => { - if (erasRewardPointsFetched && bondedPools.length) { - startPoolRewardPointsFetch( - 'pool_page', - poolsToDisplay.map(({ addresses }) => addresses.stash) - ); - } - }, [JSON.stringify(listPools), page, erasRewardPointsFetched, bondedPools]); - // Refetch list when pool list changes. useEffect(() => { if (JSON.stringify(pools) !== JSON.stringify(poolsDefault) && synced) {