From 31b80fb61543ae5d2e6edffade442a7da7b1bcb2 Mon Sep 17 00:00:00 2001
From: TITI <162849030+0xtiti@users.noreply.github.com>
Date: Thu, 15 Aug 2024 10:11:53 -0300
Subject: [PATCH] feat: mobile table (#22)

closes ZKS-140
---
 src/components/ChainTable.tsx | 87 +++++++++++++++++++++++++++++++----
 src/components/InfoTag.tsx    | 17 +++++--
 src/components/TVL.tsx        | 10 ++--
 3 files changed, 98 insertions(+), 16 deletions(-)

diff --git a/src/components/ChainTable.tsx b/src/components/ChainTable.tsx
index c99fbfa..bba8b20 100644
--- a/src/components/ChainTable.tsx
+++ b/src/components/ChainTable.tsx
@@ -10,6 +10,7 @@ import {
   TableBody,
   Typography,
   Avatar,
+  Box,
 } from '@mui/material';
 
 import { EcosystemChainData } from '~/types';
@@ -35,7 +36,7 @@ export const ChainTable = ({ chains }: TableProps) => {
         {/* Table titles */}
         <STableHead>
           <STableRow>
-            <STableCellHead sx={{ width: '60%' }}>{t('HOME.DASHBOARD.chain')}</STableCellHead>
+            <TableCellHeadFirst sx={{ width: '60%' }}>{t('HOME.DASHBOARD.chain')}</TableCellHeadFirst>
             <STableCellHead sx={{ width: '10%' }}>{t('HOME.DASHBOARD.chainId')}</STableCellHead>
             <STableCellHead sx={{ width: '10%' }}>{t('HOME.DASHBOARD.nativeToken')}</STableCellHead>
             <STableCellHead sx={{ width: '10%' }}>{t('HOME.DASHBOARD.tvl')}</STableCellHead>
@@ -49,12 +50,14 @@ export const ChainTable = ({ chains }: TableProps) => {
             return (
               <STableRow key={index} onClick={() => handleChainNavigation(data.chainId)}>
                 {/* Chain Name with Logo and Tags */}
-                <LogoCell sx={{ width: '60%' }}>
+                <FirstCellWithLogo>
                   <ChainAvatar alt={`${data.chainName} logo`} src={data.iconUrl} />
-                  <Typography>{data.chainName}</Typography>
-                  {!data.rpc && <InfoTag information={t('HOME.DASHBOARD.noRPC')} />}
-                  {!data.metadata && <InfoTag information={t('HOME.DASHBOARD.noMetadata')} />}
-                </LogoCell>
+                  <ChainName>{data.chainName}</ChainName>
+                  <InfoTagsContainer>
+                    {!data.rpc && <InfoTag information={t('HOME.DASHBOARD.noRPC')} />}
+                    {!data.metadata && <InfoTag information={t('HOME.DASHBOARD.noMetadata')} />}
+                  </InfoTagsContainer>
+                </FirstCellWithLogo>
 
                 <STableCell sx={{ width: '10%' }}>{data.chainId}</STableCell>
 
@@ -81,7 +84,16 @@ export const STableContainer = styled(TableContainer)(() => {
     width: '100%',
     borderRadius: currentTheme.borderRadius,
     border: currentTheme.border,
-    overflow: 'hidden',
+    overflow: 'auto',
+
+    // Hide scrollbar for WebKit browsers
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+
+    // Hide scrollbar for Firefox
+    scrollbarWidth: 'none',
+    '-ms-overflow-style': 'none', // Hide scrollbar for Internet Explorer and Edge
   };
 });
 
@@ -121,12 +133,46 @@ export const STableCellHead = styled(TableCell)(() => {
   };
 });
 
-export const STableCell = styled(TableCell)(() => {
+export const TableCellHeadFirst = styled(TableCell)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    color: currentTheme.textSecondary,
+    textAlign: 'left',
+    borderBottom: 'none',
+    position: 'sticky',
+    left: 0,
+    zIndex: 1,
+    backgroundColor: currentTheme.backgroundTertiary,
+  };
+});
+
+export const STableCell = styled(TableCell)(({ theme }) => {
   const { currentTheme } = useCustomTheme();
   return {
     color: currentTheme.textPrimary,
     textAlign: 'left',
     border: 'none',
+    fontSize: '1rem',
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '0.875rem',
+    },
+  };
+});
+
+export const FirstCellWithLogo = styled(TableCell)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    color: currentTheme.textPrimary,
+    display: 'flex',
+    alignItems: 'center',
+    gap: currentTheme.gap,
+    border: 'none',
+    textAlign: 'left',
+    position: 'sticky',
+    left: 0,
+    backgroundColor: currentTheme.backgroundSecondary,
+    zIndex: 1,
+    minWidth: 'max-content',
   };
 });
 
