diff --git a/src/components/CustomHead.tsx b/src/components/CustomHead.tsx new file mode 100644 index 0000000..46a146b --- /dev/null +++ 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 ( + + {`${title} - ZKchainHub`} + + + + ); +}; diff --git a/src/components/index.ts b/src/components/index.ts index 0fe1f0b..a25d295 100644 --- 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 index 6fc8f48..5d98840 100644 --- 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 index 2caa8a9..6afb5cd 100644 --- 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 new file mode 100644 index 0000000..3ea9a9b --- /dev/null +++ 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 deleted file mode 100644 index 1f720d7..0000000 --- a/src/hooks/ScrollToTop.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { useEffect } from 'react'; -import { useRouter } from 'next/router'; - -export function ScrollToTop() { - const router = useRouter(); - - useEffect(() => { - const handleRouteChange = () => { - window.scrollTo(0, 0); - }; - router.events.on('routeChangeComplete', handleRouteChange); - - return () => { - router.events.off('routeChangeComplete', handleRouteChange); - }; - }, [router.events]); - - return null; -} diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 3ffc027..af3d0f4 100644 --- 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 new file mode 100644 index 0000000..92f170c --- /dev/null +++ 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 new file mode 100644 index 0000000..43e0a8a --- /dev/null +++ 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 b/src/hooks/useContext/useStateContext.tsx similarity index 100% rename from src/hooks/useStateContext.tsx rename to src/hooks/useContext/useStateContext.tsx diff --git a/src/hooks/useTheme.tsx b/src/hooks/useContext/useTheme.tsx similarity index 100% rename from src/hooks/useTheme.tsx rename to src/hooks/useContext/useTheme.tsx diff --git a/src/pages/[chain]/index.tsx b/src/pages/[chain]/index.tsx new file mode 100644 index 0000000..a472e99 --- /dev/null +++ b/src/pages/[chain]/index.tsx @@ -0,0 +1,14 @@ +import { CustomHead } from '~/components'; + +const Chain = () => { + const title = 'Chain placeholder'; + + return ( + <> + + {/* TODO: Add chain page containers */} + + ); +}; + +export default Chain; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2283214..e78f744 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,7 +6,7 @@ const Home = () => { return ( <> - Web3 Boilerplate + ZKchainHub diff --git a/src/providers/DataProvider.tsx b/src/providers/DataProvider.tsx new file mode 100644 index 0000000..c4fc115 --- /dev/null +++ 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(); + + return ( + + {children} + + ); +}; diff --git a/src/types/Data.ts b/src/types/Data.ts new file mode 100644 index 0000000..ee96ebb --- /dev/null +++ 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 index 54d9f8d..f5e98b2 100644 --- 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 index 08b37f1..91e94bf 100644 --- 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"] } \ No newline at end of file