From a78df40937adb6c381d4ba518c71e9426ef6a930 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 5 Sep 2023 14:39:35 +0300 Subject: [PATCH 1/2] feat: add boolean for copy pasted phrase --- src/redux/ValidatorOnboarding/KeyGeneration/slice.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/redux/ValidatorOnboarding/KeyGeneration/slice.ts b/src/redux/ValidatorOnboarding/KeyGeneration/slice.ts index 60ae15c5..3556df45 100644 --- a/src/redux/ValidatorOnboarding/KeyGeneration/slice.ts +++ b/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) => { state.words = action.payload }, + setIsCopyPastedPhrase: (state, action: PayloadAction) => { + state.isCopyPastedPhrase = action.payload + }, }, }) -export const { setWord, setMnemonic } = keyGenerationSlice.actions +export const { + setWord, + setMnemonic, + setIsCopyPastedPhrase, +} = keyGenerationSlice.actions export default keyGenerationSlice.reducer From 3259cf7d909bef869246b6aad428feefef3ae6f6 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 5 Sep 2023 14:47:10 +0300 Subject: [PATCH 2/2] feat: show copy pasted info box only after paste --- .../ValidatorOnboarding/ContinueButton.tsx | 29 ++++++-- .../AutocompleteInput.tsx | 68 ++++++++++--------- .../ValidatorOnboarding.tsx | 15 ++++ 3 files changed, 75 insertions(+), 37 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 5ac92f8d..592e3a2b 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/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 ( - } - /> + {isCopyPastedPhrase && ( + } + /> + )} - + diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.tsx index 285543c1..39b61f1c 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.tsx +++ b/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', + } + } +} diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 5a448318..48bb2dda 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/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 (