feat: chain routes

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 (
     <>
-      <CustomHead title={title} />
+      <CustomHead title={chain.name} />
+      <h1>{chain.name}</h1>
       {/* 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;

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<ChainData>();
+  const [selectedChainId, setSelectedChainId] = useState<number>();
   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 (
     <DataContext.Provider
       value={{
-        selectedChain,
-        setSelectedChain,
+        selectedChainId,
+        setSelectedChainId,
         isEcosystemLoading,
         isChainLoading,
         ecosystemData,

src/types/Data.ts

@@ -31,16 +31,18 @@ export interface ChainData {
   };
 }
 
-export interface EcosystemData {
-  chain: {
-    name: string;
-    id: number;
-    nativeToken: string;
-    tvl: {
-      [token: string]: number;
-    };
-    type: string;
+export interface EcosystemChainData {
+  name: string;
+  id: number;
+  nativeToken: string;
+  tvl: {
+    [token: string]: number;
   };
+  type: string;
+}
+
+export interface EcosystemData {
+  chains: EcosystemChainData[];
   tvl: {
     [token: string]: number;
   }[];