feat: chain page details

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",

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",

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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>

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';

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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>

src/containers/index.ts

@@ -4,3 +4,4 @@ export * from './Layout';
 export * from './Landing';
 export * from './Dashboard';
 export * from './LockedAssets';
+export * from './ChainDetail';