Monitor for taker's backend presence in the UI

It's important to have this in the meantime, otherwise taker will get shutdown
when maker goes offline and we will not notice it.

taker-frontend/src/App.tsx

@@ -5,6 +5,7 @@ import { useAsync } from "react-async";
 import { Route, Switch } from "react-router-dom";
 import { useEventSource } from "react-sse-hooks";
 import useWebSocket from "react-use-websocket";
+import { useBackendMonitor } from "./components/BackendMonitor";
 import History from "./components/History";
 import Nav from "./components/NavBar";
 import Trade from "./components/Trade";
@@ -43,6 +44,7 @@ async function postCfdOrderRequest(payload: CfdOrderRequestPayload) {
 
 export const App = () => {
     const toast = useToast();
+    useBackendMonitor(toast, 5000); // 5s timeout
 
     const {
         lastMessage,

taker-frontend/src/components/BackendMonitor.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from "react";
+
+async function fetchWithTimeout(resource: any, timeout: number) {
+    const controller = new AbortController();
+    const id = setTimeout(() => controller.abort(), timeout);
+    const response = await fetch(resource, {
+        signal: controller.signal,
+    });
+    clearTimeout(id);
+    return response;
+}
+
+// Check for backend's presence by sending a request to '/alive' endpoint.
+// When the backend's not there, the request is likely to timeout, triggering a
+// persistent toast notification that goes away when the daemon is back online.
+export function useBackendMonitor(toast: any, timeout_ms: number): void {
+    const toastIdRef = useRef();
+
+    const checkForBackend: () => void = async () => {
+        try {
+            const res = await fetchWithTimeout("/alive", timeout_ms);
+            // In case we get a response, but it's not what we expected
+            if (res.status.toString().startsWith("2")) {
+                if (toastIdRef.current) {
+                    toast.close(toastIdRef.current);
+                }
+            } else {
+                throw new Error(res.statusText);
+            }
+        } catch (e) {
+            if (!toastIdRef.current) {
+                toastIdRef.current = toast({
+                    title: "Connection Error",
+                    description: "Daemon process is not running",
+                    status: "error",
+                    position: "top",
+                    duration: timeout_ms * 100000, // we don't want this to be closed
+                    isClosable: false,
+                });
+            }
+        }
+    };
+
+    useEffect(() => {
+        const interval = setInterval(() => checkForBackend(), timeout_ms);
+        return () => {
+            clearInterval(interval);
+        };
+    });
+}