Skip to content

Conversation

@MananTank
Copy link
Member

@MananTank MananTank commented Aug 22, 2025


PR-Codex overview

This PR introduces a new constant for tracking dashboard usage and integrates it across various components, enhancing user experience by determining if the user has interacted with the dashboard.

Detailed summary

  • Added HAS_USED_DASHBOARD constant in cookie.ts.
  • Updated NFTPublicPageLayout to accept isDashboardUser prop.
  • Set isDashboardUser based on cookie presence in nft-page.tsx and erc20.tsx.
  • Updated ContractHeaderUI to conditionally render elements based on isDashboardUser.
  • Modified storybook stories to include isDashboardUser prop.

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

Summary by CodeRabbit

  • New Features

    • Dashboard users are now tracked with a persistent flag so public ERC20 and NFT pages can tailor the header UI and surface “Manage Contract” controls when appropriate.
    • Component and story variants added to represent dashboard vs non-dashboard header states.
  • Bug Fixes

    • More reliable dashboard-user detection ensures the “Manage Contract” controls display consistently on public contract pages.

@linear
Copy link

linear bot commented Aug 22, 2025

@changeset-bot
Copy link

changeset-bot bot commented Aug 22, 2025

⚠️ No Changeset found

Latest commit: c98e51d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@MananTank MananTank marked this pull request as ready for review August 22, 2025 15:02
@MananTank MananTank requested review from a team as code owners August 22, 2025 15:02
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Aug 22, 2025

Walkthrough

Adds a HAS_USED_DASHBOARD cookie constant, sets that cookie when saving a team’s last-visited page, reads it server-side on ERC20 and NFT public pages to compute isDashboardUser, and forwards that boolean to ContractHeaderUI which now renders “Manage Contract” based on this prop rather than active account.

Changes

Cohort / File(s) Summary
Cookie constants
apps/dashboard/src/@/constants/cookie.ts
Added exported constant HAS_USED_DASHBOARD = "has-used-dashboard".
Team last visited page
apps/dashboard/src/app/(app)/team/components/last-visited-page/SaveLastVisitedPage.tsx
Set HAS_USED_DASHBOARD cookie to "true" when saving last-visited team data.
ERC20 public page & header
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx, .../erc20.tsx
ContractHeaderUI now accepts isDashboardUser: boolean; removed useActiveAccount dependency; erc20.tsx reads HAS_USED_DASHBOARD via next/headers cookies and passes isDashboardUser to header and BuyEmbed.
NFT public page layout & page
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx, .../nft-page.tsx
Added isDashboardUser: boolean prop to NFTPublicPageLayout and pass isDashboardUser from server-side cookie detection.
Stories
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx
Updated stories to include isDashboardUser (added NotDashboardUser and set isDashboardUser: true for others).

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant TeamPage as Team Page (client)
  participant Cookie as Browser Cookies

  User->>TeamPage: Visit team page
  TeamPage->>Cookie: set LAST_VISITED_TEAM_PAGE_PATH
  TeamPage->>Cookie: set LAST_USED_TEAM_ID
  TeamPage->>Cookie: set HAS_USED_DASHBOARD = "true"
  note over Cookie: Flag marks user as a dashboard user
Loading
sequenceDiagram
  autonumber
  participant Client as Browser
  participant Server as Public Page (server)
  participant Cookie as Request Cookies
  participant Header as ContractHeaderUI

  Client->>Server: Request public page
  Server->>Server: Fetch contract metadata & other data
  Server->>Cookie: read HAS_USED_DASHBOARD
  Server->>Header: render with isDashboardUser = Cookie.present
  alt isDashboardUser = true
    Header->>Client: Include "Manage Contract" UI
  else
    Header->>Client: Omit "Manage Contract" UI
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Assessment against linked issues

Objective Addressed Explanation
Add back Manage Contract for dashboard users (BLD-166)

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)
  • TEAM-0000: Entity not found: Issue - Could not find referenced Issue.
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch 08-22-_bld-166_dashboard_show_manage_contract_button_if_user_has_used_dashboard

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions github-actions bot added the Dashboard Involves changes to the Dashboard. label Aug 22, 2025
@vercel
Copy link

