Skip to content

feat: add multi-language (i18n) support to UI (#198)#209

Open
spartan124 wants to merge 2 commits into
SoroStream:mainfrom
spartan124:feat/multi_lang-support-ui
Open

feat: add multi-language (i18n) support to UI (#198)#209
spartan124 wants to merge 2 commits into
SoroStream:mainfrom
spartan124:feat/multi_lang-support-ui

Conversation

@spartan124

Copy link
Copy Markdown

PR Description

## Description
This PR implements multi-language (i18n) support across the UI (resolving #198). It introduces a

lightweight, type-safe, locale-aware translation system with fallback support, dynamic client-side
language switching, and automated translation key verification during the lint phase.

## Changes

### 1. Localization Storage & Setup
- Created translation dictionaries under  for `en`, `pt`, and `es`.
- Upgraded the i18n.ts hook to dynamically read from the active language, with variable

interpolation and English fallback.

### 2. User Settings & RTL Layout
- Added a Language selector dropdown to the page.tsx that persists user preference in

localStorage.
- Enabled automatic dir and lang synchronization on document.documentElement inside
SettingsContext.tsx to support RTL layouts (e.g., Arabic/Hebrew) when registering new locales.

### 3. Locale-Aware Formatting
- Integrated locale-aware dates, decimals, and currencies into components such as LiveCounter.tsx (for

ticking balances), NavHeader.tsx (for XLM balances), StreamTimeline.tsx, and StreamHistory.tsx.

### 4. CI Validation & Contribution Documentation
- Created a validation script check-i18n.mjs that fails the lint step if translations are out of sync

with en.json.
- Added translation guidelines to CONTRIBUTING.md to help community members submit translations.

### 5. Code Quality & Prerendering Fixes
- Wrapped the page.tsx in `Suspense` to fix the Next.js CSR search-params prerendering bailout.
- Fixed pre-existing rules of hooks / hoisting errors in WalletContext.tsx and page.tsx.

## Verification Results

### Tests
All **14 test files and 88 unit tests** execute and pass successfully:
```bash
Test Files  14 passed (14)
     Tests  88 passed (88)

Build & Lints

Next.js production compiles successfully and the translation check script completes cleanly:

next lint && node scripts/check-i18n.mjs
All translations are in sync!

    - Extract hardcoded strings into JSON locale files under src/locales/
    - Add initial translations for English (en), Portuguese (pt), and Spanish (es)
    - Add Language select element in user Settings to switch and persist choice in localStorage
    - Support locale-aware date, number, and currency formatting across UI components
    - Automatically adjust HTML dir (RTL/LTR) and lang attributes on document.documentElement
    - Implement scripts/check-i18n.mjs validation check inside 'npm run lint'
    - Document the localization workflow inside CONTRIBUTING.md
    - Fix pre-existing Next.js build prerendering bailout on dashboard by wrapping in Suspense
    - Fix pre-existing hoisting and conditional hook issues in WalletContext.tsx and stream detail pages
@vercel

vercel Bot commented Jul 3, 2026

Copy link
Copy Markdown

@spartan124 is attempting to deploy a commit to the Chuks7 Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Jul 3, 2026

Copy link
Copy Markdown

@spartan124 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@spartan124 spartan124 marked this pull request as ready for review July 3, 2026 10:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant