From 691bc01c42e2d92225d64c714c619b7b29a3384e Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sun, 8 Oct 2023 15:32:19 +0300
Subject: [PATCH] feat: create state for open key generation sync card

---
 .../KeyGenerationSyncCard.tsx                  | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.tsx
index 32151617..424169d8 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.tsx
@@ -1,6 +1,7 @@
 import { Stack, XStack, YStack } from 'tamagui'
 import { ClearIcon } from '@status-im/icons'
 import { Text } from '@status-im/components'
+import { useState } from 'react'
 
 import StandardGauge from '../../../../components/Charts/StandardGauge'
 import BorderBox from '../../../../components/General/BorderBox'
@@ -14,6 +15,16 @@ type KeyGenerationSyncCardProps = {
 }
 
 const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyncCardProps) => {
+  const [isOpen, setIsOpen] = useState(true)
+
+  const closeCardHanlder = () => {
+    setIsOpen(false)
+  }
+
+  if (isOpen === false) {
+    return
+  }
+
   return (
     <BorderBox style={{ borderRadius: '10.1px', borderWidth: '0.5px' }}>
       <XStack space={'$2'} alignItems="center">
@@ -48,7 +59,12 @@ const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyn
             {formatNumberForGauge(synced)} / {formatNumberForGauge(total)}
           </Text>
         </YStack>
-        <ClearIcon size={20} color="#A1ABBD" />
+        <ClearIcon
+          size={20}
+          color="#A1ABBD"
+          onClick={closeCardHanlder}
+          style={{ cursor: 'pointer' }}
+        />
       </XStack>
     </BorderBox>
   )