front/src/App.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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;