Move alias validation to onChange callback for better feedback

anoma · Aug 2, 2023 · 46fb699 · 46fb699
1 parent 70c159a
commit 46fb699
Showing 1 changed file with 20 additions and 10 deletions.
diff --git a/apps/extension/src/App/Accounts/AddAccount.tsx b/apps/extension/src/App/Accounts/AddAccount.tsx
@@ -182,6 +182,19 @@ const AddAccount: React.FC<Props> = ({
     }
   }, []);
 
+  const validateAlias = (accounts: DerivedAccount[], alias: string): void => {
+    const _validateAliasInUse = validateAliasInUse.bind(null, accounts, alias);
+    const _validateAliasIsRequired = validateAliasIsRequired.bind(null, alias);
+
+    if (!_validateAliasIsRequired()) {
+      setValidation(Validation.AliasRequired);
+    } else if (!_validateAliasInUse()) {
+      setValidation(Validation.AliasInUse);
+    } else {
+      setValidation(Validation.Valid);
+    }
+  };
+
   useEffect(() => {
     const _validatePath = validatePath.bind(
       null,
@@ -190,19 +203,12 @@ const AddAccount: React.FC<Props> = ({
       accounts,
       parentAccountType
     );
-    const _validateAliasInUse = validateAliasInUse.bind(null, accounts, alias);
-    const _validateAliasIsRequired = validateAliasIsRequired.bind(null, alias);
-
-    if (!_validateAliasIsRequired()) {
-      setValidation(Validation.AliasRequired);
-    } else if (!_validateAliasInUse()) {
-      setValidation(Validation.AliasInUse);
-    } else if (!_validatePath()) {
+    if (!_validatePath()) {
       setValidation(Validation.PathInUse);
     } else {
       setValidation(Validation.Valid);
     }
-  }, [parentAccountIndex, change, index, alias, isTransparent]);
+  }, [parentAccountIndex, change, index, isTransparent]);
 
   useEffect(() => {
     setIndex(
@@ -305,7 +311,11 @@ const AddAccount: React.FC<Props> = ({
                 label="Alias"
                 autoFocus={true}
                 value={alias}
-                onChangeCallback={(e) => setAlias(e.target.value)}
+                onChangeCallback={(e) => {
+                  const { value } = e.target;
+                  setAlias(value);
+                  validateAlias(accounts, value);
+                }}
               />
             </InputContainer>
             <InputContainer>