Internationalize more strings (#2440)

Co-authored-by: Ansh <anshnanda10@gmail.com>

src/view/com/auth/create/Step1.tsx

@@ -77,7 +77,7 @@ export function Step1({
             value={uiState.serviceUrl}
             editable
             onChange={onChangeServiceUrl}
-            accessibilityHint="Input hosting provider address"
+            accessibilityHint={_(msg`Input hosting provider address`)}
             accessibilityLabel={_(msg`Hosting provider address`)}
             accessibilityLabelledBy="addressProvider"
           />
@@ -125,6 +125,7 @@ function Option({
 }>) {
   const theme = useTheme()
   const pal = usePalette('default')
+  const {_} = useLingui()
   const circleFillStyle = React.useMemo(
     () => ({
       backgroundColor: theme.palette.primary.background,
@@ -139,7 +140,7 @@ function Option({
         testID={testID}
         accessibilityRole="button"
         accessibilityLabel={label}
-        accessibilityHint={`Sets hosting provider to ${label}`}>
+        accessibilityHint={_(msg`Sets hosting provider to ${label}`)}>
         <View style={styles.optionHeading}>
           <View style={[styles.circle, pal.border]}>
             {isSelected ? (

src/view/com/auth/create/Step2.tsx

@@ -60,7 +60,7 @@ export function Step2({
       {uiState.isInviteCodeRequired && (
         <View style={s.pb20}>
           <Text type="md-medium" style={[pal.text, s.mb2]}>
-            Invite code
+            <Trans>Invite code</Trans>
           </Text>
           <TextInput
             testID="inviteCodeInput"
@@ -70,7 +70,7 @@ export function Step2({
             editable
             onChange={value => uiDispatch({type: 'set-invite-code', value})}
             accessibilityLabel={_(msg`Invite code`)}
-            accessibilityHint="Input invite code to proceed"
+            accessibilityHint={_(msg`Input invite code to proceed`)}
             autoCapitalize="none"
             autoComplete="off"
             autoCorrect={false}
@@ -80,7 +80,7 @@ export function Step2({
 
       {!uiState.inviteCode && uiState.isInviteCodeRequired ? (
         <Text style={[s.alignBaseline, pal.text]}>
-          Don't have an invite code?{' '}
+          <Trans>Don't have an invite code?</Trans>{' '}
           <TouchableWithoutFeedback
             onPress={onPressWaitlist}
             accessibilityLabel={_(msg`Join the waitlist.`)}
@@ -106,7 +106,7 @@ export function Step2({
               editable
               onChange={value => uiDispatch({type: 'set-email', value})}
               accessibilityLabel={_(msg`Email`)}
-              accessibilityHint="Input email for Bluesky waitlist"
+              accessibilityHint={_(msg`Input email for Bluesky waitlist`)}
               accessibilityLabelledBy="email"
               autoCapitalize="none"
               autoComplete="off"
@@ -130,7 +130,7 @@ export function Step2({
               secureTextEntry
               onChange={value => uiDispatch({type: 'set-password', value})}
               accessibilityLabel={_(msg`Password`)}
-              accessibilityHint="Set password"
+              accessibilityHint={_(msg`Set password`)}
               accessibilityLabelledBy="password"
               autoCapitalize="none"
               autoComplete="off"
@@ -154,7 +154,7 @@ export function Step2({
               buttonStyle={[pal.border, styles.dateInputButton]}
               buttonLabelType="lg"
               accessibilityLabel={_(msg`Birthday`)}
-              accessibilityHint="Enter your birth date"
+              accessibilityHint={_(msg`Enter your birth date`)}
               accessibilityLabelledBy="birthDate"
             />
           </View>

src/view/com/auth/create/Step3.tsx

@@ -36,7 +36,7 @@ export function Step3({
           onChange={value => uiDispatch({type: 'set-handle', value})}
           // TODO: Add explicit text label
           accessibilityLabel={_(msg`User handle`)}
-          accessibilityHint="Input your user handle"
+          accessibilityHint={_(msg`Input your user handle`)}
         />
         <Text type="lg" style={[pal.text, s.pl5, s.pt10]}>
           <Trans>Your full handle will be</Trans>{' '}

src/view/com/auth/create/StepHeader.tsx

@@ -2,13 +2,18 @@ import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {Text} from 'view/com/util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
+import {Trans} from '@lingui/macro'
 
 export function StepHeader({step, title}: {step: string; title: string}) {
   const pal = usePalette('default')
   return (
     <View style={styles.container}>
       <Text type="lg" style={[pal.textLight]}>
-        {step === '3' ? 'Last step!' : <>Step {step} of 3</>}
+        {step === '3' ? (
+          <Trans>Last step!</Trans>
+        ) : (
+          <Trans>Step {step} of 3</Trans>
+        )}
       </Text>
       <Text style={[pal.text]} type="title-xl">
         {title}