Nebula: Use Nebula project keys (#6839)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the authentication and client configuration for the `Nebula` application by replacing the usage of the `DASHBOARD_THIRDWEB_SECRET_KEY` with `NEBULA_APP_SECRET_KEY`, and modifying the thirdweb client setup.

### Detailed summary
- Added `NEXT_PUBLIC_NEBULA_APP_CLIENT_ID` and `NEBULA_APP_SECRET_KEY` to `env.ts`.
- Replaced `nebulaThirdwebClient` with `nebulaAppThirdwebClient` in `EmptyStateChatPageContent.tsx`.
- Updated headers in `auth-actions.ts` to use `NEBULA_APP_SECRET_KEY`.
- Refactored `nebulaThirdwebClient.ts` to create a new client using `NEBULA_APP_SECRET_KEY` and `NEXT_PUBLIC_NEBULA_APP_CLIENT_ID`.
- Updated `NebulaConnectWallet` component to use `nebulaAppThirdwebClient`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/constants/env.ts

@@ -4,6 +4,11 @@ export const DASHBOARD_THIRDWEB_CLIENT_ID =
 export const DASHBOARD_THIRDWEB_SECRET_KEY =
   process.env.DASHBOARD_SECRET_KEY || "";
 
+export const NEXT_PUBLIC_NEBULA_APP_CLIENT_ID =
+  process.env.NEXT_PUBLIC_NEBULA_APP_CLIENT_ID || "";
+
+export const NEBULA_APP_SECRET_KEY = process.env.NEBULA_APP_SECRET_KEY || "";
+
 export const THIRDWEB_API_SECRET = process.env.API_SERVER_SECRET || "";
 
 export const IPFS_GATEWAY_URL =

apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx

@@ -5,7 +5,7 @@ import { ArrowUpRightIcon } from "lucide-react";
 import type { NebulaContext } from "../api/chat";
 import { examplePrompts } from "../data/examplePrompts";
 import { NebulaIcon } from "../icons/NebulaIcon";
-import { nebulaThirdwebClient } from "../utils/nebulaThirdwebClient";
+import { nebulaAppThirdwebClient } from "../utils/nebulaThirdwebClient";
 import { ChatBar, type WalletMeta } from "./ChatBar";
 
 export function EmptyStateChatPageContent(props: {
@@ -42,7 +42,7 @@ export function EmptyStateChatPageContent(props: {
             setContext={props.setContext}
             sendMessage={props.sendMessage}
             isChatStreaming={false}
-            client={nebulaThirdwebClient}
+            client={nebulaAppThirdwebClient}
             connectedWallets={props.connectedWallets}
             activeAccountAddress={props.activeAccountAddress}
             setActiveWallet={props.setActiveWallet}

apps/dashboard/src/app/nebula-app/(app)/components/NebulaConnectButton.tsx

@@ -2,8 +2,8 @@
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { cn } from "@/lib/utils";
 import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useTheme } from "next-themes";
@@ -14,15 +14,14 @@ import {
   useActiveAccount,
   useActiveWalletConnectionStatus,
 } from "thirdweb/react";
-import { cn } from "../../../../@/lib/utils";
 import { doNebulaLogout } from "../../login/auth-actions";
+import { nebulaAppThirdwebClient } from "../utils/nebulaThirdwebClient";
 
 export const NebulaConnectWallet = (props: {
   connectButtonClassName?: string;
   signInLinkButtonClassName?: string;
   detailsButtonClassName?: string;
 }) => {
-  const thirdwebClient = useThirdwebClient();
   const router = useDashboardRouter();
   const { theme } = useTheme();
   const t = theme === "light" ? "light" : "dark";
@@ -67,7 +66,7 @@ export const NebulaConnectWallet = (props: {
   return (
     <ConnectButton
       theme={getSDKTheme(t)}
-      client={thirdwebClient}
+      client={nebulaAppThirdwebClient}
       connectModal={{
         privacyPolicyUrl: "/privacy-policy",
         termsOfServiceUrl: "/terms",

apps/dashboard/src/app/nebula-app/(app)/utils/nebulaThirdwebClient.ts

@@ -1,3 +1,45 @@
-import { getThirdwebClient } from "@/constants/thirdweb.server";
+import {
+  IPFS_GATEWAY_URL,
+  NEBULA_APP_SECRET_KEY,
+  NEXT_PUBLIC_NEBULA_APP_CLIENT_ID,
+} from "@/constants/env";
+import {
+  THIRDWEB_BUNDLER_DOMAIN,
+  THIRDWEB_INAPP_WALLET_DOMAIN,
+  THIRDWEB_INSIGHT_API_DOMAIN,
+  THIRDWEB_PAY_DOMAIN,
+  THIRDWEB_RPC_DOMAIN,
+  THIRDWEB_SOCIAL_API_DOMAIN,
+  THIRDWEB_STORAGE_DOMAIN,
+} from "constants/urls";
+import { createThirdwebClient } from "thirdweb";
+import { setThirdwebDomains } from "thirdweb/utils";
+import { getVercelEnv } from "../../../../lib/vercel-utils";
 
-export const nebulaThirdwebClient = getThirdwebClient(undefined);
+// returns a thirdweb client with optional JWT passed in
+function getThirdwebClient() {
+  if (getVercelEnv() !== "production") {
+    // if not on production: run this when creating a client to set the domains
+    setThirdwebDomains({
+      rpc: THIRDWEB_RPC_DOMAIN,
+      inAppWallet: THIRDWEB_INAPP_WALLET_DOMAIN,
+      pay: THIRDWEB_PAY_DOMAIN,
+      storage: THIRDWEB_STORAGE_DOMAIN,
+      social: THIRDWEB_SOCIAL_API_DOMAIN,
+      bundler: THIRDWEB_BUNDLER_DOMAIN,
+      insight: THIRDWEB_INSIGHT_API_DOMAIN,
+    });
+  }
+
+  return createThirdwebClient({
+    secretKey: NEBULA_APP_SECRET_KEY,
+    clientId: NEXT_PUBLIC_NEBULA_APP_CLIENT_ID,
+    config: {
+      storage: {
+        gatewayUrl: IPFS_GATEWAY_URL,
+      },
+    },
+  });
+}
+
+export const nebulaAppThirdwebClient = getThirdwebClient();

apps/dashboard/src/app/nebula-app/login/auth-actions.ts

@@ -1,10 +1,7 @@
 "use server";
 import "server-only";
 
-import {
-  DASHBOARD_THIRDWEB_SECRET_KEY,
-  NEXT_PUBLIC_NEBULA_URL,
-} from "@/constants/env";
+import { NEBULA_APP_SECRET_KEY, NEXT_PUBLIC_NEBULA_URL } from "@/constants/env";
 import { isVercel } from "lib/vercel-utils";
 import { cookies } from "next/headers";
 import { getAddress } from "thirdweb";
@@ -26,7 +23,7 @@ export async function getNebulaLoginPayload(
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      "X-Secret-Key": DASHBOARD_THIRDWEB_SECRET_KEY,
+      "X-Secret-Key": NEBULA_APP_SECRET_KEY,
     },
     body: JSON.stringify({
       address: params.address,
@@ -70,7 +67,7 @@ export async function doNebulaLogin(
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      "X-Secret-Key": DASHBOARD_THIRDWEB_SECRET_KEY,
+      "X-Secret-Key": NEBULA_APP_SECRET_KEY,
     },
     body: JSON.stringify(payload),
   });