fix: default browser language detection (#792)

BoltzExchange · Jan 9, 2025 · 34edb7b · 34edb7b
1 parent c76bd47
commit 34edb7b
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 15 deletions.
diff --git a/e2e/locale.spec.ts b/e2e/locale.spec.ts
@@ -0,0 +1,44 @@
+import { expect, test } from "@playwright/test";
+
+import dict from "../src/i18n/i18n";
+
+test.describe("Locales", () => {
+    [
+        {
+            locale: "en-GB",
+            dict: dict.en,
+        },
+        {
+            locale: "en-US",
+            dict: dict.en,
+        },
+        {
+            locale: "de-DE",
+            dict: dict.de,
+        },
+        {
+            locale: "es-ES",
+            dict: dict.es,
+        },
+        {
+            locale: "zh-Hans-CN",
+            dict: dict.zh,
+        },
+        {
+            locale: "ja-JP",
+            dict: dict.ja,
+        },
+    ].forEach(({ locale, dict }) => {
+        test(`Default language for locale ${locale}`, async ({ browser }) => {
+            const context = await browser.newContext({
+                locale,
+            });
+            const page = await context.newPage();
+
+            await page.goto("/");
+            await expect(page.getByTestId("create-swap-title")).toHaveText(
+                dict.create_swap,
+            );
+        });
+    });
+});
diff --git a/src/context/Global.tsx b/src/context/Global.tsx
@@ -354,7 +354,7 @@ const GlobalProvider = (props: { children: JSX.Element }) => {
 
     // i18n
     createEffect(() => {
-        setI18n(i18nConfigured() || i18nUrl());
+        setI18n(detectLanguage(i18nConfigured() || i18nUrl()));
     });
     const dictLocale = createMemo(
         () => flatten(dict[i18n() || config.defaultLanguage]) as never,

diff --git a/src/i18n/detect.ts b/src/i18n/detect.ts
@@ -30,26 +30,28 @@ export const getNavigatorLanguage = (language: string): string => {
 
 export const detectLanguage = (
     i18nConfigured: string | null,
-    i18nUrl: string | null,
-    setI18nUrl: Setter<string>,
+    i18nUrl?: string | null,
+    setI18nUrl?: Setter<string>,
 ): string => {
     if (i18nConfigured !== null) {
         return i18nConfigured;
     }
 
-    const urlParam = getUrlParam("lang");
-    if (urlParam) {
-        if (isValidLang(urlParam)) {
-            log.info("Using language URL parameter:", urlParam);
-            setI18nUrl(urlParam);
-            return urlParam;
-        } else {
-            log.warn("Invalid language URL parameter:", urlParam);
+    if (i18nUrl !== undefined) {
+        const urlParam = getUrlParam("lang");
+        if (urlParam) {
+            if (isValidLang(urlParam)) {
+                log.info("Using language URL parameter:", urlParam);
+                setI18nUrl(urlParam);
+                return urlParam;
+            } else {
+                log.warn("Invalid language URL parameter:", urlParam);
+            }
         }
-    }
 
-    if (i18nUrl !== null) {
-        return i18nUrl;
+        if (i18nUrl !== null && i18nUrl !== undefined) {
+            return i18nUrl;
+        }
     }
 
     return getNavigatorLanguage(navigator.language);

diff --git a/src/pages/Create.tsx b/src/pages/Create.tsx
@@ -321,7 +321,7 @@ const Create = () => {
         <Show when={wasmSupported()} fallback={<ErrorWasm />}>
             <div class="frame">
                 <SettingsCog />
-                <h2>{t("create_swap")}</h2>
+                <h2 data-testid="create-swap-title">{t("create_swap")}</h2>
                 <p>
                     {t("create_swap_subline")} <br />
                     {t("send")} {t("min")}:{" "}