feat: data fetching

.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 

.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

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,
   };
 };

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
+    }
+  }
+]

src/data/ecosystemMockData.json

@@ -0,0 +1,92 @@
+{
+    "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
+        }
+      ]
+  }
+

src/pages/error.tsx

@@ -0,0 +1,5 @@
+const ErrorPage = () => {
+  return <div>Sorry, something went wrong.</div>;
+};
+
+export default ErrorPage;

src/pages/index.tsx

@@ -2,7 +2,7 @@ import Head from 'next/head';
 
 import { Landing } from '~/containers';
 
-const Home = () => {
+const Ecosystem = () => {
   return (
     <>
       <Head>
@@ -13,4 +13,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Ecosystem;