feat: Join pool progress bar on performance fetch. (#2064)

polkadot-cloud · Apr 5, 2024 · e5027ff · e5027ff
1 parent 69d716e
commit e5027ff
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 31 deletions.
diff --git a/src/canvas/JoinPool/Preloader.tsx b/src/canvas/JoinPool/Preloader.tsx
@@ -6,15 +6,14 @@ import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary';
 import { useOverlay } from 'kits/Overlay/Provider';
 import { useTranslation } from 'react-i18next';
 import { JoinPoolInterfaceWrapper } from './Wrappers';
-import { PageTitleTabs } from 'kits/Structure/PageTitleTabs';
 import { CanvasTitleWrapper } from 'canvas/Wrappers';
 import { useBondedPools } from 'contexts/Pools/BondedPools';
 import BigNumber from 'bignumber.js';
 import type { BondedPool } from 'contexts/Pools/BondedPools/types';
 import { capitalizeFirstLetter, planckToUnit, rmCommas } from '@w3ux/utils';
 import { useNetwork } from 'contexts/Network';
 import { useApi } from 'contexts/Api';
-import { PoolSync } from 'library/PoolSync';
+import { PoolSyncBar } from 'library/PoolSync/Bar';
 
 export const Preloader = () => {
   const { t } = useTranslation('pages');
@@ -47,7 +46,7 @@ export const Preloader = () => {
           style={{ marginLeft: '1.1rem' }}
         />
       </div>
-      <CanvasTitleWrapper>
+      <CanvasTitleWrapper className="padding">
         <div className="inner">
           <div className="empty"></div>
           <div className="standalone">
@@ -66,40 +65,16 @@ export const Preloader = () => {
             </div>
           </div>
         </div>
-        <PageTitleTabs
-          sticky={false}
-          tabs={[
-            {
-              title: t('pools.overview', { ns: 'pages' }),
-              active: true,
-              onClick: () => {
-                /* Do nothing */
-              },
-              disabled: true,
-              asPreloader: true,
-            },
-            {
-              title: t('nominate.nominations', { ns: 'pages' }),
-              active: true,
-              onClick: () => {
-                /* Do nothing */
-              },
-              disabled: true,
-              asPreloader: true,
-            },
-          ]}
-          tabClassName="canvas"
-          inline={true}
-        />
       </CanvasTitleWrapper>
 
       <JoinPoolInterfaceWrapper>
         <div className="content" style={{ flexDirection: 'column' }}>
           <h2 className="tip">
             {t('analyzingPoolPerformance', { ns: 'library' })}...
           </h2>
+
           <h2 className="tip">
-            <PoolSync />
+            <PoolSyncBar />
           </h2>
         </div>
       </JoinPoolInterfaceWrapper>

diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts
@@ -53,11 +53,40 @@ export const JoinPoolInterfaceWrapper = styled.div`
 
     > .tip {
       color: var(--accent-color-primary);
-      margin-top: 1rem;
+      margin-bottom: 1rem;
       font-family: Inter, sans-serif;
       display: flex;
       align-items: center;
-      justify-content: center;
+      justify-content: flex-start;
+
+      > .loader {
+        border: 1.5px solid var(--accent-color-pending);
+        color: var(--accent-color-primary);
+        width: 100%;
+        height: 1.5rem;
+        border-radius: 1rem;
+        position: relative;
+
+        > div {
+          position: absolute;
+          top: 0.25rem;
+          left: 0.3rem;
+          width: calc(100% - 0.6rem);
+          height: calc(100% - 0.5rem);
+          border-radius: 1rem;
+
+          > .progress {
+            background-color: var(--accent-color-primary);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 0;
+            height: 100%;
+            border-radius: 2rem;
+            transition: width 1s cubic-bezier(0.1, 1, 0.1, 1);
+          }
+        }
+      }
     }
   }
 `;

diff --git a/src/canvas/Wrappers.ts b/src/canvas/Wrappers.ts
@@ -29,6 +29,10 @@ export const CanvasTitleWrapper = styled.div`
   margin: 2rem 0 1.55rem 0;
   padding-bottom: 0.1rem;
 
+  &.padding {
+    padding-bottom: 0.75rem;
+  }
+
   > .inner {
     display: flex;
     align-items: center;

diff --git a/src/library/PoolSync/Bar.tsx b/src/library/PoolSync/Bar.tsx
@@ -0,0 +1,31 @@
+// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import BigNumber from 'bignumber.js';
+import { usePoolPerformance } from 'contexts/Pools/PoolPerformance';
+
+export const PoolSyncBar = () => {
+  const { getPoolPerformanceTask } = usePoolPerformance();
+
+  // Get the pool performance task to determine if performance data is ready.
+  const poolJoinPerformanceTask = getPoolPerformanceTask('pool_join');
+
+  // Calculate syncing status.
+  const { startEra, currentEra, endEra } = poolJoinPerformanceTask;
+  const totalEras = startEra.minus(endEra);
+  const erasPassed = startEra.minus(currentEra);
+  const percentPassed = erasPassed.isEqualTo(0)
+    ? new BigNumber(0)
+    : erasPassed.dividedBy(totalEras).multipliedBy(100);
+
+  return (
+    <div className="loader">
+      <div>
+        <span
+          className="progress"
+          style={{ width: `${percentPassed}%` }}
+        ></span>
+      </div>
+    </div>
+  );
+};