frontend: PoolsOverview: deprecated label to usdc.e pool

hop-protocol · Aug 9, 2024 · 889110a · 889110a
1 parent 1d28b46
commit 889110a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/packages/frontend/src/pages/Pools/PoolsOverview/PoolRow.tsx b/packages/frontend/src/pages/Pools/PoolsOverview/PoolRow.tsx
@@ -8,7 +8,18 @@ import Typography from '@mui/material/Typography'
 import { AprDetailsTooltip } from '#components/InfoTooltip/AprDetailsTooltip.js'
 import { Button } from '#components/Button/index.js'
 import { Link, useNavigate } from 'react-router-dom'
+import Badge from '@mui/material/Badge'
 import { makeStyles } from '@mui/styles'
+import { styled } from '@mui/material/styles'
+
+const DeprecatedBadge = styled(Badge)(({ theme }) => ({
+  '& .MuiBadge-badge': {
+    color: '#fff',
+    fontSize: '0.75rem',
+    top: '50%',
+    right: '-30px'
+  },
+}))
 
 export const useStyles = makeStyles(theme => ({
   box: {
@@ -116,12 +127,12 @@ export function PoolRow (props: Props) {
             <Box display="flex" flexDirection="column">
               <Box>
                 <Typography variant="body1" title="Pool">
-                  <strong>{poolName}</strong>
+                  {poolName}
                 </Typography>
               </Box>
               <Box>
                 <Typography variant="body2" color="secondary" title="Tokens in pool">
-                  {poolSubtitle}
+                  {isPoolDeprecated ? <DeprecatedBadge badgeContent="Deprecated" color="warning" title="This pool is deprecated and only withdrawals are allowed.">{poolSubtitle}</DeprecatedBadge> : poolSubtitle}
                 </Typography>
               </Box>
             </Box>

diff --git a/packages/frontend/src/pages/Pools/PoolsOverview/usePools.tsx b/packages/frontend/src/pages/Pools/PoolsOverview/usePools.tsx
@@ -99,7 +99,7 @@ export function usePools () {
             withdrawLink,
             canClaim: false,
             canStake: false,
-            isPoolDeprecated: false,
+            isPoolDeprecated: tokenModel.symbol === 'USDC.e',
             hasStakingContract: false,
             claimLink,
             stakeLink,
@@ -115,7 +115,15 @@ export function usePools () {
           })
         }
       }
-      return _pools.filter(Boolean)
+      return _pools.filter(Boolean).sort((a: any, b: any) => {
+        if (a.token.symbol === 'ETH') return -1
+        if (b.token.symbol === 'ETH') return 1
+
+        if (a.token.symbol === 'USDC.e') return 1
+        if (b.token.symbol === 'USDC.e') return -1
+
+        return a.token.symbol.localeCompare(b.token.symbol)
+      })
     },
     {
       enabled: true,