getAlby · im-adithya · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 31, 2024
diff --git a/frontend/package.json b/frontend/package.json
@@ -46,11 +46,14 @@
     "dayjs": "^1.11.10",
     "embla-carousel-react": "^8.0.2",
     "gradient-avatar": "^1.0.2",
+    "i18next": "^23.12.2",
+    "i18next-browser-languagedetector": "^8.0.0",
     "lucide-react": "^0.363.0",
     "posthog-js": "^1.116.6",
     "react": "^18.2.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.2.0",
+    "react-i18next": "^15.0.0",
     "react-lottie": "^1.2.4",
     "react-qr-code": "^2.0.12",
     "react-router-dom": "^6.21.0",

diff --git a/frontend/src/components/LocaleSwitcher.tsx b/frontend/src/components/LocaleSwitcher.tsx
@@ -0,0 +1,45 @@
+import type { FallbackLng } from "i18next";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "src/components/ui/select";
+import { toast } from "src/components/ui/use-toast";
+import i18n, { supportedLocales } from "src/i18n/i18nConfig";
+
+export default function LocaleSwitcher() {
+  const { t } = useTranslation("components", {
+    keyPrefix: "locale_switcher",
+  });
+  const fallbackLng = i18n.options.fallbackLng?.[0 as keyof FallbackLng];
+  const [dropdownLang, setDropdownLang] = useState(
+    i18n.language || fallbackLng
+  );
+
+  const onLanguageChange = async (newLanguage: string) => {
+    if (dropdownLang !== newLanguage) {
+      setDropdownLang(newLanguage);
+      i18n.changeLanguage(newLanguage);
+      toast({ title: t("success") });
+    }
+  };
+
+  return (
+    <Select value={dropdownLang} onValueChange={onLanguageChange}>
+      <SelectTrigger className="w-[150px]">
+        <SelectValue placeholder="Language" />
+      </SelectTrigger>
+      <SelectContent>
+        {supportedLocales.map((locale) => (
+          <SelectItem key={locale.locale} value={locale.locale}>
+            {locale.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/frontend/src/components/layouts/SettingsLayout.tsx b/frontend/src/components/layouts/SettingsLayout.tsx
@@ -98,7 +98,7 @@ export default function SettingsLayout() {
       <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
         <aside className="lg:-mx-4 lg:w-1/5">
           <nav className="flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1">
-            <MenuItem to="/settings">Theme</MenuItem>
+            <MenuItem to="/settings">General</MenuItem>
             <MenuItem to="/settings/change-unlock-password">
               Unlock Password
             </MenuItem>

diff --git a/frontend/src/i18n/i18nConfig.ts b/frontend/src/i18n/i18nConfig.ts
@@ -0,0 +1,45 @@
+// dayjs locales must be imported as well, list: https://github.com/iamkun/dayjs/tree/dev/src/locale
+import "dayjs/locale/hi";
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+// import our translations
+import en from "src/i18n/locales/en/translation.json";
+import hi from "src/i18n/locales/hi/translation.json";
+
+export const defaultNS = "translation";
+// needs to be aligned with `supportedLocales`
+export const resources = {
+  en: {
+    translation: en.translation,
+    components: en.components,
+  },
+  hi: {
+    translation: hi.translation,
+    components: hi.components,
+  },
+} as const;
+
+// needs to be aligned with `resources`
+export const supportedLocales = [
+  { locale: "en", label: "English" },
+  { locale: "hi", label: "हिंदी" },
+];
+
+i18n
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    fallbackLng: "en",
+    ns: ["translation", "components"],
+    defaultNS,
+    resources,
+    supportedLngs: supportedLocales.map(({ locale }) => locale),
+  });
+
+export default i18n;
diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
@@ -0,0 +1,24 @@
+{
+  "translation": {
+    "settings": {
+      "language": {
+        "title": "Language",
+        "description": "Choose the language to display in Alby Hub"
+      },
+      "theme": {
+        "title": "Theme",
+        "description": "Alby Hub is your wallet, make it your style",
+        "options": {
+          "dark": "Dark",
+          "light": "Light",
+          "system": "System"
+        }
+      }
+    }
+  },
+  "components": {
+    "locale_switcher": {
+      "success": "Language updated."
+    }
+  }
+}
diff --git a/frontend/src/i18n/locales/hi/translation.json b/frontend/src/i18n/locales/hi/translation.json
@@ -0,0 +1,24 @@
+{
+  "translation": {
+    "settings": {
+      "language": {
+        "title": "भाषा",
+        "description": "एल्बी हब में प्रदर्शित होने वाली भाषा चुनें।"
+      },
+      "theme": {
+        "title": "थीम",
+        "description": "एल्बी हब आपका है, इसे अपनी इच्छानुसार स्टाइल करें।",
+        "options": {
+          "dark": "डार्क",
+          "light": "प्रकाश",
+          "system": "सिस्टम"
+        }
+      }
+    }
+  },
+  "components": {
+    "locale_switcher": {
+      "success": "भाषा अपडेट की गई है"
+    }
+  }
+}
diff --git a/frontend/src/screens/settings/Settings.tsx b/frontend/src/screens/settings/Settings.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next";
+import LocaleSwitcher from "src/components/LocaleSwitcher";
 import SettingsHeader from "src/components/SettingsHeader";
 import { Label } from "src/components/ui/label";
 import {
@@ -16,17 +18,18 @@ import {
 import { toast } from "src/components/ui/use-toast";
 
 function Settings() {
+  const { t } = useTranslation("translation", { keyPrefix: "settings" });
   const { theme, darkMode, setTheme, setDarkMode } = useTheme();
 
   return (
     <>
       <SettingsHeader
-        title="Theme"
-        description="Alby Hub is your wallet, make it your style."
+        title={t("theme.title")}
+        description={t("theme.description")}
       />
-      <form className="w-full flex flex-col gap-3">
+      <form className="w-full flex flex-col gap-3 mb-4">
         <div className="grid gap-1.5">
-          <Label htmlFor="theme">Theme</Label>
+          <Label htmlFor="theme">{t("theme.title")}</Label>
           <Select
             value={theme}
             onValueChange={(value) => {
@@ -59,13 +62,25 @@ function Settings() {
               <SelectValue placeholder="Dark mode" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="system">System</SelectItem>
-              <SelectItem value="light">Light</SelectItem>
-              <SelectItem value="dark">Dark</SelectItem>
+              <SelectItem value="system">
+                {t("theme.options.system")}
+              </SelectItem>
+              <SelectItem value="light">{t("theme.options.light")}</SelectItem>
+              <SelectItem value="dark">{t("theme.options.dark")}</SelectItem>
             </SelectContent>
           </Select>
         </div>
       </form>
+      <SettingsHeader
+        title={t("language.title")}
+        description={t("language.description")}
+      />
+      <form className="w-full flex flex-col gap-3">
+        <div className="grid gap-1.5">
+          <Label htmlFor="language">{t("language.title")}</Label>
+          <LocaleSwitcher />
+        </div>
+      </form>
     </>
   );
 }

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -42,6 +42,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.23.2", "@babel/runtime@^7.24.8":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
+  integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@commitlint/cli@^19.3.0":
   version "19.3.0"
   resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-19.3.0.tgz#44e6da9823a01f0cdcc43054bbefdd2c6c5ddf39"
@@ -2361,6 +2368,13 @@ hsl-triad@^1.0.0:
   resolved "https://registry.yarnpkg.com/hsl-triad/-/hsl-triad-1.0.0.tgz#0d27f397f75e8beb6cf9c361970ffbe104652220"
   integrity sha512-PKnjrMugS6sHC5dVh4VQZYOHEKG2QILjVwbpEtNjEV19RyswuIxrIiGhumVJjya/FjK/p9gX6+zRMXFGTvaQAA==
 
+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
 human-signals@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28"
@@ -2371,6 +2385,20 @@ husky@^9.0.11:
   resolved "https://registry.yarnpkg.com/husky/-/husky-9.0.11.tgz#fc91df4c756050de41b3e478b2158b87c1e79af9"
   integrity sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==
 
+i18next-browser-languagedetector@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz#b6fdd9b43af67c47f2c26c9ba27710a1eaf31e2f"
+  integrity sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
+i18next@^23.12.2:
+  version "23.12.2"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.12.2.tgz#c5b44bb95e4d4a5908a51577fa06c63dc2f650a4"
+  integrity sha512-XIeh5V+bi8SJSWGL3jqbTEBW5oD6rbP5L+E7dVQh1MNTxxYef0x15rhJVcRb7oiuq4jLtgy2SD8eFlf6P2cmqg==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
 ignore@^5.2.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz"
@@ -3108,6 +3136,14 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-i18next@^15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-15.0.0.tgz#4980f8edf85b9df6573d6b12d95aca5b8f0cc8b0"
+  integrity sha512-2O3IgF4zivg57Q6p6i+ChDgJ371IDcEWbuWC6gvoh5NbkDMs0Q+O7RPr4v61+Se32E0V+LmtwePAeqWZW0bi6g==
+  dependencies:
+    "@babel/runtime" "^7.24.8"
+    html-parse-stringify "^3.0.1"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -3641,6 +3677,11 @@ vite@^4.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+[email protected]:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"