feat: chain page details (#9)

closes ZKS-103 closes ZKS-114 closes ZKS-116 closes ZKS-117 closes ZKS-113 Description: - Add chain page details HTML structure - Add dashboard chain navigation FYI: Currently using mock data so all chains show data from chain id: 324. Since ecosystemData mock has all available chains, chain page change is shown in route but rendered data is just 324 temporary.
defi-wonderland · Jul 31, 2024 · afe3915 · afe3915
1 parent 443e50d
commit afe3915
Show file tree

Hide file tree

Showing 20 changed files with 326 additions and 97 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -15,7 +15,7 @@
       "notFound": "Chain not found"
     }
   },
-  "CHAINPAGE": {
+  "CHAIN": {
     "website": "Website",
     "explorer": "Explorer",
     "launchDate": "Launch date",
@@ -28,21 +28,24 @@
       "lastBlockVerified": "Last block verified",
       "transactionsPerSecond": "Transactions per second",
       "totalBatchesCommitted": "Total batches committed",
+      "totalBatchesExecuted": "Total batches executed",
       "totalBatchesVerified": "Total batches verified",
       "averageBlockTime": "Average block time"
     },
-    "ZKCHAINTVL": {
+    "TVL": {
       "title": "ZKchain TVL"
     },
     "RPC": {
       "title": "RPC",
       "status": "Status"
     },
     "FEEPARAMS": {
+      "title": "Fee params",
       "batch": "Batch Overhead L1 Gas",
       "compute": "Compute Overhead Part",
       "maxGasBatch": "Max Gas per Batch"
-    }
+    },
+    "backButton": "Go back"
   },
   "FOOTER": {
     "docs": "Documentation",

diff --git a/public/locales/es/common.json b/public/locales/es/common.json
@@ -15,7 +15,7 @@
       "notFound": "Cadena no encontrada"
     }
   },
