Dev Tools UI

[jaybuidl]

PR-Codex overview

This PR focuses on enhancing the web-devtools functionality by adding new components, improving existing code, and updating dependencies. It includes new features for handling user interactions and styles, along with better integration with external services.

Detailed summary

• Added isUndefined utility function.
• Introduced useIsDesktop hook for responsive design.
• Created ConnectWallet component for wallet connection.
• Implemented various SVG icons for social media.
• Updated package.json dependencies, including eslint and prettier.
• Enhanced Ruler component for dispute management.
• Added debounceErrorToast for improved error handling.
• Created getGraphqlUrl utility for fetching GraphQL endpoints.
• Improved StyledComponentsProvider for better theme management.
• Introduced LightButton component for UI consistency.

The following files were skipped due to too many changes: web-devtools/src/assets/svgs/socialmedia/reddit.svg, contracts/README.md, web-devtools/src/context/GraphqlBatcher.tsx, web-devtools/src/components/JSONEditor.tsx, web-devtools/package.json, contracts/src/arbitration/devtools/KlerosCoreRuler.sol, web-devtools/src/app/(main)/(homepage)/Tools.tsx, kleros-sdk/src/dataMappings/executeActions.ts, web-devtools/src/app/(main)/dispute-template/FetchFromIdInput.tsx, web-devtools/src/assets/svgs/socialmedia/etherscan.svg, web-devtools/src/styles/global-style.ts, web-devtools/src/context/Web3Provider.tsx, web-devtools/src/components/LabeledInput.tsx, web-devtools/src/context/RulerContext.tsx, web-devtools/src/app/(main)/ruler/ChangeDeveloper.tsx, web-devtools/src/assets/svgs/socialmedia/github.svg, web/src/assets/svgs/icons/code.svg, web-devtools/src/assets/svgs/socialmedia/discord.svg, contracts/test/evidence/index.ts, web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx, web-devtools/eslint.config.mjs, web-devtools/wagmi.config.ts, web-devtools/src/app/(main)/ruler/SelectArbitrable.tsx, web-devtools/src/app/(main)/ruler/ManualRuling.tsx, contracts/test/arbitration/ruler.ts, web-devtools/src/assets/svgs/header/devtools-logo.svg, web-devtools/src/assets/svgs/footer/secured-by-kleros.svg, web-devtools/src/app/(main)/ruler/RulingModes.tsx, web-devtools/src/app/(main)/dispute-template/page.tsx, contracts/deployments/arbitrumSepoliaDevnet/KlerosCoreRuler_Proxy.json, contracts/deployments/arbitrumSepoliaDevnet/KlerosCoreRuler.json, contracts/deployments/arbitrumSepoliaDevnet/DisputeResolverRuler.json, web-devtools/src/assets/svgs/hero/hero-darkmode-mobile.svg, contracts/deployments/arbitrumSepoliaDevnet/KlerosCoreRuler_Implementation.json, yarn.lock, web-devtools/src/assets/svgs/hero/hero-darkmode-desktop.svg

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

Summary by CodeRabbit

• New Features

  • Introduced a customizable LabeledInput component for input fields and checkboxes.
  • Added a new ReactMarkdown component for rendering Markdown content.
  • Implemented a GraphqlBatcherProvider for efficient batching of GraphQL requests.
  • Introduced a Web3Provider component for streamlined Web3 interactions.
  • Added a custom hook useDisputeTemplateFromId for fetching dispute templates by ID.
  • Implemented a utility function for dynamic GraphQL URL retrieval.
  • Added a new enumeration for arbitrator types to streamline development.
  • New ESLint configuration file for enhanced linting environment.
  • Introduced a FetchDisputeRequestInput component for fetching dispute request parameters.
  • Added a ManualRuling component for facilitating manual rulings in blockchain arbitration.
  • Implemented a RulingModes component for managing various ruling modes.
  • Added a SelectArbitrable component for selecting arbitrable addresses.
  • Introduced a ConnectWallet component for managing wallet connections and chain switching.
  • Enhanced error handling in the IPFS fetching process.
  • Added a new .gitignore file for the web-devtools directory.
  • Introduced a TypeScript configuration file for GraphQL code generation.

