feat(web): validation of the token address for ERC20/721/1155 types #2052
Conversation
WalkthroughThe changes introduce robust validation for Ethereum token contract addresses in the context of "gated" dispute kits within a web application. This includes new hooks for ERC-20, ERC-721, and ERC-1155 address validation, UI feedback for validation status, state synchronization for validation results, and integration of validation into navigation logic. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CourtPage
participant ValidationHook
participant EthereumClient
User->>CourtPage: Enter token address / toggle ERC-1155
CourtPage->>ValidationHook: Call validation hook with address & type
ValidationHook->>EthereumClient: Query balanceOf/address check
EthereumClient-->>ValidationHook: Return result (valid/invalid/error)
ValidationHook-->>CourtPage: Provide validation status
CourtPage-->>User: Display UI feedback (spinner, check, cross, message)
CourtPage->>Context: Update isTokenGateValid state
CourtPage-->>NextButton: Pass validation state
NextButton-->>User: Enable/disable navigation
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (14)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
jaybuidl
requested review from
tractorss and
kemuru
and removed request for
a team
jaybuidl
force-pushed
the
feat/gated-dk-address-validation
branch
from
8a3862f to
f1fe7c9
Compare
❌ Deploy Preview for kleros-v2-university failed. Why did it fail? →
|
✅ Deploy Preview for kleros-v2-testnet ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for kleros-v2-neo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for kleros-v2-testnet-devtools ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![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 (3)
web/src/pages/Resolver/NavigationButtons/NextButton.tsx (1)
24-25: Consider using optional chaining for cleaner code.- const gatedData = disputeData.disputeKitData as IGatedDisputeData; - if (!gatedData?.tokenGate?.trim()) return true; // No token address provided, so valid + const gatedData = disputeData.disputeKitData as IGatedDisputeData; + if (!gatedData.tokenGate?.trim()) return true; // No token address provided, so validweb/src/hooks/useTokenAddressValidation.ts (2)
169-171: Consider preserving error details for debugging.The catch block discards the original error which might contain useful information for debugging contract-specific issues.
- } catch { - throw new Error(`Address does not implement ${tokenType} interface`); + } catch (error) { + console.debug(`Token validation failed for ${debouncedAddress}:`, error); + throw new Error(`Address does not implement ${tokenType} interface`); }
202-210: Error message handling could be more robust.The error message parsing relies on string matching which might be fragile if error messages change.
Consider using error codes or more structured error handling if the contract interaction library supports it.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
web/src/context/NewDisputeContext.tsx(1 hunks)web/src/hooks/useTokenAddressValidation.ts(1 hunks)web/src/pages/Resolver/NavigationButtons/NextButton.tsx(3 hunks)web/src/pages/Resolver/Parameters/Court.tsx(6 hunks)
⏰ 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). (14)
- GitHub Check: Redirect rules - kleros-v2-neo
- GitHub Check: Header rules - kleros-v2-neo
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-neo
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-university
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-university
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-university
- GitHub Check: Analyze (javascript)
- GitHub Check: contracts-testing
🔇 Additional comments (7)
web/src/context/NewDisputeContext.tsx (1)
64-64: LGTM! Well-designed validation state property.The tri-state boolean (
null= not validated,false= invalid,true= valid) is an appropriate design choice for tracking asynchronous validation status.web/src/pages/Resolver/NavigationButtons/NextButton.tsx (1)
20-29: LGTM! Validation logic is well-structured.The memoized validation check correctly handles all cases: non-gated kits, empty token addresses, and validated addresses.
web/src/pages/Resolver/Parameters/Court.tsx (3)
1-1: Import statement updated correctly.Added
useEffectimport which is used for validation state synchronization.
90-168: Excellent UI feedback components for validation.The styled components provide clear visual feedback with loading spinner, success checkmark, and error cross. The color scheme follows standard UX patterns (green for success, red for error).
327-336: Well-implemented validation feedback UI.The conditional rendering of validation status with appropriate messages for each state (validating, error, success) provides excellent user experience.
web/src/hooks/useTokenAddressValidation.ts (2)
122-129: Good implementation of debouncing.The 500ms debounce delay is appropriate for reducing unnecessary network calls while maintaining responsive UX.
150-152: Appropriate caching and retry configuration.The 5-minute cache time and single retry with 1-second delay provide a good balance between performance and user experience.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
|
PR-Codex overview
This PR focuses on enhancing token gate validation in the
NewDisputeContextand related components. It introduces new hooks for validating ERC20, ERC721, and ERC1155 token addresses, and updates theCourtcomponent to handle validation states.Detailed summary
isTokenGateValidproperty toNewDisputeContext.NextButtonto check token gate validity.useERC20ERC721ValidationanduseERC1155Validation.Courtcomponent to validate token addresses and manage validation states.Summary by CodeRabbit
New Features
Bug Fixes