diff --git a/tools/walletextension/frontend/src/api/general.ts b/tools/walletextension/frontend/src/api/general.ts new file mode 100644 index 0000000000..24a8afd877 --- /dev/null +++ b/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 +> => { + return await httpRequest>({ + method: "post", + url: pathToUrl(apiRoutes.getHealthStatus), + data: { jsonrpc: "2.0", method: "obscuro_health", params: [], id: 1 }, + }); +}; diff --git a/tools/walletextension/frontend/src/components/health-indicator.tsx b/tools/walletextension/frontend/src/components/health-indicator.tsx new file mode 100644 index 0000000000..8242ca8fee --- /dev/null +++ b/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(); + + 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 ( +
+

Testnet Status:

+ {loading ? ( + + ) : ( + + {status ? "Live" : "Down"} + + )} +
+ ); +}; + +export default HealthIndicator; diff --git a/tools/walletextension/frontend/src/components/layouts/header.tsx b/tools/walletextension/frontend/src/components/layouts/header.tsx index 7a2b0ce726..d2ddfb493d 100644 --- a/tools/walletextension/frontend/src/components/layouts/header.tsx +++ b/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() {
+
diff --git a/tools/walletextension/frontend/src/components/providers/wallet-provider.tsx b/tools/walletextension/frontend/src/components/providers/wallet-provider.tsx index 5b49b574ea..22da64e2ab 100644 --- a/tools/walletextension/frontend/src/components/providers/wallet-provider.tsx +++ b/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 = { diff --git a/tools/walletextension/frontend/src/routes/index.ts b/tools/walletextension/frontend/src/routes/index.ts index 2bba85e009..f3ac4438f7 100644 --- a/tools/walletextension/frontend/src/routes/index.ts +++ b/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 = { diff --git a/tools/walletextension/frontend/src/services/useGatewayService.ts b/tools/walletextension/frontend/src/services/useGatewayService.ts index 474b5283b0..9b05d32249 100644 --- a/tools/walletextension/frontend/src/services/useGatewayService.ts +++ b/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, }; };