feat: chain table

public/locales/en/common.json

@@ -10,10 +10,12 @@
       "chain": "Chain",
       "chainId": "Chain ID",
       "nativeToken": "Native token",
-      "tvl": "TVL - L1",
+      "tvl": "TVL (L1)",
       "type": "Type",
-      "search": "Search",
-      "notFound": "Chain not found"
+      "search": "Search (Chain)",
+      "notFound": "Chain not found",
+      "noRPC": "No RPC",
+      "noMetadata": "No Metadata"
     }
   },
   "CHAIN": {

public/locales/es/common.json

@@ -10,10 +10,12 @@
       "chain": "Cadena",
       "chainId": "ID de cadena",
       "nativeToken": "Token nativo",
-      "tvl": "TVL - L1",
+      "tvl": "TVL (L1)",
       "type": "Tipo",
-      "search": "Buscar",
-      "notFound": "Cadena no encontrada"
+      "search": "Buscar (Cadena)",
+      "notFound": "Cadena no encontrada",
+      "noRPC": "Sin RPC",
+      "noMetadata": "Sin Metadata"
     }
   },
   "CHAIN": {

src/components/InfoTag.tsx

@@ -0,0 +1,44 @@
+import { styled, Box, Typography } from '@mui/material';
+import Image from 'next/image';
+
+import { useCustomTheme } from '~/hooks';
+import informationIconDark from '~/assets/icons/infoDark.svg';
+import informationIconLight from '~/assets/icons/infoLight.svg';
+
+interface InfoTagProps {
+  information: string;
+}
+
+export const InfoTag = ({ information }: InfoTagProps) => {
+  const { theme } = useCustomTheme();
+  return (
+    <InfoTagContainer>
+      <Image src={theme === 'dark' ? informationIconDark : informationIconLight} alt={information} />
+      <InfoText>{information}</InfoText>
+    </InfoTagContainer>
+  );
+};
+
+const InfoTagContainer = styled(Box)(() => {
+  const { currentTheme } = useCustomTheme();
+
+  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,
+  };
+});
+
+const InfoText = styled(Typography)(() => {
+  const { currentTheme } = useCustomTheme();
+
+  return {
+    fontSize: '0.7rem',
+    color: currentTheme.warningText,
+  };
+});

src/components/Table.tsx

@@ -1,14 +1,27 @@
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
+import {
+  styled,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+  Typography,
+  Avatar,
+} from '@mui/material';
 
 import { EcosystemChainData } from '~/types';
 import { formatDataNumber } from '~/utils';
+import { useCustomTheme } from '~/hooks';
+import { InfoTag } from './InfoTag';
 
 interface TableProps {
   chains: EcosystemChainData[];
 }
 
-export const Table = ({ chains }: TableProps) => {
+export const DataTable = ({ chains }: TableProps) => {
   const { t } = useTranslation();
   const router = useRouter();
 
@@ -17,26 +30,131 @@ export const Table = ({ chains }: TableProps) => {
   };
 
   return (
-    <table>
-      <tr>
-        <th>{t('HOME.DASHBOARD.chain')}</th>
-        <th>{t('HOME.DASHBOARD.chainId')}</th>
-        <th>{t('HOME.DASHBOARD.nativeToken')}</th>
-        <th>{t('HOME.DASHBOARD.tvl')}</th>
-        <th>{t('HOME.DASHBOARD.type')}</th>
-      </tr>
-
-      {chains?.map((data, index) => {
-        return (
-          <tr key={index} onClick={() => handleChainNavigation(data.id)}>
-            <td>{data.name}</td>
-            <td>{data.id}</td>
-            <td>{data.nativeToken}</td>
-            <td>{formatDataNumber(data.tvl, 0, true)}</td>
-            <td>{data.type}</td>
-          </tr>
-        );
-      })}
-    </table>
+    <STableContainer>
+      <Table>
+        {/* Table titles */}
+        <STableHead>
+          <STableRow>
+            <STableCellHead sx={{ width: '60%' }}>{t('HOME.DASHBOARD.chain')}</STableCellHead>
+            <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>
+            <STableCellHead sx={{ width: '10%' }}>{t('HOME.DASHBOARD.type')}</STableCellHead>
+          </STableRow>
+        </STableHead>
+
+        {/* Table data */}
+        <STableBody>
+          {chains?.map((data, index) => {
+            return (
+              <STableRow key={index} onClick={() => handleChainNavigation(data.chainId)}>
+                {/* Chain Name with Logo and Tags */}
+                <LogoCell sx={{ width: '60%' }}>
+                  <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>
+
+                <STableCell sx={{ width: '10%' }}>{data.chainId}</STableCell>
+
+                <LogoCell sx={{ width: '10%' }}>
+                  <TokenAvatar alt={`${data.nativeToken} logo`} src={data.tokenImgUrl} />
+                  <Typography>{data.nativeToken}</Typography>
+                </LogoCell>
+
+                <STableCell sx={{ width: '10%' }}>{formatDataNumber(data.tvl, 0, true)}</STableCell>
+
+                <STableCell sx={{ width: '10%' }}>{data.chainType}</STableCell>
+              </STableRow>
+            );
+          })}
+        </STableBody>
+      </Table>
+    </STableContainer>
   );
 };
+
+const STableContainer = styled(TableContainer)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    width: '75rem',
+    borderRadius: currentTheme.borderRadius,
+    border: currentTheme.border,
+    overflow: 'hidden',
+  };
+});
+
+const STableHead = styled(TableHead)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    backgroundColor: currentTheme.backgroundTertiary,
+    color: currentTheme.textSecondary,
+    '&:not(:last-child)': {
+      borderBottom: currentTheme.border,
+    },
+  };
+});
+
+const STableBody = styled(TableBody)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    backgroundColor: currentTheme.backgroundSecondary,
+    border: currentTheme.border,
+  };
+});
+
+const STableRow = styled(TableRow)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    '&:not(:last-child)': {
+      border: currentTheme.border,
+    },
+    cursor: 'pointer',
+    transition: currentTheme.transition,
+  };
+});
+
+const STableCellHead = styled(TableCell)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    color: currentTheme.textSecondary,
+    textAlign: 'left',
+  };
+});
+
+const STableCell = styled(TableCell)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    color: currentTheme.textPrimary,
+    textAlign: 'left',
+  };
+});
+
+const LogoCell = styled(TableCell)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    color: currentTheme.textPrimary,
+    display: 'flex',
+    alignItems: 'center',
+    gap: currentTheme.gap,
+    border: 'none',
+    textAlign: 'left',
+  };
+});
+
+const ChainAvatar = styled(Avatar)(() => {
+  return {
+    width: '2rem',
+    height: '2rem',
+  };
+});
+
+const TokenAvatar = styled(Avatar)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    width: '1.5rem',
+    height: '1.5rem',
+    backgroundColor: currentTheme.emptyBackground,
+  };
+});