feat: chain page navigation

public/locales/en/common.json

@@ -38,6 +38,7 @@
       "status": "Status"
     },
     "FEEPARAMS": {
+      "title": "Fee params",
       "batch": "Batch Overhead L1 Gas",
       "compute": "Compute Overhead Part",
       "maxGasBatch": "Max Gas per Batch"

public/locales/es/common.json

@@ -38,6 +38,7 @@
       "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"

src/containers/ChainDetail/ChainDescription.tsx

@@ -1,21 +1,38 @@
 import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
 import { InfoBox } from '~/components';
 import { useData } from '~/hooks';
 
 export const ChainDescription = () => {
   const { t } = useTranslation();
-  const { chainData } = useData();
+  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> */}
-          <button>{chainData?.name}</button>
-          <span></span>
+          <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>{t('CHAIN.backButton')}</button>
+        <button onClick={handleBack}>{t('CHAIN.backButton')}</button>
       </div>
 
       <div>

src/containers/ChainDetail/ChainInformation.tsx

@@ -1,3 +1,15 @@
+import { useTranslation } from 'next-i18next';
+import { InfoCard } from './InfoCard';
+
 export const ChainInformation = () => {
-  return <div>ChainInformation</div>;
+  const { t } = useTranslation();
+
+  return (
+    <section>
+      <InfoCard title={t('CHAIN.CHAININFORMATION.title')} />
+      <InfoCard title={t('CHAIN.ZKCHAINTVL.title')} />
+      <InfoCard title={t('CHAIN.RPC.title')} />
+      <InfoCard title={t('CHAIN.FEEPARAMS.title')} />
+    </section>
+  );
 };

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/Header/index.tsx

@@ -3,6 +3,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 { useCustomTheme } from '~/hooks/useContext/useTheme';
 import { zIndex, HEADER_HEIGHT } from '~/utils';
@@ -12,7 +13,9 @@ export const Header = () => {
 
   return (
     <StyledHeader>
-      <Logo>Logo</Logo>
+      <Link href='/' passHref>
+        <Logo>Logo</Logo>
+      </Link>
       <SIconButton onClick={changeTheme}>{theme === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}</SIconButton>
       <ConnectButton />
     </StyledHeader>