fix handle length error message (#7802)

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,
   }
 

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() {
               <IsValidIcon
                 valid={validCheck.frontLength && validCheck.totalLength}
               />
-              {!validCheck.totalLength ? (
+              {!validCheck.totalLength ||
+              draftValue.length > MAX_SERVICE_HANDLE_LENGTH ? (
                 <Text style={[a.text_md, a.flex_1]}>
                   <Trans>
-                    No longer than {maxServiceHandleLength(state.userDomain)}{' '}
+                    No longer than {MAX_SERVICE_HANDLE_LENGTH} characters
-                    characters
                   </Trans>
                 </Text>
               ) : (