From ac9389af7e32879064ab0b12e4152e82b9684055 Mon Sep 17 00:00:00 2001
From: titix <titi@defi.sucks>
Date: Mon, 22 Jul 2024 10:48:56 -0300
Subject: [PATCH] feat: chain page navigation

---
 public/locales/en/common.json                 |  1 +
 public/locales/es/common.json                 |  1 +
 .../ChainDetail/ChainDescription.tsx          | 25 ++++++++++++++++---
 .../ChainDetail/ChainInformation.tsx          | 14 ++++++++++-
 src/containers/ChainDetail/InfoCard.tsx       | 16 ++++++++++++
 src/containers/Header/index.tsx               |  5 +++-
 6 files changed, 56 insertions(+), 6 deletions(-)
 create mode 100644 src/containers/ChainDetail/InfoCard.tsx

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index d1f945b..a2f9f01 100644
--- a/public/locales/en/common.json
+++ b/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"
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index 74cddc5..b18e01f 100644
--- a/public/locales/es/common.json
+++ b/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"
diff --git a/src/containers/ChainDetail/ChainDescription.tsx b/src/containers/ChainDetail/ChainDescription.tsx
index a305066..34e3ebb 100644
--- a/src/containers/ChainDetail/ChainDescription.tsx
+++ b/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>
diff --git a/src/containers/ChainDetail/ChainInformation.tsx b/src/containers/ChainDetail/ChainInformation.tsx
index af5bd34..53df2dc 100644
--- a/src/containers/ChainDetail/ChainInformation.tsx
+++ b/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>
+  );
 };
diff --git a/src/containers/ChainDetail/InfoCard.tsx b/src/containers/ChainDetail/InfoCard.tsx
new file mode 100644
index 0000000..1a455cf
--- /dev/null
+++ 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/Header/index.tsx b/src/containers/Header/index.tsx
index 6afb5cd..ed8ad8b 100644
--- a/src/containers/Header/index.tsx
+++ b/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>