feat: browser language detection (#301)

* feat: browser language detection

works for chromium, did not work for firefox.

closes #270

* only set if not null

* do it properly with tests

* prettier

* refactor: rename i18nCached to i18nConfigured

---------

Co-authored-by: michael1011 <[email protected]>

src/Nav.jsx

@@ -5,7 +5,7 @@ import "./style/nav.scss";
 import locales from "./i18n/i18n.js";
 import logo from "./assets/boltz.svg";
 import Warnings from "./components/Warnings";
-import { setI18n, hamburger, setHamburger } from "./signals";
+import { setI18nConfigured, hamburger, setHamburger } from "./signals";
 
 const Nav = ({ network }) => {
     let timeout;
@@ -41,7 +41,7 @@ const Nav = ({ network }) => {
                             {(lang) => (
                                 <span
                                     class="lang"
-                                    onClick={() => setI18n(lang)}>
+                                    onClick={() => setI18nConfigured(lang)}>
                                     {locales[lang].language}
                                 </span>
                             )}

src/i18n/detect.js

@@ -0,0 +1,30 @@
+import log from "loglevel";
+import locales from "./i18n";
+import { defaultLanguage } from "../config";
+import { i18nConfigured, setI18n } from "../signals";
+
+export const getNavigatorLanguage = (language) => {
+    if (language === undefined) {
+        log.info(
+            `browser language undefined; using default: ${defaultLanguage}`,
+        );
+        return defaultLanguage;
+    }
+
+    const lang = language.split("-")[0];
+    if (!Object.keys(locales).includes(lang)) {
+        log.info(
+            `browser language "${lang}" not found; using default: ${defaultLanguage}`,
+        );
+        return defaultLanguage;
+    }
+
+    log.info(`detected browser language ${lang}`);
+    return lang;
+};
+
+export const detectLanguage = () => {
+    if (i18nConfigured() === null) {
+        setI18n(getNavigatorLanguage(navigator.language));
+    }
+};

src/i18n/index.js

@@ -1,8 +1,11 @@
 import { createMemo } from "solid-js";
 import { translator, flatten, resolveTemplate } from "@solid-primitives/i18n";
 import dict from "./i18n";
-import { i18n } from "../signals";
+import { defaultLanguage } from "../config";
+import { i18n, i18nConfigured, setI18n } from "../signals";
 
-const dictLocale = createMemo(() => flatten(dict[i18n()]));
+createMemo(() => setI18n(i18nConfigured()));
+
+const dictLocale = createMemo(() => flatten(dict[i18n() || defaultLanguage]));
 
 export default translator(dictLocale, resolveTemplate);

src/index.jsx

@@ -16,6 +16,7 @@ import NotFound from "./NotFound";
 import Notification from "./Notification";
 import { checkReferralId } from "./helper";
 import { loglevel, network } from "./config";
+import { detectLanguage } from "./i18n/detect";
 import { swapChecker } from "./utils/swapChecker";
 import { detectWebLNProvider } from "./utils/webln";
 import { setWebln, setWasmSupported } from "./signals";
@@ -26,6 +27,7 @@ log.setLevel(loglevel);
 detectWebLNProvider().then((state) => setWebln(state));
 setWasmSupported(checkWasmSupported());
 checkReferralId();
+detectLanguage();
 
 swapChecker();
 

src/signals.js

@@ -2,7 +2,7 @@ import { createEffect, createSignal } from "solid-js";
 import { makePersisted } from "@solid-primitives/storage";
 import { isMobile } from "./helper";
 import { LN, sideSend } from "./consts";
-import { defaultLanguage, pairs } from "./config";
+import { pairs } from "./config";
 
 const defaultSelection = Object.keys(pairs)[0].split("/")[0];
 
@@ -48,6 +48,8 @@ export const [timeoutBlockHeight, setTimeoutBlockheight] = createSignal(0);
 export const [refundTx, setRefundTx] = createSignal("");
 export const [transactionToRefund, setTransactionToRefund] = createSignal(null);
 
+export const [i18n, setI18n] = createSignal(null);
+
 // local storage
 
 // To support the values created by the deprecated "createStorageSignal"
@@ -63,10 +65,13 @@ export const [ref, setRef] = makePersisted(
         ...stringSerializer,
     },
 );
-export const [i18n, setI18n] = makePersisted(createSignal(defaultLanguage), {
-    name: "i18n",
-    ...stringSerializer,
-});
+export const [i18nConfigured, setI18nConfigured] = makePersisted(
+    createSignal(null),
+    {
+        name: "i18n",
+        ...stringSerializer,
+    },
+);
 export const [denomination, setDenomination] = makePersisted(
     createSignal("sat"),
     { name: "denomination", ...stringSerializer },

tests/i18n/detect.spec.js

@@ -0,0 +1,25 @@
+import { describe, expect } from "vitest";
+import { defaultLanguage } from "../../src/config";
+import { getNavigatorLanguage } from "../../src/i18n/detect";
+
+describe("detect", () => {
+    test.each`
+        navigatorLanguage | expected
+        ${"en-US"}        | ${"en"}
+        ${"en-UK"}        | ${"en"}
+        ${"de-DE"}        | ${"de"}
+        ${"de-AT"}        | ${"de"}
+        ${"de-CH"}        | ${"de"}
+        ${"de-LUX"}       | ${"de"}
+        ${"es-ES"}        | ${"es"}
+        ${"de"}           | ${"de"}
+        ${"none-DE"}      | ${defaultLanguage}
+        ${"ro-RO"}        | ${defaultLanguage}
+        ${undefined}      | ${defaultLanguage}
+    `(
+        "getNavigatorLanguage $navigatorLanguage <=> $expected",
+        ({ navigatorLanguage, expected }) => {
+            expect(getNavigatorLanguage(navigatorLanguage)).toEqual(expected);
+        },
+    );
+});