feat: create state for open key generation sync card

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>
   )