fix: persist user locale

components/common/ConnectWallet/WalletAssetMenu.vue

@@ -42,7 +42,7 @@
             :data-testid="`sidebar-language-${lang.value}`"
             :value="lang.value"
             :class="{ 'is-active': $i18n.locale === lang.value }"
-            @click="$i18n.locale = lang.value">
+            @click="() => setUserLocale(lang.value)">
             <span>{{ lang.flag }} {{ lang.label }}</span>
           </NeoDropdownItem>
         </NeoDropdown>
@@ -63,7 +63,7 @@
 
 <script setup lang="ts">
 import { NeoDropdown, NeoDropdownItem, NeoIcon } from '@kodadot1/brick'
-import { langsFlags } from '@/utils/config/i18n'
+import { langsFlags, setUserLocale } from '@/utils/config/i18n'
 
 const { urlPrefix } = usePrefix()
 const { isBasilisk } = useIsChain(urlPrefix)

components/navbar/MobileLanguageOption.vue

@@ -13,13 +13,13 @@
 </template>
 
 <script lang="ts" setup>
-import { langsFlags } from '@/utils/config/i18n'
+import { langsFlags, setUserLocale } from '@/utils/config/i18n'
 
 const { $i18n } = useNuxtApp()
 const emit = defineEmits(['closeLanguageOption', 'closeMobileSubMenu'])
 
 const setUserLang = (value: string) => {
-  $i18n.locale.value = value
+  setUserLocale(value)
   emit('closeLanguageOption')
   emit('closeMobileSubMenu')
 }

components/navbar/ProfileDropdown.vue

@@ -59,7 +59,7 @@
         aria-role="listitem"
         :value="lang.value"
         :class="{ 'is-active': $i18n.locale === lang.value }"
-        @click="$i18n.locale = lang.value">
+        @click="() => setUserLocale(lang.value)">
         <span>{{ lang.flag }} {{ lang.label }}</span>
       </NeoDropdownItem>
     </NeoDropdown>
@@ -73,6 +73,7 @@ import { useIdentityStore } from '@/stores/identity'
 import { langsFlags as langsFlagsList } from '@/utils/config/i18n'
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
 import ConnectWalletButton from '@/components/shared/ConnectWalletButton.vue'
+import { setUserLocale } from '@/utils/config/i18n'
 
 const identityStore = useIdentityStore()
 const { isDarkMode } = useTheme()

plugins/i18n.ts

@@ -0,0 +1,5 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('app:beforeMount', (app) => {
+    app.$nuxt.$i18n.locale.value = usePreferencesStore().getUserLocale
+  })
+})

stores/preferences.ts

@@ -36,6 +36,7 @@ interface State {
   hasCarbonOffset: boolean
   // Mass Mint
   visitedOnboarding: boolean
+  userLocale: string
 }
 
 export const usePreferencesStore = defineStore('preferences', {
@@ -72,6 +73,7 @@ export const usePreferencesStore = defineStore('preferences', {
     visitedOnboarding: false,
     firstTimeAutoTeleport: true,
     subscribedToNewsletter: false,
+    userLocale: 'en',
   }),
   getters: {
     getsidebarFilterCollapse: (state) => state.sidebarFilterCollapseOpen,
@@ -99,6 +101,7 @@ export const usePreferencesStore = defineStore('preferences', {
     getVisitedOnboarding: (state) => state.visitedOnboarding,
     getFirstTimeAutoTeleport: (state) => state.firstTimeAutoTeleport,
     getSubscribedToNewsletter: (state) => state.subscribedToNewsletter,
+    getUserLocale: (state) => state.userLocale,
   },
   actions: {
     setSidebarFilterCollapse(payload) {
@@ -196,6 +199,9 @@ export const usePreferencesStore = defineStore('preferences', {
     setSubscribedToNewsletter(subscribed: boolean) {
       this.subscribedToNewsletter = subscribed
     },
+    setUserLocale(locale: string) {
+      this.userLocale = locale
+    },
   },
   persist: true,
 })

utils/config/i18n.ts

@@ -25,6 +25,13 @@ export const langsFlags = [
   },
 ]
 
+export const setUserLocale = (locale: string) => {
+  const { $i18n } = useNuxtApp()
+  const preferenceStore = usePreferencesStore()
+  preferenceStore.setUserLocale(locale)
+  $i18n.locale.value = locale
+}
+
 const md = MarkdownIt({
   breaks: false,
 })