From 2418b3f10ff5b86d336964e506a377e3f1c091b6 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 5 Sep 2023 10:42:10 +0300
Subject: [PATCH 1/2] @storybook/addon-actions

---
 package.json                                  |  1 +
 .../ConsensusSelection.stories.tsx            | 38 +++++++++++++++++++
 yarn.lock                                     |  3 +-
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx

diff --git a/package.json b/package.json
index e6ada739..c088e1eb 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@reduxjs/toolkit": "^1.9.5",
     "@status-im/colors": "*",
     "@status-im/components": "^0.3.0",
+    "@storybook/addon-actions": "^7.4.0",
     "@tamagui/config": "1.36.4",
     "@tamagui/react-17-patch": "1.36.4",
     "@tamagui/vite-plugin": "1.36.4",
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx
new file mode 100644
index 00000000..077ffd29
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { action } from '@storybook/addon-actions';
+
+// This is just a mock action for demonstration.
+const myMockAction = () => ({ type: 'MY_ACTION_TYPE', payload: {} });
+
+export const Default: Story = (args) => {
+  const dispatch = useDispatch();
+
+  // Dispatch an action when the component mounts, for example.
+  useEffect(() => {
+    dispatch(myMockAction());
+  }, [dispatch]);
+
+  return <ConsensusSelection {...args} />;
+};
+
+import ConsensusSelection from './ConsensusSelection'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+const meta = {
+  title: 'ValidatorOnboarding/ConsensusSelection',
+  component: ConsensusSelection,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [withRouter()],
+} satisfies Meta<typeof ConsensusSelection>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    
+  },
+}
diff --git a/yarn.lock b/yarn.lock
index 73369add..26c5831f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4479,7 +4479,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:7.4.0":
+"@storybook/addon-actions@npm:7.4.0, @storybook/addon-actions@npm:^7.4.0":
   version: 7.4.0
   resolution: "@storybook/addon-actions@npm:7.4.0"
   dependencies:
@@ -15064,6 +15064,7 @@ __metadata:
     "@reduxjs/toolkit": ^1.9.5
     "@status-im/colors": "*"
     "@status-im/components": ^0.3.0
+    "@storybook/addon-actions": ^7.4.0
     "@storybook/addon-essentials": ^7.2.0
     "@storybook/addon-interactions": ^7.2.0
     "@storybook/addon-links": ^7.2.0

From 1670b5308709f2f5662cdfbb310cfde0734ab5e5 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 5 Sep 2023 10:56:22 +0300
Subject: [PATCH 2/2] Use redux actions in storybook

---
 .../ConsensusSelection.stories.tsx            | 43 +++++++------------
 1 file changed, 16 insertions(+), 27 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx
index 077ffd29..ba6ead6e 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx
@@ -1,24 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { action } from '@storybook/addon-actions';
-
-// This is just a mock action for demonstration.
-const myMockAction = () => ({ type: 'MY_ACTION_TYPE', payload: {} });
-
-export const Default: Story = (args) => {
-  const dispatch = useDispatch();
-
-  // Dispatch an action when the component mounts, for example.
-  useEffect(() => {
-    dispatch(myMockAction());
-  }, [dispatch]);
-
-  return <ConsensusSelection {...args} />;
-};
-
+import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
 import ConsensusSelection from './ConsensusSelection'
 import { withRouter } from 'storybook-addon-react-router-v6'
+import { selectClient } from '../../../redux/ValidatorOnboarding/ValidatorSetup/slice'
 
-const meta = {
+export default {
   title: 'ValidatorOnboarding/ConsensusSelection',
   component: ConsensusSelection,
   parameters: {
@@ -26,13 +12,16 @@ const meta = {
   },
   tags: ['autodocs'],
   decorators: [withRouter()],
-} satisfies Meta<typeof ConsensusSelection>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    
-  },
+}
+
+type ConsensusSelectionProps = React.ComponentPropsWithoutRef<typeof ConsensusSelection>
+
+export const Default: React.FC<ConsensusSelectionProps> = args => {
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    dispatch(selectClient('Erigon'))
+  }, [dispatch])
+
+  return <ConsensusSelection {...args} />
 }