From 4a8382a46fa8b1a8321205f3876675198ef30887 Mon Sep 17 00:00:00 2001
From: bartosz-lipinski <264380+bartosz-lipinski@users.noreply.github.com>
Date: Tue, 13 Apr 2021 23:39:14 -0500
Subject: [PATCH] fix: confetti

---
 .../metavinci/src/views/artCreate/index.tsx    | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/metavinci/src/views/artCreate/index.tsx b/packages/metavinci/src/views/artCreate/index.tsx
index 618019c..8a2512b 100644
--- a/packages/metavinci/src/views/artCreate/index.tsx
+++ b/packages/metavinci/src/views/artCreate/index.tsx
@@ -619,7 +619,7 @@ const Congrats = () => {
         <Button className="congrats-button"><span>Sell it via auction</span><span>&gt;</span></Button>
       </div>
     </div>
-    <Conffeti />
+    <Confetti />
   </>
 }
 
@@ -632,7 +632,7 @@ interface Particle {
   size: number,
 }
 
-const Conffeti = () => {
+const Confetti = () => {
   const [particles, setParticles] = useState<Array<Particle>>(Array.from({ length: 30 }).map(_ => ({
     top: -Math.random() * 100,
     left: Math.random() * 100,
@@ -643,13 +643,23 @@ const Conffeti = () => {
   })))
 
   useEffect(() => {
-    setInterval(() => {
+    const interval = setInterval(() => {
       setParticles(parts => parts.map(part => ({
         ...part,
         top: (part.top > 130 ? -30 : part.top + part.speed),
         angle: (part.angle > 360 ? 0 : part.angle + part.angle_speed),
       })))
-    }, 40)
+    }, 70);
+
+    const timeout = setTimeout(() => {
+      setParticles([]);
+      clearInterval(interval);
+    }, 5000);
+
+    return () => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+    };
   }, [])
 
   const getStyle = (particle: Particle) => ({