Skip to content

Fix(web)/wagmi generate #78

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 21, 2025
Merged

Fix(web)/wagmi generate #78

merged 3 commits into from
Apr 21, 2025

Conversation

jaybuidl
Copy link
Member

@jaybuidl jaybuidl commented Apr 18, 2025

PR-Codex overview

This PR updates the arbitration cost handling in the application by replacing the old useArbitrationCost hook with a new useReadKlerosCoreArbitrationCost hook, reflecting changes in the dependency version and improving the way arbitration costs are fetched.

Detailed summary

  • Deleted web/src/hooks/useArbitrationCostFromKlerosCore.ts.
  • Updated @kleros/kleros-v2-contracts version from ^0.9.2 to ^0.9.3 in contracts/package.json and web/package.json.
  • Replaced useArbitrationCost with useReadKlerosCoreArbitrationCost in multiple files:
    • web/src/pages/SubmitItem/Header/index.tsx
    • web/src/pages/SubmitList/AdvancedParameters/ArbitrationParameters.tsx
    • web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
    • web/src/components/ActionButton/Modal/ResubmitModal.tsx
    • web/src/components/ActionButton/Modal/RemoveModal.tsx
    • web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
  • Modified the arguments passed to the new hook to include query options and necessary parameters.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

  • Chores
    • Updated the dependency version of @kleros/kleros-v2-contracts in both the contracts and web packages.
  • Refactor
    • Improved how arbitrator contract deployment data is handled and centralized, reducing reliance on external files and streamlining configuration management.
    • Updated arbitration cost fetching across multiple components to use a new generated contract hook, enhancing data retrieval consistency and query control.
  • Bug Fixes
    • Removed a deprecated custom arbitration cost hook to prevent outdated data fetching methods.

@jaybuidl jaybuidl marked this pull request as ready for review April 18, 2025 14:07
Copy link
Contributor

coderabbitai bot commented Apr 18, 2025

Walkthrough

This update modifies dependency versions for the @kleros/kleros-v2-contracts package in both the contracts and web projects, upgrading them to version ^0.9.3. Additionally, in the web project, the process for accessing arbitrator contract deployments has been refactored: instead of reading contract data from external JSON files, the code now imports and passes deployment data directly via a new, strictly-typed parameter. The readArtifacts function and its usage have been updated accordingly, and a helper function was introduced to standardize adding contract configurations. Furthermore, a custom hook for fetching arbitration cost was removed and replaced across multiple components by a generated contract hook with enhanced query control.

Changes

File(s) Change Summary
contracts/package.json Updated @kleros/kleros-v2-contracts dependency from ^0.9.2 to ^0.9.3.
web/package.json Updated @kleros/kleros-v2-contracts devDependency from ^0.3.2 to ^0.9.3.
web/wagmi.config.ts Refactored readArtifacts to require explicit arbitrator contract deployments; added strict typing; removed file system reads; introduced addArbitratorContract helper; updated getConfig to use new import pattern.
web/src/hooks/useArbitrationCostFromKlerosCore.ts Removed custom hook useArbitrationCost that queried arbitration cost from Kleros Core contract.
web/src/components/ActionButton/Modal/ChallengeItemModal.tsx,
web/src/components/ActionButton/Modal/RemoveModal.tsx,
web/src/components/ActionButton/Modal/ResubmitModal.tsx,
web/src/pages/SubmitItem/Header/index.tsx,
web/src/pages/SubmitList/AdvancedParameters/ArbitrationParameters.tsx,
web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
Replaced usage of custom useArbitrationCost hook with generated useReadKlerosCoreArbitrationCost hook; updated imports and hook call signatures to use query enabling and argument arrays; no other logic changes.

Sequence Diagram(s)

sequenceDiagram
    participant ConfigLoader as getConfig
    participant ArbitratorImports as @kleros/kleros-v2-contracts/cjs/deployments
    participant ArtifactReader as readArtifacts
    participant Result as ContractConfigArray

    ConfigLoader->>ArbitratorImports: Import arbitratorContracts for environment
    ConfigLoader->>ArtifactReader: Call readArtifacts(viemChainName, hardhatChainName, arbitratorContracts)
    ArtifactReader->>Result: Add contract configs using addArbitratorContract
    ArtifactReader-->>ConfigLoader: Return contract configs
