diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 19c69b96..d2e70417 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -29,12 +29,12 @@ export default function RootLayout({
}: {
children: React.ReactNode
}) {
- const lng = useAcceptLang()
+ const lang = useAcceptLang()
return (
-
+
- {children}
+ {children}
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index f69b433d..8629e487 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -22,6 +22,7 @@ import { APP_NAME } from "~/lib/env"
import { toGateway } from "~/lib/ipfs-parser"
import { createIDBPersister } from "~/lib/persister.client"
import { urlComposer } from "~/lib/url-composer"
+import { LangProvider } from "~/providers/LangProvider"
const wagmiClient = createClient(getDefaultClientConfig({ appName: APP_NAME }))
@@ -34,7 +35,13 @@ const colorScheme: NotificationModalColorScheme = {
border: `var(--border-color)`,
}
-export default function Providers({ children }: { children: React.ReactNode }) {
+export default function Providers({
+ children,
+ lang,
+}: {
+ children: React.ReactNode
+ lang: string
+}) {
useDarkMode()
useMobileLayout()
@@ -77,7 +84,7 @@ export default function Providers({ children }: { children: React.ReactNode }) {
- {children}
+ {children}
diff --git a/src/hooks/useLang.ts b/src/hooks/useLang.ts
new file mode 100644
index 00000000..369d2adc
--- /dev/null
+++ b/src/hooks/useLang.ts
@@ -0,0 +1,13 @@
+import { useContext } from "react"
+
+import { LangContext, LangContextType } from "~/providers/LangProvider"
+
+export function useLang(): LangContextType {
+ const context = useContext(LangContext)
+
+ if (!context) {
+ throw new Error("useLang must be used within a LangProvider")
+ }
+
+ return context
+}
diff --git a/src/lib/i18n/client.ts b/src/lib/i18n/client.ts
index 1cf919b9..efe4a046 100644
--- a/src/lib/i18n/client.ts
+++ b/src/lib/i18n/client.ts
@@ -3,13 +3,14 @@
import i18next from "i18next"
import LanguageDetector from "i18next-browser-languagedetector"
import resourcesToBackend from "i18next-resources-to-backend"
-import { useEffect, useState } from "react"
import {
initReactI18next,
useTranslation as useTranslationOrg,
} from "react-i18next"
-import { fallbackLng, getOptions } from "./settings"
+import { useLang } from "~/hooks/useLang"
+
+import { getOptions } from "./settings"
i18next
.use(initReactI18next)
@@ -29,16 +30,9 @@ i18next
})
export function useTranslation(ns: string) {
- const [value, setValue] = useState({
- t: i18next.getFixedT(fallbackLng, ns),
- })
-
- const { t } = useTranslationOrg(ns)
- useEffect(() => {
- setValue({
- t,
- })
- }, [t])
-
- return value
+ const { lang } = useLang()
+ if (i18next.resolvedLanguage !== lang) {
+ i18next.changeLanguage(lang)
+ }
+ return useTranslationOrg(ns)
}
diff --git a/src/providers/LangProvider.tsx b/src/providers/LangProvider.tsx
new file mode 100644
index 00000000..738a9deb
--- /dev/null
+++ b/src/providers/LangProvider.tsx
@@ -0,0 +1,18 @@
+import { ReactNode, createContext } from "react"
+
+export interface LangContextType {
+ lang: string
+}
+
+export const LangContext = createContext(undefined)
+
+interface LangProviderProps {
+ children: ReactNode
+ lang: string
+}
+
+export function LangProvider({ children, lang }: LangProviderProps) {
+ return (
+ {children}
+ )
+}