From 285c55bd9cdc27c6679002ad229f8d341c277b6d Mon Sep 17 00:00:00 2001 From: titix Date: Mon, 15 Jul 2024 18:16:24 -0300 Subject: [PATCH 1/3] feat: chain routes --- src/pages/[chain]/index.tsx | 49 +++++++++++++++++++++++++++++++--- src/providers/DataProvider.tsx | 16 +++++------ src/types/Data.ts | 20 +++++++------- 3 files changed, 65 insertions(+), 20 deletions(-) diff --git a/src/pages/[chain]/index.tsx b/src/pages/[chain]/index.tsx index a472e99..3e96de9 100644 --- a/src/pages/[chain]/index.tsx +++ b/src/pages/[chain]/index.tsx @@ -1,14 +1,57 @@ +import { GetStaticPaths, GetStaticProps } from 'next'; +import { useEffect } from 'react'; + +import { ecosystemChainData } from '~/types'; import { CustomHead } from '~/components'; +import { useData } from '~/hooks/useContext/useData'; +import { fetchEcosystemData } from '~/utils'; + +interface ChainProps { + chain: ecosystemChainData; +} + +const Chain = ({ chain }: ChainProps) => { + const { setSelectedChainId } = useData(); -const Chain = () => { - const title = 'Chain placeholder'; + useEffect(() => { + setSelectedChainId(chain.id); + }, [chain.id, setSelectedChainId]); return ( <> - + +

{chain.name}

{/* TODO: Add chain page containers */} ); }; +export const getStaticPaths: GetStaticPaths = async () => { + const ecosystemData = await fetchEcosystemData(); + const chains = ecosystemData.chains; + + const paths = chains.map((chain: ecosystemChainData) => ({ + params: { chain: chain.id.toString() }, + })); + + return { paths, fallback: false }; +}; + +export const getStaticProps: GetStaticProps = async ({ params }) => { + const ecosystemData = await fetchEcosystemData(); + const chains = ecosystemData.chains; + const chainId = parseInt(params?.chain as string); + const chain = chains.find((chain: ecosystemChainData) => chain.id === chainId); + + if (!chain) { + return { notFound: true }; + } + + return { + props: { + chain, + }, + }; +}; + export default Chain; diff --git a/src/providers/DataProvider.tsx b/src/providers/DataProvider.tsx index f8d02a3..5dc964e 100644 --- a/src/providers/DataProvider.tsx +++ b/src/providers/DataProvider.tsx @@ -6,8 +6,8 @@ import { ChainData, EcosystemData } from '~/types'; import { fetchEcosystemData, fetchChainData } from '~/utils'; type ContextType = { - selectedChain?: ChainData; - setSelectedChain: (val: ChainData) => void; + selectedChainId?: number; + setSelectedChainId: (val: number) => void; isEcosystemLoading: boolean; isChainLoading: boolean; @@ -24,7 +24,7 @@ interface DataProps { export const DataContext = createContext({} as ContextType); export const DataProvider = ({ children }: DataProps) => { - const [selectedChain, setSelectedChain] = useState(); + const [selectedChainId, setSelectedChainId] = useState(); const router = useRouter(); const { @@ -42,9 +42,9 @@ export const DataProvider = ({ children }: DataProps) => { isError: isChainError, refetch: refetchChainData, } = useQuery({ - queryKey: ['chainData', selectedChain?.chainId], - queryFn: () => fetchChainData(selectedChain!.chainId!), - enabled: !!selectedChain?.chainId, + queryKey: ['chainData', selectedChainId], + queryFn: () => fetchChainData(selectedChainId!), + enabled: !!selectedChainId, }); useEffect(() => { @@ -56,8 +56,8 @@ export const DataProvider = ({ children }: DataProps) => { return ( Date: Mon, 15 Jul 2024 18:21:19 -0300 Subject: [PATCH 2/3] style: type name --- src/pages/[chain]/index.tsx | 8 ++++---- src/types/Data.ts | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/[chain]/index.tsx b/src/pages/[chain]/index.tsx index 3e96de9..a6c83cd 100644 --- a/src/pages/[chain]/index.tsx +++ b/src/pages/[chain]/index.tsx @@ -1,13 +1,13 @@ import { GetStaticPaths, GetStaticProps } from 'next'; import { useEffect } from 'react'; -import { ecosystemChainData } from '~/types'; +import { EcosystemChainData } from '~/types'; import { CustomHead } from '~/components'; import { useData } from '~/hooks/useContext/useData'; import { fetchEcosystemData } from '~/utils'; interface ChainProps { - chain: ecosystemChainData; + chain: EcosystemChainData; } const Chain = ({ chain }: ChainProps) => { @@ -30,7 +30,7 @@ export const getStaticPaths: GetStaticPaths = async () => { const ecosystemData = await fetchEcosystemData(); const chains = ecosystemData.chains; - const paths = chains.map((chain: ecosystemChainData) => ({ + const paths = chains.map((chain: EcosystemChainData) => ({ params: { chain: chain.id.toString() }, })); @@ -41,7 +41,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => { const ecosystemData = await fetchEcosystemData(); const chains = ecosystemData.chains; const chainId = parseInt(params?.chain as string); - const chain = chains.find((chain: ecosystemChainData) => chain.id === chainId); + const chain = chains.find((chain: EcosystemChainData) => chain.id === chainId); if (!chain) { return { notFound: true }; diff --git a/src/types/Data.ts b/src/types/Data.ts index 7b0b4ee..d18071e 100644 --- a/src/types/Data.ts +++ b/src/types/Data.ts @@ -31,7 +31,7 @@ export interface ChainData { }; } -export interface ecosystemChainData { +export interface EcosystemChainData { name: string; id: number; nativeToken: string; @@ -42,7 +42,7 @@ export interface ecosystemChainData { } export interface EcosystemData { - chains: ecosystemChainData[]; + chains: EcosystemChainData[]; tvl: { [token: string]: number; }[]; From 35621eb60d08952d5d77dce65e7cf5d430424c3f Mon Sep 17 00:00:00 2001 From: titix Date: Tue, 16 Jul 2024 09:39:13 -0300 Subject: [PATCH 3/3] style: imports --- src/hooks/useContext/index.ts | 2 ++ src/pages/[chain]/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/hooks/useContext/index.ts b/src/hooks/useContext/index.ts index 92f170c..c570b64 100644 --- a/src/hooks/useContext/index.ts +++ b/src/hooks/useContext/index.ts @@ -1 +1,3 @@ export * from './useStateContext'; +export * from './useData'; +export * from './useTheme'; diff --git a/src/pages/[chain]/index.tsx b/src/pages/[chain]/index.tsx index a6c83cd..34eed58 100644 --- a/src/pages/[chain]/index.tsx +++ b/src/pages/[chain]/index.tsx @@ -1,9 +1,9 @@ -import { GetStaticPaths, GetStaticProps } from 'next'; import { useEffect } from 'react'; +import { GetStaticPaths, GetStaticProps } from 'next'; import { EcosystemChainData } from '~/types'; import { CustomHead } from '~/components'; -import { useData } from '~/hooks/useContext/useData'; +import { useData } from '~/hooks'; import { fetchEcosystemData } from '~/utils'; interface ChainProps {