Release v2-testnet-4.0.5 #1829
Release v2-testnet-4.0.5 #1829
Conversation
fix(web): min-stake-check
feat(web): lang-direction
Feat/dispute dates and hashes link
…ication feat(web): stake-popup-notification-info
feat: public dashboards
…, remove verdict description
feat: add the search bar in courts page
chore(refactor): update-ui-lib
feat(web): add-subgraph-status-banner
refactor(web): courts-stat
fix(web): navbar-padding
|
Warning Rate limit exceeded@jaybuidl has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 4 minutes and 9 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (6)
WalkthroughThis pull request introduces comprehensive updates across multiple components of the Kleros V2 web application and subgraph. The changes primarily focus on enhancing data sources, improving transaction and dispute tracking, and refining the user interface. Key modifications include updating Ethereum contract addresses and start blocks in the subgraph configuration, adding new fields to track transaction details for disputes and justifications, and implementing automatic text direction handling across various components. Changes
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-testnet ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kleros-v2-neo ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
❌ Deploy Preview for kleros-v2-neo-devtools failed. Why did it fail? →
|
❌ Deploy Preview for kleros-v2-testnet-devtools failed. Why did it fail? →
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (23)
web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/Header.tsx (3)
77-81: Consider using a fixed width for the Skeleton.To prevent layout shifts during loading, consider using a fixed width that accommodates the maximum possible value length.
- <Skeleton width={50} /> + <Skeleton width={120} />
93-102: Enhance tooltip message clarity.The tooltip message about stake execution delay could be more specific about when the update will occur.
- tooltipMsg="The stake is confirmed! It is standard procedure to delay the execution of a change in stakes if the phase of the arbitrator is not currently Staking. It'll be updated shortly." + tooltipMsg="The stake is confirmed! If the arbitrator is not in the Staking phase, the stake will be executed at the start of the next Staking phase. Your balance will update automatically."
Line range hint
103-109: Add error handling for amount conversion.Consider adding error handling for the
uncommifyconversion to handle invalid amount strings gracefully.+ amountToStake: Number.isNaN(Number(uncommify(amount))) ? 0 : Number(uncommify(amount)), - amountToStake: Number(uncommify(amount)),web/src/pages/Courts/CourtDetails/TopSearch.tsx (3)
23-94: Consider improving accessibility of interactive elements.The styled components look good, but there are a few accessibility improvements that could be made:
- Add
aria-labelto the search input for screen readers:const StyledSearchbar = styled(Searchbar)` width: 100%; input { font-size: 16px; height: 45px; padding-top: 0px; padding-bottom: 0px; + aria-label: "Search courts" } `;
- Add keyboard navigation support to the court cards:
const StyledCard = styled(Card)<{ selected: boolean }>` ${hoverShortTransitionTiming} height: auto; width: 100%; padding: ${({ selected }) => (selected ? "16px 13px" : "16px")}; cursor: pointer; border: none; border-left: ${({ selected, theme }) => (selected ? `3px solid ${theme.primaryBlue}` : "none")}; background-color: ${({ selected, theme }) => (selected ? theme.mediumBlue : "transparent")}; :hover { background-color: ${({ theme }) => theme.mediumBlue}; } + :focus-visible { + outline: 2px solid ${({ theme }) => theme.primaryBlue}; + outline-offset: -2px; + } `;
96-103: Consider memoizing the flattenCourts helper function.The
flattenCourtsfunction is called within auseMemohook but could benefit from memoization itself to avoid unnecessary recalculations.-function flattenCourts(court, parent = null) { +const flattenCourts = React.useCallback((court, parent = null) => { const current = { ...court, parentName: parent?.name ?? null, }; const children = (court.children || []).flatMap((child) => flattenCourts(child, current)); return [current, ...children]; -} +}, []);
105-164: Consider performance optimizations and error handling.The component implementation looks good but could benefit from some improvements:
- Debounce the search input to prevent excessive re-renders:
+import { useDebouncedCallback } from "use-debounce"; const TopSearch: React.FC = () => { // ... const [search, setSearch] = useState(""); + const debouncedSetSearch = useDebouncedCallback( + (value: string) => setSearch(value), + 300 + ); return ( // ... <StyledSearchbar value={search} - onChange={(e) => setSearch(e.target.value)} + onChange={(e) => debouncedSetSearch(e.target.value)} /> // ... ); };
- Add error handling for the court data fetch:
const TopSearch: React.FC = () => { - const { data } = useCourtTree(); + const { data, error } = useCourtTree(); // ... return ( <Container> + {error && ( + <div role="alert"> + Failed to load courts. Please try again later. + </div> + )} {items ? ( // ... ) : ( <StyledSkeleton width={240} height={42} /> )} </Container> ); };web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx (1)
37-44: Consider improving route handling and type safetyWhile the implementation works, consider these improvements:
- Extract the route path to a constants file for better maintainability
- Add URL encoding for the address parameter
- Consider using a type-safe routing solution
Here's a suggested improvement:
+const DASHBOARD_ROUTE = '/dashboard/1/desc/all'; + const JurorTitle: React.FC<IJurorTitle> = ({ address }) => { - const dashboardLink = `/dashboard/1/desc/all?address=${address}`; + const dashboardLink = `${DASHBOARD_ROUTE}?address=${encodeURIComponent(address)}`;web/src/hooks/useCoinPrice.tsx (1)
Line range hint
16-20: Enhance type safety and error handling.Consider improving:
- Type safety of
fetchCoinPrices- Error handling for the fetch call
-const fetchCoinPrices = async (...coinIds) => { +const fetchCoinPrices = async (...coinIds: string[]): Promise<Prices> => { const response = await fetch(`https://coins.llama.fi/prices/current/${coinIds.join(",")}?searchWidth=1h`); + if (!response.ok) { + throw new Error(`Failed to fetch coin prices: ${response.statusText}`); + } const data = await response.json(); return data.coins; };web/src/components/Verdict/Answer.tsx (1)
20-22: Improve clarity of ruling display.Consider:
- Using a more explicit condition
- Padding the hex representation
<AnswerTitleAndDescription> - {currentRuling !== 0 ? <small>Answer 0x{currentRuling}</small> : <small>Refuse to Arbitrate</small>} + {currentRuling > 0 ? ( + <small>Answer 0x{currentRuling.toString(16).padStart(2, '0')}</small> + ) : ( + <small>Refuse to Arbitrate</small> + )} </AnswerTitleAndDescription>web/src/components/LabeledInput.tsx (1)
33-33: Applydir="auto"conditionally based on input type.Based on previous feedback in PR #1808, numeric input fields don't require text direction handling since it's unnecessary for purely numeric content.
- <StyledField dir="auto" {...props} id={props?.label} /> + <StyledField {...props} dir={props.type === 'number' ? undefined : 'auto'} id={props?.label} />web/src/utils/getDrawnJurorsWithCount.ts (1)
22-23: Consider defensive coding for deeply nested optional properties.The code accesses deeply nested optional properties. While optional chaining makes this safe, consider extracting the justification first for better readability and maintainability.
+ const justification = current.vote?.justification; transactionHash: current.vote?.justification?.transactionHash, timestamp: current.vote?.justification?.timestamp,web/src/pages/Courts/CourtDetails/Stats/index.tsx (1)
53-58: Improve type safety for court dataThe component could benefit from stronger type checking for the court data and prices.
Consider adding type guards:
+import { CourtDetailsQuery } from 'generated/graphql'; + +const isValidCourt = (court: CourtDetailsQuery['court'] | undefined): court is CourtDetailsQuery['court'] => { + return court !== null && court !== undefined; +}; + const Stats = () => { const { id } = useParams(); const { data } = useCourtDetails(id); const coinIds = [CoinIds.PNK, CoinIds.ETH]; const { prices: pricesData } = useCoinPrice(coinIds); const isDesktop = useIsDesktop(); + + if (!isValidCourt(data?.court)) { + return null; + }web/src/pages/Courts/CourtDetails/Stats/StatsContent.tsx (1)
59-121: Consider reducing code duplication and improving maintainability.
- The stats mapping logic is repeated three times. Consider extracting it into a reusable component:
const StatSection: React.FC<{ stats: typeof stats; startIndex: number; endIndex: number; court: CourtDetailsQuery["court"]; pricesData?: Prices; coinIds: string[]; }> = ({ stats, startIndex, endIndex, ...props }) => ( <StyledCard> {stats.slice(startIndex, endIndex).map(/* existing mapping logic */)} </StyledCard> );
- Consider defining the slice indices as named constants to improve maintainability:
const SECTIONS = { PARAMETERS: { start: 0, end: 3 }, ACTIVITY: { start: 3, end: 7 }, TOTAL_REWARDS: { start: 7, end: 9 } } as const;web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx (1)
95-100: LGTM! Good accessibility improvement.The addition of
dir="auto"enhances the text direction handling, particularly beneficial for RTL languages.Consider adding a placeholder translation for RTL languages to fully support the internationalization effort:
- placeholder="Your Arguments" + placeholder={t("evidence.arguments.placeholder")}subgraph/core/src/entities/Dispute.ts (1)
24-24: LGTM! Good addition for transaction tracking.Adding
transactionHashimproves traceability and debugging capabilities.Consider adding these additional fields for enhanced tracking:
dispute.transactionHash = event.transaction.hash.toHexString(); +dispute.blockNumber = event.block.number; +dispute.gasUsed = event.transaction.gasUsed;web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx (1)
78-98: Improve component naming for better clarity.The component
VotedTextis used as a base forJustificationText, but their names don't reflect this relationship. Consider renaming them to better represent their hierarchy and purpose, such asBaseTextandJustificationText.-const VotedText = styled.label` +const BaseText = styled.label` color: ${({ theme }) => theme.secondaryText}; font-size: 16px; ::before { content: "Voted: "; color: ${({ theme }) => theme.primaryText}; } `; -const JustificationText = styled(VotedText)` +const JustificationText = styled(BaseText)` line-height: 1.25; ::before { content: "Justification: "; } `;web/src/components/EvidenceCard.tsx (1)
Line range hint
142-162: Consider consolidating hover styles.The
ExternalLinkHoverStyleandAddresshover styles are similar. Consider consolidating them into a single reusable style.+const commonHoverStyle = css` + :hover { + color: ${({ theme }) => theme.secondaryBlue}; + } +`; const ExternalLinkHoverStyle = css` :hover { text-decoration: underline; color: ${({ theme }) => theme.primaryBlue}; cursor: pointer; } :hover { label { text-decoration: underline; color: ${({ theme }) => theme.primaryBlue}; cursor: pointer; } } `; const Address = styled.p` margin: 0; - :hover { - color: ${({ theme }) => theme.secondaryBlue}; - } + ${commonHoverStyle} `;web/src/components/Verdict/DisputeTimeline.tsx (1)
58-68: Consider extracting hover styles to a reusable component.The
StyledNewTabIconhover styles could be extracted into a reusable styled component for consistency across the application.+const IconHoverStyle = css` + :hover { + path { + fill: ${({ theme }) => theme.secondaryBlue}; + } + } +`; const StyledNewTabIcon = styled(NewTabIcon)` margin-bottom: 2px; path { fill: ${({ theme }) => theme.primaryBlue}; } - :hover { - path { - fill: ${({ theme }) => theme.secondaryBlue}; - } - } + ${IconHoverStyle} `;web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx (1)
270-272: LGTM! Consider extracting the stake validation logic.The stake validation logic is correct, ensuring the total stake meets the minimum requirement. However, for better readability, consider extracting this validation into a separate function.
+const isStakeBelowMinimum = (jurorBalance: bigint, parsedAmount: bigint, minStake: bigint): boolean => { + return jurorBalance + parsedAmount < minStake; +}; const isDisabled = useMemo(() => { if ( parsedAmount == 0n || (action === ActionType.stake && courtDetails && jurorBalance && parsedAmount !== 0n && - jurorBalance[2] + parsedAmount < BigInt(courtDetails?.court?.minStake)) + isStakeBelowMinimum(jurorBalance[2], parsedAmount, BigInt(courtDetails?.court?.minStake))) ) return true;subgraph/core/src/KlerosCore.ts (1)
187-188: LGTM! Consider adding block number for complete traceability.The addition of
rulingTransactionHashandrulingTimestampenhances dispute tracking. For complete traceability, consider also storing the block number.dispute.rulingTransactionHash = event.transaction.hash.toHexString(); dispute.rulingTimestamp = event.block.timestamp; +dispute.rulingBlockNumber = event.block.number;web/src/components/CasesDisplay/Filters.tsx (1)
6-6: LGTM! Consider handling empty search params.The changes correctly preserve search parameters during navigation. Consider handling the case when
searchParams.toString()is empty to avoid unnecessary query string.-navigate(`${location}/1/${order}/${encodedFilter}?${searchParams.toString()}`); +const queryString = searchParams.toString(); +navigate(`${location}/1/${order}/${encodedFilter}${queryString ? `?${queryString}` : ''}`);Also applies to: 58-58, 63-63, 68-68
web/src/pages/Dashboard/Courts/index.tsx (1)
Line range hint
61-67: Remove duplicated filtering logic.The
filteroperation is duplicated. Consider extracting the filtered courts to a variable.- {stakeData?.jurorTokensPerCourts - ?.filter(({ staked }) => staked > 0) - .map(({ court: { id, name }, staked }) => ( + {stakedCourts?.map(({ court: { id, name }, staked }) => ( <CourtCard key={id} name={name ?? ""} stake={staked} {...{ id }} /> ))}web/src/layout/Header/index.tsx (1)
43-57: Consider adjusting the watcher threshold.The current configuration polls every 60 seconds with a 5000 blocks threshold, which might be too aggressive for testnet monitoring.
Consider increasing the interval and threshold for testnet:
- watcherOptions={{ threshold: 5000, interval: 60_000 }} // 5000 blocks threshold, 60 sec interval check + watcherOptions={{ threshold: 10000, interval: 180_000 }} // 10000 blocks threshold, 3 min interval check
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (58)
subgraph/core-neo/subgraph.yaml(5 hunks)subgraph/core/schema.graphql(3 hunks)subgraph/core/src/DisputeKitClassic.ts(1 hunks)subgraph/core/src/KlerosCore.ts(1 hunks)subgraph/core/src/entities/Dispute.ts(1 hunks)subgraph/package.json(1 hunks)web-devtools/package.json(1 hunks)web/package.json(2 hunks)web/src/components/CasesDisplay/Filters.tsx(2 hunks)web/src/components/CasesDisplay/Search.tsx(4 hunks)web/src/components/DisputePreview/Alias.tsx(1 hunks)web/src/components/DisputePreview/DisputeContext.tsx(3 hunks)web/src/components/DisputeView/DisputeCardView.tsx(1 hunks)web/src/components/DisputeView/DisputeListView.tsx(2 hunks)web/src/components/EvidenceCard.tsx(5 hunks)web/src/components/Field.tsx(2 hunks)web/src/components/LabeledInput.tsx(1 hunks)web/src/components/TxnHash.tsx(2 hunks)web/src/components/Verdict/Answer.tsx(2 hunks)web/src/components/Verdict/DisputeTimeline.tsx(7 hunks)web/src/components/Verdict/FinalDecision.tsx(3 hunks)web/src/hooks/queries/useDisputeDetailsQuery.ts(1 hunks)web/src/hooks/queries/useVotingHistory.ts(2 hunks)web/src/hooks/useCoinPrice.tsx(1 hunks)web/src/layout/Header/index.tsx(2 hunks)web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx(2 hunks)web/src/pages/Cases/CaseDetails/Evidence/EvidenceSearch.tsx(1 hunks)web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx(2 hunks)web/src/pages/Cases/CaseDetails/Voting/Classic/JustificationArea.tsx(1 hunks)web/src/pages/Cases/CaseDetails/Voting/Classic/OptionsContainer.tsx(1 hunks)web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx(2 hunks)web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx(3 hunks)web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx(4 hunks)web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx(2 hunks)web/src/pages/Courts/CourtDetails/StakePanel/Simulator/QuantityToSimulate.tsx(2 hunks)web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx(2 hunks)web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/Header.tsx(4 hunks)web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/index.tsx(3 hunks)web/src/pages/Courts/CourtDetails/Stats.tsx(0 hunks)web/src/pages/Courts/CourtDetails/Stats/StatsContent.tsx(1 hunks)web/src/pages/Courts/CourtDetails/Stats/index.tsx(1 hunks)web/src/pages/Courts/CourtDetails/Stats/stats.ts(1 hunks)web/src/pages/Courts/CourtDetails/TopSearch.tsx(1 hunks)web/src/pages/Courts/CourtDetails/index.tsx(2 hunks)web/src/pages/Courts/TopSearch.tsx(0 hunks)web/src/pages/Courts/index.tsx(0 hunks)web/src/pages/Dashboard/Courts/Header.tsx(2 hunks)web/src/pages/Dashboard/Courts/index.tsx(3 hunks)web/src/pages/Dashboard/JurorInfo/Header.tsx(2 hunks)web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx(1 hunks)web/src/pages/Dashboard/JurorInfo/index.tsx(2 hunks)web/src/pages/Dashboard/index.tsx(2 hunks)web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx(3 hunks)web/src/pages/Resolver/Briefing/Description.tsx(1 hunks)web/src/pages/Resolver/Briefing/Title.tsx(1 hunks)web/src/pages/Resolver/Parameters/Category.tsx(1 hunks)web/src/utils/getDrawnJurorsWithCount.ts(1 hunks)web/src/utils/index.ts(1 hunks)
💤 Files with no reviewable changes (3)
- web/src/pages/Courts/TopSearch.tsx
- web/src/pages/Courts/CourtDetails/Stats.tsx
- web/src/pages/Courts/index.tsx
✅ Files skipped from review due to trivial changes (2)
- web/src/pages/Cases/CaseDetails/Voting/Classic/OptionsContainer.tsx
- web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx
🧰 Additional context used
📓 Learnings (5)
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx (1)
Learnt from: Harman-singh-waraich
PR: kleros/kleros-v2#1725
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx:5-5
Timestamp: 2024-11-12T04:49:37.993Z
Learning: In the codebase, the `isEmpty` function is always called after ensuring the input is defined using `isUndefined`, so `isEmpty` does not need to handle undefined inputs.
web/src/components/LabeledInput.tsx (1)
Learnt from: Harman-singh-waraich
PR: kleros/kleros-v2#1808
File: web/src/components/LabeledInput.tsx:33-33
Timestamp: 2024-12-19T10:16:28.832Z
Learning: Numeric input fields do not require "dir=auto" since text direction is unnecessary for purely numeric content.
web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/index.tsx (1)
Learnt from: Harman-singh-waraich
PR: kleros/kleros-v2#1775
File: web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx:0-0
Timestamp: 2024-12-09T12:36:59.441Z
Learning: In the `StakeWithdrawButton` component, the transaction flow logic is tightly linked to component updates, so extracting it into a custom hook does not provide significant benefits.
web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx (1)
Learnt from: Harman-singh-waraich
PR: kleros/kleros-v2#1775
File: web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx:0-0
Timestamp: 2024-12-09T12:36:59.441Z
Learning: In the `StakeWithdrawButton` component, the transaction flow logic is tightly linked to component updates, so extracting it into a custom hook does not provide significant benefits.
web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/Header.tsx (1)
Learnt from: Harman-singh-waraich
PR: kleros/kleros-v2#1775
File: web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx:0-0
Timestamp: 2024-12-09T12:36:59.441Z
Learning: In the `StakeWithdrawButton` component, the transaction flow logic is tightly linked to component updates, so extracting it into a custom hook does not provide significant benefits.
⏰ Context from checks skipped due to timeout of 90000ms (18)
- 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-university
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- 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: Copy labels from linked issues
- GitHub Check: SonarCloud
- GitHub Check: contracts-testing
- GitHub Check: Analyze (javascript)
- GitHub Check: dependency-review
- GitHub Check: Copy labels from linked issues
🔇 Additional comments (71)
web/src/pages/Courts/CourtDetails/StakePanel/Simulator/QuantityToSimulate.tsx (1)
Line range hint
20-31: LGTM! Clean component exports.The exports of
TextWithTooltipContainerandQuantitystyled components promote code reuse while maintaining their original styling and functionality.Also applies to: 32-35
web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/Header.tsx (3)
4-4: LGTM! Clean import organization.The new imports are well-organized and necessary for the enhanced functionality.
Also applies to: 12-12, 16-16, 18-20
51-53: LGTM! Improved spacing.The added margin improves the visual hierarchy.
55-59: LGTM! Clean container styling.The
QuantityContaineruses flexbox appropriately for centering and spacing its children.web/src/pages/Courts/CourtDetails/index.tsx (2)
18-18: LGTM! Clean import statements.The imports are well-organized and properly separated.
Also applies to: 28-28
117-117: LGTM! TopSearch component placement.The TopSearch component is appropriately placed at the top of the container, before the main court details card.
web/src/pages/Courts/CourtDetails/TopSearch.tsx (1)
1-21: LGTM! Well-organized imports.The imports are logically grouped and follow a clear pattern:
- React and core dependencies
- Third-party libraries
- Internal utilities and hooks
- Styles
- Components
web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx (3)
1-1: LGTM! Clean import changesThe transition from ExternalLink to InternalLink is well-structured and aligns with the internal navigation strategy.
Also applies to: 5-5
23-29: LGTM! Well-structured styled componentThe styled component maintains consistent hover behavior and properly utilizes theme variables for color management.
37-37: Verify consistent route structure across the applicationLet's ensure the dashboard route structure is consistent across the application.
✅ Verification successful
Route structure is consistent across the application
The dashboard route
/dashboard/1/desc/allfollows the defined patterndashboard/:page/:order/:filterand is consistently used across multiple components, including the navigation menu and various juror-related components.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for dashboard route patterns to verify consistency echo "Checking dashboard route patterns..." rg -t tsx -t ts "/dashboard/\d+/desc/all" ./web/srcLength of output: 164
Script:
#!/bin/bash # Search for dashboard routes with broader pattern and context echo "Searching for dashboard route patterns..." rg -A 2 "/dashboard/" ./web/src # Also check for route definitions echo -e "\nChecking route definitions..." rg -A 2 "path.*dashboard" ./web/srcLength of output: 2190
web/src/hooks/useCoinPrice.tsx (1)
9-11: LGTM! Type definition looks good.The
Pricestype accurately represents the structure of the coin price data.web/src/components/Verdict/Answer.tsx (1)
16-18: LGTM! Text direction handling looks good.The
dir="auto"attribute ensures proper text direction based on content.web/src/pages/Cases/CaseDetails/Voting/Classic/JustificationArea.tsx (1)
26-26: LGTM! Good improvement for multilingual support.The addition of
dir="auto"enhances the component's ability to handle text in different writing systems by automatically determining the appropriate text direction.web/src/components/TxnHash.tsx (1)
6-6: LGTM! Good refactoring to improve code organization.Moving the transaction explorer URL construction to a utility function improves maintainability and reduces direct dependencies on chain-specific logic.
Also applies to: 26-26
web/src/pages/Resolver/Briefing/Title.tsx (1)
47-47: LGTM! Good improvement for multilingual support.The addition of
dir="auto"enhances the component's ability to handle text in different writing systems by automatically determining the appropriate text direction.web/src/hooks/queries/useDisputeDetailsQuery.ts (1)
37-38: LGTM! Enhanced dispute tracking with transaction details.The addition of
rulingTimestampandrulingTransactionHashfields improves the dispute tracking capabilities by providing crucial metadata about when and in which transaction the ruling was made.web/src/components/DisputePreview/Alias.tsx (1)
49-49: LGTM! Improved i18n support.Adding
dir="auto"enhances the component's handling of different text directions, particularly beneficial for RTL languages. This change aligns with similar improvements across other components.web/src/hooks/queries/useVotingHistory.ts (1)
15-15: LGTM! Enhanced voting history tracking.The addition of transaction and timestamp metadata fields improves the traceability of disputes and vote justifications, providing valuable context for the voting history.
Also applies to: 33-34
web/src/pages/Resolver/Briefing/Description.tsx (1)
40-40: LGTM! Enhanced text direction support.Adding
dir="auto"improves the handling of different text directions in the description text area, particularly important for user-input fields that may contain RTL text.web/src/pages/Resolver/Parameters/Category.tsx (1)
51-51: LGTM: Text direction enhancement for multilingual supportThe addition of
dir="auto"improves the handling of right-to-left (RTL) and left-to-right (LTR) text input, making the category field more accessible for multilingual users.web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx (1)
5-5: LGTM: Consistent text direction handling and utility importThe changes maintain code consistency by:
- Adding the
isEmptyutility import, which is correctly used afterisUndefinedchecks- Adding
dir="auto"for proper text direction handling, consistent with other componentsAlso applies to: 62-62
web/src/pages/Cases/CaseDetails/Evidence/EvidenceSearch.tsx (1)
51-51: LGTM: Enhanced search input with text direction supportThe addition of
dir="auto"to the search bar improves the handling of multilingual search queries, maintaining consistency with other text input components.web/src/components/DisputeView/DisputeListView.tsx (2)
12-12: LGTM!The
responsiveSizeimport is correctly used in theTitleContainerwidth calculation.
40-40: Good improvements for layout and internationalization!The changes enhance the component in two ways:
flex: 1ensures proper space utilization in the title containerdir="auto"improves support for RTL languages by automatically detecting text directionAlso applies to: 45-45
web/src/components/Field.tsx (1)
103-103: LGTM! Consistent internationalization improvement.Adding
dir="auto"toFieldContainerproperly handles text direction for all content within fields, maintaining consistency with similar changes across other components.web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx (2)
91-91: LGTM! Clear and consistent link construction.The dashboard link is correctly constructed using the juror address.
45-52: Good improvement in navigation and styling!The changes enhance the component by:
- Using
InternalLinkfor better internal navigation- Maintaining consistent styling with the theme using
secondaryBlueAlso applies to: 97-99
web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/index.tsx (1)
91-93: Good UI enhancement using standardized components!The replacement of the custom info card with
AlertMessageimproves consistency and provides clear guidance about notification settings. The conditional rendering and styling are well-implemented.Also applies to: 112-119
web/src/components/CasesDisplay/Search.tsx (4)
56-58: LGTM! Good initialization of navigation and initial render tracking.The setup of
initialRenderRefand navigation hooks is clean and follows React best practices.
62-69: LGTM! Well-implemented debounce logic with initial render handling.The enhanced debounce logic correctly:
- Prevents unnecessary navigation on initial render
- Preserves existing search parameters
- Handles empty search cases appropriately
94-94: LGTM! Consistent navigation implementation.The navigation logic correctly preserves search parameters during court selection, maintaining consistency with the search functionality.
102-102: LGTM! Good accessibility enhancement.The addition of
dir="auto"improves multilingual support by allowing automatic text direction based on content.web/src/components/DisputePreview/DisputeContext.tsx (3)
79-81: LGTM! Consistent text direction handling for title.The addition of
dir="auto"to the title maintains accessibility while preserving error handling functionality.
85-92: LGTM! Consistent text direction handling for markdown content.The addition of
dir="auto"to both question and description markdown wrappers ensures proper text direction for multilingual content.
106-106: LGTM! Proper text direction handling for answers.The addition of
dir="auto"to the answer component ensures consistent multilingual support across all text content.web/src/pages/Courts/CourtDetails/Stats/stats.ts (1)
19-26: LGTM! Well-designed interface for statistics.The
IStatinterface is well-structured with proper typing and appropriate use of optional properties.web/src/pages/Courts/CourtDetails/Stats/StatsContent.tsx (1)
54-58: LGTM! Well-structured component props.The props are properly typed with appropriate use of optional properties and clear naming.
web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx (1)
50-50: LGTM! Clean implementation of RTL support.The addition of
ReactMarkdownWrapperwithdir="auto"is a good approach to handle text direction for markdown content.Also applies to: 98-100
web/src/components/Verdict/FinalDecision.tsx (2)
38-38: Good improvement to layout responsiveness.The addition of flex styling to child divs ensures better space distribution.
Also applies to: 44-47
111-111: Fixed potential stale closure bug.Adding
isDisconnectedto the dependency array prevents stale button text when connection state changes.web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx (2)
107-131: LGTM! Enhanced AccordionContent with transaction details.The component now includes transaction hash and timestamp information, improving traceability. The implementation correctly uses
useMemofor the transaction explorer link.
176-176: LGTM! Improved empty state handling.The use of
StyledInfoCardfor the empty state provides a consistent and user-friendly message.web/src/components/EvidenceCard.tsx (1)
235-246: LGTM! Improved content rendering with auto text direction.The addition of
dir="auto"attributes improves the handling of different text directions.subgraph/core/src/DisputeKitClassic.ts (1)
69-70: LGTM! Enhanced justification tracking.Added transaction hash and timestamp tracking for better traceability of vote justifications.
web/src/components/Verdict/DisputeTimeline.tsx (1)
178-188: LGTM! Improved loading state handling.The addition of
Skeletoncomponent for loading states provides a better user experience during data fetching.web/src/components/DisputeView/DisputeCardView.tsx (1)
49-49: LGTM! Good improvement for internationalization support.Adding
dir="auto"enhances the component's ability to handle mixed-language content by allowing automatic text direction determination.subgraph/core-neo/subgraph.yaml (1)
11-11: Verify contract addresses and start blocksThe contract addresses and start blocks have been updated for all data sources. The start blocks are within a close range (272063037 - 272063254), suggesting these contracts were deployed together.
Let's verify the contract addresses and deployment blocks:
Also applies to: 13-13, 67-67, 69-69, 87-87, 89-89, 122-122, 124-124, 143-143, 145-145
✅ Verification successful
Contract addresses and start blocks verified ✓
All contract addresses are found in deployment files and their deployment blocks exactly match the start blocks configured in subgraph.yaml. The deployment sequence (272063037-272063254) shows a coordinated deployment of the system components.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify contract addresses and their deployment blocks on Arbitrum One # Check contract addresses for addr in "0x991d2df165670b9cac3B022f4B68D65b664222ea" "0x553dcbF6aB3aE06a1064b5200Df1B5A9fB403d3c" "0x70B464be85A547144C72485eBa2577E5D3A45421" "0x48e052B4A6dC4F30e90930F1CeaAFd83b3981EB3" "0x21A9402aDb818744B296e1d1BE58C804118DC03D"; do # Search for contract creation transactions echo "Checking contract: $addr" rg -i "$addr" contracts/deployments/arbitrum/ doneLength of output: 7002
Script:
#!/bin/bash # Get deployment blocks from contract deployment files for file in contracts/deployments/arbitrum/*_Proxy.json; do echo "Checking $file" jq -r '.receipt.blockNumber' "$file" 2>/dev/null doneLength of output: 2422
subgraph/package.json (1)
3-3: LGTM! Version bump aligns with release.The version update from 0.9.1 to 0.10.1 follows semantic versioning for a minor release with new features.
subgraph/core/schema.graphql (2)
163-163: LGTM! Enhanced dispute tracking with transaction and timestamp fields.The new fields improve traceability by tracking:
- Creation transaction hash
- Ruling timestamp and transaction hash (when available)
Also applies to: 184-185
309-310: LGTM! Improved justification traceability.The new required fields enhance the audit trail for justifications by tracking:
- Transaction hash of the justification submission
- Timestamp of when the justification was made
web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx (2)
29-31: LGTM! Well-typed interface definition.The
IJurorRewardsinterface with the0x${string}type ensures type safety for Ethereum addresses.
33-34: LGTM! Clean component refactoring.Good refactoring to make the component more reusable by accepting the address as a prop instead of using
useAccounthook directly.web/src/pages/Dashboard/Courts/Header.tsx (1)
66-66: LGTM! Clear UI feedback.Good UX improvement to show "Their Courts" vs "My Courts" based on the context.
web/src/pages/Dashboard/JurorInfo/index.tsx (2)
40-42: LGTM! Consistent interface pattern.The interface follows the same pattern as other components, maintaining consistency across the codebase.
46-48: Address the TODO comment and simplify data parsing.The TODO comment about checking graph schema should be addressed. Also, the data parsing can be simplified.
- // TODO check graph schema - const coherenceScore = data?.user ? parseInt(data?.user?.coherenceScore) : 0; - const totalCoherentVotes = data?.user ? parseInt(data?.user?.totalCoherentVotes) : 0; - const totalResolvedVotes = data?.user ? parseInt(data?.user?.totalResolvedVotes) : 0; - const totalResolvedDisputes = data?.user ? parseInt(data?.user?.totalResolvedDisputes) : 0; + const coherenceScore = parseInt(data?.user?.coherenceScore ?? "0"); + const totalCoherentVotes = parseInt(data?.user?.totalCoherentVotes ?? "0"); + const totalResolvedVotes = parseInt(data?.user?.totalResolvedVotes ?? "0"); + const totalResolvedDisputes = parseInt(data?.user?.totalResolvedDisputes ?? "0");✅ Verification successful
The review suggestion is correct and should be implemented.
The schema has been verified in
subgraph/core/schema.graphql- all fields exist and are BigInt types. The TODO can be safely removed and the parsing can be simplified using the suggested nullish coalescing approach.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if the graph schema has been updated fd -e graphql -e gql | xargs cat | grep -A 5 "type User"Length of output: 691
Script:
#!/bin/bash # Search for complete User type definition including score fields ast-grep --pattern 'type User @entity { $$$ }' # Backup search with ripgrep rg -A 20 "type User @entity"Length of output: 1452
web/src/pages/Dashboard/Courts/index.tsx (1)
38-40: LGTM! Consistent interface pattern.The interface follows the same pattern as other components.
web/src/pages/Dashboard/JurorInfo/Header.tsx (6)
1-1: LGTM! Well-organized imports and consistent stylingThe new imports are properly organized, and the styled component follows the design system's responsive patterns.
Also applies to: 7-8, 12-13, 53-57
64-64: LGTM! Strong typing for Ethereum addressUsing the template literal type
0x${string}ensures type safety for Ethereum addresses.
67-73: LGTM! Component signature matches interfaceProps destructuring is clean and consistent with TypeScript best practices.
75-75: LGTM! Efficient memoization of explorer linkGood use of useMemo for the explorer link computation with proper dependency tracking.
Also applies to: 81-85
89-96: LGTM! Enhanced address display with copy functionalityGood UX improvements with:
- Copiable wrapper for easy address copying
- Shortened address display
- Proper external link handling
Line range hint
103-107: LGTM! Appropriate share link visibility logicShare option is correctly hidden when viewing other users' profiles while maintaining the resolved votes requirement.
web/src/pages/Dashboard/index.tsx (4)
54-54: LGTM! Clear address handling logicGood separation between connected and queried addresses with proper fallback logic.
Also applies to: 56-56, 59-60
65-69: LGTM! Consistent query parameter usageQueries properly updated to use the addressToQuery parameter.
Also applies to: 71-71
81-84: LGTM! Flexible dashboard accessDashboard properly handles both connected users and address-based views.
86-86: LGTM! Context-aware display with proper state managementGood improvements:
- Dynamic title based on context
- Search params preserved during pagination
Also applies to: 92-94
web/src/layout/Header/index.tsx (2)
23-26: LGTM! Good layout structure.The
HeaderContainerprovides consistent padding across desktop and mobile views.
28-36: LGTM! Well-structured banner styling.The
StyledBannercomponent properly overrides the default styles while maintaining consistent line height and margins.web-devtools/package.json (1)
51-51: Verify compatibility with the new UI components version.The update to
@kleros/ui-components-library@^2.20.0should be tested to ensure no breaking changes affect the devtools.Run the following to check for breaking changes:
web/package.json (2)
84-84: Ensure consistent UI library version across packages.The update to
@kleros/ui-components-library@^2.20.0matches the version in web-devtools, which is good for consistency.
120-120: Verify the new subgraph-status dependency.The addition of
subgraph-status@^1.2.3introduces new functionality for monitoring subgraph health.Run the following to check the package:
✅ Verification successful
Dependency and implementation verified successfully ✅
The
subgraph-statuspackage is properly integrated in the header component with appropriate configuration for monitoring both Kleros Core and Dispute Template Registry subgraphs. The implementation includes proper error thresholds and styling integration.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the security and stability of the subgraph-status package # Check for known vulnerabilities gh api graphql -f query=' { securityVulnerabilities(first: 5, ecosystem: NPM, package: "subgraph-status") { nodes { advisory { summary severity publishedAt } vulnerableVersionRange firstPatchedVersion { identifier } } } }' # Check the package's dependencies curl -s https://registry.npmjs.org/subgraph-status/1.2.3 | jq '.dependencies'Length of output: 520
Script:
#!/bin/bash # Search for imports and usage of subgraph-status rg -l "subgraph-status" --type js --type jsx --type ts --type tsx # Check for any configuration files that might be related rg -l "subgraph.*status" --type json --type yaml --type toml # Look for specific component imports ast-grep --pattern 'import $_ from "subgraph-status"'Length of output: 311
Script:
#!/bin/bash # Check the implementation of StatusBanner in the header cat web/src/layout/Header/index.tsxLength of output: 1731
chore: appeal tab improve loading
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
web/src/pages/Cases/CaseDetails/Appeal/AppealHistory.tsx (1)
41-50: Improve key uniqueness and BigInt conversion safety.
- The key prop using
option + indexmight not guarantee uniqueness if options contain duplicate text.- BigInt conversion might throw for invalid strings.
Consider these improvements:
- key={option + index} + key={`option-${index}`} - funding={BigInt(paidFees?.[index] ?? "0")} + funding={paidFees?.[index] ? BigInt(paidFees[index]) : BigInt(0)} - required={fundedChoices?.includes(index.toString()) ? BigInt(paidFees?.[index] ?? "0") : undefined} + required={fundedChoices?.includes(index.toString()) && paidFees?.[index] + ? BigInt(paidFees[index]) + : undefined}web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx (1)
Line range hint
52-54: Add error handling for the guide name extraction.The
extractGuideNamefunction assumes the link text will always contain ". " separator. Consider adding error handling:-const extractGuideName = (linkText) => linkText.split(". ")[1]; +const extractGuideName = (linkText: string) => { + const parts = linkText.split(". "); + if (parts.length < 2) { + console.warn(`Invalid link text format: ${linkText}`); + return linkText; + } + return parts[1]; +};
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx(1 hunks)web/src/pages/Cases/CaseDetails/Appeal/AppealHistory.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Copy labels from linked issues
- GitHub Check: contracts-testing
- GitHub Check: dependency-review
- GitHub Check: SonarCloud
- GitHub Check: Analyze (javascript)
- GitHub Check: Scorecards analysis
- GitHub Check: SonarCloud
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
web/src/pages/Cases/CaseDetails/Appeal/AppealHistory.tsx (1)
4-4: Verify react-loading-skeleton dependency.Please ensure that
react-loading-skeletonis properly added to the project's dependencies.Run the following script to check the package.json:
✅ Verification successful
Dependency verification successful
The
react-loading-skeletonpackage is properly configured inweb/package.jsonwith version^3.5.0.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if react-loading-skeleton is listed in package.json # and verify its version # Search for react-loading-skeleton in package.json files fd package.json --exec grep -l "react-loading-skeleton" {} \; # If found, extract its version fd package.json --exec jq -r '.dependencies["react-loading-skeleton"] // empty' {} \;Length of output: 181
web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx (1)
Line range hint
27-32: Verify the fixed landscape width.The landscape style sets a fixed width of 389px. Please verify if this specific width:
- Maintains proper aspect ratio with the content
- Works well across different device sizes in landscape mode
- Aligns with the design system's specifications
✅ Verification successful
Fixed width of 389px is appropriate for this component
The landscape width of 389px is verified to be correct as it:
- Falls within the parent container's responsive range (350-450px)
- Follows the established pattern for mini-guide popup components
- Provides consistent sizing for the template content
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for other landscape width values for consistency rg -l 'width: 389px' | while read -r file; do echo "=== $file ===" rg 'width: \d+px' "$file" doneLength of output: 300
Script:
#!/bin/bash # Search for landscape style patterns and width definitions in mini-guides echo "=== Searching for landscape styles ===" rg "landscapeStyle|@media.*landscape" -A 3 -B 1 echo -e "\n=== Searching for width definitions in MiniGuides ===" fd -e tsx -e ts -p "MiniGuide" --exec rg "width:|const.*width" -A 1 {}Length of output: 66889
Fix/kleros app resolution
|
PR-Codex overview
This PR focuses on updating several components and queries in the Kleros application, enhancing the handling of dispute details, transaction data, and user interactions. It also includes dependency updates and introduces new features for displaying statistics.
Detailed summary
.github/workflows/pr-labels.yml,TopSearch.tsx, andStats.tsx.package.jsondependencies forwagmiand added new fields likerulingTimestampandtransactionHash.dir="auto"to various components for better text direction handling.StatsandStatsContentcomponents to display court statistics with new styling.HeaderandDashboardcomponents to query and display juror information based on address parameters.Skeletonloading states.Summary by CodeRabbit
Based on the comprehensive pull request summary, here are the high-level release notes:
New Features
Improvements
Chores
Performance