Source

// Santa's entry. "/" keeps the static landing and mounts the make-an-exchange form and "Your
// exchanges" into it; the landing never loads the Bounded SDK. "/x/..." hides the landing and loads the app.
import { lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { Toaster } from "./ui";
import { Create } from "./Create";
import { Yours } from "./Yours";
import "./styles.css";

const App = lazy(() => import("./App"));
const APP_ROUTE = /^\/x\/[A-Za-z0-9]{8,32}(\/admin|\/p\/[A-Za-z0-9]{8,32})?\/?$/;
const LANDING_TITLE = document.title;

function Root() {
  const path = usePath();
  const inApp = APP_ROUTE.test(path);
  document.body.classList.toggle("app-mode", inApp);
  if (!inApp) document.title = LANDING_TITLE;
  return (
    <>
      {inApp && (
        <Suspense fallback={<div className="wrap page-pad"><div className="loading"><span className="spinner" /></div></div>}>
          <App path={path.replace(/\/$/, "")} />
        </Suspense>
      )}
      <Toaster />
    </>
  );
}

createRoot(document.getElementById("app")!).render(<Root />);
const createSlot = document.getElementById("create");
if (createSlot) createRoot(createSlot).render(<Create />);
const yourSlot = document.getElementById("yours");
if (yourSlot) createRoot(yourSlot).render(<Yours />);

const head = document.querySelector(".site-head");
const onScroll = () => head?.classList.toggle("scrolled", window.scrollY > 4);
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();