Internacionalization plugin

		I've added the i18n plugin in order to correctly switch between the app laguages

Author: ronaldsg20

package-lock.json

@@ -56,13 +56,15 @@
     "tiny-secp256k1": "^1.1.6",
     "url": "^0.11.1",
     "vue": "^3.3.4",
+    "vue-i18n": "^9.13.1",
     "vue-router": "^4.2.4",
     "vuetify": "^3.5.17",
     "vuex": "^4.1.0",
     "web3": "^1.10.0",
     "web3-eth-contract": "^1.10.0"
   },
   "devDependencies": {
+    "@intlify/vue-i18n-loader": "^4.2.0",
     "@ledgerhq/hw-transport-mocker": "^6.28.5",
     "@mdi/font": "^7.2.96",
     "@types/big.js": "^6.2.0",

package.json

@@ -92,6 +92,7 @@ export const SESSION_ADD_BITCOIN_PRICE = 'SESSION_ADD_BITCOIN_PRICE';
 export const SESSION_CLEAR = 'SESSION_CLEAR';
 export const SESSION_ADD_TERMS_VALUE = 'SESSION_ADD_TERMS_VALUE';
 export const SESSION_ADD_TERMS_AND_CONDITIONS_ENABLED = 'SESSION_ADD_TERMS_AND_CONDITIONS_ENABLED';
+export const SESSION_SWITCH_LOCALE = 'SESSION_SWITCH_LOCALE';
 
 // Pegin tx Mutations
 export const PEGIN_TX_SET_ADDRESS_LIST = 'PEGIN_TX_SET_ADDRESS_LIST';
@@ -160,6 +161,7 @@ export const SESSION_SET_BITCOIN_PRICE = 'SESSION_SET_BITCOIN_PRICE';
 export const SESSION_CLEAR_STATE = 'SESSION_CLEAR_STATE';
 export const SESSION_SET_TERMS_ACCEPTED = 'SESSION_SET_TERMS_ACCEPTED';
 export const SESSION_SET_TERMS_AND_CONDITIONS_ENABLED = 'SESSION_SET_TERMS_AND_CONDITIONS_ENABLED';
+export const SESSION_SET_LOCALE = 'SESSION_SET_LOCALE';
 
 // Pegin tx getters
 export const WALLET_NAME = 'WALLET_NAME';

src/common/store/constants.ts

@@ -8,6 +8,7 @@ import axios, { AxiosResponse } from 'axios';
 import * as constants from '@/common/store/constants';
 import {
   TransactionType, SessionState, RootState, WeiBig,
+  AppLocale,
 } from '@/common/types';
 import { EnvironmentAccessorService } from '@/common/services/enviroment-accessor.service';
 import { ApiService } from '@/common/services';
@@ -165,4 +166,7 @@ export const actions: ActionTree<SessionState, RootState> = {
       dispatch(constants.SESSION_ADD_TERMS_VALUE, false);
     }
   },
+  [constants.SESSION_SWITCH_LOCALE]: ({ commit }, locale: AppLocale) => {
+    commit(constants.SESSION_SET_LOCALE, locale);
+  },
 };

src/common/store/session/actions.ts

@@ -1,9 +1,10 @@
 import { MutationTree } from 'vuex';
 import Web3 from 'web3';
 import * as constants from '@/common/store/constants';
-import { WeiBig } from '@/common/types';
+import { AppLocale, WeiBig } from '@/common/types';
 import { TransactionType, SessionState } from '@/common/types/session';
 import { getClearSessionState } from '@/common/utils';
+import i18n from '@/i18n';
 
 export const mutations: MutationTree<SessionState> = {
   [constants.SESSION_SET_ACCOUNT]: (state, account: string) => {
@@ -48,4 +49,9 @@ export const mutations: MutationTree<SessionState> = {
   [constants.SESSION_SET_TERMS_AND_CONDITIONS_ENABLED]: (state, value) => {
     state.termsAndConditionsEnabled = value;
   },
+  [constants.SESSION_SET_LOCALE]: (state, newLocale: AppLocale) => {
+    if (newLocale && i18n.global.availableLocales.includes(newLocale)) {
+      i18n.global.locale.value = newLocale;
+    }
+  },
 };

src/common/store/session/mutations.ts

@@ -130,3 +130,8 @@ export interface ObjectDifference {
   oldValue: unknown;
   newValue: unknown;
 }
+
+export enum AppLocale {
+  LOCALE_EN = 'en',
+  LOCALE_ES = 'es',
+}

src/common/types/Common.ts

@@ -34,7 +34,7 @@
             </v-col>
           </v-row>
             <v-row class="mx-0 mt-10 d-flex justify-center">
-              <p>Select your token conversion</p>
+              <p>{{ $t('main.subtitle-2') }}</p>
             </v-row>
             <v-row justify="center" class="mt-6">
               <v-col cols="4" class="d-flex justify-end pb-0">

src/common/views/Home.vue

@@ -0,0 +1,14 @@
+import { createI18n } from 'vue-i18n';
+import enLocale from './locales/en.json';
+import esLocale from './locales/es.json';
+
+export default createI18n({
+  locale: 'en',
+  fallbackLocale: 'es',
+  legacy: false,
+  messages: {
+    en: enLocale,
+    es: esLocale,
+  },
+  globalInjection: true,
+});

src/i18n.ts

@@ -0,0 +1,5 @@
+{
+  "main": {
+    "subtitle-2": "Select your token conversion"
+  }
+}

src/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "main": {
+    "subtitle-2": "Selecciona tu conversion de token"
+  }
+}