added frontend WS connection for demonstration purposes

1 files changed, 46 insertions, 0 deletions

diff --git a/gui/src/App.tsx b/gui/src/App.tsx
new file mode 100644
index 0000000..415cb66
--- /dev/null
+++ b/gui/src/App.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import useLocalState from "@/state/state";
+import Router from "./Router";
+import "@/styles/styles.css";
+import { ThemeProvider } from "@/styles/ThemeProvider";
+import spinner from "@/assets/crowspinner.gif";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Toaster } from "react-hot-toast";
+const queryClient = new QueryClient();
+
+// const isMobile = MOBILE_BROWSER_REGEX.test(navigator.userAgent);
+
+function App() {
+  const [loading, setLoading] = useState(true);
+  console.log("NOSTRILL INIT");
+  const { init, modal } = useLocalState((s) => ({
+    init: s.init,
+    modal: s.modal,
+  }));
+  useEffect(() => {
+    init().then((_res: any) => {
+      setLoading(false);
+    });
+  }, []);
+  if (loading)
+    return (
+      <div className="global-center">
+        <img id="global-spinner" src={spinner} alt="" />
+        <h3 style={{ textAlign: "center" }}>Syncing with your Urbit...</h3>
+      </div>
+    );
+  else
+    return (
+      <ThemeProvider>
+        <QueryClientProvider client={queryClient}>
+          {/* {isMobile ? <MobileUI /> : <DesktopUI />} */}
+          <Router />
+          {modal && modal}
+          <Toaster position="top-center" />
+        </QueryClientProvider>
+      </ThemeProvider>
+    );
+}
+
+export default App;