vercel bot commented Aug 22, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
thirdweb-www Ready Ready Preview Comment Aug 22, 2025 9:34pm
4 Skipped Deployments
Project Deployment Preview Comments Updated (UTC)
docs-v2 Skipped Skipped Aug 22, 2025 9:34pm
nebula Skipped Skipped Aug 22, 2025 9:34pm
thirdweb_playground Skipped Skipped Aug 22, 2025 9:34pm
wallet-ui Skipped Skipped Aug 22, 2025 9:34pm

@vercel vercel bot temporarily deployed to Preview – wallet-ui August 22, 2025 15:03 Inactive
@vercel vercel bot temporarily deployed to Preview – thirdweb_playground August 22, 2025 15:03 Inactive
@vercel vercel bot temporarily deployed to Preview – docs-v2 August 22, 2025 15:03 Inactive
@vercel vercel bot temporarily deployed to Preview – nebula August 22, 2025 15:03 Inactive
Copy link
Member Author


How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • merge-queue - adds this PR to the back of the merge queue
  • hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

@codecov
Copy link

codecov bot commented Aug 22, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 56.53%. Comparing base (6caba38) to head (98fab93).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #7898   +/-   ##
=======================================
  Coverage   56.53%   56.53%           
=======================================
  Files         904      904           
  Lines       58592    58592           
  Branches     4143     4143           
=======================================
  Hits        33126    33126           
  Misses      25360    25360           
  Partials      106      106           
Flag Coverage Δ
packages 56.53% <ø> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions
Copy link
Contributor

github-actions bot commented Aug 22, 2025

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
thirdweb (esm) 64.06 KB (0%) 1.3 s (0%) 279 ms (+271.04% 🔺) 1.6 s
thirdweb (cjs) 357.05 KB (0%) 7.2 s (0%) 741 ms (+16.01% 🔺) 7.9 s
thirdweb (minimal + tree-shaking) 5.73 KB (0%) 115 ms (0%) 59 ms (+1303.99% 🔺) 174 ms
thirdweb/chains (tree-shaking) 526 B (0%) 11 ms (0%) 50 ms (+2666.06% 🔺) 61 ms
thirdweb/react (minimal + tree-shaking) 19.15 KB (0%) 383 ms (0%) 100 ms (+568.44% 🔺) 483 ms

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx (1)

174-198: Revise CTA copy, add accessibility label, and correct the dashboard route

In ContractHeader.tsx (apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx, lines 174–198):

  • Simplify the tooltip and button text for clarity.
  • Add an aria-label to the <Link> for screen-reader access.
  • Update the href to use the actual internal route
    /team/${teamSlug}/${projectSlug}/contract/${chainIdOrSlug}/${contractAddress}
    (see apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/page.tsx).
--- a/.../ContractHeader.tsx
+++ b/.../ContractHeader.tsx
@@ 174,198
- {props.isDashboardUser && (
-   <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>
- )}
+ {props.isDashboardUser && (
+   <ToolTipLabel
+     contentClassName="max-w-[300px]"
+     label={<>Open this contract in the dashboard to manage it.</>}
+   >
+     <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
+         aria-label="Manage this contract in the dashboard"
+         href={`/team/${teamSlug}/${projectSlug}/contract/${props.chainMetadata.slug}/${props.clientContract.address}`}
+       >
+         <Settings2Icon className="size-3.5 text-muted-foreground" />
+         Manage Contract
+       </Link>
+     </Button>
+   </ToolTipLabel>
+ )}

Note: you’ll need to import or derive teamSlug and projectSlug (e.g. via Next.js’s useParams()) so the link resolves correctly.

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

53-54: Type the new prop, and narrow socialUrls shape

Good call surfacing isDashboardUser in the public API. While touching the signature, let’s:

  • replace socialUrls: object with a precise shape (Record<string, string>)
  • extract a ContractHeaderProps type alias
  • add an explicit return type on the component

Apply this diff to the function signature:

-export function ContractHeaderUI(props: {
-  name: string;
-  symbol: string | undefined;
-  image: string | undefined;
-  chainMetadata: ChainMetadata;
-  clientContract: ThirdwebContract;
-  socialUrls: object;
-  imageClassName?: string;
-  contractCreator: string | null;
-  className?: string;
-  isDashboardUser: boolean;
-}) {
+export function ContractHeaderUI(props: ContractHeaderProps): JSX.Element {

And add this type alias above the component (e.g., after platformToIcons):

type ContractHeaderProps = {
  name: string;
  symbol: string | undefined;
  image: string | undefined;
  chainMetadata: ChainMetadata;
  clientContract: ThirdwebContract;
  socialUrls: Record<string, string>;
  imageClassName?: string;
  contractCreator: string | null;
  className?: string;
  isDashboardUser: boolean;
};

137-159: Avoid toSorted for broader runtime compatibility

Array.prototype.toSorted is still relatively new and may lack polyfills in some environments. Replace with a stable pattern.

-              {socialUrls
-                .toSorted((a, b) => {
+              {socialUrls
+                .slice()
+                .sort((a, b) => {
                   const aIcon = platformToIcons[a.name.toLowerCase()];
                   const bIcon = platformToIcons[b.name.toLowerCase()];

                   if (aIcon && bIcon) {
                     return 0;
                   }

                   if (aIcon) {
                     return -1;
                   }

                   return 1;
                 })
apps/dashboard/src/app/(app)/team/components/last-visited-page/SaveLastVisitedPage.tsx (2)

5-5: Import is correct; consider explicit return type on component

Import looks good. Since this component returns null, consider adding an explicit return type for clarity and to align with the repo’s TypeScript guideline.

Example:

export function SaveLastVisitedTeamPage(props: { teamId: string }): null {
  // ...
  return null;
}

16-17: Cookie Utility Signature & Defaults

The setCookie function in apps/dashboard/src/@/utils/cookie.ts is defined as

export function setCookie(name: string, value: string, days = 365) {  }

which means:

  • Persistence is controlled via the days parameter (default 365 days).
  • There is no path option, so the cookie is scoped to the current path by default.

To ensure this flag is both broadly available (path = “/”) and survives browser restarts:

• If you only need to adjust persistence, you can pass a 3rd arg in days, e.g.:

setCookie(HAS_USED_DASHBOARD, "true", 180);

• If you also want to scope the cookie to /, consider refactoring the util to accept an options object:

// apps/dashboard/src/@/utils/cookie.ts
-export function setCookie(name: string, value: string, days = 365) {
-  const date = new Date();
-  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
-  document.cookie = `${name}=${value}; expires=${date.toUTCString()}`;
-}
+interface CookieOptions {
+  days?: number;
+  path?: string;
+}
+
+export function setCookie(
+  name: string,
+  value: string,
+  options: CookieOptions = {}
+) {
+  const { days = 365, path = "/" } = options;
+  const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000).toUTCString();
+  document.cookie = `${name}=${value}; expires=${expires}; path=${path}`;
+}

You could then call in your effect:

setCookie(HAS_USED_DASHBOARD, "true", { days: 180, path: "/" });

Let me know if you’d like assistance wiring up this optional refactor!

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

70-72: Don’t await cookies(); consider checking the cookie value explicitly

cookies() is synchronous; await is unnecessary. Also, since you set "true" as the value, checking the value increases resilience if we ever set it to "false" (or remove it) later.

Apply this diff:

-  const cookieStore = await cookies();
-  const isDashboardUser = cookieStore.has(HAS_USED_DASHBOARD);
+  const cookieStore = cookies();
+  const isDashboardUser = cookieStore.get(HAS_USED_DASHBOARD)?.value === "true";

1-1: Mark as a server-only module

Add the guard to prevent accidental client bundling.

+import "server-only";
 import { cookies } from "next/headers";
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 6caba38 and e3a4173.

📒 Files selected for processing (4)
  • apps/dashboard/src/@/constants/cookie.ts (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx (3 hunks)
  • apps/dashboard/src/app/(app)/team/components/last-visited-page/SaveLastVisitedPage.tsx (2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from @/types or local types.ts barrels
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose

Files:

  • apps/dashboard/src/@/constants/cookie.ts
  • apps/dashboard/src/app/(app)/team/components/last-visited-page/SaveLastVisitedPage.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)

Files:

  • apps/dashboard/src/@/constants/cookie.ts
  • apps/dashboard/src/app/(app)/team/components/last-visited-page/SaveLastVisitedPage.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from @/components/ui/* (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Use NavLink for internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Use cn() from @/lib/utils for conditional class logic
Use design system tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components (Node edge): Start files with import "server-only";
Client Components (browser): Begin files with 'use client';
Always call getAuthToken() to retrieve JWT from cookies on server side
Use Authorization: Bearer header – never embed tokens in URLs
Return typed results (e.g., Project[], User[]) – avoid any
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stable queryKeys for React Query cache hits
Configure staleTime/cacheTime in React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never import posthog-js in server components

Files:

  • apps/dashboard/src/@/constants/cookie.ts
  • apps/dashboard/src/app/(app)/team/components/last-visited-page/SaveLastVisitedPage.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
🧠 Learnings (6)
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Reading cookies/headers with `next/headers` (`getAuthToken()`, `cookies()`).

Applied to files:

  • apps/dashboard/src/@/constants/cookie.ts
  • apps/dashboard/src/app/(app)/team/components/last-visited-page/SaveLastVisitedPage.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
📚 Learning: 2025-06-17T18:30:52.976Z
Learnt from: MananTank
PR: thirdweb-dev/js#7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
📚 Learning: 2025-05-27T19:54:55.885Z
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
🧬 Code graph analysis (2)
apps/dashboard/src/app/(app)/team/components/last-visited-page/SaveLastVisitedPage.tsx (1)
apps/dashboard/src/@/constants/cookie.ts (1)
  • HAS_USED_DASHBOARD (6-6)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx (1)
apps/dashboard/src/@/constants/cookie.ts (1)
  • HAS_USED_DASHBOARD (6-6)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
  • GitHub Check: E2E Tests (pnpm, vite)
  • GitHub Check: E2E Tests (pnpm, esbuild)
  • GitHub Check: Unit Tests
  • GitHub Check: Size
  • GitHub Check: E2E Tests (pnpm, webpack)
  • GitHub Check: Build Packages
  • GitHub Check: Lint Packages
  • GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
apps/dashboard/src/@/constants/cookie.ts (1)

6-6: Cookie key addition looks good; confirm scope and retention

HAS_USED_DASHBOARD is straightforward. Please confirm:

  • we want simple presence-based detection (vs checking value)
  • cookie should be accessible across the whole dashboard domain (path=/) and persist beyond the session

If persistence and global scope are desired, ensure the writer sets appropriate options (see comment in SaveLastVisitedPage).

@MananTank MananTank force-pushed the 08-22-_bld-166_dashboard_show_manage_contract_button_if_user_has_used_dashboard branch from e3a4173 to c98e51d Compare August 22, 2025 15:18
@vercel vercel bot temporarily deployed to Preview – nebula August 22, 2025 15:18 Inactive
@vercel vercel bot temporarily deployed to Preview – wallet-ui August 22, 2025 15:18 Inactive
@vercel vercel bot temporarily deployed to Preview – thirdweb_playground August 22, 2025 15:18 Inactive
@vercel vercel bot temporarily deployed to Preview – docs-v2 August 22, 2025 15:18 Inactive
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

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

106-122: Add a Storybook control + set default args to avoid duplication

The dedicated NotDashboardUser story is useful. To reduce repetition across stories and make it easy to toggle, set a default args and expose a boolean control for isDashboardUser at the meta level.

Apply this diff to add controls/defaults:

 const meta = {
   component: ContractHeaderUI,
   decorators: [
@@
   parameters: {
     nextjs: {
       appDirectory: true,
     },
   },
+  argTypes: {
+    isDashboardUser: { control: "boolean" },
+  },
+  args: {
+    isDashboardUser: true,
+  },
   title: "ERC20/ContractHeader",
 } satisfies Meta<typeof ContractHeaderUI>;

Then keep NotDashboardUser as the lone override with isDashboardUser: false.


140-140: DRY: Remove repeated isDashboardUser: true when defaulted in meta

If you accept the meta default, these explicit fields become redundant. Consider removing them for brevity.

Example cleanup:

   symbol: "SMPL",
-  isDashboardUser: true,

Also applies to: 155-155, 168-168, 189-189, 214-214, 233-233, 249-249

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

105-107: Remove unnecessary await on cookies()

cookies() from next/headers is synchronous. The await is unnecessary and slightly misleading.

Apply this diff:

-  const cookieStore = await cookies();
+  const cookieStore = cookies();

1-1: Mark as server-only to prevent accidental client bundling

This file executes entirely on the server (uses cookies() and no client hooks). Add the server-only directive to ensure it never gets bundled for the client.

Apply this diff:

+import "server-only";
 import { cookies } from "next/headers";
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx (1)

10-14: Optional: strengthen types to avoid repeated runtime checks

You’re guarding contractMetadata.image and social_urls at runtime. If a shared type exists, prefer importing it; otherwise introduce a narrow local type to reduce typeof checks and improve readability.

Example:

-export function NFTPublicPageLayout(props: {
-  clientContract: ThirdwebContract;
-  chainMetadata: ChainMetadata;
-  contractMetadata: {
-    name: string;
-    symbol: string;
-    [key: string]: unknown;
-  };
+type SocialUrls = Partial<Record<
+  "custom" | "discord" | "github" | "instagram" | "linkedin" | "reddit" | "telegram" | "tiktok" | "twitter" | "website" | "youtube",
+  string
+>>;
+
+type ContractMetadataLite = {
+  name: string;
+  symbol: string;
+  image?: string;
+  social_urls?: SocialUrls;
+};
+
+export function NFTPublicPageLayout(props: {
+  clientContract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+  contractMetadata: ContractMetadataLite;
   children: React.ReactNode;
   contractCreator: string | null;
   isDashboardUser: boolean;
 }) {
@@
-            image={
-              typeof props.contractMetadata.image === "string"
-                ? props.contractMetadata.image
-                : undefined
-            }
+            image={props.contractMetadata.image}
@@
-            socialUrls={
-              typeof props.contractMetadata.social_urls === "object" &&
-              props.contractMetadata.social_urls !== null
-                ? props.contractMetadata.social_urls
-                : {}
-            }
+            socialUrls={props.contractMetadata.social_urls ?? {}}

If a canonical metadata type already exists in @/types, re-use it instead of introducing a new local alias.

Also applies to: 34-41

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between e3a4173 and c98e51d.

📒 Files selected for processing (7)
  • apps/dashboard/src/@/constants/cookie.ts (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx (8 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx (3 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/team/components/last-visited-page/SaveLastVisitedPage.tsx (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
  • apps/dashboard/src/@/constants/cookie.ts
  • apps/dashboard/src/app/(app)/team/components/last-visited-page/SaveLastVisitedPage.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from @/types or local types.ts barrels
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose

Files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)

Files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from @/components/ui/* (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Use NavLink for internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Use cn() from @/lib/utils for conditional class logic
Use design system tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components (Node edge): Start files with import "server-only";
Client Components (browser): Begin files with 'use client';
Always call getAuthToken() to retrieve JWT from cookies on server side
Use Authorization: Bearer header – never embed tokens in URLs
Return typed results (e.g., Project[], User[]) – avoid any
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stable queryKeys for React Query cache hits
Configure staleTime/cacheTime in React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never import posthog-js in server components

Files:

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

📄 CodeRabbit inference engine (CLAUDE.md)

For new UI components, add Storybook stories (*.stories.tsx) alongside the code

Files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx
🧠 Learnings (10)
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Reading cookies/headers with `next/headers` (`getAuthToken()`, `cookies()`).

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Pages requiring fast transitions where data is prefetched on the client.

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Always call `getAuthToken()` to retrieve JWT from cookies on server side

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
📚 Learning: 2025-05-27T19:54:55.885Z
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Create light wrappers (e.g. `fetchJson`) that automatically attach the JWT from cookies/session when calling internal API routes.

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.

Applied to files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx (2)
apps/dashboard/src/@/constants/cookie.ts (1)
  • HAS_USED_DASHBOARD (6-6)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx (1)
  • NFTPublicPageLayout (7-51)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
  • GitHub Check: Size
  • GitHub Check: E2E Tests (pnpm, webpack)
  • GitHub Check: E2E Tests (pnpm, esbuild)
  • GitHub Check: E2E Tests (pnpm, vite)
  • GitHub Check: Unit Tests
  • GitHub Check: Build Packages
  • GitHub Check: Lint Packages
  • GitHub Check: Analyze (javascript)
🔇 Additional comments (6)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx (1)

102-104: Prop wired correctly in stories

Adding isDashboardUser: true ensures stories reflect the new API surface of ContractHeaderUI. Looks good.

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

8-8: Import path for cookie constant is consistent with alias

Using @/constants/cookie matches the alias used elsewhere in dashboard code. No issues.


105-107: Confirm dynamic rendering impact of cookies()

Next.js’ App Router treats calls to cookies() as a “Dynamic Function,” opting the route into dynamic rendering at request time and disabling full static optimization (stackoverflow.com, medium.com). We ran a search across apps/dashboard/src/app/**/public-pages/nft/*.{ts,tsx} and found no explicit segment config (e.g. export const dynamic, revalidate, fetchCache, runtime or generateStaticParams) to override this behavior.

Please review whether the conditional “Manage Contract” button UX gain outweighs the loss of CDN-backed static caching. If retaining static generation is important:

  • Move the HAS_USED_DASHBOARD check into a lightweight client component (e.g., a “use client” boundary) so the page itself can remain static.
  • Or infer dashboard-user status via a header-only mechanism or client-side data fetch after hydration.

114-115: All ContractHeaderUI and NFTPublicPageLayout call sites include isDashboardUser

Ran a full consistency sweep across apps/dashboard/src and confirmed every instance of both components now passes the isDashboardUser prop. No missing usages were found, so the prop plumbing is complete.

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

17-17: API extension is minimal and clear

Adding isDashboardUser: boolean to the layout’s props is straightforward and keeps concerns localized.


42-42: Prop forwarded correctly to ContractHeaderUI

The boolean is passed through as intended; aligns with the ERC20 header usage.

@graphite-app
Copy link
Contributor

graphite-app bot commented Aug 22, 2025

Merge activity

…hboard (#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 -->
@graphite-app graphite-app bot force-pushed the 08-22-_bld-166_dashboard_show_manage_contract_button_if_user_has_used_dashboard branch from c98e51d to 98fab93 Compare August 22, 2025 21:27
@vercel vercel bot temporarily deployed to Preview – docs-v2 August 22, 2025 21:27 Inactive
@vercel vercel bot temporarily deployed to Preview – wallet-ui August 22, 2025 21:27 Inactive
@vercel vercel bot temporarily deployed to Preview – thirdweb_playground August 22, 2025 21:27 Inactive
@vercel vercel bot temporarily deployed to Preview – nebula August 22, 2025 21:27 Inactive
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

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

102-104: Deduplicate isDashboardUser across stories; set a default in meta and add a Storybook control.

You’re repeating isDashboardUser: true in most stories. Prefer a default at the meta level plus a boolean control so reviewers can toggle the state interactively. Keep the explicit false only where you need to showcase the non-dashboard behavior.

Apply these removals within the shown ranges:

-    isDashboardUser: true,

Then update the meta object to set a default and expose a control (outside the selected ranges; shown here for clarity):

const meta = {
  component: ContractHeaderUI,
  decorators: [
    (Story) => (
      <ThirdwebProvider>
        <div className="container max-w-7xl py-10">
          <Story />
        </div>
      </ThirdwebProvider>
    ),
  ],
  parameters: { nextjs: { appDirectory: true } },
  title: "ERC20/ContractHeader",
  // New: default args + control
  args: {
    isDashboardUser: true,
  },
  argTypes: {
    isDashboardUser: {
      control: { type: "boolean" },
      description:
        "Whether the viewer has used the Dashboard; toggles Manage Contract affordances.",
    },
  },
} satisfies Meta<typeof ContractHeaderUI>;

Also applies to: 140-141, 155-156, 168-169, 189-190, 214-215, 233-234, 249-250


106-122: Good negative-state coverage; add a simple play assertion to prevent regressions.

Nice addition of a “non-dashboard user” story. Add a play function to assert that “Manage Contract” is not rendered so future refactors can’t silently break the condition.

Apply this diff within this story block:

 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,
   },
+  // Assert "Manage Contract" is not visible for non-dashboard users
+  async play({ canvasElement }) {
+    const { within } = await import("@storybook/test");
+    const canvas = within(canvasElement);
+    const link = canvas.queryByRole("link", { name: /manage contract/i });
+    const btn = canvas.queryByRole("button", { name: /manage contract/i });
+    if (link || btn) {
+      throw new Error('Expected "Manage Contract" to be hidden when isDashboardUser=false');
+    }
+  },
 };

Note: If your project pins SB v7 and doesn’t expose @storybook/test, import from @storybook/testing-library instead. If desired, mirror this with a positive assertion in one of the isDashboardUser=true stories.


12-17: Pass the Thirdweb client into the provider to avoid context gaps.

ThirdwebProvider can accept a client prop. Since your mocks are created with storybookThirdwebClient, pass it through the provider to ensure any components under test that rely on context read the same client instance.

-      <ThirdwebProvider>
+      <ThirdwebProvider client={storybookThirdwebClient}>
         <div className="container max-w-7xl py-10">
           <Story />
         </div>
       </ThirdwebProvider>
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between c98e51d and 98fab93.

📒 Files selected for processing (7)
  • apps/dashboard/src/@/constants/cookie.ts (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx (8 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx (3 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx (2 hunks)
  • apps/dashboard/src/app/(app)/team/components/last-visited-page/SaveLastVisitedPage.tsx (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (6)
  • apps/dashboard/src/@/constants/cookie.ts
  • apps/dashboard/src/app/(app)/team/components/last-visited-page/SaveLastVisitedPage.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from @/types or local types.ts barrels
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose

Files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)

Files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from @/components/ui/* (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Use NavLink for internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Use cn() from @/lib/utils for conditional class logic
Use design system tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components (Node edge): Start files with import "server-only";
Client Components (browser): Begin files with 'use client';
Always call getAuthToken() to retrieve JWT from cookies on server side
Use Authorization: Bearer header – never embed tokens in URLs
Return typed results (e.g., Project[], User[]) – avoid any
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stable queryKeys for React Query cache hits
Configure staleTime/cacheTime in React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never import posthog-js in server components

Files:

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

📄 CodeRabbit inference engine (CLAUDE.md)

For new UI components, add Storybook stories (*.stories.tsx) alongside the code

Files:

  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
  • GitHub Check: E2E Tests (pnpm, webpack)
  • GitHub Check: E2E Tests (pnpm, vite)
  • GitHub Check: E2E Tests (pnpm, esbuild)
  • GitHub Check: Size
  • GitHub Check: Build Packages
  • GitHub Check: Unit Tests
  • GitHub Check: Lint Packages
  • GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx (1)

6-6: ✅ ContractHeaderUI prop typing and usage verified

ContractHeaderUI correctly declares isDashboardUser: boolean (non-optional) and uses it exclusively to guard the “Manage Contract” button. Both ERC20 and NFT public pages compute and pass this prop as intended.

• In apps/dashboard/src/app/(…)/public-pages/erc20/_components/ContractHeader.tsx
– Prop signature includes isDashboardUser: boolean (line 53)
– Conditional rendering {props.isDashboardUser && (…)} wraps the Manage Contract affordance (lines 174–184)
• In apps/dashboard/src/app/(…)/public-pages/erc20/erc20.tsx
const isDashboardUser = cookieStore.has(HAS_USED_DASHBOARD) and passed via isDashboardUser={isDashboardUser} (around line 104)
• In apps/dashboard/src/app/(…)/public-pages/nft/nft-page-layout.tsx
– Layout props include isDashboardUser: boolean (line 17) and passed into <ContractHeaderUI … isDashboardUser={props.isDashboardUser} /> (line 42)

No further changes required.

@graphite-app graphite-app bot merged commit 98fab93 into main Aug 22, 2025
25 checks passed
@graphite-app graphite-app bot deleted the 08-22-_bld-166_dashboard_show_manage_contract_button_if_user_has_used_dashboard branch August 22, 2025 21:35
@vercel vercel bot temporarily deployed to Production – docs-v2 August 22, 2025 21:35 Inactive
@vercel vercel bot temporarily deployed to Production – wallet-ui August 22, 2025 21:35 Inactive
@vercel vercel bot temporarily deployed to Production – thirdweb_playground August 22, 2025 21:35 Inactive
@vercel vercel bot temporarily deployed to Production – nebula August 22, 2025 21:35 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Dashboard Involves changes to the Dashboard.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants