Merge pull request #15 from chainstacklabs/codex/vite-react19-ui-polish

Migrate to Vite/React 19 and polish protocol table UX

Author: easeev

.github/workflows/ci.yml

@@ -0,0 +1,33 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24.13.1
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check protocol icon coverage
+        run: npm run check:protocol-icons
+
+      - name: Run tests
+        run: npm run test
+
+      - name: Build app
+        run: npm run build

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

AGENTS.md

@@ -5,7 +5,7 @@ This repository contains a React application that displays blockchain node stati
 ## 1. Use Development Server for Testing
 
 * **Always use `npm start`** for local development.
-* **Test UI changes** in browser at http://localhost:3000.
+* **Test UI changes** in browser at http://localhost:5173.
 * **Do _not_ deploy to production** during agent development sessions.
 * **Check console** for any React warnings or errors.
 
@@ -16,7 +16,7 @@ If you update dependencies:
 1. Install packages with `npm install`.
 2. Update specific packages with `npm update <package>`.
 3. Run `npm audit fix` to resolve vulnerabilities.
-4. Verify compatibility with React 18 and Ant Design 5.
+4. Verify compatibility with current React and Ant Design versions in `package.json`.
 
 ## 3. Development Workflow
 
@@ -95,8 +95,8 @@ src/
 When adding new protocols:
 
 1. Add SVG icon to `src/components/ProtocolIcon/`
-2. Import in `ProtocolIcon.js`
-3. Add case in switch statement
+2. Import in `ProtocolIcon.jsx`
+3. Add mapping in `iconTypes`
 4. Test icon rendering
 
 ## 10. Search Functionality
@@ -129,7 +129,7 @@ For GitHub Pages deployment:
 
 ### Add New Protocol
 1. Add icon to ProtocolIcon directory
-2. Update ProtocolIcon.js switch statement
+2. Update `iconTypes` in `ProtocolIcon.jsx`
 3. Test data display in table/cards
 
 ### Update Styling
@@ -184,4 +184,4 @@ Before deployment:
 
 ---
 
-Following these practices ensures smooth React development, maintains code quality, and enables reliable deployment to production. Always test thoroughly in development before deploying to chainstats.org.
+Following these practices ensures smooth React development, maintains code quality, and enables reliable deployment to production. Always test thoroughly in development before deploying to chainstats.org.

README.md

@@ -1,29 +1,89 @@
-# Getting Started with Create React App
+# Chainstats
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Chainstats is a React + Vite app that visualizes Chainstack blockchain node storage sizes by protocol, network, node type, and client.
 
-## Available Scripts
+Production URL: [https://chainstats.org](https://chainstats.org)
 
-In the project directory, you can run:
+## Data Source
 
-### `npm start`
+- API endpoint: `https://console.chainstack.com/api/core/v1/calc/`
+- Source path: `Enterprise.protocols`
+- Inclusion rule in UI:
+  - Use only `dedicated` entries
+  - Include only nodes where `type === "public"`
+  - Skip entries without `node_info.storage.size_required`
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+## Features
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+- Protocol/network/client table with sorting and filtering.
+- Search by protocol slug and friendly display aliases.
+- Full and archive node-type rows.
+- Multi-client visibility per network/type.
+- Protocol icons with fallback badges for unmapped protocols.
+- Light/dark theme support.
 
-### `npm run build`
+## Stack
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+- React 19
+- Vite 7
+- Ant Design 6
+- Sass
+- Axios
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+## Local Development
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+### Prerequisites
 
-### `npm run deploy`
+- Node.js 24+
+- npm 9+
 
-Will deploy app on gh-pages
+### Install
+
+```bash
+npm install
+```
+
+### Start dev server
+
+```bash
+npm start
+```
+
+Open [http://localhost:5173](http://localhost:5173).
+
+## Scripts
+
+- `npm start`: run Vite dev server.
+- `npm run build`: create production build in `dist/`.
+- `npm run preview`: preview built app locally.
+- `npm run test`: run Vitest (`--passWithNoTests`).
+- `npm run check:protocol-icons`: compare visible API protocols to icon map coverage.
+- `npm run deploy`: publish `dist/` to GitHub Pages.
+
+## CI
+
+Workflow: `.github/workflows/ci.yml`
+
+Runs:
+1. `npm ci`
+2. `npm run check:protocol-icons`
+3. `npm run build`
+
+## Protocol Metadata
+
+Shared protocol formatting lives in:
+
+- `src/helpers/protocolMetadata.json`
+- `src/helpers/protocolDisplay.js`
+
+Use these helpers for protocol naming and network formatting in UI components.
+
+## Deployment
+
+1. Run checks:
+   - `npm run check:protocol-icons`
+   - `npm run build`
+2. Deploy:
+   - `npm run deploy`
+3. Verify:
+   - [https://chainstats.org](https://chainstats.org)

public/index.html index.htmlpublic/index.html renamed to index.html

@@ -1,11 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <!-- Primary Meta Tags -->
     <title>Blockchain Size - How Much Storage Does A Blockchain Use?</title>
     <meta
       name="title"
@@ -16,9 +15,8 @@
       content="Ever wondered what is the size of a blockchain in terms of storage? See how many gigabytes of data are stored on the main blockchain networks."
     />
 
-    <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="%PUBLIC_URL%" />
+    <meta property="og:url" content="https://chainstats.org" />
     <meta
       property="og:title"
       content="Blockchain Size - How Much Storage Does A Blockchain Use?"
@@ -27,28 +25,20 @@
       property="og:description"
       content="Ever wondered what is the size of a blockchain in terms of storage? See how many gigabytes of data are stored on the main blockchain networks."
     />
-    <meta
-      property="og:image"
-      content="https://raw.githubusercontent.com/chainstacklabs/chainstats/main/public/og-image.png"
-    />
+    <meta property="og:image" content="https://chainstats.org/og-image.png" />
 
-    <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:url" content="%PUBLIC_URL%" />
+    <meta name="twitter:url" content="https://chainstats.org" />
     <meta
       name="twitter:title"
       content="Blockchain Size - How Much Storage Does A Blockchain Use?"
     />
-
     <meta
       name="twitter:description"
       content="Ever wondered what is the size of a blockchain in terms of storage? See how many gigabytes of data are stored on the main blockchain networks."
     />
-    <meta
-      name="twitter:image"
-      content="https://raw.githubusercontent.com/chainstacklabs/chainstats/main/public/og-image.png"
-    />
-    <!-- Google tag (gtag.js) -->
+    <meta name="twitter:image" content="https://chainstats.org/og-image.png" />
+
     <script
       async
       src="https://www.googletagmanager.com/gtag/js?id=G-EEW4LPHTW7"
@@ -61,10 +51,10 @@
       gtag('js', new Date());
       gtag('config', 'G-EEW4LPHTW7');
     </script>
-    <!-- Google tag (gtag.js) -->
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>