[DripTide CI check] #555 Add an i18n framework and a first locale

packages/client/lib/i18n.ts

@@ -0,0 +1,70 @@
+/**
+ * Lightweight i18n framework for Traqora client.
+ */
+
+import { useState, useEffect } from 'react';
+
+export const en = {
+  'wallet.status': 'Wallet Status',
+  'wallet.disconnected': 'Not Connected',
+  'wallet.connected': 'Connected',
+  'wallet.connect': 'Connect Wallet',
+  'wallet.connecting': 'Connecting...',
+  'wallet.linking': 'Linking...',
+  'wallet.description': 'Connect your Stellar wallet to get started.',
+  'wallet.info.title': 'Wallet Information',
+  'wallet.info.description': 'Your connected Stellar wallet details.',
+  'wallet.address': 'Address',
+  'wallet.network': 'Network',
+  'wallet.type': 'Wallet Type',
+  'wallet.copy': 'Copy Address',
+  'wallet.copied': 'Copied!',
+  'wallet.explorer': 'View on Explorer',
+  'wallet.disconnect': 'Disconnect Wallet',
+};
+
+export type TranslationKeys = keyof typeof en;
+
+const dictionaries: Record<string, Record<string, string>> = {
+  en,
+};
+
+let currentLocale = 'en';
+
+export function setLocale(locale: string) {
+  if (dictionaries[locale]) {
+    currentLocale = locale;
+  }
+}
+
+export function getLocale(): string {
+  return currentLocale;
+}
+
+export function t(key: TranslationKeys, params?: Record<string, string | number>): string {
+  const dict = dictionaries[currentLocale] || dictionaries.en;
+  let text = dict[key] || dictionaries.en[key] || key;
+  if (params) {
+    for (const [pKey, pVal] of Object.entries(params)) {
+      text = text.replace(new RegExp(`\\{${pKey}\\}`, 'g'), String(pVal));
+    }
+  }
+  return text;
+}
+
+export function useTranslation() {
+  const [locale, setLocState] = useState(currentLocale);
+
+  useEffect(() => {
+    setLocState(currentLocale);
+  }, []);
+
+  return {
+    t,
+    locale,
+    setLocale: (l: string) => {
+      setLocale(l);
+      setLocState(l);
+    },
+  };
+}

packages/client/lib/stellar-wallet-connect/components/WalletInfo.tsx

@@ -15,6 +15,7 @@
 import { useEffect, useState } from 'react';
 import { CheckCircle, Copy, ExternalLink, Wallet, XCircle } from 'lucide-react';
 import useWalletStore from '../store';
+import { t } from '../../i18n';
 import { useWallet } from '../use-wallet';
 import type { WalletInfoProps, StellarNetwork } from '../types';
 
@@ -95,15 +96,15 @@ export function WalletInfo({
       >
         <div className="swc-card__header">
           <Wallet className="swc-icon swc-icon--accent" aria-hidden="true" />
-          <h3 className="swc-card__title">Wallet Status</h3>
+          <h3 className="swc-card__title">{t('wallet.status')}</h3>
         </div>
         <p className="swc-card__description">
-          Connect your Stellar wallet to get started.
+          {t('wallet.description')}
         </p>
         <div className="swc-card__body">
           <div className="swc-status swc-status--disconnected">
             <XCircle className="swc-status__icon" aria-hidden="true" />
-            <span className="swc-status__label">Not Connected</span>
+            <span className="swc-status__label">{t('wallet.disconnected')}</span>
           </div>
           <button
             type="button"
@@ -112,10 +113,10 @@ export function WalletInfo({
             disabled={isConnecting || isLinking}
           >
             {isConnecting
-              ? 'Connecting...'
+              ? t('wallet.connecting')
               : isLinking
-                ? 'Linking...'
-                : 'Connect Wallet'}
+                ? t('wallet.linking')
+                : t('wallet.connect')}
           </button>
         </div>
       </div>
@@ -131,10 +132,10 @@ export function WalletInfo({
     >
       <div className="swc-card__header">
         <Wallet className="swc-icon swc-icon--accent" aria-hidden="true" />
-        <h3 className="swc-card__title">Wallet Information</h3>
+        <h3 className="swc-card__title">{t('wallet.info.title')}</h3>
       </div>
       <p className="swc-card__description">
-        Your connected Stellar wallet details.
+        {t('wallet.info.description')}
       </p>
 
       <div className="swc-card__body">

packages/client/tests/unit/i18n.test.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from '@jest/globals';
+import { t, setLocale, getLocale, en } from '../../lib/i18n';
+
+describe('i18n framework', () => {
+  it('returns correct translation for key', () => {
+    setLocale('en');
+    expect(getLocale()).toBe('en');
+    expect(t('wallet.connect')).toBe(en['wallet.connect']);
+  });
+
+  it('falls back to key if missing', () => {
+    // @ts-expect-error testing invalid key
+    expect(t('non.existent.key')).toBe('non.existent.key');
+  });
+});