-  "CHAINPAGE": {
+  "CHAIN": {
     "website": "Sitio web",
     "explorer": "Explorador",
     "launchDate": "Fecha de lanzamiento",
@@ -28,21 +28,24 @@
       "lastBlockVerified": "Último bloque verificado",
       "transactionsPerSecond": "Transacciones por segundo",
       "totalBatchesCommitted": "Total de lotes comprometidos",
+      "totalBatchesExecuted": "Total de lotes ejecutados",
       "totalBatchesVerified": "Total de lotes verificados",
       "averageBlockTime": "Tiempo promedio de bloque"
     },
-    "ZKCHAINTVL": {
+    "TVL": {
       "title": "TVL de ZKchain"
     },
     "RPC": {
       "title": "RPC",
       "status": "Estado"
     },
     "FEEPARAMS": {
+      "title": "Parámetros de gas",
       "batch": "Sobrecarga de lote L1 Gas",
       "compute": "Parte de sobrecarga de cómputo",
       "maxGasBatch": "Máximo gas por lote"
-    }
+    },
+    "backButton": "Volver"
   },
   "FOOTER": {
     "docs": "Documentación",

diff --git a/src/components/ChainInformation.tsx b/src/components/ChainInformation.tsx
@@ -0,0 +1,36 @@
+import { useTranslation } from 'next-i18next';
+import { InfoBox, Title } from '~/components';
+import { useData } from '~/hooks';
+
+export const ChainInformation = () => {
+  const { t } = useTranslation();
+  const { chainData } = useData();
+
+  return (
+    <article>
+      <Title title={t('CHAIN.CHAININFORMATION.title')} />
+      <div>
+        <InfoBox title={t('CHAIN.CHAININFORMATION.chainType')} description={chainData?.chainType} />
+        <InfoBox title={t('CHAIN.CHAININFORMATION.lastBlock')} description={chainData?.l2ChainInfo.lastBlock} />
+        <InfoBox
+          title={t('CHAIN.CHAININFORMATION.lastBlockVerified')}
+          description={chainData?.l2ChainInfo.lastBlockVerified}
+        />
+        <InfoBox title={t('CHAIN.CHAININFORMATION.transactionsPerSecond')} description={chainData?.l2ChainInfo.tps} />
+        <InfoBox
+          title={t('CHAIN.CHAININFORMATION.totalBatchesCommitted')}
+          description={chainData?.batchesInfo.commited}
+        />
+        <InfoBox title={t('CHAIN.CHAININFORMATION.totalBatchesExecuted')} description={chainData?.batchesInfo.proved} />
+        <InfoBox
+          title={t('CHAIN.CHAININFORMATION.totalBatchesVerified')}
+          description={chainData?.batchesInfo.verified}
+        />
+        <InfoBox
+          title={t('CHAIN.CHAININFORMATION.averageBlockTime')}
+          description={chainData?.l2ChainInfo.avgBlockTime}
+        />
+      </div>
+    </article>
+  );
+};
diff --git a/src/components/FeeParams.tsx b/src/components/FeeParams.tsx
@@ -0,0 +1,19 @@
+import { useTranslation } from 'next-i18next';
+import { InfoBox, Title } from '~/components';
+import { useData } from '~/hooks';
+
+export const FeeParams = () => {
+  const { t } = useTranslation();
+  const { chainData } = useData();
+
+  return (
+    <article>
+      <Title title={t('CHAIN.FEEPARAMS.title')} />
+      <div>
+        <InfoBox title={t('CHAIN.FEEPARAMS.batch')} description={chainData?.feeParams.batchOverheadL1Gas} />
+        <InfoBox title={t('CHAIN.FEEPARAMS.compute')} description={chainData?.feeParams.maxPubdataPerBatch} />
+        <InfoBox title={t('CHAIN.FEEPARAMS.maxGasBatch')} description={chainData?.feeParams.maxL2GasPerBatch} />
+      </div>
+    </article>
+  );
+};
diff --git a/src/components/InfoBox.tsx b/src/components/InfoBox.tsx
@@ -0,0 +1,13 @@
+interface InfoBoxProps {
+  title: string;
+  description: string | number;
+}
+
+export const InfoBox = ({ title, description }: InfoBoxProps) => {
+  return (
+    <div>
+      <p>{title}</p>
+      <p>{description}</p>
+    </div>
+  );
+};
diff --git a/src/components/RPC.tsx b/src/components/RPC.tsx
@@ -0,0 +1,22 @@
+import { useTranslation } from 'next-i18next';
+import { InfoBox, Title } from '~/components';
+import { useData } from '~/hooks';
+
+export const TVL = () => {
+  const { t } = useTranslation();
+  const { chainData } = useData();
+
+  return (
+    <article>
+      <Title title={t('CHAIN.RPC.title')} />
+      <div>
+        {chainData?.metadata?.publicRpcs &&
+          chainData.metadata.publicRpcs.map((rpc, index) => (
+            <div key={index}>
+              <InfoBox title={t('CHAIN.RPC.status')} description={rpc.url} />
+            </div>
+          ))}
+      </div>
+    </article>
+  );
+};
diff --git a/src/components/TVL.tsx b/src/components/TVL.tsx
@@ -0,0 +1,20 @@
+import { useTranslation } from 'next-i18next';
+import { InfoBox, Title } from '~/components';
+import { useData } from '~/hooks';
+
+export const RPC = () => {
+  const { t } = useTranslation();
+  const { chainData } = useData();
+
+  return (
+    <article>
+      <Title title={t('CHAIN.TVL.title')} />
+      <div>
+        {chainData?.tvl &&
+          Object.entries(chainData.tvl).map(([token, value]) => (
+            <InfoBox key={token} title={token} description={value.toString()} />
+          ))}
+      </div>
+    </article>
+  );
+};
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
 
 import { EcosystemChainData } from '~/types';
 import { formatDataNumber } from '~/utils';
@@ -9,6 +10,11 @@ interface TableProps {
 
 export const Table = ({ chains }: TableProps) => {
   const { t } = useTranslation();
+  const router = useRouter();
+
+  const handleChainNavigation = (id: number) => {
+    router.push(`/${id}`);
+  };
 
   return (
     <table>
@@ -22,7 +28,7 @@ export const Table = ({ chains }: TableProps) => {
 
       {chains?.map((data, index) => {
         return (
-          <tr key={index}>
+          <tr key={index} onClick={() => handleChainNavigation(data.id)}>
             <td>{data.name}</td>
             <td>{data.id}</td>
             <td>{data.nativeToken}</td>

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -6,5 +6,10 @@ export * from './SearchBar';
 export * from './TotalValueLocked';
 export * from './Title';
 export * from './TitleBanner';
+export * from './InfoBox';
+export * from './FeeParams';
+export * from './RPC';
+export * from './TVL';
+export * from './ChainInformation';
 export * from './BasicSelect';
 export * from './NotFound';
diff --git a/src/containers/ChainDetail/ChainDescription.tsx b/src/containers/ChainDetail/ChainDescription.tsx
@@ -0,0 +1,12 @@
+import { ChainInformation, FeeParams, RPC, TVL } from '~/components';
+
+export const ChainDescription = () => {
+  return (
+    <section>
+      <ChainInformation />
+      <TVL />
+      <RPC />
+      <FeeParams />
+    </section>
+  );
+};
diff --git a/src/containers/ChainDetail/ChainMetadata.tsx b/src/containers/ChainDetail/ChainMetadata.tsx
@@ -0,0 +1,49 @@
+import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
+import { InfoBox } from '~/components';
+import { useData } from '~/hooks';
+import { formatTimestampToDate } from '~/utils';
+
+export const ChainMetadata = () => {
+  const { t } = useTranslation();
+  const { chainData, ecosystemData } = useData();
+  const router = useRouter();
+  const data = chainData?.metadata;
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedChainId = event.target.value;
+    router.push(`/${selectedChainId}`);
+  };
+
+  const handleBack = () => {
+    router.back();
+  };
+
+  return (
+    <div>
+      <div>
+        <div>
+          {/* <img></img> */}
+          <select onChange={handleChange} value={data?.chainName || ''}>
+            {ecosystemData?.chains.map((chain) => (
+              <option key={chain.id} value={chain.id}>
+                {chain.name}
+              </option>
+            ))}
+          </select>
+          <span>{data?.chainId}</span>
+        </div>
+
+        <button onClick={handleBack}>{t('CHAIN.backButton')}</button>
+      </div>
+
+      <div>
+        <InfoBox title={t('CHAIN.website')} description={data?.websiteUrl} />
+        <InfoBox title={t('CHAIN.explorer')} description={data?.explorerUrl} />
+        <InfoBox title={t('CHAIN.launchDate')} description={formatTimestampToDate(data?.launchDate)} />
+        <InfoBox title={t('CHAIN.environment')} description={data?.environment} />
+        <InfoBox title={t('CHAIN.nativeToken')} description={data?.nativeToken} />
+      </div>
+    </div>
+  );
+};
diff --git a/src/containers/ChainDetail/InfoCard.tsx b/src/containers/ChainDetail/InfoCard.tsx
@@ -0,0 +1,16 @@
+import { InfoBox } from '~/components';
+
+interface InfoCardProps {
+  title: string;
+}
+
+export const InfoCard = ({ title }: InfoCardProps) => {
+  return (
+    <section>
+      <h2>{title}</h2>
+      <div>
+        <InfoBox title='Website' description='https://www.example.com' />
+      </div>
+    </section>
+  );
+};
diff --git a/src/containers/ChainDetail/index.tsx b/src/containers/ChainDetail/index.tsx
@@ -0,0 +1,11 @@
+import { ChainMetadata } from './ChainMetadata';
+import { ChainDescription } from './ChainDescription';
+
+export const ChainDetail = () => {
+  return (
+    <div>
+      <ChainMetadata />
+      <ChainDescription />
+    </div>
+  );
+};
diff --git a/src/containers/Header/index.tsx b/src/containers/Header/index.tsx
@@ -2,6 +2,7 @@ import { styled } from '@mui/material/styles';
 import { IconButton } from '@mui/material';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 
@@ -30,7 +31,9 @@ export const Header = () => {
 
   return (
     <StyledHeader>
-      <Logo>ZKchainHub</Logo>
+      <Link href='/' passHref>
+        <Logo>ZKchainHub</Logo>
+      </Link>
       <SIconButton onClick={changeTheme}>{theme === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}</SIconButton>
       <BasicSelect value={t(`LOCALES.${language}`)} setValue={handleChangeLanguage} list={Object.values(localesMap)} />
     </StyledHeader>

diff --git a/src/containers/index.ts b/src/containers/index.ts
@@ -4,3 +4,4 @@ export * from './Layout';
 export * from './Landing';
 export * from './Dashboard';
 export * from './LockedAssets';
+export * from './ChainDetail';