feat(i18n): save and load locale from redux store (#1723)

* wrap sock around function component to get re-renders

* removed sourcelocale since we are using custom ids

* load locale data dynamically

* undo dev change

* ran yarn i18n:extract

* store locale in redux

* added support for redux

* restored header

* refactor

* addressed pr feedback

* specify type

* added navigator locale fallback to generic dialect

* make locale array const and typed

* addressed pr feedback

* fixed various

* addressed pr feedback

* make supported locales constant uppercase

* add back toUpperCase removed during refactoring

* removed lingui/detect-locale

* run yarn

package.json

@@ -7,7 +7,6 @@
     "@emotion/core": "^11.0.0",
     "@ethersproject/experimental": "^5.2.0",
     "@lingui/cli": "^3.9.0",
-    "@lingui/detect-locale": "^3.9.0",
     "@lingui/loader": "^3.9.0",
     "@lingui/macro": "^3.9.0",
     "@lingui/react": "^3.9.0",

src/constants/locales.ts

+export const SUPPORTED_LOCALES = [
+  'en',
+  'pseudo-en',
+  'de',
+  'es-AR',
+  'es-US',
+  'it-IT',
+  'iw',
+  'ro',
+  'ru',
+  'vi',
+  'zh-CN',
+  'zh-TW',
+] as const
+export type SupportedLocale = typeof SUPPORTED_LOCALES[number]
+
+export const defaultLocale: SupportedLocale = 'en'

src/i18n.tsx

-import React from 'react'
+import React, { useEffect } from 'react'
 import { i18n } from '@lingui/core'
 import { I18nProvider } from '@lingui/react'
-import { detect, fromUrl } from '@lingui/detect-locale'
-import { ReactNode, useEffect } from 'react'
-
-export const locales = ['en', 'pseudo-en', 'de', 'es-AR', 'es-US', 'it-IT', 'iw', 'ro', 'ru', 'vi', 'zh-CN', 'zh-TW']
-export const defaultLocale = 'en'
-
-const getDetectedLocale = () => {
-  const detected =
-    detect(
-      fromUrl('lang'), // helps local development
-      defaultLocale
-    ) ?? defaultLocale
-  return locales.includes(detected) ? detected : defaultLocale
+import { ReactNode } from 'react'
+import useParsedQueryString from 'hooks/useParsedQueryString'
+import { useLocale } from 'state/user/hooks'
+import { SupportedLocale, SUPPORTED_LOCALES, defaultLocale } from './constants/locales'
+
+function parseLocale(maybeSupportedLocale: string): SupportedLocale | undefined {
+  return SUPPORTED_LOCALES.find((locale) => locale === maybeSupportedLocale)
+}
+
+function navigatorLocale(): SupportedLocale | undefined {
+  if (!navigator.language) return undefined
+
+  const [language, region] = navigator.language.split('-')
+
+  if (region) {
+    return parseLocale(`${language}-${region.toUpperCase()}`) ?? parseLocale(language)
+  }
+
+  return parseLocale(language)
 }
 
-export async function dynamicActivate(locale: string) {
-  const { messages } = await import(`@lingui/loader!./locales/${locale}.po`)
-  i18n.loadLocaleData(locale, { plurals: () => null })
-  i18n.load(locale, messages)
-  i18n.activate(locale)
+export async function dynamicActivate(locale: SupportedLocale) {
+  try {
+    const { messages } = await import(`@lingui/loader!./locales/${locale}.po`)
+    i18n.loadLocaleData(locale, { plurals: () => null })
+    i18n.load(locale, messages)
+    i18n.activate(locale)
+  } catch (error) {
+    console.error(`Failed to load locale data for ${locale}`, error)
+  }
 }
 
 export function LanguageProvider({ children }: { children: ReactNode }) {
+  const parsed = useParsedQueryString()
+  const userLocale = useLocale()
+
   useEffect(() => {
-    dynamicActivate(getDetectedLocale()).catch((error) => {
-      console.error('Failed to load locale data', error)
-    })
-  }, [])
+    const urlLocale = () => (typeof parsed.lng === 'string' && parseLocale(parsed.lng)) || undefined
+
+    dynamicActivate(userLocale ?? urlLocale() ?? navigatorLocale() ?? defaultLocale)
+  }, [userLocale, parsed])
 
   return <I18nProvider i18n={i18n}>{children}</I18nProvider>
 }

src/index.tsx

@@ -60,24 +60,24 @@ function Updaters() {
 
 ReactDOM.render(
   <StrictMode>
-    <LanguageProvider>
-      <FixedGlobalStyle />
-      <Web3ReactProvider getLibrary={getLibrary}>
-        <Web3ProviderNetwork getLibrary={getLibrary}>
-          <Blocklist>
-            <Provider store={store}>
-              <Updaters />
-              <ThemeProvider>
-                <ThemedGlobalStyle />
-                <HashRouter>
+    <Provider store={store}>
+      <HashRouter>
+        <LanguageProvider>
+          <FixedGlobalStyle />
+          <Web3ReactProvider getLibrary={getLibrary}>
+            <Web3ProviderNetwork getLibrary={getLibrary}>
+              <Blocklist>
+                <Updaters />
+                <ThemeProvider>
+                  <ThemedGlobalStyle />
                   <App />
-                </HashRouter>
-              </ThemeProvider>
-            </Provider>
-          </Blocklist>
-        </Web3ProviderNetwork>
-      </Web3ReactProvider>
-    </LanguageProvider>
+                </ThemeProvider>
+              </Blocklist>
+            </Web3ProviderNetwork>
+          </Web3ReactProvider>
+        </LanguageProvider>
+      </HashRouter>
+    </Provider>
   </StrictMode>,
   document.getElementById('root')
 )

src/state/user/actions.ts

 import { createAction } from '@reduxjs/toolkit'
+import { SupportedLocale } from 'constants/locales'
 
 export interface SerializedToken {
   chainId: number
@@ -16,6 +17,7 @@ export interface SerializedPair {
 export const updateMatchesDarkMode = createAction<{ matchesDarkMode: boolean }>('user/updateMatchesDarkMode')
 export const updateUserDarkMode = createAction<{ userDarkMode: boolean }>('user/updateUserDarkMode')
 export const updateUserExpertMode = createAction<{ userExpertMode: boolean }>('user/updateUserExpertMode')
+export const updateUserLocale = createAction<{ userLocale: SupportedLocale }>('user/updateUserLocale')
 export const updateUserSingleHopOnly = createAction<{ userSingleHopOnly: boolean }>('user/updateUserSingleHopOnly')
 export const updateHideClosedPositions = createAction<{ userHideClosedPositions: boolean }>('user/hideClosedPositions')
 export const updateUserSlippageTolerance = createAction<{ userSlippageTolerance: number | 'auto' }>(

src/state/user/hooks.tsx

@@ -22,7 +22,9 @@ import {
   updateUserExpertMode,
   updateUserSingleHopOnly,
   updateUserSlippageTolerance,
+  updateUserLocale,
 } from './actions'
+import { SupportedLocale } from 'constants/locales'
 
 function serializeToken(token: Token): SerializedToken {
   return {
@@ -70,6 +72,24 @@ export function useDarkModeManager(): [boolean, () => void] {
   return [darkMode, toggleSetDarkMode]
 }
 
+export function useLocale(): SupportedLocale | null {
+  return useSelector<AppState, AppState['user']['userLocale']>((state) => state.user.userLocale)
+}
+
+export function useLocaleManager(): [SupportedLocale | null, (newLocale: SupportedLocale) => void] {
+  const dispatch = useDispatch<AppDispatch>()
+  const locale = useLocale()
+
+  const setLocale = useCallback(
+    (newLocale: SupportedLocale) => {
+      dispatch(updateUserLocale({ userLocale: newLocale }))
+    },
+    [dispatch]
+  )
+
+  return [locale, setLocale]
+}
+
 export function useIsExpertMode(): boolean {
   return useSelector<AppState, AppState['user']['userExpertMode']>((state) => state.user.userExpertMode)
 }

src/state/user/reducer.ts

@@ -16,7 +16,9 @@ import {
   toggleURLWarning,
   updateUserSingleHopOnly,
   updateHideClosedPositions,
+  updateUserLocale,
 } from './actions'
+import { SupportedLocale } from 'constants/locales'
 
 const currentTimestamp = () => new Date().getTime()
 
@@ -27,6 +29,8 @@ export interface UserState {
   userDarkMode: boolean | null // the user's choice for dark mode or light mode
   matchesDarkMode: boolean // whether the dark mode media query matches
 
+  userLocale: SupportedLocale | null
+
   userExpertMode: boolean
 
   userSingleHopOnly: boolean // only allow swaps on direct pairs
@@ -66,6 +70,7 @@ export const initialState: UserState = {
   userDarkMode: null,
   matchesDarkMode: false,
   userExpertMode: false,
+  userLocale: null,
   userSingleHopOnly: false,
   userHideClosedPositions: false,
   userSlippageTolerance: 'auto',
@@ -124,6 +129,10 @@ export default createReducer(initialState, (builder) =>
       state.userExpertMode = action.payload.userExpertMode
       state.timestamp = currentTimestamp()
     })
+    .addCase(updateUserLocale, (state, action) => {
+      state.userLocale = action.payload.userLocale
+      state.timestamp = currentTimestamp()
+    })
     .addCase(updateUserSlippageTolerance, (state, action) => {
       state.userSlippageTolerance = action.payload.userSlippageTolerance
       state.timestamp = currentTimestamp()

yarn.lock

@@ -2312,11 +2312,6 @@
     make-plural "^6.2.2"
     messageformat-parser "^4.1.3"
 
-"@lingui/detect-locale@^3.9.0":
-  version "3.9.0"
-  resolved "https://registry.npmjs.org/@lingui/detect-locale/-/detect-locale-3.9.0.tgz"
-  integrity sha512-PUn1LyW2WRIB1NSYBBx1Lf4rz27dPEgPs8EWHklCr1dPxYcW4pMFIHVzcBqLA4j7KtcYexFY7gCLZQDZkOm5VQ==
-
 "@lingui/loader@^3.9.0":
   version "3.9.0"
   resolved "https://registry.npmjs.org/@lingui/loader/-/loader-3.9.0.tgz"