feat: misc fixes (#23)

closes ZKS-166 closes ZKS-167 closes ZKS-174 closes ZKS-175 closes ZKS-176 closes ZKS-177 closes ZKS-178 closes ZKS-171 closes ZKS-179
defi-wonderland · Aug 15, 2024 · 27cdd66 · 27cdd66
1 parent 31b80fb
commit 27cdd66
Show file tree

Hide file tree

Showing 24 changed files with 273 additions and 231 deletions.
diff --git a/src/components/BasicSelect.tsx b/src/components/BasicSelect.tsx
@@ -93,7 +93,7 @@ const MenuButton = styled(Button)(({ theme }) => {
     fontSize: '1rem',
     color: currentTheme.textPrimary,
     '&:hover': {
-      backgroundColor: currentTheme.backgroundSecondary,
+      backgroundColor: currentTheme.backgroundHover,
     },
     [theme.breakpoints.down('sm')]: {
       width: '100%',

diff --git a/src/components/Breadcrumb.tsx b/src/components/Breadcrumb.tsx
@@ -65,6 +65,9 @@ const BreadcrumbLink = styled(Link)(() => {
     textDecoration: 'none',
     fontSize: '0.875rem',
     lineHeight: '1.25rem',
+    '&:hover': {
+      textDecoration: 'underline',
+    },
   };
 });
 

diff --git a/src/components/ChainInformation.tsx b/src/components/ChainInformation.tsx
@@ -1,4 +1,4 @@
-import { Grid, Typography, styled, Box } from '@mui/material';
+import { Typography, styled, Box } from '@mui/material';
 import { useTranslation } from 'next-i18next';
 
 import { InfoBox } from '~/components';
@@ -70,7 +70,7 @@ export const ChainInformation = () => {
 
         <InfoBox
           title={t('CHAIN.CHAININFORMATION.totalBatchesExecuted')}
-          description={chainData?.batchesInfo.proved}
+          description={chainData?.batchesInfo.executed}
           darkIcon={BlockDark}
           lightIcon={BlockLight}
           size={22}
@@ -115,16 +115,6 @@ export const DataContainer = styled(Box)(({ theme: muiTheme }) => {
   };
 });
 
-export const GridContainer = styled(Grid)(() => {
-  const { currentTheme } = useCustomTheme();
-  return {
-    width: '100%',
-    borderRadius: 'inherit',
-    overflow: 'hidden',
-    border: currentTheme.border,
-  };
-});
-
 export const STitle = styled(Typography)(() => {
   return {
     fontSize: '1.5rem',

diff --git a/src/components/ChainTable.tsx b/src/components/ChainTable.tsx
@@ -48,7 +48,7 @@ export const ChainTable = ({ chains }: TableProps) => {
         <STableBody>
           {chains?.map((data, index) => {
             return (
-              <STableRow key={index} onClick={() => handleChainNavigation(data.chainId)}>
+              <STableBodyRow key={index} onClick={() => handleChainNavigation(data.chainId)}>
                 {/* Chain Name with Logo and Tags */}
                 <FirstCellWithLogo>
                   <ChainAvatar alt={`${data.chainName} logo`} src={data.iconUrl} />
@@ -69,7 +69,7 @@ export const ChainTable = ({ chains }: TableProps) => {
                 <STableCell sx={{ width: '10%' }}>{formatDataNumber(data.tvl, 0, true)}</STableCell>
 
                 <STableCell sx={{ width: '10%' }}>{data.chainType}</STableCell>
-              </STableRow>
+              </STableBodyRow>
             );
           })}
         </STableBody>
@@ -119,8 +119,21 @@ export const STableRow = styled(TableRow)(() => {
     '&:not(:last-child)': {
       border: currentTheme.border,
     },
+    transition: currentTheme.transition,
+  };
+});
+
+export const STableBodyRow = styled(TableRow)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
     cursor: 'pointer',
+    '&:not(:last-child)': {
+      border: currentTheme.border,
+    },
     transition: currentTheme.transition,
+    '&:hover': {
+      backgroundColor: currentTheme.backgroundHover,
+    },
   };
 });
 

diff --git a/src/components/DesktopTvlContainer.tsx b/src/components/DesktopTvlContainer.tsx
@@ -0,0 +1,64 @@
+import { Grid } from '@mui/material';
+import { useTranslation } from 'next-i18next';
+
+import { TvlData, TotalValueLockedProps } from '~/types';
+import { TvlContentBox, GridContainer, TvlContainer, OthersText, OthersBox } from '~/components';
+
+export const DesktopTvlContainer = ({ tvl }: TotalValueLockedProps) => {
+  const { t } = useTranslation();
+
+  const renderTvlContent = (
+    data: TvlData,
+    index: number,
+    height: string,
+    xs: number,
+    smallCard?: boolean,
+    isLast?: boolean,
+  ) => (
+    <Grid item xs={xs} key={index}>
+      <GridContainer imageUrl={data.imageUrl} height={height} smallCard={smallCard}>
+        <TvlContentBox
+          avatar={data.imageUrl}
+          token={data.symbol}
+          total={data.amountUsd}
+          tokenName={data.name}
+          isLast={isLast}
+        />
+      </GridContainer>
+    </Grid>
+  );
+
+  return (
+    <TvlContainer container spacing={0.5}>
+      {/* First item: full width */}
+      {renderTvlContent(tvl[0], 0, '12rem', 12)}
+
+      <Grid item container xs={12} spacing={0.5}>
+        {/* Second item: half width */}
+        {renderTvlContent(tvl[1], 1, '12rem', 6)}
+
+        <Grid item container xs={6} spacing={0.5}>
+          {/* Third and fourth items: one-third width each*/}
+          {tvl.slice(2, 4).map((data, index) => renderTvlContent(data, index + 2, '12rem', 4, true))}
+
+          <Grid item container xs={4} direction='column'>
+            {/* Fifth item: one-third width and half height */}
+            {renderTvlContent(tvl[4], 4, '5.85rem', 6, true)}
+
+            <Grid item container xs={6} spacing={0.5}>
+              {/* Sixth item: three-fourths width and halft height + others remaining width same height*/}
+              {renderTvlContent(tvl[5], 5, '5.85rem', 9, true, true)}
+              <Grid item xs={3}>
+                <GridContainer height='5.85rem'>
+                  <OthersBox>
+                    <OthersText>{t('HOME.LOCKEDASSETS.others')}</OthersText>
+                  </OthersBox>
+                </GridContainer>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </TvlContainer>
+  );
+};
diff --git a/src/components/MobileTvlContainer.tsx b/src/components/MobileTvlContainer.tsx
@@ -0,0 +1,63 @@
+import { Grid } from '@mui/material';
+import { useTranslation } from 'next-i18next';
+
+import { TvlData, TotalValueLockedProps } from '~/types';
+import { TvlContentBox, GridContainer, TvlContainer, OthersText, OthersBox } from '~/components';
+
+export const MobileTvlContainer = ({ tvl }: TotalValueLockedProps) => {
+  const { t } = useTranslation();
+
+  const renderTvlContent = (
+    data: TvlData,
+    index: number,
+    height: string,
+    xs: number,
+    smallCard?: boolean,
+    isLast?: boolean,
+  ) => (
+    <Grid item xs={xs} key={index}>
+      <GridContainer imageUrl={data.imageUrl} height={height} smallCard={smallCard}>
+        <TvlContentBox
+          avatar={data.imageUrl}
+          token={data.symbol}
+          total={data.amountUsd}
+          tokenName={data.name}
+          isLast={isLast}
+        />
+      </GridContainer>
+    </Grid>
+  );
+
+  return (
+    <TvlContainer container spacing={0.5}>
+      {/* First item: full width */}
+      {renderTvlContent(tvl[0], 0, '12rem', 12)}
+
+      {/* Second item: full width, half height */}
+      {renderTvlContent(tvl[1], 1, '6rem', 12)}
+
+      {/* Third and Fourth items: half width each */}
+      <Grid item container xs={12} spacing={0.5}>
+        {renderTvlContent(tvl[2], 2, '6rem', 6)}
+        {renderTvlContent(tvl[3], 3, '6rem', 6)}
+      </Grid>
+
+      {/* Fifth item: half width */}
+      <Grid item container xs={12} spacing={0.5}>
+        {renderTvlContent(tvl[4], 4, '5rem', 6, true, true)}
+
+        {/* Sixth item: two-thirds width +  others remaining */}
+        <Grid item container xs={6} spacing={0.5}>
+          {renderTvlContent(tvl[5], 5, '5rem', 9, true, true)}
+          <Grid item xs={3}>
+            <GridContainer height='5rem'>
+              <OthersBox>
+                <OthersText>{t('HOME.LOCKEDASSETS.others')}</OthersText>
+              </OthersBox>
+            </GridContainer>
+          </Grid>
+        </Grid>
+      </Grid>
+    </TvlContainer>
+  );
+};
diff --git a/src/components/TVL.tsx b/src/components/TVL.tsx
@@ -12,6 +12,7 @@ import {
   FirstCellWithLogo,
   TokenAvatar,
   STitle,
+  STableBodyRow,
   TableCellHeadFirst,
 } from '~/components';
 
@@ -34,16 +35,16 @@ export const TVL = () => {
 
           <STableBody>
             {tvl.map((token, index) => (
-              <STableRow key={index}>
+              <STableBodyRow key={index}>
                 <FirstCellWithLogo>
-                  <TokenAvatar alt={token.tokenName} src={token.imageUrl} />
+                  <TokenAvatar alt={token.name} src={token.imageUrl} />
                   <Typography>
-                    {token.tokenName} ({token.token})
+                    {token.name} ({token.symbol})
                   </Typography>
                 </FirstCellWithLogo>
                 <STableCell>${token.price.toLocaleString()}</STableCell>
-                <STableCell>${((token.total * token.price) / 1e18).toLocaleString()}</STableCell>
-              </STableRow>
+                <STableCell>${((token.amountUsd * token.price) / 1e18).toLocaleString()}</STableCell>
+              </STableBodyRow>
             ))}
           </STableBody>
         </Table>

diff --git a/src/components/Theme/theme.ts b/src/components/Theme/theme.ts
@@ -78,6 +78,7 @@ export const darkTheme: Theme = {
   backgroundPrimary: '#000000',
   backgroundSecondary: '#262B33',
   backgroundTertiary: 'rgba(17, 20, 26, 1)',
+  backgroundHover: 'rgba(61, 66, 77, 0.85)',
   titleFontFamily: 'Inter-Variable',
   textFontFamily: 'Inter-Variable',
   borderRadius: '1.5rem',
@@ -105,6 +106,7 @@ export const lightTheme: Theme = {
   backgroundPrimary: 'rgba(247, 249, 252, 1)',
   backgroundSecondary: 'rgba(232, 236, 242, 1)',
   backgroundTertiary: ' rgba(218, 221, 229, 1)',
+  backgroundHover: 'rgba(218, 221, 229, 1)',
   titleFontFamily: 'Inter-Variable',
   textFontFamily: 'Inter-Variable',
   borderRadius: '1.5rem',