• Bug Fixes

  • Improved error handling and response validation in the IPFS fetching process.

• Chores

  • Updated spell check configuration to recognize the term "Arbitrables."
  • Added TypeScript types and interfaces for improved code clarity and maintainability.
  • Updated dependency versions for ESLint and related packages across multiple configurations.

[netlify[bot]]

❌ Deploy Preview for kleros-v2-university failed. Why did it fail? →

Name	Link
🔨 Latest commit	a534252573e4f56a959cc445bdbb2281f680b037
🔍 Latest deploy log	https://app.netlify.com/sites/kleros-v2-university/deploys/670d2e45e5cdbf0008e7d8a5

[netlify[bot]]

✅ Deploy Preview for kleros-v2-testnet ready!

Name	Link
🔨 Latest commit	a534252573e4f56a959cc445bdbb2281f680b037
🔍 Latest deploy log	https://app.netlify.com/sites/kleros-v2-testnet/deploys/670d2e447823d30008c620c9
😎 Deploy Preview	https://deploy-preview-1582--kleros-v2-testnet.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[netlify[bot]]

❌ Deploy Preview for kleros-v2-neo failed. Why did it fail? →

Name	Link
🔨 Latest commit	a534252573e4f56a959cc445bdbb2281f680b037
🔍 Latest deploy log	https://app.netlify.com/sites/kleros-v2-neo/deploys/670d2e44ea72ca00080f9830

[coderabbitai[bot]]

[!CAUTION]

Review failed

The pull request is closed.

Walkthrough

The recent updates introduce several enhancements across various files in the web-devtools project. A new word "Arbitrables" has been added to the spell-checking configuration in cspell.json. The package.json files for ESLint and Prettier configurations have been updated with new dependency versions. Several functions in the Kleros SDK have improved type safety and error handling, while new components and hooks have been created to facilitate Web3 interactions and GraphQL queries. Additionally, a .gitignore file and new configuration files for Next.js and GraphQL code generation have been introduced.

Changes

Files/Path	Change Summary
cspell.json	Added the word "Arbitrables" to the "words" array for spell checking.
eslint-config/package.json	Updated various ESLint-related dependencies to newer versions, enhancing linting capabilities.
kleros-sdk/src/dataMappings/actions/callAction.ts	Specified the functionName parameter in the publicClient.readContract method call.
kleros-sdk/src/dataMappings/actions/eventAction.ts	Introduced AbiEvent import and updated parsedAbi casting. Enhanced block number processing for filters.
kleros-sdk/src/dataMappings/actions/fetchIpfsJsonAction.ts	Enhanced error handling in fetchIpfsJsonAction. Added checks for ipfsUri format and response validity. Updated content length check logic.
kleros-sdk/src/dataMappings/actions/executeActions.ts	Added type definitions and improved type safety for executeAction and executeActions functions.
kleros-sdk/src/dataMappings/actions/retrieveRealityData.ts	Enhanced error handling and introduced a new interface RealityAnswer for structured answers.
kleros-sdk/src/dataMappings/utils/actionTypes.ts	Updated AbiCallMapping and AbiEventMapping types to use Address instead of string.
kleros-sdk/src/dataMappings/utils/createResultObject.ts	Added TypeScript type annotations to createResultObject parameters and return type.
kleros-sdk/src/dataMappings/utils/disputeDetailsSchema.ts	Exported utility functions isHexAddress, isHexId, and isMultiaddr for external use.
kleros-sdk/src/dataMappings/utils/replacePlaceholdersWithValues.ts	Updated function signatures for type safety in replacePlaceholdersWithValues.
kleros-sdk/src/sdk.ts	Enhanced type safety with type annotations for publicClient and getPublicClient return type.
prettier-config/package.json	Updated the eslint dependency version.
web-devtools/.gitignore	Introduced a new .gitignore file specifying patterns for files and directories to be ignored by Git.
web-devtools/codegen.ts	Added a new TypeScript configuration file for GraphQL code generation, defining schema and output settings.
web-devtools/next.config.mjs	Introduced a new configuration object for customizing Next.js behavior, including SVG handling and TypeScript settings.
web-devtools/package.json	Created a new package.json file for the @kleros/kleros-v2-web-devtools project, specifying metadata and dependencies.
web-devtools/src/context/Web3Provider.tsx	Introduced a new Web3Provider component for managing Web3 interactions, including configuration for chains and transports.
web-devtools/src/hooks/queries/useDisputeTemplateFromId.ts	Added a new custom hook useDisputeTemplateFromId for fetching dispute templates based on ID.
web-devtools/src/utils/getDisputeRequestParamsFromTxn.ts	Introduced a new asynchronous function for retrieving dispute request parameters from a transaction.

