[Tenscan] health check UI on Tenscan (#1719)

*  ui for health check on Tenscan

* Refactor health status method names

* Refactor health check function calls

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 };
+};