feat: dashboard

.github/workflows/dashboard.yml

@@ -0,0 +1,65 @@
+name: Dashboard
+
+on:
+  workflow_dispatch:
+  push:
+    paths: [dashboard/**]
+    branches:
+      - main
+  pull_request:
+    paths: [dashboard/**]
+permissions: read-all
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install yarn
+        run: npm install -g yarn
+
+      - name: Prepare L1
+        run: |
+          npm install
+          npm run build
+        working-directory: l1
+
+      - name: Prepare Operator
+        run: |
+          npm install
+          npm run compile
+        working-directory: operator
+
+      - name: Install dependencies
+        run: yarn install
+        working-directory: dashboard
+        env:
+          # We have to disable immutable installs because the hash of operator will change
+          YARN_ENABLE_IMMUTABLE_INSTALLS: false
+
+      - name: Format Check
+        run: yarn format:check
+        working-directory: dashboard
+
+      - name: Type Checking
+        run: yarn ts:check
+        working-directory: dashboard
+
+      - name: Lint
+        run: yarn lint
+        working-directory: dashboard
+
+      - name: Build the project
+        run: yarn build
+        working-directory: dashboard
+        env:
+          OPERATOR_STATE_PATH: ./public/state.json
+          NEXT_PUBLIC_L1_EXPLORER_LINK: https://mempool-testnet.fractalbitcoin.io
+          NEXT_PUBLIC_L2_EXPLORER_LINK: https://sepolia.voyager.online

dashboard/.env.example

@@ -0,0 +1,4 @@
+OPERATOR_STATE_PATH=./public/state.json # Relative to the root of the dashboard (this file)
+
+NEXT_PUBLIC_L1_EXPLORER_LINK=https://mempool-testnet.fractalbitcoin.io
+NEXT_PUBLIC_L2_EXPLORER_LINK=https://sepolia.voyager.online

dashboard/.eslintignore

@@ -0,0 +1,3 @@
+build
+public
+src/vite-env.d.ts

dashboard/.eslintrc.cjs

@@ -0,0 +1,38 @@
+/* eslint-env node */
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const {node: restrictedImports} = require('@uniswap/eslint-config/restrictedImports');
+require('@uniswap/eslint-config/load');
+
+/**
+ * @type {import("eslint").Linter.BaseConfig}
+ */
+module.exports = {
+  extends: ['next/core-web-vitals', 'next/typescript', '@uniswap/eslint-config/node'],
+  plugins: [],
+
+  overrides: [
+    {
+      files: ['**/*'],
+      rules: {
+        'prettier/prettier': ['error', {semi: true}],
+        'import/no-unused-modules': 'off',
+      },
+    },
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        '@typescript-eslint/no-restricted-imports': ['error', restrictedImports],
+        'no-restricted-syntax': [
+          'error',
+          {
+            selector: ':matches(ExportAllDeclaration)',
+            message: 'Barrel exports bloat the bundle size by preventing tree-shaking.',
+          },
+        ],
+        'no-restricted-imports': ['error'],
+        'react/prop-types': 'off',
+      },
+    },
+  ],
+};

dashboard/.gitignore

@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

dashboard/.prettierignore

@@ -0,0 +1,3 @@
+build
+coverage
+public

dashboard/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120,
+  "bracketSpacing": false,
+  "trailingComma": "all",
+  "bracketSameLine": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "lf"
+}

dashboard/.yarnrc.yml

@@ -0,0 +1,6 @@
+enableScripts: false
+enableTelemetry: false
+
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

dashboard/README.md

@@ -0,0 +1,58 @@
+# Dashboard
+
+This is a dashboard for the [Pontis](https://github.com/Bitcoin-Wildlife-Sanctuary/pontis) project.
+It is built using [NextJS](https://nextjs.org/), [React](https://react.dev/), [TypeScript](https://www.typescriptlang.org/).
+
+## Development
+
+### Prepare L1 package
+
+- CD into the `l1` directory
+- Run `npm install`
+- Run `npm run build`
+
+### Prepare Operator package
+
+- CD into the `operator` directory
+- Run `npm install`
+- Run `npm run compile`
+
+### Run Dashboard
+
+Create an `.env` file in the root directory of the project and fill in the required values from the `.env.example` file.
+
+Install the dependencies by running:
+
+```bash
+yarn install
+```
+
+To start the development server, run:
+
+```bash
+yarn dev
+```
+
+## Deployment
+
+Create an `.env` file in the root directory of the project and fill in the required values from the `.env.example` file.
+You can also use production versions of the `.env` file, for example `.env.production`.
+
+To build the project, run:
+
+```bash
+yarn build
+```
+
+To start the production server, run:
+
+```bash
+yarn start
+```
+
+## Deployment to Cloud Services (Vercel, Netlify, AWS Amplify etc.)
+
+- Set up the deployment environment variables in the cloud service provider's dashboard.
+- Either deploy the project manually or set up automatic deployments from git branches.
+- If the project is not recognized as a NextJS project, you may need to set up the build command and the output directory manually.
+- Setup build scripts to include the L1 and Operator packages in the build process.

dashboard/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

dashboard/next.config.ts

@@ -0,0 +1,11 @@
+import type {NextConfig} from 'next';
+
+const nextConfig: NextConfig = {
+  compiler: {
+    styledComponents: {
+      ssr: true,
+    },
+  },
+};
+
+export default nextConfig;

dashboard/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "dashboard",
+  "version": "0.0.0",
+  "private": true,
+  "packageManager": "[email protected]",
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format:check": "prettier -c \"src/**/*.ts\"",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "ts:check": "tsc --noEmit",
+    "check": "yarn format:check && yarn ts:check"
+  },
+  "dependencies": {
+    "@csstools/normalize.css": "^12.1.1",
+    "bootstrap": "^5.3.3",
+    "chart.js": "^4.4.8",
+    "classnames": "^2.5.1",
+    "csstype": "^3.1.3",
+    "next": "15.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-json-view": "^1.21.3",
+    "styled-components": "^6.1.15"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/bootstrap": "^5.2.10",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "@uniswap/eslint-config": "^1.2.0",
+    "eslint": "^8.55.0",
+    "eslint-config-next": "15.2.0",
+    "operator": "file:../operator",
+    "prettier": "^3.5.2",
+    "typescript": "^5.7.3"
+  },
+  "resolutions": {
+    "styled-components": "^6"
+  }
+}