From a7d40077028cd7d1da5871b532bb58cdfd709830 Mon Sep 17 00:00:00 2001 From: titix Date: Fri, 19 Jul 2024 17:18:04 -0300 Subject: [PATCH] feat: chain page details --- public/locales/en/common.json | 5 +- public/locales/es/common.json | 5 +- src/components/InfoBox.tsx | 13 ++ src/components/index.ts | 1 + src/config/constants.ts | 3 +- .../ChainDetail/ChainDescription.tsx | 30 +++++ .../ChainDetail/ChainInformation.tsx | 3 + src/containers/ChainDetail/index.tsx | 11 ++ src/containers/index.ts | 1 + src/data/chainMockData.json | 112 +++++++++--------- src/pages/[chain]/index.tsx | 37 ++++-- src/types/Config.ts | 4 +- 12 files changed, 149 insertions(+), 76 deletions(-) create mode 100644 src/components/InfoBox.tsx create mode 100644 src/containers/ChainDetail/ChainDescription.tsx create mode 100644 src/containers/ChainDetail/ChainInformation.tsx create mode 100644 src/containers/ChainDetail/index.tsx 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 {}