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

src/pages/ValidatorOnboarding/ContinueButton.tsx

@@ -1,6 +1,9 @@
 import { Stack, XStack } from 'tamagui'
 import { Button, InformationBox } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
+import { useSelector } from 'react-redux'
+
+import { RootState } from '../../redux/store'
 
 type ContinueButton = {
   continueHandler: () => void
@@ -8,16 +11,30 @@ type ContinueButton = {
 }
 
 const ContinueButton = ({ continueHandler, activeStep }: ContinueButton) => {
+  const isCopyPastedPhrase = useSelector(
+    (state: RootState) => state.keyGeneration.isCopyPastedPhrase,
+  )
+
   return (
     <XStack style={{ width: '100%', marginTop: '16px', zIndex: 999, alignItems: 'center' }}>
       <Stack style={{ width: '100%' }}>
+        {isCopyPastedPhrase && (
           <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' }}>
+      <Stack
+        style={{
+          width: '100%',
+          alignItems: 'end',
+          zIndex: 999,
+          position: 'absolute',
+          marginTop: isCopyPastedPhrase ? '0px' : '40px',
+        }}
+      >
         <Button onPress={continueHandler} size={40}>
           {activeStep < 5 ? 'Continue' : 'Continue to Dashboard'}
         </Button>

src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.tsx

@@ -3,39 +3,13 @@ import { useDispatch, useSelector } from 'react-redux'
 import wordlist from 'web-bip39/wordlists/english'
 
 import { RootState } from '../../../../redux/store'
-import { setMnemonic, setWord } from '../../../../redux/ValidatorOnboarding/KeyGeneration/slice'
+import {
+  setIsCopyPastedPhrase,
+  setMnemonic,
+  setWord,
+} from '../../../../redux/ValidatorOnboarding/KeyGeneration/slice'
 import styles from './AutocompleteInput.module.css'
 
-const inputStyle = (index: number, isFocused: boolean) => {
-  const style = {
-    outline: 'none',
-    padding: `12px 16px 12px ${index + 1 < 10 ? '35px' : '45px'}`,
-  }
-
-  if (isFocused) {
-    return {
-      ...style,
-      border: '2px solid #4360DF',
-      backgroundColor: '#f1f2f4',
-    }
-  } else {
-    return style
-  }
-}
-
-const autocompleteContainerStyle = (isFocused: boolean) => {
-  if (isFocused) {
-    return {
-      borderTopLeftRadius: '24px',
-      borderTopRightRadius: '24px',
-    }
-  } else {
-    return {
-      borderRadius: '24px',
-    }
-  }
-}
-
 type AutocompleteInputProps = {
   index: number
 }
@@ -63,10 +37,12 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
       dispatch(setWord({ index, word: value }))
     } else if (mnemonicLength === 24) {
       dispatch(setMnemonic(mnemonic))
+      dispatch(setIsCopyPastedPhrase(true))
     } else {
       for (let i = index; i < mnemonicLength + index; i++) {
         dispatch(setWord({ index: i, word: mnemonic.shift() || '' }))
       }
+      dispatch(setIsCopyPastedPhrase(true))
     }
   }
 
@@ -115,3 +91,33 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
 }
 
 export default AutocompleteInput
+
+const inputStyle = (index: number, isFocused: boolean) => {
+  const style = {
+    outline: 'none',
+    padding: `12px 16px 12px ${index + 1 < 10 ? '35px' : '45px'}`,
+  }
+
+  if (isFocused) {
+    return {
+      ...style,
+      border: '2px solid #4360DF',
+      backgroundColor: '#f1f2f4',
+    }
+  } else {
+    return style
+  }
+}
+
+const autocompleteContainerStyle = (isFocused: boolean) => {
+  if (isFocused) {
+    return {
+      borderTopLeftRadius: '24px',
+      borderTopRightRadius: '24px',
+    }
+  } else {
+    return {
+      borderRadius: '24px',
+    }
+  }
+}

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -1,6 +1,7 @@
 import { YStack } from 'tamagui'
 import { useNavigate } from 'react-router-dom'
 import { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 
 import FormStepper from './FormStepper/FormStepper'
 import Titles from '../../components/General/Titles'
@@ -14,16 +15,23 @@ import Advisories from './Advisories/Advisories'
 import ValidatorSetup from './ValidatorSetup/ValidatorSetup'
 import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
 import ContinueButton from './ContinueButton'
+import { setIsCopyPastedPhrase } from '../../redux/ValidatorOnboarding/KeyGeneration/slice'
+import { RootState } from '../../redux/store'
 import './layoutGradient.css'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
   const [isConfirmPhraseStage, setIsConfirmPhraseStage] = useState(false)
   const [subStepValidatorSetup, setSubStepValidatorSetup] = useState(0)
+  const isCopyPastedPhrase = useSelector(
+    (state: RootState) => state.keyGeneration.isCopyPastedPhrase,
+  )
   const navigate = useNavigate()
+  const dispatch = useDispatch()
 
   const changeActiveStep = (step: number) => {
     setActiveStep(step)
+    removeCopyPastePhraseInfoBox()
   }
 
   const continueHandler = () => {
@@ -39,6 +47,13 @@ const ValidatorOnboarding = () => {
     } else {
       navigate('/')
     }
+    removeCopyPastePhraseInfoBox()
+  }
+
+  const removeCopyPastePhraseInfoBox = () => {
+    if (isCopyPastedPhrase) {
+      dispatch(setIsCopyPastedPhrase(false))
+    }
   }
 
   return (

src/redux/ValidatorOnboarding/KeyGeneration/slice.ts

@@ -2,6 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
 type KeyGenerationState = {
   words: string[]
+  isCopyPastedPhrase: boolean
 }
 
 type wordProps = {
@@ -11,6 +12,7 @@ type wordProps = {
 
 const initialState: KeyGenerationState = {
   words: Array(24).fill(''),
+  isCopyPastedPhrase: false,
 }
 
 const keyGenerationSlice = createSlice({
@@ -25,9 +27,16 @@ const keyGenerationSlice = createSlice({
     setMnemonic: (state, action: PayloadAction<string[]>) => {
       state.words = action.payload
     },
+    setIsCopyPastedPhrase: (state, action: PayloadAction<boolean>) => {
+      state.isCopyPastedPhrase = action.payload
+    },
   },
 })
 
-export const { setWord, setMnemonic } = keyGenerationSlice.actions
+export const {
+  setWord,
+  setMnemonic,
+  setIsCopyPastedPhrase,
+} = keyGenerationSlice.actions
 
 export default keyGenerationSlice.reducer