feat(ui): add translations to locales

packages/api/src/typeDefs.ts

@@ -14,6 +14,7 @@ const typeDefs = gql`
   type ResultRequest @entity {
     id: String! @id
     feedId: String! @column
+    address: String! @column
     result: String! @column
     label: String! @column
     requestId: String! @column

packages/api/test/feeds.spec.ts

@@ -185,15 +185,15 @@ describe('feeds', function () {
         }
       }
     `
-    const result2 = await state.testClient.query({
+    const {
+      data: { feed }
+    } = await state.testClient.query({
       query: GET_FEED,
       variables: {
         id: _id.toString()
       }
     })
 
-    const feed = result2.data.feed
-
     expect(feed).toHaveProperty('address', feedExample.address)
     expect(feed).toHaveProperty('name', feedExample.name)
     expect(feed).toHaveProperty('requests', feedExample.requests)

packages/ui/components/DataFeedDetails.vue

@@ -7,7 +7,10 @@
       <SvgIcon name="bitcoin" />
     </div>
     <Chart class="chart" :data="chartData" data-label="$" :name="feedName" />
-    <Fieldset :title="$t('contract_address')" class="contract-container">
+    <Fieldset
+      :title="$t('data_feed_details.contract_address')"
+      class="contract-container"
+    >
       <a
         :href="`https://rinkeby.etherscan.io/address/${feedAddress}#code`"
         target="_blank"

packages/ui/components/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="section-header">
-      <p class="section-title">{{ $t('data_feeds') }}</p>
+      <p class="section-title">{{ $t('main.data_feeds') }}</p>
       <!-- <Select
         :options="options"
         :default-option="selected"

packages/ui/components/NavBar.vue

@@ -11,7 +11,7 @@
         <ul class="tab-container" :class="{ visible: isMenuVisible }">
           <li class="tab" @mouseover="hover = true" @mouseleave="hover = false">
             <a class="tab" href="https://witnet.io" target="_blank">{{
-              $t('about')
+              $t('navbar.about')
             }}</a>
           </li>
           <li class="tab" @mouseover="hover = true" @mouseleave="hover = false">

packages/ui/components/TransactionsList.vue

@@ -1,20 +1,23 @@
 <template>
-  <Fieldset :title="$t('transactions')" class="transactions-container">
+  <Fieldset
+    :title="$t('transactions_list.transactions')"
+    class="transactions-container"
+  >
     <div class="collection collection-container">
       <li class="item-container blur">
         <div class="attribute-container links">
           <div class="attribute">
-            {{ $t('witnet_explorer') }}
+            {{ $t('transactions_list.witnet_explorer') }}
           </div>
           <div class="attribute">
-            {{ $t('etherscan') }}
+            {{ $t('transactions_list.etherscan') }}
           </div>
         </div>
         <div class="attribute-container values-time">
           <div class="attribute">
-            {{ $t('value') }}
+            {{ $t('transactions_list.value') }}
           </div>
-          <div class="attribute">{{ $t('time') }}</div>
+          <div class="attribute">{{ $t('transactions_list.time') }}</div>
         </div>
       </li>
       <Transaction

packages/ui/locales/en.json

@@ -1,10 +1,18 @@
 {
-    "transactions": "transactions",
-    "hero": {
-        "title": "Lorem ipsum dolor",
-        "text": {
-            "main": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. {0}, quis nostrud.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. {0}, quis nostrud.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. {0}, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. {0}, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. {0}, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. {0}, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. {0}, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. {0}, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. {0}, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. {0}, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. {0}, quis nostrud.",
-            "highlight": "Ut enim ad minim veniam"
-        }
-    }
+  "data_feed_details": {
+    "contract_address": "Contract address"
+  },
+  "main": {
+    "data_feeds": "Data feeds"
+  },
+  "navbar": {
+    "about": "About"
+  },
+  "transactions_list": {
+    "transactions": "Transactions",
+    "witnet_explorer": "Witnet Explorer",
+    "etherscan": "Etherscan",
+    "value": "Value",
+    "time": "Time"
+  }
 }

packages/ui/locales/es.json

@@ -1,10 +1,18 @@
 {
-    "transactions": "transacciones",
-    "hero": {
-        "title": "Lorem ipsum dolor",
-        "text": {
-            "main": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. {0}, quis nostrud.",
-            "highlight": "Ut enim ad minim veniam"
-        }
-    }
+  "data_feed_details": {
+    "contract_address": "Dirección del contrato"
+  },
+  "main": {
+    "data_feeds": "Data feeds"
+  },
+  "navbar": {
+    "about": "Sobre Witnet"
+  },
+  "transactions_list": {
+    "transactions": "Transacciones",
+    "witnet_explorer": "Witnet Explorer",
+    "etherscan": "Etherscan",
+    "value": "Resultado",
+    "time": "Tiempo"
+  }
 }

packages/ui/package.json

@@ -7,15 +7,16 @@
     "start": "nuxt start",
     "generate": "nuxt generate",
     "lint:js": "eslint --ext \".js,.vue\" . --fix",
+    "i18n:report": "yarn run vue-i18n-extract use-config",
     "lint:style": "stylelint \"**/*.{vue,css}\" --fix",
     "lint": "yarn lint:js && yarn lint:style"
   },
   "dependencies": {
     "@nuxtjs/apollo": "^4.0.1-rc.5",
     "@nuxtjs/style-resources": "^1.0.0",
     "core-js": "^3.8.3",
-    "lightweight-charts": "^3.3.0",
     "graphql-tag": "^2.12.4",
+    "lightweight-charts": "^3.3.0",
     "node-fetch": "^2.6.1",
     "node-sass": "^5.0.0",
     "nuxt": "^2.14.12",
@@ -31,6 +32,7 @@
     "@nuxtjs/eslint-module": "^3.0.2",
     "@nuxtjs/fontawesome": "^1.1.2",
     "@nuxtjs/stylelint-module": "^4.0.0",
-    "@nuxtjs/svg": "^0.1.12"
+    "@nuxtjs/svg": "^0.1.12",
+    "vue-i18n-extract": "^1.2.3"
   }
 }

