ISSUE-DASH-002: Integrate LastDrawResultsCard with Real Contract Data

[davidmelendez]

ISSUE-DASH-002: Integrate LastDrawResultsCard with Real Contract Data

✨ Issue Request

Connect the LastDrawResultsCard component with the Lottery contract to display real results from the last completed draw, including winning numbers, jackpot amount, and number of winners.

📌 Description

The LastDrawResultsCard component (located at packages/nextjs/components/dashboard/dashboard/LastDrawResultsCard.tsx) currently uses the LastDrawResults component which gets data from a mock service (useLatestDraw). This issue requires replacing this implementation with real data from the Lottery contract:

1. Identify last completed draw: Determine which was the last draw that finished (isActive = false).
2. Get winning numbers: Read the 5 winning numbers from the draw from the contract.
3. Show real jackpot: Obtain the accumulated prize pool amount from that draw.
4. Temporal information: Display start and end dates of the draw.
5. Draw status: Indicate if the draw is completed and if prizes were distributed.

The component must handle both the case where there's a previous completed draw and the case where no draw has been completed yet.

🛠️ Steps to Reproduce (if applicable)

1. Navigate to main dashboard
2. Scroll to the LastDrawResultsCard component
3. Observe that it shows mock data that doesn't correspond to the real contract

🖼️ 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 GetCurrentDrawId() to know which is the last registered draw.

2. 🔹 Determine completed draw:

   • If current draw is active, last completed is currentDrawId - 1
   • If current draw is inactive, that same one is the last completed
   • Validate using IsDrawActive(drawId) or GetJackpotEntryIsActive(drawId)

3. 🔹 Contract functions to query:

   • GetCurrentDrawId(): Get current lottery ID
   • IsDrawActive(drawId): Verify if a specific draw is active
   • GetWinningNumbers(drawId): Get the 5 winning numbers (returns Array)
   • GetJackpotEntryAmount(drawId): Get jackpot amount
   • GetJackpotEntryStartTime(drawId): Get start timestamp (u64, unix timestamp)
   • GetJackpotEntryEndTime(drawId): Get end timestamp (u64, unix timestamp)
   • GetJackpotEntryIsCompleted(drawId): Verify if draw is completed

4. 🔹 Data formatting:

   • Winning numbers come as Array<u16>, convert to numbers for display
   • Jackpot amount comes as u256 with 18 decimals, format appropriately
   • Timestamps are unix timestamps (seconds), convert to readable dates

5. 🔹 Winner information:

   • For this initial version, can show "N/A" or "Pending distribution"
   • In future versions will integrate with DistributePrizes function to count real winners

State Management

• 🔹 Loading: Show skeleton loader while loading data
• 🔹 No completed draws: If currentDrawId === 0 or currentDrawId === 1 and active, show message "No completed draws yet"
• 🔹 Contract read error: Show error message with retry option
• 🔹 Draw without winning numbers: If draw is completed but has no winning numbers (all zeros), show message "Draw pending execution"

UI/UX

• 🔹 Maintain current Card component design
• 🔹 Winning numbers should be displayed in circles with animation (already exists in code)
• 🔹 Amount should be formatted with thousand separators and show $TRKP or STRK symbol
• 🔹 Dates should be displayed in readable format (e.g., "Dec 15, 2024")

🚀 Suggested Solution / Feature Request

1. Create custom hook (optional but recommended)

Create a new hook useLastCompletedDraw in packages/nextjs/hooks/scaffold-stark/:

export function useLastCompletedDraw() {
  // Logic to get last completed draw
  // Use useScaffoldReadContract for calls
}

2. Data structure to obtain

Needed data from last completed draw:

• drawId: Draw ID (u64)
• winningNumbers: Array of 5 numbers (Array)
• jackpotAmount: Prize pool amount (u256)
• startTime: Start timestamp (u64)
• endTime: End timestamp (u64)
• isCompleted: If completed (bool)

3. Logic to determine last completed draw

// Pseudocode - DO NOT copy literally
1. Get currentDrawId from contract
2. If currentDrawId === 0: return null (no draws)
3. Check if current draw is active
4. If active: lastCompletedId = currentDrawId - 1
5. If inactive: lastCompletedId = currentDrawId
6. If lastCompletedId === 0: return null (no completed draws)
7. Get data from lastCompletedId

4. Contract functions (reference)

The following Lottery contract functions should be queried:

Function: GetCurrentDrawId()

• Parameters: None
• Returns: u64 (current draw ID)
• Description: Returns the incremental ID of the most recent lottery

Function: IsDrawActive(drawId: u64)

• Parameters: drawId (u64)
• Returns: bool (true if active, false if closed)
• Description: Verifies if a specific draw is still accepting purchases

Function: GetWinningNumbers(drawId: u64)

• Parameters: drawId (u64)
• Returns: Array<u16> (array with 5 numbers)
• Description: Returns the winning numbers of the draw. If not drawn yet, returns [0,0,0,0,0]
• Note: This function requires the draw to be completed (isActive = false)

Function: GetJackpotEntryAmount(drawId: u64)

• Parameters: drawId (u64)
• Returns: u256 (amount in wei, 18 decimals)
• Description: Returns the accumulated prize pool of the draw

Function: GetJackpotEntryStartTime(drawId: u64)

• Parameters: drawId (u64)
• Returns: u64 (unix timestamp in seconds)
• Description: Draw start date/time

Function: GetJackpotEntryEndTime(drawId: u64)

• Parameters: drawId (u64)
• Returns: u64 (unix timestamp in seconds)
• Description: Draw end date/time

Function: GetJackpotEntryIsCompleted(drawId: u64)

• Parameters: drawId (u64)
• Returns: bool (true if completed)
• Description: Verifies if the draw finished (inverse of isActive)

5. Updated component

The LastDrawResultsCard component should:

1. Replace the use of useLatestDraw with real contract data
2. Use useScaffoldReadContract or a custom hook to get data
3. Handle loading, error and "no data" states
4. Properly format numbers, amounts and dates
5. Maintain existing Framer Motion animations

6. Performance considerations

• Contract calls should be made efficiently
• Consider using watch: false in reads that don't change frequently
• Implement local cache if needed to avoid repetitive calls

📌 Additional Notes

• The useScaffoldReadContract hook is already available in the project for contract reads
• The Lottery contract already has all necessary getter functions implemented
• The GetWinningNumbers function will throw an error if trying to read from a draw that's still active
• Winning numbers are stored as u16 (range 1-40 in current contract)
• Do not implement direct calls using contract.call(), use Scaffold-Stark hooks

⚠️ Before Applying

Please read this guide: Contributor Guidelines