feat: reserve page e-mode info

aave · Oct 26, 2024 · f3e42b5 · f3e42b5
1 parent 35b3663
commit f3e42b5
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/src/locales/en/messages.js b/src/locales/en/messages.js
diff --git a/src/locales/en/messages.po b/src/locales/en/messages.po
@@ -987,10 +987,6 @@ msgstr "During the cooldown period, you will not earn any merit rewards. However
 msgid "E-Mode"
 msgstr "E-Mode"
 
-#: src/modules/reserve-overview/ReserveEModePanel.tsx
-msgid "E-Mode Category"
-msgstr "E-Mode Category"
-
 #: src/components/infoTooltips/EModeTooltip.tsx
 msgid "E-Mode increases your LTV for a selected category of assets up to<0/>. <1>Learn more</1>"
 msgstr "E-Mode increases your LTV for a selected category of assets up to<0/>. <1>Learn more</1>"
@@ -3434,6 +3430,10 @@ msgstr "{d}d"
 msgid "{h}h"
 msgstr "{h}h"
 
+#: src/modules/reserve-overview/ReserveEModePanel.tsx
+msgid "{label}"
+msgstr "{label}"
+
 #: src/modules/staking/StakingPanel.tsx
 msgid "{m}m"
 msgstr "{m}m"

diff --git a/src/modules/reserve-overview/ReserveEModePanel.tsx b/src/modules/reserve-overview/ReserveEModePanel.tsx
@@ -1,5 +1,8 @@
 import { Trans } from '@lingui/macro';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import CloseIcon from '@mui/icons-material/Close';
 import { Box, SvgIcon, Typography } from '@mui/material';
+import { Fragment } from 'react';
 import { LiquidationPenaltyTooltip } from 'src/components/infoTooltips/LiquidationPenaltyTooltip';
 import { LiquidationThresholdTooltip } from 'src/components/infoTooltips/LiquidationThresholdTooltip';
 import { MaxLTVTooltip } from 'src/components/infoTooltips/MaxLTVTooltip';
@@ -27,15 +30,14 @@ export const ReserveEModePanel: React.FC<ReserverEModePanelProps> = ({ reserve }
       <PanelTitle>E-Mode info</PanelTitle>
       <Box sx={{ flexGrow: 1, minWidth: 0, maxWidth: '100%', width: '100%' }}>
         {reserve.eModes.map((e) => (
-          <>
+          <Fragment key={e.id}>
             <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
-              <Typography variant="secondary14" color="text.secondary">
-                <Trans>E-Mode Category</Trans>
-              </Typography>
               <SvgIcon sx={{ fontSize: '14px', mr: 0.5, ml: 2 }}>
                 <LightningBoltGradient />
               </SvgIcon>
               <Typography variant="subheader1">{getEmodeMessage(e.eMode.label)}</Typography>
+              <ConfigStatus enabled={e.collateralEnabled} label="Collateral" />
+              <ConfigStatus enabled={e.borrowingEnabled} label="Borrowable" />
             </Box>
             <Box
               sx={{
@@ -86,7 +88,7 @@ export const ReserveEModePanel: React.FC<ReserverEModePanelProps> = ({ reserve }
                 />
               </ReserveOverviewBox>
             </Box>
-          </>
+          </Fragment>
         ))}
 
         <Typography variant="caption" color="text.secondary" paddingTop="24px">
@@ -136,3 +138,18 @@ export const ReserveEModePanel: React.FC<ReserverEModePanelProps> = ({ reserve }
     </PanelRow>
   );
 };
+
+const ConfigStatus = ({ enabled, label }: { enabled: boolean; label: string }) => {
+  return (
+    <>
+      {enabled ? (
+        <CheckRoundedIcon fontSize="small" color="success" sx={{ ml: 2 }} />
+      ) : (
+        <CloseIcon fontSize="small" color="error" sx={{ ml: 2 }} />
+      )}
+      <Typography variant="subheader1" sx={{ color: enabled ? '#46BC4B' : '#F24E4E' }}>
+        <Trans>{label}</Trans>
+      </Typography>
+    </>
+  );
+};