feat: remove next auth and integrate privy along with projects dashboard

package.json

@@ -12,19 +12,18 @@
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
     "@google-cloud/bigquery": "^7.9.2",
+    "@hookform/resolvers": "^5.0.1",
     "@mapbox/mapbox-gl-draw": "^1.5.0",
+    "@privy-io/react-auth": "^2.13.3",
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slider": "^1.2.3",
-    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
-    "@reown/appkit": "^1.7.3",
-    "@reown/appkit-adapter-wagmi": "^1.7.3",
-    "@reown/appkit-siwe": "^1.7.3",
     "@tanstack/react-query": "^5.67.2",
     "@turf/bbox": "^7.2.0",
     "@turf/turf": "^7.2.0",
@@ -34,20 +33,23 @@
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
     "d3": "^7.9.0",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "framer-motion": "^12.4.10",
     "immer": "^10.1.1",
     "lucide-react": "^0.483.0",
     "mapbox-gl": "^3.10.0",
     "next": "15.1.7",
-    "next-auth": "^4.24.11",
+    "radix-ui": "^1.4.2",
     "react": "^19.0.0",
+    "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0",
-    "react-responsive": "^10.0.1",
+    "react-hook-form": "^7.56.4",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
     "viem": "^2.23.9",
     "wagmi": "^2.14.12",
+    "zod": "^3.25.34",
     "zustand": "^5.0.3"
   },
   "devDependencies": {

src/app/(map-routes)/(main)/[projectId]/page.tsx

@@ -1,18 +1,27 @@
 "use client";
 
 import { useSearchParams } from "next/navigation";
-import { use } from "react";
+import { Suspense, use } from "react";
 import useStoreUrlSync from "../_features/navigation/use-store-url-sync";
 
+function Project({ projectId }: { projectId: string }) {
+  const queryParams = useSearchParams();
+
+  useStoreUrlSync(queryParams, { projectId });
+
+  return null;
+}
+
 export default function ProjectPage({
   params,
 }: {
   params: Promise<{ projectId: string }>;
 }) {
   const { projectId } = use(params);
-  const queryParams = useSearchParams();
 
-  useStoreUrlSync(queryParams, { projectId });
-
-  return null;
+  return (
+    <Suspense>
+      <Project projectId={projectId} />
+    </Suspense>
+  );
 }

src/app/(map-routes)/(main)/_components/Overlay/Header.tsx

@@ -2,14 +2,18 @@
 
 import React from "react";
 import Image from "next/image";
-
-// const WalletButton = dynamic(() => import("@/app/_components/WalletButton"), {
-//   ssr: false,
-// });
+import { useStackedDialog } from "@/components/ui/StackedDialog/context";
+import { User2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Loader2 } from "lucide-react";
+import Link from "next/link";
+import { usePrivy } from "@privy-io/react-auth";
 
 const Header = ({ showBrandName = true }: { showBrandName?: boolean }) => {
   // const { address } = useAppKitAccount();
   // const { open } = useAppKit();
+  const { authenticated, ready } = usePrivy();
+  const { openDialog } = useStackedDialog();
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-2">
@@ -24,18 +28,34 @@ const Header = ({ showBrandName = true }: { showBrandName?: boolean }) => {
       </div>
 
       {/* Commenting this code to temporarily remove it */}
-      {/* {address ? (
+      {!ready ? (
+        <Button variant={"ghost"} size={"icon"}>
+          <Loader2 className="animate-spin" />
+        </Button>
+      ) : authenticated ? (
         <div className="flex items-center gap-2">
-          <Link href="/my-projects">
-            <Button variant={"ghost"}>My Projects</Button>
+          <Link href="/projects">
+            <Button variant={"ghost"} size={"sm"}>
+              Projects
+            </Button>
           </Link>
-          <Button variant={"outline"} size={"icon"} onClick={() => open()}>
+          <Button
+            variant={"outline"}
+            size={"icon"}
+            onClick={() => openDialog("account")}
+          >
             <User2 />
           </Button>
         </div>
       ) : (
-        <WalletButton />
-      )} */}
+        <Button
+          variant={"outline"}
+          onClick={() => openDialog("onboarding")}
+          size={"sm"}
+        >
+          Sign in
+        </Button>
+      )}
     </div>
   );
 };

src/app/(map-routes)/(main)/_components/Overlay/index.tsx

@@ -1,24 +1,29 @@
 "use client";
 
-import React, { useEffect } from "react";
-import { useMediaQuery } from "react-responsive";
+import React, { useEffect, useState } from "react";
 import useOverlayStore from "./store";
 import DesktopOverlay from "./DesktopOverlay";
 import SmallerDeviceOverlay from "./SmallerDeviceOverlay";
