diff --git a/src/screens/Signup/StepHandle.tsx b/src/screens/Signup/StepHandle.tsx index 6981554f83..dec70e8148 100644 --- a/src/screens/Signup/StepHandle.tsx +++ b/src/screens/Signup/StepHandle.tsx @@ -9,10 +9,11 @@ import { maxServiceHandleLength, validateHandle, } from '#/lib/strings/handles' -import {useAgent} from '#/state/session' +import {useAgent, useSession} from '#/state/session' import {ScreenTransition} from '#/screens/Login/ScreenTransition' import {useSignupContext} from '#/screens/Signup/state' import {atoms as a, useTheme} from '#/alf' +import {Admonition} from '#/components/Admonition' import * as TextField from '#/components/forms/TextField' import {useThrottledValue} from '#/components/hooks/useThrottledValue' import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' @@ -29,6 +30,9 @@ export function StepHandle() { const handleValueRef = useRef(state.handle) const [draftValue, setDraftValue] = React.useState(state.handle) const isLoading = useThrottledValue(state.isLoading, 500) + const {accounts} = useSession() + + const isFirstTimeUser = accounts.length === 0 const onNextPress = React.useCallback(async () => { const handle = handleValueRef.current.trim() @@ -130,64 +134,73 @@ export function StepHandle() { /> - {draftValue !== '' && ( - - Your full username will be{' '} - - @{createFullHandle(draftValue, state.userDomain)} - - - )} - {draftValue !== '' && ( - - {state.error ? ( - - - {state.error} - - ) : undefined} - {validCheck.hyphenStartOrEnd ? ( - - - - Only contains letters, numbers, and hyphens - - - ) : ( - - - - Doesn't begin or end with a hyphen - - - )} - - - {!validCheck.totalLength ? ( - - - No longer than {maxServiceHandleLength(state.userDomain)}{' '} - characters - - + {draftValue === '' ? ( + isFirstTimeUser && ( + + + This is the unique name for your account. Pick something + memorable! + + + ) + ) : ( + <> + + Your full username will be{' '} + + @{createFullHandle(draftValue, state.userDomain)} + + + + {state.error ? ( + + + {state.error} + + ) : undefined} + {validCheck.hyphenStartOrEnd ? ( + + + + Only contains letters, numbers, and hyphens + + ) : ( - - At least 3 characters - + + + + Doesn't begin or end with a hyphen + + )} + + + {!validCheck.totalLength ? ( + + + No longer than {maxServiceHandleLength(state.userDomain)}{' '} + characters + + + ) : ( + + At least 3 characters + + )} + - + )}