feat: chain description data

public/locales/en/common.json

@@ -27,10 +27,11 @@
       "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": {

public/locales/es/common.json

@@ -27,10 +27,11 @@
       "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": {

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

@@ -1,6 +1,6 @@
 interface InfoBoxProps {
   title: string;
-  description: string;
+  description: string | number;
 }
 
 export const InfoBox = ({ title, description }: InfoBoxProps) => {

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/index.ts

@@ -7,3 +7,7 @@ export * from './TotalValueLocked';
 export * from './Title';
 export * from './TitleBanner';
 export * from './InfoBox';
+export * from './FeeParams';
+export * from './RPC';
+export * from './TVL';
+export * from './ChainInformation';

src/containers/ChainDetail/ChainDescription.tsx

@@ -1,47 +1,12 @@
-import { useTranslation } from 'next-i18next';
-import { useRouter } from 'next/router';
-import { InfoBox } from '~/components';
-import { useData } from '~/hooks';
+import { ChainInformation, FeeParams, RPC, TVL } from '~/components';
 
 export const ChainDescription = () => {
-  const { t } = useTranslation();
-  const { chainData, ecosystemData } = useData();
-  const router = useRouter();
-
-  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={chainData?.chainId || ''}>
-            {ecosystemData?.chains.map((chain) => (
-              <option key={chain.id} value={chain.id}>
-                {chain.name}
-              </option>
-            ))}
-          </select>
-          <span>{chainData?.chainId}</span>
-        </div>
-
-        <button onClick={handleBack}>{t('CHAIN.backButton')}</button>
-      </div>
-
-      <div>
-        <InfoBox title={t('CHAIN.website')} description={chainData?.website} />
-        <InfoBox title={t('CHAIN.explorer')} description={chainData?.explorer} />
-        <InfoBox title={t('CHAIN.launchDate')} description={chainData?.launchDate} />
-        <InfoBox title={t('CHAIN.environment')} description={chainData?.environment} />
-        <InfoBox title={t('CHAIN.nativeToken')} description={chainData?.nativeToken} />
-      </div>
-    </div>
+    <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/index.tsx

@@ -1,11 +1,11 @@
+import { ChainMetadata } from './ChainMetadata';
 import { ChainDescription } from './ChainDescription';
-import { ChainInformation } from './ChainInformation';
 
 export const ChainDetail = () => {
   return (
     <div>
+      <ChainMetadata />
       <ChainDescription />
-      <ChainInformation />
     </div>
   );
 };

src/data/chainMockData.json

@@ -1,58 +1,49 @@
 {
-  "name": "ZKSync Era",
-  "chainId": 324,
-  "website": "https://example.com",
-  "explorer": "https://example.com",
-  "launchDate": "2023-12-05",
-  "environment": "Production",
-  "nativeToken": "ETH",
-  "chainType": "ZKRollup",
-  "lastBlock": 123456789,
-  "lastBlockVerified": 123456788,
-  "transactionsPerSecond": 15,
-  "totalBatchesCommitted": 1234567890,
-  "totalBatchesExecuted": 1234567890,
-  "totalBatchesVerified": 123456788,
-  "averageBlockTime": 100000,
+  "chainType": "Rollup",
   "tvl": {
-    "ETH": {
-      "value": 500000000,
-      "address": "0x79db...d692"
-    },
-    "USDT": {
-      "value": 100000000,
-      "address": "0x79db...d692"
-    },
-    "USDC": {
-      "value": 50000000,
-      "address": "0x79db...d692"
-    },
-    "WBTC": {
-      "value": 30000000,
-      "address": "0x79db...d692"
-    }
+    "ETH": 1000000,
+    "USDC": 500000
+  },
+  "batchesInfo": {
+    "commited": 100,
+    "verified": 90,
+    "proved": 80
   },
-  "rpcs": [
-    {
-      "status": "Active",
-      "url": "https://lrpc.com"
-    },
-    {
-      "status": "Active",
-      "url": "https://blastapi.com"
-    },
-    {
-      "status": "Inactive",
-      "url": "https://llamarpc.com"
-    },
-    {
-      "status": "Active",
-      "url": "https://alchemy.com"
-    }
-  ],
   "feeParams": {
-    "batchOverheadL1Gas": 1234567890,
-    "computeOverheadPart": 1234567890,
-    "maxGasPerBatch": 123456788
+    "batchOverheadL1Gas": 50000,
+    "maxPubdataPerBatch": 120000,
+    "maxL2GasPerBatch": 10000000,
+    "priorityTxMaxPubdata": 15000,
+    "minimalL2GasPrice": 0.25
+  },
+  "metadata": {
+    "iconUrl": "https://s2.coinmarketcap.com/static/img/coins/64x64/24091.png",
+    "chainName": "ZKsyncERA",
+    "chainId": "324",
+    "publicRpcs": [
+      {
+        "url": "https://mainnet.era.zksync.io",
+        "status": true
+      },
+      {
+        "url": "https://1rpc.io/zksync2-era",
+        "status": true
+      },
+      {
+        "url": "https://zksync.drpc.org",
+        "status": false
+      }
+    ],
+    "websiteUrl": "https://zksync.io/",
+    "explorerUrl": "https://explorer.zksync.io/",
+    "launchDate": 1679626800,
+    "environment": "mainnet",
+    "nativeToken": "ETH"
+  },
+  "l2ChainInfo": {
+    "tps": 10000000,
+    "avgBlockTime": 12,
+    "lastBlock": 1000000,
+    "lastBlockVerified": 999999
   }
-}
+}