feat: new profile page #1871
feat: new profile page #1871
Conversation
…s, style tweaks, refactors
kemuru
changed the title
WalkthroughThe pull request introduces multiple updates across the web application. Key changes include renaming and refactoring juror-related components (from JurorTitle to JurorLink) with enhanced link logic, updating profile URL structures, and reorganizing import paths to reflect directory restructuring. New components for stakes, cases, and votes have been added alongside new hooks and utility functions. Several styling adjustments and interface modifications enhance consistency and responsiveness across juror and profile pages. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant JL as JurorLink Component
participant R as Router/Link Processor
U->>JL: Clicks on juror link
JL->>JL: Check isInternalLink prop
alt Internal link
JL->>R: Navigate to `/profile/stakes/1?address=...`
R-->>U: Renders internal profile page
else External link
JL->>JL: Compute addressExplorerLink using DEFAULT_CHAIN
JL->>R: Render link with target="_blank", rel="noreferrer"
R-->>U: Opens external block explorer in new tab
end
sequenceDiagram
participant U as User
participant T as TabsComponent
participant P as Profile Page
participant RR as React Router
U->>T: Selects a tab
T->>P: Trigger handleTabChange()
P->>RR: Update URL (e.g., `/profile/*`)
RR-->>P: Render routed component based on tab selection
P-->>U: Display refreshed tab content
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
❌ Deploy Preview for kleros-v2-university failed. Why did it fail? →
|
✅ Deploy Preview for kleros-v2-neo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ 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 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 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
|
PR-Codex overview
This PR focuses on refactoring the
Profilepage and related components to streamline user experience, enhance code organization, and update navigation paths. Key components have been moved, renamed, and adjusted for improved maintainability.Detailed summary
JurorInfoandCourts.ILevelCriteriainterface for user level data.Profilepage to use a wildcard path.JurorsandHeadercomponents to point to new paths.PixelArtandCoherenceto new paths inJurorCard.Round,StatsAndFilters, andVoteCard.VoteandCaseStatuscomponents for better structure.JurorLinkcomponent to replaceJurorTitle.StakingHistoryandCurrentStakescomponents with new layouts.JurorRewardsto use a new layout and props.Summary by CodeRabbit
New Features
Refactor
Style