Skip to content

161-feature-donors-page-and-leaderboard #163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 53 commits into
base: staging
Choose a base branch
from

Conversation

Jikugodwill
Copy link
Collaborator

@Jikugodwill Jikugodwill commented Oct 9, 2024

Summary by CodeRabbit

  • New Features
    • Introduced a comprehensive Donor Leaderboard page with tabs for donors, sponsors, and donation activities.
    • Added search and filtering options for leaderboard and activity lists.
    • Displayed top donors and sponsors with custom trophy icons and visual highlights for top ranks.
    • Enabled navigation to the Donors page from the main app bar.
    • Provided responsive layouts for both desktop and mobile views.

@Jikugodwill Jikugodwill linked an issue Oct 9, 2024 that may be closed by this pull request
Copy link

vercel bot commented Oct 9, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
potlock-next-app ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 2, 2025 2:10pm

@Jikugodwill Jikugodwill changed the base branch from main to staging October 9, 2024 17:01
@akaia-shadowfox akaia-shadowfox removed the request for review from Ebube111 October 31, 2024 13:13
@PotLock PotLock deleted a comment from Jikugodwill Oct 31, 2024
Copy link
Collaborator

@akaia-shadowfox akaia-shadowfox left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Base automatically changed from staging to main December 2, 2024 14:14
@akaia-shadowfox akaia-shadowfox changed the base branch from main to staging July 2, 2025 13:44
Copy link
Contributor

coderabbitai bot commented Jul 2, 2025

Walkthrough

This 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

File(s) Change Summary
src/common/ui/layout/svg/Trophy.tsx Added a new temporary React component rendering a customizable SVG trophy icon.
src/features/donation/components/DonationLeaderboardEntry.tsx Introduced DonationLeaderboardEntry component and its props type for leaderboard entries.
src/features/donation/index.ts Exported DonationLeaderboardEntry from the donation feature's main entry point.
src/layout/components/app-bar.tsx Re-enabled the "Donors" navigation link by uncommenting its entry.
src/pages/donors/index.tsx Added a new leaderboard page with tabbed navigation, demo data, and responsive UI for donors/sponsors.

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
Loading

Possibly related PRs

Suggested reviewers

  • Jikugodwill

Poem

🏆
A leaderboard blooms on the donor's page,
With trophies and names, a digital stage.
Donors and sponsors, their ranks now displayed,
The app bar invites you—no link is delayed!
Search, sort, and filter, let generosity shine,
This rabbit applauds your leaderboard design!
🥕

✨ Finishing Touches
  • 📝 Generate Docstrings

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 73d87a4 and b667cd4.

📒 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 DonationLeaderboardEntry follows the established pattern and correctly exposes the component.

Comment on lines +209 to +211
const [selectedTab, setSelectedTab] = useState<"donors" | "sponsors" | "activities">(
"activities",
);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

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),
)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

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;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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 (use font-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 });

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

⚠️ Potential issue

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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FEATURE] Donors page and Leaderboard
3 participants