Add OPEN_REGISTRATION gate, signup request form, favicon

ui/components/login-modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useCallback } from "react";
+import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 import LoginForm from "../app/(app)/login/login-form";
@@ -116,6 +117,16 @@ export default function LoginModal() {
         <p className="mt-4 text-sm font-semibold text-sage">
           We never require more than view-only access to keep your funds safe.
         </p>
+        <p className="mt-3 text-sm text-ink-soft">
+          Don&apos;t have an account?{" "}
+          <Link
+            href="/signup"
+            className="font-semibold text-clay underline underline-offset-4"
+            onClick={closeModal}
+          >
+            Request access
+          </Link>
+        </p>
       </div>
     </div>
   );

ui/components/turnstile-widget.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Turnstile } from "@marsidev/react-turnstile";
+import { useState, useEffect } from "react";
+
+const SITE_KEY = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY;
+
+export default function TurnstileWidget({
+  onVerify,
+}: {
+  onVerify: (token: string) => void;
+}) {
+  const [mounted, setMounted] = useState(false);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!SITE_KEY) {
+    return null;
+  }
+
+  if (!mounted) {
+    return <div className="h-[65px] w-[300px]" />;
+  }
+
+  if (error) {
+    return (
+      <p className="text-xs text-ink-soft">Security check unavailable</p>
+    );
+  }
+
+  return (
+    <Turnstile
+      siteKey={SITE_KEY}
+      onSuccess={onVerify}
+      onError={() => setError(true)}
+      onExpire={() => onVerify("")}
+      options={{ theme: "light" }}
+    />
+  );
+}