feat: add translations

public/locales/en/common.json

@@ -1,5 +1,58 @@
 {
-    "HOME":{
-
+  "HOME": {
+    "title": "ZKsync Ecosystem",
+    "gasPrice": "Gas Price",
+    "transfer": "ERC-20 Transfer",
+    "lockedAssets": "Locked assets in shared bridge",
+    "DASHBOARD": {
+      "title": "Chain list",
+      "chain": "Chain",
+      "chainId": "Chain ID",
+      "nativeToken": "Native token",
+      "tvl": "TVL - L1",
+      "type": "Type",
+      "search": "Search by chain name or id..."
     }
-}
+  },
+  "CHAINPAGE": {
+    "website": "Website",
+    "explorer": "Explorer",
+    "launchDate": "Launch date",
+    "environment": "Environment",
+    "nativeToken": "Native token",
+    "CHAININFORMATION": {
+      "title": "Chain information",
+      "chainType": "Chain type",
+      "lastBlock": "Last block",
+      "lastBlockVerified": "Last block verified",
+      "transactionsPerSecond": "Transactions per second",
+      "totalBatchesCommitted": "Total batches committed",
+      "totalBatchesVerified": "Total batches verified",
+      "averageBlockTime": "Average block time"
+    },
+    "ZKCHAINTVL": {
+      "title": "ZKchain TVL"
+    },
+    "RPC": {
+      "title": "RPC",
+      "status": "Status"
+    },
+    "FEEPARAMS": {
+      "batch": "Batch Overhead L1 Gas",
+      "compute": "Compute Overhead Part",
+      "maxGasBatch": "Max Gas per Batch"
+    }
+  },
+  "FOOTER": {
+    "docs": "Documentation",
+    "github": "GitHub",
+    "madeWithLove": "Made with ❤️ by"
+  },
+  "DISCLAIMER": {
+    "disclaimer": "Disclaimer: This application is currently in beta. Please proceed at your own risk. Any funds lost through its use are non-recoverable."
+  },
+  "LOCALES": {
+    "en": "English",
+    "es": "Spanish"
+  }
+}

public/locales/es/common.json

@@ -0,0 +1,58 @@
+{
+  "HOME": {
+    "title": "Ecosistema ZKsync",
+    "gasPrice": "Precio del gas",
+    "transfer": "Transferencia ERC-20",
+    "lockedAssets": "Activos bloqueados en puente compartido",
+    "DASHBOARD": {
+      "title": "Lista de cadenas",
+      "chain": "Cadena",
+      "chainId": "ID de cadena",
+      "nativeToken": "Token nativo",
+      "tvl": "TVL - L1",
+      "type": "Tipo",
+      "search": "Buscar por nombre o ID de la cadena..."
+    }
+  },
+  "CHAINPAGE": {
+    "website": "Sitio web",
+    "explorer": "Explorador",
+    "launchDate": "Fecha de lanzamiento",
+    "environment": "Entorno",
+    "nativeToken": "Token nativo",
+    "CHAININFORMATION": {
+      "title": "Información de la cadena",
+      "chainType": "Tipo de cadena",
+      "lastBlock": "Último bloque",
+      "lastBlockVerified": "Último bloque verificado",
+      "transactionsPerSecond": "Transacciones por segundo",
+      "totalBatchesCommitted": "Total de lotes comprometidos",
+      "totalBatchesVerified": "Total de lotes verificados",
+      "averageBlockTime": "Tiempo promedio de bloque"
+    },
+    "ZKCHAINTVL": {
+      "title": "TVL de ZKchain"
+    },
+    "RPC": {
+      "title": "RPC",
+      "status": "Estado"
+    },
+    "FEEPARAMS": {
+      "batch": "Sobrecarga de lote L1 Gas",
+      "compute": "Parte de sobrecarga de cómputo",
+      "maxGasBatch": "Máximo gas por lote"
+    }
+  },
+  "FOOTER": {
+    "docs": "Documentación",
+    "github": "GitHub",
+    "madeWithLove": "Hecho con ❤️ por"
+  },
+  "DISCLAIMER": {
+    "disclaimer": "Advertencia: Esta aplicación está actualmente en beta. Por favor, proceda bajo su propio riesgo. Cualquier fondo perdido a través de su uso no es recuperable."
+  },
+  "LOCALES": {
+    "en": "Inglés",
+    "es": "Español"
+  }
+}

