[TOOL-3231] Show View Project Link after creating a project in Modal (#6055)

<!-- start pr-codex -->

## PR-Codex overview
This PR introduces the `teamSlug` prop across multiple components to enhance API key management by associating it with specific teams. This allows for better project handling and user navigation within the dashboard.

### Detailed summary
- Added `teamSlug` prop to `CreateAPIKeyModal` and related components.
- Updated `embed-setup.tsx` to handle `teamSlug` as `undefined`.
- Integrated `teamSlug` in `TeamProjectsPage` and `AccountHeader`.
- Modified `CreateAPIKeyDialog` to include `teamSlug` in props.
- Enhanced `APIKeyDetails` to fetch projects based on `teamSlug`.
- Implemented conditional rendering for "View Project" button based on `teamSlug`.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx

@@ -323,6 +323,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
           apiKeys.refetch();
         }}
         enableNebulaServiceByDefault={false}
+        teamSlug={undefined}
       />
 
       <Alert variant="warning">

apps/dashboard/src/app/account/components/AccountHeader.tsx

@@ -70,6 +70,11 @@ export function AccountHeader(props: {
           // refresh projects
           router.refresh();
         }}
+        teamSlug={
+          createProjectDialogState.isOpen
+            ? createProjectDialogState.team.slug
+            : undefined
+        }
         enableNebulaServiceByDefault={
           createProjectDialogState.isOpen &&
           createProjectDialogState.team.enabledScopes.includes("nebula")

apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx

@@ -170,6 +170,7 @@ export function TeamProjectsPage(props: {
       <LazyCreateAPIKeyDialog
         open={isCreateProjectDialogOpen}
         onOpenChange={setIsCreateProjectDialogOpen}
+        teamSlug={props.team.slug}
         onCreateAndComplete={() => {
           // refresh projects
           router.refresh();

apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx

@@ -65,6 +65,11 @@ export function TeamHeaderLoggedIn(props: {
 
       <LazyCreateAPIKeyDialog
         open={createProjectDialogState.isOpen}
+        teamSlug={
+          createProjectDialogState.isOpen
+            ? createProjectDialogState.team.slug
+            : undefined
+        }
         onOpenChange={() =>
           setCreateProjectDialogState({
             isOpen: false,

apps/dashboard/src/components/settings/ApiKeys/Create/CreateApiKeyModal.stories.tsx

@@ -53,6 +53,7 @@ function Story(props: {
         createKeyMutation={mutation}
         prefill={props.prefill}
         enableNebulaServiceByDefault={false}
+        teamSlug="foo"
       />
 
       <Button

apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx

@@ -1,3 +1,5 @@
+import { apiServerProxy } from "@/actions/proxies";
+import type { Project } from "@/api/projects";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
@@ -23,17 +25,18 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import {
   type ApiKey,
   type CreateKeyInput,
   useCreateApiKey,
 } from "@3rdweb-sdk/react/hooks/useApi";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DialogDescription } from "@radix-ui/react-dialog";
-import type { UseMutationResult } from "@tanstack/react-query";
+import { type UseMutationResult, useQuery } from "@tanstack/react-query";
 import { SERVICES } from "@thirdweb-dev/service-utils";
 import { useTrack } from "hooks/analytics/useTrack";
-import { ArrowLeftIcon } from "lucide-react";
+import { ArrowLeftIcon, ExternalLinkIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -54,6 +57,7 @@ export type CreateAPIKeyDialogProps = {
   onCreateAndComplete?: () => void;
   prefill?: CreateAPIKeyPrefillOptions;
   enableNebulaServiceByDefault: boolean;
+  teamSlug: string | undefined;
 };
 
 const CreateAPIKeyDialog = (props: CreateAPIKeyDialogProps) => {
@@ -78,6 +82,7 @@ export const CreateAPIKeyDialogUI = (props: {
   >;
   prefill?: CreateAPIKeyPrefillOptions;
   enableNebulaServiceByDefault: boolean;
+  teamSlug: string | undefined;
 }) => {
   const [screen, setScreen] = useState<
     { id: "create" } | { id: "api-details"; key: ApiKey }
@@ -97,7 +102,7 @@ export const CreateAPIKeyDialogUI = (props: {
       }}
     >
       <DialogContent
-        className="z-[10001] p-0"
+        className="z-[10001] overflow-hidden p-0"
         dialogOverlayClassName="z-[10000]"
         dialogCloseClassName={screen.id === "api-details" ? "hidden" : ""}
       >
@@ -116,6 +121,7 @@ export const CreateAPIKeyDialogUI = (props: {
           {screen.id === "api-details" && (
             <APIKeyDetails
               apiKey={screen.key}
+              teamSlug={props.teamSlug}
               onComplete={() => {
                 onOpenChange(false);
                 setScreen({ id: "create" });
@@ -402,9 +408,35 @@ function DomainsAlert(props: {
 function APIKeyDetails(props: {
   apiKey: ApiKey;
   onComplete: () => void;
+  teamSlug: string | undefined;
 }) {
   const { apiKey } = props;
   const [secretStored, setSecretStored] = useState(false);
+  const router = useDashboardRouter();
+
+  // get the project.slug for the apiKey to render "View Project" button
+  const projectQuery = useQuery({
+    queryKey: ["project", props.teamSlug, apiKey.id],
+    queryFn: async () => {
+      const res = await apiServerProxy<{
+        result: Project[];
+      }>({
+        method: "GET",
+        pathname: `/v1/teams/${props.teamSlug}/projects`,
+      });
+
+      if (!res.ok) {
+        throw new Error(res.error);
+      }
+
+      const projects = res.data.result;
+      const project = projects.find((p) => p.publishableKey === apiKey.key);
+      return project || null;
+    },
+    enabled: !!props.teamSlug,
+  });
+
+  const projectSlug = projectQuery.data?.slug;
 
   return (
     <div>
@@ -474,10 +506,31 @@ function APIKeyDetails(props: {
           type="button"
           onClick={props.onComplete}
           disabled={!secretStored}
+          variant="outline"
           className="min-w-28 gap-2"
         >
-          Complete
+          {props.teamSlug ? "Close" : "Complete"}
         </Button>
+
+        {props.teamSlug && (
+          <Button
+            onClick={() => {
+              if (!projectSlug) {
+                return;
+              }
+              router.push(`/team/${props.teamSlug}/${projectSlug}`);
+            }}
+            disabled={!secretStored || !projectSlug}
+            className="min-w-28 gap-2"
+          >
+            View Project
+            {projectQuery.isPending ? (
+              <Spinner className="size-4" />
+            ) : (
+              <ExternalLinkIcon className="size-4" />
+            )}
+          </Button>
+        )}
       </DialogFooter>
     </div>
   );