feat: add four new stat variables, stake simulator #1699
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the WalkthroughThe changes involve modifications to various components and files, including the Changes
Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
🪧 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-neo ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kleros-v2-university ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kleros-v2-testnet ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
🧹 Outside diff range and nitpick comments (5)
web/src/hooks/queries/useCourtDetails.ts (3)
20-20: LGTM! Consider adding a comment for clarity.The addition of the
numberVotesfield is appropriate and aligns with the PR objectives. It's correctly placed among other court statistics.Consider adding a brief comment above this field to clarify what exactly
numberVotesrepresents (e.g., total votes, active votes, etc.). This would enhance code readability and maintainability.
25-25: LGTM! Consider adding a comment for clarity.The addition of the
feeForJurorfield is appropriate and aligns with the PR objectives. It's correctly placed among other financial court statistics.Consider adding a brief comment above this field to clarify what exactly
feeForJurorrepresents (e.g., base fee, per-case fee, etc.) and its unit (e.g., ETH, PNK). This would enhance code readability and maintainability.
Line range hint
1-41: Overall changes look good. Consider next steps for full implementation.The additions of
numberVotesandfeeForJurorfields to the GraphQL query are appropriate and align with the PR objectives. These changes will allow fetching of the new statistical variables for the court page.Next steps to consider:
- Update the components that use the
useCourtDetailshook to utilize the new fields.- Implement the dropdown menu for changing timeframes, as mentioned in the PR description.
- Review and improve the calculations for these new variables, as noted in the PR description.
- Add appropriate error handling and loading states for these new fields in the UI.
- Consider adding unit tests for the updated query and any new components that will display these statistics.
web/src/pages/Courts/CourtDetails/Stats.tsx (2)
29-29: Remove unnecessary commented-out import statementThe import statement on line 29 is commented out. If it's no longer needed, consider removing it to keep the codebase clean.
Apply this diff to remove the commented-out code:
-// import { useHomePageBlockQuery } from "queries/useHomePageBlockQuery";
191-191: Removeconsole.logstatements from production codeThe
console.logstatements in lines 191 and 194 are useful for debugging but should be removed to prevent unnecessary console output in production. If logging is required, consider using a proper logging mechanism.Apply this diff to remove the
console.logstatements:const foundCourt = courtData?.diffCourts.find((c) => c.id === id); - console.log({ foundCourt }); return foundCourt; } else { - console.log("Court not found or diffCourts not available"); return undefined;Also applies to: 194-194
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
🔇 Files ignored due to path filters (10)
web/src/assets/svgs/icons/ethereum.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/law-balance-with-pnk.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/law-balance.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/min-stake.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/pnk.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/redistributed-pnk.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/rewards-per-pnk.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/user.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/vote-stake.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/votes-per-pnk.svgis excluded by!**/*.svg
📒 Files selected for processing (5)
- web/src/components/StatDisplay.tsx (0 hunks)
- web/src/hooks/queries/useCourtAllTimeQuery.ts (1 hunks)
- web/src/hooks/queries/useCourtDetails.ts (1 hunks)
- web/src/hooks/queries/useHomePageBlockQuery.ts (1 hunks)
- web/src/pages/Courts/CourtDetails/Stats.tsx (3 hunks)
💤 Files not reviewed due to no reviewable changes (1)
- web/src/components/StatDisplay.tsx
…n, add time selector, style
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Outside diff range and nitpick comments (4)
web/src/consts/averageBlockTimeInSeconds.ts (1)
3-3: LGTM with suggestion: Add source and update information for block times.The constant
averageBlockTimeInSecondsis well-defined and uses computed property names correctly. However, to improve maintainability:
- Consider adding a comment explaining the source of these block time values.
- Include the date when these values were last verified or updated.
This information will help future maintainers understand when and how to update these values if needed.
Here's a suggested improvement:
// Average block times (in seconds) for supported chains // Source: [Add source here, e.g., chain documentation or block explorer] // Last updated: [Add date here, e.g., 2023-09-15] export const averageBlockTimeInSeconds = { [arbitrum.id]: 0.26, [arbitrumSepolia.id]: 0.268 };web/src/hooks/queries/useHomePageExtraStats.ts (2)
7-21: LGTM: Hook implementation is well-structured. Consider enhancing type safety.The hook is implemented following React best practices, efficiently managing state and side effects. The calculation of
pastBlockNumberis done correctly, and the hook handles both number and string inputs fordays.Consider enhancing type safety by using a union type for the
daysparameter:export const useHomePageExtraStats = (days: number | "allTime") => { // ... rest of the implementation }This change would make it clear that the string option for
daysis specifically "allTime" and prevent potential errors from other string inputs.
11-18: LGTM: Logic and calculations are correct. Consider handling edge cases.The logic for calculating
pastBlockNumberis sound and efficient. The use ofaverageBlockTimeInSecondsandMath.floor()ensures accurate block number calculations. The condition for updatingpastBlockNumberprevents unnecessary recalculations.Consider handling potential edge cases:
- Add a check for negative or zero
daysto prevent invalid calculations:if (typeof days !== "string" && days > 0 && currentBlockNumber?.data) { // ... existing calculation }
- Consider adding a maximum limit for
daysto prevent potential overflow issues:const MAX_DAYS = 365 * 10; // 10 years, for example const daysToUse = Math.min(days, MAX_DAYS); const timeInBlocks = Math.floor((daysToUse * 24 * 3600) / averageBlockTimeInSeconds[DEFAULT_CHAIN]);These changes would make the hook more robust against potential misuse or extreme inputs.
web/src/pages/Courts/CourtDetails/Stats.tsx (1)
210-219: LGTM: Well-defined timeRanges array with room for future expansion.The timeRanges array provides a good set of options for users to select different time periods. The commented-out options indicate potential for future expansion, which is good for maintainability.
Consider adding a TODO comment to remind future developers about the possibility of uncommenting additional time ranges:
const timeRanges = [ { value: 7, text: "Last 7 days" }, { value: 30, text: "Last 30 days" }, { value: 90, text: "Last 90 days" }, - /* we can uncomment as court creation time increases, - but it's a bit tricky because this affects every court */ - // { value: 180, text: "Last 180 days" }, - // { value: 365, text: "Last 365 days" }, + // TODO: Uncomment additional time ranges as court creation time increases + // Note: This affects every court, so careful consideration is needed + // { value: 180, text: "Last 180 days" }, + // { value: 365, text: "Last 365 days" }, { value: "allTime", text: "All Time" }, ];This change provides clearer guidance for future developers.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
web/src/assets/svgs/icons/chart.svgis excluded by!**/*.svg
📒 Files selected for processing (5)
- web/src/consts/averageBlockTimeInSeconds.ts (1 hunks)
- web/src/hooks/queries/useHomePageBlockQuery.ts (1 hunks)
- web/src/hooks/queries/useHomePageExtraStats.ts (1 hunks)
- web/src/pages/Courts/CourtDetails/Stats.tsx (3 hunks)
- web/src/utils/calculateSubtextRender.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- web/src/hooks/queries/useHomePageBlockQuery.ts
🔇 Additional comments (7)
web/src/consts/averageBlockTimeInSeconds.ts (2)
1-1: LGTM: Imports are correctly specified.The imports from the
viem/chainsmodule are appropriate for defining chain-specific constants in a blockchain project.
1-3: Overall: Well-structured and focused constant definition.This file adheres to good practices by:
- Centralizing chain-specific constants.
- Using a clear and descriptive naming convention.
- Leveraging TypeScript's type system through the use of the
viemlibrary.These practices contribute to better maintainability and type safety across the project.
web/src/hooks/queries/useHomePageExtraStats.ts (1)
1-5: LGTM: Imports are appropriate and concise.The imports are well-chosen and relevant to the hook's functionality. No unused imports are present, which is good for maintaining clean code.
web/src/pages/Courts/CourtDetails/Stats.tsx (4)
8-15: LGTM: New imports are appropriate for the added features.The new imports, including SVG icons, the DropdownSelect component, and the useHomePageExtraStats hook, align well with the new functionality being added to the Stats component.
52-77: LGTM: Well-structured styled components for time display and selection.The new styled components are well-implemented, using responsive sizing and theme colors appropriately. They provide a good foundation for the new time selection feature.
171-178: Specify function types instead of using 'any' in the IStats interface.This issue was previously identified. Please refer to the existing comment for details on how to improve the type safety of the IStats interface.
Line range hint
1-290: Summary: Good enhancements with minor improvements needed.The changes to the Stats component significantly enhance its functionality by adding time-framed statistics and a time range selector. The new features are well-implemented, with appropriate use of React hooks and styled components.
Key points from the review:
- New imports and styled components are well-structured.
- The beautifyStatNumber function could be improved for handling small values.
- The IStats interface should use specific function types instead of 'any'.
- Error handling in the useMemo hook for foundCourt could be enhanced.
- Console.log statements should be removed.
- Using index as key in map functions should be avoided.
Overall, these changes provide a solid foundation for displaying more detailed statistics. Addressing the mentioned issues will further improve the code quality and maintainability.
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (1)
web/src/pages/Courts/CourtDetails/index.tsx (1)
Line range hint
1-173: Consider additional enhancements based on PR objectivesThe addition of the
Dividercomponent and its usage in theCourtDetailscomponent is a good improvement to the visual structure. However, based on the PR objectives, there are a few more enhancements that could be considered:
The PR mentions adding new stat variables (
numberVotes,feeForJuror,averageBlockTimeInSeconds). These don't appear to be implemented in this file yet. Consider updating theStatscomponent to include these new variables.The PR description mentions plans for an accordion layout for statistics. This could be implemented in the
Statscomponent or as a new component withinCourtDetails.The time range selection feature for statistics, mentioned in the PR, is not visible in this file. Consider adding this feature, possibly within the
Statscomponent.To implement these features:
- Update the
Statscomponent to include the new statistical variables.- Create a new
AccordionStatscomponent that wraps the currentStatscomponent and provides the accordion functionality.- Add a
TimeRangeSelectorcomponent withinStatsorAccordionStatsto allow users to change the time frame for displayed statistics.These changes will align the implementation more closely with the stated PR objectives and enhance the functionality of the
CourtDetailscomponent.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- web/src/pages/Courts/CourtDetails/Stats.tsx (3 hunks)
- web/src/pages/Courts/CourtDetails/index.tsx (2 hunks)
🔇 Additional comments (5)
web/src/pages/Courts/CourtDetails/index.tsx (1)
123-123: Verify design alignment for Divider placementThe placement of the new
Dividercomponent between theStatsandStakePanelcomponents looks good. It provides a clear visual separation between these sections, which should improve the overall layout and user experience.To ensure this change aligns with the design specifications:
- Please verify that this divider placement matches the Figma design mentioned in the PR description.
- Consider if additional dividers are needed for consistency, such as before or after other major sections in the
CourtDetailscomponent.web/src/pages/Courts/CourtDetails/Stats.tsx (4)
Line range hint
1-316: Overall assessment: Good enhancements with room for improvementThe changes to the
Statscomponent introduce valuable new features, including time-based filtering of statistics and improved data visualization. The code structure is generally good, with clear separation of concerns and reusable components.Key improvements:
- Enhanced error handling in the
beautifyStatNumberfunction andtimeframedStatsarray.- Improved type safety in the
IStatsinterface.- Removed console.log statements and simplified the
useMemohook.- Suggested using unique keys in map functions for better React performance.
These changes will significantly improve the component's functionality, maintainability, and performance. Great work on expanding the capabilities of the court statistics display!
188-195: 🛠️ Refactor suggestionSpecify function types instead of using 'any' in the
IStatsinterfaceUsing
anytype undermines TypeScript's type safety. Define proper function types to enhance code reliability and maintainability.Apply this diff to specify the function types:
interface IStats { title: string; coinId?: number; - getText: any; //(data: CourtDetailsQuery["court"]) => string; - getSubtext?: any; // (data: CourtDetailsQuery["court"], coinPrice?: number) => string; + getText: (data: CourtDetailsQuery["court"]) => string | JSX.Element; + getSubtext?: (data: CourtDetailsQuery["court"], coinPrice?: number) => string | JSX.Element; color: IStatDisplay["color"]; icon: React.FC<React.SVGAttributes<SVGElement>>; }Likely invalid or redundant comment.
237-260: 🛠️ Refactor suggestionImprove error handling and remove console.log statements in the Stats component
The new functionality for time range selection and data fetching is well-implemented. However, there are a couple of areas that could be improved:
- Remove console.log statements.
- Enhance error handling in the useMemo hook.
Apply the following changes:
const foundCourt = useMemo(() => { if (timeframedCourtData?.diffCourts) { - const foundCourt = timeframedCourtData?.diffCourts.find((c) => c.id === id); - console.log({ foundCourt }); - return foundCourt; + return timeframedCourtData.diffCourts.find((c) => c.id === id); } else { - console.log("Court not found or diffCourts not available"); return undefined; } }, [timeframedCourtData, id]);These changes remove unnecessary console.log statements and simplify the logic. Consider adding error handling or logging if the court is not found, depending on your application's requirements.
Likely invalid or redundant comment.
52-67: 🛠️ Refactor suggestionConsider improving the handling of small values in beautifyStatNumber
The
beautifyStatNumberfunction handles large numbers well, but the treatment of small values (< 1) could be improved:
- The current implementation inverts small values, which might be confusing for users.
- There's no clear distinction between very small positive and negative values.
Consider modifying the handling of small values:
function beautifyStatNumber(value: number): string { const absValue = Math.abs(value); if (absValue >= 1e9) { return `${commify((value / 1e9).toFixed(2))}B`; } else if (absValue >= 1e6) { return `${commify((value / 1e6).toFixed(2))}M`; } else if (absValue >= 1e3) { return `${commify((value / 1e3).toFixed(0))}K`; - } else if (absValue < 1 && absValue !== 0) { - const inverseValue = 1 / absValue; - return commify(inverseValue.toFixed(0)); + } else if (absValue < 1 && absValue > 0) { + return value.toExponential(2); } return commify(value.toFixed(0)); }This change uses scientific notation for small positive values, which is more intuitive and maintains the sign of the original value.
Likely invalid or redundant comment.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
web/src/pages/Courts/CourtDetails/Stats.tsx (1)
Line range hint
1-50: LGTM! Consider extracting theme colors to variables.The new imports and styled components look good and align with the added functionality. The
StyledAccordioncomponent effectively customizes theAccordionfrom the UI library.Consider extracting theme colors to variables for better maintainability:
const StyledAccordion = styled(Accordion)` width: 100%; margin-bottom: 12px; > * > button { justify-content: unset; + --background-color: ${({ theme }) => theme.whiteBackground}; + --border-color: ${({ theme }) => theme.stroke}; + --text-color: ${({ theme }) => theme.primaryText}; - background-color: ${({ theme }) => theme.whiteBackground} !important; - border: 1px solid ${({ theme }) => theme.stroke} !important; - color: ${({ theme }) => theme.primaryText} !important; + background-color: var(--background-color) !important; + border: 1px solid var(--border-color) !important; + color: var(--text-color) !important; > svg { - fill: ${({ theme }) => theme.primaryText} !important; + fill: var(--text-color) !important; } } //adds padding to body container > * > div > div { padding: 0; } `;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- web/src/pages/Courts/CourtDetails/Stats.tsx (3 hunks)
🔇 Additional comments (4)
web/src/pages/Courts/CourtDetails/Stats.tsx (4)
69-94: LGTM! Well-structured styled components for time display.The new styled components for time display are well-organized and consistent with the existing styling patterns. They provide a good foundation for the new time range selector functionality.
52-67:⚠️ Potential issueImprove handling of small numbers in beautifyStatNumber
The
beautifyStatNumberfunction effectively formats large numbers, but the handling of small numbers (< 1) could be improved.Consider modifying the handling of small numbers:
function beautifyStatNumber(value: number): string { const absValue = Math.abs(value); if (absValue >= 1e9) { return `${commify((value / 1e9).toFixed(2))}B`; } else if (absValue >= 1e6) { return `${commify((value / 1e6).toFixed(2))}M`; } else if (absValue >= 1e3) { return `${commify((value / 1e3).toFixed(0))}K`; - } else if (absValue < 1 && absValue !== 0) { - const inverseValue = 1 / absValue; - return commify(inverseValue.toFixed(0)); + } else if (absValue < 1 && absValue > 0) { + return value.toExponential(2); } return commify(value.toFixed(0)); }This change uses scientific notation for small positive values, which is more intuitive and maintains the sign of the original value.
Likely invalid or redundant comment.
261-317:⚠️ Potential issueAvoid using index as key in map functions
The render method has been updated to include new functionality for time-framed stats and time range selection. However, there's a potential issue with using the index as the key in map functions.
Consider using a more stable and unique identifier as the key for mapped elements. For example:
-{stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => { +{stats.map(({ title, coinId, getText, getSubtext, color, icon }) => { const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined; return ( <StatDisplay - key={i} + key={title} // Assuming title is unique, otherwise consider adding a unique id to each stat {...{ title, color, icon }} text={data ? getText(data.court) : <StyledSkeleton />} subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)} /> ); })} // ... (similar change for timeframedStats map)Using a unique identifier as the key helps React efficiently update the DOM and avoid potential issues with component state.
Likely invalid or redundant comment.
227-260:⚠️ Potential issueRemove console.log statements and improve error handling
The new functionality for time range selection and data fetching is well-implemented. However, there are a couple of areas that could be improved:
- Remove console.log statements.
- Enhance error handling in the useMemo hook.
Apply the following changes:
const foundCourt = useMemo(() => { if (timeframedCourtData?.diffCourts) { - const foundCourt = timeframedCourtData?.diffCourts.find((c) => c.id === id); - console.log({ foundCourt }); - return foundCourt; + return timeframedCourtData.diffCourts.find((c) => c.id === id); } else { - console.log("Court not found or diffCourts not available"); return undefined; } }, [timeframedCourtData, id]);These changes remove unnecessary console.log statements and simplify the logic. Consider adding error handling or logging if the court is not found, depending on your application's requirements.
Likely invalid or redundant comment.
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- web/src/components/StatDisplay.tsx (1 hunks)
- web/src/pages/Courts/CourtDetails/Stats.tsx (3 hunks)
- web/src/pages/Courts/CourtDetails/index.tsx (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- web/src/components/StatDisplay.tsx
- web/src/pages/Courts/CourtDetails/index.tsx
🔇 Additional comments (2)
web/src/pages/Courts/CourtDetails/Stats.tsx (2)
34-50: New styled components look good and follow existing patterns.The new styled components for time display, selection, and the
StyledAccordionare well-organized and consistent with the existing styling approach. They provide a clean separation of concerns for the UI elements.Also applies to: 69-94
Line range hint
1-320: Overall, great improvements to the Stats componentThe changes to the Stats component significantly enhance its functionality and user experience. The addition of time-based filtering, new statistics, and improved UI elements (like the Accordion and DropdownSelect) make the component more informative and interactive.
Key improvements:
- New time-framed statistics and filtering options.
- Better organization of stats using the Accordion component.
- Enhanced number formatting with the
beautifyStatNumberfunction.The suggested refinements (improving type safety, optimizing the useMemo hook, and addressing key usage in map functions) will further enhance the code quality and performance.
Great job on these enhancements!
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (2)
web/src/pages/Courts/CourtDetails/Stats.tsx (2)
1-15: New imports enhance functionality, but consider organizing themThe new imports add valuable functionality to the component. However, the import statements could be better organized for improved readability.
Consider grouping the imports by type (React, styled-components, icons, utils, components) and sorting them alphabetically within each group. This can improve code maintainability and readability.
69-94: Consider simplifying styled components to reduce redundancyThe styled components for time display are well-structured, but there's some redundancy that could be simplified.
Consider refactoring the
TimeDisplayContainerand its derivatives as follows:const TimeDisplayContainer = styled.div` display: flex; flex-direction: row; align-items: center; gap: 8px; padding-top: ${responsiveSize(12, 20)}; `; const AllTimeContainer = styled(TimeDisplayContainer)``; const TimeSelectorContainer = styled(TimeDisplayContainer)` padding-top: 12px; `;This change reduces redundancy while maintaining the specific styling for
TimeSelectorContainer.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- web/src/hooks/queries/useHomePageBlockQuery.ts (6 hunks)
- web/src/pages/Courts/CourtDetails/Stats.tsx (3 hunks)
🧰 Additional context used
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- web/src/pages/Courts/CourtDetails/Stats.tsx (3 hunks)
🧰 Additional context used
🔇 Additional comments (6)
web/src/pages/Courts/CourtDetails/Stats.tsx (6)
1-15: New imports enhance component functionalityThe additional imports, including new icons and the
useHomePageExtraStatshook, support the enhanced functionality of theStatscomponent. This is a positive change that allows for more detailed and interactive statistics display.
30-32: New utility imports improve code qualityThe addition of
commifyfrom utils and theAccordionandDropdownSelectcomponents from the UI library enhances the functionality and improves code reusability.
34-50: Styled Accordion improves UI consistencyThe
StyledAccordioncomponent ensures consistent styling with the rest of the application. The use of theme variables is a good practice for maintaining a cohesive design.
188-205: Well-structured interface and constant for time-based statisticsThe
ITimeframedStatinterface andtimeRangesconstant are well-defined and provide good type safety for the new time-based statistics feature. The structure allows for easy extension of time ranges in the future.
230-272: Well-structured timeframed statisticsThe
timeframedStatsarray is well-structured and provides clear, type-safe definitions for each statistic. The use of thebeautifyStatNumberfunction ensures consistent formatting across all stats.
Line range hint
1-329: Overall improvements to the Stats component with minor suggestionsThe Stats component has been significantly enhanced with the addition of time-based statistics and a time range selector. These changes improve the functionality and user experience of the component.
Some positive aspects of the changes:
- The introduction of timeframed statistics provides more detailed insights.
- The time range selector allows users to view statistics for different periods.
- The use of the
useHomePageExtraStatshook for fetching timeframed data is a good approach.Minor suggestions for improvement:
- Remove console.log statements from the
useMemohook.- Consider extracting rendering logic into separate functions for better readability.
- Use unique identifiers as keys in map functions instead of array indices.
- Refine the
beautifyStatNumberfunction for better handling of edge cases.Overall, these changes represent a significant improvement to the Stats component, with only minor refinements needed.
kemuru
changed the title
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (3)
web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx (1)
10-10: LGTM: Added commify utility for improved number formattingThe addition of the
commifyutility function is a good improvement for formatting large numbers. This will enhance the readability of stake amounts.Consider grouping related imports together. You could move this import next to other utility imports if there are any, or consider creating a separate imports section for utility functions.
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup.tsx (1)
82-100: Improve accessibility by adding ARIA roles and labelsConsider adding ARIA roles and accessible labels to improve accessibility for users relying on assistive technologies.
For example, update the
SimulatorPopupContainer:<SimulatorPopupContainer + role="dialog" + aria-label="Staking Simulator" > {/* content */} </SimulatorPopupContainer>web/src/pages/Courts/CourtDetails/StakePanel/index.tsx (1)
126-127: AccessjurorBalanceproperties using descriptive keys instead of array indicesAccessing
jurorBalanceusing an index (e.g.,jurorBalance?.[2]) reduces code readability and can be error-prone. IfjurorBalanceis an object or a tuple, consider accessing properties using descriptive keys or restructuring it to enhance clarity.For example:
- stakingAmount={ - !isUndefined(jurorBalance) - ? Number(formatEther(jurorBalance?.[2])) + Number(uncommify(amount)) - : Number(uncommify(amount)) - } + const jurorStake = jurorBalance?.stake; + stakingAmount={ + !isUndefined(jurorStake) + ? Number(formatEther(jurorStake)) + Number(uncommify(amount)) + : Number(uncommify(amount)) + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx (3 hunks)
- web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup.tsx (1 hunks)
- web/src/pages/Courts/CourtDetails/StakePanel/index.tsx (3 hunks)
🧰 Additional context used
🔇 Additional comments (5)
web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx (4)
1-1: LGTM: Improved type safety with FC importAdding the
FC(Functional Component) type from React is a good practice. It enhances type safety and makes the component's type more explicit.
68-72: LGTM: Improved type safety with interface and FC implementationThe addition of the
IJurorBalanceDisplayinterface and the updated component signature usingFC<IJurorBalanceDisplay>significantly improve type safety. This change:
- Explicitly defines the expected props (
jurorBalance).- Ensures that the component is correctly typed as a Functional Component.
- Aligns with TypeScript best practices for React components.
These improvements will help catch potential errors at compile-time and make the code more maintainable.
103-103: LGTM: Improved number formatting for better readabilityThe use of the
commifyfunction to format the juror's balance improves the readability of large numbers. This change enhances the user experience by making stake amounts easier to read at a glance.
Line range hint
1-122: Overall assessment: Valuable improvements in type safety and readabilityThe changes in this file contribute positively to the PR objectives by enhancing the
JurorBalanceDisplaycomponent. Key improvements include:
- Better type safety through the use of TypeScript interfaces and the FC type.
- Improved number formatting for better readability of stake amounts.
- Consistent use of imported utilities.
These changes will lead to more maintainable code and an improved user experience. The modifications align well with modern React and TypeScript best practices.
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup.tsx (1)
64-71:⚠️ Potential issueAdd dependency to
useEffectto prevent unnecessary updatesThe
useEffecthook depends onfoundCourt, but it's not included in the dependency array. This may cause the effect to miss updates whenfoundCourtchanges.Apply this diff to include
foundCourtin the dependencies:useEffect(() => { if (timeframedCourtData?.data?.courts) { const foundCourt = timeframedCourtData?.data?.courts.find( (c) => c.id === id ); if (foundCourt) { setCourtData(foundCourt); } } -}, [timeframedCourtData, id]); +}, [timeframedCourtData, id, foundCourt]);Likely invalid or redundant comment.
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup.tsx
Outdated
Show resolved
Hide resolved
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup.tsx
Outdated
Show resolved
Hide resolved
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup.tsx
Outdated
Show resolved
Hide resolved
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup.tsx
Outdated
Show resolved
Hide resolved
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (7)
web/src/components/Divider.tsx (1)
3-3: Add JSDoc documentation for the Divider component.Consider adding documentation to describe the component's purpose and usage.
Add the following documentation above the component:
+/** + * A horizontal divider line that uses the theme's stroke color. + * Used to create visual separation between content sections. + */ export const Divider = styled.hr`web/src/components/Popup/Description/SwapSuccess.tsx (1)
54-56: Consider using more explicit margin properties.While the current margin shorthand works, using individual margin properties would make the styling more maintainable and explicit about which edges are being affected.
const StyledDivider = styled(Divider)` - margin: ${responsiveSize(32, 64)} 0px 0px; + margin-top: ${responsiveSize(32, 64)}; + margin-bottom: 0; `;web/src/pages/Cases/CaseDetails/Overview/index.tsx (2)
20-20: LGTM! Good architectural improvement.The replacement of a locally styled Divider with a shared component from
components/Dividerimproves code maintainability and UI consistency across the application.This change aligns well with the DRY principle and component reusability best practices. Having a single source of truth for the Divider component will make future styling updates more manageable.
Consider adding margin to the Divider components for consistent spacing
The base Divider component has no margin (margin: 0), but in other parts of the application, StyledDivider variants are used with specific margins to create proper spacing between sections. To maintain visual consistency, you should consider adding appropriate margins to these Divider instances, similar to other implementations in the codebase:
- In FinalDecision: margin of 16-32px (responsive)
- In SwapSuccess: margin of 32-64px (responsive)
- In SimulatorPopup: margin of 12px 0 8px 0
🔗 Analysis chain
Line range hint
52-61: Verify the visual consistency of the new Divider component.The Divider is used to separate three main sections: DisputeContext, Verdict, and DisputeInfo. Since we're switching from a custom-styled divider to a shared component, we should ensure the spacing and visual appearance remain consistent with the design.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for other usages of the Divider component to verify consistent implementation rg -l "import.*Divider.*from.*components/Divider" --type tsxLength of output: 90
Script:
#!/bin/bash # Search for Divider component imports with broader pattern and without file type restriction rg -l "import.*Divider" # Search for Divider usage in the codebase rg "Divider" # Look for the Divider component file itself fd "Divider"Length of output: 2130
Script:
#!/bin/bash # Let's check the Divider component implementation cat web/src/components/Divider.tsx # Let's also check the styled variants to understand the customizations rg "StyledDivider = styled\(Divider\)" -A 3Length of output: 1260
web/src/components/DisputePreview/DisputeContext.tsx (1)
Line range hint
63-65: Consider centralizing error message handling.The error message logic could be extracted into a separate utility function or component for better reusability across the application. This would help maintain consistency in error handling and make future updates easier.
Consider creating a dedicated error message component:
interface ErrorMessageProps { isRpcError: boolean; defaultMessage?: string; } const ErrorMessage: React.FC<ErrorMessageProps> = ({ isRpcError, defaultMessage = INVALID_DISPUTE_DATA_ERROR, }) => { return <>{isRpcError ? RPC_ERROR : defaultMessage}</>; };web/src/components/Verdict/FinalDecision.tsx (1)
Line range hint
82-90: Consider extracting button text logic to improve maintainability.The
buttonTextlogic handles multiple conditions and could be extracted into a separate function or hook for better maintainability and testability. This would make the component easier to understand and maintain.Consider refactoring like this:
const useButtonText = (params: { wasDrawn: boolean; isDisconnected: boolean; isCommitPeriod: boolean; isVotingPeriod: boolean; commited: boolean; isHiddenVotes: boolean; hasVoted: boolean; }) => { return useMemo(() => { const { wasDrawn, isDisconnected, isCommitPeriod, isVotingPeriod, commited, isHiddenVotes, hasVoted, } = params; if (!wasDrawn || isDisconnected) return "Check how the jury voted"; if (isCommitPeriod && !commited) return "Commit your vote"; if (isVotingPeriod && isHiddenVotes && commited && !hasVoted) return "Reveal your vote"; if (isVotingPeriod && !isHiddenVotes && !hasVoted) return "Cast your vote"; return "Check how the jury voted"; }, [params]); };web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx (1)
32-42: Enhance accessibility with semantic HTML elements.The
ContainerandItemsContainershould use semantic HTML elements for better accessibility. TheItemsContainerparticularly should be a list since it contains repeating items.-const Container = styled.div` +const Container = styled.section` -const ItemsContainer = styled.div` +const ItemsContainer = styled.ul` display: flex; flex-direction: column; gap: 8px 0; margin: 24px 0 12px 0; + list-style: none; + padding: 0; `;Also applies to: 44-49
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (10)
- web/src/components/DisputePreview/DisputeContext.tsx (1 hunks)
- web/src/components/Divider.tsx (1 hunks)
- web/src/components/Popup/Description/SwapSuccess.tsx (3 hunks)
- web/src/components/Verdict/FinalDecision.tsx (3 hunks)
- web/src/pages/Cases/CaseDetails/Overview/index.tsx (1 hunks)
- web/src/pages/Courts/CourtDetails/Info.tsx (1 hunks)
- web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx (1 hunks)
- web/src/pages/Courts/CourtDetails/Stats.tsx (3 hunks)
- web/src/pages/Courts/CourtDetails/index.tsx (2 hunks)
- web/src/pages/Resolver/Preview/index.tsx (1 hunks)
✅ Files skipped from review due to trivial changes (1)
- web/src/pages/Courts/CourtDetails/index.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- web/src/pages/Courts/CourtDetails/Info.tsx
🔇 Additional comments (11)
web/src/components/Popup/Description/SwapSuccess.tsx (3)
10-10: LGTM: Import statement follows the codebase conventions.The import is properly organized with other component imports and correctly destructured.
83-83: LGTM: Proper implementation of the styled divider.The StyledDivider is appropriately placed to separate the content sections.
Line range hint
67-67: Verify network URL configuration.The Etherscan URL is hardcoded to Sepolia network. Consider making this configurable based on the network environment to support multiple networks.
web/src/pages/Resolver/Preview/index.tsx (2)
16-16: LGTM! Good refactoring to use the shared Divider component.This change improves code maintainability by using a standardized Divider component instead of a local styled definition.
16-16: Verify visual consistency with other Divider implementations.Since this is part of a larger refactoring effort replacing styled Divider components, let's ensure consistent styling across all implementations.
Also applies to: 65-65
✅ Verification successful
Divider component implementation is consistent across all usages
The verification shows that:
- The Divider component is a simple styled
hrelement with consistent styling- All usages across the codebase use it without any custom props (
<Divider />)- The implementation ensures visual consistency through theme-based styling (
theme.stroke)The refactoring maintains uniform appearance across all implementations in:
- Court details
- Case details
- Resolver preview
- Dispute preview
- Popup components
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Find all files using the new Divider component to verify consistent implementation # Test 1: Find all imports of the Divider component echo "=== Files importing Divider component ===" rg "import.*Divider.*from.*components/Divider" --type tsx # Test 2: Find all usages of Divider in JSX to verify consistent props echo -e "\n=== Divider component usage patterns ===" rg "<Divider.*?>" --type tsxLength of output: 336
Script:
#!/bin/bash # Description: Find all files using the new Divider component to verify consistent implementation # Test 1: Find all imports of the Divider component echo "=== Files importing Divider component ===" rg "import.*Divider.*from.*components/Divider" # Test 2: Find all usages of Divider in JSX to verify consistent props echo -e "\n=== Divider component usage patterns ===" rg "<Divider[^>]*>" # Test 3: Let's also check the Divider component implementation echo -e "\n=== Divider component implementation ===" fd Divider.tsx --exec cat {}Length of output: 1429
web/src/components/DisputePreview/DisputeContext.tsx (1)
16-16: LGTM! Good refactoring to use shared component.The change to import the shared Divider component instead of using a local styled component definition improves code reusability and maintainability.
Let's verify the removal of the local Divider styled component and check for other potential local definitions:
✅ Verification successful
The results show that:
- No local
Dividerstyled component exists in DisputeContext.tsx (no matches for the pattern)- The shared component exists at
web/src/components/Divider.tsxLet's verify the shared component implementation to ensure it's a proper styled component:
Verified: Import change is correct and local component was properly removed
The shared Divider component is properly implemented as a styled component and the local definition has been successfully removed from DisputeContext.tsx. This refactoring improves code maintainability by centralizing the component definition.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the removal of local Divider styled component and check for consistency # Test 1: Check if there are any remaining local Divider styled components rg "const Divider = styled" "web/src/components/DisputePreview/DisputeContext.tsx" # Test 2: Verify the shared Divider component exists fd "Divider.(tsx|jsx)" "web/src/components"Length of output: 157
Script:
#!/bin/bash # Check the implementation of the shared Divider component cat "web/src/components/Divider.tsx"Length of output: 242
web/src/components/Verdict/FinalDecision.tsx (1)
26-26: LGTM! Good job on improving component consistency.The changes effectively standardize the divider implementation by:
- Using a shared Divider component
- Applying consistent styling through styled-components
- Maintaining responsive design with proper spacing
This aligns well with the project's goal of improving UI consistency.
Also applies to: 58-60, 107-107
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx (2)
159-161: 🛠️ Refactor suggestionEnhance memoization of court data.
The
foundCourtmemoization can be improved by including the court ID in the dependency array.const foundCourt = useMemo(() => { - return timeframedCourtData?.data?.courts?.find((c) => c.id === id); + if (!timeframedCourtData?.data?.courts || !id) return undefined; + return timeframedCourtData.data.courts.find((c) => c.id === id); }, [timeframedCourtData, id]);Likely invalid or redundant comment.
169-180: 🛠️ Refactor suggestionMemoize total calculations to prevent unnecessary recalculations.
The total calculations should be memoized to prevent recalculation on every render.
+const totals = useMemo(() => { + if (!courtCurrentEffectiveStake) return { votes: undefined, cases: undefined, rewards: undefined }; + + return { + votes: !isUndefined(currentTreeVotesPerPnk) ? courtCurrentEffectiveStake * currentTreeVotesPerPnk : undefined, + cases: !isUndefined(currentTreeDisputesPerPnk) ? courtCurrentEffectiveStake * currentTreeDisputesPerPnk : undefined, + rewards: !isUndefined(currentTreeExpectedRewardPerPnk) ? courtCurrentEffectiveStake * currentTreeExpectedRewardPerPnk : undefined, + }; +}, [courtCurrentEffectiveStake, currentTreeVotesPerPnk, currentTreeDisputesPerPnk, currentTreeExpectedRewardPerPnk]); + +const { votes: totalVotes, cases: totalCases, rewards: totalRewards } = totals;Likely invalid or redundant comment.
web/src/pages/Courts/CourtDetails/Stats.tsx (2)
246-307: LGTM! Well-structured implementation of timeframed statistics.The implementation includes:
- Clear tooltips explaining each statistic
- Proper error handling for undefined values
- Consistent formatting using beautifyStatNumber
219-228: LGTM! Well-documented time range configuration.The time ranges are well-defined with clear comments explaining why certain options are commented out for future use.
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Outside diff range and nitpick comments (6)
web/src/utils/beautifyStatNumber.ts (2)
1-22: Consider adding JSDoc documentation.The function would benefit from comprehensive documentation explaining its behavior, parameters, and return values.
Add JSDoc documentation:
+/** + * Formats a number into a human-readable string with appropriate suffix (B, M, K). + * For numbers between 0 and 1, can optionally return the inverse value. + * + * @param value - The number to format + * @param invertValue - If true and value is between 0 and 1, returns the inverse + * @returns A formatted string representation of the number + * + * @example + * beautifyStatNumber(1500000) // Returns "1.50M" + * beautifyStatNumber(0.5, true) // Returns "2" + */ export function beautifyStatNumber(value: number, invertValue: boolean = false): string {
1-22: Consider adding unit tests.Given the various number ranges and edge cases, this utility function should have comprehensive test coverage.
Would you like me to help create a test suite for this function? I can generate test cases covering:
- Different number ranges (billions, millions, thousands)
- Numbers between 0 and 1 with invertValue
- Edge cases (NaN, Infinity, -0)
- Decimal precision cases
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx (3)
1-31: Consider organizing imports into logical groups.The imports could be organized into logical groups with comments for better maintainability:
// React and routing import React, { useMemo } from "react"; import { useParams } from "react-router-dom"; import { useAccount } from "wagmi"; // Styling and UI components import styled, { css } from "styled-components"; import Skeleton from "react-loading-skeleton"; import { landscapeStyle } from "styles/landscapeStyle"; // Constants and utilities import { CoinIds } from "consts/coingecko"; import { formatUSD } from "utils/format"; import { isUndefined } from "utils/index"; import { beautifyStatNumber } from "utils/beautifyStatNumber"; // Hooks and queries import { useCoinPrice } from "hooks/useCoinPrice"; import { useHomePageExtraStats } from "queries/useHomePageExtraStats"; import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery"; // SVG icons import GavelIcon from "svgs/icons/gavel.svg"; // ... other icons // Local components import Header from "./Header"; // ... other local components
105-107: Improve type safety for styled component props.Consider using a proper TypeScript interface for the props:
+interface ArrowIconProps { + isStaking: boolean; +} -const StyledArrowRightIcon = styled(ArrowRightIcon)<{ isStaking: boolean }>` +const StyledArrowRightIcon = styled(ArrowRightIcon)<ArrowIconProps>` fill: ${({ theme, isStaking }) => (isStaking ? theme.success : theme.warning)}; `;
249-251: Extract constants and improve loading states.Consider these improvements:
- Move tooltip messages to a constants file
- Define skeleton widths as constants
- Use a more semantic loading state
+const TOOLTIP_MESSAGES = { + rewards: "Estimated rewards in USD, assuming 100% coherent voting. If other jurors vote incoherently, additional rewards in the form of PNK tokens may be earned beyond this estimate.", +}; +const SKELETON_SIZES = { + value: 32, +}; -<Skeleton width={32} /> +<Skeleton width={SKELETON_SIZES.value} />Also applies to: 273-275
web/src/pages/Courts/CourtDetails/Stats.tsx (1)
188-200: Add JSDoc documentation for the new interfaces.Consider adding JSDoc comments to document the purpose and usage of these interfaces:
+/** + * Represents the data structure for timeframed statistics + */ interface ITimeframedStatData { treeExpectedRewardPerPnk: number; treeVotesPerPnk: number; treeDisputesPerPnk: number; } +/** + * Defines the structure for displaying timeframed statistics + * @property title - The display title, can be a string or React node for tooltip support + * @property coinId - Optional identifier for cryptocurrency price lookups + * @property getText - Function to format the statistic value for display + * @property color - Color theme for the stat display + * @property icon - Icon component to display alongside the stat + */ interface ITimeframedStat { title: string | React.ReactNode; coinId?: number; getText: (data: ITimeframedStatData) => string; color: IStatDisplay["color"]; icon: React.FC<React.SVGAttributes<SVGElement>>; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx (1 hunks)
- web/src/pages/Courts/CourtDetails/Stats.tsx (3 hunks)
- web/src/utils/beautifyStatNumber.ts (1 hunks)
🔇 Additional comments (2)
web/src/utils/beautifyStatNumber.ts (2)
3-4: LGTM: Clear function signature with good parameter naming.The function signature is well-defined with appropriate types and a sensible default for the optional parameter.
6-8: 🛠️ Refactor suggestionConsider handling potential floating-point precision issues.
When dealing with very large numbers (billions), JavaScript's floating-point arithmetic might cause precision issues.
Consider using BigInt for more precise calculations with large numbers:
- if (absValue >= 1e9) { - return `${commify((value / 1e9).toFixed(2))}B`; + if (absValue >= 1e9) { + const result = BigInt(Math.round(value * 100)) / BigInt(1e9 * 100); + return `${commify(result.toFixed(2))}B`;
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (1)
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx (1)
32-42: Enhance component accessibility with semantic HTML and ARIA attributes.The styled components should leverage semantic HTML elements and ARIA attributes for better accessibility:
-const Container = styled.div` +const Container = styled.section` /* ... */ `; -const ItemsContainer = styled.div` +const ItemsContainer = styled.ul` /* ... */ `; -const SimulatorItem = styled.div` +const SimulatorItem = styled.li` /* ... */ `; -const LeftContent = styled.div` +const LeftContent = styled.span` /* ... */ ${landscapeStyle(/* ... */)} `;Also applies to: 51-56, 71-82
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (1)
web/src/pages/Courts/CourtDetails/StakePanel/SimulatorPopup/index.tsx (1)
123-287: Add unit tests for the SimulatorPopup component.
The component contains complex calculations and multiple data dependencies that should be thoroughly tested.
Consider adding tests for:
- Calculation accuracy with different stake amounts
- Loading states and error handling
- Edge cases with undefined or zero values
- UI interaction and rendering
Would you like me to help generate the test suite for this component?
|
Code Climate has analyzed commit 4ceb55a and detected 28 issues on this pull request. Here's the issue category breakdown:
View more on Code Climate. |
|
PR-Codex overview
This PR focuses on enhancing the
CourtDetailscomponent and related functionalities by introducing new features, improving styling, and optimizing data handling for juror stakes and statistics.Detailed summary
effectiveStake,staked,locked, anddelayedfields in the GraphQL schema.Dividercomponent for consistent styling.Divider.QuantityToSimulatecomponent for displaying staking simulations.Statscomponent to include new statistics related to PNK and ETH rewards.Summary by CodeRabbit
Release Notes
New Features
SimulatorPopupcomponent to display statistical information related to juror staking.Statscomponent to display additional court performance statistics, improved number formatting, and added a time range selector.StatDisplaycomponent to support flexible title types and made the subtext property optional.Infocomponent to provide contextual information about past performance.QuantityToSimulateandHeadercomponents for improved simulation interface.Dividercomponent for consistent visual separation across various components.Bug Fixes
StatDisplaycomponent to ensure consistent rendering.Enhancements
jurorStakeDetailsQueryto includeeffectiveStakefor more comprehensive juror data.InputDisplaycomponent for better user experience.StakePanelcomponent by removing unused elements and improving the user interface with the newSimulatorPopup.