Dev Tools UI

[jaybuidl]

PR-Codex overview

This PR focuses on adding new frontend tools and configurations.

Detailed summary

• Added isUndefined utility function
• Defined ArbitratorTypes enum and getArbitratorType function
• Updated .eslintignore file
• Added useIsDesktop hook
• Created landscapeStyle function
• Implemented debounceErrorToast function
• Modified Theme.tsx with new theme colors
• Added ReactMarkdown component
• Included codegen.ts for GraphQL code generation
• Added new SVG file
• Updated .env.local.example with environment variables
• Created dummyData.ts with sample data
• Updated various configuration files
• Added new components and hooks

The following files were skipped due to too many changes: web-devtools/src/layout/Header/index.tsx, web-devtools/src/styles/responsiveSize.ts, web/src/layout/Header/navbar/Menu/Help.tsx, web-devtools/src/app/(main)/(homepage)/page.tsx, web-devtools/scripts/runEnv.sh, web-devtools/src/assets/svgs/socialmedia/telegram.svg, web-devtools/src/components/HeroImage.tsx, web-devtools/src/components/LightButton.tsx, web-devtools/src/assets/svgs/header/hamburger.svg, web-devtools/src/utils/getGraphqlUrl.ts, web-devtools/src/assets/svgs/icons/policy.svg, web-devtools/src/app/layout.tsx, web-devtools/src/assets/svgs/icons/arrow.svg, web-devtools/src/assets/svgs/socialmedia/linkedin.svg, web-devtools/src/context/StyledComponentsRegistry.tsx, web-devtools/src/hooks/queries/useDisputeTemplateFromId.ts, web-devtools/src/layout/Header/DesktopHeader.tsx, web-devtools/src/app/(main)/(homepage)/Header.tsx, web-devtools/next.config.mjs, web-devtools/LICENSE, web-devtools/src/app/(main)/ruler/page.tsx, web-devtools/src/utils/getDisputeRequestParamsFromTxn.ts, web-devtools/src/app/(main)/ruler/ChangeRuler.tsx, web-devtools/src/utils/wagmiConfig.ts, web-devtools/src/consts/socialmedia.tsx, web-devtools/src/utils/wrapWithToast.ts, web-devtools/src/layout/Footer/index.tsx, web-devtools/src/layout/Header/navbar/index.tsx, web-devtools/package.json, web-devtools/src/assets/svgs/socialmedia/ghost-blog.svg, web-devtools/src/layout/Header/navbar/Explore.tsx, web-devtools/src/layout/Header/MobileHeader.tsx, web-devtools/src/assets/svgs/socialmedia/slack.svg, web-devtools/src/assets/svgs/socialmedia/reddit.svg, web-devtools/src/context/GraphqlBatcher.tsx, web-devtools/src/app/(main)/ruler/RulingModes.tsx, web-devtools/src/components/JSONEditor.tsx, web-devtools/src/app/(main)/(homepage)/Tools.tsx, 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/.eslintrc.json, web-devtools/src/assets/svgs/socialmedia/github.svg, web/src/assets/svgs/icons/code.svg, web-devtools/src/assets/svgs/socialmedia/discord.svg, web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx, web-devtools/wagmi.config.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)/dispute-template/page.tsx, web-devtools/src/assets/svgs/hero/hero-darkmode-mobile.svg, 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 new web development toolset with updated dependencies and configurations.
  • Added a comprehensive .editorconfig file for consistent text editor settings.
  • Implemented ESLint rules and settings for improved code quality.
  • Created a .gitignore file to keep the repository clean from unnecessary files.
  • Added a template for environment variables to streamline API connections.
  • Developed new React components, including Header, Tools, Home, ChangeRuler, RulingModes, and responsive headers for desktop and mobile.
  • Implemented utility functions for managing blockchain interactions and error handling, including GraphQL and IPFS URL construction.

• Documentation

  • Updated the README to include introductory information for the new toolset.
  • Added license details for the software.

• Chores

  • Organized project structure by setting up essential configurations and dependencies.
  • Established TypeScript configuration for enhanced type safety.