show update warning when user is using older versions #1393 (#1783)

src/config/AppConfig.ts

@@ -23,6 +23,7 @@ export interface LanguageConfig {
 export interface AppConfig {
     languages: LanguageConfig[];
     articlesFeedUrl: string;
+    repositoryDataUrl: string;
     constants: {
         EVENTS_THROTTLING_TIME: number;
         MAX_REMOTE_ACCOUNT_CHECKS: number;
@@ -60,6 +61,7 @@ const defaultAppConfig: AppConfig = {
     ],
     marketServerUrl: 'http://app.nemcn.io',
     articlesFeedUrl: 'https://symbol.github.io/symbol-rss-feeds/',
+    repositoryDataUrl: 'https://api.github.com/repos/symbol/desktop-wallet/releases/latest',
 };
 const resolvedAppConfig: AppConfig = window['appConfig'] || defaultAppConfig;
 console.log('appConfig resolved!', resolvedAppConfig);

src/language/en-US.json

@@ -1133,5 +1133,7 @@
     "lock_hash_algorithm": "Hash Algorithm",
     "not_enough_balance": "Not enough balance",
     "use_max_value": "Use maximum value",
-    "amount_value_cannot_start_with_zero": "Amount value cannot start with 0"
+    "amount_value_cannot_start_with_zero": "Amount value cannot start with 0",
+    "new_version_available": "A new version of Symbol wallet is available!",
+    "download_now": " Download now"
 }

src/language/ja-JP.json

@@ -1133,5 +1133,7 @@
     "lock_hash_algorithm": "ハッシュアルゴリズム",
     "not_enough_balance": "十分な残高がありません",
     "use_max_value": "最大値を使用",
-    "amount_value_cannot_start_with_zero": "総量を 0 から入力することはできません"
+    "amount_value_cannot_start_with_zero": "金額の値を0から始めることはできません",
+    "new_version_available": "シンボルウォレットの新しいバージョンが利用可能になりました！",
+    "download_now": " ダウンロード中"
 }

src/language/ru-RU.json

@@ -1130,7 +1130,10 @@
     "transaction_cosignature_warning_unknown_cosigner": "Вы собираетесь подписать транзакцию, созданную не вами.",
     "transaction_cosignature_warning_dont_sign": "Не подписывайте транзакцию, если вы не знаете её происхождение!",
     "transaction_cosignature_warning_proceed": "Я понимаю и хочу продолжить.",
-    "lock_hash_algorithm": "Алгоритм хеширования",
-    "not_enough_balance": "Недостаточный баланс",
-    "use_max_value": "Использовать максимальное значение"
+    "lock_hash_algorithm": "алгоритм хеширования",
+    "not_enough_balance": "не хватает баланса",
+    "use_max_value": "Используйте максимальное значение",
+    "amount_value_cannot_start_with_zero": "Значение суммы не может начинаться с 0",
+    "new_version_available": "Доступна новая версия кошелька Symbol!",
+    "download_now": " скачать сейчас"
 }

src/language/zh-CN.json

@@ -1133,5 +1133,7 @@
     "lock_hash_algorithm": "哈希算法",
     "not_enough_balance": "余额不足",
     "use_maximum_value": "使用最大值",
-    "amount_value_cannot_start_with_zero": "金额值不能以 0 开头"
+    "amount_value_cannot_start_with_zero": "金额值不能以 0 开头",
+    "new_version_available": "新版本的 Symbol 钱包可用!",
+    "download_now": " 现在就下载"
 }

src/services/VersionCheckerService.ts

@@ -0,0 +1,39 @@
+/*
+ * (C) Symbol Contributors 2021 (https://nem.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and limitations under the License.
+ *
+ */
+import { appConfig } from '@/config';
+import fetch from 'node-fetch';
+
+export type LatestVersionObject = {
+    versionTag: string;
+    downloadUrl: string;
+};
+
+export class VersionCheckerService {
+    /**
+     * Request github api for latest release
+     * @return {Promise<LatestVersionObject>}
+     */
+    public async getNewerVersionTag(): Promise<LatestVersionObject> {
+        const [versionTag, downloadUrl] = await fetch(appConfig.repositoryDataUrl)
+            .then((response) => response.json()) //Converting the response to a JSON object
+            .then((data) => [data.tag_name.substring(1), data.html_url])
+            .catch((error) => console.error(error));
+        if (!versionTag || !downloadUrl || versionTag === process.env.PACKAGE_VERSION) {
+            return;
+        }
+        return { versionTag, downloadUrl };
+    }
+}

src/views/pages/profiles/LoginPage.less

@@ -347,6 +347,24 @@
         bottom: 0.2rem;
         z-index: 3;
     }
+    .update-box {
+        background-color: #ffffcc;
+        position: relative;
+        margin-top: 0.05rem;
+        text-align: center;
+        height: 0.3rem;
+        width: 100%;
+        display: inline-block;
+        font-size: larger;
+        line-height: 0.3rem;
+        z-index: 10000;
+    }
+
+    .download-text-color {
+        position: relative;
+        color: @primary;
+        z-index: 10000;
+    }
 }
 
 .profile-name-input {

src/views/pages/profiles/LoginPage.vue

@@ -9,6 +9,12 @@
                 <img class="language_icon" :src="require('@/views/resources/img/login/language.svg')" alt="" />
                 <LanguageSelector />
             </div>
+
+            <div v-if="versionCheckerObject && !latestVersionInUse" class="update-box" role="alert">
+                <strong>{{ $t('new_version_available') }}</strong>
+                <a :href="downloadUrl" target="_blank" class="download-text-color">{{ $t('download_now') }}</a>
+            </div>
+
             <ValidationObserver v-slot="{ handleSubmit }" slim>
                 <form onsubmit="event.preventDefault()">
                     <div class="welcome-box">

src/views/pages/profiles/LoginPageTs.ts

@@ -39,6 +39,7 @@ import { AccountService } from '@/services/AccountService';
 import { NetworkTypeHelper } from '@/core/utils/NetworkTypeHelper';
 import { officialIcons } from '@/views/resources/Images';
 import _ from 'lodash';
+import { VersionCheckerService, LatestVersionObject } from '@/services/VersionCheckerService';
 @Component({
     computed: {
         ...mapGetters({
@@ -59,7 +60,9 @@ export default class LoginPageTs extends Vue {
      * Display the application version. This is injected in the app when built.
      */
     public packageVersion = process.env.PACKAGE_VERSION || '0';
-
+    public versionCheckerObject: LatestVersionObject = null;
+    public downloadUrl: string = '';
+    public latestVersionInUse: boolean = true;
     /**
      * All known profiles
      */
@@ -111,6 +114,20 @@ export default class LoginPageTs extends Vue {
     protected get profileNames(): string[] {
         return this.profiles.map((p) => p.profileName);
     }
+
+    public async mounted() {
+        if (navigator.onLine) {
+            const versionControlService = new VersionCheckerService();
+            this.versionCheckerObject = await versionControlService.getNewerVersionTag();
+            if (!this.versionCheckerObject) {
+                this.latestVersionInUse = true;
+            } else {
+                this.downloadUrl = this.versionCheckerObject.downloadUrl;
+                this.latestVersionInUse = false;
+            }
+        }
+    }
+
     /**
      * Hook called when the page is mounted
      * @return {void}