🏳 sync SwitchLocale

Author: roiLeo

components/shared/SwitchLocale.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="language-switcher">
     <b-dropdown aria-role="list">
-      <template #trigger>
+      <template #trigger="{ active }">
         <b-button
-          label="Language"
           type="is-primary"
+          :label="userFlag"
+          :icon-right="active ? 'caret-up' : 'caret-down'"
         />
       </template>
       <b-dropdown-item
-        v-for="(lang, i) in langsFlags"
-        :key="`Lang${i}`"
         aria-role="listitem"
+        v-for="lang in langsFlags"
+        :key="lang.value"
         :value="userLang"
         :class="{ 'is-active': userLang === lang.value}"
         @click="setUserLang(lang.value)"
@@ -28,11 +29,15 @@ import { Component, Vue } from 'nuxt-property-decorator'
 @Component({})
 export default class LocaleChanger extends Vue {
 
-  get langsFlags() {
-    return this.$store.state.language.langsFlags
+  get langsFlags(): string {
+    return this.$store.getters.getLangsFlags
   }
 
-  get userLang() {
+  get userFlag(): string {
+    return this.$store.getters.getUserFlag
+  }
+
+  get userLang(): string {
     this.$i18n.locale = this.$store.getters.getUserLang
     return this.$store.getters.getUserLang
   }

store/index.ts

@@ -228,6 +228,8 @@ export const  getters = {
   getChainProperties58Format: ({ chainProperties } : any ) => chainProperties.ss58Format,
   getChainPropertiesTokenDecimals: ({ chainProperties } : any ) => chainProperties.tokenDecimals,
   getUserLang: ({ language } : any) => language.userLang || 'en',
+  getLangsFlags: ({ language } : any) => language.langsFlags,
+  getUserFlag: ({ language } : any) => language.langsFlags.find((lang: {value: string}) => lang.value === language.userLang).flag,
   getCurrentKSMValue: ({ fiatPrice } : any) => fiatPrice['kusama']['usd'],
   getCurrentChain: ({ explorer } : any) => explorer.chain,
   getIndexer: ({ indexer } : any) => indexer