[Dashboard] Add x402 fee configuration #8434
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 57b077a The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughAdds X402 fee support: a new API to read X402 fees from a project's engineCloud service, a React UI to configure recipient and BPS, updates the project page to fetch fees and wallet in parallel, and extends the ProjectService type with x402FeeBPS and x402FeeRecipient. Changes
Sequence DiagramsequenceDiagram
participant User
participant Page as X402 Config Page
participant API as getX402Fees
participant Component as X402FeeConfig
participant Mutation as useMutation
participant Service as updateProjectClient
User->>Page: Navigate to X402 configuration
Note over Page: Parallel fetch: team, project, authToken, projectWallet
Page->>API: getX402Fees(project)
API-->>Page: X402Fee { recipient, bps }
Page->>Component: Pass fees, project, walletAddress
Component->>Component: Init form (zod + react-hook-form)
Component-->>User: Render form
User->>Component: Submit form
Component->>Mutation: call mutation to update engineCloud x402 fields
Mutation->>Service: updateProjectClient(new services)
Service-->>Mutation: Success / Error
Mutation-->>User: Show toast (success/error)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
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. This stack of pull requests is managed by Graphite. Learn more about stacking. |
joaquim-verges
changed the title
joaquim-verges
force-pushed
the
_Dashboard_Add_x402_fee_configuration_and_disable_robots.txt_indexing
branch
from
a9603f6 to
08098d6
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8434 +/- ##
=======================================
Coverage 54.83% 54.83%
=======================================
Files 919 919
Lines 60868 60868
Branches 4141 4141
=======================================
Hits 33375 33375
Misses 27391 27391
Partials 102 102
🚀 New features to boost your workflow:
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx (5)
36-39: Optional: Simplify the developerFeeBPS initialization.Line 37 uses a ternary operator that's unnecessary since
0 / 100equals0.Apply this diff:
values: { - developerFeeBPS: props.fees.feeBps ? props.fees.feeBps / 100 : 0, + developerFeeBPS: props.fees.feeBps / 100, payoutAddress: props.fees.feeRecipient ?? "", },
90-92: Remove debug console.log from production code.The validation error logging at lines 90-92 uses
console.log, which should be removed or replaced with a proper logging mechanism.Apply this diff:
}, (errors) => { - console.log(errors); + // Validation errors are already displayed in the form }, );
76-76: Optional: Simplify the basis point conversion.The ternary operator is unnecessary since
0 * 100equals0.Apply this diff:
{ - developerFeeBPS: developerFeeBPS ? developerFeeBPS * 100 : 0, + developerFeeBPS: (developerFeeBPS || 0) * 100, payoutAddress, },
100-100: Consider displaying all form errors in SettingsCard.The
errorTextprop only displays errors for thepayoutAddressfield. If there are validation errors on thedeveloperFeeBPSfield, they won't be shown in the SettingsCard footer (though they may appear in the FormItem itself).For consistency, consider showing a generic error message when any field has errors:
- errorText={form.getFieldState("payoutAddress").error?.message} + errorText={ + form.formState.errors.payoutAddress?.message || + form.formState.errors.developerFeeBPS?.message + }
133-136: Optional: Remove redundant null check.The check at line 134 is redundant because the button only renders when
props.projectWalletAddressis truthy (line 131 condition).Apply this diff:
<Button onClick={() => { - if (!props.projectWalletAddress) { - return; - } - form.setValue( "payoutAddress", props.projectWalletAddress,
📜 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)
.changeset/tidy-paws-feel.md(1 hunks)apps/dashboard/src/@/api/x402/config.ts(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx(1 hunks)packages/service-utils/src/core/api.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (12)
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 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)/x402/configuration/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 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)/x402/configuration/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx
📚 Learning: 2025-05-21T05:17:31.283Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 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)/x402/configuration/page.tsx
📚 Learning: 2025-06-10T00:50:20.795Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-06-24T21:38:03.155Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7434
File: apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx:62-76
Timestamp: 2025-06-24T21:38:03.155Z
Learning: In the project-selector.tsx component for contract imports, the addToProject.mutate() call is intentionally not awaited (fire-and-forget pattern) to allow immediate navigation to the contract page while the import happens in the background. This is a deliberate design choice to prioritize user experience.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-07-15T08:25:44.584Z
Learnt from: Yash094
Repo: thirdweb-dev/js PR: 7608
File: apps/dashboard/src/@/api/team.ts:96-96
Timestamp: 2025-07-15T08:25:44.584Z
Learning: In the thirdweb dashboard codebase, the `getTeamById` function was actually a wrapper around `getTeamBySlug`, so removing it and calling `getTeamBySlug` directly doesn't change functionality. The `LAST_USED_TEAM_ID` cookie and related variables were storing slugs all along, not IDs.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-05-26T16:26:58.068Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/nfts/page.tsx:20-20
Timestamp: 2025-05-26T16:26:58.068Z
Learning: In team/project contract pages under routes like `/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/*`, users are always logged in by design. The hardcoded `isLoggedIn={true}` prop in these pages is intentional and correct, not a bug to be fixed.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-05-26T16:28:50.772Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractTokensPage` component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-08-07T17:24:31.965Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7812
File: apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx:1-11
Timestamp: 2025-08-07T17:24:31.965Z
Learning: In Next.js App Router, page components (page.tsx files) are server components by default and do not require the "server-only" import directive. The "server-only" directive is primarily used for utility functions, API helpers, and data access modules that should never be included in the client bundle.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-05-26T16:28:10.079Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/page.tsx:2-10
Timestamp: 2025-05-26T16:28:10.079Z
Learning: In Next.js 14+, the `params` object in page components is always a Promise that needs to be awaited, so the correct typing is `params: Promise<ParamsType>` rather than `params: ParamsType`.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-06-05T13:59:49.886Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7285
File: apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/uri-based-deploy.tsx:57-57
Timestamp: 2025-06-05T13:59:49.886Z
Learning: In the thirdweb dashboard Next.js app, when using loginRedirect() in server components, ensure to add a return statement after the redirect call to prevent further code execution and potential security issues.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-07-10T10:18:33.238Z
Learnt from: arcoraven
Repo: thirdweb-dev/js PR: 7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx
🧬 Code graph analysis (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx (4)
apps/dashboard/src/@/utils/redirects.ts (1)
loginRedirect(3-9)apps/dashboard/src/@/lib/server/project-wallet.ts (1)
getProjectWallet(25-99)apps/dashboard/src/@/api/x402/config.ts (1)
getX402Fees(11-27)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx (1)
X402FeeConfig(33-181)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx (3)
apps/dashboard/src/@/schema/validations.ts (2)
ApiKeyPayConfigValidationSchema(145-147)apiKeyPayConfigValidationSchema(116-125)apps/dashboard/src/@/hooks/useApi.ts (1)
updateProjectClient(264-289)apps/dashboard/src/@/components/blocks/SettingsCard.tsx (1)
SettingsCard(6-84)
⏰ 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 (4)
.changeset/tidy-paws-feel.md (1)
1-5: LGTM!The changeset documentation correctly describes the patch release for updating the engineCloud service configuration.
packages/service-utils/src/core/api.ts (1)
245-246: LGTM!The addition of
x402FeeBPSandx402FeeRecipientfields to the engineCloud service variant is well-structured. The optional nullable types allow for backward compatibility and gradual feature rollout.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx (1)
13-35: LGTM! Well-structured data fetching and validation.The parallel data fetching with
Promise.allis efficient, and the sequential validation flow (auth → team → project → wallet/fees) is appropriate. The component correctly handles the optionalprojectWalletAddressprop.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx (1)
48-57: The review comment is incorrect. No type safety issue exists.The
ProjectServicetype is a discriminated union withnameas the discriminator, and theengineCloudvariant includes thex402FeeBPSandx402FeeRecipientproperties. The conditionservice.name === "engineCloud"acts as a proper type guard that narrows the type to theengineCloudvariant, making the spread and property assignment type-safe. TypeScript compilation confirms this succeeds without errors.Likely an incorrect or invalid review comment.
joaquim-verges
force-pushed
the
_Dashboard_Add_x402_fee_configuration_and_disable_robots.txt_indexing
branch
from
08098d6 to
57b077a
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx (2)
131-154: Remove redundant null check.Line 134 checks
if (!props.projectWalletAddress)but this condition is already guaranteed to be false because of the conditional rendering at line 131. The inner check is redundant.Apply this diff:
{props.projectWalletAddress && ( <Button onClick={() => { - if (!props.projectWalletAddress) { - return; - } - form.setValue( "payoutAddress", props.projectWalletAddress, { shouldDirty: true, shouldTouch: true, shouldValidate: true, }, ); }}
42-70: Consider handling the missingengineCloudservice scenario.Lines 48-57 map over services and only update the
engineCloudservice if it exists. If noengineCloudservice is present in the project, the mutation will succeed silently without making any changes. While this might be intentional, it could lead to user confusion when the form appears to save successfully but doesn't persist changes.Consider adding validation:
const updateFeeMutation = useMutation({ mutationFn: async (values: { payoutAddress: string; developerFeeBPS: number; }) => { + const hasEngineCloud = props.project.services.some( + (service) => service.name === "engineCloud" + ); + + if (!hasEngineCloud) { + throw new Error("Engine Cloud service not found"); + } + // Find and update the engineCloud service const newServices = props.project.services.map((service) => { if (service.name === "engineCloud") { return { ...service, x402FeeBPS: values.developerFeeBPS, x402FeeRecipient: values.payoutAddress, }; } return service; });
📜 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)
.changeset/tidy-paws-feel.md(1 hunks)apps/dashboard/src/@/api/x402/config.ts(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx(1 hunks)packages/service-utils/src/core/api.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- .changeset/tidy-paws-feel.md
- packages/service-utils/src/core/api.ts
🧰 Additional context used
🧠 Learnings (11)
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 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)/x402/configuration/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 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)/x402/configuration/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx
📚 Learning: 2025-05-21T05:17:31.283Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 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)/x402/configuration/page.tsx
📚 Learning: 2025-06-10T00:50:20.795Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-06-24T21:38:03.155Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7434
File: apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx:62-76
Timestamp: 2025-06-24T21:38:03.155Z
Learning: In the project-selector.tsx component for contract imports, the addToProject.mutate() call is intentionally not awaited (fire-and-forget pattern) to allow immediate navigation to the contract page while the import happens in the background. This is a deliberate design choice to prioritize user experience.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-05-26T16:26:58.068Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/nfts/page.tsx:20-20
Timestamp: 2025-05-26T16:26:58.068Z
Learning: In team/project contract pages under routes like `/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/*`, users are always logged in by design. The hardcoded `isLoggedIn={true}` prop in these pages is intentional and correct, not a bug to be fixed.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-05-26T16:28:50.772Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractTokensPage` component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-08-07T17:24:31.965Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7812
File: apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx:1-11
Timestamp: 2025-08-07T17:24:31.965Z
Learning: In Next.js App Router, page components (page.tsx files) are server components by default and do not require the "server-only" import directive. The "server-only" directive is primarily used for utility functions, API helpers, and data access modules that should never be included in the client bundle.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-05-26T16:28:10.079Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/page.tsx:2-10
Timestamp: 2025-05-26T16:28:10.079Z
Learning: In Next.js 14+, the `params` object in page components is always a Promise that needs to be awaited, so the correct typing is `params: Promise<ParamsType>` rather than `params: ParamsType`.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-06-05T13:59:49.886Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7285
File: apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/uri-based-deploy.tsx:57-57
Timestamp: 2025-06-05T13:59:49.886Z
Learning: In the thirdweb dashboard Next.js app, when using loginRedirect() in server components, ensure to add a return statement after the redirect call to prevent further code execution and potential security issues.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx
📚 Learning: 2025-07-10T10:18:33.238Z
Learnt from: arcoraven
Repo: thirdweb-dev/js PR: 7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx
🧬 Code graph analysis (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx (4)
apps/dashboard/src/@/utils/redirects.ts (1)
loginRedirect(3-9)apps/dashboard/src/@/lib/server/project-wallet.ts (1)
getProjectWallet(25-99)apps/dashboard/src/@/api/x402/config.ts (1)
getX402Fees(11-27)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx (1)
X402FeeConfig(33-181)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx (3)
apps/dashboard/src/@/schema/validations.ts (2)
ApiKeyPayConfigValidationSchema(145-147)apiKeyPayConfigValidationSchema(116-125)apps/dashboard/src/@/hooks/useApi.ts (1)
updateProjectClient(264-289)apps/dashboard/src/@/components/blocks/SettingsCard.tsx (1)
SettingsCard(6-84)
⏰ 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). (4)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
apps/dashboard/src/@/api/x402/config.ts (1)
11-27: Acknowledge the type safety concern from the previous review.The past review comment correctly identifies that after the null check at line 16,
engineCloudServiceremains typed as the fullProjectServiceunion rather than being narrowed to the"engineCloud"variant. While the fallback operators at lines 24-25 prevent runtime errors, explicit type narrowing would improve type safety and code maintainability.The suggested fix in the past review (adding a type guard check or type assertion) remains valid and should be implemented.
Based on past review comments.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/page.tsx (1)
15-35: Consider includinggetProjectWalletin the parallel fetch.Currently,
getProjectWalletis awaited separately at line 33, creating a sequential dependency after the initial parallel fetch. Including it in thePromise.allat line 15 would improve page load performance.Apply this diff:
- const [team, project, authToken] = await Promise.all([ + const [team, project, authToken, projectWallet] = await Promise.all([ getTeamBySlug(team_slug), getProject(team_slug, project_slug), getAuthToken(), + (async () => { + const proj = await getProject(team_slug, project_slug); + return proj ? getProjectWallet(proj) : undefined; + })(), ]);Alternatively, if
getProjectWalletrequires theprojectobject to be validated first (which it does based on the relevant code snippet), the current sequential approach is correct. In that case, this is not an issue.After reviewing the
getProjectWalletsignature in the relevant code snippet (line 24-26), it does require aProjectobject, so fetching it in parallel would require fetching the project twice. The current sequential approach is actually optimal.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx (1)
34-40: Fix type mismatch between form values and validation schema.The
apiKeyPayConfigValidationSchemaexpectsdeveloperFeeBPSto be astring(as shown in the relevant code snippet at@/schema/validations.ts:115-124), but line 37 initializes it with anumber(props.fees.feeBps / 100). This type mismatch can cause validation issues.Apply this diff to fix the type mismatch:
const form = useForm<ApiKeyPayConfigValidationSchema>({ resolver: zodResolver(apiKeyPayConfigValidationSchema), values: { - developerFeeBPS: props.fees.feeBps ? props.fees.feeBps / 100 : 0, + developerFeeBPS: props.fees.feeBps ? String(props.fees.feeBps / 100) : "0", payoutAddress: props.fees.feeRecipient ?? "", }, });⛔ Skipped due to learnings
Learnt from: gregfromstl Repo: thirdweb-dev/js PR: 7450 File: packages/thirdweb/src/bridge/Webhook.ts:57-81 Timestamp: 2025-06-26T19:46:04.024Z Learning: In the onramp webhook schema (`packages/thirdweb/src/bridge/Webhook.ts`), the `currencyAmount` field is intentionally typed as `z.number()` while other amount fields use `z.string()` because `currencyAmount` represents fiat currency amounts in decimals (like $10.50), whereas other amount fields represent token amounts in wei (very large integers that benefit from bigint representation). The different naming convention (`currencyAmount` vs `amount`) reflects this intentional distinction.Learnt from: joaquim-verges Repo: thirdweb-dev/js PR: 7922 File: apps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsx:167-181 Timestamp: 2025-08-28T20:50:33.170Z Learning: The SignTransactionInput schema in thirdweb-dev/ai-sdk-provider uses snake_case field names (chain_id) rather than camelCase (chainId).
| type X402Fee = { | ||
| feeRecipient: string; | ||
| feeBps: number; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Export the X402Fee type for external consumers.
The X402Fee type is referenced by components like X402FeeConfig.tsx (line 26-29) which define their own inline version of this type. Exporting it would enable type reuse and ensure consistency across the codebase.
Apply this diff:
-type X402Fee = {
+export type X402Fee = {
feeRecipient: string;
feeBps: number;
};📝 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.
| type X402Fee = { | |
| feeRecipient: string; | |
| feeBps: number; | |
| }; | |
| export type X402Fee = { | |
| feeRecipient: string; | |
| feeBps: number; | |
| }; |
🤖 Prompt for AI Agents
In apps/dashboard/src/@/api/x402/config.ts around lines 3 to 6, the X402Fee type
is currently declared but not exported; update the declaration to export the
type (e.g., add the export keyword: export type X402Fee = { feeRecipient:
string; feeBps: number; }) so external consumers can import and reuse it, and
then update any files (like X402FeeConfig.tsx) to import this exported type
instead of redefining it locally.
| <FormField | ||
| control={form.control} | ||
| name="developerFeeBPS" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <FormLabel>Fee amount</FormLabel> | ||
| <FormControl> | ||
| <div className="flex items-center gap-2"> | ||
| <Input {...field} placeholder="0.5" type="number" /> | ||
| <span className="text-muted-foreground text-sm">%</span> | ||
| </div> | ||
| </FormControl> | ||
| </FormItem> | ||
| )} | ||
| /> |
There was a problem hiding this comment.
Display validation errors for the fee amount field.
The payoutAddress field shows validation errors (line 100), but the developerFeeBPS field has no error display. Users won't see validation messages (e.g., "Developer fee must be between 0 and 100") if they enter an invalid value.
Add error display for the fee field:
<FormField
control={form.control}
name="developerFeeBPS"
render={({ field }) => (
<FormItem>
<FormLabel>Fee amount</FormLabel>
<FormControl>
<div className="flex items-center gap-2">
<Input {...field} placeholder="0.5" type="number" />
<span className="text-muted-foreground text-sm">%</span>
</div>
</FormControl>
+ <FormMessage />
</FormItem>
)}
/>Note: You'll need to import FormMessage from @/components/ui/form.
📝 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.
| <FormField | |
| control={form.control} | |
| name="developerFeeBPS" | |
| render={({ field }) => ( | |
| <FormItem> | |
| <FormLabel>Fee amount</FormLabel> | |
| <FormControl> | |
| <div className="flex items-center gap-2"> | |
| <Input {...field} placeholder="0.5" type="number" /> | |
| <span className="text-muted-foreground text-sm">%</span> | |
| </div> | |
| </FormControl> | |
| </FormItem> | |
| )} | |
| /> | |
| <FormField | |
| control={form.control} | |
| name="developerFeeBPS" | |
| render={({ field }) => ( | |
| <FormItem> | |
| <FormLabel>Fee amount</FormLabel> | |
| <FormControl> | |
| <div className="flex items-center gap-2"> | |
| <Input {...field} placeholder="0.5" type="number" /> | |
| <span className="text-muted-foreground text-sm">%</span> | |
| </div> | |
| </FormControl> | |
| <FormMessage /> | |
| </FormItem> | |
| )} | |
| /> |
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/x402/configuration/X402FeeConfig.tsx
around lines 160 to 174, the developerFeeBPS FormField is missing display of
validation errors; update the FormField render to include FormMessage below the
FormControl (same pattern used for payoutAddress) so form errors for
developerFeeBPS show to the user, and ensure FormMessage is imported from
"@/components/ui/form" at the top of the file.
PR-Codex overview
This PR updates the
engineCloudservice configuration to include new fee management features forx402transactions. It introduces a new function to extract fee configurations and updates the UI to allow users to set and manage these fees.Detailed summary
x402FeeBPSandx402FeeRecipientproperties to theengineCloudservice.getX402Feesfunction to extract fee configuration from theengineCloudservice.Pagecomponent to fetch and displayx402fee configurations.X402FeeConfigcomponent for managing fee settings.Summary by CodeRabbit
New Features
Improvements
Chores