test

src/screens/Signup/StepHandle.tsx

@@ -13,11 +13,13 @@ import {useAgent} 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'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times'
+import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 import {BackNextButtons} from './BackNextButtons'
 
@@ -183,6 +185,24 @@ export function StepHandle() {
             </View>
           </View>
         )}
+        <View>
+          <Admonition type="tip">
+            <Trans>
+              You can use a domain name as your username on Bluesky, for example
+              <Text style={[a.font_bold]}>@mywebsite.com</Text>. Create an
+              account with a <Text style={[a.font_bold]}>.bsky.social</Text>
+              username first and then change it to your domain name when you're
+              ready to self-verify your identity.{' '}
+              <InlineLinkText
+                label={_(msg`learn more`)}
+                to="https://bsky.social/about/blog/4-28-2023-domain-handle-tutorial"
+                style={[a.font_bold]}
+                disableMismatchWarning>
+                Learn more here.
+              </InlineLinkText>
+            </Trans>
+          </Admonition>
+        </View>
       </View>
       <BackNextButtons
         isLoading={isLoading}