refactoring after test failed

madfish-solutions · Oct 1, 2023 · c00e285 · c00e285
1 parent 8a84658
commit c00e285
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 23 deletions.
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -596,7 +596,7 @@
     }
   },
   "justValidPreGeneratedMnemonic": {
-    "message": "Just valid pre-generated mnemonic"
+    "message": "Invalid Seed Phrase"
   },
   "seedPasteFailedTooManyWords": {
     "message": "Paste failed because it contained over 24 words."

diff --git a/public/_locales/en_GB/messages.json b/public/_locales/en_GB/messages.json
@@ -480,7 +480,7 @@
     "message": "Each word separated with a single space"
   },
   "justValidPreGeneratedMnemonic": {
-    "message": "Just valid pre-generated mnemonic"
+    "message": "Invalid Seed Phrase"
   },
   "oops": {
     "message": "Oops!"

diff --git a/src/app/pages/NewWallet/import/ImportSeedPhrase/ImportFromSeedPhrase.tsx b/src/app/pages/NewWallet/import/ImportSeedPhrase/ImportFromSeedPhrase.tsx
@@ -46,7 +46,7 @@ export const ImportFromSeedPhrase: FC<ImportFromSeedPhraseProps> = ({
         setNumberOfWords={setNumberOfWords}
       />
 
-      <FormSubmitButton className="w-96 my-10 mx-auto" testID={ImportFromSeedPhraseSelectors.nextButton}>
+      <FormSubmitButton className="w-96 mb-2 mx-auto" testID={ImportFromSeedPhraseSelectors.nextButton}>
         <T id="next" />
       </FormSubmitButton>
     </form>

diff --git a/src/app/templates/SeedPhraseInput/SeedWordInput.tsx b/src/app/templates/SeedPhraseInput/SeedWordInput.tsx
@@ -19,6 +19,8 @@ export interface SeedWordInputProps extends TestIDProperty {
   onSeedWordChange: (index: number, value: string) => void;
 }
 
+const BUTTON_TAG_NAME = 'BUTTON';
+
 export const SeedWordInput: FC<SeedWordInputProps> = ({
   id,
   submitted,
@@ -48,7 +50,7 @@ export const SeedWordInput: FC<SeedWordInputProps> = ({
   );
 
   useEffect(() => {
-    if (value && !bip39WordList.includes(value) && isBlur) {
+    if (value && !bip39WordList.includes(value)) {
       setWordSpellingError(t('mnemonicWordsError'));
       errorCheckRef.current = true;
     } else {
@@ -66,7 +68,7 @@ export const SeedWordInput: FC<SeedWordInputProps> = ({
   }, [showAutocomplete, value, isBlur]);
 
   const autocompleteVariants = useMemo(
-    () => (value ? bip39WordList.filter(word => word.startsWith(value)) : null),
+    () => (value ? bip39WordList.filter(word => word.startsWith(value)).slice(0, 3) : null),
     [value]
   );
 
@@ -81,14 +83,14 @@ export const SeedWordInput: FC<SeedWordInputProps> = ({
   };
 
   const handleBlur = (e: React.FocusEvent) => {
-    if (e.relatedTarget === null) {
+    if (e.relatedTarget?.tagName !== BUTTON_TAG_NAME) {
       setIsBlur(true);
     }
   };
 
   return (
     <div className="flex flex-col relative">
-      <label htmlFor={id.toString()} className={clsx('self-center', isError ? 'text-red-600' : 'text-gray-600')}>
+      <label htmlFor={id.toString()} className={clsx('self-center', isError ? 'text-red-600' : 'text-gray-500')}>
         <p style={{ fontSize: 14 }}>{`#${id + 1}`}</p>
       </label>
 
@@ -111,20 +113,18 @@ export const SeedWordInput: FC<SeedWordInputProps> = ({
         style={{ backgroundColor: 'white' }}
       />
       {showAutocomplete && autocompleteVariants && autocompleteVariants.length > 0 && (
-        <div
-          className={clsx(
-            FORM_FIELD_CLASS_NAME,
-            'absolute left-0 z-50 px-2 items-center top-18 shadow-lg flex flex-col'
-          )}
-        >
+        <div className={clsx(FORM_FIELD_CLASS_NAME, 'absolute left-0 z-50 px-2 top-18 shadow-lg flex flex-col')}>
           {autocompleteVariants.map(variant => (
             <div className="hover:bg-gray-200 w-full rounded focus:bg-gray-200" key={variant}>
-              <button className="my-2 px-3 py-2 w-full" onClick={e => handleClick(e, variant)} onBlur={handleBlur}>
+              <button
+                className="my-2 px-3 py-2 w-full text-left  text-gray-600 hover:text-gray-910 focus:text-gray-910 focus:bg-gray-200"
+                onClick={e => handleClick(e, variant)}
+                onBlur={handleBlur}
+              >
                 {variant}
               </button>
             </div>
           ))}
-          )
         </div>
       )}
     </div>

diff --git a/src/app/templates/SeedPhraseInput/index.tsx b/src/app/templates/SeedPhraseInput/index.tsx
@@ -146,7 +146,7 @@ export const SeedPhraseInput: FC<SeedPhraseInputProps> = ({
       <div className="flex justify-between mb-6">
         <h1
           className={classNames(
-            'font-inter flex self-center text-gray-800',
+            'font-inter flex self-center text-gray-910',
             isFirstAccount ? 'text-2xl' : 'text-base font-semibold text-gray-500'
           )}
         >
@@ -209,15 +209,17 @@ export const SeedPhraseInput: FC<SeedPhraseInputProps> = ({
         })}
       </div>
 
-      {wordSpellingError && <div className="text-xs text-red-700 mt-4">{wordSpellingError}</div>}
+      <div className="h-20">
+        {wordSpellingError && <div className="text-xs text-red-700 pt-4 h-10">{wordSpellingError}</div>}
 
-      {submitted && seedError && <div className="text-xs text-red-700 mt-4">{seedError}</div>}
+        {submitted && seedError && <div className="text-xs text-red-700 py-2 h-10">{seedError}</div>}
 
-      {pasteFailed ? (
-        <div className="text-xs text-red-700 mt-4">
-          <T id="seedPasteFailedTooManyWords" />
-        </div>
-      ) : null}
+        {pasteFailed ? (
+          <div className="text-xs text-red-700 mt-4">
+            <T id="seedPasteFailedTooManyWords" />
+          </div>
+        ) : null}
+      </div>
     </div>
   );
 };