diff --git a/src/screens/Signup/StepHandle.tsx b/src/screens/Signup/StepHandle.tsx index 1f26f35237..dbcd39623f 100644 --- a/src/screens/Signup/StepHandle.tsx +++ b/src/screens/Signup/StepHandle.tsx @@ -5,10 +5,11 @@ import {useLingui} from '@lingui/react' import {logEvent} from '#/lib/statsig/statsig' import {createFullHandle, 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' @@ -25,6 +26,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() @@ -118,6 +122,7 @@ export function StepHandle() { setDraftValue(val) }} label={_(msg`Input your user handle`)} + placeholder={_(msg`e.g. alice`)} defaultValue={draftValue} autoCapitalize="none" autoCorrect={false} @@ -126,61 +131,70 @@ export function StepHandle() { /> - {draftValue !== '' && ( - - Your full handle 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 253 characters - + {draftValue === '' ? ( + isFirstTimeUser && ( + + + This is the unique name for your account. Pick something + memorable! + + + ) + ) : ( + <> + + Your full handle 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 253 characters + + ) : ( + + At least 3 characters + + )} + - + )}