Implement Daily Challenge and normal challenge Countdown in Leaderboard

[Cheelax]

Description: We need to implement a countdown for the daily challenge reset in the Daily Leaderboard. This will provide players with clear information about when the next daily challenge will be available.

Tasks:

1. Create Countdown Utility
   • Implement a function to calculate time until next day (00:00 UTC) and next month for normal challenge
   • Create a custom React hook for the countdown
2. Update Leaderboard Component
   • Import the countdown hook
   • Add the correct countdown display in the Daily Leaderboard section or the Normal Leaderboard section
   • Update layout to accommodate new information
3. Styling
   • Ensure countdown is visually appealing and fits with existing design
   • Implement any necessary animations or transitions
4. Testing
   • Test countdown accuracy
   • Verify correct display on different screen sizes
   • Test behavior around midnight (day change)
   • Be sure to be consistent in different timezones
5. Performance Optimization
   • Ensure countdown updates don't cause unnecessary re-renders
   • Optimize any calculations or state updates

Acceptance Criteria:

• Countdown is accurately displayed in both and Daily and Normal Leaderboard
• Countdown updates every second
• UI is responsive and displays correctly on all device sizes
• Countdown resets correctly at midnight (UTC)

[ooochoche]

@Cheelax I’m available to work on this

[ShantelPeters]

@Cheelax can I jump on this …

[GoSTEAN]

@Cheelax Can this be assigned to me?

[estherbreath]

@Cheelax I'm ready to tackle this issue. Having previously resolved a similar problem on OnlyDust, Please assign this task to me so I can start working on it right away.

My approach to implementing the countdown feature involves crafting a sleek, responsive UI that seamlessly integrates with the Leaderboard, powered by efficient React hooks for real-time updates. Rigorous testing across time zones ensures accuracy, while performance optimization guarantees smooth operation without unnecessary re-renders.

[CollinsC1O]

Hi @Cheelax I will love to work on this issue. will love to be assigned

[MullerTheScientist]

Hello @Cheelax I want to work on this

[Dprof-in-tech]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As an experienced Full Stack Blockchain Developer, I'm excited to contribute my expertise to Edition 7 of the OnlyDust hackathons. With a strong background in Next.js, TypeScript, JavaScript, React, Node.js, Solidity, and Cairo, I've honed my technical skills across the blockchain development landscape. My journey with OnlyDust began at Edition 2, and I've since made 28 contributions across 11 projects. This extensive experience on the platform has allowed me to develop a keen understanding of delivering high-quality solutions under tight deadlines. My track record includes being a major contributor to building out the Pistols Web game by Underware and demonstrates my ability to adapt quickly and contribute effectively to diverse challenges. I'm confident in my capacity to tackle new problems and drive innovation in the blockchain space. As we embark on Edition 7, I'm eager to leverage my hackathon experience and technical skills to push the boundaries of what's possible in blockchain development. With a passion for creating cutting-edge solutions, I'm excited to collaborate with the OnlyDust community and contribute to the advancement of the blockchain ecosystem.

How I plan on tackling this issue

To solve this issue, i will

Create Countdown Utility Implement a function to calculate the time until the next day (00:00 UTC) and the next month for the normal challenge. Create a custom React hook for the countdown that handles the time calculation and updating. Update Leaderboard Component Import the countdown hook created in the previous step. Add the correct countdown display in the Daily Leaderboard section or the Normal Leaderboard section. Update the layout to accommodate the new information. Styling Ensure the countdown is visually appealing and fits with the existing design. Implement any necessary animations or transitions to make the countdown visually engaging. Testing Test the countdown accuracy to ensure it's correctly calculating and displaying the time until the next challenge. Verify the correct display of the countdown on different screen sizes. Test the behavior around midnight (day change) to ensure the countdown resets correctly. Ensure the countdown is consistent across different timezones. Performance Optimization Ensure the countdown updates don't cause unnecessary re-renders in the Leaderboard component. Optimize any calculations or state updates related to the countdown to maintain smooth performance.

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @Cheelax

I’m availabe to work on the "Implement Countdown for Daily Challenge Reset in Leaderboard" issue. My name is Benjamin, and I have extensive experience building gamified TypeScript projects, specializing in Next.js, TypeScript, and frontend development. I’ve contributed to various projects, including those on OnlyDust, where I tackled complex UI and component challenges.

Understanding the Issue:

Currently, the Daily Leaderboard lacks a countdown for the daily challenge reset. Implementing this feature will provide players with clear information about when the next daily challenge will be available, enhancing their experience.

How I plan on tackling this issue

Create Countdown Utility

• Functionality: I will implement a function to calculate the time until the next daily reset (00:00 UTC) and the next monthly challenge reset.
• Custom Hook: I will create a custom React hook to manage the countdown logic.

Update Leaderboard Component

• Integration: I will import the countdown hook into the Daily Leaderboard section and ensure it displays the correct countdown.
• Layout: I will update the layout to accommodate the new countdown information.

Styling

• Design: I will ensure the countdown is visually appealing and fits with the existing design of the leaderboard.
• Animations: I will implement any necessary animations or transitions to enhance the user experience.

Testing

• Accuracy: I will test the countdown accuracy to ensure it reflects the correct time remaining.
• Responsiveness: I will verify that the countdown displays correctly on different screen sizes.
• Edge Cases: I will test the behavior around midnight to ensure it correctly resets and remains consistent across timezones.

Performance Optimization

• Efficiency: I will ensure that the countdown updates do not cause unnecessary re-renders.
• Optimization: I will optimize calculations and state updates to maintain smooth performance.

[Cheelax]

Hi everyone. There is a new process for the ODHack, now you must apply to the tasks directly from Onlydust: https://app.onlydust.com/hackathons/odhack-70 We will only look at application made via this process.

[onlydustapp[bot]]

The maintainer Cheelax has assigned Dprof-in-tech to this issue via OnlyDust Platform. Good luck!

[DIWAKARKASHYAP]

i want to work on this issue