Skip to content

Conversation

@Yash094
Copy link
Member

@Yash094 Yash094 commented Sep 5, 2025


PR-Codex overview

This PR enhances the IntegrateAPIKeyCodeTabs component by adding new tab options for api and curl. It also updates the default tab selection and introduces code examples for making API requests in both JavaScript and cURL formats.

Detailed summary

  • Added api and curl to the TabKey type.
  • Updated tabNames to include labels for api and curl.
  • Changed the default tab in useState from ts to api.
  • Added apiCodeExample function for JavaScript API request.
  • Added curlCodeExample function for cURL API request.
  • Updated the render method to include new code examples for api and curl.

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

Summary by CodeRabbit

  • New Features
    • Added API and cURL tabs to the API integration UI with ready-to-copy examples (JavaScript fetch and Bash curl) for server-side wallet calls.
    • Set the API tab as the default and updated tab order to surface API and cURL first.
    • Examples auto-fill the masked secret key when available and include a sample identifier to streamline first-time setup.

@Yash094 Yash094 requested review from a team as code owners September 5, 2025 14:40
@changeset-bot
Copy link

changeset-bot bot commented Sep 5, 2025

⚠️ No Changeset found

Latest commit: a328250

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

@vercel
Copy link

vercel bot commented Sep 5, 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 Sep 5, 2025 3:57pm
4 Skipped Deployments
Project Deployment Preview Comments Updated (UTC)
docs-v2 Skipped Skipped Sep 5, 2025 3:57pm
nebula Skipped Skipped Sep 5, 2025 3:57pm
thirdweb_playground Skipped Skipped Sep 5, 2025 3:57pm
wallet-ui Skipped Skipped Sep 5, 2025 3:57pm

@graphite-app
Copy link
Contributor

graphite-app bot commented Sep 5, 2025

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.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Sep 5, 2025

Walkthrough

Added "API" and "cURL" tabs to the Project FTUX code examples; expanded IntegrateAPIKeyCodeTabs TabKey union and default to the API tab; added helper functions producing server-side API and curl example snippets using the project's masked secret key.

Changes

Cohort / File(s) Summary
Tabs infra update
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx
Expanded TabKey to include "api" and "curl"; added tabNames entries for "API" and "cURL"; changed initial active tab to "api"; tabs prop now expects content for the new keys.
FTUX content additions
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
Added api and curl tabs that render CodeServer with new helpers apiCodeExample and curlCodeExample; snippets POST to https://api.thirdweb.com/v1/wallets/server using x-secret-key and an identifier (uses project.secretKeys[0]?.masked or placeholder).

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant PF as ProjectFTUX
  participant Tabs as IntegrateAPIKeyCodeTabs
  participant CS as CodeServer

  U->>PF: Open Project FTUX
  PF->>Tabs: Render tabs (API, cURL, ts, react, ...)
  Note over Tabs: Default active tab = API
  Tabs->>CS: Render API code example (apiCodeExample)
  U->>Tabs: Click "cURL"
  Tabs->>CS: Render cURL example (curlCodeExample)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

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 yash/add-api-to-project-overview

🪧 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 or @coderabbit 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 Sep 5, 2025
@codecov
Copy link

codecov bot commented Sep 5, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 56.63%. Comparing base (928704a) to head (a328250).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #7992   +/-   ##
=======================================
  Coverage   56.63%   56.63%           
=======================================
  Files         904      904           
  Lines       58677    58677           
  Branches     4161     4161           
=======================================
  Hits        33231    33231           
  Misses      25340    25340           
  Partials      106      106           
Flag Coverage Δ
packages 56.63% <ø> (ø)
🚀 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 Sep 5, 2025

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
thirdweb (esm) 64.01 KB (0%) 1.3 s (0%) 2.8 s (+2.85% 🔺) 4.1 s
thirdweb (cjs) 357.32 KB (0%) 7.2 s (0%) 18 s (-9.62% 🔽) 25.2 s
thirdweb (minimal + tree-shaking) 5.73 KB (0%) 115 ms (0%) 363 ms (+104.87% 🔺) 477 ms
thirdweb/chains (tree-shaking) 526 B (0%) 11 ms (0%) 68 ms (+56.8% 🔺) 79 ms
thirdweb/react (minimal + tree-shaking) 19.15 KB (0%) 383 ms (0%) 313 ms (-24.75% 🔽) 696 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: 0

🧹 Nitpick comments (4)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx (2)

16-25: Keep tabNames and TabKey in lockstep using as const satisfies

Prevents accidental key/value drift and keeps literal types.

-const tabNames: Record<TabKey, string> = {
+const tabNames = {
   api: "API",
   ts: "TypeScript",
   react: "React",
   "react-native": "React Native",
   dotnet: ".NET",
   unity: "Unity",
   unreal: "Unreal Engine",
   curl: "cURL",
-};
+} as const satisfies Record<TabKey, string>;

30-30: Defaulting to "api" matches the new UX

Consider allowing callers to override the initial tab for future flexibility.

