diff --git a/src/screens/Signup/StepHandle.tsx b/src/screens/Signup/StepHandle.tsx
index 502529112c..d1f76dd98b 100644
--- a/src/screens/Signup/StepHandle.tsx
+++ b/src/screens/Signup/StepHandle.tsx
@@ -126,11 +126,14 @@ export function StepHandle() {
)
}
+ const isHandleTaken =
+ !isPending &&
+ queryEnabled &&
+ isHandleAvailable &&
+ !isHandleAvailable.available
+
const textFieldInvalid =
- (!isPending &&
- queryEnabled &&
- isHandleAvailable &&
- !isHandleAvailable.available) ||
+ isHandleTaken ||
!validCheck.frontLengthNotTooLong ||
!validCheck.handleChars ||
!validCheck.hyphenStartOrEnd ||
@@ -175,38 +178,35 @@ export function StepHandle() {
{state.error}
)}
- {queryEnabled &&
- isHandleAvailable &&
- !isHandleAvailable.available &&
- validCheck.overall && (
- <>
-
-
-
- {createFullHandle(draftValue, state.userDomain)} is not
- available
-
-
-
- {isHandleAvailable.suggestions &&
- isHandleAvailable.suggestions.length > 0 && (
- {
- setDraftValue(
- suggestion.handle.slice(
- 0,
- state.userDomain.length * -1,
- ),
- )
- logger.metric('signup:handleSuggestionSelected', {
- method: suggestion.method,
- })
- }}
- />
- )}
- >
- )}
+ {isHandleTaken && validCheck.overall && (
+ <>
+
+
+
+ {createFullHandle(draftValue, state.userDomain)} is not
+ available
+
+
+
+ {isHandleAvailable.suggestions &&
+ isHandleAvailable.suggestions.length > 0 && (
+ {
+ setDraftValue(
+ suggestion.handle.slice(
+ 0,
+ state.userDomain.length * -1,
+ ),
+ )
+ logger.metric('signup:handleSuggestionSelected', {
+ method: suggestion.method,
+ })
+ }}
+ />
+ )}
+ >
+ )}
{(!validCheck.handleChars || !validCheck.hyphenStartOrEnd) && (
{!validCheck.hyphenStartOrEnd ? (
@@ -215,7 +215,10 @@ export function StepHandle() {
) : (
- Only contains letters, numbers, and hyphens
+
+ Username must only contain letters (a-z), numbers, and
+ hyphens
+
)}
@@ -240,7 +243,7 @@ export function StepHandle() {