[TOOL-4346] Dashboard: Show Project ID in project settings page

Author: MananTank

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} // TODO
+      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;