Merge pull request #376 from Calebux/feat/confetti-winning

Feat/confetti winning

Author: Otaiki1

client/package.json

@@ -21,6 +21,7 @@
         "@stellar/stellar-sdk": "^14.4.3",
         "@supabase/supabase-js": "^2.76.1",
         "@tailwindcss/vite": "^4.1.13",
+        "canvas-confetti": "^1.9.4",
         "lucide-react": "^0.544.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
@@ -35,6 +36,7 @@
         "@playwright/test": "^1.43.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
+        "@types/canvas-confetti": "^1.9.0",
         "@types/node": "^25.0.9",
         "@types/react": "^19.1.10",
         "@types/react-dom": "^19.1.7",
@@ -51,4 +53,4 @@
         "vite": "^7.1.2",
         "vitest": "^1.4.1"
     }
-}
+}

client/src/pages/RaffleDetails.tsx

@@ -1,4 +1,6 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
+import confetti from "canvas-confetti";
+import { useWalletContext } from "../providers/WalletProvider";
 import { useParams, useSearchParams } from "react-router-dom";
 import { toast } from "sonner";
 import { useRaffle } from "../hooks/useRaffles";
@@ -16,6 +18,8 @@ const RaffleDetails = () => {
     const [searchParams] = useSearchParams();
     const raffleId = id ?? searchParams.get("raffle");
     const parsedRaffleId = raffleId ? parseInt(raffleId, 10) : 0;
+    const { address } = useWalletContext();
+    const hasCelebrated = useRef(false);
 
     const { raffle, error, isLoading, refetch } = useRaffle(parsedRaffleId);
 
@@ -25,6 +29,30 @@ const RaffleDetails = () => {
         return () => window.removeEventListener("focus", handleFocus);
     }, [refetch]);
 
+    useEffect(() => {
+        if (raffle?.winner && address === raffle.winner && !hasCelebrated.current) {
+            const duration = 3 * 1000;
+            const animationEnd = Date.now() + duration;
+            const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+
+            const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min;
+
+            const interval: any = setInterval(function () {
+                const timeLeft = animationEnd - Date.now();
+
+                if (timeLeft <= 0) {
+                    return clearInterval(interval);
+                }
+
+                const particleCount = 50 * (timeLeft / duration);
+                confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
+                confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
+            }, 250);
+
+            hasCelebrated.current = true;
+        }
+    }, [raffle?.winner, address]);
+
     const statusLabel = raffle?.status?.toUpperCase() || "UNKNOWN";
     const lowerStatus = raffle?.status?.toLowerCase() || "";
     const isFinalized = lowerStatus === "closed" || lowerStatus === "finalized" || lowerStatus === "cancelled";
@@ -81,6 +109,20 @@ const RaffleDetails = () => {
                 />
             </div>
 
+            {raffle?.winner && address === raffle.winner && (
+                <div className="bg-gradient-to-r from-yellow-400 via-pink-500 to-purple-600 p-1 rounded-3xl mb-6 animate-pulse">
+                    <div className="bg-white dark:bg-[#11172E] rounded-[22px] p-8 text-center shadow-2xl">
+                        <div className="text-5xl mb-4">🏆</div>
+                        <h2 className="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mb-2 tracking-tight">
+                            CONGRATULATIONS!
+                        </h2>
+                        <p className="text-lg text-gray-600 dark:text-pink-200 font-medium">
+                            You are the winner of this raffle! 🎉
+                        </p>
+                    </div>
+                </div>
+            )}
+
             <RaffleDetailsCard
                 image={raffle.image || detailimage}
                 images={raffle.metadata?.images}