refactoring after review

madfish-solutions · Sep 19, 2023 · e678119 · e678119
1 parent ceedec2
commit e678119
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 31 deletions.
diff --git a/src/app/templates/SeedPhraseInput/SeedLengthSelect.tsx b/src/app/templates/SeedPhraseInput/SeedLengthSelect.tsx
@@ -79,6 +79,7 @@ export const SeedLengthSelect: FC<SeedLengthSelectProps> = ({ options, currentOp
                   value={option}
                   checked={selectedOption === option}
                   onChange={e => setSelectedOption(e.target.value)}
+                  className="input"
                 />
                 <span className="text-sm">{option}</span>
               </label>

diff --git a/src/app/templates/SeedPhraseInput/SeedWordInput.tsx b/src/app/templates/SeedPhraseInput/SeedWordInput.tsx
@@ -70,6 +70,16 @@ export const SeedWordInput: FC<SeedWordInputProps> = ({
     [value]
   );
 
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, variant: string) => {
+    e.preventDefault();
+    if (inputRef && inputRef.current) {
+      onSeedWordChange(id, variant);
+      setWordSpellingError('');
+      inputRef.current.value = variant;
+    }
+    setOnBlur(true);
+  };
+
   return (
     <div className="flex flex-col relative">
       <label htmlFor={id.toString()} className={clsx('self-center', isError ? 'text-red-600' : 'text-gray-600')}>
@@ -106,31 +116,22 @@ export const SeedWordInput: FC<SeedWordInputProps> = ({
             'absolute left-0 z-50 px-2 items-center top-18 shadow-lg flex flex-col'
           )}
         >
-          {autocompleteVariants?.map((variant, index) => {
-            return (
-              <div className="hover:bg-gray-200 w-full rounded focus:bg-gray-200" key={index}>
-                <button
-                  className="my-2 px-3 py-2 w-full"
-                  onClick={e => {
-                    e.preventDefault();
-                    if (inputRef && inputRef.current) {
-                      onSeedWordChange(id, variant);
-                      setWordSpellingError('');
-                      inputRef.current.value = variant;
-                    }
+          {autocompleteVariants?.map((variant, index) => (
+            <div className="hover:bg-gray-200 w-full rounded focus:bg-gray-200" key={index}>
+              <button
+                className="my-2 px-3 py-2 w-full"
+                onClick={e => handleClick(e, variant)}
+                onBlur={e => {
+                  if (e.relatedTarget === null) {
                     setOnBlur(true);
-                  }}
-                  onBlur={e => {
-                    if (e.relatedTarget === null) {
-                      setOnBlur(true);
-                    }
-                  }}
-                >
-                  {variant}
-                </button>
-              </div>
-            );
-          })}
+                  }
+                }}
+              >
+                {variant}
+              </button>
+            </div>
+          ))}
+          )
         </div>
       )}
     </div>

diff --git 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<SeedPhraseInputProps> = ({
   isFirstAccount,
   submitted,
@@ -54,9 +56,9 @@ export const SeedPhraseInput: FC<SeedPhraseInputProps> = ({
       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
@@ -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;