Add internalization

package.json

@@ -31,6 +31,7 @@
     "process": "^0.11.10",
     "quasar": "^2.0.0",
     "random-word-slugs": "^0.1.6",
+    "vue-i18n": "9",
     "vue-router": "^4.0.0",
     "vue3-apexcharts": "^1.4.1"
   },

quasar.conf.js

@@ -21,7 +21,8 @@ module.exports = configure(function (ctx) {
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli/boot-files
     boot: [
-      'init.ts'
+      'init.ts',
+      '../i18n'
     ],
 
     // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css

src-tauri/Cargo.toml

@@ -66,7 +66,7 @@ features = [
 winreg = "0.10.1"
 
 [dependencies.tauri]
-features = ["clipboard-all", "dialog-all", "fs-all", "global-shortcut-all", "gtk-tray", "notification-all", "os-all", "path-all", "process-exit", "process-relaunch", "shell-all", "system-tray", "window-all", "updater"]
+features = ["clipboard-all", "dialog-all", "fs-all", "global-shortcut-all", "gtk-tray", "notification-all", "os-all", "path-all", "process-exit", "process-relaunch", "shell-all", "system-tray", "updater", "window-all"]
 version = "1.0.0-rc.11"
 
 [features]

src/boot/init.ts

@@ -1,5 +1,7 @@
 import { boot } from 'quasar/wrappers'
 import VueApexCharts from "vue3-apexcharts";
+import { createI18n } from 'vue-i18n'
+import messages from '../i18n'
 import { globalState } from "../lib/global"
 import { Client } from "../lib/client"
 import { createApi } from '../lib/util';
@@ -19,12 +21,18 @@ export default boot(async ({ app }) => {
   await appConfig.init()
   const { nodeName } = (await appConfig.read());
   globalState.setNodeName(nodeName);
-  await globalState.loadLangData()
   const api = createApi(LOCAL_RPC);
   const client = new Client(api);
   const autoLauncher = new AutoLauncher();
   await autoLauncher.init();
   app.config.globalProperties.$client = client;
   app.config.globalProperties.$autoLauncher = autoLauncher;
   app.use(VueApexCharts)
+
+  const i18n = createI18n({
+    locale: 'en-US',
+    messages
+  });
+
+  app.use(i18n);
 })

src/components/SaveKeys.vue

@@ -3,7 +3,7 @@
   .row.justify-center.q-gutter-lg
     .col-auto
       q-icon(color="blue-3" name="vpn_key" size="80px")
-      p.q-ml-sm {{ lang.seedPhrase }}
+      p.q-ml-sm {{ $t('saveKeys.seedPhrase') }}
     .col
       .row.justify-center
         .col-8
@@ -21,30 +21,32 @@
               )
             .row.justify-center.q-mb-lg.full-width.bg-grey-2(v-if="!revealKey")
               q-btn.full-width.full-width(
-                :label="lang.reveal"
+                :label="$t('saveKeys.reveal')"
                 @click="revealKey = true"
                 flat
                 size="lg"
               )
           .row.justify-center.q-mt-md(v-if="revealKey")
             q-btn(
-              :label="lang.copy"
+              :label="$t('saveKeys.copy')"
               @click="copyMnemonic"
               color="primary"
               style="max-width: 200px"
             )
     .row
-      p Seed phrase is your password for your subspace farmer and wallet, this cannot be changed, guessed, or reset if lost. It is imperative that this is stored in a secure, safe location. Without the seed phrase, you will not have access to your funds. Furthermore, anyone who steals your seed phrase will be able to do as they please with your funds.
+      p {{ $t('saveKeys.seedPhraseText')}}
   .row.q-pt-md
-    q-checkbox(:label="lang.userConfirm" size="lg" v-model="userConfirm" :disable="!revealKey")
+    q-checkbox(
+      :label="$t('saveKeys.userConfirm')" 
+      size="lg" 
+      v-model="userConfirm" 
+      :disable="!revealKey"
+    )
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue"
 import { QInput, Notify } from "quasar"
-import { globalState as global } from "../lib/global"
-
-const lang = global.data.loc.text.saveKeys
 
 // @vue/component
 export default defineComponent({
@@ -54,7 +56,7 @@ export default defineComponent({
     const userConfirm = false
     const mnemonic = this.$client.getMnemonic()
     const revealKey = false
-    return { revealKey, userConfirm, lang, mnemonic }
+    return { revealKey, userConfirm, mnemonic }
   },
   watch: {
     userConfirm(val) {
@@ -76,7 +78,7 @@ export default defineComponent({
         var msg = successful ? "successful" : "unsuccessful"
         console.log(msg)
         this.revealKey = previousState
-        Notify.create({ message: lang.saved, icon: "content_copy" })
+        Notify.create({ message: this.$t('saveKeys.saved'), icon: "content_copy" })
       })
       return 3
     }

src/components/disclaimer.vue

@@ -5,13 +5,17 @@ q-dialog(@hide="onDialogHide" persistent ref="dialog")
   q-card
     q-card-section
       .row.items-center
-        .text-h6 TESTNET DISCLAIMER
+        .text-h6 {{ $t('disclaimer.title') }}
         q-space
         q-icon(color="grey" name="info" size="40px")
-    q-card-section.q-pt-none
-      | Tokens/credits generated on the Subspace Network testnet ("testSSCs") do not equate to Subspace Network mainnet tokens, have no monetary value, and cannot be exchanged for cash, cash equivalent, or other tokens or cryptocurrencies.
+    q-card-section.q-pt-none {{ $t('disclaimer.text') }}
     q-card-actions(align='right')
-      q-btn(flat='', label='I understand', color='primary', v-close-popup='')
+      q-btn(
+        flat='', 
+        :label="$t('disclaimer.confirm')", 
+        color='primary', 
+        v-close-popup=''
+      )
 
 </template>
 

src/components/farmedList.vue

@@ -4,14 +4,14 @@ q-card(bordered flat)
     .row.items-center
       .col-auto.q-mr-sm
         .row.items-center
-          .text-h6.text-weight-light {{ lang.farmedBlocks }}:
+          .text-h6.text-weight-light {{ $t('dashboard.farmedBlocks') }}:
       .col-auto.q-mr-xl
         h6 {{ farmedBlocksList?.length }}
       .col-auto.q-mr-xl
-        .text-weight-light Total Earned
-        p {{ farmedTotalEarned }} testSSC
+        .text-weight-light {{ $t('dashboard.totalEarned') }}
+        p {{ farmedTotalEarned }} {{ $t('dashboard.tokenName') }}
       .col-auto
-        .text-weight-light Reward Address
+        .text-weight-light {{ $t('dashboard.rewardAddress') }}
         .reward-address {{ rewardAddress }}
       q-space
       .col.col-auto
@@ -37,10 +37,10 @@ q-card(bordered flat)
 
   q-separator
   .row.q-pa-sm.q-ml-lg.q-ma-sm
-    .col-4 {{ lang.farmedBy }}
-    .col-3 {{ lang.blockNum }}
-    .col-3 {{ lang.time }}
-    .col-2 {{ lang.rewards }}
+    .col-4 {{ $t('dashboard.farmedBy') }}
+    .col-3 {{ $t('dashboard.blockNum') }}
+    .col-3 {{ $t('dashboard.time') }}
+    .col-2 {{ $t('dashboard.rewards') }}
   q-scroll-area(:style="blocksListStyle")
     transition-group(
       appear
@@ -57,6 +57,7 @@ q-card(bordered flat)
           .col-3
             p.text-weight-light {{ formatDate(block.time) }}
           .col-2
+            // remove hardcoded 
             p {{ block.blockReward }} testSSC
 </template>
 
@@ -69,8 +70,6 @@ import { globalState as global } from "../lib/global"
 import { FarmedBlock } from "../lib/types"
 import { appConfig } from "../lib/appConfig"
 
-const lang = global.data.loc.text.dashboard
-
 const NETWORK_RPC = process.env.PUBLIC_API_WS || "ws://localhost:9947";
 const appsLink = "https://polkadot.js.org/apps/?rpc=" + NETWORK_RPC + "#/explorer/query/"
 
@@ -82,7 +81,6 @@ export default defineComponent({
   emits: ["expand"],
   data() {
     return { 
-      lang, 
       util, 
       global: global.data, 
       rewardAddress: "", 

src/components/introModal.vue

@@ -2,35 +2,35 @@
 mixin page1
   .row.q-mb-md.items-center
     q-icon(color="blue-3" name="downloading" size="80px")
-    h6.q-ml-md What is Plotting, Farming, & Rewards
+    h6.q-ml-md {{ $t('introModal.title') }}
   //- .row.q-mb-md
   .row.q-mb-md
-    p Plotting is the process of assigning various "plots" aka tiny spots across the allocated storage of your hard drive. You can think of this as planting the seeds in a tilled field. Every plot is cryptographically independent, and verifiable, all of the plots are stored in a single file on your system.
+    p {{ $t('introModal.slide1.text1') }}
     br
-    p Farming is the act of checking with the current "challenge" of the blockchain and seeing if any of your plots will win the challenge, you can think of this as checking to see if your various crops are ripe for the picking.
+    p {{ $t('introModal.slide1.text2') }}
     br
-    p If your "fruit is ripe" aka if you have a plot that wins the current challenge then you are rewarded with subspace credits. aka "Winning the block".
+    p {{ $t('introModal.slide1.text3') }}
 mixin page2
   .row.justify-center.q-pb-md.items-center
     .col-auto.q-mr-md
       q-icon(color="yellow" name="lightbulb" size="100px")
     .col
       .row.q-mb-md
-        h6 Hints
+        h6 {{ $t('introModal.hints') }}
   .row.q-mb-md
     ul
       li
-        p Did you know Subspace is the first Proof of Capacity blockchain on Substrate?
+        p {{ $t('introModal.slide2.text1')}}
       li
-        p Did you know that Subspace stores all data On-Chain?
+        p {{ $t('introModal.slide2.text2')}}
       li
-        p You can talk with us on #[a(href="https://discord.gg/5MAp8CD684" target="_blank") Discord]
+        p {{ $t('introModal.slide2.talkWithUs')}} #[a(href="https://discord.gg/5MAp8CD684" target="_blank") Discord]
       li
-        p You can talk with us on #[a(href="https://t.me/subspace_network" target="_blank") Telegram]
+        p {{ $t('introModal.slide2.talkWithUs')}} #[a(href="https://t.me/subspace_network" target="_blank") Telegram]
       li
-        p Visit us on #[a(href="https://twitter.com/NetworkSubspace" target="_blank") Twitter]
+        p {{ $t('introModal.slide2.visitUs')}} #[a(href="https://twitter.com/NetworkSubspace" target="_blank") Twitter]
       li
-        p Read up about subspace on #[a(href="https://medium.com/subspace-network" target="_blank") Medium]
+        p {{ $t('introModal.slide2.readUp')}} #[a(href="https://medium.com/subspace-network" target="_blank") Medium]
 
 q-dialog(@hide="onDialogHide" persistent ref="dialog")
   q-card.q-dialog-plugin.relative-position(
@@ -55,7 +55,7 @@ q-dialog(@hide="onDialogHide" persistent ref="dialog")
           .row.justify-end
             q-btn(
               @click="currentPage++"
-              label="next"
+              :label="$t('introModal.next')"
               outline
               size="lg"
               stretch

src/components/mainMenu.vue

@@ -10,37 +10,32 @@ q-menu(auto-close)
             v-model="launchOnStart"
           )
         .col
-          p.text-grey(v-if="!launchOnStart") {{ lang.autoStart }}
-          p.text-black(v-else) {{ lang.autoStart }}
+          p.text-grey(v-if="!launchOnStart") {{ $t('menu.autoStart') }}
+          p.text-black(v-else) {{ $t('menu.autoStart') }}
     q-item(@click="exportLogs()" clickable)
       .row.items-center
         .col-auto.q-mr-md
           q-icon(name="print")
         .col
-          p {{ lang.export_log }}
+          p {{ $t('menu.export_log') }}
     q-item(@click="reset()" clickable)
       .row.items-center
         .col-auto.q-mr-md
           q-icon(color="red" name="refresh")
         .col
-          p.text-red {{ lang.reset }}
+          p.text-red {{ $t('menu.reset') }}
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue"
 import { Dialog, Notify } from "quasar"
 import { relaunch } from "@tauri-apps/api/process"
 import * as util from "../lib/util"
-import { globalState as global } from "../lib/global"
 import { open as shellOpen } from '@tauri-apps/api/shell'
 
-const lang = global.data.loc.text.mainMenu
-
-
 export default defineComponent({
   data() {
     return {
-      lang,
       util,
       launchOnStart: false,
       disableAutoLaunch: false
@@ -53,22 +48,22 @@ export default defineComponent({
     async toggleClicked() {
       if (this.disableAutoLaunch) {
         Notify.create({
-          message: "Launch on Boot is not supported on this system.",
+          message: this.$t('menu.autoLaunchNotSupported'),
           icon: "info"
         })
         return
       }
       console.log("toggle Clicked", this.launchOnStart)
       if (this.launchOnStart) {
         Notify.create({
-          message: lang.willAutoLaunch,
+          message: this.$t('menu.willAutoLaunch'),
           icon: "info",
           group: 1,
           badgeStyle: "visibility:hidden;"
         })
       } else {
         Notify.create({
-          message: lang.willNotAutoLaunch,
+          message: this.$t('menu.willNotAutoLaunch'),
           icon: "info",
           group: 1,
           badgeStyle: "visibility:hidden;"
@@ -84,12 +79,12 @@ export default defineComponent({
       Dialog.create({
         message: `
         <h6>
-          ${lang.reset_heading}
+          ${this.$t('menu.reset_heading')}
         </h6>
         <div style="height:10px;">
         </div>
         <p>
-         ${lang.reset_explanation}
+         ${this.$t('menu.reset_explanation')}
         </p>
         `,
         html: true,

src/components/mnemonicModal.vue

@@ -17,7 +17,7 @@ q-dialog(@hide="onDialogHide" persistent ref="dialog")
             q-btn(
               :disabled="!userConfirmed"
               @click="hide"
-              label="next"
+              :label="$t('plottingProgress.next')"
               outline
               size="lg"
               stretch

src/components/netCard.vue

@@ -3,7 +3,7 @@ q-card(bordered flat)
   .q-pa-sm
     .row.items-center
       q-icon.q-mr-sm(color="grey" name="settings_ethernet" size="40px")
-      h6.text-weight-light {{ lang.network }}
+      h6.text-weight-light {{ $t('dashboard.network') }}
     q-separator.q-mt-xs
     .row.items-center.q-mt-sm
       .col-auto.q-mr-md(v-if="network.state == 'finished'")
@@ -33,16 +33,13 @@ q-card(bordered flat)
 <script lang="ts" >
 import { defineComponent } from "vue"
 import * as util from "../lib/util"
-import { globalState as global } from "../lib/global"
-
-const lang = global.data.loc.text.dashboard
 
 export default defineComponent({
   props: {
     network: { type: Object, required: true }
   },
   data() {
-    return { lang, util }
+    return { util }
   }
 })
 </script>