[Gateway] health check on gateway UI/frontend (#1729)

* feat: format health response

* Update getHealthStatus API route

* fix useEffect warning msgs

tools/walletextension/frontend/src/api/general.ts

@@ -0,0 +1,14 @@
+import { ResponseDataInterface } from "@/types/interfaces";
+import { httpRequest } from ".";
+import { pathToUrl } from "@/routes/router";
+import { apiRoutes } from "@/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/walletextension/frontend/src/components/health-indicator.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect } from "react";
+import { Badge, badgeVariants } from "./ui/badge";
+import useGatewayService from "@/services/useGatewayService";
+import { Skeleton } from "./ui/skeleton";
+
+const HealthIndicator = () => {
+  const { getTestnetStatus } = useGatewayService();
+  const [loading, setLoading] = React.useState(false);
+  const [status, setStatus] = React.useState<boolean>();
+
+  const testnetStatus = async () => {
+    setLoading(true);
+    try {
+      const status = await getTestnetStatus();
+      return status;
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // using useRef to avoid memory leak
+  let isMounted = React.useRef(true);
+
+  useEffect(() => {
+    testnetStatus().then((res) => {
+      if (isMounted.current) {
+        setStatus(res?.result);
+      }
+    });
+
+    return () => {
+      isMounted.current = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="flex items-center space-x-2 border rounded-lg p-2">
+      <h3 className="text-sm">Testnet Status: </h3>
+      {loading ? (
+        <Skeleton className="h-4 w-10" />
+      ) : (
+        <Badge
+          variant={
+            (status ? "success" : "destructive") as keyof typeof badgeVariants
+          }
+        >
+          {status ? "Live" : "Down"}
+        </Badge>
+      )}
+    </div>
+  );
+};
+
+export default HealthIndicator;

tools/walletextension/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/walletextension/frontend/src/components/providers/wallet-provider.tsx

@@ -199,6 +199,7 @@ export const WalletConnectionProvider = ({
         ethereum.removeListener("accountsChanged", fetchUserAccounts);
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const walletConnectionContextValue: WalletConnectionContextType = {

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

@@ -9,6 +9,9 @@ export const apiRoutes = {
   queryAccountToken: `/${tenGatewayVersion}/query/`,
   revoke: `/${tenGatewayVersion}/revoke/`,
   version: `/version/`,
+
+  // **** INFO ****
+  getHealthStatus: `/${tenGatewayVersion}/network-health/`,
 };
 
 export const requestMethods = {

tools/walletextension/frontend/src/services/useGatewayService.ts

@@ -14,6 +14,7 @@ import {
   getToken,
   switchToTenNetwork,
 } from "@/api/ethRequests";
+import { fetchTestnetStatus } from "@/api/general";
 
 const useGatewayService = () => {
   const { token, provider, fetchUserAccounts, setLoading } =
@@ -76,8 +77,18 @@ const useGatewayService = () => {
     }
   };
 
+  const getTestnetStatus = async () => {
+    try {
+      return await fetchTestnetStatus();
+    } catch (error) {
+      showToast(ToastType.DESTRUCTIVE, "Unable to connect to Obscuro Testnet");
+      throw error;
+    }
+  };
+
   return {
     connectToTenTestnet,
+    getTestnetStatus,
   };
 };