feat: basic architecture (#1)

closes ZKS-104 Description: - Create a DataProvider that will handle all requests
defi-wonderland · Jul 16, 2024 · 1c3d621 · 1c3d621
2 parents a504371 + 7ab5a8d
commit 1c3d621
Show file tree

Hide file tree

Showing 26 changed files with 368 additions and 28 deletions.
diff --git a/.env.example b/.env.example
@@ -1,3 +1,4 @@
+NEXT_PUBLIC_API_URL= # Example: https://api.example.com
 NEXT_PUBLIC_RPC_URL= # Example: https://localhost:8545
 NEXT_PUBLIC_PROJECT_ID= # ProjectID from WalletConnect
 NEXT_PUBLIC_ALCHEMY_KEY= # API key from Alchemy 
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -22,6 +22,7 @@ jobs:
           echo "NEXT_PUBLIC_RPC_URL=${{ secrets.NEXT_PUBLIC_RPC_URL }}" >> .env
           echo "NEXT_PUBLIC_PROJECT_ID=${{ secrets.NEXT_PUBLIC_PROJECT_ID }}" >> .env
           echo "NEXT_PUBLIC_ALCHEMY_KEY=${{ secrets.NEXT_PUBLIC_ALCHEMY_KEY }}" >> .env
+          echo "NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}" >> .env
 
       - name: run Cypress and Jest
         uses: cypress-io/github-action@v6

diff --git a/src/components/CustomHead.tsx b/src/components/CustomHead.tsx
@@ -0,0 +1,18 @@
+import Head from 'next/head';
+
+interface MetadataProps {
+  title: string;
+  description?: string;
+  image?: string;
+  type?: string;
+}
+
+export const CustomHead = ({ title }: MetadataProps) => {
+  return (
+    <Head>
+      <title>{`${title} - ZKchainHub`}</title>
+      <meta property='og:title' content={`${title} - ZKchainHub`} />
+      <meta name='twitter:title' content={`${title} - ZKchainHub`} />
+    </Head>
+  );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,2 +1,3 @@
 export * from './Theme';
 export * from './Disclaimer';
+export * from './CustomHead';
diff --git a/src/config/env.ts b/src/config/env.ts
@@ -4,10 +4,12 @@ export const getEnv = (): Env => {
   const NEXT_PUBLIC_RPC_URL = process.env.NEXT_PUBLIC_RPC_URL;
   const NEXT_PUBLIC_PROJECT_ID = process.env.NEXT_PUBLIC_PROJECT_ID;
   const NEXT_PUBLIC_ALCHEMY_KEY = process.env.NEXT_PUBLIC_ALCHEMY_KEY;
+  const NEXT_PUBLIC_API_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
 
   return {
     RPC_URL: NEXT_PUBLIC_RPC_URL as string,
     PROJECT_ID: NEXT_PUBLIC_PROJECT_ID as string,
     ALCHEMY_KEY: NEXT_PUBLIC_ALCHEMY_KEY as string,
+    API_URL: NEXT_PUBLIC_API_URL as string,
   };
 };
diff --git a/src/containers/Footer/index.tsx b/src/containers/Footer/index.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles';
-import { useCustomTheme } from '~/hooks/useTheme';
+import { useCustomTheme } from '~/hooks/useContext/useTheme';
 
 import { FOOTER_HEIGHT } from '~/utils';
 

diff --git a/src/containers/Header/index.tsx b/src/containers/Header/index.tsx
@@ -4,7 +4,7 @@ import { IconButton } from '@mui/material';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 
-import { useCustomTheme } from '~/hooks/useTheme';
+import { useCustomTheme } from '~/hooks/useContext/useTheme';
 import { zIndex, HEADER_HEIGHT } from '~/utils';
 
 export const Header = () => {

diff --git a/src/data/chainMockData.json b/src/data/chainMockData.json
@@ -0,0 +1,60 @@
+[
+  {
+    "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"
+      }
+    },
+    "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/data/ecosystemMockData.json b/src/data/ecosystemMockData.json
@@ -0,0 +1,91 @@
+{
+  "chains": [
+    {
+      "name": "zkSync Era",
+      "id": 324,
+      "nativeToken": "ETH",
+      "tvl": 1000000,
+      "type": "ZKRollup"
+    },
+    {
+      "name": "Teva Chain",
+      "id": 100,
+      "nativeToken": "ETH",
+      "tvl": 1000000,
+      "type": "ZKRollup"
+    },
+    {
+      "name": "Cronos zkEVM",
+      "id": 101,
+      "nativeToken": "ETH",
+      "tvl": 1000000,
+      "type": "Validium"
+    },
+    {
+      "name": "GRVT",
+      "id": 102,
+      "nativeToken": "ETH",
+      "tvl": 1000000,
+      "type": "Validium"
+    },
+    {
+      "name": "Lens",
+      "id": 103,
+      "nativeToken": "ETH",
+      "tvl": 1000000,
+      "type": "Validium"
+    },
+    {
+      "name": "ZKChain 104",
+      "id": 104,
+      "nativeToken": "ETH",
+      "tvl": 1000000,
+      "type": "ZKRollup"
+    },
+    {
+      "name": "ZKChain 105",
+      "id": 105,
+      "nativeToken": "ETH",
+      "tvl": 1000000,
+      "type": "Validium"
+    }
+  ],
+  "tvl": [
+    {
+      "token": "ETH",
+      "value": 557596566
+    },
+    {
+      "token": "USDC",
+      "value": 90091851
+    },
+    {
+      "token": "KOI",
+      "value": 32757850
+    },
+    {
+      "token": "USDT",
+      "value": 18021853
+    },
+    {
+      "token": "WBTC",
+      "value": 12620248
+    },
+    {
+      "token": "wstETH",
+      "value": 3552439
+    },
+    {
+      "token": "MUTE",
+      "value": 2071481
+    },
+    {
+      "token": "rETH",
+      "value": 1404096
+    },
+    {
+      "token": "DAI",
+      "value": 1080375
+    }
+  ]
+}
diff --git a/src/hooks/ScrollToTop.tsx b/src/hooks/ScrollToTop.tsx
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1,2 +1 @@
-export * from './ScrollToTop';
-export * from './useStateContext';
+export * from './useContext';
diff --git a/src/hooks/useContext/index.ts b/src/hooks/useContext/index.ts
@@ -0,0 +1 @@
+export * from './useStateContext';
diff --git a/src/hooks/useContext/useData.tsx b/src/hooks/useContext/useData.tsx
@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+
+import { DataContext } from '~/providers/DataProvider';
+
+export const useData = () => {
+  const context = useContext(DataContext);
+
+  if (context === undefined) {
+    throw new Error('useData must be used within a StateProvider');
+  }
+
+  return context;
+};
diff --git a/src/hooks/useStateContext.tsx → src/hooks/useContext/useStateContext.tsx b/src/hooks/useStateContext.tsx → src/hooks/useContext/useStateContext.tsx
diff --git a/src/hooks/useTheme.tsx → src/hooks/useContext/useTheme.tsx b/src/hooks/useTheme.tsx → src/hooks/useContext/useTheme.tsx
diff --git a/src/pages/[chain]/index.tsx b/src/pages/[chain]/index.tsx
@@ -0,0 +1,14 @@
+import { CustomHead } from '~/components';
+
+const Chain = () => {
+  const title = 'Chain placeholder';
+
+  return (
+    <>
+      <CustomHead title={title} />
+      {/* TODO: Add chain page containers */}
+    </>
+  );
+};
+
+export default Chain;
diff --git a/src/pages/error.tsx b/src/pages/error.tsx
@@ -0,0 +1,5 @@
+const ErrorPage = () => {
+  return <div>Sorry, something went wrong.</div>;
+};
+
+export default ErrorPage;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -2,15 +2,15 @@ import Head from 'next/head';
 
 import { Landing } from '~/containers';
 
-const Home = () => {
+const Ecosystem = () => {
   return (
     <>
       <Head>
-        <title>Web3 Boilerplate</title>
+        <title>ZKchainHub</title>
       </Head>
       <Landing />
     </>
   );
 };
 
-export default Home;
+export default Ecosystem;
diff --git a/src/providers/DataProvider.tsx b/src/providers/DataProvider.tsx
@@ -0,0 +1,71 @@
+import { createContext, useState, useEffect, ReactNode } from 'react';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+
+import { ChainData, EcosystemData } from '~/types';
+import { fetchEcosystemData, fetchChainData } from '~/utils';
+
+type ContextType = {
+  selectedChain?: ChainData;
+  setSelectedChain: (val: ChainData) => void;
+
+  isEcosystemLoading: boolean;
+  isChainLoading: boolean;
+  refetchChainData: (options: { throwOnError: boolean; cancelRefetch: boolean }) => Promise<UseQueryResult>;
+
+  ecosystemData: EcosystemData;
+  chainData: ChainData;
+};
+
+interface DataProps {
+  children: ReactNode;
+}
+
+export const DataContext = createContext({} as ContextType);
+
+export const DataProvider = ({ children }: DataProps) => {
+  const [selectedChain, setSelectedChain] = useState<ChainData>();
+  const router = useRouter();
+
+  const {
+    isLoading: isEcosystemLoading,
+    data: ecosystemData,
+    isError: isEcosystemError,
+  } = useQuery({
+    queryKey: ['ecosystem'],
+    queryFn: fetchEcosystemData,
+  });
+
+  const {
+    isLoading: isChainLoading,
+    data: chainData,
+    isError: isChainError,
+    refetch: refetchChainData,
+  } = useQuery({
+    queryKey: ['chainData', selectedChain?.chainId],
+    queryFn: () => fetchChainData(selectedChain!.chainId!),
+    enabled: !!selectedChain?.chainId,
+  });
+
+  useEffect(() => {
+    if (isEcosystemError || isChainError) {
+      router.push('/error');
+    }
+  }, [isEcosystemError, isChainError, router]);
+
+  return (
+    <DataContext.Provider
+      value={{
+        selectedChain,
+        setSelectedChain,
+        isEcosystemLoading,
+        isChainLoading,
+        ecosystemData,
+        chainData,
+        refetchChainData,
+      }}
+    >
+      {children}
+    </DataContext.Provider>
+  );
+};
diff --git a/src/providers/index.tsx b/src/providers/index.tsx
@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import { StateProvider } from './StateProvider';
 import { ThemeProvider } from './ThemeProvider';
 import { WalletProvider } from './WalletProvider';
+import { DataProvider } from './DataProvider';
 
 type Props = {
   children: ReactNode;
@@ -12,7 +13,9 @@ export const Providers = ({ children }: Props) => {
   return (
     <ThemeProvider>
       <StateProvider>
-        <WalletProvider>{children}</WalletProvider>
+        <WalletProvider>
+          <DataProvider>{children}</DataProvider>
+        </WalletProvider>
       </StateProvider>
     </ThemeProvider>
   );

diff --git a/src/types/Config.ts b/src/types/Config.ts
@@ -2,6 +2,7 @@ export interface Env {
   RPC_URL: string;
   PROJECT_ID: string;
   ALCHEMY_KEY: string;
+  API_URL: string;
 }
 
 export interface Constants {