feat: new profile page #1871
feat: new profile page #1871
Conversation
…s, style tweaks, refactors
kemuru
changed the title
WalkthroughThis pull request introduces significant changes to the web application's profile and navigation structure. The modifications primarily focus on restructuring the profile pages, updating the Changes
Sequence DiagramsequenceDiagram
participant User
participant ProfilePage
participant TabNavigation
participant ContentComponent
User->>ProfilePage: Navigate to Profile
ProfilePage->>TabNavigation: Render Tabs
TabNavigation-->>User: Display "Stakes", "Cases", "Votes" tabs
User->>TabNavigation: Select Tab
TabNavigation->>ProfilePage: Update URL
ProfilePage->>ContentComponent: Load Corresponding Content
ContentComponent-->>User: Display Selected 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 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kleros-v2-neo ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kleros-v2-testnet ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kleros-v2-testnet-devtools ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 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
| const Container = styled.div` | ||
| display: flex; | ||
| flex-direction: row | ||
| align-items: center; | ||
| gap: 16px 24px; | ||
| flex-wrap: wrap; | ||
| `; |
There was a problem hiding this comment.
Fix syntax error in styled component.
Missing semicolon after flex-direction: row in the Container styled component.
const Container = styled.div`
display: flex;
- flex-direction: row
+ flex-direction: row;
align-items: center;
gap: 16px 24px;
flex-wrap: wrap;
`;📝 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.
| const Container = styled.div` | |
| display: flex; | |
| flex-direction: row | |
| align-items: center; | |
| gap: 16px 24px; | |
| flex-wrap: wrap; | |
| `; | |
| const Container = styled.div` | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| gap: 16px 24px; | |
| flex-wrap: wrap; | |
| `; |
| interface ITopContent { | ||
| address: `0x${string}`; | ||
| totalResolvedDisputes: number; | ||
| } |
There was a problem hiding this comment.
💡 Codebase verification
Add runtime address validation using viem's isAddress function.
The interface uses TypeScript's template literal type for compile-time validation, but runtime validation is missing. Add validation using viem's isAddress function in the JurorInfo component before using the address in queries and child components:
import { isAddress } from "viem";
const JurorInfo: React.FC<IJurorInfo> = ({ addressToQuery }) => {
if (!isAddress(addressToQuery)) {
return <div>Invalid address format</div>;
}
// ... rest of the component
};🔗 Analysis chain
Add validation for address format.
The interface accepts any string that matches the template literal type 0x${string}, but there's no runtime validation to ensure the address is valid.
Consider adding a utility function to validate the address format and length. Here's a script to check for similar validation patterns in the codebase:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for address validation patterns
rg -A 3 'function.*validate.*[Aa]ddress|isValidAddress'
Length of output: 82726
Script:
#!/bin/bash
# Search for address-related types and validation in TypeScript files
echo "=== Searching for address types and interfaces ==="
rg -t typescript "type.*[Aa]ddress|interface.*[Aa]ddress" -A 2
echo -e "\n=== Searching for address validation functions ==="
rg -t typescript "function.*validate.*[Aa]ddress|const.*validate.*[Aa]ddress|export.*validate.*[Aa]ddress" -A 2
Length of output: 476
Script:
#!/bin/bash
# Search for address-related code in TypeScript files
echo "=== Searching for address types and interfaces ==="
rg "type.*[Aa]ddress|interface.*[Aa]ddress" --type-add 'ts:*.{ts,tsx}' -t ts -A 2
echo -e "\n=== Searching for address validation functions ==="
rg "function.*validate.*[Aa]ddress|const.*validate.*[Aa]ddress|export.*validate.*[Aa]ddress|isAddress|utils\.isAddress" --type-add 'ts:*.{ts,tsx}' -t ts -A 2
echo -e "\n=== Searching for ethers.js imports ==="
rg "from ['\"]ethers['\"]|from ['\"]@ethersproject" --type-add 'ts:*.{ts,tsx}' -t ts -A 2
Length of output: 68407
Script:
#!/bin/bash
# Search for TopContent component usage and implementation
echo "=== Searching for TopContent component usage ==="
rg -l "TopContent" --type-add 'ts:*.{ts,tsx}' -t ts
echo -e "\n=== Checking TopContent implementation ==="
rg "export.*TopContent|function.*TopContent|const.*TopContent" --type-add 'ts:*.{ts,tsx}' -t ts -A 10
Length of output: 2133
Script:
#!/bin/bash
# Check JurorLink and parent component implementations
echo "=== Checking JurorLink implementation ==="
rg "export.*JurorLink|function.*JurorLink|const.*JurorLink" --type-add 'ts:*.{ts,tsx}' -t ts -A 10
echo -e "\n=== Checking parent component usage ==="
cat "web/src/pages/Profile/JurorInfo/index.tsx"
Length of output: 3170
| const LeftContent = styled.div` | ||
| display: flex; | ||
| flex-direction: row; | ||
| gap: 48px; | ||
| flex-direction: column; | ||
|
|
||
| ${landscapeStyle( | ||
| () => css` | ||
| flex-direction: row; | ||
| ` | ||
| )} | ||
| `; |
There was a problem hiding this comment.
Remove duplicate flex-direction property.
The LeftContent styled component has duplicate flex-direction declarations.
const LeftContent = styled.div`
display: flex;
- flex-direction: row;
gap: 48px;
flex-direction: column;
${landscapeStyle(
() => css`
flex-direction: row;
`
)}
`;📝 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.
| const LeftContent = styled.div` | |
| display: flex; | |
| flex-direction: row; | |
| gap: 48px; | |
| flex-direction: column; | |
| ${landscapeStyle( | |
| () => css` | |
| flex-direction: row; | |
| ` | |
| )} | |
| `; | |
| const LeftContent = styled.div` | |
| display: flex; | |
| gap: 48px; | |
| flex-direction: column; | |
| ${landscapeStyle( | |
| () => css` | |
| flex-direction: row; | |
| ` | |
| )} | |
| `; |
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?
| @@ -0,0 +1,8 @@ | |||
| import React from "react"; | |||
|
|
|||
| interface IVotes {} | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove empty interface.
The empty interface doesn't provide any value and can be removed. The component can directly use React.FC without an interface until props are needed.
-interface IVotes {}
-
-const Votes: React.FC<IVotes> = () => {
+const Votes: React.FC = () => {📝 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.
| interface IVotes {} | |
| const Votes: React.FC = () => { | |
| // Component implementation remains here. | |
| }; |
🧰 Tools
🪛 Biome (1.9.4)
[error] 2-3: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
|
Code Climate has analyzed commit f701d8f and detected 40 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: 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.
PR-Codex overview
This PR focuses on refactoring the
Profilecomponent structure, specifically renaming and reorganizing theJurorInfotoJurorCard, improving routing paths, and enhancing the user interface for better clarity and functionality.Detailed summary
JurorInfotoJurorCardand adjusted related imports.JurorLinkcomponent to replaceJurorTitle.app.tsxfor the profile section.Votescomponent.Coherence,PixelArt, andJurorRewardscomponents to new paths.StakesandCasescomponents to usesearchParamAddress.Summary by CodeRabbit
Release Notes
New Features
Improvements
Changes
Refactoring