{t("item", { count: 1 })}
// "1 item" +{t("item", { count: 5 })}
// "5 items" +``` + +## Language Switching + +```tsx +const { i18n } = useTranslation(); + +// Change language +const switchLanguage = (langCode: string) => { + i18n.changeLanguage(langCode); + localStorage.setItem("openScan_language", langCode); +}; + +// Get current language +const currentLang = i18n.language; // "en" or "es" +``` + +## Adding New Translation Keys + +### Step-by-step Process + +1. **Identify the appropriate namespace** based on component location +2. **Add key to English file** (`src/locales/en/{namespace}.json`) +3. **Add same key to Spanish file** (`src/locales/es/{namespace}.json`) +4. **Use TypeScript autocomplete** to verify the key exists +5. **Test in both languages** by switching in Settings + +### Example + +```bash +# 1. Add to English file +# src/locales/en/address.json +{ + "contractVerified": "Contract Verified", + "newKey": "Your new text here" # ← Add this +} + +# 2. Add to Spanish file +# src/locales/es/address.json +{ + "contractVerified": "Contrato Verificado", + "newKey": "Tu nuevo texto aquí" # ← Add this +} + +# 3. Use in component +const { t } = useTranslation("address"); +{t("newKey")} # TypeScript autocomplete will suggest "newKey" +``` + +## TypeScript Type Safety + +The i18n system provides full TypeScript autocomplete and type checking: + +```tsx +const { t } = useTranslation("settings"); + +// ✅ Valid - TypeScript knows this key exists +t("language.title"); + +// ❌ Invalid - TypeScript error: key doesn't exist +t("nonexistent.key"); // Type error! +``` + +**Important**: If a translation key doesn't autocomplete, it doesn't exist in the type definitions! + +## Common Patterns + +### Aria Labels and Accessibility + +```tsx +// ❌ BAD + + +// ✅ GOOD +const { t } = useTranslation("common"); + +``` + +### Conditional Messages + +```tsx +const { t } = useTranslation("common"); +const status = isConnected + ? t("rpcIndicator.connected") + : t("rpcIndicator.disconnected"); +``` + +### Loading States + +```tsx +// ❌ BAD +{t("appearance.description")}
+ + + ); +}; +``` + +### Bad Example - Hardcoded Strings (Don't do this!) + +```tsx +// ❌ WRONG - Multiple hardcoded strings +- We're sorry, but something unexpected happened. The application encountered an - error. -
+{i18next.t("errors.errorMessage")}
{this.state.error.toString()}
{this.state.errorInfo && (
<>
- {this.state.errorInfo.componentStack}
)}
@@ -109,7 +108,7 @@ export const useErrorHandler = () => {
}, []);
const captureError = React.useCallback((error: Error) => {
- console.error("Error captured:", error);
+ logger.error("Error captured:", error);
setError(error);
}, []);
diff --git a/src/components/common/ExtraDataDisplay.tsx b/src/components/common/ExtraDataDisplay.tsx
index 2316ee0d..6848bf14 100644
--- a/src/components/common/ExtraDataDisplay.tsx
+++ b/src/components/common/ExtraDataDisplay.tsx
@@ -1,5 +1,6 @@
import type React from "react";
import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
interface ExtraDataDisplayProps {
hexData: string;
@@ -7,6 +8,7 @@ interface ExtraDataDisplayProps {
}
const ExtraDataDisplay: React.FC