Add support for chain filtering in webhook creation #7209
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
""" WalkthroughSupport for dynamically fetching and propagating supported blockchain chain IDs for webhooks was implemented. A new API function retrieves supported chains, and this data is passed through the webhooks page, table, modal, and selector components. Components now restrict selectable networks based on the fetched supported chain IDs and handle cases where none are available. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WebhooksPage
participant API
participant WebhooksTable
participant CreateWebhookModal
participant FilterDetailsStep
participant MultiNetworkSelector
User->>WebhooksPage: Load page
WebhooksPage->>API: getSupportedWebhookChains()
API-->>WebhooksPage: { chains: [...] } or { error: ... }
WebhooksPage->>WebhooksTable: supportedChainIds=[...]
WebhooksTable->>CreateWebhookModal: supportedChainIds=[...]
CreateWebhookModal->>FilterDetailsStep: supportedChainIds=[...]
FilterDetailsStep->>MultiNetworkSelector: chainIds=[...]
MultiNetworkSelector-->>FilterDetailsStep: Render filtered networks
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (6)
🚧 Files skipped from review as they are similar to previous changes (6)
⏰ Context from checks skipped due to timeout of 90000ms (8)
✨ 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 (
|
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. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7209 +/- ##
=======================================
Coverage 55.63% 55.63%
=======================================
Files 908 908
Lines 58546 58546
Branches 4128 4128
=======================================
Hits 32572 32572
Misses 25868 25868
Partials 106 106
🚀 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
🧹 Nitpick comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx (1)
44-44: LGTM!The new
supportedChainIdsprop is correctly typed. Note: Consider usingnumber[]for consistency with other files, thoughArray<number>is functionally equivalent.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx (1)
48-48: Consider type consistency across the codebase.The interface uses
Array<number>while the page component usesnumber[]. Both are functionally equivalent, but consistency would improve maintainability.Consider using consistent type notation across files:
-supportedChainIds: Array<number>; +supportedChainIds: number[];
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/dashboard/src/@/api/insight/webhooks.ts(2 hunks)apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx(5 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx (1)
apps/dashboard/src/hooks/chains/allChains.ts (1)
useAllChainsData(125-148)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx (1)
CreateWebhookModal(47-299)
apps/dashboard/src/@/api/insight/webhooks.ts (1)
apps/dashboard/src/constants/urls.ts (1)
THIRDWEB_INSIGHT_API_DOMAIN(24-25)
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Build Packages
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (15)
apps/dashboard/src/@/api/insight/webhooks.ts (1)
70-72: LGTM!The type definition correctly models the possible return shapes from the API function.
apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx (2)
30-30: LGTM!The optional
chainIdsprop addition maintains backward compatibility while enabling chain filtering functionality.
34-38: LGTM!The filtering logic is correctly implemented:
- Only filters when
chainIdsis provided and non-empty- Uses appropriate array methods
- Positioned correctly before other chain processing logic
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx (3)
35-35: LGTM!The new
supportedChainIdsprop is correctly typed and added to the interface.
38-42: LGTM!The component signature correctly includes the new prop in the destructuring.
218-221: LGTM!The
supportedChainIdsprop is correctly passed down to theCreateWebhookModalcomponent.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx (2)
47-50: LGTM!The component signature correctly includes the new prop in the destructuring.
277-277: LGTM!The
supportedChainIdsprop is correctly passed down to theFilterDetailsStepcomponent.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx (4)
1-5: LGTM! Import statement correctly updated.The import statement properly includes the new
getSupportedWebhookChainsfunction alongside existing imports.
18-18: LGTM! Variable initialization is appropriate.The
supportedChainIdsarray is properly initialized as an empty array, maintaining type consistency with the expectednumber[]type.
83-93: LGTM! Error state handling for unsupported chains is well implemented.The conditional rendering properly handles the scenario when no supported chains are available, providing clear user feedback with appropriate styling and messaging.
95-99: LGTM! Props are correctly passed to child components.The
supportedChainIdsprop is properly passed to bothWebhooksTableandCreateWebhookModalcomponents, maintaining the data flow through the component hierarchy.Also applies to: 108-111
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx (3)
26-26: LGTM! Import reordering has no functional impact.The import statement was reordered without changing functionality, which is acceptable.
64-64: LGTM! Parameter correctly added to component signature.The
supportedChainIdsparameter is properly added to match the updated interface.
111-111:✅ Verification successful
Verify that MultiNetworkSelector supports the chainIds prop.
The code passes
chainIds={supportedChainIds}toMultiNetworkSelector, but we should verify this prop is properly implemented in the component.
🏁 Script executed:
#!/bin/bash # Description: Verify that MultiNetworkSelector component accepts chainIds prop # Expected: Find the component implementation and check if chainIds prop is defined # Search for MultiNetworkSelector component definition ast-grep --pattern $'export function MultiNetworkSelector({ $$$ }) { $$$ }' # Also search for interface/type definitions rg -A 10 "interface.*MultiNetworkSelector" rg -A 10 "type.*MultiNetworkSelector"Length of output: 165
🏁 Script executed:
#!/bin/bash # Locate where MultiNetworkSelector is imported to determine its source rg -n "import.*MultiNetworkSelector" -g '*.tsx' # Find all files referencing MultiNetworkSelector rg -l "MultiNetworkSelector" -g '*.tsx'Length of output: 1679
🏁 Script executed:
#!/bin/bash # Inspect implementation of MultiNetworkSelector in dashboard components echo "----- apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx (first 200 lines) -----" sed -n '1,200p' apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx || true echo echo "----- Searching for chainIds prop in dashboard component -----" rg -n "chainIds" -C 3 apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx || true echo echo "----- Searching for MultiNetworkSelector declaration/export -----" rg -n "MultiNetworkSelector" -C 5 apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx || trueLength of output: 8486
chainIds prop support confirmed in MultiNetworkSelector
The
MultiNetworkSelectorcomponent in
apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
defineschainIds?: number[]in its props and applies it to filterallChains(lines 30–38). The passedsupportedChainIdswill correctly limit the selectable networks.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx
Outdated
Show resolved
Hide resolved
size-limit report 📦
|
AmineAfia
force-pushed
the
Add_support_for_chain_filtering_in_webhook_creation
branch
from
49943b4 to
f0fc8ba
Compare
Merge activity
|
## [Dashboard] Feature: Add Chain Filtering for Webhooks
## Notes for the reviewer
This PR adds support for filtering available chains in the webhook creation flow. It fetches supported chains from the Insight API and restricts the chain selection in the UI to only those chains that are supported for webhooks.
## How to test
1. Navigate to the webhooks page for a project
2. Verify that the chain selector in the webhook creation modal only shows supported chains
3. Confirm that the API call to fetch supported chains works correctly
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added support for dynamically fetching and displaying supported blockchain networks when creating or managing webhooks.
- The network selector now only shows networks that are currently supported for webhooks.
- Users are notified if no supported blockchain networks are available for webhooks.
- **Bug Fixes**
- Improved error handling and messaging when no supported blockchain networks are available.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR primarily focuses on enhancing the `NetworkSelectors` and webhook components by introducing support for `chainIds`. It adds functionality to filter chains based on the provided IDs and ensures that the `CreateWebhookModal` and `WebhooksTable` components utilize these IDs.
### Detailed summary
- Added `chainIds` prop to `NetworkSelectors`.
- Modified `useAllChainsData` to filter `allChains` based on `chainIds`.
- Updated `CreateWebhookModal` to accept `supportedChainIds`.
- Updated `WebhooksTable` to accept `supportedChainIds`.
- Introduced `getSupportedWebhookChains` API function to fetch supported chains.
- Updated `FilterDetailsStep` to use `supportedChainIds`.
- Modified `WebhooksPage` to fetch and handle `supportedChainIds` from the API.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
graphite-app
bot
force-pushed
the
Add_support_for_chain_filtering_in_webhook_creation
branch
from
f0fc8ba to
9611a17
Compare
## [Dashboard] Feature: Add Chain Filtering for Webhooks
## Notes for the reviewer
This PR adds support for filtering available chains in the webhook creation flow. It fetches supported chains from the Insight API and restricts the chain selection in the UI to only those chains that are supported for webhooks.
## How to test
1. Navigate to the webhooks page for a project
2. Verify that the chain selector in the webhook creation modal only shows supported chains
3. Confirm that the API call to fetch supported chains works correctly
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added support for dynamically fetching and displaying supported blockchain networks when creating or managing webhooks.
- The network selector now only shows networks that are currently supported for webhooks.
- Users are notified if no supported blockchain networks are available for webhooks.
- **Bug Fixes**
- Improved error handling and messaging when no supported blockchain networks are available.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the `NetworkSelectors` and webhook components by adding support for multiple chain IDs, improving the data handling for webhooks, and integrating the fetching of supported chains from an API.
### Detailed summary
- Added `chainIds` prop to `NetworkSelectors` and filtered `allChains` based on it.
- Updated `CreateWebhookModal` to accept `supportedChainIds`.
- Modified `WebhooksTable` to include `supportedChainIds`.
- Introduced `getSupportedWebhookChains` API call to fetch supported chains.
- Updated `FilterDetailsStep` to utilize `supportedChainIds`.
- Adjusted `WebhooksPage` to manage `supportedChainIds` and handle API responses.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
graphite-app
bot
force-pushed
the
Add_support_for_chain_filtering_in_webhook_creation
branch
from
9611a17 to
deeca88
Compare
graphite-app
bot
deleted the
Add_support_for_chain_filtering_in_webhook_creation
branch
[Dashboard] Feature: Add Chain Filtering for Webhooks
Notes for the reviewer
This PR adds support for filtering available chains in the webhook creation flow. It fetches supported chains from the Insight API and restricts the chain selection in the UI to only those chains that are supported for webhooks.
How to test
Summary by CodeRabbit
PR-Codex overview
This PR primarily focuses on enhancing the handling of supported chain IDs across multiple components in the dashboard, allowing for better filtering and management of webhooks based on the selected blockchain networks.
Detailed summary
chainIdsprop toNetworkSelectorsand filteredallChainsbased on it.supportedChainIdsprop inCreateWebhookModalandWebhooksTable.CreateWebhookModalandWebhooksTableto usesupportedChainIds.getSupportedWebhookChainsfunction to fetch supported chains.WebhooksPageto retrieve and handle supported chain IDs.