incorporation localization of texts using of the library i18n

package.json

@@ -41,11 +41,12 @@
  "ual-wombat": "^0.3.3",
  "universal-authenticator-library": "^0.3.0",
  "vue": "3",
+ "vue-i18n": "^9.0.0",
  "vue-json-viewer": "3",
  "vue-router": "4",
  "vue3-click-away": "^1.2.4",
  "vuex": "4",
- "web3": "^1.8.1"
+ "web3": "^1.8.1" 
  },
  "devDependencies": {
  "@babel/core": "7.19.3",

quasar.conf.js

@@ -23,7 +23,7 @@ module.exports = function(/* ctx */) {
  // app boot file (/src/boot)
  // --> boot files are part of "main.js"
  // https://quasar.dev/quasar-cli/boot-files
- boot: ['ual', 'hyperion', 'api', 'telosApi', 'evm', 'q-component-defaults'],
+ boot: ['ual', 'hyperion', 'i18n', 'api', 'telosApi', 'evm', 'q-component-defaults'],
 
  // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
  css: ['fonts/silka/silka.css', 'app.sass'],

src/boot/i18n.js

@@ -0,0 +1,16 @@
+import { boot } from 'quasar/wrappers';
+import { createI18n } from 'vue-i18n';
+import messages from 'src/i18n';
+
+export default boot(({ app }) => {
+ const i18n = createI18n({
+ // locale: 'en-us',
+ locale: 'es-es',
+ globalInjection: true,
+ messages,
+ });
+
+ // Set i18n instance on app
+ app.use(i18n);
+ // app.config.globalProperties.$t = i18n?;
+});

src/components/ConfirmationDialog.vue

@@ -62,5 +62,5 @@ q-dialog( v-model="showDialog" persistent)
  span.q-ml-sm {{ dialogMessage }}
  q-card-actions(align="right")
  q-btn(flat label="Dismiss" color="primary" v-close-popup)
- q-btn(v-if="!status" flat label="Verify Contract" color="primary" v-close-popup @click="navigate")
+ q-btn(v-if="!status" flat :label="$t('components.verify_contract')" color="primary" v-close-popup @click="navigate")
 </template>

src/components/ConnectButton.vue

@@ -128,7 +128,7 @@ export default {
  } catch (e) {
  this.$q.notify({
  position: 'top',
- message: `Search for EVM address linked to ${accountName} native account failed. You can create one at wallet.telos.net`,
+ message: this.$t('components.search_evm_address_failed', {accountName}),
  timeout: 6000,
  });
  wallet.logout();
@@ -245,7 +245,7 @@ export default {
  <q-btn
  v-if="!isLoggedIn"
  id="c-connect-button__login-button"
- label="Connect Wallet"
+ :label="$t('components.connect_wallet')"
  @click="connect"
  />
 
@@ -258,12 +258,12 @@ export default {
  <q-list>
  <q-item clickable v-close-popup @click="goToAddress()">
  <q-item-section>
- <q-item-label>View address</q-item-label>
+ <q-item-label>{{ $t('components.view_address') }}</q-item-label>
  </q-item-section>
  </q-item>
  <q-item clickable v-close-popup @click="disconnect()">
  <q-item-section>
- <q-item-label>Disconnect</q-item-label>
+ <q-item-label>{{ $t('components.disconnect') }}</q-item-label>
  </q-item-section>
  </q-item>
  </q-list>
@@ -272,20 +272,25 @@ export default {
  <q-dialog v-model="showLogin">
  <q-card rounded class="c-connect-button__modal-inner">
  <q-tabs v-model="tab">
- <q-tab name="web3" label="EVM Wallets"></q-tab>
- <q-tab name="native" label="Advanced"></q-tab>
+ <q-tab name="web3" :label="$t('components.evm_wallets')"></q-tab>
+ <q-tab name="native" :label="$t('components.advanced')"></q-tab>
  </q-tabs>
  <q-separator/>
  <q-tab-panels v-model="tab" animated>
  <q-tab-panel name="web3">
  <q-card class="wallet-icon cursor-pointer" @click="injectedWeb3Login()">
  <q-img class="wallet-img" :src="metamaskLogo"></q-img>
- <p>{{ !browserSupportsMetaMask ? 'Continue on ' : '' }}Metamask</p>
+ <p>{{ !browserSupportsMetaMask ? $t('components.continue_on_metamask') : 'Metamask' }}</p>
  </q-card>
  </q-tab-panel>
  <q-tab-panel name="native">
- <p>Native wallets for <span class="text-red">advanced users</span>, or to recover assets sent to a native-linked address</p>
-
+ <p>
+ {{ $t('components.text1_native_wallets') }}
+ <span class="text-red">
+ {{ $t('components.text2_advanced_users') }}
+ </span>
+ {{ $t('components.text3_or_to_recover_assets') }}
+ </p>
  <div class="u-flex--center">
  <q-card
  class="cursor-pointer c-connect-button__image-container"

src/components/ContractTab/ContractTab.vue

@@ -11,19 +11,19 @@
  <q-btn-group>
  <q-btn
  :outline="codeSeleted"
- label="Code"
+ :label="$t('components.contract_tab.code')"
  push
  @click="source = true"
  />
  <q-btn
  :outline="readSelected"
- label="Read"
+ :label="$t('components.contract_tab.read')"
  push
  @click="source = false; write = false"
  />
  <q-btn
  :outline="writeSelected"
- label="Write"
+ :label="$t('components.contract_tab.write')"
  push
  @click="source = false; write = true"
  />

src/components/ContractTab/FunctionInterface.vue

@@ -13,26 +13,26 @@
  v-if="selectDecimals.value === 'custom'"
  v-model.number="customDecimals"
  type="number"
- label="Custom decimals"
+ :label="$t('components.contract_tab.custom_decimals')"
  @change="updateDecimals"
  />
  <q-input
  v-model="amountInput"
- label="Amount"
+ :label="$t('components.contract_tab.amount')"
  type="number"
  />
  <q-card-actions align="right">
  <q-btn
  v-close-popup
  flat="flat"
- label="Ok"
+ :label="$t('components.contract_tab.ok')"
  color="primary"
  @click="setAmount"
  />
  <q-btn
  v-close-popup
  flat="flat"
- label="Cancel"
+ :label="$t('components.contract_tab.cancel')"
  color="primary"
  @click="clearAmount"
  />
@@ -43,7 +43,7 @@
  <div v-if="abi.stateMutability === 'payable'" class="q-pb-md">
  <unsigned-int-input
  v-model="value"
- label="Value"
+ :label="$t('components.contract_tab.value')"
  name="value"
  size="256"
  required="true"
@@ -116,23 +116,6 @@ import {
 
 import TransactionField from 'components/TransactionField';
 
-const decimalOptions = [{
- label: '18 - TLOS/ETH/etc..',
- value: 18,
-}, {
- label: '9 - Gwei',
- value: 9,
-}, {
- label: '8 - BTC',
- value: 8,
-}, {
- label: '0 - Wei',
- value: 0,
-}, {
- label: 'Custom',
- value: 'custom',
-}];
-
 
 export default {
  name: 'FunctionInterface',
@@ -154,27 +137,46 @@ export default {
  default: null,
  },
  },
- data : () => ({
- loading: false,
- errorMessage: '',
- decimalOptions,
- result: null,
- hash: null,
- enterAmount: false,
- amountInput: 0,
- amountParam: null,
- amountDecimals: 0,
- selectDecimals: decimalOptions[0],
- customDecimals: 0,
- value: '0',
- inputModels: [],
- params: [],
- valueParam: {
- 'name': 'value',
- 'type': 'amount',
- 'internalType': 'amount',
- },
- }),
+ data : () => {
+ const decimalOptions = [{
+ label: '18 - TLOS/ETH/etc..',
+ value: 18,
+ }, {
+ label: '9 - Gwei',
+ value: 9,
+ }, {
+ label: '8 - BTC',
+ value: 8,
+ }, {
+ label: '0 - Wei',
+ value: 0,
+ }, {
+ label: this.$t('components.contract_tab.custom'),
+ value: 'custom',
+ }];
+
+ return {
+ loading: false,
+ errorMessage: '',
+ decimalOptions,
+ result: null,
+ hash: null,
+ enterAmount: false,
+ amountInput: 0,
+ amountParam: null,
+ amountDecimals: 0,
+ selectDecimals: decimalOptions[0],
+ customDecimals: 0,
+ value: '0',
+ inputModels: [],
+ params: [],
+ valueParam: {
+ 'name': 'value',
+ 'type': 'amount',
+ 'internalType': 'amount',
+ },
+ }
+ },
  computed: {
  ...mapGetters('login', [
  'address',

src/components/ContractTab/GenericContractInterface.vue

@@ -8,14 +8,14 @@
  class="text-negative"
  size="1.25rem"
  />
- This contract source has not been verified.
+
+ {{ $t('components.contract_tab.unverified_contract_source') }}
  </p>
  <p>
- Click <router-link :to="{ name: 'sourcify' }" :key="$route.path">
- here
+ <router-link :to="{ name: 'sourcify' }" :key="$route.path">
+ {{ $t('components.contract_tab.click_here') }}
  </router-link>
- to upload source files and verify this contract.
- Alternatively, you can interact with the contract using an arbitrary ABI:
+ {{ $t('components.contract_tab.upload_source_files') }}
  </p>
  </div>
  </div>
@@ -29,23 +29,23 @@
  :outline="selectedAbi === abiOptions.erc20"
  @click="selectedAbi = abiOptions.erc20"
  >
- Use ERC20 ABI
+ {{ $t('components.contract_tab.use_erc20_abi') }}
  </q-btn>
  <q-btn
  push
  no-caps
  :outline="selectedAbi === abiOptions.erc721"
  @click="selectedAbi = abiOptions.erc721"
  >
- Use ERC721 ABI
+ {{ $t('components.contract_tab.use_erc721_abi') }}
  </q-btn>
  <q-btn
  push
  no-caps
  :outline="selectedAbi === abiOptions.custom"
  @click="selectedAbi = abiOptions.custom"
  >
- ABI from JSON
+ {{ $t('components.contract_tab.abi_from_json') }}
  </q-btn>
  </q-btn-group>
  </div>
@@ -57,7 +57,7 @@
  v-model="customAbiDefinition"
  clearable
  name="custom-abi"
- label="Paste ABI JSON here"
+ :label="$t('components.contract_tab.paste_abi_json_here')"
  class="q-pb-lg"
  autocomplete="off"
  type="text"
@@ -66,7 +66,7 @@
  <template v-if="!!customAbiDefinition">
  <template v-if="customAbiIsValidJSON">
  <p class="q-mb-sm">
- ABI JSON Preview
+ {{ $t('components.contract_tab.abi_json_preview') }}
  </p>
  <JsonViewer
  :value="JSON.parse(customAbiDefinition)"
@@ -78,14 +78,14 @@
  v-if="!showAbiFunctions"
  class="text-negative"
  >
- Provided ABI is either invalid or contains no function definitions
+ {{ $t('components.contract_tab.provided_abi_invalid') }}
  </p>
  </template>
  <p
  v-else
  class="text-negative"
  >
- Provided JSON is invalid
+ {{ $t('components.contract_tab.provided_json_invalid') }}
  </p>
  </template>
  </div>
@@ -99,14 +99,14 @@
  :outline="displayWriteFunctions === false"
  @click="displayWriteFunctions = false"
  >
- Read functions
+ {{ $t('components.contract_tab.read_functions') }}
  </q-btn>
  <q-btn
  no-caps
  :outline="displayWriteFunctions === true"
  @click="displayWriteFunctions = true"
  >
- Write functions
+ {{ $t('components.contract_tab.write_functions') }}
  </q-btn>
  </q-btn-group>
 
@@ -225,7 +225,7 @@ export default {
  }
 
  this.contract = new Contract({
- name: 'Unverified contract',
+ name: this.$t('components.contract_tab.unverified_contract'),
  address: this.address,
  abi,
  manager: this.$contractManager,

src/components/CopyButton.vue

@@ -58,7 +58,7 @@ export default {
  return `${this.iconClass} q-pl-xs`;
  },
  defaultHint() {
- return `Copy ${this.description} to clipboard`;
+ return this.$t('components.copy_to_clipboard', {text: this.description});
  },
  },
  created() {

src/components/Health/Endpoints.vue

@@ -90,9 +90,9 @@ export default {
  q-item-label.q-mt-sm {{ endpoint.http }}
  q-item-section.full-width
  q-item-label(v-if="endpoint.latency" side top)
- span Latency: {{ endpoint.latency }}ms
+ span  {{ $t('components.health.latency') }}: {{ endpoint.latency }}ms
  q-icon(name="wifi" :color="getLatencyColor(endpoint.latency)")
- q-item-label(v-if="endpoint.block" side top ) Block height:&nbsp
+ q-item-label(v-if="endpoint.block" side top ) {{ $t('components.health.block_height') }}:&nbsp
  span(:class="getBlockClass(blockHeight, endpoint.block)") {{ endpoint.block }}
  q-item-label(v-if="endpoint.error" side top).text-red Error: {{ endpoint.error }}
 </template>