feat(web): extra statistic on homepage #1671
Conversation
WalkthroughThe recent changes introduce several components and hooks that enhance the home page by providing additional statistics related to court activities. Key additions include the Changes
Assessment against linked issues
Possibly related issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for kleros-v2-testnet ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kleros-v2-neo ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
❌ Deploy Preview for kleros-v2-university failed. Why did it fail? →
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
web/src/assets/svgs/icons/long-arrow-up.svgis excluded by!**/*.svg
Files selected for processing (8)
- web/src/components/ExtraStatsDisplay.tsx (1 hunks)
- web/src/hooks/queries/useHomePageBlockQuery.ts (1 hunks)
- web/src/hooks/queries/useHomePageExtraStats.ts (1 hunks)
- web/src/hooks/queries/useHomePageQuery.ts (1 hunks)
- web/src/hooks/useBlockByTimestamp.tsx (1 hunks)
- web/src/pages/Home/CourtOverview/ExtraStats.tsx (1 hunks)
- web/src/pages/Home/CourtOverview/index.tsx (2 hunks)
- web/src/utils/date.ts (1 hunks)
Additional comments not posted (20)
web/src/pages/Home/CourtOverview/index.tsx (2)
5-5: Import statement forExtraStatslooks good.The import path appears to be correct and consistent with the project structure.
19-19: Integration ofExtraStatscomponent looks good.The
ExtraStatscomponent is correctly rendered within theCourtOverviewcomponent.web/src/hooks/queries/useHomePageBlockQuery.ts (3)
1-7: Import statements look good.The necessary imports for
useQuery,useGraphqlBatcher,graphql, andHomePageBlockQueryare correctly included.
9-19: GraphQL query definition looks good.The query is correctly defined to fetch court data based on a block number and includes all necessary fields.
21-37: Custom hookuseHomePageBlockQueryimplementation looks good.The hook is correctly implemented and uses
useQueryto fetch data based on the block number. The query logic and error handling are properly managed.web/src/hooks/queries/useHomePageQuery.ts (1)
22-27: GraphQL query modifications look good.The query now includes sorting parameters and additional fields
feeForJurorandstake, which are correctly added.web/src/components/ExtraStatsDisplay.tsx (5)
1-5: Imports look good.The imported modules are appropriate for the functionality provided in the file.
6-31: Styled components are well-defined.The styled components
Container,SVGContainer, andTextContainerare well-defined and follow best practices.
33-37: Interface definition is well-defined.The interface
IExtraStatsDisplayensures type safety for the props of theExtraStatsDisplaycomponent.
39-49: Functional component is well-defined.The
ExtraStatsDisplaycomponent is well-defined and follows best practices. It conditionally rendersStyledSkeletoniftextis null.
51-51: Export statement is appropriate.The
ExtraStatsDisplaycomponent is appropriately exported as the default export.web/src/pages/Home/CourtOverview/ExtraStats.tsx (4)
1-13: Imports look good.The imported modules are appropriate for the functionality provided in the file.
14-27: Styled component is well-defined.The styled component
StyledCardis well-defined and follows best practices.
29-33: Interface definition is well-defined.The interface
IStatensures type safety for the stats configuration.
35-51: Stats configuration is well-defined.The
statsarray contains the configuration for the stats to be displayed and follows best practices.web/src/hooks/queries/useHomePageExtraStats.ts (3)
1-13: Imports look good.All necessary imports are correctly included.
14-38: Type definitions look good.The type definitions are correctly defined and necessary for the hook's functionality.
16-32: Utility functions look good.The utility functions are correctly implemented and optimized for performance.
web/src/hooks/useBlockByTimestamp.tsx (2)
1-7: Imports look good.All necessary imports are correctly included.
8-12: State and effect hooks look good.The state and effect hooks are correctly implemented.
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
web/src/consts/averageBlockTimeInSeconds.ts (1)
3-3: Consider fetching the block times dynamically.While hardcoding the average block times provides a simple solution, it might require manual updates if the values change in the future. Consider implementing a mechanism to fetch the block times dynamically from a reliable source to ensure the values remain up-to-date.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- web/src/components/ExtraStatsDisplay.tsx (1 hunks)
- web/src/consts/averageBlockTimeInSeconds.ts (1 hunks)
- web/src/hooks/queries/useHomePageExtraStats.ts (1 hunks)
- web/src/pages/Home/CourtOverview/ExtraStats.tsx (1 hunks)
- web/src/pages/Home/CourtOverview/Header.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (3)
- web/src/components/ExtraStatsDisplay.tsx
- web/src/pages/Home/CourtOverview/ExtraStats.tsx
- web/src/pages/Home/CourtOverview/Header.tsx
Additional comments not posted (8)
web/src/consts/averageBlockTimeInSeconds.ts (1)
1-3: LGTM!The code is well-structured and provides a clear way to access average block times for specific networks. The use of a constant object and importing the network IDs from the
viemlibrary ensures consistency and maintainability.web/src/hooks/queries/useHomePageExtraStats.ts (7)
1-13: LGTM!The imports are relevant and necessary for the functionality implemented in this file.
14-14: LGTM!The type alias
Courtis correctly defined and improves code readability by providing a semantic name for the type.
16-24: LGTM!The function
getCourtWithMaxDifferencecorrectly calculates the court with the maximum difference in the number of disputes between the two arrays ofCourtobjects.
26-28: LGTM!The function
getCourtWithMaxRewardcorrectly returns the court with the maximum fee for jurors from the given array ofCourtobjects.
30-32: LGTM!The function
getCourtWithMaxChancecorrectly returns the court with the maximum stake from the given array ofCourtobjects.
34-38: LGTM!The interface
HomePageExtraStatsTypecorrectly defines the structure of the object returned by theuseHomePageExtraStatshook.
40-70: LGTM!The
useHomePageExtraStatshook is well-implemented and correctly calculates the additional statistics for the homepage. It uses theuseHomePageContextanduseHomePageBlockQueryhooks to fetch the necessary data, performs the calculations using helper functions, and memoizes the results for optimal performance. The returned object matches theHomePageExtraStatsTypeinterface.
There was a problem hiding this comment.
Actionable comments posted: 3
Outside diff range and nitpick comments (2)
web/src/hooks/queries/useHomePageExtraStats.ts (1)
3-4: Consider importingDEFAULT_CHAINfrom a more generic location.The constant
DEFAULT_CHAINis imported fromconsts/chains. To improve reusability and maintainability, consider moving this constant to a more generic location, such as aconfigorconstantsdirectory at the root level of the project. This will make it easier to access and modify the default chain value across different parts of the application.web/src/hooks/queries/useHomePageBlockQuery.ts (1)
35-50: Consider adding error handling and loading state management.The
useHomePageBlockQueryhook utilizes theuseQueryhook from the@tanstack/react-querylibrary, which is a good practice for data fetching and caching. However, consider adding error handling and loading state management to improve the user experience and handle potential issues gracefully.You can destructure the
errorandisLoadingproperties from theusedQueryobject and handle them accordingly in the component that consumes this hook. For example:const { data, error, isLoading } = useHomePageBlockQuery(blockNumber); if (isLoading) { return <LoadingSpinner />; } if (error) { return <ErrorMessage error={error} />; }
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- web/src/hooks/queries/useHomePageBlockQuery.ts (1 hunks)
- web/src/hooks/queries/useHomePageExtraStats.ts (1 hunks)
- web/src/pages/Home/CourtOverview/ExtraStats.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- web/src/pages/Home/CourtOverview/ExtraStats.tsx
Additional comments not posted (7)
web/src/hooks/queries/useHomePageExtraStats.ts (4)
1-2: Verify the imported dependencies are used.The imported dependencies
useEffect,useState,useBlockNumber, andaverageBlockTimeInSecondsare being used correctly within the hook. No unused imports detected.Also applies to: 6-7
9-12: LGTM!The hook initializes the state variable
oneWeekAgoBlockNumberand retrieves the current block number using theuseBlockNumberhook from thewagmilibrary. The usage of theDEFAULT_CHAINconstant as thechainIdparameter ensures consistency in fetching the block number for the desired chain.
1-23: Ensure proper error handling.The hook
useHomePageExtraStatsis well-implemented, but consider adding error handling for the data fetching logic to improve robustness.
13-18: Verify the calculation ofoneWeekInBlocks.The
useEffecthook calculates the number of blocks equivalent to one week using theaverageBlockTimeInSecondsconstant. This calculation appears to be correct, as it converts the duration of one week in seconds to the corresponding number of blocks based on the average block time for the specified chain.To verify the calculation, run the following script:
Verification successful
Calculation of
oneWeekInBlocksis correct and flexibleThe implementation correctly calculates
oneWeekInBlocksusing the formula:Math.floor((7 * 24 * 3600) / averageBlockTimeInSeconds[DEFAULT_CHAIN])This calculation is flexible and adapts to the current chain:
- For Arbitrum (production): ~2,338,461 blocks
- For Arbitrum Sepolia (non-production): ~2,268,656 blocks
The use of
DEFAULT_CHAINensures the correct average block time is used based on the deployment environment.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the calculation of `oneWeekInBlocks` is correct. # Test: Check if the calculation matches the expected value. expected_value=$(echo "scale=0; (7 * 24 * 3600) / $(jq -r ".\"$DEFAULT_CHAIN\"" consts/averageBlockTimeInSeconds.json)" | bc) if [[ $(rg -o $'oneWeekInBlocks = (\d+)' -r '$1' web/src/hooks/queries/useHomePageExtraStats.ts) -eq $expected_value ]]; then echo "Calculation is correct" else echo "Calculation is incorrect" fiLength of output: 444
Script:
#!/bin/bash # View the contents of useHomePageExtraStats.ts echo "Contents of useHomePageExtraStats.ts:" cat web/src/hooks/queries/useHomePageExtraStats.ts # Search for averageBlockTimeInSeconds definition echo -e "\nSearching for averageBlockTimeInSeconds definition:" rg "const averageBlockTimeInSeconds" -A 5 # Search for DEFAULT_CHAIN definition echo -e "\nSearching for DEFAULT_CHAIN definition:" rg "const DEFAULT_CHAIN" -A 1Length of output: 1684
web/src/hooks/queries/useHomePageBlockQuery.ts (3)
1-8: LGTM!The imports and exports are properly organized and follow the necessary conventions.
125-126: LGTM!The hook returns the computed
courtActivityStatsobject, which can be consumed by the components that require this data.
10-33: Verify the GraphQL query fields align with the schema and requirements.The GraphQL query appears to be well-structured and includes the necessary fields for fetching court data. However, please ensure that the fields being queried, such as
numberDisputes,feeForJuror, andstake, are available in the GraphQL schema and provide the expected data for the desired functionality.Run the following script to verify the GraphQL schema:
Verification successful
To further investigate the 'stake' field, which is present in our GraphQL query but not directly visible in the schema, let's search the codebase for any mentions of 'stake' in relation to the Court type. This will help us determine if it's a valid field or if it needs to be flagged as an issue.
Let's modify our search strategy to look for the 'stake' field in relation to the Court type, focusing on TypeScript files and using a more general search pattern.
The 'stake' field in the GraphQL query is valid and aligns with the schema.
After a thorough investigation of the codebase, we can confirm that the 'stake' field is a valid part of the Court type in the GraphQL schema. It is extensively used throughout the system in various contexts, including queries, calculations, and event definitions. The presence of this field in the HomePageBlock query is correct and consistent with the overall data structure and requirements of the application.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the GraphQL query fields align with the schema. # Test: Search for the GraphQL schema file. Expect: A schema file containing the queried fields. fd -e graphql -x cat {} | rg -e 'type Court' -A 15Length of output: 1332
Script:
#!/bin/bash # Search for 'stake' in relation to the Court type rg -i "court.*stake|stake.*court" --type ts --type graphql -C 3Length of output: 97
Script:
#!/bin/bash # Search for 'stake' in relation to the Court type in TypeScript files rg -i "court.*stake|stake.*court" --type ts -C 3 # Search for 'Court' type definition in TypeScript files rg -i "type Court" --type ts -C 10 # Search for 'stake' field in any GraphQL query or type definition fd -e ts -x cat {} | rg -i "(query|type).*\{" -A 20 | rg -i "stake"Length of output: 82002
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range and nitpick comments (2)
web/src/components/StyledSkeleton.tsx (1)
12-14: Consider adding a prop to customize the margin-bottom value.To make the
StyledCaseCardTitleSkeletoncomponent more reusable and flexible, consider adding a prop that allows customizing themargin-bottomvalue. This way, the component can be used in different contexts where different spacing might be required.Here's an example of how you can modify the component to accept a custom
marginBottomprop:-export const StyledCaseCardTitleSkeleton = styled(StyledSkeleton)` - margin-bottom: 16px; -`; +export const StyledCaseCardTitleSkeleton = styled(StyledSkeleton)<{ marginBottom?: number }>` + margin-bottom: ${({ marginBottom }) => marginBottom ?? 16}px; +`;With this change, you can use the component like this:
<StyledCaseCardTitleSkeleton marginBottom={24} />web/src/components/DisputeView/DisputeCardView.tsx (1)
Line range hint
1-64: Consider adding a loading state for the dispute information.The
DisputeInfocomponent is not wrapped with a loading state, which may lead to inconsistent loading behavior. Consider adding a loading skeleton for the dispute information to enhance the user experience during loading states.Here's an example of how you can implement the loading state for the
DisputeInfocomponent:+import { StyledDisputeInfoSkeleton } from "components/StyledSkeleton"; // ... const DisputeCardView: React.FC<IDisputeCardView> = ({ isLoading, ...props }) => { const navigate = useNavigate(); return ( <StyledCard hover onClick={() => navigate(`/cases/${props?.disputeID?.toString()}`)}> <PeriodBanner id={parseInt(props?.disputeID)} period={props?.period} /> <CardContainer> {isLoading ? <StyledCaseCardTitleSkeleton /> : <TruncatedTitle text={props?.title} maxLength={100} />} - <DisputeInfo {...props} /> + {isLoading ? <StyledDisputeInfoSkeleton /> : <DisputeInfo {...props} />} </CardContainer> </StyledCard> ); };Make sure to create the corresponding
StyledDisputeInfoSkeletoncomponent in theStyledSkeleton.tsxfile.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- web/src/components/DisputeView/DisputeCardView.tsx (2 hunks)
- web/src/components/StyledSkeleton.tsx (1 hunks)
Additional comments not posted (3)
web/src/components/StyledSkeleton.tsx (2)
12-14: LGTM!The new
StyledCaseCardTitleSkeletoncomponent extends the existingStyledSkeletoncomponent and adds a specificmargin-bottomof 16px. This addition is a valid enhancement to improve the visual spacing and layout of the skeleton loading state for case card titles.
12-14: Verify the usage ofStyledCaseCardTitleSkeletonin the codebase.Ensure that the new
StyledCaseCardTitleSkeletoncomponent is being used appropriately in the relevant parts of the codebase where case card titles are displayed during loading states.Run the following script to verify the component usage:
Verification successful
Verified:
StyledCaseCardTitleSkeletonis used correctly for loading statesThe
StyledCaseCardTitleSkeletoncomponent is being used appropriately in the codebase, specifically in the DisputeCardView component. It's correctly implemented to display a skeleton loader for case card titles during loading states.Key findings:
- Imported and used in
web/src/components/DisputeView/DisputeCardView.tsx- Properly implemented in a conditional rendering based on
isLoadingstate- Component definition in
web/src/components/StyledSkeleton.tsxmatches the provided code snippetScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `StyledCaseCardTitleSkeleton` in the codebase. # Test: Search for the component usage. Expect: Occurrences in relevant files. rg --type tsx -A 5 $'StyledCaseCardTitleSkeleton'Length of output: 76
Script:
#!/bin/bash # Description: Verify the usage of `StyledCaseCardTitleSkeleton` in the codebase. # Find all .tsx files and search for StyledCaseCardTitleSkeleton within them fd -e tsx -X rg -A 5 'StyledCaseCardTitleSkeleton'Length of output: 1477
web/src/components/DisputeView/DisputeCardView.tsx (1)
57-57: LGTM!The component now uses the
StyledCaseCardTitleSkeletonfor the loading state, which aligns with the updated import statement. The conditional rendering logic remains intact and functions as expected.
…, calculation changes
(kemuru writing)
closes #683
PR-Codex overview
This PR focuses on enhancing the functionality and structure of the application, particularly in the areas of querying and displaying court statistics, improving component styling, and updating the schema for handling disputes and juror data.
Detailed summary
ESNext.Arraytotsconfig.json.courtsto include new fields.CourtOverviewto includeExtraStatscomponent.useHomePageExtraStatsfor fetching additional statistics.Courtentity withnumberVotesandeffectiveStake.updateEffectiveStakefunction to calculate total stake.DisputeCardViewto use a new skeleton component for loading states.Summary by CodeRabbit
Summary by CodeRabbit
New Features
ExtraStatscomponent for displaying additional statistics related to court activity over customizable time frames.ExtraStatsDisplaycomponent for structured display of additional statistics.Bug Fixes
Documentation
Chores