[Tenscan] health check UI on Tenscan

tools/tenscan/backend/obscuroscan_backend.go

@@ -30,6 +30,10 @@ func (b *Backend) GetLatestBatch() (*common.BatchHeader, error) {
 	return b.obsClient.BatchHeaderByNumber(nil)
 }
 
+func (b *Backend) GetTenNodeHealthStatus() (bool, error) {
+	return b.obsClient.Health()
+}
+
 func (b *Backend) GetLatestRollup() (*common.RollupHeader, error) {
 	return &common.RollupHeader{}, nil
 }

tools/tenscan/backend/webserver/webserver_routes_items.go

@@ -17,6 +17,14 @@ func routeItems(r *gin.Engine, server *WebServer) {
 	r.GET("/items/batches/", server.getBatchListing)
 	r.GET("/items/blocks/", server.getBlockListing)
 	r.GET("/info/obscuro/", server.getConfig)
+	r.POST("/info/health/", server.getHealthStatus)
+}
+
+func (w *WebServer) getHealthStatus(c *gin.Context) {
+	healthStatus, err := w.backend.GetTenNodeHealthStatus()
+
+	// TODO: error handling, since this does not easily tell connection errors from health errors
+	c.JSON(http.StatusOK, gin.H{"result": healthStatus, "errors": fmt.Sprintf("%s", err)})
 }
 
 func (w *WebServer) getLatestBatch(c *gin.Context) {

tools/tenscan/frontend/api/general.ts

@@ -0,0 +1,14 @@
+import { ResponseDataInterface } from "@/src/types/interfaces";
+import { httpRequest } from ".";
+import { pathToUrl } from "@/src/routes/router";
+import { apiRoutes } from "@/src/routes";
+
+export const fetchTestnetStatus = async (): Promise<
+  ResponseDataInterface<any>
+> => {
+  return await httpRequest<ResponseDataInterface<any>>({
+    method: "post",
+    url: pathToUrl(apiRoutes.getHealthStatus),
+    data: { jsonrpc: "2.0", method: "obscuro_health", params: [], id: 1 },
+  });
+};

tools/tenscan/frontend/src/components/health-indicator.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Badge, badgeVariants } from "./ui/badge";
+import { useGeneralService } from "../services/useGeneralService";
+
+const HealthIndicator = () => {
+  const { testnetStatus } = useGeneralService();
+
+  return (
+    <div className="flex items-center space-x-2 border rounded-lg p-2">
+      <h3 className="text-sm">Testnet Status: </h3>
+      <Badge
+        variant={
+          (testnetStatus?.result
+            ? "success"
+            : "destructive") as keyof typeof badgeVariants
+        }
+      >
+        {testnetStatus?.result ? "Live" : "Down"}
+      </Badge>
+    </div>
+  );
+};
+
+export default HealthIndicator;

tools/tenscan/frontend/src/components/layouts/header.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { HamburgerMenuIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import { Button } from "../ui/button";
+import HealthIndicator from "../health-indicator";
 
 export default function Header() {
   return (
@@ -16,6 +17,7 @@ export default function Header() {
         <div className="hidden md:flex items-center space-x-4">
           <MainNav className="mx-6" />
           <div className="flex items-center space-x-4">
+            <HealthIndicator />
             <ModeToggle />
             <ConnectWalletButton />
           </div>

tools/tenscan/frontend/src/routes/index.ts

@@ -23,6 +23,9 @@ export const apiRoutes = {
   // **** ROLLUPS ****
   getRollups: "/items/rollup/latest/",
   decryptEncryptedRollup: "/actions/decryptTxBlob/",
+
+  // **** INFO ****
+  getHealthStatus: "/info/health/",
 };
 
 export const ethMethods = {

tools/tenscan/frontend/src/services/useGeneralService.ts

@@ -0,0 +1,19 @@
+import { fetchTestnetStatus } from "@/api/general";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+export const useGeneralService = () => {
+  const [noPolling, setNoPolling] = useState(false);
+
+  const {
+    data: testnetStatus,
+    isLoading: isStatusLoading,
+    refetch: refetchTestnetStatus,
+  } = useQuery({
+    queryKey: ["testnetStatus"],
+    queryFn: () => fetchTestnetStatus(),
+    // refetchInterval: noPolling ? false : pollingInterval,
+  });
+
+  return { testnetStatus, isStatusLoading, setNoPolling, refetchTestnetStatus };
+};