Merge branch 'hn.validator-onboarding' of github.com:nimbus-gui/nimbus-gui into ia.responsive-css

src/pages/ValidatorOnboarding/ContinueButton.tsx

@@ -0,0 +1,29 @@
+import { Stack, XStack } from 'tamagui'
+import { Button, InformationBox } from '@status-im/components'
+import { CloseCircleIcon } from '@status-im/icons'
+
+type ContinueButton = {
+  continueHandler: () => void
+  activeStep: number
+}
+
+const ContinueButton = ({ continueHandler, activeStep }: ContinueButton) => {
+  return (
+    <XStack style={{ width: '100%', marginTop: '16px', zIndex: 999, alignItems: 'center' }}>
+      <Stack style={{ width: '100%' }}>
+        <InformationBox
+          message="You have copy and pasted the entire Recovery Phrase. Please ensure you have secured it appropriately prior to continuing."
+          variant="error"
+          icon={<CloseCircleIcon size={20} />}
+        />
+      </Stack>
+      <Stack style={{ width: '100%', alignItems: 'end', zIndex: 999, position: 'absolute' }}>
+        <Button onPress={continueHandler} size={40}>
+          {activeStep < 5 ? 'Continue' : 'Continue to Dashboard'}
+        </Button>
+      </Stack>
+    </XStack>
+  )
+}
+
+export default ContinueButton

src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.stories.ts

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

src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.stories.ts

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

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -1,7 +1,6 @@
-import { Stack, YStack } from 'tamagui'
+import { YStack } from 'tamagui'
 import { useNavigate } from 'react-router-dom'
 import { useState } from 'react'
-import { Button } from '@status-im/components'
 
 import FormStepper from './FormStepper/FormStepper'
 import Titles from '../../components/General/Titles'
@@ -14,13 +13,13 @@ import ConsensusSelection from './ValidatorSetup/ConsensusSelection'
 import Advisories from './Advisories/Advisories'
 import ValidatorSetup from './ValidatorSetup/ValidatorSetup'
 import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
+import ContinueButton from './ContinueButton'
 import './layoutGradient.css'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
   const [isConfirmPhraseStage, setIsConfirmPhraseStage] = useState(false)
   const [subStepValidatorSetup, setSubStepValidatorSetup] = useState(0)
-
   const navigate = useNavigate()
 
   const changeActiveStep = (step: number) => {
@@ -71,11 +70,7 @@ const ValidatorOnboarding = () => {
           {activeStep === 4 && <KeyGeneration isConfirmPhraseStage={isConfirmPhraseStage} />}
           {activeStep === 5 && <Activation />}
         </ValidatorBoxWrapper>
-        <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px', zIndex: 999 }}>
-          <Button onPress={continueHandler}>
-            {activeStep < 5 ? 'Continue' : 'Continue to Dashboard'}
-          </Button>
-        </Stack>
+        <ContinueButton activeStep={activeStep} continueHandler={continueHandler} />
       </YStack>
     </div>
   )

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx

@@ -1,22 +1,7 @@
-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 { withRouter } from 'storybook-addon-react-router-v6'
 
 import ConsensusSelection from './ConsensusSelection'
-import { withRouter } from 'storybook-addon-react-router-v6'
+import { StoryObj } from '@storybook/react'
 
 const meta = {
   title: 'ValidatorOnboarding/ConsensusSelection',
@@ -26,13 +11,10 @@ const meta = {
   },
   tags: ['autodocs'],
   decorators: [withRouter()],
-} satisfies Meta<typeof ConsensusSelection>
-
+}
 export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {
-    
-  },
+  args: {},
 }

src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ExecClientCard from './ExecClientCard'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+const meta = {
+  title: 'ValidatorOnboarding/ExecClientCard',
+  component: ExecClientCard,
+
+  tags: ['autodocs'],
+  decorators: [withRouter()],
+} satisfies Meta<typeof ExecClientCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { name: 'Erigon', icon: '/icons/erigon-circle.png' },
+}

src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx

@@ -6,6 +6,7 @@ import { Avatar, Text } from '@status-im/components'
 type PairedDeviceCardProps = {
   isVisibleState: boolean
 }
+
 const PairedDeviceCard = ({ isVisibleState }: PairedDeviceCardProps) => {
   const [isVisible, setIsVisible] = useState(true)
 

src/redux/ValidatorOnboarding/ValidatorSetup/slice.ts

@@ -5,7 +5,7 @@ interface ExecClientState {
 }
 
 const initialState: ExecClientState = {
-  selectedClient: '',
+  selectedClient: 'Erigon',
 }
 
 const execClientSlice = createSlice({