src/components/Disclaimer.tsx

@@ -1,14 +1,14 @@
 import { styled, Box, Typography } from '@mui/material';
+import { useTranslation } from 'next-i18next';
 
 import { DISCLAIMER_HEIGHT } from '~/utils';
 
 export const Disclaimer = () => {
+  const { t } = useTranslation();
+
   return (
     <Container>
-      <Typography variant='h1'>
-        Disclaimer: This application is currently in beta. Please proceed at your own risk. Any funds lost through its
-        use are non-recoverable.
-      </Typography>
+      <Typography variant='h1'>{t('DISCLAIMER.disclaimer')}</Typography>
     </Container>
   );
 };

src/components/SearchBar.tsx

@@ -1,7 +1,11 @@
+import { useTranslation } from 'next-i18next';
+
 export const SearchBar = () => {
+  const { t } = useTranslation();
+
   return (
     <form>
-      <input type='text' placeholder='Search...' />
+      <input type='text' placeholder={t('HOME.DASHBOARD.search')} />
     </form>
   );
 };

src/components/Table.tsx

@@ -1,15 +1,19 @@
+import { useTranslation } from 'next-i18next';
+
 import { useData } from '~/hooks';
 
 export const Table = () => {
+  const { t } = useTranslation();
   const { ecosystemData } = useData();
+
   return (
     <table>
       <tr>
-        <th>Chain</th>
-        <th>Chain ID</th>
-        <th>Native token</th>
-        <th>TVL - L1</th>
-        <th>Type</th>
+        <th>{t('HOME.DASHBOARD.chain')}</th>
+        <th>{t('HOME.DASHBOARD.chainId')}</th>
+        <th>{t('HOME.DASHBOARD.nativeToken')}</th>
+        <th>{t('HOME.DASHBOARD.tvl')}</th>
+        <th>{t('HOME.DASHBOARD.type')}</th>
       </tr>
 
       {ecosystemData?.chains.map((data, index) => {

src/components/TitleBanner.tsx

@@ -1,9 +1,14 @@
+import { useTranslation } from 'next-i18next';
+
 export const TitleBanner = () => {
+  const { t } = useTranslation();
+
   return (
     <div>
-      <span>zkSync Ecosystem</span>
+      <span>{t('HOME.title')}</span>
+
       <div>
-        <span>Gas Price: 10 wei · ERC-20 Transfer: $10</span>
+        <span>{`${t('HOME.gasPrice')}: 10 wei ${t('HOME.transfer')} $10`}</span>
       </div>
     </div>
   );

src/containers/Dashboard/index.tsx

@@ -1,10 +1,14 @@
+import { useTranslation } from 'next-i18next';
+
 import { SearchBar, Table, Title } from '~/components';
 
 export const Dashboard = () => {
+  const { t } = useTranslation();
+
   return (
     <section>
       <header>
-        <Title title='Chain list' />
+        <Title title={t('HOME.DASHBOARD.title')} />
         <SearchBar />
       </header>
       <Table />

src/containers/Footer/index.tsx

@@ -1,14 +1,17 @@
+import { useTranslation } from 'next-i18next';
 import { styled } from '@mui/material/styles';
-import { useCustomTheme } from '~/hooks/useContext/useTheme';
 
+import { useCustomTheme } from '~/hooks';
 import { FOOTER_HEIGHT } from '~/utils';
 
 export const Footer = () => {
+  const { t } = useTranslation();
+
   return (
     <FooterContainer>
       <h1>Footer</h1>
       <Subtitle>
-        <p>Made with 💜 by</p>
+        <p>{t('FOOTER.madeWithLove')}</p>
         <a href='https://defi.sucks'>Wonderland</a>
       </Subtitle>
     </FooterContainer>

src/containers/LockedAssets/index.tsx

@@ -1,14 +1,17 @@
+import { useTranslation } from 'next-i18next';
+
 import { TotalValueLocked, Title } from '~/components';
 import { useData } from '~/hooks';
 
 export const LockedAssets = () => {
+  const { t } = useTranslation();
   const { ecosystemData } = useData();
 
   return (
     <section>
       {ecosystemData && (
         <>
-          <Title title={`Locked assets in shared bridge: ${ecosystemData.total}`} />
+          <Title title={`${t('HOME.lockedAssets')}: ${ecosystemData.total}`} />
           <TotalValueLocked tvl={ecosystemData.tvl} />
         </>
       )}