Loading

Suggested reviewers

  • jaybuidl

Poem

In the warren of code, dependencies hopped,
To version nine-three, the carrots were swapped.
No more digging for files in the night,
Now contracts are passed, all tidy and right.
With helpers and types, our garden’s in bloom—
Hooray for the upgrade, more features to groom!
🥕✨


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between 4b617ab and 480af52.

📒 Files selected for processing (7)
  • web/src/components/ActionButton/Modal/ChallengeItemModal.tsx (2 hunks)
  • web/src/components/ActionButton/Modal/RemoveModal.tsx (3 hunks)
  • web/src/components/ActionButton/Modal/ResubmitModal.tsx (3 hunks)
  • web/src/hooks/useArbitrationCostFromKlerosCore.ts (0 hunks)
  • web/src/pages/SubmitItem/Header/index.tsx (2 hunks)
  • web/src/pages/SubmitList/AdvancedParameters/ArbitrationParameters.tsx (2 hunks)
  • web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx (2 hunks)
💤 Files with no reviewable changes (1)
  • web/src/hooks/useArbitrationCostFromKlerosCore.ts
🧰 Additional context used
🧬 Code Graph Analysis (6)
web/src/pages/SubmitList/AdvancedParameters/ArbitrationParameters.tsx (1)
web/src/utils/prepareArbitratorExtradata.ts (1)
  • prepareArbitratorExtradata (7-12)
web/src/components/ActionButton/Modal/ChallengeItemModal.tsx (1)
web/src/utils/index.ts (1)
  • isUndefined (3-3)
web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx (1)
web/src/utils/index.ts (1)
  • isUndefined (3-3)
web/src/components/ActionButton/Modal/RemoveModal.tsx (1)
web/src/utils/index.ts (1)
  • isUndefined (3-3)
web/src/components/ActionButton/Modal/ResubmitModal.tsx (1)
web/src/utils/index.ts (1)
  • isUndefined (3-3)
web/src/pages/SubmitItem/Header/index.tsx (1)
web/src/utils/index.ts (1)
  • isUndefined (3-3)
⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: Redirect rules - curate-v2
  • GitHub Check: Header rules - curate-v2
  • GitHub Check: Pages changed - curate-v2
🔇 Additional comments (12)
web/src/pages/SubmitList/AdvancedParameters/ArbitrationParameters.tsx (2)

12-16: LGTM: Updated import for contract hooks.

The import change correctly shifts from a custom hook to using the generated contract hook from a centralized location.


83-85: LGTM: Properly migrated to generated contract hook.

The migration from custom useArbitrationCost to the generated useReadKlerosCoreArbitrationCost follows the correct pattern of:

  1. Using the object parameter style with args array
  2. Properly destructuring data as arbitrationCost to maintain compatibility with the rest of the component

This standardization will improve maintainability and type safety across the codebase.

web/src/components/ActionButton/Modal/ResubmitModal.tsx (2)

9-20: LGTM: Updated imports for better type safety.

The import changes correctly replace the custom hook with the generated contract hook and add the necessary isUndefined utility.


57-62: LGTM: Improved contract hook implementation with query controls.

The migration to useReadKlerosCoreArbitrationCost implements best practices:

  1. Conditionally enables the query based on data availability
  2. Uses proper type assertions with appropriate safety checks
  3. Maintains the same loading state variable name for compatibility

This approach reduces unnecessary network requests and improves type safety.

web/src/components/ActionButton/Modal/RemoveModal.tsx (2)

20-21: LGTM: Updated import for contract hooks.

The import change correctly shifts from a custom hook to the generated contract hook.


51-56: LGTM: Properly implemented conditional query with generated hook.

The implementation follows best practices for React Query based hooks:

  1. Conditionally enables the query only when required data is available
  2. Uses non-null assertion only after a runtime check ensures the value exists
  3. Maintains the same variable names to minimize changes to the rest of the component

This approach improves performance by avoiding unnecessary network requests.

web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx (2)

28-33: LGTM: Consolidated contract hook imports.

The import changes correctly:

  1. Move multiple contract-related hooks to the generated hooks location
  2. Import the necessary ABI for contract interactions
  3. Maintain proper organization of imports

