Merge pull request #385 from merofinance/empty-state-for-pools

Add Empty State for Pools
merofinance · Feb 26, 2024 · fa48317 · fa48317
2 parents b7126c7 + 756a693
commit fa48317
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 17 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -302,6 +302,7 @@
     "header": "All pools",
     "overview": "Mero’s single-asset pools aggregate yield across strategies. Add utility and autonomy to your liquidity with actions.",
     "deposit": "deposit",
+    "emptyState": "All Mero pools are currently paused",
     "information": {
       "header": "Pools information",
       "tvl": {

diff --git a/src/pages/pools/PoolsPage.tsx b/src/pages/pools/PoolsPage.tsx
@@ -91,6 +91,16 @@ const InfoCards = styled.div`
   }
 `;
 
+const EmptyState = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.6rem;
+  font-weight: 500;
+  padding: 3rem 0 2rem 0;
+`;
+
 const PoolsPage = (): JSX.Element => {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -107,6 +117,21 @@ const PoolsPage = (): JSX.Element => {
     dispatch(fetchState(mero));
   }, [updated]);
 
+  const activePools = pools
+    ? pools
+        .filter((pool: Pool) => {
+          const paused = pool.isPaused || pool.isShutdown;
+          if (!paused) return true;
+          if (!balances || !balances[pool.address]) return false;
+          return !balances[pool.address].isZero();
+        })
+        .sort((a: Pool, b: Pool) => (a.apy && b.apy ? b.apy.toNumber() - a.apy.toNumber() : 0))
+        .sort((a: Pool, b: Pool) => {
+          if (!balances || !balances[a.address] || !balances[b.address]) return 0;
+          return balances[b.address].toNumber() - balances[a.address].toNumber();
+        })
+    : null;
+
   return (
     <StyledPoolsPage>
       <Seo title={t("metadata.pools.title")} description={t("metadata.pools.description")} />
@@ -131,29 +156,19 @@ const PoolsPage = (): JSX.Element => {
               <Header hideOnMobile>{t("headers.deposits")}</Header>
               <ChevronHeader />
             </HeaderRow>
-            {!pools && (
+            {!activePools && (
               <>
                 <Loader row />
                 <Loader row />
                 <Loader row />
               </>
             )}
-            {pools &&
-              pools
-                .filter((pool: Pool) => {
-                  const paused = pool.isPaused || pool.isShutdown;
-                  if (!paused) return true;
-                  if (!balances || !balances[pool.address]) return false;
-                  return !balances[pool.address].isZero();
-                })
-                .sort((a: Pool, b: Pool) =>
-                  a.apy && b.apy ? b.apy.toNumber() - a.apy.toNumber() : 0
-                )
-                .sort((a: Pool, b: Pool) => {
-                  if (!balances || !balances[a.address] || !balances[b.address]) return 0;
-                  return balances[b.address].toNumber() - balances[a.address].toNumber();
-                })
-                .map((pool: Pool) => <PoolsRow key={pool.address} pool={pool} />)}
+            {activePools && activePools.length === 0 && (
+              <EmptyState>{t("pools.emptyState")}</EmptyState>
+            )}
+            {activePools &&
+              activePools.length > 0 &&
+              activePools.map((pool: Pool) => <PoolsRow key={pool.address} pool={pool} />)}
           </ContentSection>
         </ContentContainer>
         <InfoCards>