From e8beeeed2ee67fe5fd6991ce78bcd3cd88fb89e7 Mon Sep 17 00:00:00 2001
From: Jennifer Echenim <echenimjennifer@gmail.com>
Date: Fri, 22 Dec 2023 16:17:33 +0400
Subject: [PATCH] add ui for health check on Tenscan

---
 tools/obscuroscan_v3/frontend/api/general.ts  | 14 +++++++++++
 .../src/components/health-indicator.tsx       | 24 +++++++++++++++++++
 .../src/components/layouts/header.tsx         |  2 ++
 .../frontend/src/routes/index.ts              |  3 +++
 .../src/services/useGeneralService.ts         | 19 +++++++++++++++
 5 files changed, 62 insertions(+)
 create mode 100644 tools/obscuroscan_v3/frontend/api/general.ts
 create mode 100644 tools/obscuroscan_v3/frontend/src/components/health-indicator.tsx
 create mode 100644 tools/obscuroscan_v3/frontend/src/services/useGeneralService.ts

diff --git a/tools/obscuroscan_v3/frontend/api/general.ts b/tools/obscuroscan_v3/frontend/api/general.ts
new file mode 100644
index 0000000000..88324a5255
--- /dev/null
+++ b/tools/obscuroscan_v3/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 },
+  });
+};
diff --git a/tools/obscuroscan_v3/frontend/src/components/health-indicator.tsx b/tools/obscuroscan_v3/frontend/src/components/health-indicator.tsx
new file mode 100644
index 0000000000..6bc25c4827
--- /dev/null
+++ b/tools/obscuroscan_v3/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 px-2 py-1">
+      <h3>Testnet Status: </h3>
+      <Badge
+        variant={
+          (testnetStatus?.result
+            ? "success"
+            : "destructive") as keyof typeof badgeVariants
+        }
+      >
+        {testnetStatus?.result ? "Live" : "Down"}
+      </Badge>
+    </div>
+  );
+};
+
+export default HealthIndicator;
diff --git a/tools/obscuroscan_v3/frontend/src/components/layouts/header.tsx b/tools/obscuroscan_v3/frontend/src/components/layouts/header.tsx
index 7a2b0ce726..d2ddfb493d 100644
--- a/tools/obscuroscan_v3/frontend/src/components/layouts/header.tsx
+++ b/tools/obscuroscan_v3/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>
diff --git a/tools/obscuroscan_v3/frontend/src/routes/index.ts b/tools/obscuroscan_v3/frontend/src/routes/index.ts
index ebd6e29ecd..045b35989d 100644
--- a/tools/obscuroscan_v3/frontend/src/routes/index.ts
+++ b/tools/obscuroscan_v3/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 = {
diff --git a/tools/obscuroscan_v3/frontend/src/services/useGeneralService.ts b/tools/obscuroscan_v3/frontend/src/services/useGeneralService.ts
new file mode 100644
index 0000000000..f82c686456
--- /dev/null
+++ b/tools/obscuroscan_v3/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 };
+};