From 9a63cd4b57df8db0f3783816253d10db2207246a Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Thu, 1 May 2025 22:55:35 +0000
Subject: [PATCH] [TOOL-4346] Dashboard: Show Project ID in project settings
 page (#6917)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 introduces a new component, `ProjectIdCard`, to display the project ID in the `ProjectGeneralSettingsPage`. This component allows users to copy the project ID easily.

### Detailed summary
- Added `ProjectIdCard` component to display project ID.
- Integrated `ProjectIdCard` into `ProjectGeneralSettingsPage`.
- `ProjectIdCard` includes a `SettingsCard` with a title, description, and a `CopyTextButton` for copying the project ID.

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

<!-- end pr-codex -->
---
 .../settings/ProjectGeneralSettingsPage.tsx   | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.tsx
index 02472cfbc33..49713dd352d 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.tsx
@@ -358,6 +358,8 @@ export function ProjectGeneralSettingsPageUI(props: {
             rotateSecretKey={props.rotateSecretKey}
           />
 
+          <ProjectIdCard project={project} />
+
           <AllowedDomainsSetting
             form={form}
             isUpdatingProject={updateProject.isPending}
@@ -434,6 +436,31 @@ function ProjectNameSetting(props: {
   );
 }
 
+function ProjectIdCard(props: {
+  project: Project;
+}) {
+  return (
+    <SettingsCard
+      header={{
+        title: "Project ID",
+        description: "This is your project's ID on thirdweb",
+      }}
+      bottomText="Used when interacting with the thirdweb API"
+      noPermissionText={undefined}
+      errorText={undefined}
+    >
+      <CopyTextButton
+        textToCopy={props.project.id}
+        textToShow={props.project.id}
+        variant="outline"
+        className="w-full justify-between truncate bg-background px-3 py-2 font-mono text-muted-foreground lg:w-[450px]"
+        tooltip="Copy Project ID"
+        copyIconPosition="right"
+      />
+    </SettingsCard>
+  );
+}
+
 function ProjectImageSetting(props: {
   updateProjectImage: (file: File | undefined) => Promise<void>;
   avatar: string | null;