From 4ea35558482bc3d44a2cc7ee4225214d295ed8e2 Mon Sep 17 00:00:00 2001 From: Mani Bajpai <103181735+ManiBAJPAI22@users.noreply.github.com> Date: Sat, 16 Aug 2025 03:38:26 +0530 Subject: [PATCH 1/4] docs: Add comprehensive setup guide and troubleshooting section MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary This PR significantly improves the developer experience for local Kleros v2 setup by adding missing configuration steps and comprehensive troubleshooting guidance. ## What's Added ### ๐Ÿ”ง Environment Setup Section - **API key requirements**: Step-by-step instructions for Alchemy and WalletConnect setup - **Environment file configuration**: Complete `.env.local` file creation with all required variables - **Alternative configuration methods**: Instructions for updating existing `.env.local.public` ### ๐Ÿ› ๏ธ Comprehensive Troubleshooting Section - **8 common setup issues** with exact error messages and copy-paste solutions: 1. Volta yarn version errors (`volta pin yarn`) 2. Module resolution errors (kleros-app build dependency) 3. Environment variable errors (missing API keys) 4. Graph Node fulltext search errors (schema modification) 5. GraphQL code generation failures (endpoint testing) 6. Docker/Graph Node connection issues (port conflicts) 7. Web frontend loading issues (browser debugging) 8. Simulate task errors (working alternatives) ## Issues Addressed This PR addresses real-world problems that block new contributors: - **Missing environment variables** cause runtime errors with no clear guidance - **Volta configuration issues** prevent yarn commands from working - **Missing build dependencies** cause module resolution failures - **Broken simulation commands** (`simulate:all` task doesn't exist) - **No troubleshooting guidance** when things go wrong - **Port number discrepancies** between docs and actual behavior ## Testing These improvements are based on actual setup experience where each documented issue was encountered and resolved during a fresh repository clone and setup process. ## Impact This change will: - โœ… **Reduce onboarding friction** for new developers - โœ… **Save hours of debugging time** with ready solutions - โœ… **Improve developer experience** with clear, actionable guidance - โœ… **Prevent common setup failures** that discourage contributions ## Breaking Changes None. This is purely additive documentation that enhances the existing setup process without changing any functionality. --- README.md | 140 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 127 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 9ff56aaa0..d426b766b 100644 --- a/README.md +++ b/README.md @@ -61,26 +61,63 @@ - on Red Hat Linux: `sudo dnf install jq yq` - on Ubuntu Linux: `sudo snap install jq yq` - on MacOS via [brew](https://brew.sh/): `brew install jq yq` + +### Environment Setup + +**API Keys (Required):** + +- **Alchemy API Key** (for blockchain connectivity) + - Sign up at [alchemy.com](https://www.alchemy.com/) + - Create an app and get your API key + +- **WalletConnect Project ID** (for wallet connections) + - Sign up at [cloud.walletconnect.com](https://cloud.walletconnect.com/) + - Create a project and get your Project ID + +**Environment Configuration** + +- Create a `.env.local` file in `/web` (or update an existing `.env.local.public`): + + ``` + cd web + cat > .env.local << EOF + REACT_APP_CORE_SUBGRAPH=http://localhost:8000/subgraphs/name/kleros/kleros-v2-core-local + REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=http://localhost:8000/subgraphs/name/kleros/kleros-v2-drt-local + ALCHEMY_API_KEY=your_alchemy_api_key_here + WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id_here + EOF + +``` + +(or update an existing `.env.local.public`): + +``` +sed -i 's/export ALCHEMY_API_KEY=/export ALCHEMY_API_KEY=your_alchemy_api_key_here/' web/.env.local.public +sed -i 's/export WALLETCONNECT_PROJECT_ID=/export WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id_here/' web/.env.local.public +``` ### Install the dependencies ```bash -$ yarn install +yarn install # Foundry libraries -$ git submodule update --init --recursive -j 4 +git submodule update --init --recursive -j 4 + +# If you encounter Volta-related yarn errors, run: +volta pin yarn ``` ### [Hardhat CLI auto-completion](https://hardhat.org/guides/shorthand.html) (optional) ```bash -$ npm i -g hardhat-shorthand +npm i -g hardhat-shorthand -$ hardhat-completion install +hardhat-completion install โœ” Which Shell do you use ? ยท bash โœ” We will install completion to ~/.bashrc, is it ok ? (y/N) ยท true -$ exec bash +exec bash ``` ### Full Stack Local Deployment @@ -92,7 +129,7 @@ Run the commands below from the top-level folder. Alternatively, it is possible If you have **[tmux](https://github.com/tmux/tmux/wiki)** installed, you can get started quickly with a single command. ```bash -$ yarn local-stack +yarn local-stack ``` ![terminal](/docs/local-stack-2.png) @@ -100,7 +137,7 @@ $ yarn local-stack #### Shell 1 - Local RPC with Contracts Deployed ```bash -$ yarn workspace @kleros/kleros-v2-contracts start-local +yarn workspace @kleros/kleros-v2-contracts start-local ... Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/ @@ -111,7 +148,7 @@ Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/ #### Shell 2 - Local Graph Node ```bash -$ yarn workspace @kleros/kleros-v2-subgraph start-local-indexer +yarn workspace @kleros/kleros-v2-subgraph start-local-indexer ... graph-node-graph-node-1 | INFO Successfully connected to IPFS node at: http://ipfs:5001/ graph-node-graph-node-1 | INFO Pool successfully connected to Postgres, pool: main, shard: primary, component: Store @@ -126,7 +163,7 @@ graph-node-graph-node-1 | INFO Connected to Ethereum, capabilities: archive, tr :warning: This step modifies `subgraph.yaml` and creates a backup file. See further down on how to restore it. ```bash -$ yarn workspace @kleros/kleros-v2-subgraph rebuild-deploy:local +yarn workspace @kleros/kleros-v2-subgraph rebuild-deploy:local ... โœ” Upload subgraph to IPFS @@ -149,7 +186,7 @@ yarn workspace @kleros/kleros-v2-web generate โœ” Running plugins โœ” Writing to src/hooks/contracts/generated.ts -$ yarn workspace @kleros/kleros-v2-web start-local +yarn workspace @kleros/kleros-v2-web start-local Server running at http://localhost:1234 โœจ Built in 2.35s ``` @@ -158,17 +195,17 @@ Server running at http://localhost:1234 ```bash # Contracts -$ yarn workspace @kleros/kleros-v2-contracts deploy-local +yarn workspace @kleros/kleros-v2-contracts deploy-local # Subgraph -$ yarn workspace @kleros/kleros-v2-subgraph rebuild-deploy:local +yarn workspace @kleros/kleros-v2-subgraph rebuild-deploy:local ``` ### Simulating Arbitration Activity ```bash -$ yarn workspace @kleros/kleros-v2-contracts simulate-local +yarn workspace @kleros/kleros-v2-contracts simulate-local ``` @@ -193,3 +230,80 @@ Every versions were saved as `subgraph.yaml.bak.`. ##### Based on the last commit `git restore subgraph.yaml` + +## Troubleshooting + +### Common Issues and Solutions + +- **Volta Yarn Version Errors** + - Pin yarn version in the project root. + + ``` + volta pin yarn + ``` + +- **Module Resolution Errors** + - Build the `kleros-app` package first. + + ``` + yarn workspace @kleros/kleros-app build + ``` + +- **Environment Variable Errors** + - Ensure all required variables are present in `/web/.env.local`: + + - `ALCHEMY_API_KEY` + - `WALLETCONNECT_PROJECT_ID` + +- **Graph Node Fulltext Search Errors** + - Remove `@fulltext` directives from the subgraph schema. + + ``` + cd subgraph/core + # Remove @fulltext directives from schema.graphql + sed -i '/@fulltext(/,/)/d' schema.graphql + rm -rf build/ + yarn build + ``` + +- **GraphQL Code Generation Failures** + - Ensure both subgraph endpoints are up. + - Test endpoints manually. + - Set environment variables to use local endpoints. + + + ``` + curl -X POST -H "Content-Type: application/json" \ + -d '{"query": "{ _meta { block { number } } }"}' \ + http://localhost:8000/subgraphs/name/kleros/kleros-v2-core-local + ``` + +- **Docker/Graph Node Connection Issues** + - Ensure Docker Desktop is running. + - Check for port conflicts (8000, 8020, 8030, 8040, 5001, 5432). + - Clean up Docker resources. + + + ``` + docker system prune -f + ``` + +- **Web Frontend Loading Issues** + - Blank page? Check the browser console for errors. + - Confirm all environment variables. + - Ensure subgraphs are syncing at [http://localhost:8000](http://localhost:8000/). + +- **Simulate Task Not Found** + - Run tests: `yarn workspace @kleros/kleros-v2-contracts test` + - Use dispute bot: `yarn workspace @kleros/kleros-v2-contracts bot:disputor` + - Or simulate disputes via the web interface. + +## Getting Help + +If you continue to experience issues: + +- Check the [GitHub Issues](https://github.com/kleros/kleros-v2/issues) for similar problems +- Join the [Kleros Discord](https://discord.gg/MhXQGCyHd9) for community support +- Review the individual package READMEs for specific configuration details + + From 2912bd1ad58a45ff298f94bf97a877e4dcb4d9cb Mon Sep 17 00:00:00 2001 From: ManiBAJPAI22 Date: Fri, 22 Aug 2025 14:04:30 +0530 Subject: [PATCH 2/4] feat: add loading and error states to stats component --- .../pages/Courts/CourtDetails/Stats/index.tsx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/web/src/pages/Courts/CourtDetails/Stats/index.tsx b/web/src/pages/Courts/CourtDetails/Stats/index.tsx index 0ae92d7f2..895d10530 100644 --- a/web/src/pages/Courts/CourtDetails/Stats/index.tsx +++ b/web/src/pages/Courts/CourtDetails/Stats/index.tsx @@ -14,6 +14,7 @@ import { useCourtDetails } from "queries/useCourtDetails"; import { landscapeStyle } from "styles/landscapeStyle"; import StatsContent from "./StatsContent"; +import Spinner from "components/Spinner"; const Container = styled.div` padding: 0 24px 12px 24px; @@ -50,13 +51,31 @@ const StyledAccordion = styled(Accordion)` )} `; +const ErrorMessage = styled.div` + display: flex; + align-items: center; + justify-content: center; + padding: 24px; + color: ${({ theme }) => theme.error}; + font-size: 16px; + font-weight: 500; +`; + const Stats = () => { const { id } = useParams(); - const { data } = useCourtDetails(id); + const { data, isLoading: isLoadingCourt, error: courtError } = useCourtDetails(id); const coinIds = [CoinIds.PNK, CoinIds.ETH]; - const { prices: pricesData } = useCoinPrice(coinIds); + const { prices: pricesData, isError: isErrorPrices } = useCoinPrice(coinIds); const isDesktop = useIsDesktop(); + if (isLoadingCourt) { + return ; + } + + if (courtError || isErrorPrices) { + return Failed to load statistics; + } + return isDesktop ? (
Statistics
From e2f96c9249a999d2ae6021f407b0e48efbd46c6c Mon Sep 17 00:00:00 2001 From: ManiBAJPAI22 Date: Fri, 22 Aug 2025 14:20:34 +0530 Subject: [PATCH 3/4] feat: enhance useCoinPrice hook and add loading/error states to stats --- web/src/hooks/useCoinPrice.tsx | 9 ++++++++- web/src/pages/Courts/CourtDetails/Stats/index.tsx | 6 +++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/web/src/hooks/useCoinPrice.tsx b/web/src/hooks/useCoinPrice.tsx index 1fc6aff61..b769c6dc0 100644 --- a/web/src/hooks/useCoinPrice.tsx +++ b/web/src/hooks/useCoinPrice.tsx @@ -13,7 +13,12 @@ export type Prices = { export const useCoinPrice = (coinIds: string[]) => { const isEnabled = coinIds !== undefined; - const { data: prices, isError } = useQuery({ + const { + data: prices, + isError, + isLoading, + error, + } = useQuery({ queryKey: [`coinPrice${coinIds}`], enabled: isEnabled, queryFn: async () => fetchCoinPrices(coinIds), @@ -21,5 +26,7 @@ export const useCoinPrice = (coinIds: string[]) => { return { prices, isError, + isLoading, + error, }; }; diff --git a/web/src/pages/Courts/CourtDetails/Stats/index.tsx b/web/src/pages/Courts/CourtDetails/Stats/index.tsx index 895d10530..b621d4f62 100644 --- a/web/src/pages/Courts/CourtDetails/Stats/index.tsx +++ b/web/src/pages/Courts/CourtDetails/Stats/index.tsx @@ -65,14 +65,14 @@ const Stats = () => { const { id } = useParams(); const { data, isLoading: isLoadingCourt, error: courtError } = useCourtDetails(id); const coinIds = [CoinIds.PNK, CoinIds.ETH]; - const { prices: pricesData, isError: isErrorPrices } = useCoinPrice(coinIds); + const { prices: pricesData, isLoading: isLoadingPrices, error: pricesError } = useCoinPrice(coinIds); const isDesktop = useIsDesktop(); - if (isLoadingCourt) { + if (isLoadingCourt || isLoadingPrices) { return ; } - if (courtError || isErrorPrices) { + if (courtError || pricesError) { return Failed to load statistics; } From 4742f14210444605b69863cb4aea5247521ac468 Mon Sep 17 00:00:00 2001 From: mB <103181735+ManiBAJPAI22@users.noreply.github.com> Date: Fri, 22 Aug 2025 14:41:17 +0530 Subject: [PATCH 4/4] Delete README.md --- README.md | 309 ------------------------------------------------------ 1 file changed, 309 deletions(-) delete mode 100644 README.md diff --git a/README.md b/README.md deleted file mode 100644 index d426b766b..000000000 --- a/README.md +++ /dev/null @@ -1,309 +0,0 @@ -

- - Kleros - -

- -

- Kleros v2 -

- -

- OpenSSF Scorecard - Security Rating - Quality Gate Status - Bugs - Reliability Rating - Maintainability Rating -
- Unit testing - Conventional Commits - Commitizen Friendly - Styled with Prettier -
- GitPoap badge -

- ---- - -## Deployments - -##### โ›“๏ธ [Contracts addresses](contracts/README.md#deployments) - -##### ๐Ÿ—ƒ๏ธ [Subgraph endpoints](subgraph/README.md#deployments) - -##### โš–๏ธ [Web frontend](web/README.md#court-deployments) - -## Content - -| Package | Description | -| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **[bots](/bots)** | Automation of the on-chain upkeep of the smart contracts. Anyone willing to spend some gas may run these bots and contribute to the upkeep operations. | -| **[contracts](/contracts)** | Smart contracts of the arbitration protocol. | -| **[kleros-app](/kleros-app)** | Library of React hooks and utilities shared by the Kleros frontend apps. | -| **[kleros-sdk](/kleros-sdk)** | SDK which facilitates the creation of arbitrable applications, the interactions with the arbitrator, the rendering of the dispute and evidence information. | -| **[subgraph](/subgraph)** | The indexing layer. | -| **[web](/web)** | The court frontend intended for the jurors and parties in a dispute. | - -## Contributing - -### Prerequisites - -- Install NodeJS 16: - - on Red Hat Linux: `sudo dnf module install nodejs:16` - - on Ubuntu Linux: `sudo snap install node --classic` - - on MacOS via [brew](https://brew.sh/): `brew install node` -- Install Yarn v1.22: `npm install -g yarn` - - Then [upgrade](https://yarnpkg.com/getting-started/install#updating-to-the-latest-versions) Yarn to v3: `yarn set version berry` -- Install Volta.sh: `curl https://get.volta.sh | bash` -- Install [Docker Desktop](https://www.docker.com/products/docker-desktop/) to run the local graph node. -- Shell utilities: [jq](https://stedolan.github.io/jq/), [yq](https://mikefarah.gitbook.io/yq/) - - on Red Hat Linux: `sudo dnf install jq yq` - - on Ubuntu Linux: `sudo snap install jq yq` - - on MacOS via [brew](https://brew.sh/): `brew install jq yq` - -### Environment Setup - -**API Keys (Required):** - -- **Alchemy API Key** (for blockchain connectivity) - - Sign up at [alchemy.com](https://www.alchemy.com/) - - Create an app and get your API key - -- **WalletConnect Project ID** (for wallet connections) - - Sign up at [cloud.walletconnect.com](https://cloud.walletconnect.com/) - - Create a project and get your Project ID - -**Environment Configuration** - -- Create a `.env.local` file in `/web` (or update an existing `.env.local.public`): - - ``` - cd web - cat > .env.local << EOF - REACT_APP_CORE_SUBGRAPH=http://localhost:8000/subgraphs/name/kleros/kleros-v2-core-local - REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=http://localhost:8000/subgraphs/name/kleros/kleros-v2-drt-local - ALCHEMY_API_KEY=your_alchemy_api_key_here - WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id_here - EOF - -``` - -(or update an existing `.env.local.public`): - -``` -sed -i 's/export ALCHEMY_API_KEY=/export ALCHEMY_API_KEY=your_alchemy_api_key_here/' web/.env.local.public -sed -i 's/export WALLETCONNECT_PROJECT_ID=/export WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id_here/' web/.env.local.public -``` - -### Install the dependencies - -```bash -yarn install - -# Foundry libraries -git submodule update --init --recursive -j 4 - -# If you encounter Volta-related yarn errors, run: -volta pin yarn -``` - -### [Hardhat CLI auto-completion](https://hardhat.org/guides/shorthand.html) (optional) - -```bash -npm i -g hardhat-shorthand - -hardhat-completion install -โœ” Which Shell do you use ? ยท bash -โœ” We will install completion to ~/.bashrc, is it ok ? (y/N) ยท true - -exec bash -``` - -### Full Stack Local Deployment - -Run the commands below from the top-level folder. Alternatively, it is possible to `cd` into the relevant package first and then call yarn without `workspace @kleros/xxxx`. - -#### Shortcut using tmux - -If you have **[tmux](https://github.com/tmux/tmux/wiki)** installed, you can get started quickly with a single command. - -```bash -yarn local-stack -``` - -![terminal](/docs/local-stack-2.png) - -#### Shell 1 - Local RPC with Contracts Deployed - -```bash -yarn workspace @kleros/kleros-v2-contracts start-local -... -Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/ - -``` - -โณ Wait until deployment is complete. - -#### Shell 2 - Local Graph Node - -```bash -yarn workspace @kleros/kleros-v2-subgraph start-local-indexer -... -graph-node-graph-node-1 | INFO Successfully connected to IPFS node at: http://ipfs:5001/ -graph-node-graph-node-1 | INFO Pool successfully connected to Postgres, pool: main, shard: primary, component: Store -... -graph-node-graph-node-1 | INFO Connected to Ethereum, capabilities: archive, traces, network_version: 31337, provider: mainnet-rpc-0 -``` - -โณ Wait until the graph service is ready. - -#### Shell 3 - Subgraph Rebuild and Local Deploy - -:warning: This step modifies `subgraph.yaml` and creates a backup file. See further down on how to restore it. - -```bash -yarn workspace @kleros/kleros-v2-subgraph rebuild-deploy:local -... -โœ” Upload subgraph to IPFS - -Build completed: QmZVaZQ9qcXPia9YnFEKk7D1dEDHbfyDiJi1sqJ6E1NydB - -Deployed to http://localhost:8000/subgraphs/name/kleros/kleros-v2-core-local/graphql - -Subgraph endpoints: -Queries (HTTP): http://localhost:8000/subgraphs/name/kleros/kleros-v2-core-local -``` - -#### Shell 4 - Frontend Pointing to the Local Subgraph - -```bash -yarn workspace @kleros/kleros-v2-web generate -โœ” Parse Configuration -โœ” Generate outputs -โœ” Validating plugins -โœ” Resolving contracts -โœ” Running plugins -โœ” Writing to src/hooks/contracts/generated.ts - -yarn workspace @kleros/kleros-v2-web start-local -Server running at http://localhost:1234 -โœจ Built in 2.35s -``` - -### Redeploying - -```bash -# Contracts -yarn workspace @kleros/kleros-v2-contracts deploy-local - -# Subgraph -yarn workspace @kleros/kleros-v2-subgraph rebuild-deploy:local - -``` - -### Simulating Arbitration Activity - -```bash -yarn workspace @kleros/kleros-v2-contracts simulate-local - -``` - -### Stopping - -Just press `Ctrl + c` in each terminal. - -#### Docker containers and data removal - -`yarn workspace @kleros/kleros-v2-subgraph stop-local-indexer` - -#### Restoring subgraph.yaml - -##### From a backup file - -Every versions were saved as `subgraph.yaml.bak.`. - -##### Based on the ArbitrumGoerli deployment artifacts - -`yarn workspace @kleros/kleros-v2-subgraph update` - -##### Based on the last commit - -`git restore subgraph.yaml` - -## Troubleshooting - -### Common Issues and Solutions - -- **Volta Yarn Version Errors** - - Pin yarn version in the project root. - - ``` - volta pin yarn - ``` - -- **Module Resolution Errors** - - Build the `kleros-app` package first. - - ``` - yarn workspace @kleros/kleros-app build - ``` - -- **Environment Variable Errors** - - Ensure all required variables are present in `/web/.env.local`: - - - `ALCHEMY_API_KEY` - - `WALLETCONNECT_PROJECT_ID` - -- **Graph Node Fulltext Search Errors** - - Remove `@fulltext` directives from the subgraph schema. - - ``` - cd subgraph/core - # Remove @fulltext directives from schema.graphql - sed -i '/@fulltext(/,/)/d' schema.graphql - rm -rf build/ - yarn build - ``` - -- **GraphQL Code Generation Failures** - - Ensure both subgraph endpoints are up. - - Test endpoints manually. - - Set environment variables to use local endpoints. - - - ``` - curl -X POST -H "Content-Type: application/json" \ - -d '{"query": "{ _meta { block { number } } }"}' \ - http://localhost:8000/subgraphs/name/kleros/kleros-v2-core-local - ``` - -- **Docker/Graph Node Connection Issues** - - Ensure Docker Desktop is running. - - Check for port conflicts (8000, 8020, 8030, 8040, 5001, 5432). - - Clean up Docker resources. - - - ``` - docker system prune -f - ``` - -- **Web Frontend Loading Issues** - - Blank page? Check the browser console for errors. - - Confirm all environment variables. - - Ensure subgraphs are syncing at [http://localhost:8000](http://localhost:8000/). - -- **Simulate Task Not Found** - - Run tests: `yarn workspace @kleros/kleros-v2-contracts test` - - Use dispute bot: `yarn workspace @kleros/kleros-v2-contracts bot:disputor` - - Or simulate disputes via the web interface. - -## Getting Help - -If you continue to experience issues: - -- Check the [GitHub Issues](https://github.com/kleros/kleros-v2/issues) for similar problems -- Join the [Kleros Discord](https://discord.gg/MhXQGCyHd9) for community support -- Review the individual package READMEs for specific configuration details - -