Feature/add loading error states stats #2103
Conversation
## 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.
…up-troubleshooting docs: Add comprehensive setup guide and troubleshooting section
👷 Deploy request for kleros-v2-testnet pending review.Visit the deploys page to approve it
|
👷 Deploy request for kleros-v2-testnet-devtools pending review.Visit the deploys page to approve it
|
👷 Deploy request for kleros-v2-university pending review.Visit the deploys page to approve it
|
👷 Deploy request for kleros-v2-neo pending review.Visit the deploys page to approve it
|
WalkthroughRemoved README.md content entirely. Extended Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant StatsPage as Courts/CourtDetails/Stats
participant CourtHook as useCourtDetails
participant PriceHook as useCoinPrice
participant CourtAPI as Court Data Source
participant PriceAPI as Price API
User->>StatsPage: Open Court Details → Stats
StatsPage->>CourtHook: request court details
StatsPage->>PriceHook: request coin prices
par Parallel fetch
CourtHook->>CourtAPI: fetch court data
PriceHook->>PriceAPI: fetch price data
end
alt Any isLoading
StatsPage-->>User: Render Spinner
else Any error
StatsPage-->>User: Render "Failed to load statistics"
else Success
StatsPage-->>User: Render StatsContent (court data + prices)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
README.md (1)
224-226: Grammar: singular subject.“Every versions were saved…” → “Every version was saved…”
Apply this diff:
-Every versions were saved as `subgraph.yaml.bak.<timestamp>`. +Every version was saved as `subgraph.yaml.bak.<timestamp>`.
🧹 Nitpick comments (3)
web/src/hooks/useCoinPrice.tsx (1)
3-7: Type safety and input shape: prefer a single array parameter over rest args.The fetcher currently takes
(...coinIds)and is called with an array (fetchCoinPrices(coinIds)). JS coerces[["a","b"]].join(",")to"a,b", which “works by accident” but is brittle. Make the parameter explicitlycoinIds: string[]to avoid confusion and future regressions.Apply this diff to clarify the contract:
-const fetchCoinPrices = async (...coinIds) => { - const response = await fetch(`https://coins.llama.fi/prices/current/${coinIds.join(",")}?searchWidth=1h`); +const fetchCoinPrices = async (coinIds: string[], signal?: AbortSignal): Promise<Prices> => { + const response = await fetch( + `https://coins.llama.fi/prices/current/${coinIds.join(",")}?searchWidth=1h`, + { signal } + ); const data = await response.json(); return data.coins; };And ensure the queryFn passes the
signaland array (see previous comment).web/src/pages/Courts/CourtDetails/Stats/index.tsx (2)
75-77: Add accessibility: announce the error message to assistive tech.Expose the error via an ARIA live region so screen readers get notified immediately.
Apply this diff:
- if (courtError || pricesError) { - return <ErrorMessage>Failed to load statistics</ErrorMessage>; - } + if (courtError || pricesError) { + return <ErrorMessage role="alert" aria-live="assertive">Failed to load statistics</ErrorMessage>; + }Optionally, consider adding a “Retry” button by exposing
refetchfrom both hooks for a better recovery path.
66-69: Consider usingisFetchingfor background refresh UX (optional).
isLoadingonly covers the initial load. If you want to avoid spinner flicker during background refetches, keep as-is. If you prefer to indicate ongoing background activity, you could also readisFetchingfrom both queries and render a lighter inline progress indicator instead of replacing the whole section.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
README.md(7 hunks)web/src/hooks/useCoinPrice.tsx(1 hunks)web/src/pages/Courts/CourtDetails/Stats/index.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
web/src/pages/Courts/CourtDetails/Stats/index.tsx (2)
web/src/hooks/queries/useCourtDetails.ts (1)
useCourtDetails(33-45)web/src/hooks/useCoinPrice.tsx (1)
useCoinPrice(13-32)
🪛 LanguageTool
README.md
[grammar] ~69-~69: There might be a mistake here.
Context: ... API Key** (for blockchain connectivity) - Sign up at [alchemy.com](https://www.alc...
(QB_NEW_EN)
[grammar] ~73-~73: There might be a mistake here.
Context: ...ct Project ID** (for wallet connections) - Sign up at [cloud.walletconnect.com](htt...
(QB_NEW_EN)
[grammar] ~238-~238: There might be a mistake here.
Context: ...Solutions - Volta Yarn Version Errors - Pin yarn version in the project root. ...
(QB_NEW_EN)
[grammar] ~245-~245: There might be a mistake here.
Context: ...rn ``` - Module Resolution Errors - Build the kleros-app package first. ...
(QB_NEW_EN)
[grammar] ~252-~252: There might be a mistake here.
Context: ... ``` - Environment Variable Errors - Ensure all required variables are presen...
(QB_NEW_EN)
[grammar] ~258-~258: There might be a mistake here.
Context: ... - **Graph Node Fulltext Search Errors** - Remove@fulltext` directives from the s...
(QB_NEW_EN)
[grammar] ~296-~296: There might be a mistake here.
Context: ...ost:8000/). - Simulate Task Not Found - Run tests: `yarn workspace @kleros/klero...
(QB_NEW_EN)
[grammar] ~297-~297: There might be a mistake here.
Context: ...imulate Task Not Found** - Run tests: yarn workspace @kleros/kleros-v2-contracts test - Use dispute bot: `yarn workspace @kleros...
(QB_NEW_EN)
[grammar] ~298-~298: There might be a mistake here.
Context: ...v2-contracts test - Use dispute bot:yarn workspace @kleros/kleros-v2-contracts bot:disputor` - Or simulate disputes via the web interfa...
(QB_NEW_EN)
🪛 markdownlint-cli2 (0.17.2)
README.md
77-77: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
81-81: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
94-94: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
241-241: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
248-248: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
261-261: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
275-275: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
287-287: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🔇 Additional comments (2)
web/src/hooks/useCoinPrice.tsx (1)
16-21: Good addition: exposing loading and error states from the hook.Surfacing
isLoadinganderroraligns the hook with React Query conventions and enables proper UI fallbacks upstream. No issues with the destructuring itself.web/src/pages/Courts/CourtDetails/Stats/index.tsx (1)
71-73: Spinner fallback path looks good.Returning a single, centered
<Spinner />while either source is loading is appropriate and keeps the UI simple.
Background
The Stats component in
web/src/pages/Courts/CourtDetails/Stats/index.tsxcurrently does not handle loading and error states when fetching data from multiple sources (court details and coin prices). This improvement will help users understand when data is being loaded or if there are any issues with data fetching.Changes Made
Technical Implementation
isLoadinganderrorfromuseCourtDetailshook (standard React Query)useCoinPricehook to returnisLoadinganderrorproperties<Spinner />component during data fetch for both sources<ErrorMessage>component with theme-consistent stylingStatsContentwhen both data sources are successfully loadedFiles Changed
web/src/hooks/useCoinPrice.tsx- Enhanced to returnisLoadinganderrorweb/src/pages/Courts/CourtDetails/Stats/index.tsx- Added loading/error handlingReferences
PR-Codex overview
This PR focuses on enhancing the
useCoinPricehook and theStatscomponent by adding loading and error handling states, improving user feedback during data fetching.Detailed summary
isLoadinganderrorstates to theuseCoinPricehook.Statscomponent to handle loading and error states.Spinnercomponent for loading indication.ErrorMessagestyled component for error display.Summary by CodeRabbit
New Features
Documentation