Conversation
Featured Projects Carousel and other campaign changes
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update modifies the width and responsive styling of several card components across the application, including Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant HomePage
participant Carousel
participant AccountCard
User->>HomePage: Loads /
HomePage->>Carousel: Initialize carousel with featured projects
loop Every 4 seconds
Carousel->>Carousel: Auto-advance to next slide
end
User->>Carousel: Clicks navigation arrow
Carousel->>Carousel: Scrolls to previous/next slide
Carousel->>AccountCard: Render project card for visible slide
AccountCard-->>User: Display project info
sequenceDiagram
participant User
participant CampaignsList
participant CampaignCard
User->>CampaignsList: Loads campaign list
CampaignsList->>CampaignsList: Filter out campaign with id 14
CampaignsList->>CampaignCard: Render card for each remaining campaign
CampaignCard-->>User: Display campaign info
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/entities/_shared/account/components/card-skeleton.tsx(1 hunks)src/entities/_shared/account/components/card.tsx(1 hunks)src/entities/campaign/components/CampaignCard.tsx(1 hunks)src/entities/campaign/components/CampaignsList.tsx(1 hunks)src/pages/campaigns.tsx(3 hunks)src/pages/index.tsx(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/entities/campaign/components/CampaignsList.tsx (1)
src/entities/campaign/components/CampaignCard.tsx (1)
CampaignCard(15-88)
src/pages/index.tsx (2)
src/entities/_shared/account/components/card.tsx (1)
AccountCard(30-153)src/features/donation/components/user-entrypoints.tsx (1)
DonateToAccountButton(43-51)
🔇 Additional comments (7)
src/pages/campaigns.tsx (1)
104-104:Details
✅ Verification successful
Verify the new documentation URL is accessible.
The external link URL has been updated to the new domain. Please ensure this URL is accessible and contains the expected content.
🏁 Script executed:
#!/bin/bash # Description: Verify the new documentation URL is accessible # Expected: HTTP 200 response from the new URL curl -I "https://docs.potlock.io/user-guides/campaigns" 2>/dev/null | head -1Length of output: 77
Documentation link verified
The URLhttps://docs.potlock.io/user-guides/campaignsreturns HTTP 200. No further action required.src/entities/campaign/components/CampaignCard.tsx (1)
25-25: Good responsive width implementation.The added responsive width classes
max-w-105 w-full md:max-w-fullprovide appropriate constraints for different screen sizes, ensuring cards don't become too wide on smaller screens while allowing full width utilization on larger displays.src/entities/_shared/account/components/card.tsx (1)
54-55: LGTM! Good responsive width implementation.The responsive width classes provide excellent mobile-first design:
w-80ensures readable card width on small screensmd:w-full md:min-w-105allows flexible expansion on larger screensmax-w-105 mx-automaintains consistency and centering across all breakpointsThis change aligns well with the carousel implementation where consistent card sizing is important.
src/pages/index.tsx (4)
1-2: LGTM! Clean import additions for carousel functionality.The new imports are well-organized and include all necessary components for the carousel implementation.
Also applies to: 9-15
122-139: LGTM! Solid carousel state management with auto-advance.The carousel state management is well-implemented:
- Proper cleanup of interval in useEffect
- Correct dependency array with
[api]- Event listener setup for slide selection tracking
The 4-second auto-advance interval provides a good balance between user engagement and readability.
167-185: LGTM! Well-configured carousel implementation.The carousel setup is excellent:
- Proper loop behavior with
loop: true- Smooth interactions with
dragFree: trueand reasonableduration: 20- Clean integration with the existing
AccountCardcomponent- Consistent
DonateToAccountButtonactions for each projectThe transition from static grid to carousel enhances user experience while maintaining the same functionality.
142-142: LGTM! Clean layout wrapper update.The transition from
<main>toPageWithBannercomponent provides better layout structure and consistency with the overall application design.Also applies to: 206-206
| export const AccountCardSkeleton = () => { | ||
| return ( | ||
| <div className="bg-background mx-auto flex h-full w-full max-w-[420px] flex-col overflow-hidden rounded-xl border border-solid border-[#dbdbdb] shadow-[0px_-2px_0px_#dbdbdb_inset] transition-all duration-300 hover:translate-y-[-1rem]"> | ||
| <div className="bg-background w-100 mx-auto flex h-full max-w-[420px] flex-col overflow-hidden rounded-xl border border-solid border-[#dbdbdb] shadow-[0px_-2px_0px_#dbdbdb_inset] transition-all duration-300 hover:translate-y-[-1rem]"> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify consistency with AccountCard component.
The change from w-full to w-100 modifies the skeleton from full-width to a fixed 100-unit width. Ensure this change aligns with the corresponding AccountCard component styling to maintain visual consistency between loading and loaded states.
🏁 Script executed:
#!/bin/bash
# Description: Check if AccountCard component has similar width styling changes
# Expected: AccountCard should have corresponding width changes for consistency
rg -A 3 -B 3 "AccountCard.*className" --type tsxLength of output: 78
🏁 Script executed:
#!/bin/bash
# Locate the AccountCard component
rg -n "AccountCard" --glob "*.tsx"
# Inspect its root container styling
rg -A 5 -B 5 "className=" --glob "*AccountCard*.tsx"Length of output: 13022
🏁 Script executed:
#!/bin/bash
# Locate the shared AccountCard component and inspect its root styling
rg -n "export const AccountCard" -A 10 --glob "src/entities/_shared/account/components/card.tsx"
rg -n "className=" --glob "src/entities/_shared/account/components/card.tsx"Length of output: 3214
🏁 Script executed:
#!/bin/bash
# Show the return statement and surrounding JSX for AccountCard
rg -n "return \(" -A5 -B5 --glob "src/entities/_shared/account/components/card.tsx"
# Display the first 80 lines of the AccountCard file to inspect the root wrapper
sed -n '1,80p' src/entities/_shared/account/components/card.tsxLength of output: 3739
Align AccountCardSkeleton width with AccountCard styling
The skeleton’s fixed w-100 diverges from the responsive widths used in AccountCard. Update the root wrapper to match:
• Replace
- className="bg-background w-100 mx-auto flex h-full max-w-[420px] flex-col …"
+ className="bg-background md:w-full w-80 mx-auto flex h-full max-w-[420px] flex-col …"This ensures the skeleton uses the same w-80 (20rem) default and md:w-full at breakpoints, with the existing max-w-[420px] and mx-auto intact.
📝 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.
| <div className="bg-background w-100 mx-auto flex h-full max-w-[420px] flex-col overflow-hidden rounded-xl border border-solid border-[#dbdbdb] shadow-[0px_-2px_0px_#dbdbdb_inset] transition-all duration-300 hover:translate-y-[-1rem]"> | |
| <div | |
| className="bg-background md:w-full w-80 mx-auto flex h-full max-w-[420px] flex-col overflow-hidden rounded-xl border border-solid border-[#dbdbdb] shadow-[0px_-2px_0px_#dbdbdb_inset] transition-all duration-300 hover:translate-y-[-1rem]" | |
| > |
🤖 Prompt for AI Agents
In src/entities/_shared/account/components/card-skeleton.tsx at line 5, the
width class is set to w-100, which is a fixed width and inconsistent with the
responsive width styling used in the AccountCard component. To fix this, replace
w-100 with w-80 md:w-full to ensure the skeleton matches the AccountCard's
default width of 20rem and becomes full width at medium breakpoints, while
keeping max-w-[420px] and mx-auto for max width and centering.
| {filteredCampaigns | ||
| ?.filter((campaign) => campaign?.id !== 14) | ||
| .map((campaign) => <CampaignCard key={campaign.id} data={campaign} />)} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider making campaign exclusion configurable.
Hardcoding the exclusion of campaign ID 14 directly in the component couples business logic with presentation logic. This approach is not scalable and lacks context for why this specific campaign is excluded.
Consider these alternatives:
- Move the exclusion logic to a configuration file or environment variable
- Add a
hiddenorfeaturedflag to the campaign data model - Handle this filtering at the API/data layer
- {filteredCampaigns
- ?.filter((campaign) => campaign?.id !== 14)
- .map((campaign) => <CampaignCard key={campaign.id} data={campaign} />)}
+ {filteredCampaigns
+ ?.filter((campaign) => !campaign?.isHidden)
+ .map((campaign) => <CampaignCard key={campaign.id} data={campaign} />)}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/entities/campaign/components/CampaignsList.tsx around lines 78 to 80, the
exclusion of campaign ID 14 is hardcoded in the component, mixing business logic
with presentation. To fix this, remove the hardcoded filter and instead
implement a configurable approach such as reading excluded campaign IDs from a
configuration file or environment variable, or use a flag in the campaign data
model to mark campaigns as hidden. Alternatively, move this filtering logic to
the API or data fetching layer so the component only receives campaigns meant to
be displayed.
| <div className=" flex items-center gap-4 "> | ||
| <h1 className=" text-[18px] font-semibold ">Featured Campaigns</h1> | ||
| <p className="text-[18px]">{current + 1}/3</p> | ||
| <p className="text-[18px]">{current + 1}/8</p> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Count hardcoded to 8 may not match actual filtered campaigns.
The count displays "/8" but depends on the filtered campaign IDs existing in the data. If any of the hardcoded campaign IDs [13, 12, 11, 10, 9, 7, 6, 3] don't exist, the actual count will be less than 8, creating a misleading UI.
Calculate the count dynamically:
- <p className="text-[18px]">{current + 1}/8</p>
+ <p className="text-[18px]">{current + 1}/{data?.filter((data) => [13, 12, 11, 10, 9, 7, 6, 3].includes(data?.id))?.length || 0}</p>📝 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.
| <p className="text-[18px]">{current + 1}/8</p> | |
| <p className="text-[18px]"> | |
| {current + 1}/ | |
| {data?.filter((item) => | |
| [13, 12, 11, 10, 9, 7, 6, 3].includes(item?.id) | |
| )?.length || 0} | |
| </p> |
🤖 Prompt for AI Agents
In src/pages/campaigns.tsx at line 42, the total count of campaigns is hardcoded
as 8, which may not reflect the actual number of filtered campaigns. Replace the
hardcoded "8" with a dynamic calculation that counts the length of the filtered
campaign IDs array to ensure the displayed total matches the actual filtered
campaigns.
| data | ||
| ?.filter((data) => [13, 12, 11, 10, 9, 7, 6, 3].includes(data?.id)) | ||
| ?.map((data) => <CampaignCarouselItem key={data.id} data={data} />)} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Replace hardcoded campaign ID filtering with a more maintainable solution.
Similar to the CampaignsList component, hardcoding specific campaign IDs makes the code brittle and difficult to maintain. Consider using campaign metadata or configuration-driven filtering.
Consider these approaches:
- Add a
isFeaturedproperty to campaign data - Use a configuration file for featured campaign management
- Create a dedicated API endpoint for featured campaigns
- data
- ?.filter((data) => [13, 12, 11, 10, 9, 7, 6, 3].includes(data?.id))
- ?.map((data) => <CampaignCarouselItem key={data.id} data={data} />)}
+ data
+ ?.filter((data) => data?.isFeatured)
+ ?.map((data) => <CampaignCarouselItem key={data.id} data={data} />)}📝 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.
| data | |
| ?.filter((data) => [13, 12, 11, 10, 9, 7, 6, 3].includes(data?.id)) | |
| ?.map((data) => <CampaignCarouselItem key={data.id} data={data} />)} | |
| data | |
| ?.filter((data) => data?.isFeatured) | |
| ?.map((data) => <CampaignCarouselItem key={data.id} data={data} />)} |
🤖 Prompt for AI Agents
In src/pages/campaigns.tsx around lines 62 to 64, the filtering of campaign data
uses hardcoded campaign IDs, which is not maintainable. Replace this by
implementing a more flexible approach such as adding an `isFeatured` property to
the campaign data objects and filtering based on that property, or
alternatively, use a configuration file or a dedicated API endpoint to manage
featured campaigns. Update the filter logic to use this new method instead of
hardcoded IDs.
| <div className="flex gap-6"> | ||
| <img | ||
| src="/assets/icons/left-arrow.svg" | ||
| alt="" | ||
| onClick={() => api?.scrollTo(current - 1)} | ||
| className="h-6 w-6 cursor-pointer rounded-full border border-gray-400 text-[14px] text-gray-500" | ||
| /> | ||
| <img | ||
| src="/assets/icons/right-arrow.svg" | ||
| alt="" | ||
| onClick={() => api?.scrollTo(current + 1)} | ||
| className="h-6 w-6 cursor-pointer rounded-full border border-gray-400 text-[14px] text-gray-500" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve accessibility for navigation arrows.
The navigation arrows have accessibility issues that should be addressed:
- Using
imgelements withonClickhandlers excludes keyboard users - Empty
altattributes provide no context for screen readers - Missing focus indicators and keyboard navigation
Replace the img elements with proper button elements:
- <div className="flex gap-6">
- <img
- src="/assets/icons/left-arrow.svg"
- alt=""
- onClick={() => api?.scrollTo(current - 1)}
- className="h-6 w-6 cursor-pointer rounded-full border border-gray-400 text-[14px] text-gray-500"
- />
- <img
- src="/assets/icons/right-arrow.svg"
- alt=""
- onClick={() => api?.scrollTo(current + 1)}
- className="h-6 w-6 cursor-pointer rounded-full border border-gray-400 text-[14px] text-gray-500"
- />
- </div>
+ <div className="flex gap-6">
+ <button
+ onClick={() => api?.scrollTo(current - 1)}
+ className="flex h-6 w-6 items-center justify-center rounded-full border border-gray-400 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+ aria-label="Previous featured project"
+ >
+ <img
+ src="/assets/icons/left-arrow.svg"
+ alt=""
+ className="h-4 w-4"
+ />
+ </button>
+ <button
+ onClick={() => api?.scrollTo(current + 1)}
+ className="flex h-6 w-6 items-center justify-center rounded-full border border-gray-400 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+ aria-label="Next featured project"
+ >
+ <img
+ src="/assets/icons/right-arrow.svg"
+ alt=""
+ className="h-4 w-4"
+ />
+ </button>
+ </div>📝 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.
| <div className="flex gap-6"> | |
| <img | |
| src="/assets/icons/left-arrow.svg" | |
| alt="" | |
| onClick={() => api?.scrollTo(current - 1)} | |
| className="h-6 w-6 cursor-pointer rounded-full border border-gray-400 text-[14px] text-gray-500" | |
| /> | |
| <img | |
| src="/assets/icons/right-arrow.svg" | |
| alt="" | |
| onClick={() => api?.scrollTo(current + 1)} | |
| className="h-6 w-6 cursor-pointer rounded-full border border-gray-400 text-[14px] text-gray-500" | |
| /> | |
| </div> | |
| <div className="flex gap-6"> | |
| <button | |
| onClick={() => api?.scrollTo(current - 1)} | |
| className="flex h-6 w-6 items-center justify-center rounded-full border border-gray-400 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| aria-label="Previous featured project" | |
| > | |
| <img | |
| src="/assets/icons/left-arrow.svg" | |
| alt="" | |
| className="h-4 w-4" | |
| /> | |
| </button> | |
| <button | |
| onClick={() => api?.scrollTo(current + 1)} | |
| className="flex h-6 w-6 items-center justify-center rounded-full border border-gray-400 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| aria-label="Next featured project" | |
| > | |
| <img | |
| src="/assets/icons/right-arrow.svg" | |
| alt="" | |
| className="h-4 w-4" | |
| /> | |
| </button> | |
| </div> |
🤖 Prompt for AI Agents
In src/pages/index.tsx around lines 150 to 163, the navigation arrows use img
elements with onClick handlers, which are not accessible for keyboard users and
lack proper alt text and focus indicators. Replace these img elements with
button elements that include accessible labels (e.g., aria-label), ensure they
are keyboard focusable, and maintain the visual styling. This will improve
accessibility by enabling keyboard navigation and providing context for screen
readers.
1 participant
Summary by CodeRabbit
New Features
Improvements
Bug Fixes