feat: chain page details

public/locales/en/common.json

@@ -14,7 +14,7 @@
       "search": "Search by chain name or id..."
     }
   },
-  "CHAINPAGE": {
+  "CHAIN": {
     "website": "Website",
     "explorer": "Explorer",
     "launchDate": "Launch date",
@@ -41,7 +41,8 @@
       "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

@@ -14,7 +14,7 @@
       "search": "Buscar por nombre o ID de la cadena..."
     }
   },
-  "CHAINPAGE": {
+  "CHAIN": {
     "website": "Sitio web",
     "explorer": "Explorador",
     "launchDate": "Fecha de lanzamiento",
@@ -41,7 +41,8 @@
       "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/InfoBox.tsx

@@ -0,0 +1,13 @@
+interface InfoBoxProps {
+  title: string;
+  description: string;
+}
+
+export const InfoBox = ({ title, description }: InfoBoxProps) => {
+  return (
+    <div>
+      <p>{title}</p>
+      <p>{description}</p>
+    </div>
+  );
+};

src/components/index.ts

@@ -6,3 +6,4 @@ export * from './SearchBar';
 export * from './TotalValueLocked';
 export * from './Title';
 export * from './TitleBanner';
+export * from './InfoBox';

src/config/constants.ts

@@ -1,7 +1,8 @@
 import { Constants } from '~/types';
 
 const constants: Constants = {
-  // Put your project constants here
+  SUPPORTED_LANGUAGES: ['en', 'es'],
+  DEFAULT_LANG: 'en',
 };
 
 export const getConstants = (): Constants => {

src/containers/ChainDetail/ChainDescription.tsx

@@ -0,0 +1,30 @@
+import { useTranslation } from 'next-i18next';
+import { InfoBox } from '~/components';
+import { useData } from '~/hooks';
+
+export const ChainDescription = () => {
+  const { t } = useTranslation();
+  const { chainData } = useData();
+
+  return (
+    <div>
+      <div>
+        <div>
+          {/* <img></img> */}
+          <button>{chainData?.name}</button>
+          <span></span>
+        </div>
+
+        <button>{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>
+  );
+};

src/containers/ChainDetail/ChainInformation.tsx

@@ -0,0 +1,3 @@
+export const ChainInformation = () => {
+  return <div>ChainInformation</div>;
+};

src/containers/ChainDetail/index.tsx

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

src/containers/index.ts

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

src/data/chainMockData.json

@@ -1,60 +1,58 @@
-[
-  {
-    "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,
-    "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"
-      }
+{
+  "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,
+  "tvl": {
+    "ETH": {
+      "value": 500000000,
+      "address": "0x79db...d692"
     },
-    "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
+    "USDT": {
+      "value": 100000000,
+      "address": "0x79db...d692"
+    },
+    "USDC": {
+      "value": 50000000,
+      "address": "0x79db...d692"
+    },
+    "WBTC": {
+      "value": 30000000,
+      "address": "0x79db...d692"
+    }
+  },
+  "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
   }
-]
+}

src/pages/[chain]/index.tsx

@@ -1,27 +1,32 @@
 import { useEffect } from 'react';
-import { GetStaticPaths, GetStaticProps } from 'next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { GetStaticProps, GetStaticPaths, GetStaticPropsContext, InferGetStaticPropsType } from 'next';
 
 import { EcosystemChainData } from '~/types';
 import { CustomHead } from '~/components';
 import { useData } from '~/hooks';
 import { fetchEcosystemData } from '~/utils';
+import { ChainDetail } from '~/containers';
+import { getConfig } from '~/config';
+
+const { DEFAULT_LANG, SUPPORTED_LANGUAGES } = getConfig();
 
 interface ChainProps {
   chain: EcosystemChainData;
 }
 
-const Chain = ({ chain }: ChainProps) => {
-  const { setSelectedChainId } = useData();
+const Chain = ({ chain }: InferGetStaticPropsType<typeof getStaticProps>) => {
+  const { setSelectedChainId, refetchChainData } = useData();
 
   useEffect(() => {
-    setSelectedChainId(chain.id);
-  }, [chain.id, setSelectedChainId]);
+    setSelectedChainId(chain?.id);
+    refetchChainData({ throwOnError: true, cancelRefetch: false });
+  }, [chain?.id, setSelectedChainId, refetchChainData]);
 
   return (
     <>
-      <CustomHead title={chain.name} />
-      <h1>{chain.name}</h1>
-      {/* TODO: Add chain page containers */}
+      <CustomHead title={chain?.name} />
+      <ChainDetail />
     </>
   );
 };
@@ -30,14 +35,17 @@ export const getStaticPaths: GetStaticPaths = async () => {
   const ecosystemData = await fetchEcosystemData();
   const chains = ecosystemData.chains;
 
-  const paths = chains.map((chain: EcosystemChainData) => ({
-    params: { chain: chain.id.toString() },
-  }));
+  const paths = SUPPORTED_LANGUAGES.flatMap((locale) =>
+    chains.map((chain: EcosystemChainData) => ({
+      params: { chain: chain.id.toString() },
+      locale,
+    })),
+  );
 
-  return { paths, fallback: false };
+  return { paths, fallback: true };
 };
 
-export const getStaticProps: GetStaticProps = async ({ params }) => {
+export const getStaticProps: GetStaticProps<ChainProps> = async ({ params, locale }: GetStaticPropsContext) => {
   const ecosystemData = await fetchEcosystemData();
   const chains = ecosystemData.chains;
   const chainId = parseInt(params?.chain as string);
@@ -47,9 +55,12 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
     return { notFound: true };
   }
 
+  const i18Config = await serverSideTranslations(locale || DEFAULT_LANG, ['common'], null, SUPPORTED_LANGUAGES);
+
   return {
     props: {
       chain,
+      ...i18Config,
     },
   };
 };

src/types/Config.ts

@@ -5,8 +5,10 @@ export interface Env {
   API_URL: string;
 }
 
+export type SupportedLanguage = 'en' | 'es';
 export interface Constants {
-  // ...
+  SUPPORTED_LANGUAGES: SupportedLanguage[];
+  DEFAULT_LANG: SupportedLanguage;
 }
 
 export interface Config extends Env, Constants {}