Create Upcoming Battles Page

[Mrwicks00]

Description

The navbar has a link to /upcoming but the page doesn't exist. Create a dedicated upcoming battles page that displays all battles in the UPCOMING state.

Tasks

• Create frontend/app/upcoming/page.tsx route
• Create a custom hook useUpcomingBattles() to fetch battles with state UPCOMING from BattleManager
• Display upcoming battles in a grid layout using BattleCard component
• Show countdown timers to submission start time
• Display battle theme, prize pool, and submission/voting schedule
• Add empty state when no upcoming battles exist
• Handle loading and error states
• Match the design style of the home page
• Ensure the page is accessible from the navbar link

Contract Functions Used

• BattleManager.battleCounter() - Get total number of battles
• BattleManager.battles(uint256) - Get battle struct by ID
• BattleManager.getBattleState(uint256) - Get battle state

Files to Create

• frontend/app/upcoming/page.tsx (new file)
• frontend/hooks/useUpcomingBattles.ts (new file)

Files to Modify

• None (navbar already has the link)

[Ajith27887]

Can I work on this?