Add SignatureSelector component for custom signature input in webhooks #7370
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 ↗︎
5 Skipped Deployments
|
Contributor
## Walkthrough
A new `SignatureSelector` React component is introduced for selecting or entering function signatures, replacing the previous `SignatureDropdown` in the webhook filter UI. The `MultiSelect` component is enhanced to accept a custom search input. ABI handling and signature normalization logic are updated in both UI and payload-building utilities.
## Changes
| File(s) | Change Summary |
|---------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| apps/dashboard/src/@/components/blocks/SignatureSelector.tsx | Added new `SignatureSelector` component for single-select dropdown with search and custom input for function signatures. Introduced `SignatureOption` interface and related props. |
| apps/dashboard/src/@/components/blocks/multi-select.tsx | Added optional `customSearchInput` prop to `MultiSelect` component, allowing consumers to override the default search input UI. |
| apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx | Replaced `SignatureDropdown` with `SignatureSelector`. Updated ABI input handling, field names, and reset logic. Removed unused code and improved signature/ABI UI logic. |
| apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/webhookPayloadUtils.ts | Updated signature normalization in payload builders: hash or convert signatures if not in hex, and fallback on ABI fields. Added imports for `keccak256` and `toFunctionSelector`. |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant FilterDetailsStep
participant SignatureSelector
participant MultiSelect
participant WebhookPayloadUtils
User->>FilterDetailsStep: Selects or enters a signature
FilterDetailsStep->>SignatureSelector: Passes options, value, handlers
SignatureSelector->>MultiSelect: Renders dropdown with custom search input
User->>SignatureSelector: Enters custom signature
SignatureSelector->>FilterDetailsStep: Triggers onChange, optionally setAbi
FilterDetailsStep->>WebhookPayloadUtils: Submits form with signature and ABI
WebhookPayloadUtils->>WebhookPayloadUtils: Normalizes signature (hash or selector)Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes detected. Possibly related PRs
Suggested reviewers
|
Contributor
Author
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 #7370 +/- ##
=======================================
Coverage 52.36% 52.36%
=======================================
Files 939 939
Lines 63160 63160
Branches 4216 4216
=======================================
Hits 33073 33073
Misses 29980 29980
Partials 107 107
🚀 New features to boost your workflow:
|
AmineAfia
force-pushed
the
Add_SignatureSelector_component_for_custom_signature_input_in_webhooks
branch
from
cc41fc0 to
3aa58e7
Compare
Contributor
size-limit report 📦
|
MananTank
approved these changes
Jun 18, 2025
Contributor
Merge activity
|
#7370) # [INFRA-1454][Dashboard] Feature: Add SignatureSelector component for improved signature selection ## Notes for the reviewer This PR introduces a new `SignatureSelector` component that enhances the signature selection experience in the webhooks UI. The component allows users to either select from predefined signatures or enter custom ones, with appropriate UI feedback. Key improvements: - Users can now enter custom signatures directly in the input field - Warning message appears when a custom signature is entered - Automatic ABI detection for known signatures - Better handling of signature formats (automatically converts text signatures to hash format) ## How to test 1. Navigate to the webhooks creation flow 2. Test selecting predefined event/function signatures 3. Test entering custom signatures and verify the warning appears 4. Verify that ABIs are properly loaded for known signatures 5. Test the reset functionality The component is fully integrated with the existing form validation system. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new signature selector with search and custom input support for selecting or entering function signatures. - Enhanced dropdown components to allow custom search input elements. - **Refactor** - Replaced the previous signature dropdown with the new selector for improved usability and consistency. - Improved ABI input handling, including automatic detection and reset options. - **Bug Fixes** - Improved normalization of signature hash values and ABI fallback logic for webhook payloads. - Enhanced address parsing for ABI reset functionality. <!-- end of auto-generated comment: release notes by coderabbit.ai --> <!-- start pr-codex --> --- ## PR-Codex overview This PR introduces enhancements to the `webhookPayloadUtils`, `MultiSelect`, and `SignatureSelector` components, improving signature handling and custom input functionality. It also updates the `FilterDetailsStep` to utilize the new `SignatureSelector` and remove the deprecated `SignatureDropdown`. ### Detailed summary - Updated `buildEventWebhookPayload` and `buildTransactionWebhookPayload` functions to handle `sigHash` and `abi` more robustly. - Added `customSearchInput` prop to `MultiSelect` for enhanced search functionality. - Implemented `SignatureSelector` component for better signature selection with custom input support. - Replaced `SignatureDropdown` with `SignatureSelector` in `FilterDetailsStep`. - Improved handling of custom signatures and ABI management in `FilterDetailsStep`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
graphite-app
bot
force-pushed
the
Add_SignatureSelector_component_for_custom_signature_input_in_webhooks
branch
from
3aa58e7 to
167f921
Compare
graphite-app
bot
deleted the
Add_SignatureSelector_component_for_custom_signature_input_in_webhooks
branch
Merged
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.
[INFRA-1454][Dashboard] Feature: Add SignatureSelector component for improved signature selection
Notes for the reviewer
This PR introduces a new
SignatureSelectorcomponent that enhances the signature selection experience in the webhooks UI. The component allows users to either select from predefined signatures or enter custom ones, with appropriate UI feedback.Key improvements:
How to test
The component is fully integrated with the existing form validation system.
Summary by CodeRabbit
New Features
Refactor
Bug Fixes
PR-Codex overview
This PR focuses on enhancing the webhook utilities and UI components for better handling of signatures and ABIs in a dashboard application. It introduces new components and improves existing ones for better user experience and functionality.
Detailed summary
buildEventWebhookPayloadandbuildTransactionWebhookPayloadto handlesigHashandabimore robustly.customSearchInputprop toMultiSelectcomponent for custom input rendering.SignatureSelectorcomponent for selecting signatures with improved state management.SignatureDropdownwithSignatureSelectorinFilterDetailsStepfor better signature handling.