ISSUE-DASH-001: Integrate TotalPool with Real Lottery Contract Data

[davidmelendez]

ISSUE-DASH-001: Integrate TotalPool with Real Lottery Contract Data

✨ Issue Request

Replace mock data in the TotalPool component with real information from the Lottery contract, showing the accumulated prize pool of the current active lottery or indicating if the lottery is closed.

📌 Description

The TotalPool component located at packages/nextjs/components/dashboard/pool/page.tsx currently displays hardcoded data (pool: 1245.67, usdValue: 48230) and a countdown based on mock dates. This issue requires integrating the component with the Lottery contract to:

1. Get the current active lottery: Determine the ID of the latest lottery and verify if it's active.
2. Show the real prize pool: Obtain the accumulated jackpot amount from the contract.
3. Handle closed state: If there's no active lottery, display a message indicating the lottery is closed, but still show the final accumulated prize pool.
4. Block-based countdown: Use the block system to calculate remaining time instead of mock timestamps.

🛠️ Steps to Reproduce (if applicable)

1. Navigate to the main dashboard of the application
2. Observe the TotalPool component at the top
3. The displayed values are static and don't reflect the real contract state

🖼️ Screenshots (if applicable)

Not applicable - contract integration improvement.

🎯 Expected Behavior

The implementation must meet the following criteria:

Main Functionality

1. 🔹 Get current lottery ID: Use the existing useCurrentDrawId() hook to get the current lottery ID from the contract.

2. 🔹 Get draw information: Use the useDrawInfo({ drawId }) hook to obtain:

   • jackpotFormatted: The prize pool amount in readable format
   • isDrawActiveBlocks: Lottery status (active/closed)
   • blocksRemaining: Remaining blocks until closure
   • timeRemainingFromBlocks: Estimated time converted from blocks

3. 🔹 Contract functions to query (through hooks):

   • GetCurrentDrawId(): Returns the current lottery ID
   • GetJackpotEntryAmount(drawId): Returns the accumulated prize pool amount
   • IsDrawActive(drawId): Returns if the lottery is active (true/false)
   • GetBlocksRemaining(drawId): Returns how many blocks remain until closure
   • GetJackpotEntryIsActive(drawId): Alternative to verify active status

4. 🔹 Display state based on conditions:

   • If lottery is active: Show current pool and normal countdown
   • If lottery is closed: Show message "Current lottery is closed. New draw coming soon." and final accumulated pool

5. 🔹 USD price conversion: Optionally, use the useTokenPrice hook or price service to convert STRKP to USD (can be a future improvement).

State Management

• 🔹 Loading: While loading contract data, show skeleton or loading state
• 🔹 Error: If there's an error fetching data, show appropriate message
• 🔹 No lottery: If drawId === 0, show message indicating no lotteries have been created yet

UI/UX

• 🔹 Maintain the current visual design of the component
• 🔹 Animations and visual effects should remain
• 🔹 Amount format should continue showing $TRKP symbol
• 🔹 Countdown should auto-update while lottery is active

🚀 Suggested Solution / Feature Request

1. Hooks to use

The component should import and use:

import { useCurrentDrawId } from "~~/hooks/scaffold-stark/useCurrentDrawId";
import { useDrawInfo } from "~~/hooks/scaffold-stark/useDrawInfo";

2. Data structure to obtain

From useCurrentDrawId() hook:

• currentDrawId: Numeric ID of current lottery
• isLoading: Loading state
• error: Error if any

From useDrawInfo({ drawId }) hook:

• jackpotAmount: Amount as BigInt
• jackpotFormatted: Formatted amount as string (e.g., "1245.67 $TRKP")
• isDrawActiveBlocks: Boolean indicating if active
• blocksRemaining: Number of remaining blocks
• timeRemainingFromBlocks: Object with { days, hours, minutes, seconds }

3. Rendering logic

Step 1: Get currentDrawId from hook
Step 2: Pass the drawId to the useDrawInfo hook
Step 3: Evaluate isDrawActiveBlocks:

• If true: Show pool + normal countdown
• If false: Show pool + "lottery closed" message

Step 4: Use timeRemainingFromBlocks for countdown instead of current manual calculation

4. Contract functions (reference)

These functions are called internally by the hooks, no need to call them directly:

• GetCurrentDrawId(): Returns current lottery ID (u64)
• GetJackpotEntryAmount(drawId: u64): Returns accumulated pool (u256)
• IsDrawActive(drawId: u64): Returns if active (bool)
• GetBlocksRemaining(drawId: u64): Returns remaining blocks (u64)
• GetJackpotEntryIsActive(drawId: u64): Alternative to verify status (bool)

5. Refactored component structure

The component should:

1. Remove mock states (pool, usdValue)
2. Use hooks to get real data
3. Handle loading/error states
4. Condition rendering based on isDrawActiveBlocks
5. Keep existing Framer Motion animations

📌 Additional Notes

• The useCurrentDrawId and useDrawInfo hooks are already implemented and tested in the project
• The useDrawInfo hook already handles block-to-time conversion (12 seconds per block)
• The component should continue using useTranslation for multilingual texts
• Do not implement direct contract function calls, use the provided hooks

⚠️ Before Applying

Please read this guide: Contributor Guidelines