[BLD-166] Dashboard: Show Manage Contract button if user has used dashboard (#7898)

<!--

## 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 constant `HAS_USED_DASHBOARD` to track user engagement with the dashboard. It updates several components to include the `isDashboardUser` prop, allowing for conditional rendering based on whether the user has previously accessed the dashboard.

### Detailed summary
- Added `HAS_USED_DASHBOARD` constant in `cookie.ts`.
- Updated `NFTPublicPageLayout` to accept `isDashboardUser` prop.
- Modified `SaveLastVisitedTeamPage` to set `HAS_USED_DASHBOARD` cookie.
- Integrated `isDashboardUser` in `NFTPublicPage` and `ERC20PublicPage`.
- Updated `ContractHeaderUI` to conditionally render elements based on `isDashboardUser`.
- Enhanced storybook stories to include `isDashboardUser` prop for testing.

> ✨ 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**
  * Dashboard users are now detected via a persistent flag so public ERC20 and NFT pages can tailor the header UI and surface “Manage Contract” controls when appropriate.
  * Stories updated to cover dashboard vs non-dashboard header states.

* **Bug Fixes**
  * More reliable dashboard-user detection ensures the “Manage Contract” controls display consistently on public contract pages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/@/constants/cookie.ts

@@ -3,3 +3,4 @@ export const COOKIE_PREFIX_TOKEN = "tw_token_";
 
 export const LAST_USED_PROJECT_ID = "last-used-project-id";
 export const LAST_USED_TEAM_ID = "last-used-team-id";
+export const HAS_USED_DASHBOARD = "has-used-dashboard";

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

@@ -99,6 +99,26 @@ export const WithImageAndMultipleSocialUrls: Story = {
       website: mockSocialUrls.website,
     },
     symbol: "SMPL",
+    isDashboardUser: true,
+  },
+};
+
+export const NotDashboardUser: Story = {
+  args: {
+    chainMetadata: ethereumChainMetadata,
+    clientContract: mockContract,
+    contractCreator: null,
+    image: mockTokenImage,
+    name: "Sample Token",
+    socialUrls: {
+      discord: mockSocialUrls.discord,
+      github: mockSocialUrls.github,
+      telegram: mockSocialUrls.telegram,
+      twitter: mockSocialUrls.twitter,
+      website: mockSocialUrls.website,
+    },
+    symbol: "SMPL",
+    isDashboardUser: false,
   },
 };
 
@@ -117,6 +137,7 @@ export const WithContractCreator: Story = {
       website: mockSocialUrls.website,
     },
     symbol: "SMPL",
+    isDashboardUser: true,
   },
 };
 
@@ -131,6 +152,7 @@ export const WithBrokenImageAndSingleSocialUrl: Story = {
       website: mockSocialUrls.website,
     },
     symbol: "SMPL",
+    isDashboardUser: true,
   },
 };
 
@@ -143,6 +165,7 @@ export const WithoutImageAndNoSocialUrls: Story = {
     name: "Sample Token",
     socialUrls: {},
     symbol: "SMPL",
+    isDashboardUser: true,
   },
 };
 
@@ -163,6 +186,7 @@ export const LongNameAndLotsOfSocialUrls: Story = {
       youtube: mockSocialUrls.youtube,
     },
     symbol: "LONG",
+    isDashboardUser: true,
   },
 };
 
@@ -187,6 +211,7 @@ export const AllSocialUrls: Story = {
       youtube: mockSocialUrls.youtube,
     },
     symbol: "SMPL",
+    isDashboardUser: true,
   },
 };
 
@@ -205,6 +230,7 @@ export const InvalidSocialUrls: Story = {
       youtube: mockSocialUrls.youtube,
     },
     symbol: "SMPL",
+    isDashboardUser: true,
   },
 };
 
@@ -220,5 +246,6 @@ export const SomeSocialUrls: Story = {
       website: mockSocialUrls.website,
     },
     symbol: "SMPL",
+    isDashboardUser: true,
   },
 };

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

@@ -9,7 +9,6 @@ import Link from "next/link";
 import { useMemo } from "react";
 import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
-import { useActiveAccount } from "thirdweb/react";
 import { Img } from "@/components/blocks/Img";
 import { Button } from "@/components/ui/button";
 import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