Possibly related PRs

• #1671: The changes in this PR involve updates to the homepage statistics and enhancements to the GraphQL queries, which may relate to the overall user interface improvements and data presentation, similar to the addition of the word "Arbitrables" in the spell check configuration.
• #1706: This PR updates various dependencies, including those related to the web application, which could indirectly relate to the main PR's changes in configuration files, although the connection is more about maintaining compatibility rather than direct code changes.

Suggested reviewers

• alcercu
• Harman-singh-waraich

Poem

In the web devtools, a new word takes flight,
"Arbitrables" added, oh what a delight!
With components and hooks, our code starts to sing,
Enhancing the user, oh what joy they will bring!
From IPFS fetches to Markdown so fine,
In the world of Kleros, our efforts align! 🐇✨

---

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , 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](https://docs.coderabbit.ai/guides/configure-coderabbit) 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](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

[sonarcloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[jaybuidl]

@coderabbitai generate interesting stats about this repository and render them as a table.

[coderabbitai[bot]]

[!TIP] For best results, initiate chat on the files or code changes.

@jaybuidl, here are the updated and complete statistics about the repository:

Statistic	Value
Total number of commits	2
Number of authors	1
Total number of lines of code	168,590
Total number of TODO comments	78

If you need any further details or additional statistics, feel free to ask!

Analysis chain

--- @jaybuidl, here are some interesting stats about the repository: | Statistic | Value | |----------------------------------|-------| | Total number of commits | 2 | | Number of authors | 1 | | Total number of TODO comments | 78 | It seems there was an issue parsing the total number of lines of code using `tokei`. I will correct the command and re-run it to get the accurate count.

Scripts executed

The following scripts were executed for the analysis: --- Script: ```shell #!/bin/bash # Count the total number of commits. git log --oneline | wc -l # Count the number of authors in the codebase. git shortlog -sn --all | wc -l # Count the total number of lines of code in the codebase. tokei | jq '.total.code' # Find all occurrences of the `TODO` keyword and count them. rg 'TODO' | wc -l ``` Length of output: 167 --- --- Script: ```shell #!/bin/bash # Count the total number of lines of code in the codebase using tokei without jq. tokei ``` Length of output: 2224

[netlify[bot]]

✅ Deploy Preview for kleros-v2-testnet-devtools ready!

Name	Link
🔨 Latest commit	a534252573e4f56a959cc445bdbb2281f680b037
🔍 Latest deploy log	https://app.netlify.com/sites/kleros-v2-testnet-devtools/deploys/670d2e4481413400070df8f1
😎 Deploy Preview	https://deploy-preview-1582--kleros-v2-testnet-devtools.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[sonarcloud[bot]]

Quality Gate failed

Failed conditions
1 Security Hotspot
27.7% Duplication on New Code (required ≤ 10%)

See analysis details on SonarCloud

[codeclimate[bot]]

Code Climate has analyzed commit a5342525 and detected 159 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	4
Duplication	74
Style	81

View more on Code Climate.

[sonarcloud[bot]]

Quality Gate passed

Issues
9 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
8.3% Duplication on New Code

See analysis details on SonarCloud