chore: webhooks docs #7604
Open
chore: webhooks docs #7604
+211
−4
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughA new "Webhooks" documentation section was added to the portal application, including a sidebar, layout, and a detailed MDX guide. The UI now features a "Webhooks" SDK card linking to this section. Supporting changes include sidebar configuration, metadata setup, and extending icon support for webhooks in the documentation image generator. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PortalApp
participant Sidebar
participant WebhooksLayout
participant WebhooksDoc
User->>PortalApp: Navigates to /webhooks
PortalApp->>WebhooksLayout: Render layout with sidebar and metadata
WebhooksLayout->>Sidebar: Load sidebar config (includes Webhooks)
WebhooksLayout->>WebhooksDoc: Render documentation content
WebhooksDoc-->>User: Display Webhooks guide and information
sequenceDiagram
participant User
participant PortalApp
participant SDKCard
User->>PortalApp: Views backend APIs grid
PortalApp->>SDKCard: Render Webhooks card with icon and link to /webhooks
SDKCard-->>User: User clicks "Webhooks" card
User->>PortalApp: Navigates to /webhooks (see previous diagram)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
the
Portal
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. |
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
|
|
||
| Webhooks are a way to receive real-time updates for onchain and offchain events. | ||
|
|
||
| An **event** is a real-time update or action that occured for your team or project. |
There was a problem hiding this comment.
There's a typo in this line: "occured" should be spelled "occurred" (with double 'r').
Suggested change
| An **event** is a real-time update or action that occured for your team or project. | |
| An **event** is a real-time update or action that occurred for your team or project. |
Spotted by Diamond
Is this helpful? React 👍 or 👎 to let us know.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7604 +/- ##
=======================================
Coverage 56.45% 56.45%
=======================================
Files 906 906
Lines 58115 58115
Branches 4226 4226
=======================================
Hits 32810 32810
Misses 25195 25195
Partials 110 110
🚀 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: 3
🧹 Nitpick comments (4)
apps/portal/src/components/Document/metadata.ts (1)
25-27: Non-alphabetical union literals make scanning harderNew literals were appended to the end of the
iconunion. Keeping the list sorted alphabetically avoids future merge-conflicts and improves readability.apps/portal/src/app/webhooks/layout.tsx (1)
10-12: Missingflexclass means the column styles are ignored
flex-colwithoutflexis a no-op; the header renders as a normal block.- <div className="flex-col items-center gap-1"> + <div className="flex flex-col items-center gap-1">apps/portal/src/app/webhooks/page.mdx (2)
15-15: Spelling – “occurred” not “occured”
1-3: Unused imports bloat the MDX bundle
Details,DocImage,FeatureCard,OpenSourceCard,Callout,ArrowLeftRightIcon,UserLockIcon,UsersIcon,WalletIconare imported but never used. Please remove.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/portal/src/app/page.tsx(2 hunks)apps/portal/src/app/webhooks/layout.tsx(1 hunks)apps/portal/src/app/webhooks/page.mdx(1 hunks)apps/portal/src/app/webhooks/sidebar.tsx(1 hunks)apps/portal/src/components/Document/metadata.ts(3 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions
Learnt from: AmineAfia
PR: thirdweb-dev/js#7173
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx:59-73
Timestamp: 2025-05-27T21:57:09.248Z
Learning: In the webhooks functionality, form validation prevents users from reaching test webhook functionality without entering a valid URL, ensuring data integrity before testing operations.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
apps/portal/src/app/page.tsx (12)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Learnt from: saminacodes
PR: thirdweb-dev/js#7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: arcoraven
PR: thirdweb-dev/js#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.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Components (Node edge): Start files with `import "server-only";`
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
apps/portal/src/components/Document/metadata.ts (3)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: saminacodes
PR: thirdweb-dev/js#7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
apps/portal/src/app/webhooks/sidebar.tsx (13)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/layout.tsx : Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Learnt from: arcoraven
PR: thirdweb-dev/js#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.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Expose `className` prop on root element for overrides in UI components
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/hooks/**/*.{ts,tsx} : Prefer API routes or server actions to keep tokens secret; the browser only sees relative paths.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Components: Implement redirect logic with `redirect()` from `next/navigation`
Learnt from: saminacodes
PR: thirdweb-dev/js#7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
apps/portal/src/app/webhooks/layout.tsx (13)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/layout.tsx : Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Components: Perform heavy data fetching
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Components: Implement redirect logic with `redirect()` from `next/navigation`
Learnt from: MananTank
PR: thirdweb-dev/js#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.
Learnt from: arcoraven
PR: thirdweb-dev/js#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.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
apps/portal/src/app/webhooks/page.mdx (7)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to packages/thirdweb/src/exports/**/*.{ts,tsx} : Every public symbol must have comprehensive TSDoc with at least one `@example` block that compiles and custom annotation tags (`@beta`, `@internal`, `@experimental`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/@/analytics/report.ts : Analytics Events: Event name should be human-readable `<subject> <verb>` (e.g. "contract deployed")
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/hooks/**/*.{ts,tsx} : Configure `staleTime` / `cacheTime` according to freshness requirements.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/hooks/**/*.{ts,tsx} : Prefer API routes or server actions to keep tokens secret; the browser only sees relative paths.
🧬 Code Graph Analysis (2)
apps/portal/src/app/page.tsx (1)
apps/portal/src/components/Document/SDKCard.tsx (1)
SDKCard(4-27)
apps/portal/src/app/webhooks/layout.tsx (2)
apps/portal/src/app/webhooks/sidebar.tsx (1)
sidebar(4-13)apps/portal/src/components/Document/metadata.ts (1)
createMetadata(31-64)
⏰ 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 (5)
apps/portal/src/app/webhooks/sidebar.tsx (1)
1-1: Import follows the “Icon”-suffix rule – ✅apps/portal/src/app/page.tsx (2)
150-155: Internal link should use absolute path helperAll internal routes elsewhere use
href={route("/webhooks")}(wrapper aroundnext/linkthat handles basePath). Using the raw string risks breaking in multi-deploy setups.- <SDKCard - href="/webhooks" + <SDKCard + href={route("/webhooks")}
1-1: Import order not enforced here – looks fineapps/portal/src/app/webhooks/layout.tsx (1)
20-27: Consider addingimport "server-only";This file is rendered on the server only and pulls portal-only utilities. Adding the directive avoids accidental client bundling.
apps/portal/src/app/webhooks/page.mdx (1)
122-147: Potential runtime errors in signature-verification snippet
actualSignature×tampare strings | string[] | undefined – callString()or assert type before use.- Raw body must be the exact bytes received;
JSON.stringifyor body parsers will fail verification. Add a comment to emphasise.
Comment on lines
44
to
46
| height: 630, | ||
| url: `${BAST_URL}/api/og?icon=${obj.image.icon}&title=${obj.image.title}`, | ||
| url: `${BASE_URL}/api/og?icon=${obj.image.icon}&title=${obj.image.title}`, | ||
| width: 1200, |
There was a problem hiding this comment.
Use URLSearchParams to escape user-supplied values
title comes straight from obj.image.title; if it ever contains &, ?, or #, the generated URL will break. Safer to build the query string with URLSearchParams.
- url: `${BASE_URL}/api/og?icon=${obj.image.icon}&title=${obj.image.title}`,
+ url: `${BASE_URL}/api/og?` +
+ new URLSearchParams({
+ icon: obj.image.icon,
+ title: obj.image.title,
+ }).toString(),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| height: 630, | |
| url: `${BAST_URL}/api/og?icon=${obj.image.icon}&title=${obj.image.title}`, | |
| url: `${BASE_URL}/api/og?icon=${obj.image.icon}&title=${obj.image.title}`, | |
| width: 1200, | |
| height: 630, | |
| url: `${BASE_URL}/api/og?` + | |
| new URLSearchParams({ | |
| icon: obj.image.icon, | |
| title: obj.image.title, | |
| }).toString(), | |
| width: 1200, |
🤖 Prompt for AI Agents
In apps/portal/src/components/Document/metadata.ts around lines 44 to 46, the
URL query string is constructed by directly embedding user-supplied values,
which can break the URL if special characters like &, ?, or # are present. To
fix this, replace the string interpolation with URLSearchParams to properly
encode the query parameters. Create a new URLSearchParams instance, append the
icon and title values from obj.image, and use its toString() method to build the
query string safely.
Comment on lines
+8
to
+10
| icon: <WebhookIcon />, | ||
| name: "Overview", | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Pass the icon component, not the rendered element
DocLayout sidebars in this repo expect a React component (e.g. WebhookIcon) so they can uniformly size & theme it. Passing <WebhookIcon /> produces a pre-rendered node and breaks those controls.
- icon: <WebhookIcon />,
+ icon: WebhookIcon,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| icon: <WebhookIcon />, | |
| name: "Overview", | |
| }, | |
| icon: WebhookIcon, | |
| name: "Overview", | |
| }, |
🤖 Prompt for AI Agents
In apps/portal/src/app/webhooks/sidebar.tsx around lines 8 to 10, the icon
property is assigned a rendered React element <WebhookIcon /> instead of the
component itself. Replace the icon value to pass the WebhookIcon component
directly without JSX syntax, i.e., use WebhookIcon instead of <WebhookIcon /> so
that DocLayout sidebars can properly size and theme the icon.
Comment on lines
+154
to
+159
| const MAX_AGE_SECONDS = 10 * 60 * 1000; // 10 minutes | ||
| const timestamp = req.headers["x-webhook-timestamp"]; | ||
| if (Date.now() / 1000 - timestamp > MAX_AGE_SECONDS) { | ||
| throw new Error("Webhook expired"); | ||
| } | ||
| ``` |
There was a problem hiding this comment.
Unit mismatch – constant is milliseconds but compared against seconds
MAX_AGE_SECONDS multiplies by 1000 but is compared to values in seconds.
-const MAX_AGE_SECONDS = 10 * 60 * 1000; // 10 minutes
+const MAX_AGE_SECONDS = 10 * 60; // 10 minutes in seconds📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const MAX_AGE_SECONDS = 10 * 60 * 1000; // 10 minutes | |
| const timestamp = req.headers["x-webhook-timestamp"]; | |
| if (Date.now() / 1000 - timestamp > MAX_AGE_SECONDS) { | |
| throw new Error("Webhook expired"); | |
| } | |
| ``` | |
| const MAX_AGE_SECONDS = 10 * 60; // 10 minutes in seconds | |
| const timestamp = req.headers["x-webhook-timestamp"]; | |
| if (Date.now() / 1000 - timestamp > MAX_AGE_SECONDS) { | |
| throw new Error("Webhook expired"); | |
| } |
🤖 Prompt for AI Agents
In apps/portal/src/app/webhooks/page.mdx around lines 154 to 159, the constant
MAX_AGE_SECONDS is incorrectly calculated in milliseconds (multiplied by 1000)
but compared against a timestamp difference in seconds. To fix this, either
rename the constant to reflect milliseconds and convert the timestamp difference
to milliseconds before comparison, or keep the constant in seconds by removing
the multiplication by 1000 so that both values are in the same unit for accurate
comparison.
joaquim-verges
approved these changes
Jul 14, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR-Codex overview
This PR introduces a new
Webhookssection in the application, providing a sidebar navigation item, a dedicated layout, and detailed documentation on webhooks, including their configuration, management, and security practices.Detailed summary
sidebarconfiguration forWebhooksinsidebar.tsx.SDKCardforWebhooksinpage.tsx.BAST_URLtoBASE_URLinmetadata.ts.Layoutcomponent forWebhooksinlayout.tsx.Webhooksinlayout.tsx.page.mdx, covering setup, management, event handling, and security.Summary by CodeRabbit
New Features
Documentation
Bug Fixes