feat(voyager): bul merkat dashboard

voyager-dashboard/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+client/.vite

voyager-dashboard/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Deno
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

voyager-dashboard/README.md

@@ -0,0 +1,145 @@
+# React Template with Vite and Deno
+
+This is a GitHub template project to set up a [React](https://react.dev/) app
+with TypeScript running on [Deno](https://deno.com). It uses
+[Vite](https://vite.dev) as the dev server and an [oak](https://jsr.io/@oak/oak)
+http server on the backend to serve the built project.
+
+## Features
+
+- React with TypeScript on the frontend
+- Vite for the development server
+- Deno for server-side JavaScript/TypeScript
+- Oak framework for building web applications
+- Static file serving
+- Router setup
+
+## Getting Started
+
+### Prerequisites
+
+To run this app, you will need to have [Deno](https://docs.deno.com/runtime/)
+installed.
+
+### Installation
+
+1. Create a new repository using this template. From the repository page, click
+   the "Use this template" button in the top right hand of the page:
+
+<img src="https://docs.github.com/assets/cb-76823/images/help/repository/use-this-template-button.png" alt="Use this template button" width="400">
+
+2. Use the Owner dropdown menu to select the account you want to own the
+   repository and set the repository name and visibility.
+
+3. Clone the repository created to your local machine.
+
+```sh
+git clone https://github.com/your-username/your-repo-name.git
+cd your-repo-name
+```
+
+> For a step by step guide to using a GitHub template
+> [follow this walkthrough](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template)
+
+## Install the dependencies
+
+To install the dependencies for the frontend and backend, run the following
+command:
+
+```sh
+deno install
+```
+
+## Run the dev server with vite
+
+The app uses a Vite dev server to run in development mode. To start the dev
+server, run the following command:
+
+```sh
+deno run dev
+```
+
+## Build the app
+
+To build the app for production, run the following command:
+
+```sh
+deno run build
+```
+
+## Run the backend server
+
+The backend server uses Deno and the Oak framework to serve the built React app.
+To start the backend server, run the following command:
+
+```sh
+deno run serve
+```
+
+## Running Tests
+
+To run the tests, use the following command:
+
+```sh
+deno test -A
+```
+
+## Project Structure
+
+```sh
+. 
+├── client 
+│   ├── dist 
+│   ├── public 
+│   └── src 
+│       ├── App.tsx 
+│       └── main.tsx 
+└── server 
+    ├── main.ts 
+    ├── main_test.ts 
+    └── util 
+        └── routeStaticFilesFrom.ts
+```
+
+- `App.tsx`: The main React component
+- `main.tsx`: The entry point for the React app
+- `main.ts`: The entry point for the Deno server
+- `main_test.ts`: The test file for the Deno server
+- `routeStaticFilesFrom.ts`: A utility function to serve static files
+- `dist`: The output directory for the built React app
+- `public`: The public directory for the React app
+
+## Points of note
+
+The React app is contained in the `client` directory. This is also where Vite
+will install its dependencies and build the app.
+
+There is a `vite.config.ts` file in the root of the project that configures Vite
+to build the app in the `client/dist` directory and serve the app on port 3000.
+
+The `deno.json` file contains the tasks to run the dev server, build the app,
+and serve the app, along with the dependencies and the compiler configuration
+required to use JSX and React.
+
+The Deno server is contained in the `server` directory. The server serves the
+built React app from the `client/dist` directory and listens on port 8000. This
+is what should be used in production.
+
+## Deploying
+
+You can deploy the app with [Deno Deploy](https://dash.deno.com/new_project).
+
+1. Link your github account
+2. Select the repository
+3. Give the project a name
+4. Set the "Build Step" to `deno task build`
+5. Set the entry point to `./server/main.ts`
+6. Click 'deploy project'
+
+## Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request.
+
+## License
+
+This project is licensed under the MIT License.

voyager-dashboard/client/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>bul merkat</title>
+    <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

voyager-dashboard/client/src/App.tsx

@@ -0,0 +1,118 @@
+import { useState, useEffect } from "react"
+import { ApolloClient, InMemoryCache, gql } from "@apollo/client"
+
+const client = new ApolloClient({
+  uri: "https://hubble-green.hasura.app/v1/graphql",
+  cache: new InMemoryCache(),
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: "no-cache",
+      errorPolicy: "ignore"
+    },
+    query: {
+      fetchPolicy: "no-cache",
+      errorPolicy: "all"
+    }
+  }
+})
+
+function App() {
+  const [clients, setClients] = useState([])
+  const [chains, setChains] = useState([])
+  useEffect(() => {
+    const load = async () => {
+      const {
+        data: { v1_ibc_union_client_heights_max, v1_ibc_union_chains }
+      } = await client.query({
+        query: gql`
+                        query MyQuery {
+                            v1_ibc_union_client_heights_max {
+                                client_chain {
+                                    chain_id
+                                }
+                                counterparty_chain {
+                                    chain_id
+                                }
+                                client_id
+                                max_counterparty_height
+                            }
+                            v1_ibc_union_chains {
+                                index_status {
+                                    chain_id
+                                    height
+                                }
+                            }
+                        }
+                    `
+      })
+      setChains(v1_ibc_union_chains)
+      setClients(
+        Object.groupBy(v1_ibc_union_client_heights_max, client => client.client_chain.chain_id)
+      )
+    }
+    const id = setInterval(() => {
+      load()
+    }, 2000)
+    return () => clearInterval(id)
+  }, [])
+  const length = Object.keys(clients).length
+  return (
+    <>
+      <h1>bul merkat</h1>
+      <div class="table-responsive">
+        <table class="center">
+          <caption>clients</caption>
+          <thead>
+            <tr>
+              <th colspan="2" rowspan="2"></th>
+              <th colspan={length}>tracker</th>
+            </tr>
+            <tr>
+              {Object.keys(clients).map(chain => (
+                <th key={chain}>{chain}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {Object.entries(clients).map(([counterpartyChainId, _], counterpartyIndex) => (
+              <tr key={counterpartyIndex}>
+                {counterpartyIndex === 0 && (
+                  <th key="first" rowspan={length}>
+                    <div>tracked</div>
+                  </th>
+                )}
+                <th key={counterpartyIndex}>{counterpartyChainId}</th>
+                {Object.entries(clients).map(([chainId, values]) => {
+                  if (chainId === counterpartyChainId) {
+                    return <td key="{counterpartyChainId}-{chainId}" className="bg-default"></td>
+                  }
+                  const counterpartyChain = chains.find(chain => {
+                    return chain.index_status.chain_id === counterpartyChainId
+                  })
+                  const client = values.find(
+                    value => value.counterparty_chain.chain_id === counterpartyChainId
+                  )
+                  return (
+                    <td key={chainId} className="bg-muted">
+                      <i className="smaller success">{client.client_id}</i>
+                      <br></br>
+                      <span className="small">
+                        {counterpartyChain.index_status.height - client.max_counterparty_height}
+                      </span>
+                      <br></br>
+                      <span>{client.max_counterparty_height}</span>
+                      <br></br>
+                      <span>{counterpartyChain.index_status.height}</span>
+                    </td>
+                  )
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  )
+}
+
+export default App

voyager-dashboard/client/src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import App from "./App.tsx"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)

voyager-dashboard/client/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

voyager-dashboard/deno.json

@@ -0,0 +1,27 @@
+{
+  "tasks": {
+    "dev": "deno run -A --node-modules-dir=auto npm:vite",
+    "build": "deno run -A --node-modules-dir=auto npm:vite build",
+    "server:start": "deno run -A --node-modules-dir --watch ./server/main.ts",
+    "serve": "deno task build && deno task server:start"
+  },
+  "imports": {
+    "@apollo/client": "npm:@apollo/client@^3.13.0",
+    "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.0",
+    "@oak/oak": "jsr:@oak/oak@^17.1.3",
+    "@std/assert": "jsr:@std/assert@1",
+    "@types/react": "npm:@types/react@^18.3.12",
+    "@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.3.3",
+    "axios": "npm:axios@^1.7.9",
+    "react": "npm:react@^18.3.1",
+    "react-dom": "npm:react-dom@^18.3.1",
+    "react-router-dom": "npm:react-router-dom@^6.28.0",
+    "vite": "npm:vite@^5.4.11"
+  },
+  "compilerOptions": {
+    "types": ["react", "react-dom", "@types/react"],
+    "lib": ["dom", "dom.iterable", "deno.ns"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}