Refactor testnet status update (#1748)

* update testnet status display in the health indicator

tools/tenscan/frontend/api/general.ts

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

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

@@ -3,19 +3,31 @@ import { Badge, badgeVariants } from "./ui/badge";
 import { useGeneralService } from "../services/useGeneralService";
 
 const HealthIndicator = () => {
+  const [status, setStatus] = React.useState<boolean>(false);
   const { testnetStatus } = useGeneralService();
 
+  // if testnetStatus.result is true, status is set to true
+  // if testnetStatus.result is false but testnetStatus.error includes [p2p], status is set to true
+
+  React.useEffect(() => {
+    if (testnetStatus?.result) {
+      setStatus(true);
+    } else if (testnetStatus?.errors?.includes("[p2p]")) {
+      setStatus(true);
+    } else {
+      setStatus(false);
+    }
+  }, [testnetStatus]);
+
   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
+          (status ? "success" : "destructive") as keyof typeof badgeVariants
         }
       >
-        {testnetStatus?.result ? "Live" : "Down"}
+        {status ? "Live" : "Down"}
       </Badge>
     </div>
   );

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

@@ -3,17 +3,11 @@ 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({
+  const { data: testnetStatus, isLoading: isStatusLoading } = useQuery({
     queryKey: ["testnetStatus"],
     queryFn: () => fetchTestnetStatus(),
-    // refetchInterval: noPolling ? false : pollingInterval,
+    refetchInterval: 10000,
   });
 
-  return { testnetStatus, isStatusLoading, setNoPolling, refetchTestnetStatus };
+  return { testnetStatus, isStatusLoading };
 };

tools/tenscan/frontend/src/types/interfaces/index.ts

@@ -57,6 +57,7 @@ export interface PaginationInterface {
 
 export interface ResponseDataInterface<T> {
   result: T;
+  errors?: string[] | string;
   item: T;
   message: string;
   pagination?: PaginationInterface;

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

@@ -12,6 +12,7 @@ const HealthIndicator = () => {
     setLoading(true);
     try {
       const status = await getTestnetStatus();
+
       return status;
     } catch (error) {
       console.error(error);
@@ -20,18 +21,26 @@ const HealthIndicator = () => {
     }
   };
 
-  // using useRef to avoid memory leak
-  let isMounted = React.useRef(true);
-
   useEffect(() => {
+    let isMounted = true;
+
+    // if overall health is true, status is set to true
+    // if overall health is false but if the error includes [p2p], status is set to true
+
     testnetStatus().then((res) => {
-      if (isMounted.current) {
-        setStatus(res?.result);
+      if (isMounted) {
+        if (res?.result?.OverallHealth) {
+          setStatus(true);
+        } else if (res?.result?.Errors?.includes("[p2p]")) {
+          setStatus(true);
+        } else {
+          setStatus(false);
+        }
       }
     });
 
     return () => {
-      isMounted.current = false;
+      isMounted = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);