Merge branch 'frontend'

src/gui/qt-daemon/html/assets/i18n/en.json

@@ -96,6 +96,9 @@
     "REGISTER_ALIAS": "Register an alias",
     "DETAILS": "Details",
     "LOCK": "Lock",
+    "AVAILABLE_BALANCE": "Available <b>{{available}} {{currency}}<b/>",
+    "LOCKED_BALANCE": "Locked <b>{{locked}} {{currency}}<b/>",
+    "LOCKED_BALANCE_LINK": "What does that mean?",
     "TABS": {
       "SEND": "Send",
       "RECEIVE": "Receive",

src/gui/qt-daemon/html/assets/scss/base/_base.scss

@@ -385,6 +385,59 @@ input[type='checkbox'].style-checkbox {
   }
 }
 
+.balance-tooltip {
+  display: flex;
+  flex-direction: column;
+  font-size: 1.3rem;
+  padding: 1.3rem;
+
+  @include themify($themes) {
+    background: themed(tooltipBackgroundColor);
+    box-shadow: themed(tooltipShadow);
+    color: themed(mainTextColor);
+  }
+
+  &.ng-tooltip-top {
+    margin-top: -1rem;
+  }
+
+  &.ng-tooltip-bottom {
+    margin-top: 1rem;
+  }
+
+  &.ng-tooltip-left {
+    margin-left: -1rem;
+  }
+
+  &.ng-tooltip-right {
+    margin-left: 1rem;
+  }
+
+  .available {
+    margin-bottom: 1.7rem;
+
+    b {
+      font-weight: 600;
+    }
+  }
+
+  .locked {
+    margin-bottom: 0.7rem;
+
+    b {
+      font-weight: 600;
+    }
+  }
+
+  .link {
+    cursor: pointer;
+
+    @include themify($themes) {
+      color: themed(blueTextColor);
+    }
+  }
+}
+
 .modal {
 
   @include themify($themes) {

src/gui/qt-daemon/html/polyfills.js

@@ -649,7 +649,7 @@ module.exports = function (NAME, wrapper, methods, common, IS_MAP, IS_WEAK) {
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-var core = module.exports = { version: '2.6.1' };
+var core = module.exports = { version: '2.5.7' };
 if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef
 
 
@@ -5497,8 +5497,8 @@ __webpack_require__.r(__webpack_exports__);
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(/*! D:\Projects\Zano\src\gui\qt-daemon\html_source\src\polyfills.ts */"./src/polyfills.ts");
-module.exports = __webpack_require__(/*! D:\Projects\Zano\src\gui\qt-daemon\html_source\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\jit-polyfills.js */"./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js");
+__webpack_require__(/*! D:\zano_zano\src\gui\qt-daemon\html_source\src\polyfills.ts */"./src/polyfills.ts");
+module.exports = __webpack_require__(/*! D:\zano_zano\src\gui\qt-daemon\html_source\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\jit-polyfills.js */"./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js");
 
 
 /***/ })

src/gui/qt-daemon/html_source/package.json

@@ -6,10 +6,10 @@
     "start": "ng serve",
     "build": "ng build",
     "build --watch": "ng build --output-path \"C:\\Program Files\\Zano\\html/\" --watch",
+    "build --html": "ng build --output-path \"../html/\"",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e",
-    "copy": "copyfiles -u 1 dist/**/* \"C:\\Program Files\\Zano\\html/\""
+    "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
@@ -26,7 +26,6 @@
     "@ngx-translate/core": "^11.0.0",
     "@ngx-translate/http-loader": "^4.0.0",
     "angular-highcharts": "^7.0.2",
-    "copyfiles": "^2.1.0",
     "core-js": "^2.5.4",
     "highcharts": "^6.2.0",
     "idlejs": "^2.0.1",

src/gui/qt-daemon/html_source/src/app/_helpers/directives/modal-container/modal-container.component.html

@@ -3,7 +3,7 @@
     <i class="icon" [class.error]="type === 'error'" [class.success]="type === 'success'" [class.info]="type === 'info'"></i>
     <div class="message-container">
       <span class="title">{{title}}</span>
-      <span class="message">{{message}}</span>
+      <span class="message" [innerHTML]="message"></span>
     </div>
   </div>
   <button type="button" class="action-button" (click)="onClose()" #btn>OK</button>

src/gui/qt-daemon/html_source/src/app/_helpers/directives/tooltip.directive.ts

@@ -8,10 +8,11 @@ export class TooltipDirective {
 
   @HostBinding('style.cursor') cursor = 'pointer';
 
-  @Input('tooltip') tooltipTitle: string;
+  @Input('tooltip') tooltipInner: any;
   @Input() placement: string;
   @Input() tooltipClass: string;
-  @Input() delay: number;
+  @Input() timeout = 0;
+  @Input() delay = 0;
   tooltip: HTMLElement;
 
   removeTooltipTimeout;
@@ -39,11 +40,13 @@ export class TooltipDirective {
   }
 
   hide() {
-    this.renderer.setStyle(this.tooltip, 'opacity', '0');
-    this.removeTooltipTimeout = setTimeout(() => {
-      this.renderer.removeChild(document.body, this.tooltip);
-      this.tooltip = null;
-    }, this.delay);
+    this.removeTooltipTimeout = setTimeout( () => {
+      this.renderer.setStyle(this.tooltip, 'opacity', '0');
+      window.setTimeout(() => {
+        this.renderer.removeChild(document.body, this.tooltip);
+        this.tooltip = null;
+      }, this.delay);
+    }, this.timeout);
   }
 
   cancelHide() {
@@ -52,8 +55,12 @@ export class TooltipDirective {
   }
 
   create() {
-    this.tooltip = this.renderer.createElement('span');
-    this.renderer.appendChild(this.tooltip, this.renderer.createText(this.tooltipTitle));
+    if (typeof this.tooltipInner === 'string') {
+      this.tooltip = this.renderer.createElement('div');
+      this.tooltip.innerHTML = this.tooltipInner;
+    } else {
+      this.tooltip = this.tooltipInner;
+    }
     this.renderer.appendChild(document.body, this.tooltip);
     this.renderer.setStyle(document.body, 'position', 'relative');
     this.renderer.setStyle(this.tooltip, 'position', 'absolute');
@@ -66,16 +73,14 @@ export class TooltipDirective {
       this.placement = 'top';
       this.renderer.addClass(this.tooltip, 'ng-tooltip-top');
     }
-    if (this.delay !== null) {
-      this.renderer.setStyle(this.tooltip, 'opacity', '0');
-      this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`);
-      this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`);
-      this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.delay}ms`);
-      this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.delay}ms`);
-      window.setTimeout(() => {
-        this.renderer.setStyle(this.tooltip, 'opacity', '1');
-      }, 0);
-    }
+    this.renderer.setStyle(this.tooltip, 'opacity', '0');
+    this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.delay}ms`);
+    window.setTimeout(() => {
+      this.renderer.setStyle(this.tooltip, 'opacity', '1');
+    }, 0);
   }
 
   setPosition() {

src/gui/qt-daemon/html_source/src/app/_helpers/pipes/int-to-money.pipe.ts

@@ -12,8 +12,12 @@ export class IntToMoneyPipe implements PipeTransform {
     if (value === 0 || value === undefined) {
       return '0';
     }
+    let maxFraction = this.variablesService.digits;
+    if (args) {
+      maxFraction = parseInt(args, 10);
+    }
     const power = Math.pow(10, this.variablesService.digits);
-    let str = (value / power).toFixed(this.variablesService.digits);
+    let str = (value / power).toFixed(maxFraction);
     for (let i = str.length - 1; i >= 0; i--) {
       if (str[i] !== '0') {
         str = str.substr(0, i + 1);

src/gui/qt-daemon/html_source/src/app/history/history.component.html

@@ -13,8 +13,8 @@
     <tr *ngFor="let item of variablesService.currentWallet.history">
       <td>
         <div class="status" [class.send]="!item.is_income" [class.received]="item.is_income">
-          <ng-container *ngIf="variablesService.height_app - item.height <= 10 || item.height === 0 || (item.is_mining && item.height === 0)">
-            <div class="confirmation" tooltip="{{ 'HISTORY.STATUS_TOOLTIP' | translate : {'current': getHeight(item)/10, 'total': 10} }}" placement="bottom" tooltipClass="history-tooltip" delay="500">
+          <ng-container *ngIf="variablesService.height_app - item.height < 10 || (item.height === 0 && item.timestamp > 0) || (item.is_mining && item.height === 0)">
+            <div class="confirmation" tooltip="{{ 'HISTORY.STATUS_TOOLTIP' | translate : {'current': getHeight(item)/10, 'total': 10} }}" placement="bottom" tooltipClass="history-tooltip" [delay]="500">
               <div class="fill" [style.height]="getHeight(item) + '%'"></div>
             </div>
           </ng-container>

src/gui/qt-daemon/html_source/src/app/sidebar/sidebar.component.html

@@ -6,7 +6,7 @@
     <div class="sidebar-account" *ngFor="let wallet of variablesService.wallets" [class.active]="wallet?.wallet_id === walletActive" [routerLink]="['/wallet/' + wallet.wallet_id + '/history']">
       <div class="sidebar-account-row account-title-balance">
         <span class="title">{{wallet.name}}</span>
-        <span class="balance">{{wallet.unlocked_balance | intToMoney}} {{variablesService.defaultCurrency}}</span>
+        <span class="balance">{{wallet.unlocked_balance | intToMoney : '3' }} {{variablesService.defaultCurrency}}</span>
       </div>
       <div class="sidebar-account-row account-alias">
         <span>{{wallet.alias}}</span>

src/gui/qt-daemon/html_source/src/app/wallet/wallet.component.html

@@ -1,7 +1,7 @@
 <div class="header">
   <div>
     <h3>{{variablesService.currentWallet.name}}</h3>
-    <button (click)="openInBrowser()">
+    <button (click)="openInBrowser('zano.org')">
       <i class="icon account"></i>
       <span>{{ 'WALLET.REGISTER_ALIAS' | translate }}</span>
     </button>
@@ -22,7 +22,7 @@
   <i class="icon copy" (click)="copyAddress()"></i>
 </div>
 <div class="balance">
-  <span>{{variablesService.currentWallet.unlocked_balance | intToMoney}} {{variablesService.defaultCurrency}}</span>
+  <span [tooltip]="getTooltip()" [placement]="'bottom'" [tooltipClass]="'balance-tooltip'" [delay]="500" [timeout]="1000">{{variablesService.currentWallet.balance | intToMoney  : '3'}} {{variablesService.defaultCurrency}}</span>
   <span>$ {{variablesService.currentWallet.getMoneyEquivalent(variablesService.moneyEquivalent) | intToMoney | number : '1.2-2'}}</span>
 </div>
 <div class="tabs">

src/gui/qt-daemon/html_source/src/app/wallet/wallet.component.ts

@@ -2,6 +2,8 @@ import {Component, OnInit, OnDestroy, NgZone} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {VariablesService} from '../_helpers/services/variables.service';
 import {BackendService} from '../_helpers/services/backend.service';
+import {TranslateService} from '@ngx-translate/core';
+import {IntToMoneyPipe} from '../_helpers/pipes/int-to-money.pipe';
 
 @Component({
   selector: 'app-wallet',
@@ -61,7 +63,9 @@ export class WalletComponent implements OnInit, OnDestroy {
     private router: Router,
     private backend: BackendService,
     private variablesService: VariablesService,
-    private ngZone: NgZone
+    private ngZone: NgZone,
+    private translate: TranslateService,
+    private intToMoneyPipe: IntToMoneyPipe
   ) {
   }
 
@@ -90,8 +94,28 @@ export class WalletComponent implements OnInit, OnDestroy {
     this.backend.setClipboard(this.variablesService.currentWallet.address);
   }
 
-  openInBrowser() {
-    this.backend.openUrlInBrowser('zano.org');
+  getTooltip() {
+    let tooltip = document.createElement('div');
+    let available = document.createElement('span');
+    available.setAttribute('class', 'available');
+    available.innerHTML = this.translate.instant('WALLET.AVAILABLE_BALANCE', {available: this.intToMoneyPipe.transform(this.variablesService.currentWallet.unlocked_balance), currency: this.variablesService.defaultCurrency});
+    tooltip.appendChild(available);
+    let locked = document.createElement('span');
+    locked.setAttribute('class', 'locked');
+    locked.innerHTML = this.translate.instant('WALLET.LOCKED_BALANCE', {locked: this.intToMoneyPipe.transform(this.variablesService.currentWallet.balance - this.variablesService.currentWallet.unlocked_balance), currency: this.variablesService.defaultCurrency});
+    tooltip.appendChild(locked);
+    let link = document.createElement('span');
+    link.setAttribute('class', 'link');
+    link.innerHTML = this.translate.instant('WALLET.LOCKED_BALANCE_LINK');
+    link.addEventListener('click', () => {
+      this.openInBrowser('docs.zano.org/docs/locked-balance');
+    });
+    tooltip.appendChild(link);
+    return tooltip;
+  }
+
+  openInBrowser(link) {
+    this.backend.openUrlInBrowser(link);
   }
 
   ngOnDestroy() {

src/gui/qt-daemon/html_source/src/assets/i18n/en.json

@@ -96,6 +96,9 @@
     "REGISTER_ALIAS": "Register an alias",
     "DETAILS": "Details",
     "LOCK": "Lock",
+    "AVAILABLE_BALANCE": "Available <b>{{available}} {{currency}}<b/>",
+    "LOCKED_BALANCE": "Locked <b>{{locked}} {{currency}}<b/>",
+    "LOCKED_BALANCE_LINK": "What does that mean?",
     "TABS": {
       "SEND": "Send",
       "RECEIVE": "Receive",

src/gui/qt-daemon/html_source/src/assets/scss/base/_base.scss

@@ -385,6 +385,59 @@ input[type='checkbox'].style-checkbox {
   }
 }
 
+.balance-tooltip {
+  display: flex;
+  flex-direction: column;
+  font-size: 1.3rem;
+  padding: 1.3rem;
+
+  @include themify($themes) {
+    background: themed(tooltipBackgroundColor);
+    box-shadow: themed(tooltipShadow);
+    color: themed(mainTextColor);
+  }
+
+  &.ng-tooltip-top {
+    margin-top: -1rem;
+  }
+
+  &.ng-tooltip-bottom {
+    margin-top: 1rem;
+  }
+
+  &.ng-tooltip-left {
+    margin-left: -1rem;
+  }
+
+  &.ng-tooltip-right {
+    margin-left: 1rem;
+  }
+
+  .available {
+    margin-bottom: 1.7rem;
+
+    b {
+      font-weight: 600;
+    }
+  }
+
+  .locked {
+    margin-bottom: 0.7rem;
+
+    b {
+      font-weight: 600;
+    }
+  }
+
+  .link {
+    cursor: pointer;
+
+    @include themify($themes) {
+      color: themed(blueTextColor);
+    }
+  }
+}
+
 .modal {
 
   @include themify($themes) {