diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index f9038e58..cc529773 100644 --- 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 index 09c94ecf..6a697490 100644 --- 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 ( @@ -131,29 +156,19 @@ const PoolsPage = (): JSX.Element => {
{t("headers.deposits")}
- {!pools && ( + {!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(); - }) - .map((pool: Pool) => )} + {activePools && activePools.length === 0 && ( + {t("pools.emptyState")} + )} + {activePools && + activePools.length > 0 && + activePools.map((pool: Pool) => )}