feat(deposit-panel): add connect and waring components

src/pages/ValidatorManagement/ManageValidator/RightManageSettings/Panels/DepositPanel.tsx

@@ -1,10 +1,23 @@
-import { Button, Text } from '@status-im/components'
-import { XStack, YStack } from 'tamagui'
+import { InformationBox, Text } from '@status-im/components'
+import { PlaceholderIcon } from '@status-im/icons'
+import { YStack } from 'tamagui'
+import { useState } from 'react'
+import { useSelector } from 'react-redux'
 
 import PanelWrapper from './PanelWrapper'
+import ConnectedWallet from '../../../../../components/General/ConnectedWallet'
+import ConnectWallet from '../../../../../components/General/ConnectWallet'
+import { RootState } from '../../../../../redux/store'
 
 const DepositPanel = () => {
-  const connectWalletHandler = () => {}
+  const [isInfoBoxVisible, setIsInfoBoxVisible] = useState(true)
+  const { isWalletConnected, isTransactionConfirmation } = useSelector(
+    (state: RootState) => state.deposit,
+  )
+
+  const onCloseInfoBox = () => {
+    setIsInfoBoxVisible(false)
+  }
 
   return (
     <PanelWrapper>
@@ -19,11 +32,26 @@ const DepositPanel = () => {
           marginBottom: '6px',
         }}
       >
-        <XStack
-          style={{ width: '100%', justifyContent: 'end', marginTop: '6px' }}
-        >
-          <Button onPress={connectWalletHandler}>Connect Wallet</Button>
-        </XStack>
+        {isInfoBoxVisible && !isTransactionConfirmation && (
+          <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}
+            icon={<PlaceholderIcon size={16} />}
+          />
+        )}
+        {!isTransactionConfirmation && (
+          <YStack space={'$3'} style={{ width: '100%' }}>
+            <Text size={19} weight={'semibold'}>
+              Connect Wallet
+            </Text>
+            {isWalletConnected ? (
+              <ConnectedWallet />
+            ) : (
+              <ConnectWallet isConnectBtnJustifyEnd={true} />
+            )}
+          </YStack>
+        )}
       </YStack>
     </PanelWrapper>
   )