incorporation localization of texts using of the library i18n

package.json

@@ -41,6 +41,7 @@
  "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",

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,14 @@
+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',
+ globalInjection: true,
+ messages,
+ });
+
+ // Set i18n instance on app
+ app.use(i18n);
+});

src/components/ConfirmationDialog.vue

@@ -1,6 +1,4 @@
 <script>
-const VIEW_SOURCE_PROMPT = 'This contract has been verified. You can view the source code & metadata in the \'contract\' tab';
-const VERIFY_PROMPT = 'This contract has not been verified. Would you like to upload the contract(s) and metadata to verify source now?';
 
 export default {
  name: 'ConfirmationDialog',
@@ -24,9 +22,13 @@ export default {
  showDialog: false,
  icon: 'warning',
  color: 'text-negative',
- dialogMessage: VERIFY_PROMPT,
+ dialogMessage: '',
  }
  },
+ async created() {
+ // initialization of the translated texts
+ this.dialogMessage = this.$t('components.verify_prompt');
+ },
  watch: {
  flag(val){
  this.showDialog = val;
@@ -35,11 +37,11 @@ export default {
  if (val) {
  this.icon = 'verified';
  this.color = 'text-positive';
- this.dialogMessage = VIEW_SOURCE_PROMPT;
+ this.dialogMessage = this.$t('components.view_source_prompt');
  }else{
  this.icon = 'warning',
  this.color = 'text-negative',
- this.dialogMessage = VERIFY_PROMPT;
+ this.dialogMessage = this.$t('components.verify_prompt');
  }
  },
  showDialog(val){
@@ -61,6 +63,6 @@ q-dialog( v-model="showDialog" persistent)
  q-icon(:name='icon' :class='color' size='1.25rem' text-color="white")
  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(flat :label="$t('components.dismiss')" color="primary" v-close-popup)
+ q-btn(v-if="!status" flat :label="$t('components.verify_contract')" color="primary" v-close-popup @click="navigate")
 </template>

src/components/ConnectButton.vue

@@ -7,8 +7,6 @@ import { ethers } from 'ethers';
 import { WEI_PRECISION } from 'src/lib/utils';
 import { tlos } from 'src/lib/logos';
 
-const providersError = 'More than one provider is active, disable additional providers.';
-const unsupportedError ='current EVM wallet provider is not supported.';
 const LOGIN_EVM = 'evm';
 const LOGIN_NATIVE = 'native';
 const PROVIDER_WEB3_INJECTED = 'injectedWeb3'
@@ -128,7 +126,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();
@@ -179,7 +177,11 @@ export default {
  window.ethereum :
  null
  if (!provider) {
- console.error(providersError, 'or', unsupportedError);
+ this.$q.notify({
+ position: 'top',
+ message: this.$t('components.no_provider_found'),
+ timeout: 6000,
+ }); 
  }
  return provider;
  },
@@ -245,7 +247,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 +260,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 +274,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

@@ -3,27 +3,27 @@
  <CopyButton
  v-if="abi"
  :text="abi"
- accompanying-text="Copy contract ABI JSON to clipboard"
+ :accompanying-text="$t('components.contract_tab.copy_abi_to_clipboard')"
  class="q-mb-md"
  />
  <br>
 
  <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

@@ -3,7 +3,7 @@
  <q-dialog v-model="enterAmount">
  <q-card class="amount-dialog">
  <div class="q-pa-md">
- <p>Select number of decimals and enter an amount, this will be entered for you into the function parameter as uint256</p>
+ <p>{{ $t('components.contract_tab.enter_amount') }}</p>
  <q-select
  v-model="selectDecimals"
  :options="decimalOptions"
@@ -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"
@@ -85,12 +85,12 @@
  {{ errorMessage }}
  </p>
  <div v-if="result" class="output-container">
- Result ({{ abi.outputs && abi.outputs.length > 0 ? abi.outputs[0].type : '' }}):
+ {{ $t('components.contract_tab.result') }} ({{ abi.outputs && abi.outputs.length > 0 ? abi.outputs[0].type : '' }}):
  <router-link v-if="abi?.outputs?.[0]?.type === 'address'" :to="`/address/${result}`" >{{ result }}</router-link>
  <template v-else>{{ result }}</template>
  </div>
  <div v-if="hash" class="output-container">
- View Transaction:&nbsp;
+ {{ $t('components.contract_tab.view_transaction') }}
  <transaction-field :transaction-hash="hash" />
  </div>
 </div>
@@ -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,50 @@ 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: '',
+ 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',
+ },
+ }
+ },
+ async created() {
+ // initialization of the translated texts
+ this.decimalOptions[4].label = this.$t('components.contract_tab.custom');
+ },
  computed: {
  ...mapGetters('login', [
  'address',