From d2705d50a706251312feee2589b18aa121af3bd5 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Sat, 6 May 2023 19:58:11 +0100
Subject: [PATCH] feat: client side i18n

---
 package.json                            |  1 +
 pnpm-lock.yaml                          |  9 +++++++
 src/app/(home)/page.tsx                 |  2 +-
 src/components/common/ConnectButton.tsx |  2 +-
 src/lib/i18n/client.ts                  | 32 +++++++++++++++++++++++++
 src/lib/i18n/index.ts                   |  7 ++----
 6 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/i18n/client.ts

diff --git a/package.json b/package.json
index e022a0d9..9460c480 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "hast-util-to-html": "^8.0.4",
     "hast-util-to-text": "^3.1.2",
     "i18next": "^22.4.15",
+    "i18next-browser-languagedetector": "^7.0.1",
     "i18next-resources-to-backend": "^1.1.3",
     "idb-keyval": "6.2.1",
     "immer": "10.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6dfa06b4..1dc9cc32 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -136,6 +136,9 @@ dependencies:
   i18next:
     specifier: ^22.4.15
     version: 22.4.15
+  i18next-browser-languagedetector:
+    specifier: ^7.0.1
+    version: 7.0.1
   i18next-resources-to-backend:
     specifier: ^1.1.3
     version: 1.1.3
@@ -9075,6 +9078,12 @@ packages:
     hasBin: true
     dev: true
 
+  /i18next-browser-languagedetector@7.0.1:
+    resolution: {integrity: sha512-Pa5kFwaczXJAeHE56CHG2aWzFBMJNUNghf0Pm4SwSrEMps/PTKqW90EYWlIvhuYStf3Sn1K0vw+gH3+TLdkH1g==}
+    dependencies:
+      '@babel/runtime': 7.21.5
+    dev: false
+
   /i18next-fs-backend@2.1.1:
     resolution: {integrity: sha512-FTnj+UmNgT3YRml5ruRv0jMZDG7odOL/OP5PF5mOqvXud2vHrPOOs68Zdk6iqzL47cnnM0ZVkK2BAvpFeDJToA==}
     dev: false
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 796fc7c4..c5061633 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -4,9 +4,9 @@ import { memo } from "react"
 import { Hydrate, dehydrate } from "@tanstack/react-query"
 
 import { Logo } from "~/components/common/Logo"
-import { ShowCase } from "~/components/home//Showcase"
 import { default as OriginEntranceButton } from "~/components/home/EntranceButton"
 import { Integration } from "~/components/home/Integrations"
+import { ShowCase } from "~/components/home/Showcase"
 import { Button } from "~/components/ui/Button"
 import { Image } from "~/components/ui/Image"
 import { CSB_SCAN, GITHUB_LINK } from "~/lib/env"
diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index 77fae61b..b39a6263 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@@ -1,6 +1,5 @@
 "use client"
 
-import { useTranslation } from "next-i18next"
 import React, { useEffect, useState } from "react"
 
 import {
@@ -33,6 +32,7 @@ import { Button, type Variant, type VariantColor } from "~/components/ui/Button"
 import { Menu } from "~/components/ui/Menu"
 import { SITE_URL } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
+import { useTranslation } from "~/lib/i18n/client"
 import { cn } from "~/lib/utils"
 
 type HeaderLinkType = {
diff --git a/src/lib/i18n/client.ts b/src/lib/i18n/client.ts
new file mode 100644
index 00000000..46ff0779
--- /dev/null
+++ b/src/lib/i18n/client.ts
@@ -0,0 +1,32 @@
+"use client"
+
+import i18next from "i18next"
+import LanguageDetector from "i18next-browser-languagedetector"
+import resourcesToBackend from "i18next-resources-to-backend"
+import {
+  initReactI18next,
+  useTranslation as useTranslationOrg,
+} from "react-i18next"
+
+import { getOptions } from "./settings"
+
+i18next
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .use(
+    resourcesToBackend(
+      (language: string, namespace: string) =>
+        import(`./locales/${language}/${namespace}.json`),
+    ),
+  )
+  .init({
+    ...getOptions(),
+    lng: undefined, // let detect the language on client side
+    detection: {
+      order: ["htmlTag"],
+    },
+  })
+
+export function useTranslation(ns: string) {
+  return useTranslationOrg(ns)
+}
diff --git a/src/lib/i18n/index.ts b/src/lib/i18n/index.ts
index 637ec492..e48ef4ac 100644
--- a/src/lib/i18n/index.ts
+++ b/src/lib/i18n/index.ts
@@ -21,14 +21,11 @@ const initI18next = async (lng: string, ns: string) => {
   return i18nInstance
 }
 
-export async function useTranslation(
-  ns: string,
-  options: { keyPrefix?: string } = {},
-) {
+export async function useTranslation(ns: string) {
   const lang = useAcceptLang()
   const i18nextInstance = await initI18next(lang, ns)
   return {
-    t: i18nextInstance.getFixedT(lang, ns, options.keyPrefix),
+    t: i18nextInstance.getFixedT(lang, ns),
     i18n: i18nextInstance,
   }
 }