diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 5451f12..d1f945b 100644
--- a/public/locales/en/common.json
+++ b/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",
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index 6c8e324..74cddc5 100644
--- a/public/locales/es/common.json
+++ b/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",
diff --git a/src/components/InfoBox.tsx b/src/components/InfoBox.tsx
new file mode 100644
index 0000000..948385f
--- /dev/null
+++ b/src/components/InfoBox.tsx
@@ -0,0 +1,13 @@
+interface InfoBoxProps {
+ title: string;
+ description: string;
+}
+
+export const InfoBox = ({ title, description }: InfoBoxProps) => {
+ return (
+
+
{title}
+
{description}
+
+ );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index e2912ee..5d2e1c8 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -6,3 +6,4 @@ export * from './SearchBar';
export * from './TotalValueLocked';
export * from './Title';
export * from './TitleBanner';
+export * from './InfoBox';
diff --git a/src/config/constants.ts b/src/config/constants.ts
index d2f469a..42d7405 100644
--- a/src/config/constants.ts
+++ b/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 => {
diff --git a/src/containers/ChainDetail/ChainDescription.tsx b/src/containers/ChainDetail/ChainDescription.tsx
new file mode 100644
index 0000000..a305066
--- /dev/null
+++ b/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 (
+
+
+
+ {/*
*/}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/containers/ChainDetail/ChainInformation.tsx b/src/containers/ChainDetail/ChainInformation.tsx
new file mode 100644
index 0000000..af5bd34
--- /dev/null
+++ b/src/containers/ChainDetail/ChainInformation.tsx
@@ -0,0 +1,3 @@
+export const ChainInformation = () => {
+ return ChainInformation
;
+};
diff --git a/src/containers/ChainDetail/index.tsx b/src/containers/ChainDetail/index.tsx
new file mode 100644
index 0000000..f995ba2
--- /dev/null
+++ b/src/containers/ChainDetail/index.tsx
@@ -0,0 +1,11 @@
+import { ChainDescription } from './ChainDescription';
+import { ChainInformation } from './ChainInformation';
+
+export const ChainDetail = () => {
+ return (
+
+
+
+
+ );
+};
diff --git a/src/containers/index.ts b/src/containers/index.ts
index ac2a1af..0698472 100644
--- a/src/containers/index.ts
+++ b/src/containers/index.ts
@@ -4,3 +4,4 @@ export * from './Layout';
export * from './Landing';
export * from './Dashboard';
export * from './LockedAssets';
+export * from './ChainDetail';
diff --git a/src/data/chainMockData.json b/src/data/chainMockData.json
index 767de09..222e25d 100644
--- a/src/data/chainMockData.json
+++ b/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
}
-]
+}
diff --git a/src/pages/[chain]/index.tsx b/src/pages/[chain]/index.tsx
index 34eed58..c5b142c 100644
--- a/src/pages/[chain]/index.tsx
+++ b/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) => {
+ const { setSelectedChainId, refetchChainData } = useData();
useEffect(() => {
- setSelectedChainId(chain.id);
- }, [chain.id, setSelectedChainId]);
+ setSelectedChainId(chain?.id);
+ refetchChainData({ throwOnError: true, cancelRefetch: false });
+ }, [chain?.id, setSelectedChainId, refetchChainData]);
return (
<>
-
- {chain.name}
- {/* TODO: Add chain page containers */}
+
+
>
);
};
@@ -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 = 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,
},
};
};
diff --git a/src/types/Config.ts b/src/types/Config.ts
index 3bd98b1..6073f2e 100644
--- a/src/types/Config.ts
+++ b/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 {}