packages/ui/utils/calculateTimeAgo.js

@@ -12,7 +12,7 @@ export function calculateTimeAgo(date, currentLocale) {
   const d = timestampLength < 13 ? date + '000' : date
   const currentDate = new Date(Number(d))
   const formatedTime = formatDistanceToNow(currentDate, {
-    addSuffix: false,
+    addSuffix: true,
     locale: LANGUAGES[currentLocale].fnsLocale,
   })
   return `${formatedTime}`

packages/ui/vue-i18n-extract.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  vueFilesPath: './components/**/*.?(js|vue)', // The Vue.js file(s) you want to extract i18n strings from. It can be a path to a folder or to a file. It accepts glob patterns. (ex. *, ?, (pattern|pattern|pattern)
+  languageFilesPath: './locales/**/*.json',
+  options: {
+    output: false, // false | string => Use if you want to create a json file out of your report. (ex. output.json)
+    add: true, // false|true => Use if you want to add missing keys into your json language files.
+    dynamic: false, // false |'ignore' |'report' => 'ignore' if you want to ignore dynamic keys false-positive. 'report' to get dynamic keys report.
+  },
+}

yarn.lock

@@ -6715,12 +6715,12 @@ commander@^2.19.0, commander@^2.20.0, commander@^2.20.3:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^4.1.1:
+commander@^4.0.0, commander@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
-commander@^6.2.0:
+commander@^6.1.0, commander@^6.2.0:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
@@ -7872,6 +7872,14 @@ dot-case@^3.0.4:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
+dot-object@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/dot-object/-/dot-object-2.1.4.tgz#c6c54e9fca510b4d0ea4d65acf33726963843b5f"
+  integrity sha512-7FXnyyCLFawNYJ+NhkqyP9Wd2yzuo+7n9pGiYpkmXCTYa8Ci2U0eUNDVg5OuO5Pm6aFXI2SWN8/N/w7SJWu1WA==
+  dependencies:
+    commander "^4.0.0"
+    glob "^7.1.5"
+
 dot-prop@^4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.1.tgz#45884194a71fc2cda71cbb4bceb3a4dd2f433ba4"
@@ -9494,7 +9502,7 @@ glob@7.1.5:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.1.7, glob@~7.1.1:
+glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.5, glob@^7.1.6, glob@^7.1.7, glob@~7.1.1:
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
   integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
@@ -10971,6 +10979,11 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
+is-valid-glob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-valid-glob/-/is-valid-glob-1.0.0.tgz#29bf3eff701be2d4d315dbacc39bc39fe8f601aa"
+  integrity sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao=
+
 is-whitespace-character@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
@@ -11554,7 +11567,7 @@ js-cookie@^2.2.1:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@^3.13.1:
+js-yaml@^3.13.1, js-yaml@^3.14.0:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
   integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
@@ -18524,6 +18537,17 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-i18n-extract@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/vue-i18n-extract/-/vue-i18n-extract-1.2.3.tgz#7a16bbce29d587476df0bad85c0f9453b5bcfcbe"
+  integrity sha512-ZLtF6wp732KHKawHx5ZSmjyydkli9g26z0NfGLP89DkiGx4nKFYZ2oIH35HtImdhcfq1zqkeSwxs7kRzarLoVw==
+  dependencies:
+    commander "^6.1.0"
+    dot-object "^2.1.4"
+    glob "^7.1.6"
+    is-valid-glob "^1.0.0"
+    js-yaml "^3.14.0"
+
 vue-i18n@^8.24.4:
   version "8.24.4"
   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.24.4.tgz#b158614c1df7db183d9cadddbb73e1d540269492"