Project Wallet (Default Server Wallet) #8212
Conversation
Introduces logic to automatically create a default server wallet when a project is created, using a consistent label. Adds a new utility for generating wallet labels, updates project creation flows to provision the wallet, and enhances the ProjectFTUX component to display wallet details. Refactors server wallet creation logic into a reusable function and updates the server wallet creation UI to use this abstraction. Closes BLD-372
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
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. |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughProject creation now preserves Vault token results and enforces a management access token before creating a default server wallet. New server and server‑side helpers list/create project server wallets. Project wallet address is surfaced to Payments and Settings, client wallet controls/sending are added, default‑wallet management is supported, and service types updated. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as Create Project UI (client)
participant Vault as Vault SDK
participant Server as createProjectServerWallet
participant Engine as Engine Proxy
User->>UI: Submit new project
UI->>Vault: createVaultAccountAndAccessToken()
Vault-->>UI: vaultTokens (incl. management token)
UI->>UI: extract & validate managementAccessToken
UI->>Server: createProjectServerWallet({ project, label, managementAccessToken })
Server->>Vault: createEoa({ label, metadata, token })
Vault-->>Server: EOA (wallet)
Server->>Engine: cache signer address (best-effort)
Server-->>UI: created EOA
UI-->>User: Project created with server wallet
sequenceDiagram
autonumber
participant Page as ProjectFTUX (server)
participant Vault as getProjectWallet
Page->>Vault: getProjectWallet(project)
Vault-->>Page: ProjectWalletSummary | undefined
Page->>Page: derive label via getProjectWalletLabel
Page-->>User: render wallet section (address, copy, link) or alert
sequenceDiagram
autonumber
actor User
participant Modal as CreateServerWallet (client)
participant Server as createProjectServerWallet
participant Vault as Vault SDK
participant Engine as Engine Proxy
User->>Modal: Confirm create wallet
Modal->>Server: createProjectServerWallet({ label, project, managementAccessToken })
Server->>Vault: createEoa(...)
Vault-->>Server: EOA
Server->>Engine: cache signer address
Server-->>Modal: EOA
Modal-->>User: Close modal, refresh, show wallet
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Pre-merge checks and finishing touches❌ Failed checks (3 warnings, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8212 +/- ##
==========================================
- Coverage 55.03% 55.02% -0.02%
==========================================
Files 919 919
Lines 60569 60583 +14
Branches 4126 4126
==========================================
Hits 33333 33333
- Misses 27132 27146 +14
Partials 104 104
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
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)/get-started/team/[team_slug]/create-project/_components/create-project-form.tsx (1)
327-327: Fix typo: "Projecct" → "Project".There's a spelling error in the button text.
Apply this diff:
- Create Projecct + Create Project
🧹 Nitpick comments (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts (1)
164-177: Consider logging or monitoring cache failures.The smart account caching call is fire-and-forget with only a console.warn on failure. If caching failures are frequent or impactful, consider adding metrics or structured logging for better observability.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (2)
180-182: Document the pagination API mismatch.The
@ts-expect-errorcomment mentions snake_case but could be more specific about the SDK's expected format versus what's being passed. Consider filing an issue with the vault-sdk maintainers to align the TypeScript types with the actual API contract.
216-219: Consider surfacing wallet load failures to users.Currently, wallet fetch failures are silently logged and
undefinedis returned, causing the UI to show an "unavailable" alert. Consider whether certain error conditions (e.g., authentication failure, network timeout) should be displayed differently or trigger alerts for the development team.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (6)
apps/dashboard/src/@/components/project/create-project-modal/index.tsx(3 hunks)apps/dashboard/src/@/lib/project-wallet.ts(1 hunks)apps/dashboard/src/app/(app)/get-started/team/[team_slug]/create-project/_components/create-project-form.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.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@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless 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@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless 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/@/components/project/create-project-modal/index.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/get-started/team/[team_slug]/create-project/_components/create-project-form.tsxapps/dashboard/src/@/lib/project-wallet.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts
**/*.{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/@/components/project/create-project-modal/index.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/get-started/team/[team_slug]/create-project/_components/create-project-form.tsxapps/dashboard/src/@/lib/project-wallet.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts
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
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/@/components/project/create-project-modal/index.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/get-started/team/[team_slug]/create-project/_components/create-project-form.tsxapps/dashboard/src/@/lib/project-wallet.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts
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)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/@/components/project/create-project-modal/index.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/get-started/team/[team_slug]/create-project/_components/create-project-form.tsxapps/dashboard/src/@/lib/project-wallet.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/@/components/project/create-project-modal/index.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/get-started/team/[team_slug]/create-project/_components/create-project-form.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsx
🧠 Learnings (1)
📚 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/@/components/project/create-project-modal/index.tsxapps/dashboard/src/app/(app)/get-started/team/[team_slug]/create-project/_components/create-project-form.tsx
🧬 Code graph analysis (5)
apps/dashboard/src/@/components/project/create-project-modal/index.tsx (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts (2)
createVaultAccountAndAccessToken(81-130)createProjectServerWallet(132-180)apps/dashboard/src/@/lib/project-wallet.ts (1)
getProjectWalletLabel(8-21)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (4)
apps/dashboard/src/@/lib/project-wallet.ts (1)
getProjectWalletLabel(8-21)apps/dashboard/src/@/components/ui/CopyTextButton.tsx (1)
CopyTextButton(9-68)apps/dashboard/src/@/constants/public-envs.ts (1)
NEXT_PUBLIC_THIRDWEB_VAULT_URL(4-5)packages/vault-sdk/src/sdk.ts (2)
createVaultClient(111-165)listEoas(326-337)
apps/dashboard/src/app/(app)/get-started/team/[team_slug]/create-project/_components/create-project-form.tsx (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts (2)
createVaultAccountAndAccessToken(81-130)createProjectServerWallet(132-180)apps/dashboard/src/@/lib/project-wallet.ts (1)
getProjectWalletLabel(8-21)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts (1)
createProjectServerWallet(132-180)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts (3)
apps/dashboard/src/@/lib/project-wallet.ts (1)
getProjectWalletLabel(8-21)packages/vault-sdk/src/sdk.ts (1)
createEoa(313-324)apps/dashboard/src/@/actions/proxies.ts (1)
engineCloudProxy(87-89)
⏰ 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: E2E Tests (pnpm, webpack)
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/dashboard/src/app/(app)/get-started/team/[team_slug]/create-project/_components/create-project-form.tsx (1)
62-89: LGTM! Proper error handling for wallet provisioning.The vault token creation and wallet provisioning logic is well-structured with appropriate error handling. The validation for
managementAccessTokenensures the wallet creation step won't proceed without the required token.apps/dashboard/src/@/components/project/create-project-modal/index.tsx (1)
71-95: LGTM! Consistent wallet provisioning pattern.The wallet creation flow matches the pattern used in the onboarding form, ensuring consistency across different project creation entry points.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsx (1)
37-46: LGTM! Clean refactoring to use centralized helper.The refactoring successfully eliminates duplicate vault client initialization and EOA creation logic by delegating to the
createProjectServerWallethelper. This improves maintainability and consistency across the codebase.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (2)
36-61: LGTM! Proper async server component conversion.The conversion to an async server component is well-executed. The wallet data is fetched server-side before rendering, which improves the user experience by avoiding client-side loading states for initial data.
198-209: Verify the fallback hierarchy logic.The wallet selection prioritizes:
- Wallet with expected label
- Any wallet with type "server-wallet"
- First wallet in filtered list
Ensure this fallback strategy aligns with the product requirements, especially when multiple server wallets exist for a project.
| export function getProjectWalletLabel(projectName: string | undefined) { | ||
| const baseName = projectName?.trim() || "Project"; | ||
| const maxBaseLength = Math.max( | ||
| 1, | ||
| PROJECT_WALLET_LABEL_MAX_LENGTH - PROJECT_WALLET_LABEL_SUFFIX.length, | ||
| ); | ||
|
|
||
| const normalizedBase = | ||
| baseName.length > maxBaseLength | ||
| ? baseName.slice(0, maxBaseLength).trimEnd() | ||
| : baseName; | ||
|
|
||
| return `${normalizedBase}${PROJECT_WALLET_LABEL_SUFFIX}`; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add explicit return type annotation.
The function lacks an explicit return type. Per coding guidelines, TypeScript functions should have explicit return types.
Apply this diff:
-export function getProjectWalletLabel(projectName: string | undefined) {
+export function getProjectWalletLabel(projectName: string | undefined): string {
const baseName = projectName?.trim() || "Project";📝 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.
| export function getProjectWalletLabel(projectName: string | undefined) { | |
| const baseName = projectName?.trim() || "Project"; | |
| const maxBaseLength = Math.max( | |
| 1, | |
| PROJECT_WALLET_LABEL_MAX_LENGTH - PROJECT_WALLET_LABEL_SUFFIX.length, | |
| ); | |
| const normalizedBase = | |
| baseName.length > maxBaseLength | |
| ? baseName.slice(0, maxBaseLength).trimEnd() | |
| : baseName; | |
| return `${normalizedBase}${PROJECT_WALLET_LABEL_SUFFIX}`; | |
| } | |
| export function getProjectWalletLabel(projectName: string | undefined): string { | |
| const baseName = projectName?.trim() || "Project"; | |
| const maxBaseLength = Math.max( | |
| 1, | |
| PROJECT_WALLET_LABEL_MAX_LENGTH - PROJECT_WALLET_LABEL_SUFFIX.length, | |
| ); | |
| const normalizedBase = | |
| baseName.length > maxBaseLength | |
| ? baseName.slice(0, maxBaseLength).trimEnd() | |
| : baseName; | |
| return `${normalizedBase}${PROJECT_WALLET_LABEL_SUFFIX}`; | |
| } |
🤖 Prompt for AI Agents
In apps/dashboard/src/@/lib/project-wallet.ts around lines 8 to 21, the function
getProjectWalletLabel is missing an explicit return type; update the function
signature to declare the return type explicitly (e.g., add ": string" after the
parameter list), keep the existing implementation unchanged, and run TypeScript
type-checking to ensure no further signature issues.
| export async function createProjectServerWallet(props: { | ||
| project: Project; | ||
| managementAccessToken: string; | ||
| label?: string; | ||
| }) { | ||
| const vaultClient = await initVaultClient(); | ||
|
|
||
| const walletLabel = props.label?.trim() | ||
| ? props.label.trim() | ||
| : getProjectWalletLabel(props.project.name); | ||
|
|
||
| const eoa = await createEoa({ | ||
| client: vaultClient, | ||
| request: { | ||
| auth: { | ||
| accessToken: props.managementAccessToken, | ||
| }, | ||
| options: { | ||
| metadata: { | ||
| label: walletLabel, | ||
| projectId: props.project.id, | ||
| teamId: props.project.teamId, | ||
| type: "server-wallet", | ||
| }, | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| if (!eoa.success) { | ||
| throw new Error(eoa.error?.message || "Failed to create server wallet"); | ||
| } | ||
|
|
||
| engineCloudProxy({ | ||
| body: JSON.stringify({ | ||
| signerAddress: eoa.data.address, | ||
| }), | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| "x-client-id": props.project.publishableKey, | ||
| "x-team-id": props.project.teamId, | ||
| }, | ||
| method: "POST", | ||
| pathname: "/cache/smart-account", | ||
| }).catch((err) => { | ||
| console.warn("failed to cache server wallet", err); | ||
| }); | ||
|
|
||
| return eoa.data; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add explicit return type annotation.
The function lacks an explicit return type. Per coding guidelines, TypeScript functions should have explicit return types.
Apply this diff:
export async function createProjectServerWallet(props: {
project: Project;
managementAccessToken: string;
label?: string;
-}) {
+}): Promise<{ id: string; address: string }> {
const vaultClient = await initVaultClient();Note: Adjust the return type based on the actual structure of eoa.data. If it has additional fields, include them in the type annotation.
📝 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.
| export async function createProjectServerWallet(props: { | |
| project: Project; | |
| managementAccessToken: string; | |
| label?: string; | |
| }) { | |
| const vaultClient = await initVaultClient(); | |
| const walletLabel = props.label?.trim() | |
| ? props.label.trim() | |
| : getProjectWalletLabel(props.project.name); | |
| const eoa = await createEoa({ | |
| client: vaultClient, | |
| request: { | |
| auth: { | |
| accessToken: props.managementAccessToken, | |
| }, | |
| options: { | |
| metadata: { | |
| label: walletLabel, | |
| projectId: props.project.id, | |
| teamId: props.project.teamId, | |
| type: "server-wallet", | |
| }, | |
| }, | |
| }, | |
| }); | |
| if (!eoa.success) { | |
| throw new Error(eoa.error?.message || "Failed to create server wallet"); | |
| } | |
| engineCloudProxy({ | |
| body: JSON.stringify({ | |
| signerAddress: eoa.data.address, | |
| }), | |
| headers: { | |
| "Content-Type": "application/json", | |
| "x-client-id": props.project.publishableKey, | |
| "x-team-id": props.project.teamId, | |
| }, | |
| method: "POST", | |
| pathname: "/cache/smart-account", | |
| }).catch((err) => { | |
| console.warn("failed to cache server wallet", err); | |
| }); | |
| return eoa.data; | |
| } | |
| export async function createProjectServerWallet(props: { | |
| project: Project; | |
| managementAccessToken: string; | |
| label?: string; | |
| }): Promise<{ id: string; address: string }> { | |
| const vaultClient = await initVaultClient(); | |
| const walletLabel = props.label?.trim() | |
| ? props.label.trim() | |
| : getProjectWalletLabel(props.project.name); | |
| const eoa = await createEoa({ | |
| client: vaultClient, | |
| request: { | |
| auth: { | |
| accessToken: props.managementAccessToken, | |
| }, | |
| options: { | |
| metadata: { | |
| label: walletLabel, | |
| projectId: props.project.id, | |
| teamId: props.project.teamId, | |
| type: "server-wallet", | |
| }, | |
| }, | |
| }, | |
| }); | |
| if (!eoa.success) { | |
| throw new Error(eoa.error?.message || "Failed to create server wallet"); | |
| } | |
| engineCloudProxy({ | |
| body: JSON.stringify({ | |
| signerAddress: eoa.data.address, | |
| }), | |
| headers: { | |
| "Content-Type": "application/json", | |
| "x-client-id": props.project.publishableKey, | |
| "x-team-id": props.project.teamId, | |
| }, | |
| method: "POST", | |
| pathname: "/cache/smart-account", | |
| }).catch((err) => { | |
| console.warn("failed to cache server wallet", err); | |
| }); | |
| return eoa.data; | |
| } |
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts
around lines 132 to 180, the createProjectServerWallet function is missing an
explicit return type; add a precise Promise return type that matches eoa.data
(for example Promise<{ address: string; /* other fields */ }> or the existing
EoaData type if one exists), update the function signature to use that type, and
if necessary import or declare the interface/type so the signature is explicit
and accurate.
size-limit report 📦
|
Introduces a server utility to fetch the project wallet and propagates the project wallet address to payment-related components. Updates payment link creation and payout address forms to allow users to autofill with the project wallet address, improving usability and consistency across the dashboard.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/PayConfig.tsx (1)
108-138: LGTM!The "Use Project Wallet" button correctly populates the recipient field with proper form state management (
shouldDirty,shouldTouch,shouldValidate).Optional: The null check on line 117 is redundant since the button only renders when
projectWalletAddressis truthy (line 114). However, it's a safe defensive practice.- if (!props.projectWalletAddress) { - return; - } - form.setValue(apps/dashboard/src/@/lib/server/project-wallet.ts (1)
62-62: Consider adding runtime validation for type safety.The type assertion
response.data.items as VaultWalletListItem[]assumes the API response matches the expected structure. If the API changes or returns unexpected data, this could cause runtime errors.Consider adding basic runtime validation:
- const items = response.data.items as VaultWalletListItem[] | undefined; + const items = Array.isArray(response.data.items) + ? (response.data.items as VaultWalletListItem[]) + : undefined;apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx (1)
191-225: LGTM!The "Use Project Wallet" button correctly populates the recipient field with proper form state management.
Optional: Similar to
PayConfig.tsx, the null check on line 204 is redundant since the button only renders whenprojectWalletAddressis truthy (line 200).- onClick={() => { - if (!props.projectWalletAddress) { - return; - } - form.setValue(apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (1)
67-69: Consider extracting address shortening to a utility function.The address shortening pattern (
${addr.slice(0, 6)}...${addr.slice(-4)}) is commonly used and would benefit from a shared utility function for consistency across the codebase.Example utility in a shared lib file:
export function shortenAddress(address: string, startChars = 6, endChars = 4): string { if (address.length <= startChars + endChars) { return address; } return `${address.slice(0, startChars)}...${address.slice(-endChars)}`; }Then use it here:
- const shortenedAddress = walletAddress - ? `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}` - : undefined; + const shortenedAddress = walletAddress + ? shortenAddress(walletAddress) + : undefined;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (8)
apps/dashboard/src/@/lib/server/project-wallet.ts(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/PayConfig.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsx(3 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@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless 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@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless 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/@/lib/server/project-wallet.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/PayConfig.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.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/@/lib/server/project-wallet.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/PayConfig.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.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
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/@/lib/server/project-wallet.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/PayConfig.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.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)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/@/lib/server/project-wallet.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/PayConfig.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/PayConfig.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx
🧠 Learnings (2)
📚 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)/payments/components/QuickstartSection.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/PayConfig.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx
📚 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 PR #7888.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx
🧬 Code graph analysis (4)
apps/dashboard/src/@/lib/server/project-wallet.ts (3)
apps/dashboard/src/@/constants/public-envs.ts (1)
NEXT_PUBLIC_THIRDWEB_VAULT_URL(4-5)packages/vault-sdk/src/sdk.ts (2)
createVaultClient(111-165)listEoas(326-337)apps/dashboard/src/@/lib/project-wallet.ts (1)
getProjectWalletLabel(8-21)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsx (1)
apps/dashboard/src/@/lib/server/project-wallet.ts (1)
getProjectWallet(25-92)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx (2)
apps/dashboard/src/@/lib/server/project-wallet.ts (1)
getProjectWallet(25-92)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsx (1)
QuickStartSection(13-95)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (3)
apps/dashboard/src/@/lib/server/project-wallet.ts (2)
getProjectWallet(25-92)ProjectWalletSummary(8-12)apps/dashboard/src/@/lib/project-wallet.ts (1)
getProjectWalletLabel(8-21)apps/dashboard/src/@/components/ui/CopyTextButton.tsx (1)
CopyTextButton(9-68)
⏰ 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: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (8)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsx (1)
18-18: LGTM!The prop forwarding is straightforward and correctly typed.
Also applies to: 47-47
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsx (1)
6-6: LGTM!The server-side wallet retrieval and prop forwarding are correctly implemented with proper optional chaining.
Also applies to: 35-35, 70-70
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx (1)
43-47: LGTM!The prop threading through
PaymentLinksTable→PaymentLinksTableInner→CreatePaymentLinkButtonis correctly implemented with proper typing.Also applies to: 56-60, 65-69, 135-135
apps/dashboard/src/@/lib/server/project-wallet.ts (2)
74-77: LGTM! Well-designed fallback logic.The wallet selection logic with multiple fallback levels (label match → type match → first wallet) provides good resilience. The use of
getProjectWalletLabelfor consistent labeling is a nice touch.
50-56: Ensure pagination covers all wallets The call tolistEoasrequests only the first 25 items (page 0, page_size 25), which may omit the default wallet if more exist. Iterate through pages or increasepage_size, or document this limitation.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx (1)
9-9: LGTM!The server-side wallet retrieval and distribution to child components (
CreatePaymentLinkButton,PaymentLinksTable,QuickStartSection) is correctly implemented with proper optional chaining.Also applies to: 33-33, 57-57, 148-148, 155-155
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (2)
1-31: LGTM!The new imports for wallet functionality are appropriate and properly structured.
92-131: LGTM!The wallet display logic is well-structured:
- Properly handles both available and unavailable wallet states
- Good UX showing shortened address in UI while copying full address
- Clear user guidance with helpful alert and navigation link
| export async function ProjectFTUX(props: { | ||
| project: Project; | ||
| teamSlug: string; | ||
| }) { | ||
| const projectWallet = await getProjectWallet(props.project); |
There was a problem hiding this comment.
Add server component markers and return type.
This component fetches data server-side but is missing the required "server-only" import and explicit return type.
As per coding guidelines:
Apply this diff to add the server-only import at the top of the file:
+import "server-only";
+
import {
ArrowLeftRightIcon,And add the explicit return type:
-export async function ProjectFTUX(props: {
+export async function ProjectFTUX(props: {
project: Project;
teamSlug: string;
-}) {
+}): Promise<JSX.Element> {🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
around lines 32 to 36, the async server component is missing the required
server-only marker and an explicit return type; add the server-only import
directive (import "server-only") at the top of the file and change the function
signature to include an explicit Promise return type (e.g., export async
function ProjectFTUX(...): Promise<JSX.Element> or Promise<React.ReactNode>) so
the component is clearly marked server-only and its return type is explicit.
| function ProjectWalletSection(props: { | ||
| project: Project; | ||
| teamSlug: string; | ||
| wallet: ProjectWalletSummary | undefined; | ||
| }) { | ||
| const defaultLabel = getProjectWalletLabel(props.project.name); | ||
| const walletAddress = props.wallet?.address; | ||
| const label = props.wallet?.label ?? defaultLabel; | ||
| const shortenedAddress = walletAddress | ||
| ? `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}` | ||
| : undefined; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add className prop to component root.
Per coding guidelines, every component should expose a className prop on the root element for styling flexibility.
Apply this diff:
function ProjectWalletSection(props: {
project: Project;
teamSlug: string;
wallet: ProjectWalletSummary | undefined;
+ className?: string;
}) {And update the root element (line 72):
- return (
- <section>
+ return (
+ <section className={props.className}>📝 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.
| function ProjectWalletSection(props: { | |
| project: Project; | |
| teamSlug: string; | |
| wallet: ProjectWalletSummary | undefined; | |
| }) { | |
| const defaultLabel = getProjectWalletLabel(props.project.name); | |
| const walletAddress = props.wallet?.address; | |
| const label = props.wallet?.label ?? defaultLabel; | |
| const shortenedAddress = walletAddress | |
| ? `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}` | |
| : undefined; | |
| function ProjectWalletSection(props: { | |
| project: Project; | |
| teamSlug: string; | |
| wallet: ProjectWalletSummary | undefined; | |
| className?: string; | |
| }) { | |
| const defaultLabel = getProjectWalletLabel(props.project.name); | |
| const walletAddress = props.wallet?.address; | |
| const label = props.wallet?.label ?? defaultLabel; | |
| const shortenedAddress = walletAddress | |
| ? `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}` | |
| : undefined; | |
| return ( | |
| <section className={props.className}> | |
| {/* …existing JSX children… */} | |
| </section> | |
| ); | |
| } |
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
around lines 59–69 and update the root element at line 72: add an optional
className?: string to the ProjectWalletSection props, and pass/merge that
className onto the component's root element on line 72 (use the existing class
string merger approach in the codebase — e.g. clsx or template concatenation —
so external styles can be applied without losing internal classes).
Introduces ProjectWalletControls component to manage project wallet actions, including copying the address, sending, and receiving funds. Adds a modal for sending tokens with form validation and credential caching. Refactors ProjectFTUX to use the new controls and implements the sendProjectWalletTokens server action.
The amount field in the send form schema no longer enforces a check for values greater than 0, only requiring a non-empty string. Default amount values are also changed from '0.1' to '0'.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx (3)
53-58: ExposeclassNameprop on root container.The root container hardcodes
className="space-y-5"with no override mechanism. Dashboard components must accept and forward aclassNameprop per coding guidelines.Apply this diff:
type ProjectWalletControlsProps = { walletAddress: string; label: string; project: Pick<Project, "id" | "publishableKey" | "teamId" | "services">; defaultChainId?: number; + className?: string; }; export function ProjectWalletControls(props: ProjectWalletControlsProps) { - const { walletAddress, label, project, defaultChainId } = props; + const { walletAddress, label, project, defaultChainId, className } = props; ... return ( - <div className="space-y-5"> + <div className={cn("space-y-5", className)}>As per coding guidelines
Based on learningsAlso applies to: 95-96
231-231: Validate that amount is a positive number.The amount field only checks for non-empty string, allowing "0", negative values, or non-numeric input. Since the default is "0" (line 276) and
toWei()is called on line 309, users could submit invalid amounts or trigger runtime errors.Apply this diff:
- amount: z.string().trim().min(1, "Amount is required"), + amount: z + .string() + .trim() + .min(1, "Amount is required") + .refine( + (val) => { + const num = Number(val); + return !Number.isNaN(num) && Number.isFinite(num) && num > 0; + }, + { message: "Amount must be a positive number" }, + ),
294-305: Clear secretKey when modal closes.The reset preserves
secretKeyfromcurrentValues(line 300), contradicting the comment about avoiding state leakage. Retaining credentials in component state after modal close poses an exposure risk.Apply this diff:
useEffect(() => { if (!open) { const currentValues = form.getValues(); form.reset({ amount: "0", chainId, - secretKey: currentValues.secretKey ?? "", + secretKey: "", vaultAccessToken: currentValues.vaultAccessToken ?? "", toAddress: "", }); } }, [open, chainId, form]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx(1 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@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless 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@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless 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/ProjectWalletControls.client.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/ProjectWalletControls.client.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
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
🧠 Learnings (7)
📚 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)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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}/**/*.{tsx} : Expose `className` prop on root element of components for overrides
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.tsx : Expose a `className` prop on the root element of every component
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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} : Add `className` to the root element of every component for external overrides.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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} : Combine class names via `cn`, expose `className` prop if useful.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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} : Use the `container` class with a `max-w-7xl` cap for page width consistency.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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} : Merge class names with `cn` from `@/lib/utils` to keep conditional logic readable.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx (4)
apps/dashboard/src/@/hooks/chains/v5-adapter.ts (1)
useV5DashboardChain(14-28)apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx (1)
SingleNetworkSelector(152-298)apps/dashboard/src/@/components/blocks/fund-wallets-modal/index.tsx (1)
FundWalletModal(76-93)apps/dashboard/src/@/actions/project-wallet/send-tokens.ts (1)
sendProjectWalletTokens(12-74)
⏰ 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). (2)
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx (1)
307-349: LGTM! Well-structured mutation with proper error handling.The mutation logic correctly converts amount to Wei, passes credentials securely, handles errors with user-friendly toasts, and refreshes balance on success. The transaction ID display in the success toast is good UX.
...[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
Show resolved
Hide resolved
...[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
Show resolved
Hide resolved
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
...ard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (5)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx (2)
52-207: Expose aclassNameprop on the root wrapper.Per dashboard guidelines we need
className?: stringon component props and merge it onto the root element (e.g.cn("space-y-5", className)) so callers can extend styling. Please add the prop and forward it to the outer<div>.
285-297: Clear the secret key when the modal closes.
form.resetcopiescurrentValues.secretKey, keeping the credential in memory after the modal closes. Reset it to an empty string so the secret key isn’t retained between openings.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (2)
1-39: Add server component markers and explicit return type.This component fetches data server-side but is missing the required
"server-only"import and explicit return type.As per coding guidelines and learnings:
Apply this diff to add the server-only import at the top of the file:
+import "server-only"; + import { ArrowLeftRightIcon,And add the explicit return type:
export async function ProjectFTUX(props: { project: Project; teamSlug: string; wallet?: ProjectWalletSummary | undefined; managementAccessToken: string | undefined; -}) { +}): Promise<JSX.Element> {
64-75: AddclassNameprop to component root.Per coding guidelines and learnings, every component should expose a
classNameprop on the root element for styling flexibility.Apply this diff:
export function ProjectWalletSection(props: { project: Project; teamSlug: string; wallet: ProjectWalletSummary | undefined; managementAccessToken: string | undefined; + className?: string; }) {And update the root element (line 75):
return ( - <section> + <section className={props.className}>apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts (1)
132-188: Add explicit return type annotation.The function lacks an explicit return type. Per coding guidelines, TypeScript functions should have explicit return types.
Apply this diff:
export async function createProjectServerWallet(props: { project: Project; managementAccessToken: string; label?: string; setAsProjectWallet?: boolean; -}) { +}): Promise<{ id: string; address: string }> { const vaultClient = await initVaultClient();Note: Adjust the return type based on the actual structure of
eoa.data. If it has additional fields, include them in the type annotation.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (10)
apps/dashboard/src/@/components/project/create-project-modal/index.tsx(2 hunks)apps/dashboard/src/@/lib/server/project-wallet.ts(1 hunks)apps/dashboard/src/app/(app)/get-started/team/[team_slug]/create-project/_components/create-project-form.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx(5 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts(5 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsx(6 hunks)packages/service-utils/src/core/api.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/dashboard/src/app/(app)/get-started/team/[team_slug]/create-project/_components/create-project-form.tsx
- apps/dashboard/src/@/lib/server/project-wallet.ts
- apps/dashboard/src/@/components/project/create-project-modal/index.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@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless 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@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless 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:
packages/service-utils/src/core/api.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
packages/service-utils/src/core/api.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
🧠 Learnings (16)
📚 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)/page.tsx
📚 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 PR #7888.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/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} : Server Components (Node edge): Start files with `import "server-only";`
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Server Components must start with `import "server-only"`; use `next/headers`, server‑only env, heavy data fetching, and `redirect()` where appropriate
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.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/**/api/**/*.{ts,tsx} : Prefix files with `import "server-only";` so they never end up in the client bundle.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
📚 Learning: 2025-05-21T05:17:31.283Z
Learnt from: jnsdls
PR: thirdweb-dev/js#6929
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx:14-19
Timestamp: 2025-05-21T05:17:31.283Z
Learning: In Next.js server components, the `params` object can sometimes be a Promise that needs to be awaited, despite type annotations suggesting otherwise. In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx, it's necessary to await the params object before accessing its properties.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.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}/**/*.{tsx} : Expose `className` prop on root element of components for overrides
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.tsx : Expose a `className` prop on the root element of every component
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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} : Add `className` to the root element of every component for external overrides.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.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 : Use React Query (`tanstack/react-query`) for all client data fetching.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.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} : Combine class names via `cn`, expose `className` prop if useful.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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} : Use the `container` class with a `max-w-7xl` cap for page width consistency.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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} : Merge class names with `cn` from `@/lib/utils` to keep conditional logic readable.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
📚 Learning: 2025-09-03T23:35:50.476Z
Learnt from: MananTank
PR: thirdweb-dev/js#7977
File: apps/playground-web/src/app/page.tsx:61-65
Timestamp: 2025-09-03T23:35:50.476Z
Learning: In the thirdweb-dev/js codebase, specifically for React components in **/*.{ts,tsx} files, do not suggest adding explicit return types like `: JSX.Element` or `: React.ReactElement` to function components. The project maintainer MananTank has explicitly declined these suggestions.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
🧬 Code graph analysis (6)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (2)
apps/dashboard/src/@/lib/server/project-wallet.ts (1)
getProjectWallet(25-97)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (2)
ProjectWalletSection(64-137)ProjectFTUX(34-62)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (4)
apps/dashboard/src/@/lib/server/project-wallet.ts (2)
ProjectWalletSummary(8-12)getProjectWallet(25-97)apps/dashboard/src/@/lib/project-wallet.ts (1)
getProjectWalletLabel(8-21)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx (1)
ProjectWalletControls(59-209)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsx (1)
CreateServerWallet(20-135)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts (4)
apps/dashboard/src/@/lib/project-wallet.ts (1)
getProjectWalletLabel(8-21)packages/vault-sdk/src/sdk.ts (1)
createEoa(313-324)apps/dashboard/src/@/actions/proxies.ts (1)
engineCloudProxy(87-89)apps/dashboard/src/@/hooks/useApi.ts (1)
updateProjectClient(264-289)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts (1)
updateDefaultProjectWallet(190-214)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts (1)
createProjectServerWallet(132-188)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx (4)
apps/dashboard/src/@/hooks/chains/v5-adapter.ts (1)
useV5DashboardChain(14-28)apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx (1)
SingleNetworkSelector(152-298)apps/dashboard/src/@/components/blocks/fund-wallets-modal/index.tsx (1)
FundWalletModal(76-93)apps/dashboard/src/@/actions/project-wallet/send-tokens.ts (1)
sendProjectWalletTokens(12-74)
⏰ 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). (7)
- GitHub Check: Unit Tests
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts (1)
247-252: LGTM!The integration of default project wallet creation is well-placed. The wallet is created after access tokens are generated, and the address is correctly propagated to both the encrypted and non-encrypted service update paths.
Also applies to: 288-288, 311-311
...[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
Show resolved
Hide resolved
...ard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts
Show resolved
Hide resolved
Introduces a new action to list project server wallets and updates ProjectWalletControls to allow users to select and change the default server wallet for a project. Updates related types and props, and improves label handling in getProjectWallet. Also updates the ProjectFTUX story to include managementAccessToken.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx (3)
71-193: ExposeclassNameprop on root container.Dashboard components must accept and forward a
classNameprop to the root element. The rootdivat line 193 hardcodesclassName="space-y-5"with no override mechanism.Apply this diff to add the prop:
type ProjectWalletControlsProps = { walletAddress: string; label: string; project: Pick< Project, "id" | "publishableKey" | "teamId" | "services" | "name" >; defaultChainId?: number; + className?: string; }; export function ProjectWalletControls(props: ProjectWalletControlsProps) { - const { walletAddress, label, project, defaultChainId } = props; + const { walletAddress, label, project, defaultChainId, className } = props; // ... rest of the component return ( - <div className="space-y-5"> + <div className={cn("space-y-5", className)}>As per coding guidelines
430-445: Block zero and negative transfer amounts.The
amountfield only validates that the string is non-empty (line 442), allowing "0" or negative values. Since the default is "0" (line 487), users can submit zero-value transfers.Apply this diff to enforce positive amounts:
const createSendFormSchema = (secretKeyLabel: string) => z.object({ chainId: z.number({ required_error: "Select a network", }), toAddress: z .string() .trim() .min(1, "Destination address is required") .refine((value) => Boolean(isAddress(value)), { message: "Enter a valid wallet address", }), - amount: z.string().trim().min(1, "Amount is required"), + amount: z + .string() + .trim() + .min(1, "Amount is required") + .refine( + (val) => { + const num = Number(val); + return !Number.isNaN(num) && num > 0; + }, + { message: "Amount must be greater than 0" }, + ), secretKey: z.string().trim().min(1, `${secretKeyLabel} is required`), vaultAccessToken: z.string().trim(), });
505-516: Clear secretKey when modal closes.The reset logic preserves
secretKeyin component state when the modal closes (line 511), keeping credentials in memory unnecessarily after the modal is dismissed.Apply this diff to clear credentials:
useEffect(() => { if (!open) { const currentValues = form.getValues(); form.reset({ amount: "0", chainId, - secretKey: currentValues.secretKey ?? "", + secretKey: "", vaultAccessToken: currentValues.vaultAccessToken ?? "", toAddress: "", }); } }, [open, chainId, form]);
🧹 Nitpick comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsx (1)
34-35: Avoid explicitundefinedin Story args; prefer argTypes (and hide token controls).Omit this prop from
argsand, if needed for docs/controls, defineargTypes. Also hide this token-like prop by default to prevent accidental entry/exposure in Storybook.
- Please confirm
managementAccessTokenis optional inProjectFTUXand that omitting it won’t break the story.Apply this diff to remove the arg:
- managementAccessToken: undefined,Optionally, add argTypes in
metato control/hide the prop:// outside selected lines – add to `meta` const meta = { component: ProjectFTUX, decorators: [/* ... */], + argTypes: { + managementAccessToken: { + control: "text", + table: { disable: true }, // hide by default; avoids accidental token exposure + description: "Management access token (server-only; leave empty in stories).", + }, + }, title: "Project/ProjectFTUX", } satisfies Meta<typeof ProjectFTUX>;apps/dashboard/src/@/actions/project-wallet/list-server-wallets.ts (1)
7-16: Consider consolidating VaultWalletListItem type.The
VaultWalletListItemtype is defined here (lines 7-16) and also inapps/dashboard/src/@/lib/server/project-wallet.ts(lines 14-23) with slight differences (metadatais| nullhere but not in the other file). Consolidating to a shared type would improve maintainability.Consider extracting the type to a shared location:
// In a new file: apps/dashboard/src/@/types/vault.ts export interface VaultWalletListItem { id: string; address: string; metadata?: { label?: string; projectId?: string; teamId?: string; type?: string; } | null; }Then import it in both files:
import type { VaultWalletListItem } from "@/types/vault";Also applies to: 52-65
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
apps/dashboard/src/@/actions/project-wallet/list-server-wallets.ts(1 hunks)apps/dashboard/src/@/lib/server/project-wallet.ts(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx(1 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/ProjectFTUX.tsx
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{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@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless 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@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless 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/@/actions/project-wallet/list-server-wallets.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsxapps/dashboard/src/@/lib/server/project-wallet.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.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/@/actions/project-wallet/list-server-wallets.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsxapps/dashboard/src/@/lib/server/project-wallet.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.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
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/@/actions/project-wallet/list-server-wallets.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsxapps/dashboard/src/@/lib/server/project-wallet.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.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)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/@/actions/project-wallet/list-server-wallets.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsxapps/dashboard/src/@/lib/server/project-wallet.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.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)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsx
apps/{dashboard,playground}/**/*.stories.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Add Storybook stories (
*.stories.tsx) alongside new UI components
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.stories.tsx
🧠 Learnings (8)
📚 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)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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}/**/*.{tsx} : Expose `className` prop on root element of components for overrides
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.tsx : Expose a `className` prop on the root element of every component
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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} : Add `className` to the root element of every component for external overrides.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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} : Combine class names via `cn`, expose `className` prop if useful.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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} : Use the `container` class with a `max-w-7xl` cap for page width consistency.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.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} : Merge class names with `cn` from `@/lib/utils` to keep conditional logic readable.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
📚 Learning: 2025-09-03T23:35:50.476Z
Learnt from: MananTank
PR: thirdweb-dev/js#7977
File: apps/playground-web/src/app/page.tsx:61-65
Timestamp: 2025-09-03T23:35:50.476Z
Learning: In the thirdweb-dev/js codebase, specifically for React components in **/*.{ts,tsx} files, do not suggest adding explicit return types like `: JSX.Element` or `: React.ReactElement` to function components. The project maintainer MananTank has explicitly declined these suggestions.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx
🧬 Code graph analysis (3)
apps/dashboard/src/@/actions/project-wallet/list-server-wallets.ts (3)
apps/dashboard/src/@/lib/server/project-wallet.ts (1)
ProjectWalletSummary(8-12)apps/dashboard/src/@/constants/public-envs.ts (1)
NEXT_PUBLIC_THIRDWEB_VAULT_URL(4-5)packages/vault-sdk/src/sdk.ts (2)
createVaultClient(111-165)listEoas(326-337)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx (7)
apps/dashboard/src/@/hooks/chains/v5-adapter.ts (1)
useV5DashboardChain(14-28)apps/dashboard/src/@/lib/server/project-wallet.ts (1)
ProjectWalletSummary(8-12)apps/dashboard/src/@/actions/project-wallet/list-server-wallets.ts (1)
listProjectServerWallets(18-70)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts (1)
updateDefaultProjectWallet(190-216)apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx (1)
SingleNetworkSelector(152-298)apps/dashboard/src/@/components/blocks/fund-wallets-modal/index.tsx (1)
FundWalletModal(76-93)apps/dashboard/src/@/actions/project-wallet/send-tokens.ts (1)
sendProjectWalletTokens(12-74)
apps/dashboard/src/@/lib/server/project-wallet.ts (3)
apps/dashboard/src/@/constants/public-envs.ts (1)
NEXT_PUBLIC_THIRDWEB_VAULT_URL(4-5)packages/vault-sdk/src/sdk.ts (2)
createVaultClient(111-165)listEoas(326-337)apps/dashboard/src/@/lib/project-wallet.ts (1)
getProjectWalletLabel(8-21)
⏰ 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 (3)
apps/dashboard/src/@/actions/project-wallet/list-server-wallets.ts (1)
18-70: LGTM! Well-structured server action.The function implements proper defensive programming with early returns for missing credentials, appropriate error handling with logging, and consistent return types. The filter logic correctly identifies server wallets by projectId and type, and the pagination handling with the documented ts-expect-error is acceptable.
apps/dashboard/src/@/lib/server/project-wallet.ts (2)
1-12: LGTM! Proper server-side module setup.The file correctly starts with
"server-only"import to prevent client-side usage, and exports a cleanProjectWalletSummarytype that's used consistently across the codebase.
25-99: LGTM! Well-implemented wallet lookup with proper safeguards.The function implements thorough defensive programming with early returns for missing required data (lines 38-44), proper error handling with logging (lines 95-98), and correct filtering logic. The case-insensitive address comparison (line 83) is essential for matching, and the fallback to
defaultLabelviagetProjectWalletLabel(lines 75, 93) ensures a consistent UX when metadata is missing.
Closes BLD-372
PR-Codex overview
This PR introduces enhancements to project wallet management, including the ability to create, manage, and utilize project wallets for transactions. It improves the integration of wallet features across the dashboard, ensuring better access and functionality for users.
Detailed summary
projectWalletAddressto various components for wallet integration.getProjectWalletfunction to retrieve wallet details.CreateServerWalletandProjectWalletControlscomponents for wallet management.ProjectFTUXto include wallet information.Summary by CodeRabbit
New Features
Bug Fixes
Refactor