This consolidation improves code organization and maintainability.


69-74: LGTM: Properly implemented conditional query.

The migration to useReadKlerosCoreArbitrationCost follows the same consistent pattern as other files:

  1. Conditionally enables the query when arbitratorExtraData is defined
  2. Uses appropriate parameter structure with args array
  3. Maintains the same variable names for compatibility with the rest of the component

This consistent approach across files demonstrates good refactoring practices.

web/src/pages/SubmitItem/Header/index.tsx (2)

12-15: Improvement: Using generated contract hook instead of custom hook

The change replaces a custom hook with a generated contract hook from wagmi, which is a good practice for standardizing contract interactions and improving type safety.


101-106: LGTM! Enhanced query control pattern

The new implementation adds proper query enabling when the dependency is available and explicitly passes the arguments, which is more robust than the previous approach.

web/src/components/ActionButton/Modal/ChallengeItemModal.tsx (2)

20-20: LGTM! Consistent hook replacement

Replacing the custom hook with the generated contract hook maintains consistency with other components in the codebase.


69-74: LGTM! Improved contract interaction pattern

The implementation properly:

  1. Conditionally enables the query only when arbitratorExtraData is defined
  2. Uses the non-null assertion safely since the query won't run when the value is undefined
  3. Destructures both data and loading state which improves the component's loading handling

This aligns with modern wagmi patterns and enhances type safety.


🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

netlify bot commented Apr 18, 2025

Deploy Preview for curate-v2 ready!

Name Link
🔨 Latest commit 480af52
🔍 Latest deploy log https://app.netlify.com/sites/curate-v2/deploys/68063e9e2b8deb000848a231
😎 Deploy Preview https://deploy-preview-78--curate-v2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
web/wagmi.config.ts (1)

15-36: Good type definition for arbitrator contracts.

Adding a strict type definition for ArbitratorContracts improves type safety and code clarity. The structure clearly defines the expected contract interfaces.

Consider using more specific types for the ABI arrays instead of any[] for improved type safety:

-        abi: any[];
+        abi: readonly unknown[];
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6461ba6 and 4b617ab.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (3)
  • contracts/package.json (1 hunks)
  • web/package.json (1 hunks)
  • web/wagmi.config.ts (2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: Redirect rules - curate-v2
  • GitHub Check: Header rules - curate-v2
  • GitHub Check: Pages changed - curate-v2
🔇 Additional comments (8)
contracts/package.json (1)

89-89: Version update aligns with web package.json changes.

The dependency version update for @kleros/kleros-v2-contracts from ^0.9.2 to ^0.9.3 aligns with the same package update in the web project. This version bump supports the refactoring in web/wagmi.config.ts.

web/package.json (1)

50-50: Significant version bump of kleros-v2-contracts package.

The @kleros/kleros-v2-contracts package has been updated from ^0.3.2 to ^0.9.3, which is a larger version jump compared to the contracts package. This update is necessary to support the new direct import of arbitrator deployment data in wagmi.config.ts.

web/wagmi.config.ts (6)

7-11: Improved arbitrator contract import approach.

Instead of reading JSON files from the filesystem, the code now directly imports deployment data from the package. This is a more maintainable approach and reduces filesystem dependencies.


38-56: Good helper function for DRY code.

Creating the addArbitratorContract helper function improves code organization and follows the DRY principle by extracting common logic for adding contract configurations.


58-62: Function signature update with improved typing.

The function signature has been updated to make the hardhatChainName parameter mandatory and to accept the new arbitratorContracts parameter with proper typing.


89-100: Clean implementation using the new contract structure.

The code elegantly extracts the necessary contract data and efficiently adds each contract to the results array using the helper function. This implementation is cleaner than the previous approach of reading JSON files.


108-124: Proper environment-based contract selection.

The implementation correctly selects the appropriate arbitrator contracts based on the deployment environment, maintaining the same behavior as before but with the new direct import approach.


129-129: Updated function call with new parameter.

The call to readArtifacts has been updated to pass the arbitrator contracts, completing the refactoring.

coderabbitai[bot]
coderabbitai bot previously approved these changes Apr 18, 2025
@jaybuidl jaybuidl merged commit 8d0b613 into master Apr 21, 2025
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants