feat: add stats page (#100)

Co-authored-by: Alexandru Matei <[email protected]>
across-protocol · Nov 12, 2024 · 28d0779 · 28d0779
1 parent e1a6fc8
commit 28d0779
Show file tree

Hide file tree

Showing 13 changed files with 231 additions and 3 deletions.
diff --git a/packages/indexer-api/package.json b/packages/indexer-api/package.json
@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "tsc -b",
+    "build": "tsc -b && pnpm copy-ejs",
+    "copy-ejs": "cp -r src/views dist",
     "build:check": "tsc --noEmit",
     "watch": "tsc -b --watch",
     "fix": "pnpm format && pnpm lint",
@@ -21,12 +22,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@repo/indexer-database": "workspace:*",
     "@repo/indexer": "workspace:*",
+    "@repo/indexer-database": "workspace:*",
     "@types/express": "^4.17.21",
     "@types/supertest": "^6.0.2",
     "body-parser": "^1.20.2",
     "cors": "^2.8.5",
+    "ejs": "^3.1.10",
     "express": "^4.19.2",
     "ioredis": "^5.4.1",
     "superstruct": "2.0.3-1",

diff --git a/packages/indexer-api/src/controllers/index.ts b/packages/indexer-api/src/controllers/index.ts
@@ -1,2 +1,3 @@
 export * from "./balances";
 export * from "./deposits";
+export * from "./stats-page";
diff --git a/packages/indexer-api/src/controllers/stats-page.ts b/packages/indexer-api/src/controllers/stats-page.ts
@@ -0,0 +1,19 @@
+import { NextFunction, Response } from "express";
+import { StatsPageService } from "../services/stats-page";
+
+export class StatsPageController {
+  constructor(private statsPageService: StatsPageService) {}
+
+  public getStatsPage = async (
+    req: Request,
+    res: Response,
+    next: NextFunction,
+  ) => {
+    try {
+      const data = await this.statsPageService.getStatsPageData();
+      res.render(`${__dirname}/../views/pages/index`, data);
+    } catch (error) {
+      next(error);
+    }
+  };
+}
diff --git a/packages/indexer-api/src/express-app.ts b/packages/indexer-api/src/express-app.ts
@@ -17,6 +17,8 @@ export function ExpressApp(routers: RouterConfigs): Express {
 
   // enable if behind proxy like cloudflare/ginx
   app.set("trust proxy", true);
+  app.set("views", `${__dirname}/views`);
+  app.set("view engine", "ejs");
 
   app.use(cors());
   app.use(bodyParser.json({ limit: "1mb" }));

diff --git a/packages/indexer-api/src/main.ts b/packages/indexer-api/src/main.ts
@@ -89,6 +89,7 @@ export async function Main(
   const allRouters: Record<string, Router> = {
     deposits: routers.deposits.getRouter(postgres),
     balances: routers.balances.getRouter(redis),
+    statsPage: routers.statsPage.getRouter(postgres),
   };
   const app = ExpressApp(allRouters);
 

diff --git a/packages/indexer-api/src/routers/index.ts b/packages/indexer-api/src/routers/index.ts
@@ -1,2 +1,3 @@
 export * as deposits from "./deposits";
 export * as balances from "./balances";
+export * as statsPage from "./stats-page";
diff --git a/packages/indexer-api/src/routers/stats-page.ts b/packages/indexer-api/src/routers/stats-page.ts
@@ -0,0 +1,12 @@
+import { NextFunction, Router, Request, Response } from "express";
+import { DataSource } from "@repo/indexer-database";
+import { StatsPageService } from "../services";
+import { StatsPageController } from "../controllers";
+
+export function getRouter(db: DataSource): Router {
+  const router = Router();
+  const statsPageService = new StatsPageService(db);
+  const statsPageController = new StatsPageController(statsPageService);
+  router.get("/pages/stats", statsPageController.getStatsPage as any);
+  return router;
+}
diff --git a/packages/indexer-api/src/services/index.ts b/packages/indexer-api/src/services/index.ts
@@ -1 +1,2 @@
 export * as deposits from "./deposits";
+export * from "./stats-page";
diff --git a/packages/indexer-api/src/services/stats-page.ts b/packages/indexer-api/src/services/stats-page.ts
@@ -0,0 +1,14 @@
+import { DataSource, entities } from "@repo/indexer-database";
+
+export class StatsPageService {
+  constructor(private db: DataSource) {}
+
+  public async getStatsPageData() {
+    const bundles = await this.db.getRepository(entities.Bundle).find({
+      relations: { proposal: true },
+      order: { proposal: { blockNumber: "DESC" } },
+      take: 6,
+    });
+    return { bundles };
+  }
+}
diff --git a/packages/indexer-api/src/views/pages/index.ejs b/packages/indexer-api/src/views/pages/index.ejs
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <%- include('../partials/head'); %>
+</head>
+
+<body>
+  <%- include('../partials/header'); %>
+  <h1>Recent Bundles</h1>
+  <table>
+    <thead>
+      <tr>
+        <th>Block</th>
+        <th>Status</th>
+        <th>Transaction</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% bundles.forEach(function(bundle) { %>
+        <tr>
+          <td>
+            <%=bundle.proposal.blockNumber%>
+          </td>
+          <td class=<%= bundle.status == 'Executed' ? "green" : "" %>>
+            <%=bundle.status%>
+          </td>
+          <td>
+            <a href="https://etherscan.io/tx/<%= bundle.proposal.transactionHash %>" target="_blank">
+              <%=bundle.proposal.transactionHash%>
+            </a>
+          </td>
+        </tr>
+        <% }); %>
+    </tbody>
+  </table>
+</body>
+
+</html>
diff --git a/packages/indexer-api/src/views/partials/head.ejs b/packages/indexer-api/src/views/partials/head.ejs
@@ -0,0 +1,77 @@
+<meta charset="UTF-8">
+<title>Across Indexer</title>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet">
+<style>
+
+  * {
+    box-sizing: border-box;
+    line-height: 1.5;
+    font-family: "Barlow", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  body {
+    background-color: #2d2e33;
+    color: #e0f3ff;
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.625rem;
+    color: rgb(224, 243, 255);
+    text-transform: capitalize;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0px;
+    white-space: nowrap;
+    table-layout: fixed;
+  }
+
+  tr {
+    padding: 0px 24px;
+  }
+
+  thead tr {
+    height: 40px;
+    background-color: #34353b;
+    border-radius: 12px 12px 0px 0px;
+    border: #3e4047 1px solid;
+  }
+
+  tbody tr {
+    border-width: 0px 1px 1px;
+    border-style: solid;
+    border-color: #3e4047;
+  }
+
+  td {
+    padding: 8px 12px;
+  }
+
+  a {
+    text-decoration: none;
+    color: #e0f3ff;
+    cursor: pointer;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  .green {
+    color: #6cf9d8;
+  }
+</style>
diff --git a/packages/indexer-api/src/views/partials/header.ejs b/packages/indexer-api/src/views/partials/header.ejs
@@ -0,0 +1,9 @@
+<header>
+    <svg width="32" height="32" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-m12n0f">
+        <rect width="16" height="16" rx="8" fill="#6CF9D8"></rect>
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M3.47516 4.20982L4.25481 3.43018L7.37046 6.54583C7.18137 6.6264 7.00423 6.74381 6.84998 6.89806C6.73052 7.01752 6.63316 7.1507 6.55789 7.29254L3.47516 4.20982ZM6.49918 8.71984L3.42908 11.7899L4.20872 12.5696L7.24758 9.53072C7.10458 9.45523 6.97032 9.35731 6.84998 9.23698C6.69664 9.08364 6.57971 8.90768 6.49918 8.71984ZM8.79442 9.52908L11.7913 12.526L12.571 11.7464L9.54114 8.71651C9.46057 8.9056 9.34316 9.08273 9.18891 9.23698C9.06945 9.35644 8.93626 9.45381 8.79442 9.52908ZM9.48265 7.29565L12.5249 4.25341L11.7453 3.47377L8.67177 6.54725C8.85961 6.62778 9.03557 6.74472 9.18891 6.89806C9.30924 7.01839 9.40716 7.15265 9.48265 7.29565Z"
+            fill="#2D2E33"></path>
+    </svg>
+    <h1>Across Indexer</h1>
+</header>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * as deposits from "./deposits";
		export * from "./stats-page";