@@ -157,3 +203,28 @@ export const TokenAvatar = styled(Avatar)(() => {
     backgroundColor: currentTheme.emptyBackground,
   };
 });
+
+export const ChainName = styled(Typography)(({ theme }) => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    fontSize: '1rem',
+    color: currentTheme.textPrimary,
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '0.875rem',
+    },
+  };
+});
+
+export const InfoTagsContainer = styled(Box)(({ theme }) => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    fontSize: '1rem',
+    color: currentTheme.textPrimary,
+    display: 'flex',
+    gap: currentTheme.gap,
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '0.875rem',
+      display: 'grid',
+    },
+  };
+});
diff --git a/src/components/InfoTag.tsx b/src/components/InfoTag.tsx
index 1d81fd3..bad4f65 100644
--- a/src/components/InfoTag.tsx
+++ b/src/components/InfoTag.tsx
@@ -13,7 +13,7 @@ export const InfoTag = ({ information }: InfoTagProps) => {
   const { theme } = useCustomTheme();
   return (
     <InfoTagContainer>
-      <Image src={theme === 'dark' ? informationIconDark : informationIconLight} alt={information} />
+      <InfoIcon src={theme === 'dark' ? informationIconDark : informationIconLight} alt={information} />
       <InfoText>{information}</InfoText>
     </InfoTagContainer>
   );
@@ -25,20 +25,31 @@ const InfoTagContainer = styled(Box)(() => {
   return {
     display: 'flex',
     alignItems: 'center',
-    fontSize: '0.7rem',
     gap: currentTheme.gap,
     backgroundColor: currentTheme.warningBackground,
     borderRadius: currentTheme.borderRadius,
     padding: '0.1rem 0.5rem 0.1rem 0.1rem',
     border: currentTheme.warningBorder,
+    width: 'max-content',
   };
 });
 
-const InfoText = styled(Typography)(() => {
+const InfoText = styled(Typography)(({ theme }) => {
   const { currentTheme } = useCustomTheme();
 
   return {
     fontSize: '0.7rem',
     color: currentTheme.warningText,
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '0.5rem',
+    },
+  };
+});
+
+const InfoIcon = styled(Image)(({ theme }) => {
+  return {
+    [theme.breakpoints.down('sm')]: {
+      width: '1rem',
+    },
   };
 });
diff --git a/src/components/TVL.tsx b/src/components/TVL.tsx
index 52286f7..a25c542 100644
--- a/src/components/TVL.tsx
+++ b/src/components/TVL.tsx
@@ -9,9 +9,10 @@ import {
   STableCellHead,
   STableCell,
   STableBody,
-  LogoCell,
+  FirstCellWithLogo,
   TokenAvatar,
   STitle,
+  TableCellHeadFirst,
 } from '~/components';
 
 export const TVL = () => {
@@ -25,7 +26,7 @@ export const TVL = () => {
         <Table>
           <STableHead>
             <STableRow>
-              <STableCellHead>{t('CHAIN.TVL.chain')}</STableCellHead>
+              <TableCellHeadFirst>{t('CHAIN.TVL.chain')}</TableCellHeadFirst>
               <STableCellHead>{t('CHAIN.TVL.price')}</STableCellHead>
               <STableCellHead>{t('CHAIN.TVL.tvl')}</STableCellHead>
             </STableRow>
@@ -34,13 +35,12 @@ export const TVL = () => {
           <STableBody>
             {tvl.map((token, index) => (
               <STableRow key={index}>
-                <LogoCell>
+                <FirstCellWithLogo>
                   <TokenAvatar alt={token.tokenName} src={token.imageUrl} />
                   <Typography>
                     {token.tokenName} ({token.token})
                   </Typography>
-                </LogoCell>
-
+                </FirstCellWithLogo>
                 <STableCell>${token.price.toLocaleString()}</STableCell>
                 <STableCell>${((token.total * token.price) / 1e18).toLocaleString()}</STableCell>
               </STableRow>