Add contributor leaderboard

[joelamouche]

• Add a new page to our website (leaderboard), with link in the side bar: Add a new leaderboard page, with link in the side bar #141
• create a leaderboard that ranks the top 10 contributors (contribution tokens), using profiles from our backend (hooks are already available for this), and contribution token balance from the blockchain (use erc20 hook but with contribution token address - might make sense to create separate hooks)

[adityagupta0251]

Hey @joelamouche! 👋

I'm excited to work on this contributor leaderboard feature! After reviewing the project structure and understanding the tech stack, here's my comprehensive approach:

🎯 Implementation Strategy

1. Architecture & Component Structure

• Create a new Leaderboard page component in frontend/src/pages/
• Build reusable sub-components:
  • LeaderboardTable - Main ranking display with sortable columns
  • ContributorCard - Individual contributor profile card
  • LoadingSkeleton - Placeholder while fetching data
  • LeaderboardHeader - Filter/sort controls

2. Data Fetching & State Management

Using the project's existing stack (TanStack Query + wagmi):

• Backend Integration:

  • Call existing API endpoints to fetch contributor profiles
  • Use available hooks for profile data

• Blockchain Integration:

  • Leverage wagmi hooks to fetch ERC20 token balances
  • Query contribution token contract with PUBLIC_ACTIVITY_TOKEN_ADDRESS
  • Create custom hook: useContributionTokenBalance(address) for token balance lookups
  • Optional: useTopContributors() hook to aggregate and rank contributors by token count

• Data Pipeline:

  • Fetch profiles from backend
  • Batch query token balances from blockchain
  • Sort descending by contribution tokens
  • Display top 10 ranked contributors

3. UI/UX Implementation

• Design System Integration:

  • Use Tailwind CSS (already configured in project)
  • Maintain consistency with existing design patterns
  • Responsive layout (mobile-first approach)

• Core Features:

  • Ranked table with rank #, avatar, name, contribution tokens
  • Profile links to individual contributor pages
  • Loading states with skeleton screens
  • Error handling for blockchain/API failures
  • Refresh button for manual data updates

4. Navigation Integration

• Add sidebar link pointing to /leaderboard route
• Use TanStack Router for type-safe routing (already in project)
• Integrate with existing navigation component

5. Technical Details

• TypeScript: Full type safety for components and data
• Error Handling: Graceful fallbacks for failed API/blockchain calls
• Performance:
  • Memoize expensive computations
  • Implement request caching via TanStack Query
  • Lazy load components if needed

6. Testing & Quality

• Test with mock data first
• Verify blockchain queries work correctly
• Cross-browser testing for responsive design
• Follow project's contributing guidelines

📅 Timeline

I'm ready to start immediately and can have a working PR ready for review within 1-2 weeks, depending on backend API availability and any clarifications needed.

Could you assign this to me when ready?.🤝🏻

[joelamouche]

Hi @adityagupta0251 ,

Sounds great!

Regarding ContributorCard, are you refering to the component for each line of the leaderboard? There are already profiles in the profile page.

Also don't forget to add link to the leaderboard page from the sidebar

[adityagupta0251]

Okay

[adityagupta0251]

Can I take 3-4 days to update you..
Since I'm out of station for some days..

Hopefully shortly you would being updated 🙌🏼 @joelamouche

[adityagupta0251]

Sir @joelamouche Let give me some days for this I'm learning some of Blockchain Concepts & practicing & also I'm quite busy with handling with my academics exams

After 2 days I will confirm you either I let the pull request or with I can't maybe
Or if you can compensate some more days than also would being helpful..
Thank you sir🙏

[joelamouche]

No worries 👍