[TOOL-4827] Move Nebula out of dashboard

Author: MananTank

apps/dashboard/.env.example

@@ -44,9 +44,6 @@ NEXT_PUBLIC_STRIPE_KEY=
 
 NEXT_PUBLIC_STRIPE_PAYMENT_METHOD_CFG_ID=
 
-# Needed for contract analytics / blockchain data information
-CHAINSAW_API_KEY=
-
 #
 # Private (server)
 #
@@ -65,17 +62,11 @@ MORALIS_API_KEY=
 # - not required to build (unless testing wallet NFTs)>
 SSR_ALCHEMY_KEY=
 
-# beehiiv.com API key (used for newsletter signups)
-# - not required to build (unless testing newsletter signups)>
-BEEHIIV_API_KEY=
 
 # Hubspot Access Token (used for contact us form)
 # - not required to build (unless testing contact us form)>
 HUBSPOT_ACCESS_TOKEN=
 
-# Github API Token (used for /open-source)
-GITHUB_API_TOKEN="ghp_..."
-
 # Upload server url
 NEXT_PUBLIC_DASHBOARD_UPLOAD_SERVER="https://storage.thirdweb-preview.com"
 
@@ -100,8 +91,6 @@ REDIS_URL=""
 
 ANALYTICS_SERVICE_URL=""
 
-# Required for Nebula Chat
-NEXT_PUBLIC_NEBULA_URL=""
 
 # required for billing parts of the dashboard (team -> settings -> billing / invoices)
 STRIPE_SECRET_KEY=""

apps/dashboard/package.json

@@ -62,7 +62,6 @@
     "compare-versions": "^6.1.0",
     "date-fns": "4.1.0",
     "fast-xml-parser": "^5.2.5",
-    "fetch-event-stream": "0.1.5",
     "flat": "^6.0.1",
     "framer-motion": "12.17.0",
     "fuse.js": "7.1.0",

apps/dashboard/src/@/components/Responsive.tsx

@@ -1,6 +1,6 @@
 "use client";
+import { ClientOnly } from "@/components/blocks/client-only";
 import { Suspense } from "react";
-import { ClientOnly } from "../../components/ClientOnly/ClientOnly";
 import { useIsMobile } from "../hooks/use-mobile";
 
 export function ResponsiveLayout(props: {

apps/dashboard/src/@/components/blocks/client-only.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { type ReactNode, useEffect, useState } from "react";
+
+interface ClientOnlyProps {
+  /**
+   * Use this to server render a skeleton or loading state
+   */
+  ssr: ReactNode;
+  className?: string;
+  children: ReactNode;
+}
+
+export const ClientOnly: React.FC<ClientOnlyProps> = ({
+  children,
+  ssr,
+  className,
+}) => {
+  const hasMounted = useIsClientMounted();
+
+  if (!hasMounted) {
+    return <> {ssr} </>;
+  }
+
+  return (
+    <div className={cn("fade-in-0 fill-mode-forwards ease-in", className)}>
+      {children}
+    </div>
+  );
+};
+
+function useIsClientMounted() {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  return hasMounted;
+}

apps/dashboard/src/@/components/color-mode-toggle.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { ClientOnly } from "@/components/blocks/client-only";
 import { Button } from "@/components/ui/button";
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { Skeleton } from "./ui/skeleton";

apps/dashboard/src/@/components/ui/Spinner/Spinner.module.css

@@ -12,7 +12,6 @@
   inset: 0px;
   border-radius: 50%;
   border: 4px solid #fff;
-  animation: prixClipFix 2s linear infinite;
   stroke-linecap: round;
   animation: dash 1.5s ease-in-out infinite;
 }

apps/dashboard/src/@/components/ui/button.tsx

@@ -9,17 +9,16 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        primary:
-          "bg-primary hover:bg-primary/90 text-semibold text-primary-foreground ",
+        primary: "bg-primary hover:bg-primary/90 text-primary-foreground ",
         default: "bg-foreground text-background hover:bg-foreground/90",
         destructive:
-          "bg-destructive hover:bg-destructive/90 text-semibold text-destructive-foreground ",
+          "bg-destructive hover:bg-destructive/90 text-destructive-foreground ",
         outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground text-semibold",
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary hover:bg-secondary/80 text-semibold text-secondary-foreground ",
-        ghost: "hover:bg-accent text-semibold hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline text-semibold",
+          "bg-secondary hover:bg-secondary/80 text-secondary-foreground ",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "underline-offset-4 hover:underline",
         pink: "border border-nebula-pink-foreground !text-nebula-pink-foreground bg-[hsl(var(--nebula-pink-foreground)/5%)] hover:bg-nebula-pink-foreground/10 dark:!text-foreground dark:bg-nebula-pink-foreground/10 dark:hover:bg-nebula-pink-foreground/20",
         upsell:
           "bg-green-600 text-white hover:bg-green-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",

apps/dashboard/src/@/components/ui/skeleton.tsx

@@ -16,7 +16,7 @@ function SkeletonContainer<T>(props: {
   loadedData?: T;
   skeletonData: T;
   className?: string;
-  render: (data: T, isSkeleton: boolean) => React.ReactNode;
+  render: (data: T) => React.ReactNode;
   style?: React.CSSProperties;
 }) {
   const isLoading = props.loadedData === undefined;
@@ -40,7 +40,6 @@ function SkeletonContainer<T>(props: {
             props.loadedData === undefined
               ? props.skeletonData
               : props.loadedData,
-            !isLoading,
           )}
         </div>
       </div>

apps/dashboard/src/@/constants/public-envs.ts

@@ -1,9 +1,6 @@
 export const NEXT_PUBLIC_DASHBOARD_CLIENT_ID =
   process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID || "";
 
-export const NEXT_PUBLIC_NEBULA_APP_CLIENT_ID =
-  process.env.NEXT_PUBLIC_NEBULA_APP_CLIENT_ID || "";
-
 export const NEXT_PUBLIC_THIRDWEB_VAULT_URL =
   process.env.NEXT_PUBLIC_THIRDWEB_VAULT_URL || "";
 
@@ -30,7 +27,5 @@ export const NEXT_PUBLIC_TURNSTILE_SITE_KEY =
 export const NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET =
   process.env.NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET || "";
 
-export const NEXT_PUBLIC_NEBULA_URL = process.env.NEXT_PUBLIC_NEBULA_URL || "";
-
 export const NEXT_PUBLIC_DEMO_ENGINE_URL =
   process.env.NEXT_PUBLIC_DEMO_ENGINE_URL || "";

apps/dashboard/src/@/constants/server-envs.ts

@@ -18,16 +18,6 @@ experimental_taintUniqueValue(
   DASHBOARD_THIRDWEB_SECRET_KEY,
 );
 
-export const NEBULA_APP_SECRET_KEY = process.env.NEBULA_APP_SECRET_KEY || "";
-
-if (NEBULA_APP_SECRET_KEY) {
-  experimental_taintUniqueValue(
-    "Do not pass NEBULA_APP_SECRET_KEY to the client",
-    process,
-    NEBULA_APP_SECRET_KEY,
-  );
-}
-
 export const API_SERVER_SECRET = process.env.API_SERVER_SECRET || "";
 
 if (API_SERVER_SECRET) {