From c49c70069295e479442ad498bfe0245a7121e0da Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 1 Mar 2024 23:18:17 +0200
Subject: [PATCH] feat(validator-balance-info): create component and story

---
 .../ValidatorBalanceInfoBox.stories.ts        | 19 +++++++++++
 .../Deposit/ValidatorBalanceInfoBox.tsx       | 32 +++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox.stories.ts
 create mode 100644 src/pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox.tsx

diff --git a/src/pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox.stories.ts b/src/pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox.stories.ts
new file mode 100644
index 00000000..517831c2
--- /dev/null
+++ b/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: {},
+}
diff --git a/src/pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox.tsx b/src/pages/ValidatorOnboarding/Deposit/ValidatorBalanceInfoBox.tsx
new file mode 100644
index 00000000..c8668e8e
--- /dev/null
+++ b/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