From c707748be8364e94dcd192de0344d3c5e97d73bc Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Tue, 30 Jul 2024 20:34:32 +0530
Subject: [PATCH 1/5] feat: setup i18n

---
 frontend/package.json                         |  3 ++
 frontend/src/components/LocaleSwitcher.tsx    | 41 ++++++++++++++++
 .../src/components/layouts/SettingsLayout.tsx |  2 +-
 frontend/src/i18n/i18nConfig.ts               | 47 +++++++++++++++++++
 frontend/src/i18n/locales/en/translation.json | 21 +++++++++
 frontend/src/i18n/locales/hi/translation.json | 21 +++++++++
 frontend/src/screens/settings/Settings.tsx    | 27 ++++++++---
 frontend/yarn.lock                            | 41 ++++++++++++++++
 8 files changed, 195 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/LocaleSwitcher.tsx
 create mode 100644 frontend/src/i18n/i18nConfig.ts
 create mode 100644 frontend/src/i18n/locales/en/translation.json
 create mode 100644 frontend/src/i18n/locales/hi/translation.json

diff --git a/frontend/package.json b/frontend/package.json
index 2354ae04..196d5dfb 100644
--- 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
new file mode 100644
index 00000000..6d440afd
--- /dev/null
+++ b/frontend/src/components/LocaleSwitcher.tsx
@@ -0,0 +1,41 @@
+import type { FallbackLng } from "i18next";
+import { useState } from "react";
+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 fallbackLng = i18n.options.fallbackLng?.[0 as keyof FallbackLng];
+  const [dropdownLang, setDropdownLang] = useState(
+    i18n.language || fallbackLng
+  );
+
+  const languageHandler = async (newLanguage: string) => {
+    if (dropdownLang !== newLanguage) {
+      setDropdownLang(newLanguage);
+      i18n.changeLanguage(newLanguage);
+      toast({ title: "Language updated." });
+    }
+  };
+
+  return (
+    <Select value={dropdownLang} onValueChange={languageHandler}>
+      <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
index d5cf2dfe..167f346d 100644
--- 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
new file mode 100644
index 00000000..b344486f
--- /dev/null
+++ b/frontend/src/i18n/i18nConfig.ts
@@ -0,0 +1,47 @@
+// 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,
+    common: en.common,
+    components: en.components,
+  },
+  hi: {
+    translation: hi.translation,
+    common: hi.common,
+    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", "common", "components", "permissions"],
+    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
new file mode 100644
index 00000000..f352f3c5
--- /dev/null
+++ b/frontend/src/i18n/locales/en/translation.json
@@ -0,0 +1,21 @@
+{
+  "translation": {
+    "settings": {
+      "language": {
+        "title": "Language",
+        "description": "Translations are not 100% finished yet."
+      },
+      "theme": {
+        "title": "Theme",
+        "description": "Alby Hub is your wallet, make it your style.",
+        "options": {
+          "dark": "Dark",
+          "light": "Light",
+          "system": "System"
+        }
+      }
+    }
+  },
+  "common": {},
+  "components": {}
+}
diff --git a/frontend/src/i18n/locales/hi/translation.json b/frontend/src/i18n/locales/hi/translation.json
new file mode 100644
index 00000000..51fdb290
--- /dev/null
+++ b/frontend/src/i18n/locales/hi/translation.json
@@ -0,0 +1,21 @@
+{
+  "translation": {
+    "settings": {
+      "language": {
+        "title": "भाषा",
+        "description": "अनुवाद अभी तक 100% पूरा नहीं हुआ है।"
+      },
+      "theme": {
+        "title": "थीम",
+        "description": "एल्बी हब आपका है, इसे अपनी इच्छानुसार स्टाइल करें।",
+        "options": {
+          "dark": "डार्क",
+          "light": "प्रकाश",
+          "system": "सिस्टम"
+        }
+      }
+    }
+  },
+  "common": {},
+  "components": {}
+}
diff --git a/frontend/src/screens/settings/Settings.tsx b/frontend/src/screens/settings/Settings.tsx
index 09ae1096..580e1ab9 100644
--- 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,23 @@ 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">
+        <Label htmlFor="language">{t("language.title")}</Label>
+        <LocaleSwitcher />
+      </form>
     </>
   );
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 14264eb0..fef8a433 100644
--- 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"
 
