Add webhook creation UI to dashboard #7174
Merged
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 ↗︎
|
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe changes introduce a comprehensive multi-step webhook creation flow within the dashboard application. New React components, hooks, and utility modules are added for form handling, ABI processing, signature extraction, and payload construction. The modal dialog for creating webhooks now includes validation, ABI integration, review, and endpoint testing. Supporting types and schemas are defined for robust form validation and payload generation. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WebhooksTable
participant CreateWebhookModal
participant BasicInfoStep
participant FilterDetailsStep
participant ReviewStep
participant API
participant ABIService
User->>WebhooksTable: Click "New Webhook"
WebhooksTable->>CreateWebhookModal: Open modal (with clientId)
CreateWebhookModal->>BasicInfoStep: Render step 1 (name, URL, filter type)
User->>BasicInfoStep: Fill form, click "Next"
BasicInfoStep->>CreateWebhookModal: Validate, go to FilterDetailsStep
CreateWebhookModal->>FilterDetailsStep: Render step 2 (filters, ABI, etc.)
User->>FilterDetailsStep: Select chains/addresses, request ABI
FilterDetailsStep->>ABIService: Fetch ABI for contracts
ABIService-->>FilterDetailsStep: Return ABI data/signatures
User->>FilterDetailsStep: Select signature(s), click "Next"
FilterDetailsStep->>CreateWebhookModal: Validate, go to ReviewStep
CreateWebhookModal->>ReviewStep: Render step 3 (review/test)
User->>ReviewStep: Test endpoint (optional)
ReviewStep->>API: Send test webhook request
API-->>ReviewStep: Return test result
User->>ReviewStep: Click "Create"
ReviewStep->>CreateWebhookModal: Submit webhook data
CreateWebhookModal->>API: Create webhook
API-->>CreateWebhookModal: Return success/error
CreateWebhookModal->>WebhooksTable: Close modal, refresh table
🪧 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 (
|
This was referenced May 27, 2025
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 #7174 +/- ##
=======================================
Coverage 55.66% 55.66%
=======================================
Files 904 904
Lines 58400 58400
Branches 4116 4116
=======================================
Hits 32510 32510
Misses 25784 25784
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
AmineAfia
force-pushed
the
Add_webhook_testing_functionality_to_dashboard
branch
from
a4f8fe1 to
8136982
Compare
AmineAfia
force-pushed
the
Add_webhook_creation_UI_to_dashboard
branch
from
8ddca02 to
257d4bf
Compare
AmineAfia
force-pushed
the
Add_webhook_creation_UI_to_dashboard
branch
from
257d4bf to
2221b86
Compare
AmineAfia
force-pushed
the
Add_webhook_creation_UI_to_dashboard
branch
from
2221b86 to
4aab177
Compare
graphite-app
bot
force-pushed
the
Add_webhook_creation_UI_to_dashboard
branch
from
077694c to
5b753d2
Compare
AmineAfia
added a commit
that referenced
this pull request
May 28, 2025
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the `CreateWebhookModal` component and related functionalities for managing webhooks in the dashboard. It introduces new features for creating webhooks, including form validation, ABI fetching, and improved user experience.
### Detailed summary
- Changed `createWebhook` function to be exported.
- Updated `CreateWebhookModal` to accept `clientId` and handle multi-step creation.
- Added form handling with validation using `zod`.
- Implemented steps for basic info, filter details, and review.
- Integrated ABI fetching for events and transactions.
- Enhanced error handling and user feedback with toast notifications.
- Updated `WebhooksTable` to include `clientId` in the modal.
- Improved `RelativeTime` component by removing unused utility function.
- Added utility functions for parsing addresses and building webhook payloads.
- Enhanced form validation for webhook creation with specific constraints.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a multi-step modal form for creating webhooks, including form validation, ABI integration, and live endpoint testing.
- Added components for basic info entry, filter configuration, and review before submission.
- Enabled dynamic ABI fetching and signature extraction for blockchain event and transaction filters.
- Improved error handling and user feedback throughout the webhook creation flow.
- **Bug Fixes**
- Enhanced validation and error messages for webhook URLs and date handling in tables.
- **Chores**
- Added comprehensive utility modules for ABI processing and webhook payload construction.
- Implemented robust type definitions and validation schemas for webhook forms.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
AmineAfia
force-pushed
the
Add_webhook_creation_UI_to_dashboard
branch
from
5b753d2 to
b882612
Compare
AmineAfia
force-pushed
the
Add_webhook_testing_functionality_to_dashboard
branch
from
b1e702d to
9058e67
Compare
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the `CreateWebhookModal` component and related functionalities in the webhook management system, including form handling, validation, and API integration for creating webhooks.
### Detailed summary
- Changed `createWebhook` function to `export async function createWebhook`.
- Updated `CreateWebhookModal` to accept `clientId` prop.
- Integrated form steps for creating a webhook with validation.
- Added utility functions for parsing addresses and building webhook payloads.
- Improved error handling and user feedback during webhook testing.
- Enhanced UI components for better user experience in the webhook creation process.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a multi-step modal form for creating webhooks, including form validation, ABI integration, and live endpoint testing.
- Added components for basic info entry, filter configuration, and review before submission.
- Enabled dynamic ABI fetching and signature extraction for blockchain event and transaction filters.
- Improved error handling and user feedback throughout the webhook creation flow.
- **Bug Fixes**
- Enhanced validation and error messages for webhook URLs and date handling in tables.
- **Chores**
- Added comprehensive utility modules for ABI processing and webhook payload construction.
- Implemented robust type definitions and validation schemas for webhook forms.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
Add_webhook_testing_functionality_to_dashboard
branch
from
9058e67 to
c420099
Compare
graphite-app
bot
force-pushed
the
Add_webhook_creation_UI_to_dashboard
branch
from
b882612 to
c336de3
Compare
Base automatically changed from
Add_webhook_testing_functionality_to_dashboard
to
main
May 28, 2025 22:11
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 focuses on enhancing the webhook functionality within the dashboard by adding a new
createWebhookfunction, improving the user interface for creating webhooks, and refining error handling and validation processes.Detailed summary
createWebhookfrom a local function to an exported function.CreateWebhookModalto acceptclientIdas a prop.WebhooksTable.zodfor webhook form inputs.Summary by CodeRabbit
New Features
Bug Fixes
Chores