diff --git a/src/lib/strings/handles.ts b/src/lib/strings/handles.ts
index 754d219ed2..855971ee6f 100644
--- a/src/lib/strings/handles.ts
+++ b/src/lib/strings/handles.ts
@@ -5,6 +5,8 @@ import {forceLTR} from '#/lib/strings/bidi'
const VALIDATE_REGEX =
/^([a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?$/
+export const MAX_SERVICE_HANDLE_LENGTH = 18
+
export function makeValidHandle(str: string): string {
if (str.length > 20) {
str = str.slice(0, 20)
@@ -19,10 +21,6 @@ export function createFullHandle(name: string, domain: string): string {
return `${name}.${domain}`
}
-export function maxServiceHandleLength(domain: string): number {
- return 30 - `.${(domain || '').replace(/^[.]+/, '')}`.length
-}
-
export function isInvalidHandle(handle: string): boolean {
return handle === 'handle.invalid'
}
@@ -52,7 +50,7 @@ export function validateServiceHandle(
handleChars:
!str || (VALIDATE_REGEX.test(fullHandle) && !str.includes('.')),
hyphenStartOrEnd: !str.startsWith('-') && !str.endsWith('-'),
- frontLength: str.length >= 3 && str.length <= 18,
+ frontLength: str.length >= 3 && str.length <= MAX_SERVICE_HANDLE_LENGTH,
totalLength: fullHandle.length <= 253,
}
diff --git a/src/screens/Signup/StepHandle.tsx b/src/screens/Signup/StepHandle.tsx
index c06fa29d16..a583fb9c8e 100644
--- a/src/screens/Signup/StepHandle.tsx
+++ b/src/screens/Signup/StepHandle.tsx
@@ -6,7 +6,7 @@ import {useLingui} from '@lingui/react'
import {logEvent} from '#/lib/statsig/statsig'
import {
createFullHandle,
- maxServiceHandleLength,
+ MAX_SERVICE_HANDLE_LENGTH,
validateServiceHandle,
} from '#/lib/strings/handles'
import {useAgent} from '#/state/session'
@@ -168,11 +168,11 @@ export function StepHandle() {
- {!validCheck.totalLength ? (
+ {!validCheck.totalLength ||
+ draftValue.length > MAX_SERVICE_HANDLE_LENGTH ? (
- No longer than {maxServiceHandleLength(state.userDomain)}{' '}
- characters
+ No longer than {MAX_SERVICE_HANDLE_LENGTH} characters
) : (