feat: basic architecture

defi-wonderland · Jul 12, 2024 · df0c98e · df0c98e
1 parent a504371
commit df0c98e
Show file tree

Hide file tree

Showing 17 changed files with 304 additions and 25 deletions.
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/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.ts b/src/data/chainMockData.ts
@@ -0,0 +1,190 @@
+export const mockData = [
+  {
+    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,
+    },
+  },
+  {
+    name: 'Optimism',
+    chainId: 10,
+    website: 'https://optimism.io',
+    explorer: 'https://explorer.optimism.io',
+    launchDate: '2022-05-01',
+    environment: 'Production',
+    nativeToken: 'ETH',
+    chainType: 'Optimistic Rollup',
+    lastBlock: 987654321,
+    lastBlockVerified: 987654320,
+    transactionsPerSecond: 12,
+    totalBatchesCommitted: 987654321,
+    totalBatchesExecuted: 987654321,
+    totalBatchesVerified: 987654320,
+    averageBlockTime: 150000,
+    tvl: {
+      ETH: {
+        value: 700000000,
+        address: '0x1234...abcd',
+      },
+      DAI: {
+        value: 200000000,
+        address: '0x1234...abcd',
+      },
+    },
+    rpcs: [
+      {
+        status: 'Active',
+        url: 'https://mainnet.optimism.io',
+      },
+      {
+        status: 'Inactive',
+        url: 'https://backup.optimism.io',
+      },
+    ],
+    feeParams: {
+      batchOverheadL1Gas: 987654321,
+      computeOverheadPart: 987654321,
+      maxGasPerBatch: 987654320,
+    },
+  },
+  {
+    name: 'Arbitrum One',
+    chainId: 42161,
+    website: 'https://arbitrum.io',
+    explorer: 'https://explorer.arbitrum.io',
+    launchDate: '2021-08-31',
+    environment: 'Production',
+    nativeToken: 'ETH',
+    chainType: 'Optimistic Rollup',
+    lastBlock: 112233445,
+    lastBlockVerified: 112233444,
+    transactionsPerSecond: 20,
+    totalBatchesCommitted: 112233445,
+    totalBatchesExecuted: 112233445,
+    totalBatchesVerified: 112233444,
+    averageBlockTime: 80000,
+    tvl: {
+      ETH: {
+        value: 800000000,
+        address: '0xabcd...1234',
+      },
+      LINK: {
+        value: 150000000,
+        address: '0xabcd...1234',
+      },
+      USDC: {
+        value: 60000000,
+        address: '0xabcd...1234',
+      },
+    },
+    rpcs: [
+      {
+        status: 'Active',
+        url: 'https://arb1.arbitrum.io',
+      },
+    ],
+    feeParams: {
+      batchOverheadL1Gas: 112233445,
+      computeOverheadPart: 112233445,
+      maxGasPerBatch: 112233444,
+    },
+  },
+  {
+    name: 'Polygon',
+    chainId: 137,
+    website: 'https://polygon.technology',
+    explorer: 'https://explorer.matic.network',
+    launchDate: '2020-05-18',
+    environment: 'Production',
+    nativeToken: 'MATIC',
+    chainType: 'Sidechain',
+    lastBlock: 998877665,
+    lastBlockVerified: 998877664,
+    transactionsPerSecond: 30,
+    totalBatchesCommitted: 998877665,
+    totalBatchesExecuted: 998877665,
+    totalBatchesVerified: 998877664,
+    averageBlockTime: 20000,
+    tvl: {
+      MATIC: {
+        value: 400000000,
+        address: '0x5678...efgh',
+      },
+      AAVE: {
+        value: 50000000,
+        address: '0x5678...efgh',
+      },
+      WBTC: {
+        value: 25000000,
+        address: '0x5678...efgh',
+      },
+    },
+    rpcs: [
+      {
+        status: 'Active',
+        url: 'https://rpc-mainnet.maticvigil.com',
+      },
+      {
+        status: 'Active',
+        url: 'https://rpc-mainnet.matic.network',
+      },
+    ],
+    feeParams: {
+      batchOverheadL1Gas: 998877665,
+      computeOverheadPart: 998877665,
+      maxGasPerBatch: 998877664,
+    },
+  },
+];
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/index.tsx b/src/pages/index.tsx
@@ -6,7 +6,7 @@ const Home = () => {
   return (
     <>
       <Head>
-        <title>Web3 Boilerplate</title>
+        <title>ZKchainHub</title>
       </Head>
       <Landing />
     </>

diff --git a/src/providers/DataProvider.tsx b/src/providers/DataProvider.tsx
@@ -0,0 +1,29 @@
+import { createContext, useState } from 'react';
+
+import { ChainData } from '~/types';
+
+type ContextType = {
+  selectedChain?: ChainData;
+  setSelectedChain: (val: ChainData) => void;
+};
+
+interface DataProps {
+  children: React.ReactElement;
+}
+
+export const DataContext = createContext({} as ContextType);
+
+export const DataProvider = ({ children }: DataProps) => {
+  const [selectedChain, setSelectedChain] = useState<ChainData>();
+
+  return (
+    <DataContext.Provider
+      value={{
+        selectedChain,
+        setSelectedChain,
+      }}
+    >
+      {children}
+    </DataContext.Provider>
+  );
+};
diff --git a/src/types/Data.ts b/src/types/Data.ts
@@ -0,0 +1,32 @@
+export interface ChainData {
+  name: string;
+  chainId: number;
+  website: string;
+  explorer: string;
+  launchDate: string;
+  environment: string;
+  nativeToken: string;
+  chainType: string;
+  lastBlock: number;
+  lastBlockVerified: number;
+  transactionsPerSecond: number;
+  totalBatchesCommitted: number;
+  totalBatchesExecuted: number;
+  totalBatchesVerified: number;
+  averageBlockTime: number;
+  tvl: {
+    [token: string]: {
+      value: number;
+      address: string;
+    };
+  };
+  rpcs: {
+    status: string;
+    url: string;
+  }[];
+  feeParams: {
+    batchOverheadL1Gas: number;
+    computeOverheadPart: number;
+    maxGasPerBatch: number;
+  };
+}
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -1,2 +1,3 @@
 export * from './Config';
 export * from './Theme';
+export * from './Data';
diff --git a/tsconfig.json b/tsconfig.json
@@ -26,6 +26,6 @@
       "~/*": ["src/*"]
     }
   },
-  "include": ["./src", "./dist/types/**/*.ts", "./next-env.d.ts", "./cypress/**/*.ts", "./jest.config.ts"],
+  "include": ["./src", "./dist/types/**/*.ts", "./next-env.d.ts", "./cypress/**/*.ts", "./jest.config.ts", "src/data/chainMockData.ts"],
   "exclude": ["./node_modules"]
 }