+import useMediaQuery from "@/hooks/useMediaQuery";
 
 const Overlay = () => {
-  const isMediumSizeOrGreater = useMediaQuery({ query: "(width >= 48rem)" });
+  const isMediumSizeOrGreater = useMediaQuery("(width >= 48rem)");
+  const size = useOverlayStore((state) => state.size);
   const setSize = useOverlayStore((state) => state.setSize);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
+    setMounted(true);
     if (isMediumSizeOrGreater) {
       setSize("desktop");
     } else {
       setSize("smaller");
     }
   }, [isMediumSizeOrGreater, setSize]);
 
-  return isMediumSizeOrGreater ? <DesktopOverlay /> : <SmallerDeviceOverlay />;
+  if (!mounted) return null;
+
+  return size === "desktop" ? <DesktopOverlay /> : <SmallerDeviceOverlay />;
 };
 
 export default Overlay;

src/app/(map-routes)/(main)/_components/ProjectOverlay/store/utils.ts

@@ -8,6 +8,7 @@ import {
   TreeFeature,
 } from "./types";
 import { getTreeSpeciesName } from "../../Map/sources-and-layers/measured-trees";
+import { backendApiURL } from "@/config/endpoints";
 
 export const fetchProjectData = async (projectId: string) => {
   const endpoint = `${process.env.NEXT_PUBLIC_GAINFOREST_ENDPOINT}/api/graphql`;
@@ -72,6 +73,28 @@ export const fetchProjectData = async (projectId: string) => {
     const responseData: ProjectDataApiResponse = await response.json();
     if ("project" in responseData.data && responseData.data.project) {
       const project = responseData.data.project;
+      try {
+        const projectFromNewBackendResponse = await fetch(
+          `${backendApiURL}/projects/${projectId}`
+        );
+        if (projectFromNewBackendResponse.ok) {
+          const projectFromNewBackendData =
+            await projectFromNewBackendResponse.json();
+          const {
+            name,
+            country,
+            short_description,
+            long_description,
+            objective,
+          } = projectFromNewBackendData;
+          project.name = name;
+          project.country = country;
+          project.description = short_description;
+          project.longDescription = long_description;
+          project.objective = objective;
+        }
+      } catch {}
+
       return project;
     } else {
       return null;

src/app/(map-routes)/(main)/_components/ShareDialog/index.tsx

@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
-import React, { useCallback, useState } from "react";
+import React, { Suspense, useCallback, useState } from "react";
 import useProjectOverlayStore from "../ProjectOverlay/store";
 import { Check, Copy, LocateFixed, LucideProps, MapPin } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -54,7 +54,11 @@ const ShareOption = ({
   );
 };
 
-const ShareDialog = ({ children }: { children: React.ReactNode }) => {
+const ShareDialogWithoutSuspense = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const project = useProjectOverlayStore((state) => state.projectData);
@@ -200,4 +204,12 @@ const ShareDialog = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
+const ShareDialog = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Suspense>
+      <ShareDialogWithoutSuspense>{children}</ShareDialogWithoutSuspense>
+    </Suspense>
+  );
+};
+
 export default ShareDialog;

src/app/(map-routes)/(main)/page.tsx

@@ -2,9 +2,18 @@
 
 import { useSearchParams } from "next/navigation";
 import useStoreUrlSync from "./_features/navigation/use-store-url-sync";
+import { Suspense } from "react";
 
-export default function Home() {
+function Home() {
   const queryParams = useSearchParams();
   useStoreUrlSync(queryParams, {});
   return null;
 }
+
+export default function HomePage() {
+  return (
+    <Suspense>
+      <Home />
+    </Suspense>
+  );
+}

src/app/(map-routes)/(shapefile-related)/geo/view/page.tsx

@@ -1,9 +1,9 @@
 "use client";
-import { useEffect } from "react";
+import { Suspense, useEffect } from "react";
 import useOverlayStore from "../../_components/Overlay/store";
 import { useSearchParams } from "next/navigation";
 
-const ViewPage = () => {
+const GeoView = () => {
   const searchParams = useSearchParams();
   const sourceValue = searchParams.get("source-value") ?? "";
   const overlayVisibility = searchParams.get("overlay-visibility");
@@ -23,4 +23,12 @@ const ViewPage = () => {
   return null;
 };
 
-export default ViewPage;
+const GeoViewPage = () => {
+  return (
+    <Suspense>
+      <GeoView />
+    </Suspense>
+  );
+};
+
+export default GeoViewPage;