💄 headers: update align in mobile

exactly · Mar 26, 2024 · 9e4ff9b · 9e4ff9b
1 parent b06f989
commit 9e4ff9b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 10 deletions.
diff --git a/components/asset/Header.tsx b/components/asset/Header.tsx
@@ -15,7 +15,7 @@ import { Address, formatEther, formatUnits } from 'viem';
 import useStETHNativeAPR from 'hooks/useStETHNativeAPR';
 import { toPercentage } from 'utils/utils';
 import { track } from 'utils/mixpanel';
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import getSymbolDescription from 'utils/getSymbolDescription';
 import useContractAddress from 'hooks/useContractAddress';
 import { useWeb3 } from 'hooks/useWeb3';
@@ -92,7 +92,7 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
             : undefined,
       },
       {
-        label: t('Available for Withdrawal'),
+        label: t('Available'),
         value:
           floatingBorrows !== undefined &&
           fixedBorrows !== undefined &&
@@ -103,7 +103,22 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
                 formatUnits(floatingDeposits + fixedDeposits - (floatingBorrows + fixedBorrows), decimals),
               )}`
             : undefined,
-        sx: { textAlign: 'center' },
+        tooltipTitle: (
+          <Box display="flex" flexDirection="column" gap={0.5}>
+            <Typography fontSize={12} fontWeight={500}>
+              {t('Available for Withdrawal')}
+            </Typography>
+            <Typography fontSize={12} color="blue" sx={{ textDecoration: 'underline' }}>
+              <a
+                target="_blank"
+                rel="noreferrer noopener"
+                href="https://docs.exact.ly/guides/parameters#a.-reserve-factor"
+              >
+                {t('Learn more about reserve factor.')}
+              </a>
+            </Typography>
+          </Box>
+        ),
       },
       {
         label: t('Global Utilization'),
@@ -128,12 +143,12 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
     return { itemsInfo: items, totalUtilization: totalUti };
   }, [
     marketAccount,
-    t,
+    backupBorrows,
+    floatingBorrows,
     floatingDeposits,
     fixedDeposits,
-    floatingBorrows,
+    t,
     fixedBorrows,
-    backupBorrows,
     symbol,
     nativeAPR,
   ]);

diff --git a/components/common/ItemInfo.tsx b/components/common/ItemInfo.tsx
@@ -10,7 +10,7 @@ export type ItemInfoProps = {
   label: string;
   value?: string | React.ReactNode;
   underLabel?: string;
-  tooltipTitle?: string;
+  tooltipTitle?: string | React.ReactNode;
   xs?: number;
   sx?: BoxProps['sx'];
 };

diff --git a/components/markets/Header.tsx b/components/markets/Header.tsx
@@ -9,6 +9,7 @@ import { ItemInfoProps } from 'components/common/ItemInfo';
 import formatNumber from 'utils/formatNumber';
 import useAccountData from 'hooks/useAccountData';
 import { toPercentage } from 'utils/utils';
+import { Box, Typography } from '@mui/material';
 
 const MarketsHeader: FC = () => {
   const { t } = useTranslation();
@@ -73,9 +74,24 @@ const MarketsHeader: FC = () => {
       value: totalBorrowed ? `$${formatNumber(formatUnits(totalBorrowed, 18))}` : undefined,
     },
     {
-      label: t('Available for Withdrawal'),
+      label: t('Available'),
       value: totalAvailable ? `$${formatNumber(formatUnits(totalAvailable, 18))}` : undefined,
-      sx: { textAlign: 'center' },
+      tooltipTitle: (
+        <Box display="flex" flexDirection="column" gap={0.5}>
+          <Typography fontSize={12} fontWeight={500}>
+            {t('Available for Withdrawal')}
+          </Typography>
+          <Typography fontSize={12} color="blue" sx={{ textDecoration: 'underline' }}>
+            <a
+              target="_blank"
+              rel="noreferrer noopener"
+              href="https://docs.exact.ly/guides/parameters#a.-reserve-factor"
+            >
+              {t('Learn more about reserve factor.')}
+            </a>
+          </Typography>
+        </Box>
+      ),
     },
     {
       label: t('Global Utilization'),

diff --git a/i18n/es/translation.json b/i18n/es/translation.json
@@ -617,5 +617,6 @@
   "Term Structure of Interest Rates": "Estructura de Plazos de Tasas de Interés",
   "Rate": "Tasa",
   "Min": "Mín",
-  "Variable APR, Utilization and Global Utilization": "TNA Variable, Utilización y Utilización Global"
+  "Variable APR, Utilization and Global Utilization": "TNA Variable, Utilización y Utilización Global",
+  "Learn more about reserve factor.": "Aprende más sobre el factor de reserva."
 }