Wallet fixes #5 (3, 5, 6, 7, 9, 10, 11)

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

@@ -15,7 +15,7 @@
     "BACK": "Go back"
   },
   "BREADCRUMBS": {
-    "ADD_WALLET": "Add new wallet",
+    "ADD_WALLET": "Add wallet",
     "CREATE_WALLET": "Create new wallet",
     "SAVE_PHRASE": "Save your seed phrase",
     "OPEN_WALLET": "Open existing wallet",
@@ -30,7 +30,7 @@
   },
   "SIDEBAR": {
     "TITLE": "Wallets",
-    "ADD_NEW": "+ Add new",
+    "ADD_NEW": "+ Add",
     "ACCOUNT": {
       "STAKING": "Staking",
       "MESSAGES": "New offers/Messages",
@@ -109,6 +109,13 @@
     "DARK_THEME": "Dark theme",
     "WHITE_THEME": "White theme",
     "GRAY_THEME": "Grey theme",
+    "APP_LOCK": {
+      "TITLE": "Lock app after:",
+      "TIME1": "5 min",
+      "TIME2": "15 min",
+      "TIME3": "1 hour",
+      "TIME4": "Never"
+    },
     "MASTER_PASSWORD": {
       "TITLE": "Update master password",
       "OLD": "Old password",
@@ -145,7 +152,7 @@
     "LABEL_SEED_PHRASE": "Seed phrase",
     "SEED_PHRASE_HINT": "Click to reveal the seed phrase",
     "BUTTON_SAVE": "Save",
-    "BUTTON_REMOVE": "Remove wallet",
+    "BUTTON_REMOVE": "Close wallet",
     "FORM_ERRORS": {
       "NAME_REQUIRED": "Name is required.",
       "NAME_DUPLICATE": "Name is duplicate."
@@ -234,7 +241,7 @@
   },
   "HISTORY": {
     "STATUS": "Status",
-    "STATUS_TOOLTIP": "Approved {{current}}/{{total}}",
+    "STATUS_TOOLTIP": "Confirmations {{current}}/{{total}}",
     "SEND": "Send",
     "RECEIVED": "Received",
     "DATE": "Date",

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

@@ -546,6 +546,69 @@ input[type='checkbox'].style-checkbox {
   }
 }
 
+.ng-select {
+
+  &.lock-selection-select {
+    width: 100%;
+
+    .ng-select-container {
+      border: none;
+      border-radius: 0;
+      cursor: pointer;
+      font-size: 1.4rem;
+      outline: none;
+      padding: 0 1rem;
+      height: 4.2rem;
+
+      @include themify($themes) {
+        background-color: themed(inputBackgroundColor);
+        color: themed(mainTextColor);
+      }
+
+      .ng-value-container {
+        padding: 0;
+      }
+    }
+
+    .ng-dropdown-panel {
+      border: none;
+
+      @include themify($themes) {
+        background-color: themed(inputBackgroundColor);
+      }
+
+      .ng-dropdown-panel-items {
+
+        .ng-option {
+          font-size: 1.4rem;
+          padding: 1rem;
+
+          @include themify($themes) {
+            background-color: themed(inputBackgroundColor);
+            color: themed(mainTextColor);
+          }
+
+          &.ng-option-marked {
+
+            @include themify($themes) {
+              background-color: themed(selectHoverColor);
+              color: themed(mainTextColor);
+            }
+          }
+
+          &.ng-option-selected {
+
+            @include themify($themes) {
+              background-color: themed(selectSelectedColor);
+              color: themed(mainTextColor);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 app-modal-container {
 
   .modal {

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

@@ -22,6 +22,8 @@ $themes: (
     turquoiseButtonHoverColor: #52d9ea,
     transparentButtonBorderColor: #2b3644,
     inputBackgroundColor: #171e27,
+    selectHoverColor: rgba(58, 72, 90, 0.5),
+    selectSelectedColor: rgba(43, 54, 68, 0.5),
     switchBackgroundColor: #000000,
     accountBackgroundColor: rgba(43, 54, 68, 0.5),
     accountHoverBackgroundColor: rgba(58, 72, 90, 0.5),
@@ -66,6 +68,8 @@ $themes: (
     turquoiseButtonHoverColor: #43cee0,
     transparentButtonBorderColor: #2f3438,
     inputBackgroundColor: #292d31,
+    selectHoverColor: rgba(70, 76, 81, 0.5),
+    selectSelectedColor: rgba(37, 40, 43, 0.5),
     switchBackgroundColor: #000000,
     accountBackgroundColor: rgba(37, 40, 43, 0.5),
     accountHoverBackgroundColor: rgba(70, 76, 81, 0.5),
@@ -110,6 +114,8 @@ $themes: (
     turquoiseButtonHoverColor: #2bbdcf,
     transparentButtonBorderColor: #ebebeb,
     inputBackgroundColor: #e6e6e6,
+    selectHoverColor: rgba(240, 240, 240, 0.5),
+    selectSelectedColor: rgba(224, 224, 224, 0.5),
     switchBackgroundColor: #e0e0e0,
     accountBackgroundColor: rgba(30, 136, 229, 1),
     accountHoverBackgroundColor: rgba(240, 240, 240, 0.5),

src/gui/qt-daemon/html/assets/scss/layout/_sidebar.scss

@@ -138,16 +138,37 @@ app-sidebar {
       border-bottom: 0.2rem solid themed(sidebarBorderColor);
     }
 
-    button {
+    .wrap-button {
 
-      @include themify($themes) {
+      button {
-        color: themed(mainTextColor);
-      }
-
-      .icon {
 
         @include themify($themes) {
-          background-color: themed(blueTextColor);
+          color: themed(mainTextColor);
+        }
+
+        .icon {
+
+          @include themify($themes) {
+            background-color: themed(blueTextColor);
+          }
+        }
+      }
+
+      &.active {
+
+        button {
+
+          @include themify($themes) {
+            background-color: themed(accountBackgroundColor)!important;
+            color: themed(accountMainTextColor)!important;
+          }
+
+          .icon {
+
+            @include themify($themes) {
+              background-color: themed(accountIndicatorBackgroundColor)!important;
+            }
+          }
         }
       }
     }

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

@@ -23,6 +23,7 @@
     "@angular/platform-browser": "~7.0.0",
     "@angular/platform-browser-dynamic": "~7.0.0",
     "@angular/router": "~7.0.0",
+    "@ng-select/ng-select": "^2.16.2",
     "@ngx-translate/core": "^11.0.0",
     "@ngx-translate/http-loader": "^4.0.0",
     "angular-highcharts": "^7.0.2",

src/gui/qt-daemon/html_source/src/app/_helpers/services/variables.service.ts

@@ -29,6 +29,7 @@ export class VariablesService {
   public default_fee_big = new BigNumber('10000000000');
 
   public settings = {
+    appLockTime: 15,
     theme: '',
     language: 'en',
     default_path: '/',
@@ -48,7 +49,6 @@ export class VariablesService {
 
   public idle = new Idle()
     .whenNotInteractive()
-    .within(15)
     .do(() => {
       this.ngZone.run(() => {
         this.idle.stop();
@@ -96,13 +96,17 @@ export class VariablesService {
   }
 
   startCountdown() {
-    this.idle.start();
+    this.idle.within(this.settings.appLockTime).start();
   }
 
   stopCountdown() {
     this.idle.stop();
   }
 
+  restartCountdown() {
+    this.idle.within(this.settings.appLockTime).restart();
+  }
+
   public onContextMenu($event: MouseEvent): void {
     $event.target['contextSelectionStart'] = $event.target['selectionStart'];
     $event.target['contextSelectionEnd'] = $event.target['selectionEnd'];

src/gui/qt-daemon/html_source/src/app/app.module.ts

@@ -30,6 +30,7 @@ import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
 
 import { BackendService } from './_helpers/services/backend.service';
 import { ModalService } from './_helpers/services/modal.service';
@@ -109,6 +110,7 @@ Highcharts.setOptions({
     }),
     FormsModule,
     ReactiveFormsModule,
+    NgSelectModule,
     ChartModule,
     ContextMenuModule.forRoot()
   ],

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

@@ -35,7 +35,7 @@ export class MainComponent implements OnInit {
   }
 
   openInBrowser() {
-    this.backend.openUrlInBrowser('zano.org');
+    this.backend.openUrlInBrowser('docs.zano.org/v1.0/docs/how-to-create-wallet');
   }
 
 }

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

@@ -24,6 +24,25 @@
     </div>
   </div>
 
+  <div class="lock-selection">
+    <label class="lock-selection-title">{{ 'SETTINGS.APP_LOCK.TITLE' | translate }}</label>
+    <ng-select class="lock-selection-select"
+               [items]="appLockOptions"
+               bindValue="id"
+               bindLabel="name"
+               [(ngModel)]="variablesService.settings.appLockTime"
+               [clearable]="false"
+               [searchable]="false"
+               (change)="onLockChange()">
+      <ng-template ng-label-tmp let-item="item">
+        {{item.name | translate}}
+      </ng-template>
+      <ng-template ng-option-tmp let-item="item" let-index="index">
+        {{item.name | translate}}
+      </ng-template>
+    </ng-select>
+  </div>
+
   <form class="master-password" [formGroup]="changeForm" (ngSubmit)="onSubmitChangePass()">
 
     <span class="master-password-title">{{ 'SETTINGS.MASTER_PASSWORD.TITLE' | translate }}</span>
@@ -32,7 +51,7 @@
       <label for="old-password">{{ 'SETTINGS.MASTER_PASSWORD.OLD' | translate }}</label>
       <input type="password" id="old-password" formControlName="password"/>
       <div class="error-block" *ngIf="changeForm.controls['password'].invalid && (changeForm.controls['password'].dirty || changeForm.controls['password'].touched)">
-        <div *ngIf="changeForm.controls['password'].errors.required">
+        <div *ngIf="changeForm.controls['password'].errors['required']">
           {{ 'SETTINGS.FORM_ERRORS.PASS_REQUIRED' | translate }}
         </div>
       </div>
@@ -45,7 +64,7 @@
       <label for="new-password">{{ 'SETTINGS.MASTER_PASSWORD.NEW' | translate }}</label>
       <input type="password" id="new-password" formControlName="new_password"/>
       <div class="error-block" *ngIf="changeForm.controls['new_password'].invalid && (changeForm.controls['new_password'].dirty || changeForm.controls['new_password'].touched)">
-        <div *ngIf="changeForm.controls['new_password'].errors.required">
+        <div *ngIf="changeForm.controls['new_password'].errors['required']">
           {{ 'SETTINGS.FORM_ERRORS.PASS_REQUIRED' | translate }}
         </div>
       </div>
@@ -55,7 +74,7 @@
       <label for="confirm-password">{{ 'SETTINGS.MASTER_PASSWORD.CONFIRM' | translate }}</label>
       <input type="password" id="confirm-password" formControlName="new_confirmation"/>
       <div class="error-block" *ngIf="changeForm.controls['new_confirmation'].invalid && (changeForm.controls['new_confirmation'].dirty || changeForm.controls['new_confirmation'].touched)">
-        <div *ngIf="changeForm.controls['new_confirmation'].errors.required">
+        <div *ngIf="changeForm.controls['new_confirmation'].errors['required']">
           {{ 'SETTINGS.FORM_ERRORS.PASS_REQUIRED' | translate }}
         </div>
       </div>

src/gui/qt-daemon/html_source/src/app/settings/settings.component.scss

@@ -22,6 +22,21 @@
   }
 }
 
+.lock-selection {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 2.4rem 0;
+  width: 50%;
+
+  .lock-selection-title {
+    display: flex;
+    font-size: 1.5rem;
+    line-height: 2.7rem;
+    margin-bottom: 1rem;
+  }
+}
+
 .master-password {
   width: 50%;
 
@@ -42,6 +57,6 @@
 .last-build {
   position: absolute;
   bottom: 3rem;
-  right: 3rem;
+  left: 3rem;
-  font-size: 1.3rem;
+  font-size: 1rem;
 }

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

@@ -10,10 +10,29 @@ import {Location} from '@angular/common';
   styleUrls: ['./settings.component.scss']
 })
 export class SettingsComponent implements OnInit {
+
   theme: string;
   changeForm: any;
+  appLockOptions = [
+    {
+      id: 5,
+      name: 'SETTINGS.APP_LOCK.TIME1'
+    },
+    {
+      id: 15,
+      name: 'SETTINGS.APP_LOCK.TIME2'
+    },
+    {
+      id: 60,
+      name: 'SETTINGS.APP_LOCK.TIME3'
+    },
+    {
+      id: 0,
+      name: 'SETTINGS.APP_LOCK.TIME4'
+    }
+  ];
 
-  constructor(private renderer: Renderer2, private variablesService: VariablesService, private backend: BackendService, private location: Location) {
+  constructor(private renderer: Renderer2, public variablesService: VariablesService, private backend: BackendService, private location: Location) {
     this.theme = this.variablesService.settings.theme;
     this.changeForm = new FormGroup({
       password: new FormControl('', Validators.required),
@@ -49,6 +68,11 @@ export class SettingsComponent implements OnInit {
     }
   }
 
+  onLockChange() {
+    this.variablesService.restartCountdown();
+    this.backend.storeAppData();
+  }
+
   back() {
     this.location.back();
   }

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

@@ -38,14 +38,18 @@
   </div>
 </div>
 <div class="sidebar-settings">
-  <button [routerLink]="['/settings']" routerLinkActive="active">
+  <div class="wrap-button" routerLinkActive="active">
-    <i class="icon settings"></i>
+    <button [routerLink]="['/settings']">
-    <span>{{ 'SIDEBAR.SETTINGS' | translate }}</span>
+      <i class="icon settings"></i>
-  </button>
+      <span>{{ 'SIDEBAR.SETTINGS' | translate }}</span>
-  <button (click)="logOut()">
+    </button>
-    <i class="icon logout"></i>
+  </div>
-    <span>{{ 'SIDEBAR.LOG_OUT' | translate }}</span>
+  <div class="wrap-button">
-  </button>
+    <button (click)="logOut()">
+      <i class="icon logout"></i>
+      <span>{{ 'SIDEBAR.LOG_OUT' | translate }}</span>
+    </button>
+  </div>
 </div>
 <div class="sidebar-synchronization-status">
   <div class="status-container">

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

@@ -150,27 +150,32 @@
   flex: 0 0 auto;
   padding-bottom: 1rem;
 
-  button {
+  .wrap-button {
-    display: flex;
+    margin: 0 -3rem;
-    align-items: center;
-    background: transparent;
-    border: none;
-    line-height: 3rem;
-    outline: none;
-    padding: 0;
-    font-weight: 400;
 
-    .icon {
+    button {
-      margin-right: 1.2rem;
+      display: flex;
-      width: 1.7rem;
+      align-items: center;
-      height: 1.7rem;
+      background: transparent;
+      border: none;
+      font-weight: 400;
+      line-height: 3rem;
+      outline: none;
+      padding: 0 3rem;
+      width: 100%;
 
-      &.settings {
+      .icon {
-        mask: url(../../assets/icons/settings.svg) no-repeat center;
+        margin-right: 1.2rem;
-      }
+        width: 1.7rem;
+        height: 1.7rem;
 
-      &.logout {
+        &.settings {
-        mask: url(../../assets/icons/logout.svg) no-repeat center;
+          mask: url(../../assets/icons/settings.svg) no-repeat center;
+        }
+
+        &.logout {
+          mask: url(../../assets/icons/logout.svg) no-repeat center;
+        }
       }
     }
   }

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

@@ -15,7 +15,7 @@
     "BACK": "Go back"
   },
   "BREADCRUMBS": {
-    "ADD_WALLET": "Add new wallet",
+    "ADD_WALLET": "Add wallet",
     "CREATE_WALLET": "Create new wallet",
     "SAVE_PHRASE": "Save your seed phrase",
     "OPEN_WALLET": "Open existing wallet",
@@ -30,7 +30,7 @@
   },
   "SIDEBAR": {
     "TITLE": "Wallets",
-    "ADD_NEW": "+ Add new",
+    "ADD_NEW": "+ Add",
     "ACCOUNT": {
       "STAKING": "Staking",
       "MESSAGES": "New offers/Messages",
@@ -109,6 +109,13 @@
     "DARK_THEME": "Dark theme",
     "WHITE_THEME": "White theme",
     "GRAY_THEME": "Grey theme",
+    "APP_LOCK": {
+      "TITLE": "Lock app after:",
+      "TIME1": "5 min",
+      "TIME2": "15 min",
+      "TIME3": "1 hour",
+      "TIME4": "Never"
+    },
     "MASTER_PASSWORD": {
       "TITLE": "Update master password",
       "OLD": "Old password",
@@ -145,7 +152,7 @@
     "LABEL_SEED_PHRASE": "Seed phrase",
     "SEED_PHRASE_HINT": "Click to reveal the seed phrase",
     "BUTTON_SAVE": "Save",
-    "BUTTON_REMOVE": "Remove wallet",
+    "BUTTON_REMOVE": "Close wallet",
     "FORM_ERRORS": {
       "NAME_REQUIRED": "Name is required.",
       "NAME_DUPLICATE": "Name is duplicate."
@@ -234,7 +241,7 @@
   },
   "HISTORY": {
     "STATUS": "Status",
-    "STATUS_TOOLTIP": "Approved {{current}}/{{total}}",
+    "STATUS_TOOLTIP": "Confirmations {{current}}/{{total}}",
     "SEND": "Send",
     "RECEIVED": "Received",
     "DATE": "Date",

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

@@ -546,6 +546,69 @@ input[type='checkbox'].style-checkbox {
   }
 }
 
+.ng-select {
+
+  &.lock-selection-select {
+    width: 100%;
+
+    .ng-select-container {
+      border: none;
+      border-radius: 0;
+      cursor: pointer;
+      font-size: 1.4rem;
+      outline: none;
+      padding: 0 1rem;
+      height: 4.2rem;
+
+      @include themify($themes) {
+        background-color: themed(inputBackgroundColor);
+        color: themed(mainTextColor);
+      }
+
+      .ng-value-container {
+        padding: 0;
+      }
+    }
+
+    .ng-dropdown-panel {
+      border: none;
+
+      @include themify($themes) {
+        background-color: themed(inputBackgroundColor);
+      }
+
+      .ng-dropdown-panel-items {
+
+        .ng-option {
+          font-size: 1.4rem;
+          padding: 1rem;
+
+          @include themify($themes) {
+            background-color: themed(inputBackgroundColor);
+            color: themed(mainTextColor);
+          }
+
+          &.ng-option-marked {
+
+            @include themify($themes) {
+              background-color: themed(selectHoverColor);
+              color: themed(mainTextColor);
+            }
+          }
+
+          &.ng-option-selected {
+
+            @include themify($themes) {
+              background-color: themed(selectSelectedColor);
+              color: themed(mainTextColor);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 app-modal-container {
 
   .modal {

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

@@ -22,6 +22,8 @@ $themes: (
     turquoiseButtonHoverColor: #52d9ea,
     transparentButtonBorderColor: #2b3644,
     inputBackgroundColor: #171e27,
+    selectHoverColor: rgba(58, 72, 90, 0.5),
+    selectSelectedColor: rgba(43, 54, 68, 0.5),
     switchBackgroundColor: #000000,
     accountBackgroundColor: rgba(43, 54, 68, 0.5),
     accountHoverBackgroundColor: rgba(58, 72, 90, 0.5),
@@ -66,6 +68,8 @@ $themes: (
     turquoiseButtonHoverColor: #43cee0,
     transparentButtonBorderColor: #2f3438,
     inputBackgroundColor: #292d31,
+    selectHoverColor: rgba(70, 76, 81, 0.5),
+    selectSelectedColor: rgba(37, 40, 43, 0.5),
     switchBackgroundColor: #000000,
     accountBackgroundColor: rgba(37, 40, 43, 0.5),
     accountHoverBackgroundColor: rgba(70, 76, 81, 0.5),
@@ -110,6 +114,8 @@ $themes: (
     turquoiseButtonHoverColor: #2bbdcf,
     transparentButtonBorderColor: #ebebeb,
     inputBackgroundColor: #e6e6e6,
+    selectHoverColor: rgba(240, 240, 240, 0.5),
+    selectSelectedColor: rgba(224, 224, 224, 0.5),
     switchBackgroundColor: #e0e0e0,
     accountBackgroundColor: rgba(30, 136, 229, 1),
     accountHoverBackgroundColor: rgba(240, 240, 240, 0.5),

src/gui/qt-daemon/html_source/src/assets/scss/layout/_sidebar.scss

@@ -138,16 +138,37 @@ app-sidebar {
       border-bottom: 0.2rem solid themed(sidebarBorderColor);
     }
 
-    button {
+    .wrap-button {
 
-      @include themify($themes) {
+      button {
-        color: themed(mainTextColor);
-      }
-
-      .icon {
 
         @include themify($themes) {
-          background-color: themed(blueTextColor);
+          color: themed(mainTextColor);
+        }
+
+        .icon {
+
+          @include themify($themes) {
+            background-color: themed(blueTextColor);
+          }
+        }
+      }
+
+      &.active {
+
+        button {
+
+          @include themify($themes) {
+            background-color: themed(accountBackgroundColor)!important;
+            color: themed(accountMainTextColor)!important;
+          }
+
+          .icon {
+
+            @include themify($themes) {
+              background-color: themed(accountIndicatorBackgroundColor)!important;
+            }
+          }
         }
       }
     }

src/gui/qt-daemon/html_source/src/styles.scss

@@ -15,6 +15,8 @@
 @import 'assets/scss/modules/scroll';
 @import 'assets/scss/modules/table';
 
+@import "~@ng-select/ng-select/themes/default.theme.css";
+
 @font-face {
   font-family: OpenSans;
   src: url(~src/assets/fonts/OpenSans-Light.ttf);