diff --git a/src/app/templates/SeedPhraseInput/SeedLengthSelect.tsx b/src/app/templates/SeedPhraseInput/SeedLengthSelect.tsx index 5d5a05de3..e2ee18b94 100644 --- a/src/app/templates/SeedPhraseInput/SeedLengthSelect.tsx +++ b/src/app/templates/SeedPhraseInput/SeedLengthSelect.tsx @@ -79,6 +79,7 @@ export const SeedLengthSelect: FC = ({ options, currentOp value={option} checked={selectedOption === option} onChange={e => setSelectedOption(e.target.value)} + className="input" /> {option} diff --git a/src/app/templates/SeedPhraseInput/SeedWordInput.tsx b/src/app/templates/SeedPhraseInput/SeedWordInput.tsx index 1a68343f9..6b457e98e 100644 --- a/src/app/templates/SeedPhraseInput/SeedWordInput.tsx +++ b/src/app/templates/SeedPhraseInput/SeedWordInput.tsx @@ -70,6 +70,16 @@ export const SeedWordInput: FC = ({ [value] ); + const handleClick = (e: React.MouseEvent, variant: string) => { + e.preventDefault(); + if (inputRef && inputRef.current) { + onSeedWordChange(id, variant); + setWordSpellingError(''); + inputRef.current.value = variant; + } + setOnBlur(true); + }; + return (
+ ))} + ) )} diff --git a/src/app/templates/SeedPhraseInput/index.tsx b/src/app/templates/SeedPhraseInput/index.tsx index 42b5c3794..22427aa90 100644 --- a/src/app/templates/SeedPhraseInput/index.tsx +++ b/src/app/templates/SeedPhraseInput/index.tsx @@ -28,6 +28,8 @@ interface SeedPhraseInputProps extends TestIDProperty { const defaultNumberOfWords = 12; +const checkWordExist = (word: string) => word !== ''; + export const SeedPhraseInput: FC = ({ isFirstAccount, submitted, @@ -54,9 +56,9 @@ export const SeedPhraseInput: FC = ({ let newSeedError = ''; const joinedDraftSeed = newDraftSeed.join(' '); - if (newDraftSeed.some(word => word !== '')) { + if (newDraftSeed.some(word => checkWordExist(word))) { if (newDraftSeed.some(word => word === '')) { - const availableWords = newDraftSeed.filter(word => word !== ''); + const availableWords = newDraftSeed.filter(word => checkWordExist(word)); if (!availableWords.some(word => bip39WordList.includes(word))) { newSeedError = t('mnemonicWordsAmountConstraint', [numberOfWords]) as string; } else { diff --git a/src/app/templates/SeedPhraseInput/seedLength.css b/src/app/templates/SeedPhraseInput/seedLength.css index 16a410502..68fc8e611 100644 --- a/src/app/templates/SeedPhraseInput/seedLength.css +++ b/src/app/templates/SeedPhraseInput/seedLength.css @@ -1,4 +1,4 @@ -input[type=radio] { +.input { -webkit-appearance: none; appearance: none; border: 1px solid #ED8936; @@ -11,7 +11,7 @@ input[type=radio] { } -input[type=radio]::before { +.input::before { content: ''; position: absolute; margin: auto; @@ -22,18 +22,18 @@ input[type=radio]::before { top: 0; } - input[type=radio]:focus { + .input:focus { outline: 2px solid; outline-offset: 2px; } -input[type=radio]::before { + .input::before { height: 0; width: 0; } -input[type=radio]:checked::before { +.input:checked::before { border: 5px solid #ED8936; border-radius: 100%; background: #ED8936;