diff --git a/apps/extension/src/App/Accounts/AddAccount.tsx b/apps/extension/src/App/Accounts/AddAccount.tsx index a1356651da..ca5e916445 100644 --- a/apps/extension/src/App/Accounts/AddAccount.tsx +++ b/apps/extension/src/App/Accounts/AddAccount.tsx @@ -182,6 +182,19 @@ const AddAccount: React.FC = ({ } }, []); + 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 = ({ 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 = ({ label="Alias" autoFocus={true} value={alias} - onChangeCallback={(e) => setAlias(e.target.value)} + onChangeCallback={(e) => { + const { value } = e.target; + setAlias(value); + validateAlias(accounts, value); + }} />