297 spanish translation

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,8 @@ 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`,
+ harcoded_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 +246,8 @@ export default {
  <q-btn
  v-if="!isLoggedIn"
  id="c-connect-button__login-button"
- label="Connect Wallet"
+ hardcoded_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/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/HomeInfo.vue

@@ -46,7 +46,7 @@ export default {
  img(:src="exchangeImage" width="40")
  .col-8.q-pl-sm
  .col-12
- .column.text-subtitle2 TLOS Price
+ .column.text-subtitle2 {{ $t('components.tlos_price') }}
  .col-12
  .column.text-h6.text-weight-bold
  | $ {{ tlosPrice }}
@@ -69,7 +69,7 @@ export default {
  .col-8.q-pl-sm
  .col-12
  .column.text-subtitle2
- | Latest Block
+ | {{ $t('components.latest_block') }}
  .col-12
  .column.text-h6.text-weight-bold
  | {{ latestBlock }}

src/components/MethodField.vue

@@ -58,7 +58,7 @@ div
  | {{ trx.parsedTransaction.name }}
  span(v-else :class="shortenSignature && 'clickable'")
  span(v-if="!expand" v-on:click="shortenSignature && toggle()" clickable) {{trx.input_data.length > 10 && shortenSignature ? `${trx.input_data.slice(0,10)}` : trx.input_data}}
- q-tooltip( v-if="shortenSignature && !expand") Click to expand the function signature
+ q-tooltip( v-if="shortenSignature && !expand") {{ $t('components.click_to_expand') }}
  span( v-if="shortenSignature && expand" anchor="center middle" class="word-break" self="center middle" v-on:click="toggle()")
  | {{ trx.input_data }}
 </template>

src/components/Search.vue

@@ -54,7 +54,7 @@ export default {
 
  this.$q.notify({
  position: 'top',
- message: `Search for EVM address linked to ${this.searchTerm} native account failed.`,
+ message: this.$t('components.search_evm_failed', { search_term: this.searchTerm }),
  timeout: this.TIME_DELAY,
  });
  return;
@@ -66,7 +66,7 @@ export default {
 
  this.$q.notify({
  position: 'top',
- message: 'Search failed, please enter a valid search term.',
+ message: this.$t('components.search_failed'),
  timeout: this.TIME_DELAY,
  });
  },

src/components/TokenList.vue

@@ -102,7 +102,7 @@ export default {
  <address-field :address="address" class="q-mb-sm"/>
  <div class="q-mb-sm">
  <span class="q-pr-xs">
- Balance:
+ {{ $t('components.balance') }}
  </span>
  <span v-if="balance === '0.0000'">
  {{ '< 0.0001 ' + symbol }}
@@ -121,7 +121,7 @@ export default {
  :aria-label="`Launch MetaMask dialog to add ${symbol}`"
  @click="promptAddToMetamask(address, symbol, logoURI, type, decimals)"
  >
- Add {{ symbol }} to MetaMask
+ {{ $t('components.add_to_metamask', { symbol }) }}
  </span>
  </div>
  </q-card-section>

src/components/Transaction/ERCTransferList.vue

@@ -44,13 +44,13 @@ div(class="fit row wrap justify-start items-start content-start")
  div(v-for="transfer in transfers" class="fit row wrap justify-start items-start content-start")
  div(class="col-4")
  q-icon(name="arrow_right" class="list-arrow")
- strong {{ `From : ` }}
+ strong {{ $t('components.transaction.form_from') }}
  <AddressField :highlight="trxFrom === transfer.from && transfers.length > 1" :address="transfer.from" :truncate="15" copy :name="contract && transfer.from === contract.address && contract.name ? contract.name : null" />
  div(class="col-3")
- strong {{ ` To : ` }}
+ strong {{ $t('components.transaction.form_to') }}
  <AddressField :highlight="trxFrom === transfer.to && transfers.length > 1" :address="transfer.to" :truncate="15" copy :name="contract && transfer.to === contract.address && contract.name ? contract.name : null" />
  div.flex(v-if="type === 'ERC721' || type==='ERC1155'" class="col-4")
- strong.col-2 {{ ` Token : ` }}
+ strong.col-2 {{$t('components.transaction.form_token') }}
  router-link(:to="'/address/' + transfer.token.address" class="q-ml-xs") {{ transfer.token.symbol }}
  div.col
  span(v-if="transfer.tokenId.length > 15")
@@ -61,23 +61,23 @@ div(class="fit row wrap justify-start items-start content-start")
  span(v-if="type==='ERC1155'")
  a(clickable :href="'/address/' + transfer.token.address" target="_blank")
  q-icon(name="library_books" size="14px" class="q-pb-sm q-ml-xs")
- q-tooltip Consult collection
+ q-tooltip {{ $t('components.transaction.consult_collection') }}
  span(class="word-break" v-if="transfer.token.metadata")
  span
  a(clickable :href="transfer.token.metadata" target="_blank")
  q-icon(name="description" size="14px" class="q-pb-sm q-ml-xs")
- q-tooltip Consult metadata
+ q-tooltip {{ $t('components.transaction.consult_metadata') }}
  span
  a(v-if="transfer.token.image" clickable :href="transfer.token.image" target="_blank" class="q-pl-xs")
  q-icon(name="image" size="14px" class="q-pb-sm q-ml-xs")
- q-tooltip Consult media
+ q-tooltip {{ $t('components.transaction.consult_media') }}
  div(v-else class="col-5")
- strong {{ ` Token : ` }}
+ strong {{$t('components.transaction.form_token') }}
  span.clickable(@click="transfer.showWei = !transfer.showWei")
  span(v-if="transfer.showWei") {{ BigNumber.from(transfer.value) }}
- q-tooltip Show total
+ q-tooltip {{ $t('components.transaction.show_total') }} 
  span(v-else) {{ formatWei(transfer.value, transfer.token.decimals) }}
- q-tooltip Show wei
+ q-tooltip {{ $t('components.transaction.show_wei') }}
  router-link(:to="`/address/${transfer.token.address}`" class="q-ml-xs")
  span
  span {{ transfer.token.symbol.slice(0, 10) }}

src/components/Transaction/FragmentListElement.vue

@@ -7,7 +7,7 @@
  {{ fragment.name }}
  </strong>
  <strong v-else>
- Unknown ({{ fragment.sig }})
+ {{ $t('components.transaction.unknown') }} ({{ fragment.sig }})
  </strong>
  </span>
  <small v-if="fragment.contract">
@@ -110,7 +110,7 @@
  <div v-if="fragment.value">
  <div class="fit row justify-start items-start content-start">
  <div class="col-4">
- value (uint256):
+ {{ $t('components.transaction.value_uint256') }}
  </div>
  <div class="col-8">
  {{ fragment.value }} TLOS

src/components/Transaction/InternalTxns.vue

@@ -4,9 +4,6 @@ import FragmentList from './FragmentList.vue'
 import { WEI_PRECISION, formatWei } from 'src/lib/utils';
 import { BigNumber } from 'ethers';
 
-const TLOS_TRANSFER = 'TLOS Transfer';
-const CONTRACT_DEPLOYMENT = 'Contract Deployment';
-
 export default {
  name: 'InternalTxns',
  components: {
@@ -38,14 +35,14 @@ export default {
  let itx = this.itxs[k];
  let contract = await this.getContract(itx.to);
  let fnsig = itx.input.slice(0, 8);
- let name = 'Unknown';
+ let name = this.$t('components.transaction.unknown');
  let inputs, outputs, args = false;
  if(itx.type === 'create'){
- name = CONTRACT_DEPLOYMENT;
+ name = this.$t('components.transaction.contract_deployment');
  } else if (fnsig){
- name = 'Unknown (' + '0x' + fnsig + ')';
+ name = this.$t('components.transaction.unknown') + ' (' + '0x' + fnsig + ')';
  } else if (itx.value){
- name = TLOS_TRANSFER;
+ name = this.$t('components.transaction.tlos_transfer');
  }
  if(itx.traceAddress.length < 2){
  itx.index = i;
@@ -97,7 +94,7 @@ export default {
  <div v-if="itxs.length === 0" class="row">
  <div class="col-12 flex items-center justify-center">
  <q-icon class="fa fa-info-circle" size="md" />
- <h5 class="text-center q-ma-md">No internal transactions found</h5>
+ <h5 class="text-center q-ma-md"> {{ $t('components.transaction.no_internal_trxs_found') }}</h5>
  </div>
  </div>
  <div v-else class="row">
@@ -108,7 +105,7 @@ export default {
  color="secondary"
  size="lg"
  />
- Human-readable
+ {{ $t('components.transaction.human_readable') }}
  </div>
  <div class="col-12">
  <FragmentList

src/components/Transaction/LogsViewer.vue

@@ -3,7 +3,7 @@
  <div v-if="logs.length === 0" class="row">
  <div class="col-12 u-flex--center">
  <q-icon class="fa fa-info-circle q-mr-md" size="md" />
- <h5>No logs found</h5>
+ <h5>{{ $t('components.transaction.no_logs_found') }}</h5>
  </div>
  </div>
  <div v-else class="row">
@@ -14,10 +14,12 @@
  color="secondary"
  size="lg"
  />
- Human-readable
+ {{ $t('components.transaction.human_readable') }}
  <small v-if="!allVerified">
  <q-icon name="info" class="q-mb-xs q-ml-xs" size="14px"/>
- <q-tooltip>Verify the related contract for each log to see its human readable version</q-tooltip>
+ <q-tooltip>
+ {{ $t('components.transaction.verify_related_contract') }}
+ </q-tooltip>
  </small>
  </div>
  <div class="col-12">

src/components/TransactionTable.vue

@@ -10,37 +10,37 @@ import { TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures';
 const columns = [
  {
  name: 'hash',
- label: 'TX Hash',
+ label: this.$('components.tx_hash'),
  align: 'left',
  },
  {
  name: 'block',
- label: 'Block',
+ label: this.$('components.block'),
  align: 'left',
  },
  {
  name: 'date',
- label: 'Date',
+ label: this.$('components.date'),
  align: 'left',
  },
  {
  name: 'method',
- label: 'Method',
+ label: this.$('components.method'),
  align: 'left',
  },
  {
  name: 'from',
- label: 'From',
+ label: this.$('components.from'),
  align: 'left',
  },
  {
  name: 'to',
- label: 'To / Interacted with',
+ label: this.$('components.to_interacted_with'),
  align: 'left',
  },
  {
  name: 'value',
- label: 'Value / Transfer',
+ label: this.$('components.value_transfer'),
  align: 'left',
  },
 ];