[TOOL-4833] Add Manage Contract button in new public contract pages (#7434)

<!--

## 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 enhancing the handling of `projectSlug` and `teamSlug` properties across various components in the application, improving navigation and data management related to teams and projects.

### Detailed summary
- Added `projectSlug` and `teamSlug` props in several components including `cards.tsx`, `DeployedContractsPage.tsx`, and `layout.tsx`.
- Updated links to include `teamSlug` and `projectSlug` for better navigation.
- Introduced new API function `getContractImportedProjects` to fetch projects with imported contracts.
- Created `TeamSelectorCard` and `ProjectAndTeamSelectorCard` components for selecting teams and projects.
- Improved UI elements such as buttons and tooltips in `ContractHeaderUI` and `ImportModal`.
- Enhanced type definitions for better type safety and clarity in components.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a team and project selector UI, enabling users to easily select teams or projects from visual cards.
  - Added a project and team selector for associating contracts, allowing users to view, select, or import contracts into projects across teams.
  - Enhanced contract management by providing direct navigation to contract pages based on project selection.
  - Improved contract view links to include team and project information in URLs for clearer navigation.
  - Added functionality to fetch projects that have imported specific contracts within teams.

- **UI Improvements**
  - Updated button styles with rounded edges for a polished look.
  - Added copy address and manage contract buttons with icons and tooltips for enhanced usability.

- **Storybook/Documentation**
  - Added Storybook stories to visually test and demonstrate the new team and project selector components under various scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/@/api/getProjectContracts.ts

@@ -1,4 +1,5 @@
 import "server-only";
+import { getAddress } from "thirdweb";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 
 export type ProjectContract = {
@@ -43,3 +44,43 @@ export async function getProjectContracts(options: {
 
   return data.result;
 }
+
+export type PartialProject = {
+  id: string;
+  name: string;
+  slug: string;
+  image: string | null;
+};
+
+/**
+ * get a list of projects within a team that have a given contract imported
+ */
+export async function getContractImportedProjects(options: {
+  teamId: string;
+  authToken: string;
+  chainId: number;
+  contractAddress: string;
+}) {
+  const url = new URL(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${options.teamId}/projects/contracts/lookup?chainId=${options.chainId}&contractAddress=${getAddress(options.contractAddress)}`,
+  );
+
+  const res = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${options.authToken}`,
+    },
+  });
+
+  if (!res.ok) {
+    const errorMessage = await res.text();
+    console.error("Error fetching: /projects/contracts/lookup");
+    console.error(errorMessage);
+    return [];
+  }
+
+  const data = (await res.json()) as {
+    result: PartialProject[];
+  };
+
+  return data.result;
+}

apps/dashboard/src/@/components/contracts/import-contract/modal.tsx

@@ -37,6 +37,8 @@ type ImportModalProps = {
   onClose: () => void;
   teamId: string;
   projectId: string;
+  projectSlug: string;
+  teamSlug: string;
   client: ThirdwebClient;
   type: "contract" | "asset";
   onSuccess?: () => void;
@@ -69,7 +71,9 @@ export const ImportModal: React.FC<ImportModalProps> = (props) => {
           client={props.client}
           onSuccess={props.onSuccess}
           projectId={props.projectId}
+          projectSlug={props.projectSlug}
           teamId={props.teamId}
+          teamSlug={props.teamSlug}
           type={props.type}
         />
       </DialogContent>
@@ -96,6 +100,8 @@ const importFormSchema = z.object({
 function ImportForm(props: {
   teamId: string;
   projectId: string;
+  teamSlug: string;
+  projectSlug: string;
   client: ThirdwebClient;
   type: "contract" | "asset";
   onSuccess?: () => void;
@@ -216,7 +222,7 @@ function ImportForm(props: {
           addContractToProject.data?.result ? (
             <Button asChild className="gap-2">
               <Link
-                href={`/${chainSlug}/${addContractToProject.data.result.contractAddress}`}
+                href={`/team/${props.teamSlug}/${props.projectSlug}/contract/${chainSlug}/${addContractToProject.data.result.contractAddress}`}
                 rel="noopener noreferrer"
                 target="_blank"
               >

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx

@@ -83,7 +83,7 @@ export const PrimaryDashboardButton: React.FC<AddToDashboardCardProps> = ({
   // if user is on a project page
   if (projectMeta) {
     return (
-      <Button asChild variant="default">
+      <Button asChild className="rounded-full" variant="default">
         <Link
           className="gap-2"
           href={`/${contractInfo.chainSlug}/${contractAddress}`}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx

@@ -1,4 +1,4 @@
-import { ExternalLinkIcon, GlobeIcon } from "lucide-react";
+import { ExternalLinkIcon, GlobeIcon, Settings2Icon } from "lucide-react";
 import Link from "next/link";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
@@ -111,6 +111,13 @@ export function ContractHeaderUI(props: {
                 )}
               </Link>
 
+              <CopyAddressButton
+                address={props.clientContract.address}
+                className="rounded-full bg-card w-[30px] h-[30px] p-0 [&>span]:hidden [&>svg]:text-foreground"
+                copyIconPosition="left"
+                variant="outline"
+              />
+
               {socialUrls
                 .toSorted((a, b) => {
                   const aIcon = platformToIcons[a.name.toLowerCase()];
@@ -140,12 +147,29 @@ export function ContractHeaderUI(props: {
 
         {/* bottom row */}
         <div className="flex flex-row flex-wrap items-center gap-2">
-          <CopyAddressButton
-            address={props.clientContract.address}
-            className="rounded-full bg-card px-2.5 py-1.5 text-xs"
-            copyIconPosition="left"
-            variant="outline"
-          />
+          <ToolTipLabel
+            contentClassName="max-w-[300px]"
+            label={
+              <>
+                View this contract in thirdweb dashboard to view contract
+                management interface
+              </>
+            }
+          >
+            <Button
+              asChild
+              className="rounded-full bg-card gap-1.5 text-xs py-1.5 px-2.5 h-auto"
+              size="sm"
+              variant="outline"
+            >
+              <Link
+                href={`/team/~/~/contract/${props.chainMetadata.slug}/${props.clientContract.address}`}
+              >
+                <Settings2Icon className="size-3.5 text-muted-foreground" />
+                Manage Contract
+              </Link>
+            </Button>
+          </ToolTipLabel>
 
           {explorersToShow?.map((validBlockExplorer) => (
             <BadgeLink

apps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsx

@@ -10,6 +10,8 @@ import { Button } from "@/components/ui/button";
 export function DeployedContractsPageHeader(props: {
   teamId: string;
   projectId: string;
+  projectSlug: string;
+  teamSlug: string;
   client: ThirdwebClient;
 }) {
   const [importModalOpen, setImportModalOpen] = useState(false);
@@ -23,7 +25,9 @@ export function DeployedContractsPageHeader(props: {
           setImportModalOpen(false);
         }}
         projectId={props.projectId}
+        projectSlug={props.projectSlug}
         teamId={props.teamId}
+        teamSlug={props.teamSlug}
         type="contract"
       />
 

apps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsx

@@ -10,6 +10,8 @@ import { Button } from "@/components/ui/button";
 export function DeployViaCLIOrImportCard(props: {
   teamId: string;
   projectId: string;
+  projectSlug: string;
+  teamSlug: string;
   client: ThirdwebClient;
 }) {
   const [importModalOpen, setImportModalOpen] = useState(false);
@@ -23,7 +25,9 @@ export function DeployViaCLIOrImportCard(props: {
           setImportModalOpen(false);
         }}
         projectId={props.projectId}
+        projectSlug={props.projectSlug}
         teamId={props.teamId}
+        teamSlug={props.teamSlug}
         type="contract"
       />
 

apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx

@@ -23,7 +23,9 @@ export function DeployedContractsPage(props: {
       <DeployViaCLIOrImportCard
         client={props.client}
         projectId={props.projectId}
+        projectSlug={props.projectSlug}
         teamId={props.teamId}
+        teamSlug={props.teamSlug}
       />
     </div>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/layout.tsx

@@ -43,7 +43,9 @@ export default async function Layout(props: {
       <DeployedContractsPageHeader
         client={client}
         projectId={project.id}
+        projectSlug={params.project_slug}
         teamId={team.id}
+        teamSlug={params.team_slug}
       />
       <TabPathLinks
         links={[

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/cards.tsx

@@ -33,7 +33,9 @@ export function Cards(props: {
           reportAssetImportSuccessful();
         }}
         projectId={props.projectId}
+        projectSlug={props.projectSlug}
         teamId={props.teamId}
+        teamSlug={props.teamSlug}
         type="asset"
       />
 

apps/dashboard/src/app/(app)/team/~/[[...paths]]/components/team-selector.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { teamStub } from "@/storybook/stubs";
+import { storybookThirdwebClient } from "@/storybook/utils";
+import { TeamSelectorCard } from "./team-selector";
+
+const meta: Meta<typeof TeamSelectorCard> = {
+  component: TeamSelectorCard,
+  decorators: [
+    (Story) => (
+      <div className="py-20 flex justify-center items-center">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  title: "selectors/TeamSelectorCard",
+};
+
+export default meta;
+type Story = StoryObj<typeof TeamSelectorCard>;
+
+export const TwoTeams: Story = {
+  args: {
+    client: storybookThirdwebClient,
+    paths: undefined,
+    searchParams: "",
+    teams: [teamStub("1", "free"), teamStub("2", "starter")],
+  },
+};
+
+export const FiveTeams: Story = {
+  args: {
+    client: storybookThirdwebClient,
+    paths: undefined,
+    searchParams: "",
+    teams: [
+      teamStub("1", "free"),
+      teamStub("2", "starter"),
+      teamStub("3", "growth"),
+      teamStub("4", "pro"),
+      teamStub("5", "scale"),
+    ],
+  },
+};
+
+export const WithSearchParams: Story = {
+  args: {
+    client: storybookThirdwebClient,
+    paths: undefined,
+    searchParams: "tab=overview&section=analytics",
+    teams: [
+      teamStub("1", "free"),
+      teamStub("2", "starter"),
+      teamStub("3", "growth"),
+    ],
+  },
+};
+
+export const WithPaths: Story = {
+  args: {
+    client: storybookThirdwebClient,
+    paths: ["projects", "123", "settings"],
+    searchParams: "",
+    teams: [teamStub("1", "free"), teamStub("2", "starter")],
+  },
+};
+
+export const WithPathsAndSearchParams: Story = {
+  args: {
+    client: storybookThirdwebClient,
+    paths: ["projects", "123", "settings"],
+    searchParams: "tab=overview&section=analytics",
+    teams: [
+      teamStub("1", "free"),
+      teamStub("2", "starter"),
+      teamStub("3", "growth"),
+      teamStub("4", "pro"),
+    ],
+  },
+};