[TOOL-3378] Dashboard: Add Contract to Project UI updates

apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx

@@ -28,7 +28,7 @@ export const Mobile: Story = {
 
 function Story() {
   return (
-    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+    <div className="container flex max-w-[1000px] flex-col gap-8 py-10">
       <BadgeContainer label="Base">
         <DangerSettingCard
           title="This is a title"

apps/dashboard/src/@/components/ui/UnderlineLink.tsx

@@ -0,0 +1,16 @@
+import Link from "next/link";
+import { cn } from "../../lib/utils";
+
+type LinkProps = React.ComponentProps<typeof Link>;
+
+export function UnderlineLink(props: LinkProps) {
+  return (
+    <Link
+      {...props}
+      className={cn(
+        "underline decoration-muted-foreground/50 decoration-dotted underline-offset-[5px] hover:text-foreground hover:decoration-foreground hover:decoration-solid",
+        props.className,
+      )}
+    />
+  );
+}

apps/dashboard/src/@/lib/DashboardRouter.tsx

@@ -117,7 +117,7 @@ function DashboardRouterTopProgressBarInner() {
   const width = isLoading ? progress : 100;
   return (
     <span
-      className="fixed top-0 block h-[2px] bg-blue-500"
+      className="fixed top-0 block h-[3px] bg-foreground"
       style={{
         opacity: isLoading ? "100" : "0",
         width: `${width}%`,

apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardContractMetadata.tsx

@@ -15,6 +15,7 @@ export function useDashboardContractMetadata(contract: ThirdwebContract) {
   return useQuery({
     queryKey: ["contract-metadata-header", contract.chain.id, contract.address],
     queryFn: () => fetchDashboardContractMetadata(contract),
+    refetchOnWindowFocus: false,
   });
 }
 

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.client.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
-import type { ThirdwebContract } from "thirdweb";
+import type { ThirdwebClient, ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
+import type { MinimalTeamsAndProjects } from "../../../../../../components/contract-components/contract-deploy-form/add-to-project-card";
 import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
 import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";
 import { getContractPageSidebarLinks } from "../_utils/getContractPageSidebarLinks";
@@ -13,6 +14,8 @@ export function ContractPageLayoutClient(props: {
   chainMetadata: ChainMetadata;
   contract: ThirdwebContract;
   children: React.ReactNode;
+  teamsAndProjects: MinimalTeamsAndProjects | undefined;
+  client: ThirdwebClient;
 }) {
   const metadataQuery = useContractPageMetadata(props.contract);
   const headerMetadataQuery = useQuery({

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx

@@ -3,8 +3,9 @@ import type { SidebarLink } from "@/components/blocks/Sidebar";
 import { SidebarLayout } from "@/components/blocks/SidebarLayout";
 import type { DashboardContractMetadata } from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata";
 import { DeprecatedAlert } from "components/shared/DeprecatedAlert";
-import type { ThirdwebContract } from "thirdweb";
+import type { ThirdwebClient, ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
+import type { MinimalTeamsAndProjects } from "../../../../../../components/contract-components/contract-deploy-form/add-to-project-card";
 import { ContractMetadata } from "./contract-metadata";
 import { PrimaryDashboardButton } from "./primary-dashboard-button";
 
@@ -14,6 +15,8 @@ export function ContractPageLayout(props: {
   children: React.ReactNode;
   sidebarLinks: SidebarLink[];
   dashboardContractMetadata: DashboardContractMetadata | undefined;
+  client: ThirdwebClient;
+  teamsAndProjects: MinimalTeamsAndProjects | undefined;
   externalLinks:
     | {
         name: string;
@@ -27,6 +30,8 @@ export function ContractPageLayout(props: {
     sidebarLinks,
     dashboardContractMetadata,
     externalLinks,
+    teamsAndProjects,
+    client,
   } = props;
 
   return (
@@ -49,6 +54,8 @@ export function ContractPageLayout(props: {
                   chainSlug: chainMetadata.slug,
                   contractAddress: contract.address,
                 }}
+                teamsAndProjects={teamsAndProjects}
+                client={client}
               />
             </div>
             <DeprecatedAlert chain={chainMetadata} />