feat(ux): Pool display polishes, pre-release fixes (#2065)

polkadot-cloud · Apr 6, 2024 · 89e5f98 · 89e5f98
1 parent d22e743
commit 89e5f98
Show file tree

Hide file tree

Showing 20 changed files with 154 additions and 247 deletions.
diff --git a/src/canvas/JoinPool/Header.tsx b/src/canvas/JoinPool/Header.tsx
@@ -25,6 +25,7 @@ export const Header = ({
   autoSelected,
   setActiveTab,
   setSelectedPoolId,
+  providedPoolId,
 }: JoinPoolHeaderProps) => {
   const { t } = useTranslation();
   const { closeCanvas } = useOverlay().canvas;
@@ -44,12 +45,14 @@ export const Header = ({
   return (
     <>
       <div className="head">
-        <ButtonPrimaryInvert
-          text={t('chooseAnotherPool', { ns: 'library' })}
-          iconLeft={faArrowsRotate}
-          onClick={() => handleChooseNewPool()}
-          lg
-        />
+        {providedPoolId === null && (
+          <ButtonPrimaryInvert
+            text={t('chooseAnotherPool', { ns: 'library' })}
+            iconLeft={faArrowsRotate}
+            onClick={() => handleChooseNewPool()}
+            lg
+          />
+        )}
         <ButtonPrimary
           text={t('pools.back', { ns: 'pages' })}
           lg

diff --git a/src/canvas/JoinPool/Nominations/index.tsx b/src/canvas/JoinPool/Nominations/index.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { ValidatorList } from 'library/ValidatorList';
-import { ListWrapper } from 'modals/PoolNominations/Wrappers';
 import { useTranslation } from 'react-i18next';
 import { HeadingWrapper, NominationsWrapper } from '../Wrappers';
 import type { NominationsProps } from '../types';
@@ -24,30 +23,25 @@ export const Nominations = ({ stash, poolId }: NominationsProps) => {
     <NominationsWrapper>
       <HeadingWrapper>
         <h3>
-          {targets.length}{' '}
           {!targets.length
             ? t('nominate.noNominationsSet', { ns: 'pages' })
-            : ``}{' '}
-          {t('nominations', { ns: 'library', count: targets.length })}
+            : `${targets.length} ${t('nominations', { ns: 'library', count: targets.length })}`}
         </h3>
       </HeadingWrapper>
-      <ListWrapper>
-        {targets.length > 0 ? (
-          <ValidatorList
-            format="nomination"
-            bondFor="pool"
-            validators={filteredTargets}
-            nominator={stash}
-            showMenu={false}
-            displayFor="canvas"
-            allowListFormat={false}
-            allowMoreCols={true}
-            refetchOnListUpdate
-          />
-        ) : (
-          <h3>{t('poolIsNotNominating', { ns: 'modals' })}</h3>
-        )}
-      </ListWrapper>
+
+      {targets.length > 0 && (
+        <ValidatorList
+          format="nomination"
+          bondFor="pool"
+          validators={filteredTargets}
+          nominator={stash}
+          showMenu={false}
+          displayFor="canvas"
+          allowListFormat={false}
+          allowMoreCols={true}
+          refetchOnListUpdate
+        />
+      )}
     </NominationsWrapper>
   );
 };
diff --git a/src/canvas/JoinPool/Overview/PerformanceGraph.tsx b/src/canvas/JoinPool/Overview/PerformanceGraph.tsx
@@ -39,14 +39,17 @@ ChartJS.register(
   Legend
 );
 
-export const PerformanceGraph = ({ bondedPool }: OverviewSectionProps) => {
+export const PerformanceGraph = ({
+  bondedPool,
+  performanceKey,
+}: OverviewSectionProps) => {
   const { t } = useTranslation();
   const { mode } = useTheme();
   const { openHelp } = useHelp();
   const { colors } = useNetwork().networkData;
   const { getPoolRewardPoints } = usePoolPerformance();
 
-  const poolRewardPoints = getPoolRewardPoints('pool_join');
+  const poolRewardPoints = getPoolRewardPoints(performanceKey);
   const rawEraRewardPoints = poolRewardPoints[bondedPool.addresses.stash] || {};
 
   // Ref to the graph container.

diff --git a/src/canvas/JoinPool/Overview/Stats.tsx b/src/canvas/JoinPool/Overview/Stats.tsx
@@ -9,8 +9,10 @@ import BigNumber from 'bignumber.js';
 import { useEffect, useState } from 'react';
 import type { OverviewSectionProps } from '../types';
 import { useTranslation } from 'react-i18next';
+import { usePoolPerformance } from 'contexts/Pools/PoolPerformance';
+import { MaxEraRewardPointsEras } from 'consts';
 
-export const Stats = ({ bondedPool }: OverviewSectionProps) => {
+export const Stats = ({ bondedPool, performanceKey }: OverviewSectionProps) => {
   const { t } = useTranslation('library');
   const {
     networkData: {
@@ -20,6 +22,11 @@ export const Stats = ({ bondedPool }: OverviewSectionProps) => {
     },
   } = useNetwork();
   const { isReady, api } = useApi();
+  const { getPoolRewardPoints } = usePoolPerformance();
+  const poolRewardPoints = getPoolRewardPoints(performanceKey);
+  const rawEraRewardPoints = Object.values(
+    poolRewardPoints[bondedPool.addresses.stash] || {}
+  );
 
   // Store the pool balance.
   const [poolBalance, setPoolBalance] = useState<BigNumber | null>(null);
@@ -52,7 +59,9 @@ export const Stats = ({ bondedPool }: OverviewSectionProps) => {
   return (
     <HeadingWrapper>
       <h4>
-        <span className="active">{t('activelyNominating')}</span>
+        {rawEraRewardPoints.length === MaxEraRewardPointsEras && (
+          <span className="active">{t('activelyNominating')}</span>
+        )}
 
         <span className="balance">
           <Token className="icon" />

diff --git a/src/canvas/JoinPool/Overview/index.tsx b/src/canvas/JoinPool/Overview/index.tsx
@@ -9,21 +9,39 @@ import { Addresses } from './Addresses';
 import { Roles } from './Roles';
 import { GraphLayoutWrapper } from '../Wrappers';
 import type { OverviewSectionProps } from '../types';
+import { useBalances } from 'contexts/Balances';
+import { useActiveAccounts } from 'contexts/ActiveAccounts';
 
-export const Overview = (props: OverviewSectionProps) => (
-  <>
-    <div className="main">
-      <GraphLayoutWrapper>
-        <Stats {...props} />
-        <PerformanceGraph {...props} />
-      </GraphLayoutWrapper>
-      <Addresses {...props} />
-      <Roles {...props} />
-    </div>
-    <div className="side">
-      <div>
-        <JoinForm {...props} />
+export const Overview = (props: OverviewSectionProps) => {
+  const { getPoolMembership } = useBalances();
+  const { activeAccount } = useActiveAccounts();
+
+  const {
+    bondedPool: { state },
+  } = props;
+
+  const showJoinForm =
+    activeAccount !== null &&
+    state === 'Open' &&
+    getPoolMembership(activeAccount) === null;
+
+  return (
+    <>
+      <div className="main">
+        <GraphLayoutWrapper>
+          <Stats {...props} />
+          <PerformanceGraph {...props} />
+        </GraphLayoutWrapper>
+        <Addresses {...props} />
+        <Roles {...props} />
       </div>
-    </div>
-  </>
-);
+      {showJoinForm && (
+        <div className="side">
+          <div>
+            <JoinForm {...props} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/src/canvas/JoinPool/Preloader.tsx b/src/canvas/JoinPool/Preloader.tsx
@@ -14,8 +14,13 @@ import { capitalizeFirstLetter, planckToUnit, rmCommas } from '@w3ux/utils';
 import { useNetwork } from 'contexts/Network';
 import { useApi } from 'contexts/Api';
 import { PoolSyncBar } from 'library/PoolSync/Bar';
+import type { PoolRewardPointsKey } from 'contexts/Pools/PoolPerformance/types';
 
-export const Preloader = () => {
+export const Preloader = ({
+  performanceKey,
+}: {
+  performanceKey: PoolRewardPointsKey;
+}) => {
   const { t } = useTranslation('pages');
   const {
     network,
@@ -51,7 +56,7 @@ export const Preloader = () => {
           <div className="empty"></div>
           <div className="standalone">
             <div className="title">
-              <h1>{t('pools.joinPool')}</h1>
+              <h1>{t('pools.pools')}</h1>
             </div>
             <div className="labels">
               <h3>
@@ -74,7 +79,7 @@ export const Preloader = () => {
           </h2>
 
           <h2 className="tip">
-            <PoolSyncBar />
+            <PoolSyncBar performanceKey={performanceKey} />
           </h2>
         </div>
       </JoinPoolInterfaceWrapper>

diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts
@@ -28,21 +28,21 @@ export const JoinPoolInterfaceWrapper = styled.div`
         flex-grow: 1;
         display: flex;
         flex-direction: column;
-        padding-right: 4rem;
 
         @media (max-width: 1000px) {
           flex-basis: 100%;
-          padding-right: 0;
         }
       }
 
       &.side {
-        min-width: 450px;
+        min-width: 460px;
+        padding-left: 2.5rem;
 
         @media (max-width: 1000px) {
           flex-grow: 1;
           flex-basis: 100%;
           margin-top: 0.5rem;
+          padding-left: 0;
         }
 
         > div {

diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx
@@ -24,12 +24,21 @@ export const JoinPool = () => {
   const { poolsMetaData, bondedPools } = useBondedPools();
   const { getPoolRewardPoints, getPoolPerformanceTask } = usePoolPerformance();
 
+  // Get the provided pool id and performance batch key from options, if available.
+  const providedPool = options?.providedPool;
+  const providedPoolId = providedPool?.id || null;
+  const performanceKey =
+    providedPoolId && providedPool?.performanceBatchKey
+      ? providedPool?.performanceBatchKey
+      : 'pool_join';
+
   // Get the pool performance task to determine if performance data is ready.
-  const poolJoinPerformanceTask = getPoolPerformanceTask('pool_join');
+  const poolJoinPerformanceTask = getPoolPerformanceTask(performanceKey);
+
   const performanceDataReady = poolJoinPerformanceTask.status === 'synced';
 
   // Get performance data: Assumed to be fetched now.
-  const poolRewardPoints = getPoolRewardPoints('pool_join');
+  const poolRewardPoints = getPoolRewardPoints(performanceKey);
 
   // The active canvas tab.
   const [activeTab, setActiveTab] = useState<number>(0);
@@ -64,7 +73,7 @@ export const JoinPool = () => {
 
   const initialSelectedPoolId = useMemo(
     () =>
-      options?.poolId ||
+      providedPoolId ||
       filteredBondedPools[(filteredBondedPools.length * Math.random()) << 0]
         ?.id ||
       0,
@@ -96,7 +105,7 @@ export const JoinPool = () => {
   return (
     <CanvasFullScreenWrapper>
       {poolJoinPerformanceTask.status !== 'synced' || !bondedPool ? (
-        <Preloader />
+        <Preloader performanceKey={performanceKey} />
       ) : (
         <>
           <Header
@@ -105,13 +114,19 @@ export const JoinPool = () => {
             setSelectedPoolId={setSelectedPoolId}
             bondedPool={bondedPool}
             metadata={poolsMetaData[selectedPoolId]}
-            autoSelected={options?.poolId === undefined}
+            autoSelected={providedPoolId === undefined}
             filteredBondedPools={filteredBondedPools}
+            providedPoolId={providedPoolId}
           />
 
           <JoinPoolInterfaceWrapper>
             <div className="content">
-              {activeTab === 0 && <Overview bondedPool={bondedPool} />}
+              {activeTab === 0 && (
+                <Overview
+                  bondedPool={bondedPool}
+                  performanceKey={performanceKey}
+                />
+              )}
               {activeTab === 1 && (
                 <Nominations
                   poolId={bondedPool.id}

diff --git a/src/canvas/JoinPool/types.ts b/src/canvas/JoinPool/types.ts
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import type { BondedPool } from 'contexts/Pools/BondedPools/types';
+import type { PoolRewardPointsKey } from 'contexts/Pools/PoolPerformance/types';
 import type { Dispatch, SetStateAction } from 'react';
 
 export interface JoinPoolHeaderProps {
@@ -12,6 +13,7 @@ export interface JoinPoolHeaderProps {
   autoSelected: boolean;
   setActiveTab: (tab: number) => void;
   setSelectedPoolId: Dispatch<SetStateAction<number>>;
+  providedPoolId: number;
 }
 
 export interface NominationsProps {
@@ -27,4 +29,5 @@ export interface AddressSectionProps {
 
 export interface OverviewSectionProps {
   bondedPool: BondedPool;
+  performanceKey: PoolRewardPointsKey;
 }
diff --git a/src/library/ListItem/Labels/JoinPool.tsx b/src/library/ListItem/Labels/JoinPool.tsx
@@ -9,11 +9,13 @@ import { useOverlay } from 'kits/Overlay/Provider';
 export const JoinPool = ({
   id,
   setActiveTab,
+  disabled,
 }: {
   id: number;
   setActiveTab: (t: number) => void;
+  disabled: boolean;
 }) => {
-  const { t } = useTranslation('library');
+  const { t } = useTranslation('tips');
   const { openCanvas } = useOverlay().canvas;
 
   return (
@@ -24,14 +26,18 @@ export const JoinPool = ({
           openCanvas({
             key: 'JoinPool',
             options: {
-              poolId: id,
+              providedPool: {
+                id,
+                performanceBatchKey: 'pool_page',
+              },
               onJoinCallback: () => setActiveTab(0),
             },
             size: 'xl',
           });
         }}
+        disabled={disabled}
       >
-        {t('join')}
+        {t('module.more')}
         <FontAwesomeIcon icon={faCaretRight} transform="shrink-2" />
       </button>
     </div>

diff --git a/src/library/ListItem/Wrappers.ts b/src/library/ListItem/Wrappers.ts
@@ -12,7 +12,7 @@ export const Wrapper = styled.div`
   &.member {
     --height-bottom-row: 2.75rem;
   }
-  &.pool-join {
+  &.pool-more {
     --height-bottom-row: 7.5rem;
   }
 
@@ -155,6 +155,12 @@ export const Labels = styled.div`
         &:hover {
           opacity: 1;
         }
+
+        &:disabled {
+          &:hover {
+            opacity: var(--opacity-disabled);
+          }
+        }
         > svg {
           margin-left: 0.3rem;
         }