Add front end

Author: moose-code

.DS_Store

@@ -19,6 +19,7 @@
 import numpy as np
 import psutil
 import signal
+from quart_cors import cors
 
 matplotlib.use('Agg')
 
@@ -52,6 +53,8 @@ async def fetch_chain_data():
     return chain_data
 
 app = Quart(__name__)
+# For development - restrict to specific origins in production
+app = cors(app, allow_origin="*")
 
 
 @app.route('/', methods=['GET', 'POST'])
@@ -83,6 +86,55 @@ async def index():
     return await render_template('index.html', networks=sorted_networks)
 
 
+@app.route('/api/networks', methods=['GET'])
+async def api_networks():
+    global CHAIN_DATA
+    if not CHAIN_DATA:
+        CHAIN_DATA = await fetch_chain_data()
+    sorted_networks = sorted(CHAIN_DATA.keys())
+    return {"networks": sorted_networks}
+
+
+@app.route('/api/data', methods=['POST'])
+async def api_data():
+    global CHAIN_DATA
+    if not CHAIN_DATA:
+        CHAIN_DATA = await fetch_chain_data()
+
+    # Get form data from request body as JSON
+    json_data = await request.get_json()
+    address = json_data['address'].lower()
+    request_type = json_data['type']
+    selected_network = json_data['network']
+    network_url = CHAIN_DATA.get(selected_network, {}).get(
+        'url', "https://eth.hypersync.xyz")
+
+    try:
+        directory, total_blocks, total_items, elapsed_time, start_block, is_cached = await fetch_data(address, selected_network, network_url, request_type)
+        if total_items == 0:
+            return {"error": f"No {request_type}s found for {address} on the {selected_network} network."}, 404
+
+        # Get the plot and stats
+        img, stats = create_plot(
+            directory, request_type, total_blocks, total_items, elapsed_time, start_block, is_cached)
+
+        # Return JSON response with base64 encoded image
+        return {
+            "plot_url": img,
+            "stats": stats,
+            "request_type": request_type,
+            "address": address,
+            "network": selected_network,
+            "total_blocks": total_blocks,
+            "total_items": total_items,
+            "elapsed_time": elapsed_time
+        }
+    except Exception as e:
+        error_message = str(e)
+        print(f"Error: {error_message}")
+        return {"error": f"An unexpected error occurred. Error: {error_message}"}, 500
+
+
 def create_query(address, start_block, request_type):
     if request_type == "event":
         query = hypersync.Query(

app.py

@@ -0,0 +1,10 @@
+// This configuration only applies to the package manager root.
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  ignorePatterns: ["apps/**", "packages/**"],
+  extends: ["@workspace/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+}

front-end/.eslintrc.js

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+
+
+# Debug
+npm-debug.log*
+
+# Misc
+.DS_Store
+*.pem

front-end/.gitignore

@@ -0,0 +1,62 @@
+# ChainDensity Frontend
+
+This is the Next.js frontend for the ChainDensity application, which visualizes event and transaction density for Ethereum and other EVM-compatible blockchains.
+
+## Setup
+
+### Prerequisites
+
+- Node.js 18+ and npm/pnpm
+- Python 3.10+ (for the backend)
+
+### Backend Setup
+
+1. Set up the Python backend first:
+
+```bash
+# From the root directory
+pip install -r requirements.txt
+python app.py
+```
+
+The backend will run on http://localhost:5001.
+
+### Frontend Setup
+
+1. Install dependencies:
+
+```bash
+# From the front-end directory
+pnpm install
+```
+
+2. Run the development server:
+
+```bash
+# From the front-end directory
+pnpm dev
+```
+
+3. Open your browser and navigate to http://localhost:3000
+
+## Architecture
+
+This project uses a decoupled architecture:
+
+- **Backend**: Python Quart application that handles data retrieval and processing using Hypersync
+- **Frontend**: Next.js application that provides a modern UI for interacting with the backend
+
+## API Endpoints
+
+The backend exposes the following API endpoints:
+
+- `GET /api/networks` - Returns a list of available networks
+- `POST /api/data` - Accepts address, network, and request type to generate density visualization
+
+## Development
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with Turborepo.
+
+## Acknowledgements
+
+Made by envio and powered by [Hypersync](https://envio.dev).

front-end/.npmrc

@@ -0,0 +1,30 @@
+import { Geist, Geist_Mono } from "next/font/google"
+
+import "@workspace/ui/globals.css"
+import { Providers } from "@/components/providers"
+
+const fontSans = Geist({
+  subsets: ["latin"],
+  variable: "--font-sans",
+})
+
+const fontMono = Geist_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+})
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased `}
+      >
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}