From 2bb603c27661f37ae956e129fb8b6966b370a919 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 29 Aug 2023 11:32:42 +0300
Subject: [PATCH] Add confeti timer

---
 .../Activation/Activation.tsx                 | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
index 8954b8d4..294c775e 100644
--- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx
+++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
@@ -1,11 +1,24 @@
-import { XStack, Stack, YStack } from 'tamagui'
-import { Text } from '@status-im/components'
-import Confetti from 'react-confetti'
+import React, { useState, useEffect } from 'react';
+import { XStack, Stack, YStack } from 'tamagui';
+import { Text } from '@status-im/components';
+import Confetti from 'react-confetti';
 
 const Activation = () => {
+  const [showConfetti, setShowConfetti] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowConfetti(false);
+    }, 5000);  // Hide after 5 seconds
+
+    return () => {
+      clearTimeout(timer);  // Clear the timer if the component is unmounted
+    };
+  }, []);  // The empty dependency array means this effect will only run once, similar to `componentDidMount`
+
   return (
     <Stack>
-      <Confetti width={1000} height={800} />
+      {showConfetti && <Confetti width={1000} height={800} />}
       <YStack style={{ width: '100%', padding: '16px 32px' }}>
         <XStack justifyContent={'space-between'} style={{ marginBottom: '10px' }}>
           <Text size={27} weight={'semibold'}>
@@ -17,4 +30,4 @@ const Activation = () => {
   )
 }
 
-export default Activation
+export default Activation;