[FE]: Implement Earnings Section for ChainLib

[Iwueseiter]

Overview

The ChainLib project requires the implementation of a comprehensive earnings section that displays user earnings and transaction history,. We need a developer to build this section from scratch, following the provided Figma design and implementing proper functionality.

Project Details

• Tech Stack: Next.js, TypeScript, Tailwind CSS
• Current Status: The Earnings section needs to be built from the ground up with complete designs and functionality.

Issue Description

The earnings section is a critical component of our application that needs to be implemented. We need comprehensive development to:

1. Implement proper UI/UX for the earnings dashboard, charts, and transaction displays
2. Code Implementation: Build clean, efficient code structure with proper type safety and component organization
3. Styling: Implement consistent styling patterns and responsive design for all earnings-related components

Specific Areas Requiring Attention

• Earnings dashboard layout and components
• Interactive charts and data visualization
• Transaction history table with filtering and sorting
• Earnings summary cards and statistics
• Mobile responsiveness for all earnings views
• Loading states and error handling
• Data fetching and state management

Expectations

Technical Requirements

• Code Quality: Clean, maintainable, and efficient code
• Design: Pixel-perfect implementation of provided design
• Responsive Design: Mobile-first approach with proper breakpoints
• Testing: Component tests for critical functionality

Deliverables

• Complete earnings section with all subcomponents
• Fully implemented designs matching Figma specifications
• Responsive design working across all device sizes
• Proper error handling and loading states

Timeline

• Estimated Duration: 3 days
• Milestone Check-ins: Daily progress updates
• Final Delivery: Complete earnings section ready for production

Figma Design

The Figma file contains all the design specifications for the earnings section, including component variants, color schemes, typography, charts, and interaction states. Please review thoroughly before starting work.

Join our Telegram group for:

• Quick questions and clarifications
• Daily progress updates
• Design feedback and discussions
• Technical support and guidance

Application Process

If you're interested in taking on this earnings section implementation, please:

1. Review the codebase and understand the current project structure
2. Check the Figma designs to understand the scope of the earnings section
3. Join our Telegram group for further discussion
4. Provide an estimate for timeline and effort required

[10daer]

What I Will Implement

I will build the earnings section from scratch, including a clean dashboard with charts, earnings cards, and summary stats. It will feature a transaction table with sorting and filtering, interactive charts, loading indicators, and clear error messages. The section will be fully responsive, fetch data from the backend, and match the Figma design exactly.

Plan

1. Set up folder structure:
   Create a dedicated earnings folder with subfolders for components, types, and hooks.
2. Earnings Dashboard Page:
   Build a main page at /dashboard/earnings using Next.js and TypeScript.
3. Components:
   • EarningsCard.tsx – shows key stats like total earned
   • TransactionTable.tsx – table with earnings transactions
   • EarningsChart.tsx – chart using react-chartjs-2 or recharts
   • LoadingSkeleton.tsx – shows skeleton while data is loading
   • ErrorDisplay.tsx – shows error if data fails to load
4. Styling:
   Use Tailwind CSS for spacing, layout, colors, and responsive design. I'll make sure it's mobile-first.
5. Data Handling:
   • Use SWR or React Query to fetch and cache data
   • Types defined in types.ts for safety
   • Handle loading, success, and error states clearly

Timeline (ETA)

• Day 1: Set up file structure, build dashboard layout, start earnings cards and data fetching logic
• Day 2: Complete chart and transaction table with filtering + mobile styles and add loading/error states, polish styles, test responsiveness, write tests

I’ll provide daily updates in the Telegram group and deliver clean, working code in 3 days.

With confidence, I’ll deliver a solid, clear, and well-structured earnings section that’s ready for production in just 3 days.

Let’s get started!
10daer

[chiscookeke11]

I'm Chiscookeke11, a frontend developer and a previous contributor to this project. With the experience I’ve gained and the improvement in my skills, I’m confident I can handle this task effectively. I’d love the opportunity to contribute once again. ETA: 3days

[chiscookeke11]

Thank you On it!

…

On Thu, 29 May 2025, 07:59 Iwueseiter, ***@***.***> wrote: Assigned #32 <#32> to @chiscookeke11 <https://github.com/chiscookeke11>. — Reply to this email directly, view it on GitHub <#32 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BAYCM7HZJU46XZ657BADM2D3A2V6DAVCNFSM6AAAAAB6CSO7VKVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJXHA3DGMBSG43DCNA> . You are receiving this because you were assigned.Message ID: ***@***.*** com>