@@ -51,6 +50,7 @@ export function ContractHeaderUI(props: {
   imageClassName?: string;
   contractCreator: string | null;
   className?: string;
+  isDashboardUser: boolean;
 }) {
   const socialUrls = useMemo(() => {
     const socialUrlsValue: { name: string; href: string }[] = [];
@@ -66,7 +66,6 @@ export function ContractHeaderUI(props: {
 
     return socialUrlsValue;
   }, [props.socialUrls]);
-  const activeAccount = useActiveAccount();
 
   const cleanedChainName = props.chainMetadata?.name
     ?.replace("Mainnet", "")
@@ -172,8 +171,7 @@ export function ContractHeaderUI(props: {
             variant="outline"
           />
 
-          {props.contractCreator?.toLowerCase() ===
-            activeAccount?.address?.toLowerCase() && (
+          {props.isDashboardUser && (
             <ToolTipLabel
               contentClassName="max-w-[300px]"
               label={

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

@@ -1,8 +1,10 @@
+import { cookies } from "next/headers";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import { decimals, getActiveClaimCondition } from "thirdweb/extensions/erc20";
 import { GridPattern } from "@/components/ui/background-patterns";
+import { HAS_USED_DASHBOARD } from "@/constants/cookie";
 import { resolveFunctionSelectors } from "@/lib/selectors";
 import { AssetPageView } from "../_components/asset-page-view";
 import { getContractCreator } from "../_components/getContractCreator";
@@ -65,6 +67,9 @@ export async function ERC20PublicPage(props: {
       : undefined,
   ]);
 
+  const cookieStore = await cookies();
+  const isDashboardUser = cookieStore.has(HAS_USED_DASHBOARD);
+
   const buyEmbed = (
     <BuyEmbed
       chainMetadata={props.chainMetadata}
@@ -96,6 +101,7 @@ export async function ERC20PublicPage(props: {
             clientContract={props.clientContract}
             contractCreator={contractCreator}
             image={contractMetadata.image}
+            isDashboardUser={isDashboardUser}
             name={contractMetadata.name}
             socialUrls={
               typeof contractMetadata.social_urls === "object" &&

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx

@@ -14,6 +14,7 @@ export function NFTPublicPageLayout(props: {
   };
   children: React.ReactNode;
   contractCreator: string | null;
+  isDashboardUser: boolean;
 }) {
   return (
     <div className="flex grow flex-col">
@@ -38,6 +39,7 @@ export function NFTPublicPageLayout(props: {
                 : {}
             }
             symbol={props.contractMetadata.symbol}
+            isDashboardUser={props.isDashboardUser}
           />
         </div>
       </div>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx

@@ -1,9 +1,11 @@
+import { cookies } from "next/headers";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import { isTokenByIndexSupported } from "thirdweb/extensions/erc721";
 import { ResponsiveLayout } from "@/components/blocks/Responsive";
 import { Skeleton } from "@/components/ui/skeleton";
+import { HAS_USED_DASHBOARD } from "@/constants/cookie";
 import { resolveFunctionSelectors } from "@/lib/selectors";
 import { cn } from "@/lib/utils";
 import { getContractCreator } from "../_components/getContractCreator";
@@ -100,12 +102,16 @@ export async function NFTPublicPage(props: {
     <Skeleton className="h-[620px] border" />
   ) : null;
 
+  const cookieStore = await cookies();
+  const isDashboardUser = cookieStore.has(HAS_USED_DASHBOARD);
+
   return (
     <NFTPublicPageLayout
       chainMetadata={props.chainMetadata}
       clientContract={props.clientContract}
       contractCreator={contractCreator}
       contractMetadata={contractMetadata}
+      isDashboardUser={isDashboardUser}
     >
       <ResponsiveLayout
         desktop={

apps/dashboard/src/app/(app)/team/components/last-visited-page/SaveLastVisitedPage.tsx

@@ -2,7 +2,7 @@
 
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
-import { LAST_USED_TEAM_ID } from "@/constants/cookie";
+import { HAS_USED_DASHBOARD, LAST_USED_TEAM_ID } from "@/constants/cookie";
 import { setCookie } from "@/utils/cookie";
 import { LAST_VISITED_TEAM_PAGE_PATH } from "./consts";
 
@@ -13,6 +13,7 @@ export function SaveLastVisitedTeamPage(props: { teamId: string }) {
   useEffect(() => {
     setCookie(LAST_VISITED_TEAM_PAGE_PATH, pathname);
     setCookie(LAST_USED_TEAM_ID, props.teamId);
+    setCookie(HAS_USED_DASHBOARD, "true");
   }, [pathname, props.teamId]);
 
   return null;