feat(validator-balance-info): create component and story

src/pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ValidatorBalanceInfoBox from './ValidatorBalanceInfoBox'
+
+const meta = {
+  title: 'Deposit/ValidatorBalanceInfoBox',
+  component: ValidatorBalanceInfoBox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ValidatorBalanceInfoBox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}

src/pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox.tsx

@@ -0,0 +1,32 @@
+import { InformationBox } from '@status-im/components'
+import { PlaceholderIcon } from '@status-im/icons'
+import { useState } from 'react'
+import { useSelector } from 'react-redux'
+
+import { RootState } from '../../../redux/store'
+
+const ValidatorBalanceInfoBox = () => {
+  const [isInfoBoxVisible, setIsInfoBoxVisible] = useState(true)
+  const { isTransactionConfirmation } = useSelector(
+    (state: RootState) => state.deposit,
+  )
+
+  const onCloseInfoBox = () => {
+    setIsInfoBoxVisible(false)
+  }
+
+  return (
+    <>
+      {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} />}
+        />
+      )}
+    </>
+  )
+}
+
+export default ValidatorBalanceInfoBox