Skip to content

feat(i18n): add i18next with French and Portuguese translations #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
EmeditWeb merged 2 commits into from
Jun 17, 2026
Merged

feat(i18n): add i18next with French and Portuguese translations #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3042095
feat(i18n): add i18next with French and Portuguese translations
OG-wura Jun 17, 2026
16c00f1
Merge branch 'main' into core_implement_multi_language_support
EmeditWeb Jun 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 20 additions & 18 deletions app/(auth)/register.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,11 @@ import { Input } from '../../components/shared/Input';
import { useUserStore } from '../../stores/user.store';
import { useAuthStore } from '../../stores/auth.store';
import { useWalletStore } from '../../stores/wallet.store';
import { useTranslation } from '../../hooks/useTranslation';
import type { LearnerProfile } from '../../types/user.types';

export default function RegisterScreen() {
const { t } = useTranslation();
const router = useRouter();
const role = useUserStore((s) => s.role);
const setProfile = useUserStore((s) => s.setProfile);
Expand Down Expand Up @@ -112,10 +114,10 @@ export default function RegisterScreen() {
{/* Headers */}
<View className="mb-6">
<Text className="text-[32px] font-bold mb-2" style={{ color: colors.textPrimary }}>
Tell us about yourself
{t('auth.register.title')}
</Text>
<Text className="text-[16px]" style={{ color: colors.textSecondary }}>
This helps us match you with the right {isLearner ? 'sponsors' : 'learners'}.
{t('auth.register.subtitleMatch', { role: isLearner ? t('auth.register.sponsors') : t('auth.register.learners') })}
</Text>
</View>

Expand All @@ -131,15 +133,15 @@ export default function RegisterScreen() {
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.7}>
<Text className="text-[14px] font-semibold" style={{ color: colors.primary }}>
Change Photo
{t('auth.register.changePhoto')}
</Text>
</TouchableOpacity>
</View>

{/* Common field */}
<Input
label="Display Name"
placeholder="e.g. AlexLearnsWeb3"
label={t('auth.register.displayName')}
placeholder={t('auth.register.displayNamePlaceholder')}
value={displayName}
onChangeText={setDisplayName}
autoCapitalize="words"
Expand All @@ -149,35 +151,35 @@ export default function RegisterScreen() {
{isLearner ? (
<>
<Input
label="School/Institution"
placeholder="e.g. University of Blockchain"
label={t('auth.register.school')}
placeholder={t('auth.register.schoolPlaceholder')}
value={school}
onChangeText={setSchool}
/>
<Input
label="Program/Course"
placeholder="e.g. Smart Contract Development"
label={t('auth.register.program')}
placeholder={t('auth.register.programPlaceholder')}
value={program}
onChangeText={setProgram}
/>
<Input
label="Income Type (optional)"
placeholder="e.g. Stipend, Freelance, Part-time"
label={t('auth.register.incomeType')}
placeholder={t('auth.register.incomeTypePlaceholder')}
value={incomeType}
onChangeText={setIncomeType}
/>
</>
) : (
<>
<Input
label="Organization"
placeholder="e.g. Stellar Development Foundation"
label={t('auth.register.organization')}
placeholder={t('auth.register.organizationPlaceholder')}
value={organization}
onChangeText={setOrganization}
/>
<Input
label="Investment Focus (optional)"
placeholder="e.g. Education, Dev tools, Africa"
label={t('auth.register.investmentFocus')}
placeholder={t('auth.register.investmentFocusPlaceholder')}
value={investmentFocus}
onChangeText={setInvestmentFocus}
/>
Expand All @@ -187,7 +189,7 @@ export default function RegisterScreen() {
{/* Wallet address display */}
<View className="gap-1 mt-2">
<Text className="text-[14px]" style={{ color: colors.textSecondary }}>
Wallet address
{t('auth.register.walletAddress')}
</Text>
<View
className="h-12 rounded-xl px-4 justify-center"
Expand All @@ -204,7 +206,7 @@ export default function RegisterScreen() {
>
{publicKey
? `${publicKey.slice(0, 8)}...${publicKey.slice(-8)}`
: 'Not connected'}
: t('auth.register.notConnected')}
</Text>
</View>
</View>
Expand All @@ -230,7 +232,7 @@ export default function RegisterScreen() {
disabled={!isValid || isSubmitting}
>
<Text className="text-[14px] font-bold" style={{ color: colors.background }}>
{isSubmitting ? 'Saving...' : 'Continue'}
{isSubmitting ? t('auth.register.saving') : t('auth.register.continue')}
</Text>
</TouchableOpacity>
</View>
Expand Down
18 changes: 10 additions & 8 deletions app/(auth)/role-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useRouter } from 'expo-router';
import { GraduationCap, TrendingUp, ChevronRight, ChevronLeft } from 'lucide-react-native';
import { colors } from '../../constants/colors';
import { useUserStore } from '../../stores/user.store';
import { useTranslation } from '../../hooks/useTranslation';
import type { UserRole } from '../../types/user.types';

interface RolePillProps {
Expand Down Expand Up @@ -99,6 +100,7 @@ function RoleCard({
}

export default function RoleSelectScreen() {
const { t } = useTranslation();
const router = useRouter();
const setRole = useUserStore((s) => s.setRole);

Expand Down Expand Up @@ -128,23 +130,23 @@ export default function RoleSelectScreen() {
className="text-[32px] font-bold"
style={{ color: colors.textPrimary }}
>
How will you use StepFi?
{t('auth.roleSelect.title')}
</Text>
<Text
className="text-[16px]"
style={{ color: colors.textSecondary }}
>
Choose your role. You can switch anytime in settings.
{t('auth.roleSelect.subtitle')}
</Text>
</View>

{/* Role Cards */}
<View className="flex-col gap-3">
<RoleCard
role="learner"
title="I'm a Learner"
subtitle="Finance laptops, courses, and dev tools. Build your reputation with every payment."
pills={['Borrow', 'Repay', 'Build Credit']}
title={t('auth.roleSelect.learnerTitle')}
subtitle={t('auth.roleSelect.learnerSubtitle')}
pills={[t('auth.roleSelect.learnerPill1'), t('auth.roleSelect.learnerPill2'), t('auth.roleSelect.learnerPill3')]}
icon={GraduationCap}
iconColor={colors.brandBlue}
iconBg={colors.brandBlueDim}
Expand All @@ -154,9 +156,9 @@ export default function RoleSelectScreen() {

<RoleCard
role="sponsor"
title="I'm a Sponsor"
subtitle="Fund the learner lending pool. Earn yield while supporting the next generation of developers."
pills={['Deposit', 'Earn Yield', 'Support Learners']}
title={t('auth.roleSelect.sponsorTitle')}
subtitle={t('auth.roleSelect.sponsorSubtitle')}
pills={[t('auth.roleSelect.sponsorPill1'), t('auth.roleSelect.sponsorPill2'), t('auth.roleSelect.sponsorPill3')]}
icon={TrendingUp}
iconColor={colors.brandGreen}
iconBg={colors.brandGreenDim}
Expand Down
Loading