feat: new profile page #1871
feat: new profile page #1871
Conversation
…s, style tweaks, refactors
kemuru
changed the title
WalkthroughRenames/refactors juror display into a configurable Changes
Sequence Diagram(s)mermaid Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
Comment |
❌ Deploy Preview for kleros-v2-university failed. Why did it fail? →
|
❌ Deploy Preview for kleros-v2-neo failed. Why did it fail? →
|
✅ Deploy Preview for kleros-v2-testnet ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
❌ Deploy Preview for kleros-v2-testnet-devtools 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: 3
🧹 Nitpick comments (12)
web/src/pages/Profile/JurorInfo/BottomContent/Coherence.tsx (1)
31-31: Consider utilizing additional properties from ILevelCriteria.The
userLevelDatanow has access to additional properties likeminDisputes,minCoherencePercentage, andmaxCoherencePercentage. Consider displaying these values to provide users with more context about their current level and what they need to achieve for the next level.Example enhancement:
<Container> <small>{userLevelData.title}</small> <label>Level {userLevelData.level}</label> + <small>Min. Disputes: {userLevelData.minDisputes}</small> + <small>Required Coherence: {userLevelData.minCoherencePercentage}%-{userLevelData.maxCoherencePercentage}%</small> <CircularProgress progress={parseFloat(((totalCoherentVotes / Math.max(totalResolvedVotes, 1)) * 100).toFixed(2))} />web/src/pages/Profile/index.tsx (2)
89-96: Consider memoizing the tab callback function.The tab callback function is recreated on every render. Consider memoizing it with useCallback:
- const [currentTab, setCurrentTab] = useState(0); + const [currentTab, setCurrentTab] = useState(0); + const handleTabChange = useCallback((n: number) => setCurrentTab(n), []);Then update the callback prop:
- <StyledTabs currentValue={currentTab} items={TABS} callback={(n) => setCurrentTab(n)} /> + <StyledTabs currentValue={currentTab} items={TABS} callback={handleTabChange} />
99-110: Consider breaking down props for better maintainability.The StyledCasesDisplay component receives many props, some through object spreading. For better maintainability and type safety, consider explicitly listing all props:
<StyledCasesDisplay title="Cases Drawn" disputes={userData?.user !== null ? (disputesData?.user?.disputes as DisputeDetailsFragment[]) : []} numberDisputes={totalCases} numberClosedDisputes={totalResolvedCases} totalPages={totalPages} currentPage={pageNumber} setCurrentPage={(newPage: number) => navigate(`${location}/${newPage}/${order}/${filter}?${searchParams.toString()}`) } - {...{ casesPerPage }} + casesPerPage={casesPerPage} />web/src/pages/Profile/Stakes/index.tsx (1)
Line range hint
54-63: Refactor duplicate filter condition and improve type safety.
- The filter condition
staked > 0is duplicated in the code.- The court name nullish coalescing could be handled more elegantly with proper typing.
Consider this improvement:
- {!isStaked && !isLoading ? <StyledLabel>No stakes found</StyledLabel> : null} - {isStaked && !isLoading ? ( - <CourtCardsContainer> - {stakeData?.jurorTokensPerCourts - ?.filter(({ staked }) => staked > 0) - .map(({ court: { id, name }, staked }) => ( - <CourtCard key={id} name={name ?? ""} stake={staked} {...{ id }} /> - ))} - </CourtCardsContainer> - ) : null} + {!isLoading && ( + <> + {!isStaked ? ( + <StyledLabel>No stakes found</StyledLabel> + ) : ( + <CourtCardsContainer> + {stakedCourts?.map(({ court: { id, name }, staked }) => ( + <CourtCard + key={id} + name={name ?? id.toString()} + stake={staked} + {...{ id }} + /> + ))} + </CourtCardsContainer> + )} + </> + )}This refactor:
- Reuses the filtered
stakedCourtsarray- Provides a more meaningful fallback for missing court names
- Simplifies the conditional rendering logic
web/src/pages/Profile/JurorInfo/TopContent/index.tsx (1)
14-16: Add accessibility attributes to label.The StyledLabel component should include appropriate ARIA attributes for better accessibility.
const StyledLabel = styled.label` font-size: 14px; + &[aria-label] { + cursor: default; + } `;Usage:
- <StyledLabel> + <StyledLabel aria-label="Total resolved disputes">web/src/pages/Profile/JurorInfo/BottomContent/PixelArt.tsx (1)
Line range hint
50-60: Enhance image handling and accessibility.The component could benefit from better error handling and accessibility improvements:
- Add error handling for image loading failures
- Make alt text more descriptive and customizable
interface IPixelArt { level: number; width: number | string; height: number | string; + altText?: string; } const PixelArt: React.FC<IPixelArt> = ({ level, width, height, + altText = `Level ${level} Juror Pixel Art`, }) => { const [imageLoaded, setImageLoaded] = useState(false); + const [error, setError] = useState(false); return ( <Container> - {!imageLoaded && <StyledSkeleton width={width} height={height} />} + {!imageLoaded && !error && <StyledSkeleton width={width} height={height} />} <StyledImage src={images[level]} - alt="Pixel Art per Level" + alt={altText} onLoad={() => setImageLoaded(true)} + onError={() => setError(true)} show={imageLoaded} width={width} height={height} /> + {error && <div>Failed to load image</div>} </Container> ); };web/src/pages/Profile/JurorInfo/BottomContent/index.tsx (1)
45-50: Consider adding prop types for child components.The interface IBottomContent could be more explicit about the required props for child components.
+ interface ICoherenceProps { + isMiniGuide: boolean; + userLevelData: ILevelCriteria; + totalCoherentVotes: number; + totalResolvedVotes: number; + } + interface IJurorRewardsProps { + addressToQuery: `0x${string}`; + } interface IBottomContent { userLevelData: ILevelCriteria; totalCoherentVotes: number; totalResolvedVotes: number; addressToQuery: `0x${string}`; + coherenceProps?: Partial<ICoherenceProps>; + jurorRewardsProps?: Partial<IJurorRewardsProps>; }web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx (1)
Line range hint
37-41: Update address prop type for consistency.The address prop type should match the hexadecimal format used in other components.
interface IDesktopCard { rank?: number; - address: string; + address: `0x${string}`; totalCoherentVotes: string; totalResolvedVotes: string; totalResolvedDisputes: string; }web/src/pages/Profile/JurorInfo/StakingRewards.tsx (1)
9-9: Consider removing commented code.The commented code includes
TokenRewardsimport and several UI components that are no longer in use. If these components are truly deprecated, they should be removed rather than left as comments.-// import TokenRewards from "./TokenRewards"; - // <Container> - // <WithHelpTooltip place="bottom" {...{ tooltipMsg }}> - // <label> - // Staking Rewards: <small>APY 6%</small> - // </label> - // Coming soon - // </WithHelpTooltip> - // <TokenRewards token="PNK" amount="10,000" value="8,783" /> - // <ClaimPNK /> - // </Container>Also applies to: 55-64
web/src/components/JurorLink.tsx (1)
54-56: Consider memoizing the chain data.The
getChainfunction is called on every render. Consider memoizing the chain data separately to optimize performance.+ const chain = useMemo(() => getChain(DEFAULT_CHAIN), []); const addressExplorerLink = useMemo(() => { - return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/address/${address}`; + return `${chain?.blockExplorers?.default.url}/address/${address}`; }, [address]);web/src/pages/Profile/JurorInfo/BottomContent/JurorRewards.tsx (1)
18-18: Consider simplifying responsive styles.The Container uses a landscape style for alignment. Consider using a media query or flex-wrap for simpler responsive behavior.
const Container = styled.div` display: flex; flex-direction: column; align-items: center; width: auto; gap: 24px; - ${landscapeStyle( - () => css` - align-items: flex-start; - ` - )} + @media (orientation: landscape) { + align-items: flex-start; + } `;Also applies to: 20-27
web/src/pages/Profile/JurorInfo/Header.tsx (1)
76-76: LGTM! Consider dynamic title.The header simplification aligns well with the profile page restructuring. The removal of redundant address display improves component focus.
Consider making the title dynamic to show the juror's level:
- <StyledTitle>Juror Profile</StyledTitle> + <StyledTitle>Level {levelNumber} Juror Profile</StyledTitle>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
web/src/components/JurorLink.tsx(2 hunks)web/src/components/Popup/MiniGuides/JurorLevels.tsx(1 hunks)web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx(2 hunks)web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx(2 hunks)web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx(1 hunks)web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx(2 hunks)web/src/pages/Profile/JurorInfo/BottomContent/Coherence.tsx(2 hunks)web/src/pages/Profile/JurorInfo/BottomContent/JurorRewards.tsx(3 hunks)web/src/pages/Profile/JurorInfo/BottomContent/PixelArt.tsx(3 hunks)web/src/pages/Profile/JurorInfo/BottomContent/index.tsx(1 hunks)web/src/pages/Profile/JurorInfo/Header.tsx(2 hunks)web/src/pages/Profile/JurorInfo/StakingRewards.tsx(2 hunks)web/src/pages/Profile/JurorInfo/TopContent/index.tsx(1 hunks)web/src/pages/Profile/JurorInfo/index.tsx(2 hunks)web/src/pages/Profile/Stakes/Header.tsx(1 hunks)web/src/pages/Profile/Stakes/index.tsx(4 hunks)web/src/pages/Profile/index.tsx(4 hunks)web/src/utils/userLevelCalculation.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx
- web/src/components/Popup/MiniGuides/JurorLevels.tsx
⏰ Context from checks skipped due to timeout of 90000ms (16)
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-neo
- GitHub Check: Redirect rules - kleros-v2-university
- GitHub Check: Header rules - kleros-v2-neo
- GitHub Check: Header rules - kleros-v2-university
- GitHub Check: Pages changed - kleros-v2-neo
- GitHub Check: Pages changed - kleros-v2-university
- GitHub Check: contracts-testing
- GitHub Check: Analyze (javascript)
- GitHub Check: SonarCloud
- GitHub Check: Mend Security Check
🔇 Additional comments (19)
web/src/utils/userLevelCalculation.ts (1)
1-1: LGTM! Good improvement in type visibility.Making the
ILevelCriteriainterface explicitly exported improves code organization and type safety across the codebase.web/src/pages/Profile/JurorInfo/BottomContent/Coherence.tsx (1)
4-8: LGTM! Import changes look good.The imports are properly organized and include the necessary dependencies.
web/src/pages/Profile/index.tsx (2)
38-48: LGTM! Styling changes follow responsive design patterns.The margin adjustments and new StyledTabs component are well-implemented, maintaining consistency with the project's responsive design approach.
58-62: Verify the implementation plan for the Votes tab.The Votes tab is currently a placeholder rendering null. Consider either:
- Adding a TODO comment to track this pending implementation
- Adding a "Coming Soon" message for better UX
- Removing the tab if it's not planned for this PR
Also applies to: 112-112
web/src/pages/Profile/Stakes/Header.tsx (1)
63-63: LGTM! Simplified title improves code clarity.The static title "Stakes" aligns well with the new profile page structure and tab-based navigation mentioned in the PR objectives.
web/src/pages/Profile/Stakes/index.tsx (3)
17-17: LGTM! Adjusted margin improves visual spacing.The updated margin provides better vertical rhythm in the layout.
37-41: LGTM! Improved semantic naming.Renaming from
CourtstoStakesbetter reflects the component's purpose and aligns with the new profile page structure.
68-68: LGTM! Updated export matches new component name.web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx (1)
60-60: Add isInternalLink prop to JurorLink.The JurorLink component should specify whether it's an internal or external link.
- <JurorLink address={address} /> + <JurorLink address={address} isInternalLink={true} />Let's verify the JurorLink component's usage across the codebase:
web/src/pages/Profile/JurorInfo/StakingRewards.tsx (2)
14-15: LGTM! Improved layout spacing.The container's alignment and gap properties have been updated to provide better visual spacing and centering.
50-51: Verify if "Coming soon" is the intended placeholder.The component has been simplified to show only a "Coming soon" message. Consider:
- Adding a more descriptive message about when this feature will be available
- Including a progress indicator or estimated timeline
- Adding a link to the KIP for more information
Also applies to: 67-69
web/src/components/JurorLink.tsx (2)
43-45: LGTM! Clear interface definition.The interface has been renamed to match the component and includes an optional boolean prop for controlling link behavior.
61-67: LGTM! Secure external link handling.The component correctly implements security best practices for external links by adding
noopener noreferrerand_blanktarget attributes.web/src/pages/Profile/JurorInfo/index.tsx (3)
15-17: LGTM! Improved component organization.The imports reflect a better separation of concerns with distinct TopContent and BottomContent components.
26-26: LGTM! Consistent spacing.The Card's gap and padding have been adjusted to provide more consistent spacing throughout the component.
Also applies to: 29-29
52-54: Verify prop spreading.The component spreads multiple props to BottomContent. Consider explicitly listing the required props to improve maintainability and type safety.
- <BottomContent {...{ userLevelData, totalCoherentVotes, totalResolvedVotes, addressToQuery }} /> + <BottomContent + userLevelData={userLevelData} + totalCoherentVotes={totalCoherentVotes} + totalResolvedVotes={totalResolvedVotes} + addressToQuery={addressToQuery} + />web/src/pages/Profile/JurorInfo/BottomContent/JurorRewards.tsx (1)
29-33: LGTM! Improved token rewards layout.The new TokenRewardsContainer provides better organization for multiple token rewards with consistent spacing.
Also applies to: 58-62
web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx (1)
11-11: LGTM! Verify link structure consistency.The replacement of
JurorTitlewithJurorLinkis consistent with the profile page restructuring. The component is properly wrapped inStyledInternalLinkwith the correct profile path.Let's verify the link structure consistency across the codebase:
Also applies to: 95-95
✅ Verification successful
Link structure verified - consistent implementation
All profile links in the codebase follow the uniform pattern
/profile/1/desc/all?address=${address}, maintaining consistency across components.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for consistent profile link structure across the codebase # Expected pattern: /profile/1/desc/all?address=<address> rg -g '*.{ts,tsx}' '/profile/\d+/\w+/\w+\?address='Length of output: 368
web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx (1)
14-14: Verify link behavior consistency.While the replacement of
JurorTitlewithJurorLinkis correct, the implementation differs fromAccordionTitle.tsxwhereJurorLinkis wrapped inStyledInternalLink.Let's verify the link behavior consistency:
Also applies to: 100-100
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
web/src/pages/Profile/JurorCard/BottomContent/index.tsx (1)
32-43: Remove redundant flex-direction property.The
flex-directionproperty is declared twice in theLeftContentstyled component. The first declaration at line 34 is overridden by the second declaration at line 36.const LeftContent = styled.div` display: flex; - flex-direction: row; gap: 48px; flex-direction: column; ${landscapeStyle( () => css` flex-direction: row; ` )} `;web/src/pages/Profile/JurorCard/StakingRewards.tsx (2)
55-64: Remove or document commented code.There's a significant block of commented-out code that includes functionality for displaying staking rewards, token rewards, and claim functionality. If this code will be used in the future, consider:
- Adding a TODO comment explaining when it will be implemented
- Moving it to a separate branch until ready
- Creating an issue to track its implementation
66-70: Consider adding a more informative placeholder.The current "Coming soon" message could be more informative. Consider adding:
- Expected release timeframe
- Link to the KIP mentioned in the tooltip
<Container> <WithHelpTooltip place="bottom" {...{ tooltipMsg }}> <label>Staking Rewards</label> </WithHelpTooltip> - <label>Coming soon</label> + <label>Coming soon - Pending KIP approval</label> </Container>web/src/pages/Profile/Cases/index.tsx (1)
33-36: Consider making casesPerPage configurable.The hardcoded value of 3 for casesPerPage might be better as a prop or configuration value for flexibility.
- const casesPerPage = 3; + const casesPerPage = props.casesPerPage ?? 3;web/src/pages/Profile/index.tsx (1)
91-101: Consider adding loading states for route transitions.While the routing implementation is good, consider adding loading states or suspense boundaries for a better user experience during route transitions.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
web/src/assets/svgs/icons/voted-ballot.svgis excluded by!**/*.svg
📒 Files selected for processing (20)
web/src/app.tsx(1 hunks)web/src/components/EvidenceCard.tsx(1 hunks)web/src/components/JurorLink.tsx(2 hunks)web/src/components/Popup/MiniGuides/JurorLevels.tsx(1 hunks)web/src/layout/Header/navbar/Menu/Settings/General/WalletAndProfile.tsx(1 hunks)web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx(2 hunks)web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx(1 hunks)web/src/pages/Jurors/index.tsx(1 hunks)web/src/pages/Profile/Cases/index.tsx(1 hunks)web/src/pages/Profile/JurorCard/BottomContent/Coherence.tsx(2 hunks)web/src/pages/Profile/JurorCard/BottomContent/JurorRewards.tsx(3 hunks)web/src/pages/Profile/JurorCard/BottomContent/PixelArt.tsx(3 hunks)web/src/pages/Profile/JurorCard/BottomContent/index.tsx(1 hunks)web/src/pages/Profile/JurorCard/Header.tsx(2 hunks)web/src/pages/Profile/JurorCard/StakingRewards.tsx(2 hunks)web/src/pages/Profile/JurorCard/TopContent/index.tsx(1 hunks)web/src/pages/Profile/JurorCard/index.tsx(3 hunks)web/src/pages/Profile/Stakes/index.tsx(5 hunks)web/src/pages/Profile/Votes/index.tsx(1 hunks)web/src/pages/Profile/index.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx
- web/src/components/Popup/MiniGuides/JurorLevels.tsx
- web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx
- web/src/pages/Profile/Stakes/index.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
web/src/pages/Profile/Votes/index.tsx
[error] 2-3: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
⏰ Context from checks skipped due to timeout of 90000ms (16)
- GitHub Check: Redirect rules - kleros-v2-testnet-devtools
- GitHub Check: Header rules - kleros-v2-testnet-devtools
- GitHub Check: Pages changed - kleros-v2-testnet-devtools
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-university
- GitHub Check: Header rules - kleros-v2-university
- GitHub Check: Pages changed - kleros-v2-university
- GitHub Check: contracts-testing
- GitHub Check: SonarCloud
- GitHub Check: Analyze (javascript)
- GitHub Check: Mend Security Check
🔇 Additional comments (27)
web/src/pages/Profile/JurorCard/TopContent/index.tsx (2)
18-21: LGTM! Well-defined interface.The interface uses appropriate types, including a template literal type for the address to ensure it's properly formatted.
23-34: LGTM! Clean implementation with good UX considerations.The component is well-structured with:
- Proper type annotations
- Good conditional rendering
- Appropriate pluralization logic for case counts
web/src/layout/Header/navbar/Menu/Settings/General/WalletAndProfile.tsx (1)
55-57: Verify the new profile route.The simplified profile path aligns with the PR's restructuring objectives. However, let's verify that the new route is properly handled.
web/src/pages/Profile/JurorCard/BottomContent/Coherence.tsx (1)
8-8: Verify ILevelCriteria interface compatibility.The change to use ILevelCriteria looks good, but let's verify the interface compatibility to ensure no breaking changes.
Also applies to: 31-31
✅ Verification successful
Interface compatibility verified.
- The interface definition in
web/src/utils/userLevelCalculation.tsnow correctly includes the fieldslevel,title,minDisputes,minCoherencePercentage, andmaxCoherencePercentage.- Confirmed that the Coherence component (
web/src/pages/Profile/JurorCard/BottomContent/Coherence.tsx) imports and uses the updatedILevelCriteriawithout issues.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify ILevelCriteria interface compatibility # Check the interface definition ast-grep --pattern 'interface ILevelCriteria { $$$ level: number; title: string; $$$ }' # Find all usages of ILevelCriteria rg "ILevelCriteria" --type ts --type tsxLength of output: 607
web/src/pages/Profile/JurorCard/BottomContent/PixelArt.tsx (2)
12-15: LGTM! Clean styling implementation.The Container styled component properly centers its content using flexbox.
Line range hint
50-60: LGTM! Good use of Container for layout.The Container component is properly used to center the image and skeleton loader.
web/src/pages/Profile/JurorCard/BottomContent/index.tsx (2)
45-50: LGTM!The interface is well-defined with appropriate types for all required props.
52-68: Verify if StakingRewards component requires props.The component implementation looks good. However,
StakingRewardsis rendered without any props. Please verify if it needs any props from the parent component.✅ Verification successful
I'll generate a new script to search more broadly for the definition of the
StakingRewardscomponent and inspect if it accepts any props.
StakingRewards Component Does Not Require Props
The
StakingRewardscomponent is defined usingReact.FCwithout a props interface, indicating it does not accept or require any props. The code is implemented correctly.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if StakingRewards component accepts any props in its implementation. # Search for StakingRewards component definition ast-grep --pattern 'const StakingRewards: React.FC$_'Length of output: 55
Script:
#!/bin/bash # Search for occurrences of "StakingRewards" within TypeScript/TSX files rg --ignore-case --max-columns=200 -C 2 "StakingRewards" .Length of output: 1525
web/src/pages/Profile/JurorCard/index.tsx (3)
29-33: LGTM!The renaming of the interface and component from
JurorInfotoJurorCardaligns with the PR objectives and improves clarity.
23-26: LGTM!The layout adjustments improve spacing consistency by:
- Reducing the gap between elements
- Adding horizontal padding to the card
49-51: LGTM!The component composition with
TopContentandBottomContentimproves modularity and separation of concerns. Props are correctly passed to child components.web/src/pages/Jurors/index.tsx (1)
58-61: LGTM!The simplified navigation path to "/profile" aligns with the PR objectives and improves URL structure.
web/src/pages/Profile/JurorCard/BottomContent/JurorRewards.tsx (3)
18-28: LGTM! Responsive layout improvements.The Container's styling enhancements with centered alignment and responsive gaps improve the layout consistency across different screen sizes.
30-34: LGTM! Well-structured token rewards container.The new TokenRewardsContainer provides a clean and consistent layout for displaying token rewards with appropriate spacing.
59-63: LGTM! Improved token rewards rendering.The TokenRewardsContainer wrapping provides better structure and consistency for the rewards display.
web/src/pages/Profile/Cases/index.tsx (2)
47-50: LGTM! Efficient pagination calculation.Good use of useMemo for optimizing the total pages calculation, with proper dependencies.
53-64: LGTM! Clean component implementation.Well-structured component with proper type safety and clean navigation handling.
web/src/pages/Profile/JurorCard/Header.tsx (2)
76-76: LGTM! Simplified header title.Clean and focused header implementation.
Line range hint
82-86: LGTM! Well-implemented social sharing.Good conditional rendering of the social sharing feature based on user activity.
web/src/app.tsx (1)
Line range hint
76-82: LGTM! More flexible routing structure.The wildcard route path provides better flexibility for handling sub-routes in the profile section, supporting the new tabbed navigation structure.
web/src/components/EvidenceCard.tsx (1)
226-226: LGTM! URL structure simplified.The profile link has been updated to use the new standardized URL structure, aligning with the profile page restructuring.
web/src/components/JurorLink.tsx (3)
43-45: LGTM! Interface design is clear and flexible.The renamed interface with the optional
isInternalLinkprop provides good flexibility for different use cases.
48-56: LGTM! Well-implemented link handling logic.The link handling logic is well-structured:
- Proper handling of connected user's profile
- Clear distinction between internal and external links
- Efficient use of useMemo for explorer link
61-67: LGTM! Secure external link implementation.Good security practices implemented:
- Proper rel attributes for external links
- Appropriate target attribute handling
- Clear visual distinction with different icons
web/src/pages/Profile/index.tsx (2)
56-60: LGTM! Well-structured tab configuration.The TABS array provides a clean, maintainable way to define the navigation structure.
74-79: LGTM! Clean tab navigation implementation.The handleTabChange function properly handles:
- URL path updates
- Query parameter preservation
- Navigation state management
web/src/pages/Profile/Votes/index.tsx (1)
5-7: Implementation appears incomplete.The empty div suggests this component is a work in progress. Consider adding a TODO comment or implementing a basic structure for the votes display.
Would you like me to help implement a basic structure for the Votes component?
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
web/src/pages/Profile/Cases/index.tsx (3)
33-36: Pagination and Filter Decoding Logic
The calculation ofpageNumberusingparseInt(page ?? "1")and subsequent derivations for pagination (e.g.,disputeSkip) and filter decoding withdecodeURIFilter(filter ?? "all")are straightforward.
Note: Consider guarding against non-numericpagevalues to avoid potentialNaNresults. For example, you might add a fallback in caseparseIntreturnsNaN.
44-46: User Data Query and Total Cases Calculation
The use ofuseUserQueryto retrieve user data is correct. However, when calculatingtotalResolvedCases, usingparseInt(userData?.user?.totalResolvedDisputes)could yieldNaNif the value is undefined. Consider providing a fallback default value. For example:- const totalResolvedCases = parseInt(userData?.user?.totalResolvedDisputes); + const totalResolvedCases = parseInt(userData?.user?.totalResolvedDisputes || "0", 10);This ensures that the parsed value is always a number.
52-65: Rendering and Navigation Logic in CasesDisplay
TheStyledCasesDisplaycomponent is rendered with the correct props for title, disputes, pagination details, and callbacks. A couple of suggestions:
- The
disputesprop handles the case whenuserData?.useris not null, but you might consider a more robust existence check (e.g., checking truthiness) if there’s any possibility for an undefined value.- In the
setCurrentPagecallback, constructing the navigation URL directly with potentially undefinedorderorfiltermay lead to unexpected URL segments. Consider providing default fallbacks for these parameters. For instance:- setCurrentPage={(newPage: number) => - navigate(`${location}/${newPage}/${order}/${filter}?${searchParams.toString()}`) - } + setCurrentPage={(newPage: number) => + navigate(`${location}/${newPage}/${order ?? "desc"}/${filter ?? "all"}?${searchParams.toString()}`) + }This ensures a more predictable URL structure.
web/src/pages/Profile/JurorCard/BottomContent/index.tsx (1)
32-43: LeftContent Styled Component – Redundant Property
There is a redundancy in the flex-direction definitions. Lines 34 and 36 both setflex-direction(first asrow, then ascolumn), with the latter overwriting the former. Verify the intended default layout and remove the redundant declaration for clarity.Proposed Diff:
const LeftContent = styled.div` - display: flex; - flex-direction: row; - gap: 48px; - flex-direction: column; + display: flex; + gap: 48px; + flex-direction: column;web/src/pages/Profile/Stakes/index.tsx (1)
Line range hint
41-54: Data Filtering and Reuse
The component calculatesstakedCourtsby filtering tokens with astakedvalue greater than 0 and then uses this to determine if any stakes exist. However, the same filtering logic is reapplied later during the mapping. Consider reusing the already computedstakedCourtsvariable for rendering to avoid duplication and improve clarity.Proposed Diff:
- {isStaked && !isLoading ? ( - <CourtCardsContainer> - {stakeData?.jurorTokensPerCourts - ?.filter(({ staked }) => staked > 0) - .map(({ court: { id, name }, staked }) => ( - <CourtCard key={id} name={name ?? ""} stake={staked} {...{ id }} /> - ))} - </CourtCardsContainer> - ) : null} + {isStaked && !isLoading ? ( + <CourtCardsContainer> + {stakedCourts?.map(({ court: { id, name }, staked }) => ( + <CourtCard key={id} name={name ?? ""} stake={staked} {...{ id }} /> + ))} + </CourtCardsContainer> + ) : null}web/src/pages/Profile/index.tsx (1)
62-65: getTabIndex Function Logic
ThegetTabIndexfunction uses a heuristic based on the inclusion of the tab path (splitting on/) to determine the active tab. While this approach works, it may be sensitive to URL structure changes. Consider a more robust strategy if the URL patterns become more complex.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
web/src/pages/Profile/Cases/index.tsx(1 hunks)web/src/pages/Profile/JurorCard/BottomContent/JurorRewards.tsx(4 hunks)web/src/pages/Profile/JurorCard/BottomContent/index.tsx(1 hunks)web/src/pages/Profile/JurorCard/Header.tsx(2 hunks)web/src/pages/Profile/JurorCard/index.tsx(3 hunks)web/src/pages/Profile/Stakes/index.tsx(5 hunks)web/src/pages/Profile/index.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- web/src/pages/Profile/JurorCard/BottomContent/JurorRewards.tsx
⏰ Context from checks skipped due to timeout of 90000ms (15)
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-testnet-devtools
- GitHub Check: Redirect rules - kleros-v2-university
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet-devtools
- GitHub Check: Header rules - kleros-v2-university
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet-devtools
- GitHub Check: Pages changed - kleros-v2-university
- GitHub Check: contracts-testing
- GitHub Check: Analyze (javascript)
- GitHub Check: SonarCloud
🔇 Additional comments (28)
web/src/pages/Profile/Cases/index.tsx (7)
1-2: Import Statements are Clear and Concise
The required dependencies such as React, hooks from react-router-dom, and other utilities are imported correctly.
15-21: Well-Defined Styled Component
TheStyledCasesDisplaycomponent is defined usingstyled-componentswith responsive styling which is clear and maintainable.
23-25: Explicit Interface Declaration
TheICasesinterface uses a template literal type forsearchParamAddress(e.g."0x${string}"), which enforces the expected address format. Ensure that this type is consistently used across the codebase.
27-32: Component Setup Using React Hooks
TheCasescomponent properly leverages hooks likeuseParams,useSearchParams,useRootPath, anduseNavigatefor routing and URL parameter management. The use ofsearchParamAddressas a prop for data queries is appropriate.
37-42: GraphQL Query for Cases is Appropriately Configured
TheuseMyCasesQueryhook is called with well-calculated parameters includingsearchParamAddress,disputeSkip,decodedFilter, and an order determined by"asc" === order. This logic looks solid assuming descending is the intended default whenorderisn’t"asc".
47-50: Efficient Calculation of Total Pages with useMemo
UtilizinguseMemoto calculatetotalPagesbased ontotalCasesandcasesPerPageis a good optimization. The conditional check usingisUndefined(totalCases)ensures a fallback value.
68-68: Export Statement is Standard
The component is exported as the default export, which is consistent with common practices for React components.web/src/pages/Profile/JurorCard/BottomContent/index.tsx (4)
1-12: Import and Dependency Declarations
The import statements are clear and appropriately ordered. All necessary dependencies such as React, styled-components, and the local components are imported correctly.
13-30: Container Styled Component – Responsive Layout
TheContainercomponent useslandscapeStyleeffectively to adjust the flex-direction based on screen orientation. The layout properties (gap, width, height) are clearly organized.
45-50: Interface Declaration for IBottomContent
TheIBottomContentinterface is well-defined. Using a literal template type forsearchParamAddress(i.e.,0x${string}) is a neat way to enforce address formatting.
52-68: BottomContent Component Implementation
The functional component cleanly destructures its props and composes the UI by arranging child components insideContainerandLeftContent. The use of the spread operator to pass multiple props is concise.web/src/pages/Profile/JurorCard/index.tsx (4)
Line range hint
1-11: Component and Utility Imports Cleanup
The file imports required modules and utilities. The removal of unused imports (e.g.,landscapeStyleandresponsiveSizepreviously present) helps keep the file clean.
23-26: Card Styled Component Adjustments
The modifications to theCardstyling (e.g.,gapchanged to 24px andpaddingadjusted) are appropriate for the new layout structure.
29-30: Interface Rename for JurorCard
Renaming the interface property fromaddressToQuerytosearchParamAddressis consistent with the overall refactor.
Line range hint
33-57: JurorCard Component Logic and Data Handling
The component correctly retrieves user data viauseUserQuery, computes totals usingparseInt, and derives user level information with external utilities. Spreading props into the<Header>and<BottomContent>components promotes code reuse. Ensure that the external functions (getCoherencePercentandgetUserLevelData) remain pure and handle edge cases.web/src/pages/Profile/Stakes/index.tsx (2)
Line range hint
1-16: Imports and Styled Components in Stakes
The file imports necessary hooks and styling utilities. The styled components (Container,CourtCardsContainer, andStyledLabel) are defined clearly and use responsive utilities appropriately.
37-41: Interface and Component Renaming Consistency
Renaming the interface fromICourtstoIStakesand the component fromCourtstoStakesis well executed. The use of a literal type forsearchParamAddresscontinues the standardized naming.web/src/pages/Profile/JurorCard/Header.tsx (4)
Line range hint
1-13: Header Component Imports and Styling
All import statements and styled components (e.g.,Container,StyledTitle,LinksContainer) are well set up. The styles are consistent with the design system.
54-62: Interface Update for Header Component
The update of the interface property fromaddressToQuerytosearchParamAddressis consistent with the overall refactor. This promotes uniformity across components handling juror addresses.
62-72: Header Component Logic – Conditional Rendering
The component computes a share URL based on the juror’s data. Note that the share link is conditionally rendered only whentotalResolvedVotes > 0and!searchParamAddressis true. Double-check that this logic aligns with the intended UX—if asearchParamAddressis always provided in profile context, the share link may be unintentionally hidden.
Line range hint
72-79: Social Sharing and Link Handling
The construction ofxPostTextandxShareUrlusingwindow.location.originis a practical approach. The remaining JSX is clear and succinct, focusing on displaying a static title ("Juror Profile") and the related interactive elements.web/src/pages/Profile/index.tsx (7)
1-9: Main Profile Page – Imports and Initial Setup
The file sets up necessary React hooks and external component dependencies (such as routing and UI components). The inclusion and use ofTabsComponentand icon imports (PnkIcon, DocIcon, VotedIcon) are well organized.
35-44: StyledTabs Component Definition
TheStyledTabscomponent is defined with responsive margins and font sizes. The selector for child SVGs to adjust spacing is a nice touch.
56-60: TABS Constant Definition
TheTABSarray clearly defines the tab structure with text labels, numerical values, icons, and paths. This explicit declaration makes it easy to maintain and update the navigation tabs.
73-77: useEffect for Navigation on Missing Address
TheuseEffecthook checks if the wallet is connected and no search parameter is provided, then automatically updates the URL with the connected address. This improves user experience by ensuring the profile always has an address parameter.
79-84: handleTabChange Functionality
ThehandleTabChangefunction correctly constructs new paths based on the selected tab and preserves the search parameter. The logic is straightforward and integrates well withuseNavigate.
88-106: Conditional Rendering with Routes
The conditional rendering shows theJurorCard,StyledTabs, and a set ofRoutedefinitions when asearchParamAddressis present. The fallback<Navigate>route ensures that any unexpected paths default to the stakes tab. This structure is both flexible and maintainable.
106-114: Fallback for Unconnected Users
The component gracefully handles the case when the user is not connected by rendering a call to action within theConnectWalletContainer.
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
web/src/pages/Profile/Stakes/index.tsx (1)
46-62: Consider these improvements to the component logic.
- Extract the filter logic to avoid duplication:
+ const filterStakedCourts = (courts) => + courts?.filter(({ staked }) => staked > 0) ?? []; - const stakedCourts = stakeData?.jurorTokensPerCourts?.filter(({ staked }) => staked > 0); + const stakedCourts = filterStakedCourts(stakeData?.jurorTokensPerCourts); ... - {stakeData?.jurorTokensPerCourts - ?.filter(({ staked }) => staked > 0) + {filterStakedCourts(stakeData?.jurorTokensPerCourts) .map(({ court: { id, name }, staked }) => (
- Consider making the empty state message more informative:
- <StyledLabel>No stakes found</StyledLabel> + <StyledLabel>No active stakes found for this address</StyledLabel>
- Consider showing a more accurate loading skeleton:
- {isLoading ? <Skeleton /> : null} + {isLoading ? ( + <CourtCardsContainer> + <Skeleton height={80} count={3} /> + </CourtCardsContainer> + ) : null}web/src/pages/Profile/Stakes/Header.tsx (3)
66-69: Consider adding prop validation for stake values.The interface accepts strings for stake values but doesn't enforce any validation. Consider adding validation to ensure the strings are valid numeric values.
interface IHeader { - totalStake: string; - lockedStake: string; + totalStake: `${number}` | `0x${string}`; + lockedStake: `${number}` | `0x${string}`; }
79-87: Consider using early returns for better readability.The nested ternary operators with null returns can be simplified using early returns.
- {!isUndefined(totalStake) ? ( - <StakedPnk> - <StyledPnkIcon /> - <label> Total Stake: </label> - <small> - <NumberDisplay value={formattedTotalStake} unit="PNK" /> - </small> - </StakedPnk> - ) : null} - {!isUndefined(lockedStake) ? ( - <LockedPnk> - <StyledLockerIcon /> - <label> Locked Stake: </label> - <small> - <NumberDisplay value={formattedLockedStake} unit="PNK" /> - </small> - </LockedPnk> - ) : null} + {!isUndefined(totalStake) && ( + <StakedPnk> + <StyledPnkIcon /> + <label> Total Stake: </label> + <small> + <NumberDisplay value={formattedTotalStake} unit="PNK" /> + </small> + </StakedPnk> + )} + {!isUndefined(lockedStake) && ( + <LockedPnk> + <StyledLockerIcon /> + <label> Locked Stake: </label> + <small> + <NumberDisplay value={formattedLockedStake} unit="PNK" /> + </small> + </LockedPnk> + )}Also applies to: 88-96
56-64: Consider extracting icon styles to a shared component.Both
StyledPnkIconandStyledLockerIconshare similar styles. Consider creating a shared styled component.+const BaseIcon = css` + fill: ${({ theme }) => theme.secondaryPurple}; + width: 14px; +`; + -const StyledPnkIcon = styled(PnkIcon)` - fill: ${({ theme }) => theme.secondaryPurple}; - width: 14px; -`; +const StyledPnkIcon = styled(PnkIcon)`${BaseIcon}`; -const StyledLockerIcon = styled(LockerIcon)` - fill: ${({ theme }) => theme.secondaryPurple}; - width: 14px; -`; +const StyledLockerIcon = styled(LockerIcon)`${BaseIcon}`;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
web/src/components/NumberDisplay.tsx(2 hunks)web/src/pages/Profile/Stakes/Header.tsx(1 hunks)web/src/pages/Profile/Stakes/index.tsx(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Redirect rules - kleros-v2-university
- GitHub Check: Header rules - kleros-v2-university
- GitHub Check: Pages changed - kleros-v2-university
- GitHub Check: Redirect rules - kleros-v2-neo
- GitHub Check: Header rules - kleros-v2-neo
- GitHub Check: Pages changed - kleros-v2-neo
- GitHub Check: contracts-testing
- GitHub Check: Mend Security Check
🔇 Additional comments (4)
web/src/pages/Profile/Stakes/index.tsx (2)
14-29: LGTM! Styling adjustments improve visual consistency.The reduced margins and gaps create a more compact and consistent layout across different screen sizes.
35-45: LGTM! Type-safe interface and component changes.The renamed interface and component better reflect their purpose, and the use of template literal type for Ethereum addresses improves type safety.
web/src/components/NumberDisplay.tsx (1)
4-5: LGTM! Good addition of the commify utility.The addition of the
commifyfunction will improve readability of large numbers by adding thousand separators.web/src/pages/Profile/Stakes/Header.tsx (1)
16-30: LGTM! Good use of responsive design.The container's layout adapts well to different screen sizes using
responsiveSizeandlandscapeStyle.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
web/src/pages/Profile/Stakes/CourtCard/CourtName.tsx (1)
41-44: Consider these improvements for better type safety and accessibility.
- The interface doesn't match the implementation:
idis treated as optional in the JSX (line 50:id?.toString())- But it's required in the interface
- Add aria-label to improve accessibility of the arrow icon
interface ICourtName { name: string; - id: string; + id?: string; } <ReStyledArrowLink to={`/courts/${id?.toString()}`}> - Open Court <ArrowIcon /> + Open Court <ArrowIcon aria-label="Navigate to court details" /> </ReStyledArrowLink>Also applies to: 50-52
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
web/src/components/NumberDisplay.tsx(3 hunks)web/src/pages/Profile/Stakes/CourtCard/CourtName.tsx(1 hunks)web/src/pages/Profile/Stakes/Header.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- web/src/components/NumberDisplay.tsx
- web/src/pages/Profile/Stakes/Header.tsx
⏰ Context from checks skipped due to timeout of 90000ms (15)
- GitHub Check: Redirect rules - kleros-v2-testnet-devtools
- GitHub Check: Header rules - kleros-v2-testnet-devtools
- GitHub Check: Pages changed - kleros-v2-testnet-devtools
- GitHub Check: Redirect rules - kleros-v2-neo
- GitHub Check: Header rules - kleros-v2-neo
- GitHub Check: Pages changed - kleros-v2-neo
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Analyze (javascript)
- GitHub Check: contracts-testing
- GitHub Check: SonarCloud
🔇 Additional comments (1)
web/src/pages/Profile/Stakes/CourtCard/CourtName.tsx (1)
14-14: LGTM! Improved responsive layout.The styling changes enhance the component's flexibility and mobile responsiveness:
- Split gap values provide better control over spacing
- flex-wrap ensures proper content flow on smaller screens
Also applies to: 17-17
…ngs, staking history
There was a problem hiding this comment.
Actionable comments posted: 10
🧹 Nitpick comments (14)
web/src/pages/Profile/index.tsx (2)
62-64: Enhance path matching robustness.The current path matching logic using
includes()might lead to false positives with partial matches. For example, "stakes" would match both "/profile/stakes" and "/profile/mistakes".Consider using a more precise path matching approach:
- return TABS.findIndex((tab) => currentPath.includes(tab.path.split("/")[0])); + return TABS.findIndex((tab) => { + const tabBase = tab.path.split("/")[0]; + const currentBase = currentPath.split("/").find(segment => + ["stakes", "cases", "votes"].includes(segment) + ); + return tabBase === currentBase; + });
79-84: Add error handling for invalid tab indices.The
handleTabChangefunction assumes the tab index will always be valid. While this is likely true for UI-triggered changes, it's good practice to add validation.Consider adding validation:
const handleTabChange = (tabIndex: number) => { + if (tabIndex < 0 || tabIndex >= TABS.length) { + console.error(`Invalid tab index: ${tabIndex}`); + return; + } const selectedTab = TABS[tabIndex]; const basePath = `/profile/${selectedTab.path}`; const queryParam = searchParamAddress ? `?address=${searchParamAddress}` : ""; navigate(`${basePath}${queryParam}`); };web/src/pages/Profile/Votes/index.tsx (1)
41-41: Replace hardcoded pagination value.The total number of pages is hardcoded with a TODO comment.
Would you like me to help implement the logic to calculate the total pages based on the total number of votes and votes per page?
web/src/pages/Profile/Stakes/CourtCard/Stake.tsx (2)
17-19: Improve type safety for stake prop.Consider using a more specific type for the stake prop to ensure it's a valid hex string.
interface IStake { - stake: string; + stake: `0x${string}`; }
21-29: Add error handling and improve accessibility.
- Add error handling for invalid stake values
- Add aria-label for better screen reader support
- Consider adding a title attribute for tooltip on hover
const Stake: React.FC<IStake> = ({ stake }) => { + if (!stake.startsWith('0x')) { + console.error('Invalid stake format'); + return null; + } + const formattedStake = formatUnits(stake, 18); return ( - <StyledLabel> + <StyledLabel + aria-label={`Stake amount: ${formattedStake} PNK`} + title={`${formattedStake} PNK`} + > <NumberDisplay value={formattedStake} unit="PNK" /> </StyledLabel> ); };web/src/pages/Profile/Stakes/CourtCard/CourtName.tsx (1)
33-39: Improve accessibility and use semantic HTML.
- Use semantic HTML elements for better structure
- Add ARIA attributes for better screen reader support
- Add title attribute for tooltip on hover
const CourtName: React.FC<ICourtName> = ({ name, id }) => { return ( - <Container> - <small>{name}</small> + <Container + role="heading" + aria-level={3} + title={`Court: ${name}`} + > + <small aria-label={`Court name: ${name}`}>{name}</small> </Container> ); };web/src/pages/Profile/Stakes/index.tsx (1)
40-40: Extract magic numbers into constants.The hardcoded values in
useStakingHistory(1, 0)should be extracted into named constants or configuration values for better maintainability.+const DEFAULT_PAGE = 1; +const DEFAULT_OFFSET = 0; + const Stakes: React.FC<IStakes> = ({ searchParamAddress }) => { // ... - const { data: stakingHistoryData } = useStakingHistory(1, 0); + const { data: stakingHistoryData } = useStakingHistory(DEFAULT_PAGE, DEFAULT_OFFSET); // ... };web/src/pages/Profile/Stakes/CurrentStakes/index.tsx (1)
46-48: Remove duplicate filter logic.The filtering of staked courts is duplicated. Consider storing the filtered result in a variable to avoid redundant computation.
const stakedCourts = currentStakeData?.jurorTokensPerCourts?.filter(({ staked }) => staked > 0); const isStaked = stakedCourts && stakedCourts.length > 0; return ( <Container> <Header {...{ totalStake, lockedStake }} /> {!isStaked && !isLoading ? ( <NoCurrentStakesLabel>No stakes found</NoCurrentStakesLabel> ) : isLoading ? ( <Skeleton /> ) : null} {isStaked && !isLoading ? ( <CourtCardsContainer> - {currentStakeData?.jurorTokensPerCourts - ?.filter(({ staked }) => staked > 0) + {stakedCourts .map(({ court: { id, name }, staked }) => ( <CourtCard key={id} name={name ?? ""} stake={staked} {...{ id }} /> ))} </CourtCardsContainer> ) : null} </Container> );web/src/hooks/queries/useStakingHistory.ts (1)
28-46: Move GraphQL query to a separate file.Large GraphQL queries should be maintained in separate files for better maintainability and reusability.
Create a new file
queries/stakingHistory.ts:export const GET_STAKING_EVENTS = ` query GetStakingEvents($pagination: PaginationArgs) { userStakingEvents(pagination: $pagination) { edges { node { name args blockTimestamp transactionHash } cursor } count hasNextPage } } `;web/src/pages/Profile/Stakes/CourtCard/index.tsx (3)
18-42: Consider extracting theme-specific styles to theme configuration.The Container component mixes theme-specific styles within the component. Consider extracting the box-shadow style to the theme configuration for better maintainability.
- ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")}Add to theme configuration:
// theme.ts export const lightTheme = { // ... other theme properties cardBoxShadow: '0px 2px 3px 0px ${theme.stroke}', }; export const darkTheme = { // ... other theme properties cardBoxShadow: 'none', };Then update the styled component:
+ box-shadow: ${({ theme }) => theme.cardBoxShadow};
73-80: Consider adding JSDoc comments and prop validation.The interface would benefit from JSDoc comments explaining the purpose of each prop and any constraints. Also, consider adding runtime prop validation.
+/** + * Interface for CourtCard component props + * @property {string} name - The name of the court + * @property {string} stake - The stake amount + * @property {string} id - The court ID + * @property {number} [timestamp] - Optional timestamp of the staking event + * @property {string} [transactionHash] - Optional transaction hash + * @property {boolean} [isCurrentStakeCard] - Whether this is the current stake card + */ interface ICourtCard { name: string; stake: string; id: string; timestamp?: number; transactionHash?: string; isCurrentStakeCard?: boolean; }Also applies to: 82-89
98-101: Add aria-label for better accessibility.The external link should have an aria-label to improve accessibility.
- <ReStyledArrowLink to={getTxnExplorerLink(transactionHash)} target="_blank" rel="noopener noreferrer"> + <ReStyledArrowLink + to={getTxnExplorerLink(transactionHash)} + target="_blank" + rel="noopener noreferrer" + aria-label={`View transaction ${transactionHash} in explorer`} + >web/src/pages/Profile/Stakes/StakingHistory.tsx (2)
55-57: Consider using a more semantic loading state.The skeleton loading state could be more semantic and accessible.
- Array.from({ length: 10 }).map((_, index) => <Skeleton height={64} key={index} />) + <div role="status" aria-busy="true" aria-label="Loading staking history"> + {Array.from({ length: 10 }).map((_, index) => ( + <Skeleton height={64} key={index} /> + ))} + </div>
54-73: Consider virtualizing the list for better performance.For large lists of staking events, consider using a virtualized list component to improve performance.
+import { FixedSizeList } from 'react-window'; - <CourtCardsContainer> + <FixedSizeList + height={600} + width="100%" + itemCount={stakingEvents.length} + itemSize={64} + > + {({ index, style }) => { + const { node, cursor } = stakingEvents[index]; + const courtName = findCourtNameById(courtTreeData, node.args._courtID); + return ( + <div style={style}> <CourtCard - key={cursor} + key={`${cursor}-${index}`} name={courtName} stake={node.args._amount} id={node.args._courtID} isCurrentStakeCard={false} timestamp={node.blockTimestamp} transactionHash={node.transactionHash} /> + </div> + ); + }} + </FixedSizeList>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
web/src/components/EvidenceCard.tsx(1 hunks)web/src/components/JurorLink.tsx(2 hunks)web/src/hooks/queries/useStakingHistory.ts(1 hunks)web/src/layout/Header/navbar/Menu/Settings/General/WalletAndProfile.tsx(1 hunks)web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx(2 hunks)web/src/pages/Jurors/index.tsx(1 hunks)web/src/pages/Profile/Stakes/CourtCard/CourtName.tsx(1 hunks)web/src/pages/Profile/Stakes/CourtCard/Stake.tsx(1 hunks)web/src/pages/Profile/Stakes/CourtCard/index.tsx(1 hunks)web/src/pages/Profile/Stakes/CurrentStakes/Header.tsx(1 hunks)web/src/pages/Profile/Stakes/CurrentStakes/index.tsx(1 hunks)web/src/pages/Profile/Stakes/StakingHistory.tsx(1 hunks)web/src/pages/Profile/Stakes/index.tsx(1 hunks)web/src/pages/Profile/Votes/StatsAndFilters/Filters.tsx(1 hunks)web/src/pages/Profile/Votes/StatsAndFilters/Stats.tsx(1 hunks)web/src/pages/Profile/Votes/StatsAndFilters/index.tsx(1 hunks)web/src/pages/Profile/Votes/index.tsx(1 hunks)web/src/pages/Profile/index.tsx(3 hunks)web/src/utils/findCourtNameById.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- web/src/layout/Header/navbar/Menu/Settings/General/WalletAndProfile.tsx
- web/src/components/EvidenceCard.tsx
- web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx
- web/src/pages/Jurors/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms (13)
- GitHub Check: Redirect rules - kleros-v2-testnet-devtools
- GitHub Check: Header rules - kleros-v2-testnet-devtools
- GitHub Check: Redirect rules - kleros-v2-neo
- GitHub Check: Redirect rules - kleros-v2-university
- GitHub Check: Pages changed - kleros-v2-testnet-devtools
- GitHub Check: Header rules - kleros-v2-neo
- GitHub Check: Header rules - kleros-v2-university
- GitHub Check: Pages changed - kleros-v2-neo
- GitHub Check: Pages changed - kleros-v2-university
- GitHub Check: SonarCloud
- GitHub Check: Analyze (javascript)
- GitHub Check: contracts-testing
- GitHub Check: Mend Security Check
🔇 Additional comments (7)
web/src/pages/Profile/index.tsx (2)
35-46: Well-structured responsive styling implementation!The
StyledTabscomponent effectively uses responsive sizing and proper theme variables, ensuring consistent styling across different screen sizes.
96-109: Clean and well-structured routing implementation!The routing setup effectively handles all tab paths and includes a proper fallback route. The consistent use of prop spreading maintains clean code while passing necessary data to child components.
web/src/pages/Profile/Votes/StatsAndFilters/index.tsx (1)
1-24: LGTM! Well-structured component with clear separation of concerns.The component follows React best practices with proper TypeScript typing and styled-components usage.
web/src/pages/Profile/Stakes/CurrentStakes/index.tsx (1)
32-35: LGTM! Clean component structure with proper state handling.The component effectively manages different states (loading, empty, and data) and follows React best practices.
web/src/components/JurorLink.tsx (1)
48-71: LGTM! Well-structured component with proper security considerations.The component:
- Correctly handles both internal and external links
- Implements proper security attributes for external links
- Uses memoization appropriately
- Follows React best practices
web/src/pages/Profile/Stakes/CurrentStakes/Header.tsx (1)
75-99: LGTM! Clean and responsive layout implementation.The component implements a clean and responsive layout using styled-components and proper conditional rendering.
web/src/pages/Profile/Stakes/CourtCard/index.tsx (1)
90-111: LGTM! Well-structured component with good semantic markup.The component implementation is clean, follows React best practices, and uses appropriate semantic HTML elements. The conditional rendering is handled well.
|
Code Climate has analyzed commit 4172322 and detected 71 issues on this pull request. Here's the issue category breakdown:
View more on Code Climate. |
|
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (9)
web/src/pages/Profile/Votes/VoteCard/Round.tsx (1)
15-17: Consider using number type for thenumberprop.The
numberprop represents a round number but is typed as string. Consider using the number type for better type safety and to avoid unnecessary type conversions.interface IRound { - number: string; + number: number; }web/src/pages/Profile/Votes/VoteCard/CourtName.tsx (1)
6-26: Consider simplifying the Container styling.The Container has complex styling with multiple flex properties. Consider simplifying:
flex-direction: rowis the default and can be removed- The gap property could use a single value if both horizontal and vertical gaps are the same
const Container = styled.div` display: flex; width: 100%; - flex-direction: row; - gap: 8px 16px; + gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; small { height: 100%; font-weight: 400; } ${landscapeStyle( () => css` justify-content: flex-start; width: auto; ` )} `;web/src/pages/Profile/Votes/VoteCard/Vote.tsx (1)
26-28: Consider using a union type for vote choices.To improve type safety and prevent invalid vote choices, consider using a union type.
+type VoteChoice = 'Yes' | 'No' | 'Refuse to Vote' | 'Pending'; + interface IVote { - choice: string; + choice: VoteChoice; }web/src/pages/Profile/Votes/VoteCard/CaseNumber.tsx (1)
8-28: Consider simplifying the Container styling.Similar to CourtName, the Container has complex styling that could be simplified:
flex-direction: rowis the default- The gap property could use a single value
const Container = styled.div` display: flex; width: 100%; - flex-direction: row; - gap: 8px 16px; + gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; small { height: 100%; font-weight: 600; } ${landscapeStyle( () => css` justify-content: flex-start; width: auto; ` )} `;web/src/pages/Profile/Stakes/index.tsx (1)
40-40: Extract pagination parameters to constants or props.The hardcoded values (1, 0) in useStakingHistory should be extracted to make the component more configurable.
+const DEFAULT_PAGE = 1; +const DEFAULT_OFFSET = 0; + const Stakes: React.FC<IStakes> = ({ searchParamAddress }) => { const { data: currentStakeData, isLoading: isCurrentStakeLoading } = useJurorStakeDetailsQuery(searchParamAddress); - const { data: stakingHistoryData } = useStakingHistory(1, 0); + const { data: stakingHistoryData } = useStakingHistory(DEFAULT_PAGE, DEFAULT_OFFSET);web/src/pages/Profile/Stakes/CurrentStakes/index.tsx (2)
37-38: Extract duplicate filter logic to a variable.The filter logic for staked courts is duplicated. Extract it to a variable to maintain DRY principles.
+ const filterStakedCourts = (courts) => + courts?.filter(({ staked }) => staked > 0) ?? []; + - const stakedCourts = currentStakeData?.jurorTokensPerCourts?.filter(({ staked }) => staked > 0); + const stakedCourts = filterStakedCourts(currentStakeData?.jurorTokensPerCourts); const isStaked = stakedCourts && stakedCourts.length > 0; // ... {isStaked && !isCurrentStakeLoading ? ( <CourtCardsContainer> - {currentStakeData?.jurorTokensPerCourts - ?.filter(({ staked }) => staked > 0) + {filterStakedCourts(currentStakeData?.jurorTokensPerCourts) .map(({ court: { id, name }, staked }) => (Also applies to: 50-52
43-47: Simplify conditional rendering logic.The nested ternary conditions make the code harder to read. Consider using early returns or a more straightforward if-else structure.
- {!isStaked && !isCurrentStakeLoading ? ( - <NoCurrentStakesLabel>No stakes found</NoCurrentStakesLabel> - ) : isCurrentStakeLoading ? ( - <Skeleton /> - ) : null} + {isCurrentStakeLoading && <Skeleton />} + {!isCurrentStakeLoading && !isStaked && ( + <NoCurrentStakesLabel>No stakes found</NoCurrentStakesLabel> + )}web/src/pages/Profile/Votes/VoteCard/index.tsx (1)
29-31: Improve hover interaction accessibility.Setting cursor to 'auto' on hover might confuse users about interactivity. Consider using 'pointer' for clickable elements or removing the hover style if the element isn't interactive.
- :hover { - cursor: auto; - } + :hover { + cursor: pointer; + }web/src/pages/Profile/Stakes/StakingHistory.tsx (1)
17-17: Remove or utilize empty styled component.The
Containerstyled component is empty and doesn't provide any styling. Either remove it and use a regulardiv, or add the necessary styles.-const Container = styled.div``;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
web/src/components/DisputeView/PeriodBanner.tsx(1 hunks)web/src/pages/Profile/Stakes/CurrentStakes/index.tsx(1 hunks)web/src/pages/Profile/Stakes/StakingHistory.tsx(1 hunks)web/src/pages/Profile/Stakes/index.tsx(1 hunks)web/src/pages/Profile/Votes/StatsAndFilters/index.tsx(1 hunks)web/src/pages/Profile/Votes/VoteCard/CaseNumber.tsx(1 hunks)web/src/pages/Profile/Votes/VoteCard/CaseStatus.tsx(1 hunks)web/src/pages/Profile/Votes/VoteCard/CourtName.tsx(1 hunks)web/src/pages/Profile/Votes/VoteCard/Round.tsx(1 hunks)web/src/pages/Profile/Votes/VoteCard/Vote.tsx(1 hunks)web/src/pages/Profile/Votes/VoteCard/index.tsx(1 hunks)web/src/pages/Profile/Votes/index.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- web/src/pages/Profile/Votes/StatsAndFilters/index.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
web/src/pages/Profile/Votes/index.tsx
[error] 61-61: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
web/src/pages/Profile/Votes/VoteCard/CaseStatus.tsx
[error] 7-8: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
[error] 49-49: Unexpected empty object pattern.
(lint/correctness/noEmptyPattern)
web/src/pages/Profile/Votes/VoteCard/index.tsx
[error] 57-58: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
[error] 60-60: Unexpected empty object pattern.
(lint/correctness/noEmptyPattern)
⏰ Context from checks skipped due to timeout of 90000ms (16)
- GitHub Check: Redirect rules - kleros-v2-neo
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-university
- GitHub Check: Header rules - kleros-v2-neo
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-neo
- GitHub Check: Header rules - kleros-v2-university
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-university
- GitHub Check: SonarCloud
- GitHub Check: Analyze (javascript)
- GitHub Check: contracts-testing
- GitHub Check: Mend Security Check
🔇 Additional comments (9)
web/src/pages/Profile/Votes/VoteCard/Round.tsx (1)
19-26: LGTM! Clean and focused component implementation.The component is well-structured with clear separation of styling and logic. The use of styled-components and SVG icon follows best practices.
web/src/pages/Profile/Votes/VoteCard/CourtName.tsx (1)
32-38: LGTM! Well-structured component with responsive design.The component is well-implemented with proper responsive styling using landscapeStyle.
web/src/pages/Profile/Votes/VoteCard/Vote.tsx (1)
30-38: LGTM! Clean implementation with consistent styling.The component is well-structured with proper theme usage and icon styling.
web/src/pages/Profile/Votes/VoteCard/CaseNumber.tsx (1)
38-44: LGTM! Well-structured component with proper navigation.The component is well-implemented with proper routing and responsive styling.
web/src/pages/Profile/Stakes/index.tsx (1)
38-44: Add error handling and improve loading states.The component needs error handling for both queries and loading state for stakingHistoryData.
web/src/pages/Profile/Votes/index.tsx (1)
58-58: Replace hardcoded statistics values.The statistics values passed to
StatsAndFiltersare hardcoded.web/src/pages/Profile/Stakes/StakingHistory.tsx (1)
45-46: Add error handling for data fetching.The component should handle error states from the data fetching hooks.
web/src/components/DisputeView/PeriodBanner.tsx (2)
62-66: LGTM!The interface is well-defined with appropriate types and optional flags.
68-77: LGTM!The function is well-implemented with:
- Clear return types
- Comprehensive period handling
- Theme-based color selection
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
web/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsx (1)
152-152: Remove redundant useMemo.The
useMemohere simply returnsaccwithout any transformation or expensive computation, providing no performance benefit. Since the dependency is[acc], it effectively recalculates on every change toacc.Simplify by removing the useMemo:
-const stakes = useMemo(() => acc, [acc]); +const stakes = acc;Or use
accdirectly in the render logic ifstakesisn't needed elsewhere.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
web/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (9)
📚 Learning: 2024-11-19T17:18:39.007Z
Learnt from: jaybuidl
Repo: kleros/kleros-v2 PR: 1746
File: contracts/config/courts.v2.mainnet-neo.json:3-5
Timestamp: 2024-11-19T17:18:39.007Z
Learning: In `contracts/config/courts.v2.mainnet-neo.json`, the General Court (id: 1) intentionally references itself as its parent (`"parent": 1`). This self-reference is acceptable and should not be flagged as an issue in future reviews.
Applied to files:
web/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsx
📚 Learning: 2024-11-19T16:31:08.965Z
Learnt from: jaybuidl
Repo: kleros/kleros-v2 PR: 1746
File: contracts/config/courts.v2.mainnet-neo.json:167-170
Timestamp: 2024-11-19T16:31:08.965Z
Learning: In the court hierarchy, child courts' `minStake` must be greater than or equal to their parent court's `minStake`.
Applied to files:
web/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsx
📚 Learning: 2024-11-19T16:09:41.467Z
Learnt from: jaybuidl
Repo: kleros/kleros-v2 PR: 1746
File: contracts/config/courts.v2.mainnet-neo.json:3-17
Timestamp: 2024-11-19T16:09:41.467Z
Learning: In `contracts/config/courts.v2.mainnet-neo.json`, the General Court (ID: 1) can have its `parent` ID set to itself (`"parent": 1`), as there is no parent court with ID 0 currently.
Applied to files:
web/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsx
📚 Learning: 2024-12-16T17:17:32.359Z
Learnt from: Harman-singh-waraich
Repo: kleros/kleros-v2 PR: 1794
File: web/src/hooks/useStarredCases.tsx:13-18
Timestamp: 2024-12-16T17:17:32.359Z
Learning: In `useStarredCases.tsx`, when handling the `starredCases` Map from local storage, direct mutation is acceptable to prevent the overhead of copying, provided it doesn't adversely affect React's render cycle.
Applied to files:
web/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsx
📚 Learning: 2024-10-09T10:22:41.474Z
Learnt from: jaybuidl
Repo: kleros/kleros-v2 PR: 1582
File: web-devtools/src/app/(main)/ruler/SelectArbitrable.tsx:88-90
Timestamp: 2024-10-09T10:22:41.474Z
Learning: Next.js recommends using the `useEffect` hook to set `isClient` and using `suppressHydrationWarning` as a workaround for handling hydration inconsistencies, especially when dealing with data like `knownArbitrables` that may differ between server-side and client-side rendering. This approach is acceptable in TypeScript/React applications, such as in `web-devtools/src/app/(main)/ruler/SelectArbitrable.tsx`.
Applied to files:
web/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsx
📚 Learning: 2025-12-17T14:55:14.490Z
Learnt from: kemuru
Repo: kleros/kleros-v2 PR: 1871
File: web/src/pages/Profile/Votes/index.tsx:69-75
Timestamp: 2025-12-17T14:55:14.490Z
Learning: In `web/src/pages/Profile/Votes/index.tsx`, fetching up to 1000 draws client-side is a temporary solution until the subgraph supports fetching `totalVotes` directly. This is acknowledged technical debt that will be addressed when the subgraph capability becomes available.
Applied to files:
web/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsx
📚 Learning: 2025-05-09T13:39:15.086Z
Learnt from: tractorss
Repo: kleros/kleros-v2 PR: 1982
File: web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx:64-0
Timestamp: 2025-05-09T13:39:15.086Z
Learning: In PersonFields.tsx, the useEffect hook for address validation intentionally uses an empty dependency array to run only once on component mount. This is specifically designed for the dispute duplication flow when aliasesArray is already populated with addresses that need initial validation.
Applied to files:
web/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsx
📚 Learning: 2024-06-27T10:11:54.861Z
Learnt from: nikhilverma360
Repo: kleros/kleros-v2 PR: 1632
File: web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx:37-42
Timestamp: 2024-06-27T10:11:54.861Z
Learning: `useMemo` is used in `DisputeInfoList` to optimize the rendering of `FieldItems` based on changes in `fieldItems`, ensuring that the mapping and truncation operation are only performed when necessary.
Applied to files:
web/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsx
📚 Learning: 2025-05-15T06:50:40.859Z
Learnt from: tractorss
Repo: kleros/kleros-v2 PR: 1982
File: web/src/pages/Resolver/Landing/index.tsx:62-62
Timestamp: 2025-05-15T06:50:40.859Z
Learning: In the Landing component, it's safe to pass `dispute?.dispute?.arbitrated.id as 0x${string}` to `usePopulatedDisputeData` without additional null checks because the hook internally handles undefined parameters through its `isEnabled` flag and won't execute the query unless all required data is available.
Applied to files:
web/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (15)
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-testnet-devtools
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-neo
- GitHub Check: Header rules - kleros-v2-testnet-devtools
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-neo
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet-devtools
- GitHub Check: Pages changed - kleros-v2-neo
- GitHub Check: hardhat-tests
- GitHub Check: Analyze (javascript)
- GitHub Check: SonarCloud
| useEffect(() => { | ||
| const sentinel = sentinelRef.current; | ||
| if (!sentinel) return; | ||
| const obs = new IntersectionObserver( | ||
| ([e]) => { | ||
| if (e.isIntersecting && !isFetching && acc.length % PER_PAGE === 0) setPage((p) => p + 1); | ||
| }, | ||
| { threshold: 0.1 } | ||
| ); | ||
| obs.observe(sentinel); | ||
| return () => obs.disconnect(); | ||
| }, [isFetching, acc.length]); |
There was a problem hiding this comment.
Prevent infinite fetching when data ends at a multiple of PER_PAGE.
When the total results count is an exact multiple of PER_PAGE (e.g., 60 items), the intersection observer will continue incrementing the page and triggering fetches indefinitely, even after all data has been loaded. The acc.length % PER_PAGE === 0 condition remains true, but subsequent fetches return no new items (filtered by deduplication), so the component keeps making unnecessary API calls.
Track whether the last fetch returned fewer than PER_PAGE items to stop pagination:
const [acc, setAcc] = useState<
Array<{
id: string;
address: string;
stake: string;
timestamp: string;
transactionHash: string;
courtId: number;
courtName: string;
}>
>([]);
+const [hasMore, setHasMore] = useState(true);
useEffect(() => {
setPage(0);
setAcc([]);
+ setHasMore(true);
}, [searchValue, courtId]);
useEffect(() => {
const allItems = data?.userStakingEvents?.items ?? [];
const filteredItems = allItems.filter((item) => {
const itemCourtId = item.item.args._courtID;
return courtIds.includes(parseInt(itemCourtId));
});
const chunk = filteredItems.map((item) => {
const itemCourtId = item.item.args._courtID;
const courtName = findCourtNameById(courtTree, itemCourtId);
return {
id: item.item.id,
address: item.item.args._address,
stake: item.item.args._amount,
timestamp: item.item.blockTimestamp,
transactionHash: item.item.transactionHash,
courtId: parseInt(itemCourtId),
courtName: courtName ?? `Court #${itemCourtId}`,
};
});
const sortedChunk = chunk.sort((a, b) => parseInt(b.timestamp) - parseInt(a.timestamp));
+
+ // Stop fetching if we received fewer items than requested
+ if (sortedChunk.length < PER_PAGE) {
+ setHasMore(false);
+ }
if (sortedChunk.length) {
setAcc((prev) => {
const seen = new Set(prev.map((item) => item.id));
const next = sortedChunk.filter((item) => !seen.has(item.id));
return next.length ? [...prev, ...next] : prev;
});
}
}, [data, courtIds, courtTree]);
const sentinelRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const sentinel = sentinelRef.current;
if (!sentinel) return;
const obs = new IntersectionObserver(
([e]) => {
- if (e.isIntersecting && !isFetching && acc.length % PER_PAGE === 0) setPage((p) => p + 1);
+ if (e.isIntersecting && !isFetching && hasMore) setPage((p) => p + 1);
},
{ threshold: 0.1 }
);
obs.observe(sentinel);
return () => obs.disconnect();
-}, [isFetching, acc.length]);
+}, [isFetching, hasMore]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| const sentinel = sentinelRef.current; | |
| if (!sentinel) return; | |
| const obs = new IntersectionObserver( | |
| ([e]) => { | |
| if (e.isIntersecting && !isFetching && acc.length % PER_PAGE === 0) setPage((p) => p + 1); | |
| }, | |
| { threshold: 0.1 } | |
| ); | |
| obs.observe(sentinel); | |
| return () => obs.disconnect(); | |
| }, [isFetching, acc.length]); | |
| const [acc, setAcc] = useState< | |
| Array<{ | |
| id: string; | |
| address: string; | |
| stake: string; | |
| timestamp: string; | |
| transactionHash: string; | |
| courtId: number; | |
| courtName: string; | |
| }> | |
| >([]); | |
| const [hasMore, setHasMore] = useState(true); | |
| useEffect(() => { | |
| setPage(0); | |
| setAcc([]); | |
| setHasMore(true); | |
| }, [searchValue, courtId]); | |
| useEffect(() => { | |
| const allItems = data?.userStakingEvents?.items ?? []; | |
| const filteredItems = allItems.filter((item) => { | |
| const itemCourtId = item.item.args._courtID; | |
| return courtIds.includes(parseInt(itemCourtId)); | |
| }); | |
| const chunk = filteredItems.map((item) => { | |
| const itemCourtId = item.item.args._courtID; | |
| const courtName = findCourtNameById(courtTree, itemCourtId); | |
| return { | |
| id: item.item.id, | |
| address: item.item.args._address, | |
| stake: item.item.args._amount, | |
| timestamp: item.item.blockTimestamp, | |
| transactionHash: item.item.transactionHash, | |
| courtId: parseInt(itemCourtId), | |
| courtName: courtName ?? `Court #${itemCourtId}`, | |
| }; | |
| }); | |
| const sortedChunk = chunk.sort((a, b) => parseInt(b.timestamp) - parseInt(a.timestamp)); | |
| // Stop fetching if we received fewer items than requested | |
| if (sortedChunk.length < PER_PAGE) { | |
| setHasMore(false); | |
| } | |
| if (sortedChunk.length) { | |
| setAcc((prev) => { | |
| const seen = new Set(prev.map((item) => item.id)); | |
| const next = sortedChunk.filter((item) => !seen.has(item.id)); | |
| return next.length ? [...prev, ...next] : prev; | |
| }); | |
| } | |
| }, [data, courtIds, courtTree]); | |
| const sentinelRef = useRef<HTMLDivElement | null>(null); | |
| useEffect(() => { | |
| const sentinel = sentinelRef.current; | |
| if (!sentinel) return; | |
| const obs = new IntersectionObserver( | |
| ([e]) => { | |
| if (e.isIntersecting && !isFetching && hasMore) setPage((p) => p + 1); | |
| }, | |
| { threshold: 0.1 } | |
| ); | |
| obs.observe(sentinel); | |
| return () => obs.disconnect(); | |
| }, [isFetching, hasMore]); |
🤖 Prompt for AI Agents
In
web/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsx
around lines 139 to 150, the intersection observer keeps incrementing page when
acc.length is an exact multiple of PER_PAGE causing infinite fetches; add a
small "hasMore" (or "isLastPage") boolean state that starts true and is set to
false whenever a fetch returns fewer than PER_PAGE items, include that flag in
the observer check (only increment page if hasMore is true and other
conditions), update/reset the flag when data is reset or a new query runs, and
add hasMore to the effect dependency list so pagination stops once no more items
are returned.
|
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
web/src/pages/Profile/Stakes/StakingHistory.tsx (1)
48-56: Add error handling for data fetching.The component does not handle error states from the data fetching hooks. Per previous review feedback, consider adding error handling.
🔎 Proposed fix to add error state handling
- const { data: stakingHistoryData, isFetching: isLoadingStakingHistory } = useStakingEventsByCourt( + const { + data: stakingHistoryData, + isFetching: isLoadingStakingHistory, + error: stakingHistoryError + } = useStakingEventsByCourt( [], skip, eventsPerPage, searchParamAddress ); - const { data: courtTreeData, isLoading: isLoadingCourtTree } = useCourtTree(); + const { + data: courtTreeData, + isLoading: isLoadingCourtTree, + error: courtTreeError + } = useCourtTree();Then add error display in the render:
return ( <Container> <StyledTitle>Staking History</StyledTitle> + {(stakingHistoryError || courtTreeError) && ( + <NoHistoryLabel>Error loading staking history. Please try again later.</NoHistoryLabel> + )} <CourtCardsContainer>web/src/pages/Profile/Votes/VoteCard/index.tsx (2)
145-145: Clarify the fallback answer format.The fallback
Answer 0x${choiceNum}mixes a hex prefix with a decimal number (e.g., "Answer 0x5" instead of "Answer 0x5" in hex or "Answer 5" in decimal). This notation is confusing.Consider using one of these instead:
-return `Answer 0x${choiceNum}`; +return `Answer ${choiceNum}`;or, if hex formatting is intended:
-return `Answer 0x${choiceNum}`; +return `Answer 0x${choiceNum.toString(16)}`;
96-96: Define the missing props interface.The component destructures
{ vote: draw }butReact.FChas no generic type parameter, leaving thevoteprop completely untyped. This bypasses TypeScript's type safety.🔎 Proposed fix
Define an interface for the props and apply it to the component:
+interface IVoteCard { + vote: { + dispute?: { + id?: string; + disputeID?: string; + court?: { name?: string; id?: string }; + period?: string; + ruled?: boolean; + arbitrated?: { id?: string }; + }; + round?: { id?: string }; + voteCount?: number; + vote?: { + voted: boolean; + choice?: string | number; + }; + }; +} + -const VoteCard: React.FC = ({ vote: draw }) => { +const VoteCard: React.FC<IVoteCard> = ({ vote: draw }) => {Alternatively, import the exact type from your GraphQL schema/queries if available.
🧹 Nitpick comments (2)
web/src/pages/Profile/Stakes/CourtCard/index.tsx (1)
58-58: Consider using a<time>element for semantic correctness.The
<label>element is semantically intended for form controls. For displaying dates, a<time>element with adateTimeattribute would be more appropriate and provide better accessibility.🔎 Suggested refactor
-const DateLabel = styled.label``; +const DateLabel = styled.time``;Then update the usage to include the
dateTimeattribute for machine-readable date:{timestamp ? <DateLabel dateTime={new Date(timestamp * 1000).toISOString()}>{formatDate(timestamp)}</DateLabel> : null}web/src/hooks/useStakingEventsByCourt.ts (1)
74-83: Sort order is hardcoded to descending.Line 82 hardcodes
sortByTimeStamp: "DESC"in the pagination variables. If future use cases require different sort orders, consider exposing this as a parameter.For the current staking history use case, descending order (newest first) is appropriate, so this can be deferred.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
web/src/hooks/useStakingEventsByCourt.tsweb/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsxweb/src/pages/Profile/Stakes/CourtCard/CourtName.tsxweb/src/pages/Profile/Stakes/CourtCard/index.tsxweb/src/pages/Profile/Stakes/StakingHistory.tsxweb/src/pages/Profile/Votes/VoteCard/CourtName.tsxweb/src/pages/Profile/Votes/VoteCard/Vote.tsxweb/src/pages/Profile/Votes/VoteCard/index.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- web/src/pages/Courts/CourtDetails/StakingHistoryByCourt/DisplayStakes/index.tsx
- web/src/pages/Profile/Stakes/CourtCard/CourtName.tsx
🧰 Additional context used
🧠 Learnings (10)
📚 Learning: 2025-12-17T14:55:22.988Z
Learnt from: kemuru
Repo: kleros/kleros-v2 PR: 1871
File: web/src/pages/Profile/Votes/index.tsx:69-75
Timestamp: 2025-12-17T14:55:22.988Z
Learning: In `web/src/pages/Profile/Votes/index.tsx`, fetching up to 1000 draws client-side is a temporary solution until the subgraph supports fetching `totalVotes` directly. This is acknowledged technical debt that will be addressed when the subgraph capability becomes available.
Applied to files:
web/src/pages/Profile/Votes/VoteCard/Vote.tsxweb/src/pages/Profile/Votes/VoteCard/index.tsx
📚 Learning: 2024-10-09T10:18:51.089Z
Learnt from: jaybuidl
Repo: kleros/kleros-v2 PR: 1582
File: web-devtools/src/app/(main)/ruler/RulingModes.tsx:179-199
Timestamp: 2024-10-09T10:18:51.089Z
Learning: In `web-devtools/src/app/(main)/ruler/RulingModes.tsx`, the `handleUpdate` function already handles errors via `wrapWithToast`, so additional error handling is unnecessary.
Applied to files:
web/src/pages/Profile/Stakes/StakingHistory.tsx
📚 Learning: 2025-05-15T06:50:40.859Z
Learnt from: tractorss
Repo: kleros/kleros-v2 PR: 1982
File: web/src/pages/Resolver/Landing/index.tsx:62-62
Timestamp: 2025-05-15T06:50:40.859Z
Learning: In the Landing component, it's safe to pass `dispute?.dispute?.arbitrated.id as 0x${string}` to `usePopulatedDisputeData` without additional null checks because the hook internally handles undefined parameters through its `isEnabled` flag and won't execute the query unless all required data is available.
Applied to files:
web/src/pages/Profile/Stakes/StakingHistory.tsxweb/src/pages/Profile/Votes/VoteCard/index.tsx
📚 Learning: 2024-10-09T10:22:41.474Z
Learnt from: jaybuidl
Repo: kleros/kleros-v2 PR: 1582
File: web-devtools/src/app/(main)/ruler/SelectArbitrable.tsx:88-90
Timestamp: 2024-10-09T10:22:41.474Z
Learning: Next.js recommends using the `useEffect` hook to set `isClient` and using `suppressHydrationWarning` as a workaround for handling hydration inconsistencies, especially when dealing with data like `knownArbitrables` that may differ between server-side and client-side rendering. This approach is acceptable in TypeScript/React applications, such as in `web-devtools/src/app/(main)/ruler/SelectArbitrable.tsx`.
Applied to files:
web/src/pages/Profile/Stakes/StakingHistory.tsxweb/src/pages/Profile/Votes/VoteCard/index.tsx
📚 Learning: 2024-12-06T13:04:50.495Z
Learnt from: kemuru
Repo: kleros/kleros-v2 PR: 1774
File: web/src/components/CasesDisplay/index.tsx:61-61
Timestamp: 2024-12-06T13:04:50.495Z
Learning: In `web/src/components/CasesDisplay/index.tsx`, the variables `numberDisputes` and `numberClosedDisputes` can sometimes be `NaN`, and should default to `0` using logical OR (`||`) to prevent display issues in the `StatsAndFilters` component.
Applied to files:
web/src/pages/Profile/Stakes/StakingHistory.tsxweb/src/pages/Profile/Votes/VoteCard/index.tsx
📚 Learning: 2024-11-29T06:23:15.955Z
Learnt from: Harman-singh-waraich
Repo: kleros/kleros-v2 PR: 1762
File: web/src/utils/parseWagmiError.ts:10-17
Timestamp: 2024-11-29T06:23:15.955Z
Learning: In the `web/src/utils/parseWagmiError.ts` file and throughout the codebase, prefer using optional chaining to handle `undefined` or `null` values, including optional arrays, without adding explicit existence or length checks.
Applied to files:
web/src/pages/Profile/Stakes/StakingHistory.tsx
📚 Learning: 2024-11-07T10:48:16.774Z
Learnt from: Harman-singh-waraich
Repo: kleros/kleros-v2 PR: 1739
File: web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx:22-26
Timestamp: 2024-11-07T10:48:16.774Z
Learning: In the `Coherency` component (`web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx`), `totalResolvedVotes` is always greater than or equal to `totalCoherentVotes`. When both are zero, `0/0` results in `NaN`, which is acceptable in this context.
Applied to files:
web/src/pages/Profile/Votes/VoteCard/index.tsx
📚 Learning: 2024-10-28T05:55:12.728Z
Learnt from: Harman-singh-waraich
Repo: kleros/kleros-v2 PR: 1716
File: web-devtools/src/app/(main)/dispute-template/CustomContextInputs.tsx:29-42
Timestamp: 2024-10-28T05:55:12.728Z
Learning: In the `CustomContextInputs` component located at `web-devtools/src/app/(main)/dispute-template/CustomContextInputs.tsx`, the `DisputeRequestParams` array is used to exclude certain variables from the custom input since they are already provided in a preceding component. Therefore, converting it to a type is unnecessary.
Applied to files:
web/src/pages/Profile/Votes/VoteCard/index.tsx
📚 Learning: 2024-12-16T17:17:32.359Z
Learnt from: Harman-singh-waraich
Repo: kleros/kleros-v2 PR: 1794
File: web/src/hooks/useStarredCases.tsx:13-18
Timestamp: 2024-12-16T17:17:32.359Z
Learning: In `useStarredCases.tsx`, when handling the `starredCases` Map from local storage, direct mutation is acceptable to prevent the overhead of copying, provided it doesn't adversely affect React's render cycle.
Applied to files:
web/src/pages/Profile/Votes/VoteCard/index.tsx
📚 Learning: 2024-10-14T13:58:25.708Z
Learnt from: Harman-singh-waraich
Repo: kleros/kleros-v2 PR: 1703
File: web/src/hooks/queries/usePopulatedDisputeData.ts:58-61
Timestamp: 2024-10-14T13:58:25.708Z
Learning: In `web/src/hooks/queries/usePopulatedDisputeData.ts`, the query and subsequent logic only execute when `disputeData.dispute?.arbitrableChainId` and `disputeData.dispute?.externalDisputeId` are defined, so `initialContext` properties based on these values are safe to use without additional null checks.
Applied to files:
web/src/hooks/useStakingEventsByCourt.ts
🧬 Code graph analysis (3)
web/src/pages/Profile/Votes/VoteCard/CourtName.tsx (2)
web/src/components/InternalLink.tsx (1)
InternalLink(4-8)web-devtools/src/styles/Theme.tsx (1)
theme(3-10)
web/src/pages/Profile/Votes/VoteCard/index.tsx (5)
web-devtools/src/styles/Theme.tsx (1)
theme(3-10)web-devtools/src/styles/responsiveSize.ts (1)
responsiveSize(9-12)web/src/components/JurorLink.tsx (1)
ReStyledArrowLink(30-50)web/src/components/StyledArrowLink.tsx (1)
StyledArrowLink(5-27)web/src/hooks/queries/usePopulatedDisputeData.ts (1)
usePopulatedDisputeData(30-84)
web/src/pages/Profile/Stakes/CourtCard/index.tsx (4)
web-devtools/src/styles/Theme.tsx (1)
theme(3-10)web/src/components/StyledArrowLink.tsx (1)
StyledArrowLink(5-27)web/src/utils/date.ts (1)
formatDate(23-37)web/src/utils/index.ts (1)
getTxnExplorerLink(13-14)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: Redirect rules - kleros-v2-neo
- GitHub Check: Header rules - kleros-v2-neo
- GitHub Check: Pages changed - kleros-v2-neo
- GitHub Check: Redirect rules - kleros-v2-testnet-devtools
- GitHub Check: Header rules - kleros-v2-testnet-devtools
- GitHub Check: Pages changed - kleros-v2-testnet-devtools
- GitHub Check: Mend Security Check
- GitHub Check: hardhat-tests
🔇 Additional comments (9)
web/src/pages/Profile/Stakes/CourtCard/index.tsx (5)
6-14: LGTM!Imports are correctly added for the new date display and external transaction link functionality.
18-43: LGTM!The conditional border styling and responsive grid layout are well-implemented. The
isCurrentStakeCardprop provides clear visual distinction between card types.
45-56: LGTM!Clean flex container styling with appropriate responsive adjustment.
60-67: LGTM!SVG sizing override is appropriate for the compact transaction link.
69-76: LGTM!Interface properly extended with optional props for the new functionality.
web/src/pages/Profile/Votes/VoteCard/CourtName.tsx (1)
1-60: LGTM! Clean component implementation.The
CourtNamecomponent is well-structured with proper TypeScript typing, consistent styling patterns, and appropriate use ofInternalLinkfor navigation. The landscape-specific styles handle overflow correctly.web/src/pages/Profile/Votes/VoteCard/Vote.tsx (1)
1-51: LGTM! Proper loading state handling.The
Votecomponent correctly handles the loading state with aSkeletonplaceholder whenchoiceis null, and the interface is properly typed. The overflow handling and text-ellipsis onVoteValueensure long vote choices display gracefully.web/src/pages/Profile/Votes/VoteCard/index.tsx (2)
107-107: Verify the default value logic forvoteCount.Using
draw.voteCount || 1will treat0as falsy and default to1. IfvoteCountcan legitimately be0(e.g., a draw with no votes cast), this should use nullish coalescing instead:-const voteCount = draw.voteCount || 1; +const voteCount = draw.voteCount ?? 1;Please confirm whether
voteCountof0is a valid state in the data model, or if it's guaranteed to be at least1for any draw.
98-146: Solid data extraction and vote choice resolution logic.The component correctly:
- Extracts dispute metadata with safe fallbacks for missing data
- Uses
usePopulatedDisputeDatato fetch answer labels (the hook's internalisEnabledflag safely handles undefined parameters per the codebase pattern)- Implements proper loading state handling via
isLoadingDisputeData- Covers all vote states: not voted, pending, refuse to arbitrate (choice 0), and resolved answers with BigInt comparison for safety
The memoization ensures efficient re-computation only when dependencies change.
| {transactionHash ? ( | ||
| <StyledLink to={getTxnExplorerLink(transactionHash)} target="_blank" rel="noopener noreferrer"> | ||
| <NewTabIcon /> | ||
| </StyledLink> | ||
| ) : null} |
There was a problem hiding this comment.
Add accessible label for screen readers.
The transaction link only contains an icon without any accessible text. Screen reader users won't understand the link's purpose. Add an aria-label to describe the action.
🔎 Suggested fix
{transactionHash ? (
- <StyledLink to={getTxnExplorerLink(transactionHash)} target="_blank" rel="noopener noreferrer">
+ <StyledLink
+ to={getTxnExplorerLink(transactionHash)}
+ target="_blank"
+ rel="noopener noreferrer"
+ aria-label="View transaction on block explorer"
+ >
<NewTabIcon />
</StyledLink>
) : null}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {transactionHash ? ( | |
| <StyledLink to={getTxnExplorerLink(transactionHash)} target="_blank" rel="noopener noreferrer"> | |
| <NewTabIcon /> | |
| </StyledLink> | |
| ) : null} | |
| {transactionHash ? ( | |
| <StyledLink | |
| to={getTxnExplorerLink(transactionHash)} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| aria-label="View transaction on block explorer" | |
| > | |
| <NewTabIcon /> | |
| </StyledLink> | |
| ) : null} |
🤖 Prompt for AI Agents
In web/src/pages/Profile/Stakes/CourtCard/index.tsx around lines 92 to 96, the
transaction link renders only an icon with no accessible text; add an aria-label
to the StyledLink (e.g. aria-label={`View transaction ${transactionHash} on
explorer`} or a shorter fixed label like "View transaction on explorer") so
screen readers can describe the action; ensure the aria-label uses the
transactionHash when available and is added alongside the existing props (to,
target, rel).
| // dynamic atlasUri would go here | ||
| const atlasUri = "https://url.example/graphql"; | ||
|
|
||
| const AUTH_TOKEN = "Bearer tokenExampleGoesHere"; |
There was a problem hiding this comment.
should these be hardcoded?
|
|
||
| return useQuery({ | ||
| queryKey: ["stakingHistoryQuery", take, lastCursorId], | ||
| enabled: true, |
There was a problem hiding this comment.
enabled is true by default, so not necessary to define here
| console.log("Fetching with variables:", variables); | ||
|
|
||
| try { | ||
| const response = await fetch(atlasUri, { |
There was a problem hiding this comment.
let's abstract this request, while following this pattern.
PS: Does it make sense to move this to kleros-app since it acts as a gateway to atlas
| enabled: isEnabled, | ||
| staleTime: 60000, | ||
| queryFn: async () => { | ||
| return await request<StakingEventsResponse>(`${atlasUri}/graphql`, query, variables); |
There was a problem hiding this comment.
same here, can extract out
| currentCourtId?: number; | ||
| } | ||
|
|
||
| const formatDate = (timestamp: string): string => { |
There was a problem hiding this comment.
Can we re-use the utils from utils/date.ts?
| currentCourtId?: number; | ||
| } | ||
|
|
||
| const formatDate = (timestamp: string): string => { |
There was a problem hiding this comment.
seems to be duplicated with DesktopHeader
| currentCourtId={courtId ? parseInt(courtId) : undefined} | ||
| /> | ||
| ))} | ||
| {isFetching && [...Array(9)].map((_, i) => <SkeletonDisputeListItem key={`s-${i}`} />)} |
There was a problem hiding this comment.
wouldn't 9 skeletons be too much on mobile?
|
|
||
| const JurorCard: React.FC<IJurorCard> = ({ searchParamAddress }) => { | ||
| const { data } = useUserQuery(searchParamAddress); | ||
| const totalCoherentVotes = data?.user ? parseInt(data?.user?.totalCoherentVotes) : 0; |
There was a problem hiding this comment.
optional chaining for totalCoherentVotes suggests that it can be undefined, but afaik, it will always be defined right, defaulting to 0
| ) : null} | ||
| {isStaked && !isCurrentStakeLoading ? ( | ||
| <CourtCardsContainer> | ||
| {currentStakeData?.jurorTokensPerCourts |
There was a problem hiding this comment.
we can re-use stakedCourts variable here
| items={[ | ||
| { value: JSON.stringify({}), text: "All Votes", dot: theme.primaryText }, | ||
| { value: JSON.stringify({ ruled: false }), text: "Vote Pending", dot: theme.primaryBlue }, | ||
| { value: JSON.stringify({ ruled: false }), text: "Case In Progress", dot: theme.tint }, |
There was a problem hiding this comment.
Agreed with rabbit here, the component may also behave erratic due to same values
|
|
||
| // Determine the vote choice text based on the dispute template | ||
| const voteChoice = useMemo(() => { | ||
| if (!voteData || !voteData.voted) { |
There was a problem hiding this comment.
In case of hidden votes,voted can be false while the vote while still be committed. So "Did not vote" can be misleading
| const { data: allDrawsData } = useUserDraws( | ||
| searchParamAddress, | ||
| 0, | ||
| 1000, // Fetch up to 1000 draws |
There was a problem hiding this comment.
so we cap at 1000 and don't fetch again right? This is an issue with showing votes on the Voting tab too, since returned entities are capped at 1000 in gql
| // Fetch count data for statistics | ||
| const { data: drawsCountData } = useUserDrawsCount(searchParamAddress, drawFilter); | ||
|
|
||
| const isLoadingVotes = isUndefined(allDrawsData); |
There was a problem hiding this comment.
prefer using the isLoading variable returned by the useQuery hook above
| rawDraws.forEach((draw: any) => { | ||
| const disputeId = draw.dispute?.id; | ||
| const roundId = draw.round?.id; | ||
| const key = `${disputeId}-${roundId}`; |
There was a problem hiding this comment.
roundId is disputeId-roundIndex so key would just be disputeId-disputeId-roundIndex right. We can just use roundId as key
|
|
||
| // Calculate votes pending from count data | ||
| const allDraws = drawsCountData?.user?.draws ?? []; | ||
| const votesPending = allDraws.filter((draw: any) => !draw.vote?.voted).length; |
There was a problem hiding this comment.
Similar to above hidden votes comment, voted is false, but committed can be true. So misleading
tractorss
left a comment
tractorss
left a comment
There was a problem hiding this comment.
looks good, left some comments
PR-Codex overview
This PR focuses on refactoring and improving the structure of the
ProfileandStakescomponents, enhancing the user interface, and updating routing paths for better navigation.Detailed summary
index.tsxfile inweb/src/pages/Profile/JurorInfo/.ILevelCriteriainterface inuserLevelCalculation.ts.app.tsxtoprofile/*.JurorsandSettingsto usestakes/1.JurorsStakedByCourt/HeaderandStakingHistoryByCourt/Header.Headercomponent inStakingHistoryByCourtto manage display.PixelArtandCoherencetoJurorCard/BottomContent.JurorCardto include new structure and components for better clarity.VoteCount,CaseStatus, andJurorRewardscomponents with updated styling.StakingHistoryByCourt/Search.Summary by CodeRabbit
New Features
Refactor
Utilities
✏️ Tip: You can customize this high-level summary in your review settings.