-export function IntegrateAPIKeyCodeTabs(props: {
-  tabs: Record<TabKey, React.ReactNode>;
-}) {
-  const [tab, setTab] = useState<TabKey>("api");
+export function IntegrateAPIKeyCodeTabs(props: {
+  tabs: Record<TabKey, React.ReactNode>;
+  initialTab?: TabKey;
+}) {
+  const [tab, setTab] = useState<TabKey>(props.initialTab ?? "api");
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (2)

238-249: JS fetch example: consider minimal error handling for copy‑paste DX

Optional: showing await plus a basic ok check helps users succeed on first run.

-// Server-side only: replace with your full secret key. Never expose in browser code.
-fetch('https://api.thirdweb.com/v1/wallets/server', {
-  method: 'POST',
-  headers: {
-    'Content-Type': 'application/json',
-    'x-secret-key': '${project.secretKeys[0]?.masked ?? "<YOUR_SECRET_KEY>"}'
-  },
-  body: JSON.stringify({
-    identifier: 'treasury-wallet-123'
-  })
-});
+// Server-side only: replace with your full secret key. Never expose in browser code.
+async function main() {
+  const res = await fetch('https://api.thirdweb.com/v1/wallets/server', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'x-secret-key': '${project.secretKeys[0]?.masked ?? "<YOUR_SECRET_KEY>"}'
+    },
+    body: JSON.stringify({ identifier: 'treasury-wallet-123' })
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const data = await res.json();
+  console.log(data);
+}
+main().catch(console.error);

251-259: cURL example: add failure flags for better diagnostics

--fail-with-body and -sS improve CLI feedback without noise.

-curl https://api.thirdweb.com/v1/wallets/server \
+curl -sS --fail-with-body https://api.thirdweb.com/v1/wallets/server \
   --request POST \
   --header 'Content-Type: application/json' \
   --header 'x-secret-key: ${project.secretKeys[0]?.masked ?? "<YOUR_SECRET_KEY>"}' \
   --data '{
   "identifier": "treasury-wallet-123"
 }'
📜 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 928704a and 686f0db.

📒 Files selected for processing (2)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (2 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{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

**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from @/types where applicable
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size

Files:

  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.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)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.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)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from @/components/ui/_ (e.g., Button, Input, Tabs, Card)
Use NavLink for internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names with cn() from @/lib/utils for conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start with import "server-only"; use next/headers, server‑only env, heavy data fetching, and redirect() where appropriate
Client Components must start with 'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: call getAuthToken() from cookies, send Authorization: Bearer <token> header, and return typed results (avoid any)
Client-side data fetching: wrap calls in React Query with descriptive, stable queryKeys and set sensible staleTime/cacheTime (≥ 60s default); keep tokens secret via internal routes or server actions
Do not import posthog-js in server components (client-side only)

Files:

  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx
apps/{dashboard,playground}/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Expose a className prop on the root element of every component

Files:

  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx
🧠 Learnings (1)
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
PR: thirdweb-dev/js#7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.

Applied to files:

  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.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). (6)
  • GitHub Check: Unit Tests
  • GitHub Check: Lint Packages
  • GitHub Check: Size
  • GitHub Check: Build Packages
  • GitHub Check: E2E Tests (pnpm, esbuild)
  • GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx (1)

6-14: Verified api and curl tabs present at all call sites — ProjectFTUX.tsx supplies both new keys and compiles without errors; TS will catch any missing tabs.

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (2)

190-203: API and cURL tabs are correctly wired and align with the new default tab

The tabs render with CodeServer and follow the intended order. Looks good.


238-249: Endpoint and header confirmed — this snippet correctly uses POST /v1/wallets/server with the x-secret-key header per Thirdweb API docs.

@0xFirekeeper 0xFirekeeper added the merge-queue Adds the pull request to Graphite's merge queue. label Sep 5, 2025
Copy link
Member

0xFirekeeper commented Sep 5, 2025

Merge activity

<!--

## 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 enhances the `IntegrateAPIKeyCodeTabs` component by adding new tab keys for `api` and `curl`, along with their respective code examples for API integration. It also updates the default selected tab to `api`.

### Detailed summary
- Added new `TabKey` values: `api` and `curl`.
- Updated `tabNames` to include labels for `api` and `curl`.
- Changed default tab state from `ts` to `api`.
- Introduced `apiCodeExample` function for API integration code.
- Introduced `curlCodeExample` function for cURL integration code.

> ✨ 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**
  * Added API and cURL tabs to the API integration UI with ready-to-copy code examples (JavaScript fetch and Bash curl) for server-side wallet API calls.
  * Set the API tab as the default selection and updated tab order to include API and cURL.
  * Examples auto-fill the masked secret key when available and include a sample identifier, improving first-time setup guidance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
@graphite-app graphite-app bot force-pushed the yash/add-api-to-project-overview branch from 686f0db to a328250 Compare September 5, 2025 15:49
@vercel vercel bot temporarily deployed to Preview – thirdweb_playground September 5, 2025 15:49 Inactive
@vercel vercel bot temporarily deployed to Preview – wallet-ui September 5, 2025 15:49 Inactive
@vercel vercel bot temporarily deployed to Preview – nebula September 5, 2025 15:49 Inactive
@vercel vercel bot temporarily deployed to Preview – docs-v2 September 5, 2025 15:49 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: 1

🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (1)

238-249: Don’t interpolate masked secrets into samples; use a neutral placeholder

Showing even masked secrets in copy-paste snippets can confuse users and may be logged in analytics. Prefer a static placeholder.

-    'x-secret-key': '${project.secretKeys[0]?.masked ?? "<YOUR_SECRET_KEY>"}'
+    'x-secret-key': '<YOUR_SECRET_KEY>'

If eslint/tsconfig flags unused params, consider renaming the parameter to _project or switching to a block body to consume it intentionally.

📜 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 686f0db and a328250.

📒 Files selected for processing (2)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx (1 hunks)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{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

**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from @/types where applicable
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size

Files:

  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.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)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.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)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from @/components/ui/_ (e.g., Button, Input, Tabs, Card)
Use NavLink for internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names with cn() from @/lib/utils for conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start with import "server-only"; use next/headers, server‑only env, heavy data fetching, and redirect() where appropriate
Client Components must start with 'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: call getAuthToken() from cookies, send Authorization: Bearer <token> header, and return typed results (avoid any)
Client-side data fetching: wrap calls in React Query with descriptive, stable queryKeys and set sensible staleTime/cacheTime (≥ 60s default); keep tokens secret via internal routes or server actions
Do not import posthog-js in server components (client-side only)

Files:

  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
apps/{dashboard,playground}/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Expose a className prop on the root element of every component

Files:

  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.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). (3)
  • GitHub Check: Lint Packages
  • GitHub Check: Size
  • GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (1)

190-203: Confirm tab defaults and syntax highlighting values

  • IntegrateAPIKeyCodeTabs defines "api" and "curl" as keys and defaults to "api".
  • CodeServer’s lang prop is typed as BundledLanguage; verify it accepts "javascript" and "bash" (otherwise adjust to the supported literals, e.g. "js"/"shell").

Comment on lines +251 to +259
const curlCodeExample = (project: Project): string => `\
// Server-side only: replace with your full secret key. Never expose in browser code.
curl https://api.thirdweb.com/v1/wallets/server \\
--request POST \\
--header 'Content-Type: application/json' \\
--header 'x-secret-key: ${project.secretKeys[0]?.masked ?? "<YOUR_SECRET_KEY>"}' \\
--data '{
"identifier": "treasury-wallet-123"
}'`;
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix bash comment syntax and avoid masked secret in curl sample

Use “#” for bash comments; “//” will fail when copy-pasted. Also prefer a static placeholder for the secret.

-// Server-side only: replace with your full secret key. Never expose in browser code.
+# Server-side only: replace with your full secret key. Never expose in browser code.
@@
-  --header 'x-secret-key: ${project.secretKeys[0]?.masked ?? "<YOUR_SECRET_KEY>"}' \
+  --header 'x-secret-key: <YOUR_SECRET_KEY>' \
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const curlCodeExample = (project: Project): string => `\
// Server-side only: replace with your full secret key. Never expose in browser code.
curl https://api.thirdweb.com/v1/wallets/server \\
--request POST \\
--header 'Content-Type: application/json' \\
--header 'x-secret-key: ${project.secretKeys[0]?.masked ?? "<YOUR_SECRET_KEY>"}' \\
--data '{
"identifier": "treasury-wallet-123"
}'`;
const curlCodeExample = (project: Project): string => `\
# Server-side only: replace with your full secret key. Never expose in browser code.
curl https://api.thirdweb.com/v1/wallets/server \\
--request POST \\
--header 'Content-Type: application/json' \\
--header 'x-secret-key: <YOUR_SECRET_KEY>' \\
--data '{
"identifier": "treasury-wallet-123"
}'`;
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
around lines 251 to 259, the curl example uses JavaScript-style "//" comments
and inserts a masked secret into the header; replace the leading comment with a
bash-style comment using "#" and stop interpolating the masked key from
project.secretKeys—use a static placeholder like "<YOUR_SECRET_KEY>" in the
x-secret-key header so the snippet is safe to copy-paste and never exposes
actual or masked secrets.

@graphite-app graphite-app bot merged commit a328250 into main Sep 5, 2025
24 checks passed
@graphite-app graphite-app bot deleted the yash/add-api-to-project-overview branch September 5, 2025 15:58
@graphite-app graphite-app bot removed the merge-queue Adds the pull request to Graphite's merge queue. label Sep 5, 2025
@vercel vercel bot temporarily deployed to Production – docs-v2 September 5, 2025 15:58 Inactive
@vercel vercel bot temporarily deployed to Production – wallet-ui September 5, 2025 15:58 Inactive
@vercel vercel bot temporarily deployed to Production – thirdweb_playground September 5, 2025 15:58 Inactive
@vercel vercel bot temporarily deployed to Production – nebula September 5, 2025 15:58 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