From 6fcf36978011c51b99bccb9731a267a71419fdee Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 19 Sep 2023 19:24:49 +0300
Subject: [PATCH] feat: visible state for info box

---
 .../ValidatorOnboarding/Deposit/Deposit.tsx   | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx b/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
index 972d149d..2132adb7 100644
--- a/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
+++ b/src/pages/ValidatorOnboarding/Deposit/Deposit.tsx
@@ -1,7 +1,15 @@
 import { Avatar, Button, DividerLine, InformationBox, Input, Text } from '@status-im/components'
+import { PlaceholderIcon } from '@status-im/icons'
 import { Stack, XStack, YStack } from 'tamagui'
+import { useState } from 'react'
 
 const Deposit = () => {
+  const [isInfoBoxVisible, setIsInfoBoxVisible] = useState(true)
+
+  const onCloseInfoBox = () => {
+    setIsInfoBoxVisible(false)
+  }
+
   return (
     <YStack space={'$2'} style={{ width: '100%', padding: '16px 32px', alignItems: 'start' }}>
       <Text size={19} weight={'semibold'}>
@@ -14,10 +22,13 @@ const Deposit = () => {
         </Text>
         <Input style={{ fontWeight: 'bold' }} />
       </Stack>
-      <InformationBox
-        message="Your Validator balances currently require a deposit. If you have already made a deposit using Launchpad please wait until the transaction is posted on execution layer to continue."
-        variant="error"
-      />
+      {isInfoBoxVisible && (
+        <InformationBox
+          message="Your Validator balances currently require a deposit. If you have already made a deposit using Launchpad please wait until the transaction is posted on execution layer to continue."
+          variant="error"
+          onClosePress={onCloseInfoBox}
+        />
+      )}
       <Text size={19} weight={'semibold'}>
         Connect Wallet
       </Text>