Feat/earn page #42
Feat/earn page #42
Conversation
WalkthroughThis pull request introduces a comprehensive update to the frontend, focusing on the "Earn" section of the application. The changes include creating new components for the Earn page, such as Changes
Sequence DiagramsequenceDiagram
participant Client
participant EarnPage
participant GraphQLClient
participant DataSources
Client->>EarnPage: Request Earn Page
EarnPage->>GraphQLClient: Fetch Page Data
GraphQLClient->>DataSources: Query Navbar Data
GraphQLClient->>DataSources: Query Hero Data
GraphQLClient->>DataSources: Query Tabs Data
GraphQLClient->>DataSources: Query Footer Data
DataSources-->>GraphQLClient: Return Data
GraphQLClient-->>EarnPage: Provide Fetched Data
EarnPage->>Client: Render Page with Dynamic Content
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
Finishing Touches
🪧 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-website-v2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
🧹 Nitpick comments (18)
frontend/src/components/Tag.tsx (1)
3-7: Consider extending the ITag interface for better flexibility.The interface could benefit from additional props for accessibility and customization.
interface ITag { text: string; selected?: boolean; className?: string; + size?: 'sm' | 'md' | 'lg'; + onClick?: () => void; + disabled?: boolean; }frontend/src/queries/earn/hero.ts (1)
31-33: Consider adding URL validation and error handling types.The URL fields could benefit from validation and proper error handling types.
icon: { - url: string; + url: string | null; + altText?: string; }; }>; background: { - url: string; + url: string | null; + altText?: string; };Also applies to: 36-37
frontend/tailwind.config.ts (1)
32-32: Consider using CSS variables for better theme support.The hardcoded rgba value could be moved to a CSS variable for better maintainability and theme support.
- "background-translucent": "rgba(34, 0, 80, 0.24)" + "background-translucent": "var(--background-translucent, rgba(34, 0, 80, 0.24))"Add the following to your global CSS file:
:root { --background-translucent: rgba(34, 0, 80, 0.24); }frontend/src/components/Tab.tsx (1)
21-22: Optimize transition performance.Instead of using
transition-all, specify only the properties that need to transition for better performance:-"hover:text-primary-blue hover:border-b-[3px] hover:border-b-primary-blue hover:cursor-pointer transition-all", +"hover:text-primary-blue hover:border-b-[3px] hover:border-b-primary-blue hover:cursor-pointer transition-[color,border]",frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx (1)
27-29: Consider explicit prop passing instead of spreading.While prop spreading is convenient, it can make it harder to track which props are actually being used. Consider passing props explicitly:
-<CourtsSection - {...{ mostActiveCourts, mostActiveCourtsHeader, courtsButton }} -/> +<CourtsSection + mostActiveCourts={mostActiveCourts} + mostActiveCourtsHeader={mostActiveCourtsHeader} + courtsButton={courtsButton} +/>frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx (1)
22-27: Improve background image accessibility and performance.The background image implementation could be improved:
- Make alt text more descriptive
- Add priority prop if this section is above the fold
- Consider using CSS variables for z-index values
<Image src={background.url} - alt="Learn more Image Background" + alt={`Background image for ${button.text}`} + priority fill className="object-cover rounded-2xl" />frontend/src/components/Earn/TabSection/index.tsx (1)
31-31: Improve readability of conditional rendering.The ternary expression could be simplified for better readability.
Consider this alternative:
- {activeTab === 1 ? <CuratorTabContent {...tabsData.earnPageBecomeACuratorTabContent}/> : <JurorTabContent {...tabsData.earnPageBecomeAJurorTabContent}/>} + {activeTab === 1 + ? <CuratorTabContent {...tabsData.earnPageBecomeACuratorTabContent}/> + : <JurorTabContent {...tabsData.earnPageBecomeAJurorTabContent}/> + }frontend/src/components/PNKToken/Hero.tsx (1)
Line range hint
38-42: Optimize background image loading.The background image using Next.js Image component with
fillshould specify a loading strategy and priority.Add priority and loading attributes:
<Image src={background.url} alt="Hero Image Background" fill + priority + loading="eager" className="absolute top-0 left-0 h-full z-[-1] object-cover" />frontend/src/components/Community/hero.tsx (1)
31-33: Consider making button variant configurable.The button variant is hardcoded as "secondary" but could be made configurable through the CMS data.
Consider adding variant to the button data structure:
- <Button variant="secondary"> + <Button variant={button.variant || 'secondary'}> <span>{button.text}</span> </Button>frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx (1)
20-22: Fix inconsistent text class namingThere's a typo in the text size class and inconsistent spacing in the className string.
-<h2 className="text-lg md:text-xlfont-medium md:font-normal "> +<h2 className="text-lg md:text-xl font-medium md:font-normal">frontend/src/components/Cooperative/hero.tsx (1)
Line range hint
43-48: Improve background image accessibilityThe background image should be marked as decorative since it's not content-essential.
<Image src={background.url} - alt="Hero Image Background" + alt="" + aria-hidden="true" fill className="absolute top-0 left-0 h-full z-[-1] object-cover" />frontend/src/pages/earn.tsx (1)
26-29: Avoid spreading props directlySpreading props makes it harder to track which props are being passed to each component. Consider explicitly passing required props.
-<Navbar {...{ navbarData }} /> -<Hero {...{heroData}}/> -<TabSection {...{tabsData}}/> -<Footer {...{ footerData }} /> +<Navbar data={navbarData} /> +<Hero data={heroData.earnPageHero} /> +<TabSection data={tabsData} /> +<Footer data={footerData} />frontend/src/components/Earn/Hero.tsx (3)
20-26: Optimize image loadingAdd priority and responsive image optimization for above-the-fold content.
<Image src={statDisplay.icon.url} alt="icon" width={90} height={90} + priority + sizes="90px" className="object-contain" />
28-38: Improve statistics accessibilityThe statistics display should use more semantic HTML and ARIA labels for better screen reader support.
-<label className="text-base text-primary-text"> +<span role="text" className="text-base text-primary-text"> {statDisplay.statName} -</label> +</span> <div className="flex flex-row"> - <h2 className="text-primary-text font-medium text-xl lg:text-2xl"> + <span + role="text" + aria-label={`${statDisplay.statValue}${statDisplay.statValueSuffix}`} + className="text-primary-text font-medium text-xl lg:text-2xl" + > {statDisplay.statValue} - </h2> - <h2 className="text-primary-blue text-xl lg:text-2xl"> {statDisplay.statValueSuffix} - </h2> + </span> </div>
42-47: Consider marking background image as decorativeThe background image appears to be decorative and should be marked as such for accessibility.
<Image src={background.url} - alt="Hero Image Background" + alt="" + aria-hidden="true" fill + priority className="absolute top-0 left-0 h-full z-[-1] object-cover" />frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx (2)
38-45: Consider performance optimization for background imageThe background image is loaded as a CSS background which doesn't benefit from Next.js Image optimization features like lazy loading and automatic sizing.
Consider using Next.js Image component with fill property for better performance:
- <div - style={{ backgroundImage: `url(${background.url})` }} - className={clsx( - "relative h-[308px] md:h-[380px] rounded-2xl", - "bg-[#bca2df] bg-[-314px] md:bg-[0px] bg-cover bg-blend-luminosity", - "flex justify-center items-center pt-3 md:pt-0" - )} - > + <div className="relative h-[308px] md:h-[380px] rounded-2xl"> + <Image + src={background.url} + alt="Background" + fill + className="object-cover rounded-2xl mix-blend-luminosity" + priority={false} + />
25-30: Add descriptive alt text for product iconThe current alt text "Product Icon" is generic and not descriptive enough for accessibility.
- alt="Product Icon" + alt={`${productName} icon`}frontend/src/queries/earn/tabs-data.ts (1)
111-113: Enhance Court type with additional propertiesThe
Courttype is currently minimal with only a name property. Consider expanding it to include more properties that might be needed for displaying court information.export type Court = { name: string; + id: string; + activeCases?: number; + totalStaked?: string; + icon?: { url: string }; };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
frontend/src/assets/svgs/icons/plus-icon.svgis excluded by!**/*.svgyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (20)
frontend/src/components/Community/CommunitiesSection.tsx(1 hunks)frontend/src/components/Community/hero.tsx(2 hunks)frontend/src/components/Cooperative/hero.tsx(2 hunks)frontend/src/components/CtaCard.tsx(1 hunks)frontend/src/components/Earn/Hero.tsx(1 hunks)frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx(1 hunks)frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx(1 hunks)frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx(1 hunks)frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx(1 hunks)frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx(1 hunks)frontend/src/components/Earn/TabSection/index.tsx(1 hunks)frontend/src/components/ForBuilders/UseCasesSection/UseCasesCards.tsx(2 hunks)frontend/src/components/PNKToken/Explorers.tsx(1 hunks)frontend/src/components/PNKToken/Hero.tsx(1 hunks)frontend/src/components/Tab.tsx(1 hunks)frontend/src/components/Tag.tsx(1 hunks)frontend/src/pages/earn.tsx(1 hunks)frontend/src/queries/earn/hero.ts(1 hunks)frontend/src/queries/earn/tabs-data.ts(1 hunks)frontend/tailwind.config.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- frontend/src/components/PNKToken/Explorers.tsx
- frontend/src/components/Community/CommunitiesSection.tsx
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - kleros-website-v2
- GitHub Check: Header rules - kleros-website-v2
- GitHub Check: Pages changed - kleros-website-v2
🔇 Additional comments (6)
frontend/src/components/CtaCard.tsx (2)
32-32: LGTM! Good use of aspect ratio constraint.The addition of
aspect-squareensures consistent image dimensions across different icon sizes.
37-44: LGTM! Improved layout structure.Good improvements to the card layout:
- Using
mt-autoensures the divider and link stick to the bottomflex-wrapprevents text overflow in the linkfrontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx (1)
21-24: Add type safety for map key.Ensure the card object has a stable unique identifier for the key prop.
Consider adding a type check or using a more stable unique identifier than title:
interface CtaCardType { id: string; // or number title: string; // ... other properties }frontend/src/components/Community/hero.tsx (1)
Line range hint
38-42: Optimize background image loading.Similar to the PNKToken Hero, optimize the background image loading.
frontend/src/queries/earn/tabs-data.ts (2)
45-47: Consider adding more court details in the queryThe
mostActiveCourtsquery only fetches the court name. Consider adding more relevant details that might be needed for display or interaction.Would you like me to suggest additional fields that are commonly needed for court displays? For example:
- Court ID
- Active cases count
- Total staked tokens
- Court icon/image
141-141: Fix array type annotationThe
ctaCardproperty in both tab types is annotated as an array type, but the GraphQL query suggests it returns a single object.Let's verify the actual structure by checking the GraphQL schema:
Also applies to: 152-152
frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
Show resolved
Hide resolved
frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx
Outdated
Show resolved
Hide resolved
frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx
Outdated
Show resolved
Hide resolved
frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
frontend/src/queries/earn/tabs-data.ts (4)
46-48: Consider adding error handling fields to the GraphQL query.Add error handling fields to handle potential failures gracefully:
mostActiveCourts(pagination: { limit: 20 }) { name + error + status }
135-135: Add missing semicolon for consistency.Add a semicolon after the array type declaration:
- arrowLinks: ArrowLink[] + arrowLinks: ArrowLink[];
112-162: Consider adding null handling to type definitions.The current type definitions assume all fields are required. Consider making some fields optional or adding null handling for better error resilience:
export type Court = { - name: string; + name: string | null; }; export type CtaCard = { title: string; description: string; - arrowLink: ArrowLink; + arrowLink?: ArrowLink; icon: { url: string }; };
5-110: Consider parameterizing the pagination limit.The pagination limit is hardcoded to 20. Consider making it configurable:
export const tabSectionQuery = (limit: number = 20) => gql` { earnPageBecomeAJurorTabContent { # ... other fields ... - mostActiveCourts(pagination: { limit: 20 }) { + mostActiveCourts(pagination: { limit: ${limit} }) { name } } } `;frontend/src/components/Tab.tsx (1)
1-3: Consider optimizing the React import.Instead of importing from the root 'react' package, consider using a more specific import path for better tree-shaking:
-import { useCallback } from "react"; +import { useCallback } from "react/react-runtime";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
frontend/src/components/Cooperative/ReportSection/ReportCard.tsx(1 hunks)frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx(1 hunks)frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx(1 hunks)frontend/src/components/Tab.tsx(1 hunks)frontend/src/queries/earn/tabs-data.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
- frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - kleros-website-v2
- GitHub Check: Header rules - kleros-website-v2
- GitHub Check: Pages changed - kleros-website-v2
🔇 Additional comments (2)
frontend/src/components/Tab.tsx (2)
5-15: Well-structured type definitions!The generic type definitions are clean, well-organized, and follow TypeScript best practices. The generic approach allows for flexible value types while maintaining type safety.
54-54: Clean export statement.The default export is appropriate for this single component module.
Summary by CodeRabbit
Release Notes
New Features
Styling Updates
Bug Fixes
Performance