+void-elements@3.1.0:
+  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"

From 547562961279635e8f9d329b7fd7104318c309d7 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Tue, 30 Jul 2024 20:38:28 +0530
Subject: [PATCH 2/5] chore: move select into div

---
 frontend/src/screens/settings/Settings.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/screens/settings/Settings.tsx b/frontend/src/screens/settings/Settings.tsx
index 580e1ab9..e2bdaff3 100644
--- a/frontend/src/screens/settings/Settings.tsx
+++ b/frontend/src/screens/settings/Settings.tsx
@@ -76,8 +76,10 @@ function Settings() {
         description={t("language.description")}
       />
       <form className="w-full flex flex-col gap-3">
-        <Label htmlFor="language">{t("language.title")}</Label>
-        <LocaleSwitcher />
+        <div className="grid gap-1.5">
+          <Label htmlFor="language">{t("language.title")}</Label>
+          <LocaleSwitcher />
+        </div>
       </form>
     </>
   );

From b6b6a615129016df0998b9ce87a27b729dc084ea Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Tue, 30 Jul 2024 21:16:26 +0530
Subject: [PATCH 3/5] chore: minor improvements

---
 frontend/src/components/LocaleSwitcher.tsx    | 10 +++++++---
 frontend/src/i18n/i18nConfig.ts               |  4 +---
 frontend/src/i18n/locales/en/translation.json | 11 +++++++----
 frontend/src/i18n/locales/hi/translation.json |  9 ++++++---
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/LocaleSwitcher.tsx b/frontend/src/components/LocaleSwitcher.tsx
index 6d440afd..ea0cd9ea 100644
--- a/frontend/src/components/LocaleSwitcher.tsx
+++ b/frontend/src/components/LocaleSwitcher.tsx
@@ -1,5 +1,6 @@
 import type { FallbackLng } from "i18next";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
   Select,
   SelectContent,
@@ -11,21 +12,24 @@ 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 languageHandler = async (newLanguage: string) => {
+  const onLanguageChange = async (newLanguage: string) => {
     if (dropdownLang !== newLanguage) {
       setDropdownLang(newLanguage);
       i18n.changeLanguage(newLanguage);
-      toast({ title: "Language updated." });
+      toast({ title: t("success") });
     }
   };
 
   return (
-    <Select value={dropdownLang} onValueChange={languageHandler}>
+    <Select value={dropdownLang} onValueChange={onLanguageChange}>
       <SelectTrigger className="w-[150px]">
         <SelectValue placeholder="Language" />
       </SelectTrigger>
diff --git a/frontend/src/i18n/i18nConfig.ts b/frontend/src/i18n/i18nConfig.ts
index b344486f..a22d79a7 100644
--- a/frontend/src/i18n/i18nConfig.ts
+++ b/frontend/src/i18n/i18nConfig.ts
@@ -12,12 +12,10 @@ export const defaultNS = "translation";
 export const resources = {
   en: {
     translation: en.translation,
-    common: en.common,
     components: en.components,
   },
   hi: {
     translation: hi.translation,
-    common: hi.common,
     components: hi.components,
   },
 } as const;
@@ -38,7 +36,7 @@ i18n
   // for all options read: https://www.i18next.com/overview/configuration-options
   .init({
     fallbackLng: "en",
-    ns: ["translation", "common", "components", "permissions"],
+    ns: ["translation", "components"],
     defaultNS,
     resources,
     supportedLngs: supportedLocales.map(({ locale }) => locale),
diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
index f352f3c5..eac066fa 100644
--- a/frontend/src/i18n/locales/en/translation.json
+++ b/frontend/src/i18n/locales/en/translation.json
@@ -3,11 +3,11 @@
     "settings": {
       "language": {
         "title": "Language",
-        "description": "Translations are not 100% finished yet."
+        "description": "Choose the language to display in Alby Hub"
       },
       "theme": {
         "title": "Theme",
-        "description": "Alby Hub is your wallet, make it your style.",
+        "description": "Alby Hub is your wallet, make it your style",
         "options": {
           "dark": "Dark",
           "light": "Light",
@@ -16,6 +16,9 @@
       }
     }
   },
-  "common": {},
-  "components": {}
+  "components": {
+    "locale_switcher": {
+      "success": "Language updated."
+    }
+  }
 }
diff --git a/frontend/src/i18n/locales/hi/translation.json b/frontend/src/i18n/locales/hi/translation.json
index 51fdb290..4ff3356b 100644
--- a/frontend/src/i18n/locales/hi/translation.json
+++ b/frontend/src/i18n/locales/hi/translation.json
@@ -3,7 +3,7 @@
     "settings": {
       "language": {
         "title": "भाषा",
-        "description": "अनुवाद अभी तक 100% पूरा नहीं हुआ है।"
+        "description": "एल्बी हब में प्रदर्शित होने वाली भाषा चुनें।"
       },
       "theme": {
         "title": "थीम",
@@ -16,6 +16,9 @@
       }
     }
   },
-  "common": {},
-  "components": {}
+  "components": {
+    "locale_switcher": {
+      "success": "भाषा अपडेट की गई है"
+    }
+  }
 }

From 4609af74b89b6f97ae01e8f351f46f0d8183ec76 Mon Sep 17 00:00:00 2001
From: Roland Bewick <roland.bewick@gmail.com>
Date: Wed, 31 Jul 2024 14:41:02 +0700
Subject: [PATCH 4/5] fix: i18n typescript support

---
 frontend/types/i18next.d.ts | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 frontend/types/i18next.d.ts

diff --git a/frontend/types/i18next.d.ts b/frontend/types/i18next.d.ts
new file mode 100644
index 00000000..2f4b8685
--- /dev/null
+++ b/frontend/types/i18next.d.ts
@@ -0,0 +1,8 @@
+import { defaultNS, resources } from "../src/i18n/i18nConfig";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    defaultNS: typeof defaultNS;
+    resources: (typeof resources)["en"];
+  }
+}

From 532c9386937faf4b47b16908420428c67368c7c8 Mon Sep 17 00:00:00 2001
From: Roland Bewick <roland.bewick@gmail.com>
Date: Wed, 31 Jul 2024 14:41:28 +0700
Subject: [PATCH 5/5] chore: add language to component translation

---
 frontend/src/components/LocaleSwitcher.tsx    | 2 +-
 frontend/src/i18n/locales/en/translation.json | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/LocaleSwitcher.tsx b/frontend/src/components/LocaleSwitcher.tsx
index ea0cd9ea..5e96f63b 100644
--- a/frontend/src/components/LocaleSwitcher.tsx
+++ b/frontend/src/components/LocaleSwitcher.tsx
@@ -31,7 +31,7 @@ export default function LocaleSwitcher() {
   return (
     <Select value={dropdownLang} onValueChange={onLanguageChange}>
       <SelectTrigger className="w-[150px]">
-        <SelectValue placeholder="Language" />
+        <SelectValue placeholder={t("language")} />
       </SelectTrigger>
       <SelectContent>
         {supportedLocales.map((locale) => (
diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
index eac066fa..94b2a094 100644
--- a/frontend/src/i18n/locales/en/translation.json
+++ b/frontend/src/i18n/locales/en/translation.json
@@ -18,7 +18,8 @@
   },
   "components": {
     "locale_switcher": {
-      "success": "Language updated."
+      "success": "Language updated.",
+      "language": "Language"
     }
   }
 }