161-feature-donors-page-and-leaderboard #163
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
…' of https://github.com/PotLock/potlock-nextjs-app into 161-feature-donors-page-and-leaderboard
… into 161-feature-donors-page-and-leaderboard
… into 161-feature-donors-page-and-leaderboard
… into 161-feature-donors-page-and-leaderboard
…161-feature-donors-page-and-leaderboard
WalkthroughThis update introduces a donor and sponsor leaderboard feature, including a new page with tabbed navigation for activities, donors, and sponsors. New components for leaderboard entries and an SVG trophy icon are added. The "Donors" navigation link is re-enabled in the app bar, and relevant exports are updated for integration. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AppBar
participant LeaderboardPage
participant DonationLeaderboardEntry
participant TrophyIcon
User->>AppBar: Clicks "Donors" link
AppBar->>LeaderboardPage: Navigates to /donors
LeaderboardPage->>LeaderboardPage: Loads and filters leaderboard/activity data
LeaderboardPage->>DonationLeaderboardEntry: Renders entry for each participant
DonationLeaderboardEntry->>TrophyIcon: Renders trophy SVG (top 3)
DonationLeaderboardEntry-->>LeaderboardPage: Displays leaderboard rows
LeaderboardPage-->>User: Shows leaderboard/activities with search and filters
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: 8
🧹 Nitpick comments (1)
src/common/ui/layout/svg/Trophy.tsx (1)
1-1: Track the TODO for replacing this with an icon library.This TODO indicates technical debt that should be tracked properly.
Would you like me to create a GitHub issue to track the migration to an icon library package?
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/common/ui/layout/svg/Trophy.tsx(1 hunks)src/features/donation/components/DonationLeaderboardEntry.tsx(1 hunks)src/features/donation/index.ts(1 hunks)src/layout/components/app-bar.tsx(1 hunks)src/pages/donors/index.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (4)
src/layout/components/app-bar.tsx (2)
Learnt from: akaia-shadowfox
PR: PotLock/potlock-nextjs-app#424
File: src/pages/index.tsx:52-56
Timestamp: 2025-07-02T13:31:11.251Z
Learning: In src/pages/index.tsx, the donation count (total_donations_count) is intentionally displayed with a dollar sign prefix for UI consistency, even though it represents a count rather than a currency amount. This is the intended behavior.
Learnt from: akaia-shadowfox
PR: PotLock/potlock-nextjs-app#400
File: src/features/donation/components/modal-confirmation-screen.tsx:83-88
Timestamp: 2025-06-02T18:44:53.590Z
Learning: In src/features/donation/components/modal-confirmation-screen.tsx, the isFeeBypassAllowed flag is temporarily hardcoded to true for urgent shipping, with a TODO comment indicating it should be replaced with campaign permission-based logic using campaign?.allow_fee_avoidance ?? false for campaign donations.
src/features/donation/index.ts (4)
Learnt from: akaia-shadowfox
PR: PotLock/potlock-nextjs-app#424
File: src/pages/index.tsx:52-56
Timestamp: 2025-07-02T13:31:11.251Z
Learning: In src/pages/index.tsx, the donation count (total_donations_count) is intentionally displayed with a dollar sign prefix for UI consistency, even though it represents a count rather than a currency amount. This is the intended behavior.
Learnt from: carina-akaia
PR: PotLock/potlock-nextjs-app#365
File: src/features/donation/models/effects/index.ts:155-174
Timestamp: 2025-04-17T14:16:13.402Z
Learning: The transaction outcome handling in src/features/donation/models/effects/index.ts is temporary and will be replaced with `nearRps.txStatus` in the future, so extensive refinements to the current implementation aren't necessary.
Learnt from: akaia-shadowfox
PR: PotLock/potlock-nextjs-app#366
File: src/features/donation/models/effects/ft.ts:206-239
Timestamp: 2025-04-27T20:33:00.401Z
Learning: The donation FT multicall function in src/features/donation/models/effects/ft.ts is designed to be executed only in browser environments, making browser-only globals like `atob()` acceptable to use.
Learnt from: akaia-shadowfox
PR: PotLock/potlock-nextjs-app#400
File: src/features/donation/components/modal-confirmation-screen.tsx:83-88
Timestamp: 2025-06-02T18:44:53.590Z
Learning: In src/features/donation/components/modal-confirmation-screen.tsx, the isFeeBypassAllowed flag is temporarily hardcoded to true for urgent shipping, with a TODO comment indicating it should be replaced with campaign permission-based logic using campaign?.allow_fee_avoidance ?? false for campaign donations.
src/features/donation/components/DonationLeaderboardEntry.tsx (3)
Learnt from: akaia-shadowfox
PR: PotLock/potlock-nextjs-app#424
File: src/pages/index.tsx:52-56
Timestamp: 2025-07-02T13:31:11.251Z
Learning: In src/pages/index.tsx, the donation count (total_donations_count) is intentionally displayed with a dollar sign prefix for UI consistency, even though it represents a count rather than a currency amount. This is the intended behavior.
Learnt from: carina-akaia
PR: PotLock/potlock-nextjs-app#365
File: src/features/donation/models/effects/index.ts:155-174
Timestamp: 2025-04-17T14:16:13.402Z
Learning: The transaction outcome handling in src/features/donation/models/effects/index.ts is temporary and will be replaced with `nearRps.txStatus` in the future, so extensive refinements to the current implementation aren't necessary.
Learnt from: akaia-shadowfox
PR: PotLock/potlock-nextjs-app#400
File: src/features/donation/components/modal-confirmation-screen.tsx:83-88
Timestamp: 2025-06-02T18:44:53.590Z
Learning: In src/features/donation/components/modal-confirmation-screen.tsx, the isFeeBypassAllowed flag is temporarily hardcoded to true for urgent shipping, with a TODO comment indicating it should be replaced with campaign permission-based logic using campaign?.allow_fee_avoidance ?? false for campaign donations.
src/pages/donors/index.tsx (3)
Learnt from: akaia-shadowfox
PR: PotLock/potlock-nextjs-app#424
File: src/pages/index.tsx:52-56
Timestamp: 2025-07-02T13:31:11.251Z
Learning: In src/pages/index.tsx, the donation count (total_donations_count) is intentionally displayed with a dollar sign prefix for UI consistency, even though it represents a count rather than a currency amount. This is the intended behavior.
Learnt from: carina-akaia
PR: PotLock/potlock-nextjs-app#365
File: src/features/donation/models/effects/index.ts:155-174
Timestamp: 2025-04-17T14:16:13.402Z
Learning: The transaction outcome handling in src/features/donation/models/effects/index.ts is temporary and will be replaced with `nearRps.txStatus` in the future, so extensive refinements to the current implementation aren't necessary.
Learnt from: akaia-shadowfox
PR: PotLock/potlock-nextjs-app#400
File: src/features/donation/components/modal-confirmation-screen.tsx:83-88
Timestamp: 2025-06-02T18:44:53.590Z
Learning: In src/features/donation/components/modal-confirmation-screen.tsx, the isFeeBypassAllowed flag is temporarily hardcoded to true for urgent shipping, with a TODO comment indicating it should be replaced with campaign permission-based logic using campaign?.allow_fee_avoidance ?? false for campaign donations.
🧬 Code Graph Analysis (1)
src/layout/components/app-bar.tsx (1)
src/pathnames.ts (1)
rootPathnames(3-17)
🔇 Additional comments (2)
src/layout/components/app-bar.tsx (1)
27-27: LGTM!The "Donors" link has been correctly re-enabled to support the new leaderboard feature.
src/features/donation/index.ts (1)
2-2: Export addition looks good.The new export for
DonationLeaderboardEntryfollows the established pattern and correctly exposes the component.
Comment on lines
+209
to
+211
| const [selectedTab, setSelectedTab] = useState<"donors" | "sponsors" | "activities">( | ||
| "activities", | ||
| ); |
There was a problem hiding this comment.
Fix state inconsistency between initial state and default value.
The initial state is set to "activities" but the ToggleGroup defaultValue is "donors", creating inconsistency.
Either update the initial state:
- const [selectedTab, setSelectedTab] = useState<"donors" | "sponsors" | "activities">(
- "activities",
- );
+ const [selectedTab, setSelectedTab] = useState<"donors" | "sponsors" | "activities">(
+ "donors",
+ );Or update the defaultValue:
- <ToggleGroup defaultValue="donors" type="single" className="mt-40px relative w-full">
+ <ToggleGroup defaultValue="activities" type="single" className="mt-40px relative w-full">Also applies to: 474-474
🤖 Prompt for AI Agents
In src/pages/donors/index.tsx around lines 209 to 211, the initial state of
selectedTab is set to "activities" while the ToggleGroup defaultValue is
"donors", causing inconsistency. To fix this, either change the initial state in
useState to "donors" to match the ToggleGroup defaultValue or update the
ToggleGroup defaultValue to "activities" to match the initial state. Also, apply
the same fix at line 474 to keep consistency throughout the component.
Comment on lines
+302
to
+307
| amount={Number( | ||
| (isAccount(participant) | ||
| ? participant.total_donations_out_usd / price | ||
| : participant.amount | ||
| ).toFixed(2), | ||
| )} |
There was a problem hiding this comment.
Prevent potential division by zero errors.
When priceOfOneNear is unavailable or 0, division operations will fail.
Add safety checks:
amount={Number(
(isAccount(participant)
- ? participant.total_donations_out_usd / price
+ ? price > 0 ? participant.total_donations_out_usd / price : 0
: participant.amount
).toFixed(2),
)}This same fix should be applied to lines 374 and 435 where similar divisions occur.
📝 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.
Suggested change
| amount={Number( | |
| (isAccount(participant) | |
| ? participant.total_donations_out_usd / price | |
| : participant.amount | |
| ).toFixed(2), | |
| )} | |
| amount={Number( | |
| (isAccount(participant) | |
| ? price > 0 | |
| ? participant.total_donations_out_usd / price | |
| : 0 | |
| : participant.amount | |
| ).toFixed(2), | |
| )} |
🤖 Prompt for AI Agents
In src/pages/donors/index.tsx around lines 302 to 307, the code divides by price
without checking if price is zero or undefined, which can cause runtime errors.
Add a safety check to ensure price is a valid non-zero number before performing
the division; if not, handle the case gracefully (e.g., default to 0 or skip the
calculation). Apply the same fix to similar divisions on lines 374 and 435 to
prevent division by zero errors consistently.
Comment on lines
+200
to
+202
| function isAccount(obj: any): obj is Account { | ||
| return "total_donations_out_usd" in obj; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Strengthen the type guard for better type safety.
The current type guard only checks for a single property, which could lead to false positives.
Consider a more robust type guard:
-function isAccount(obj: any): obj is Account {
- return "total_donations_out_usd" in obj;
-}
+function isAccount(obj: any): obj is Account {
+ return obj &&
+ typeof obj === 'object' &&
+ 'id' in obj &&
+ 'total_donations_out_usd' in obj &&
+ typeof obj.total_donations_out_usd === 'number';
+}📝 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.
Suggested change
| function isAccount(obj: any): obj is Account { | |
| return "total_donations_out_usd" in obj; | |
| } | |
| function isAccount(obj: any): obj is Account { | |
| return obj && | |
| typeof obj === 'object' && | |
| 'id' in obj && | |
| 'total_donations_out_usd' in obj && | |
| typeof obj.total_donations_out_usd === 'number'; | |
| } |
🤖 Prompt for AI Agents
In src/pages/donors/index.tsx around lines 200 to 202, the isAccount type guard
is currently checking only one property, which may cause false positives.
Improve the type guard by verifying multiple distinctive properties of the
Account type to ensure stronger type safety and reduce incorrect type
assertions.
Comment on lines
+268
to
+269
| <div className="pl-36px xl:overflow-x-unset h-300px relative ml-[-36px] w-full md:w-full"> | ||
| <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-x-scroll"> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix Tailwind CSS syntax errors throughout the file.
Custom values in Tailwind CSS require square brackets. This pattern appears multiple times in the file.
Examples of required fixes:
- <div className="pl-36px xl:overflow-x-unset h-300px relative ml-[-36px] w-full md:w-full">
+ <div className="pl-[36px] xl:overflow-x-unset h-[300px] relative ml-[-36px] w-full md:w-full">- <div className="gap-20px absolute mb-8 grid w-full grid-flow-col overflow-x-scroll">
+ <div className="gap-[20px] absolute mb-8 grid w-full grid-flow-col overflow-x-scroll">- <th className="w-150px p-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500">
+ <th className="w-[150px] p-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500">Please search for and fix all occurrences of:
- Custom pixel values:
w-288px,h-300px,gap-20px, etc. - Custom colors:
text-#7B7B7B,border-#DBDBDB, etc. - Font weights:
font-500,font-600(usefont-medium,font-semibold)
Also applies to: 371-372, 432-433, 476-476, 480-481, 493-493, 539-539, 563-564, 573-574, 587-587
🤖 Prompt for AI Agents
In src/pages/donors/index.tsx at lines 268-269 and also at lines 371-372,
432-433, 476, 480-481, 493, 539, 563-564, 573-574, and 587, fix Tailwind CSS
syntax errors by wrapping all custom pixel values like w-288px, h-300px,
gap-20px in square brackets (e.g., w-[288px]). Similarly, wrap custom color
values like text-#7B7B7B and border-#DBDBDB in square brackets. Replace font
weights like font-500 and font-600 with the correct Tailwind classes font-medium
and font-semibold respectively. Search the entire file for these patterns and
correct them accordingly.
Comment on lines
+217
to
+224
| const { data: donors } = { data: [] }; // indexer.useDonors({}); | ||
|
|
||
| const sponsors: Participant[] = []; | ||
| const { data: priceOfOneNear } = coingeckoHooks.useNativeTokenUsdPrice(); | ||
| const price = priceOfOneNear ? parseNumber(priceOfOneNear) : 0; | ||
|
|
||
| console.log({ donors, priceOfOneNear }); | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove console.log statements and implement proper data fetching.
Debug console.log statements should be removed, and the commented-out indexer hook should be properly implemented.
- const { data: donors } = { data: [] }; // indexer.useDonors({});
+ const { data: donors } = indexer.useDonors({});
const sponsors: Participant[] = [];
const { data: priceOfOneNear } = coingeckoHooks.useNativeTokenUsdPrice();
const price = priceOfOneNear ? parseNumber(priceOfOneNear) : 0;
- console.log({ donors, priceOfOneNear });Also remove the console.log on line 244:
- console.log("data now", data);🤖 Prompt for AI Agents
In src/pages/donors/index.tsx around lines 217 to 224, remove the console.log
statements used for debugging and replace the placeholder data assignment with
the actual data fetching by uncommenting and properly using the
indexer.useDonors() hook. Also, locate and remove the console.log statement on
line 244 to clean up debug outputs.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit