Merge pull request #236 from stratisproject/ui

Various updates

Breeze.UI/package.json

 {
   "name": "breeze-ui",
   "description": "Graphical User Interface for Breeze Wallet.",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": {
     "name": "Pieterjan Vanhoof",
     "email": "pieterjan.vanhoof@stratisplatform.com"
@@ -14,26 +14,26 @@
     "stratis",
     "angular",
     "electron",
+    "typescript",
+    "scss",
     "bootstrap"
   ],
   "main": "main.js",
-  "angular-cli": {},
   "scripts": {
     "ng": "ng",
     "lint": "ng lint",
-    "start": "concurrently \"npm run start:webpack\" \"npm run electron:serve\"",
-    "start:webpack": "webpack --watch",
-    "start:web": "webpack-dev-server --content-base . --port 4200 --inline",
+    "start": "npm-run-all --parallel webpack:watch electron:serve",
+    "webpack:watch": "webpack --watch",
     "build:electron:main": "tsc main.ts --outDir dist && copyfiles package.json dist && cd dist && npm install --prod && cd ..",
     "build": "webpack --display-error-details && npm run build:electron:main",
-    "build:prod": "npm run build",
+    "build:prod": "cross-env NODE_ENV=production npm run build",
     "build:styling": "node-sass --output-style expanded --source-map true --precision 6 ./src/scss/bootstrap.scss ./src/styles.css",
     "electron:serve": "npm run build:electron:main && electron ./dist --serve",
     "electron:test": "electron ./dist",
     "electron:dev": "npm run build && electron ./dist",
     "electron:prod": "npm run build:prod && electron ./dist",
     "package:linux": "npm run build:prod && node package.js --platform=linux --arch=x64",
-    "package:windows": "npm run build:prod && node package.js --platform=win32 --arch=ia32",
+    "package:windows": "npm run build:prod && node package.js --asar --platform=win32 --arch=ia32",
     "package:mac": "npm run build:prod && node package.js --platform=darwin --arch=x64",
     "test": "karma start ./karma.conf.js",
     "pree2e": "webdriver-manager update --standalone false --gecko false --quiet && npm run build",
@@ -41,76 +41,76 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.4.1",
-    "@angular/common": "^4.4.1",
-    "@angular/compiler": "^4.4.1",
-    "@angular/core": "^4.4.1",
-    "@angular/forms": "^4.4.1",
-    "@angular/http": "^4.4.1",
-    "@angular/platform-browser": "^4.4.1",
-    "@angular/platform-browser-dynamic": "^4.4.1",
-    "@angular/platform-server": "^4.4.1",
-    "@angular/router": "^4.4.1",
-    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
-    "angular2-material-datepicker": "^0.5.0",
-    "bootstrap": "^4.0.0-beta",
-    "core-js": "^2.5.1",
-    "electron-context-menu": "^0.9.1",
-    "ngx-bootstrap": "^1.9.3",
-    "ngx-clipboard": "^8.0.4",
+    "@angular/animations": "4.4.3",
+    "@angular/common": "4.4.3",
+    "@angular/compiler": "4.4.3",
+    "@angular/core": "4.4.3",
+    "@angular/forms": "4.4.3",
+    "@angular/http": "4.4.3",
+    "@angular/platform-browser": "4.4.3",
+    "@angular/platform-browser-dynamic": "4.4.3",
+    "@angular/platform-server": "4.4.3",
+    "@angular/router": "4.4.3",
+    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
+    "angular2-material-datepicker": "0.5.0",
+    "bootstrap": "4.0.0-beta",
+    "core-js": "2.5.1",
+    "electron-context-menu": "0.9.1",
+    "enhanced-resolve": "3.3.0",
+    "ngx-clipboard": "8.1.0",
     "rxjs": "5.4.3",
-    "zone.js": "^0.8.17"
+    "zone.js": "0.8.17"
   },
   "devDependencies": {
-    "@angular/cli": "^1.4.2",
-    "@angular/compiler-cli": "^4.4.1",
-    "autoprefixer": "^7.1.4",
+    "@angular/cli": "1.4.3",
+    "@angular/compiler-cli": "4.4.3",
+    "@types/core-js": "0.9.36",
+    "@types/jasmine": "2.5.54",
+    "@types/node": "7.0.7",
+    "autoprefixer": "7.1.4",
     "codelyzer": "3.2.0",
-    "concurrently": "^3.5.0",
     "copyfiles": "1.2.0",
     "cross-env": "5.0.5",
-    "css-loader": "^0.28.7",
-    "cssnano": "^3.10.0",
-    "electron": "^1.7.6",
-    "electron-packager": "^8.7.2",
+    "css-loader": "0.28.7",
+    "cssnano": "3.10.0",
+    "electron": "1.7.8",
+    "electron-packager": "9.1.0",
     "electron-reload": "1.2.1",
-    "exports-loader": "^0.6.4",
-    "extract-zip": "1.6.5",
-    "file-loader": "^0.11.2",
+    "exports-loader": "0.6.4",
+    "file-loader": "0.11.2",
     "html-loader": "0.5.1",
-    "html-webpack-plugin": "2.30.1",
-    "istanbul-instrumenter-loader": "^3.0.0",
-    "jasmine-core": "~2.8.0",
-    "jasmine-spec-reporter": "~4.2.1",
+    "istanbul-instrumenter-loader": "3.0.0",
+    "jasmine-core": "2.8.0",
+    "jasmine-spec-reporter": "4.2.1",
     "jquery": "3.2.1",
-    "json-loader": "^0.5.7",
-    "karma": "~1.7.1",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.3.0",
-    "karma-electron": "^5.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-sourcemap-loader": "^0.3.7",
-    "less-loader": "^4.0.5",
+    "json-loader": "0.5.7",
+    "karma": "1.7.1",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-cli": "1.0.1",
+    "karma-coverage-istanbul-reporter": "1.3.0",
+    "karma-jasmine": "1.1.0",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "karma-sourcemap-loader": "0.3.7",
+    "less-loader": "4.0.5",
     "minimist": "1.2.0",
     "mkdirp": "0.5.1",
-    "node-sass": "^4.5.3",
-    "postcss-loader": "^1.3.3",
-    "postcss-url": "^6.0.4",
-    "protractor": "~5.1.2",
-    "raw-loader": "^0.5.1",
-    "sass-loader": "^6.0.6",
-    "script-loader": "^0.7.1",
-    "source-map-loader": "^0.2.1",
-    "style-loader": "^0.18.2",
-    "stylus-loader": "^3.0.1",
-    "ts-node": "~3.3.0",
-    "tslint": "~5.7.0",
+    "npm-run-all": "4.1.1",
+    "node-sass": "4.5.3",
+    "postcss-loader": "2.0.6",
+    "postcss-url": "7.1.2",
+    "protractor": "5.1.2",
+    "raw-loader": "0.5.1",
+    "sass-loader": "6.0.6",
+    "script-loader": "0.7.1",
+    "source-map-loader": "0.2.1",
+    "style-loader": "0.18.2",
+    "stylus-loader": "3.0.1",
+    "ts-node": "3.3.0",
+    "tslint": "5.7.0",
     "typescript": "2.5.2",
-    "url-loader": "^0.5.9",
+    "url-loader": "0.5.9",
     "webdriver-manager": "12.0.6",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "~2.8.2"
+    "webpack": "3.6.0",
+    "webpack-dev-server": "2.8.2"
   }
 }

Breeze.UI/postcss.config.js

+module.exports = {};
\ No newline at end of file

Breeze.UI/protractor.conf.js

@@ -4,7 +4,9 @@
 const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
-  allScriptsTimeout: 11000,
+  allScriptsTimeout: 25000,
+  getPageTimeout: 15000,
+  delayBrowserTimeInSeconds: 0,
   specs: [
     './e2e/**/*.e2e-spec.ts'
   ],
@@ -17,7 +19,7 @@ exports.config = {
   },
   directConnect: true,
   baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
+  framework: 'jasmine2',
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 30000,

Breeze.UI/src/app/app.component.ts

@@ -19,7 +19,7 @@ export class AppComponent implements OnInit {
   constructor(private router: Router, private apiService: ApiService, private titleService: Title) {}
   private errorMessage: any;
   private responseMessage: any;
-  private loading: boolean = true;
+  public loading: boolean = true;
 
   ngOnInit() {
     this.setTitle();

Breeze.UI/src/app/login/login.component.ts

@@ -18,7 +18,7 @@ export class LoginComponent implements OnInit {
   }
 
   private openWalletForm: FormGroup;
-  private hasWallet: boolean = false;
+  public hasWallet: boolean = false;
   private wallets: [string];
   private isDecrypting = false;
 

Breeze.UI/src/app/setup/create/create.component.ts

@@ -21,10 +21,10 @@ export class CreateComponent implements OnInit {
     this.buildCreateForm();
   }
 
-  private createWalletForm: FormGroup;
+  public createWalletForm: FormGroup;
   private newWallet: WalletCreation;
   private mnemonic: string;
-  private isCreating: Boolean = false;
+  public isCreating: boolean = false;
 
   ngOnInit() {
     this.getNewMnemonic();
@@ -95,11 +95,11 @@ export class CreateComponent implements OnInit {
     }
   };
 
-  private onBackClicked() {
+  public onBackClicked() {
     this.router.navigate(["/setup"]);
   }
 
-  private onCreateClicked() {
+  public onCreateClicked() {
     this.isCreating = true;
     if (this.mnemonic) {
       this.newWallet = new WalletCreation(

Breeze.UI/src/app/setup/recover/recover.component.ts

@@ -19,10 +19,10 @@ export class RecoverComponent implements OnInit {
 
   }
 
-  private recoverWalletForm: FormGroup;
-  private creationDate: Date;
+  public recoverWalletForm: FormGroup;
+  public creationDate: Date;
   private walletRecovery: WalletRecovery;
-  private isRecovering: Boolean = false;
+  public isRecovering: boolean = false;
 
   private responseMessage: string;
   private errorMessage: string;
@@ -86,11 +86,11 @@ export class RecoverComponent implements OnInit {
     },
   };
 
-  private onBackClicked() {
+  public onBackClicked() {
     this.router.navigate(["/setup"]);
   }
 
-  private onRecoverClicked(){
+  public onRecoverClicked(){
     this.isRecovering = true;
     this.walletRecovery = new WalletRecovery(
       this.recoverWalletForm.get("walletName").value,

Breeze.UI/src/app/setup/setup.component.ts

@@ -9,15 +9,15 @@ import { Router } from '@angular/router';
 })
 export class SetupComponent {
   constructor(private router: Router, private location: Location) {}
-  private onCreateClicked() {
+  public onCreateClicked() {
     this.router.navigate(['/setup/create']);
   }
 
-  private onRecoverClicked() {
+  public onRecoverClicked() {
     this.router.navigate(['/setup/recover']);
   }
 
-  private onBackClicked() {
+  public onBackClicked() {
     this.router.navigate(['']);
   }
 }

Breeze.UI/src/app/wallet/dashboard/dashboard.component.ts

@@ -21,9 +21,9 @@ import { Subscription } from 'rxjs/Subscription';
 export class DashboardComponent implements OnInit {
   constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal) {}
 
-  private confirmedBalance: number;
-  private unconfirmedBalance: number;
-  private transactions: any;
+  public confirmedBalance: number;
+  public unconfirmedBalance: number;
+  public transactions: any;
   private walletBalanceSubscription: Subscription;
   private walletHistorySubscription: Subscription;
 
@@ -35,15 +35,15 @@ export class DashboardComponent implements OnInit {
     this.cancelSubscriptions();
   };
 
-  private openSendDialog() {
+  public openSendDialog() {
     const modalRef = this.modalService.open(SendComponent);
   };
 
-  private openReceiveDialog() {
+  public openReceiveDialog() {
     const modalRef = this.modalService.open(ReceiveComponent);
   };
 
-  private openTransactionDetailDialog(transaction: any) {
+  public openTransactionDetailDialog(transaction: any) {
     const modalRef = this.modalService.open(TransactionDetailsComponent);
     modalRef.componentInstance.transaction = transaction;
   }

Breeze.UI/src/app/wallet/history/history.component.ts

@@ -20,7 +20,7 @@ import { TransactionDetailsComponent } from '../transaction-details/transaction-
 export class HistoryComponent {
   constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal) {}
 
-  private transactions: any;
+  public transactions: any;
   private errorMessage: string;
   private walletHistorySubscription: Subscription;
 

Breeze.UI/src/app/wallet/logout-confirmation/logout-confirmation.component.ts

@@ -10,12 +10,12 @@ import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
 })
 export class LogoutConfirmationComponent implements OnInit {
 
-  constructor(private activeModal: NgbActiveModal, private router: Router) { }
+  constructor(public activeModal: NgbActiveModal, private router: Router) { }
 
   ngOnInit() {
   }
 
-  private onLogout() {
+  public onLogout() {
     this.activeModal.close();
     this.router.navigate(['/login']);
   }

Breeze.UI/src/app/wallet/receive/receive.component.ts

@@ -16,15 +16,15 @@ import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 export class ReceiveComponent {
   constructor(private apiService: ApiService, private globalService: GlobalService, public activeModal: NgbActiveModal) {}
 
-  private address: any = "";
-  private copied: boolean = false;
+  public address: any = "";
+  public copied: boolean = false;
   private errorMessage: string;
 
   ngOnInit() {
     this.getUnusedReceiveAddresses();
   }
 
-  private onCopiedClick() {
+  public onCopiedClick() {
     this.copied = true;
   }
 

Breeze.UI/src/app/wallet/send/send-confirmation/send-confirmation.component.ts

@@ -14,7 +14,7 @@ export class SendConfirmationComponent implements OnInit {
   @Input() transaction: any;
   constructor(private globalService: GlobalService, public activeModal: NgbActiveModal) { }
 
-  private showDetails: boolean = false;
+  public showDetails: boolean = false;
   private coinUnit: string;
 
   ngOnInit() {

Breeze.UI/src/app/wallet/send/send.component.ts

@@ -21,12 +21,12 @@ export class SendComponent implements OnInit {
     this.buildSendForm();
   }
 
-  private sendForm: FormGroup;
+  public sendForm: FormGroup;
   private responseMessage: any;
   private errorMessage: string;
-  private coinUnit: string;
+  public coinUnit: string;
   private transaction: TransactionBuilding;
-  private isSending: Boolean = false;
+  public isSending: boolean = false;
 
   ngOnInit() {
     this.coinUnit = this.globalService.getCoinUnit();
@@ -84,7 +84,7 @@ export class SendComponent implements OnInit {
     }
   };
 
-  private send() {
+  public send() {
     this.isSending = true;
 
     this.transaction = new TransactionBuilding(

Breeze.UI/src/app/wallet/sidebar/sidebar.component.html

@@ -6,7 +6,7 @@
         <img src="../../../assets/images/ico_bitcoin.svg" alt="Bitcoin">
         <span class="bar"></span>
       </li>
-      <li (click)="loadStratisWallet()" [class.active]="!bitcoinActive">
+      <li (click)="loadStratisWallet()" [class.active]="stratisActive">
         <img src="../../../assets/images/ico_stratis.svg" alt="Stratis">
         <span class="bar"></span>
       </li>

Breeze.UI/src/app/wallet/sidebar/sidebar.component.ts

@@ -13,35 +13,36 @@ import { GlobalService } from '../../shared/services/global.service';
 export class SidebarComponent implements OnInit {
 
   constructor(private globalService: GlobalService, private router: Router, private modalService: NgbModal) { }
-  private bitcoinActive: Boolean;
+  public bitcoinActive: boolean;
+  public stratisActive: boolean;
 
   ngOnInit() {
     if (this.globalService.getCoinName() === "Bitcoin" || this.globalService.getCoinName() === "TestBitcoin") {
       this.bitcoinActive = true;
+      this.stratisActive = false;
     } else if (this.globalService.getCoinName() === "Stratis" || this.globalService.getCoinName() === "TestStratis") {
       this.bitcoinActive = false;
+      this.stratisActive = true;
     }
   }
 
-  private loadBitcoinWallet() {
-    this.toggleClass();
+  public loadBitcoinWallet() {
+    this.bitcoinActive = true;
+    this.stratisActive = false;
     this.globalService.setCoinName("TestBitcoin");
     this.globalService.setCoinUnit("TBTC");
     this.router.navigate(['/wallet']);
   }
 
-  private loadStratisWallet() {
-    this.toggleClass();
+  public loadStratisWallet() {
+    this.bitcoinActive = false;
+    this.stratisActive = true;
     this.globalService.setCoinName("TestStratis");
     this.globalService.setCoinUnit("TSTRAT");
     this.router.navigate(['/wallet/stratis-wallet']);
   }
 
-  private toggleClass(){
-    this.bitcoinActive = !this.bitcoinActive;
-  }
-
-  private logOut() {
+  public logOut() {
     const modalRef = this.modalService.open(LogoutConfirmationComponent);
   }
 }

Breeze.UI/src/app/wallet/status-bar/status-bar.component.ts

@@ -15,12 +15,12 @@ import { Subscription } from 'rxjs/Subscription';
 export class StatusBarComponent implements OnInit {
 
   private generalWalletInfoSubscription: Subscription;
-  private lastBlockSyncedHeight: number;
-  private chainTip: number;
+  public lastBlockSyncedHeight: number;
+  public chainTip: number;
   private isChainSynced: boolean;
-  private connectedNodes: number = 0;
+  public connectedNodes: number = 0;
   private percentSyncedNumber: number = 0;
-  private percentSynced: string;
+  public percentSynced: string;
 
   constructor(private apiService: ApiService, private globalService: GlobalService) { }
 

Breeze.UI/src/app/wallet/transaction-details/transaction-details.component.ts

@@ -12,12 +12,12 @@ export class TransactionDetailsComponent implements OnInit {
   @Input() transaction;
   constructor(public activeModal: NgbActiveModal) {}
 
-  private copied: boolean = false;
+  public copied: boolean = false;
 
   ngOnInit() {
   }
 
-  private onCopiedClick() {
+  public onCopiedClick() {
     this.copied = true;
   }
 

Breeze.UI/tsconfig.json

@@ -27,4 +27,8 @@
       "dom"
     ]
   }
+  ,
+  "exclude": [
+    "node_modules"
+  ]
 }

Breeze.UI/webpack.config.js

@@ -5,9 +5,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const autoprefixer = require('autoprefixer');
 const postcssUrl = require('postcss-url');
+const ConcatPlugin = require('webpack-concat-plugin');
 
 const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin, DefinePlugin, HashedModuleIdsPlugin } = require('webpack');
-const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
+const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin, InsertConcatAssetsWebpackPlugin } = require('@angular/cli/plugins/webpack');
 const { CommonsChunkPlugin, UglifyJsPlugin } = require('webpack').optimize;
 const { AotPlugin } = require('@ngtools/webpack');
 
@@ -18,6 +19,18 @@ const deployUrl = "";
 
 const isProd = (process.env.NODE_ENV === 'production');
 
+//add all external css to be added in our index.html--> like as if it's .angular-cli.json
+const styles = [
+  "./src/styles.css"
+];
+
+//we add all our external scripts we want to load externally, like inserting in our index.html --> like as if it's .angular-cli.json
+const scripts = [
+];
+
+//create file path for each , so we use for our excludes and includes where needed
+let style_paths = styles.map(style_src => path.join(process.cwd(), style_src));
+
 function getPlugins() {
   var plugins = [];
 
@@ -30,6 +43,19 @@ function getPlugins() {
 
   plugins.push(new NoEmitOnErrorsPlugin());
 
+  if(scripts.length > 0){
+    plugins.push(new ConcatPlugin({
+      "uglify": false,
+      "sourceMap": true,
+      "name": "scripts",
+      "fileName": "[name].bundle.js",
+      "filesToConcat": scripts
+    }));
+    plugins.push(new InsertConcatAssetsWebpackPlugin([
+      "scripts"
+    ]));
+  }
+
   plugins.push(new GlobCopyWebpackPlugin({
     "patterns": [
       "assets",
@@ -225,9 +251,7 @@ module.exports = {
     "polyfills": [
       "./src/polyfills.ts"
     ],
-    "styles": [
-      "./src/styles.css"
-    ]
+    "styles": styles
   },
   "output": {
     "path": path.join(process.cwd(), "dist"),
@@ -258,9 +282,7 @@ module.exports = {
         "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
       },
       {
-        "exclude": [
-          path.join(process.cwd(), "src/styles.css")
-        ],
+        "exclude": style_paths,
         "test": /\.css$/,
         "loaders": [
           "exports-loader?module.exports.toString()",
@@ -269,9 +291,7 @@ module.exports = {
         ]
       },
       {
-        "exclude": [
-          path.join(process.cwd(), "src/styles.css")
-        ],
+        "exclude": style_paths,
         "test": /\.scss$|\.sass$/,
         "loaders": [
           "exports-loader?module.exports.toString()",
@@ -281,9 +301,7 @@ module.exports = {
         ]
       },
       {
-        "exclude": [
-          path.join(process.cwd(), "src/styles.css")
-        ],
+        "exclude": style_paths,
         "test": /\.less$/,
         "loaders": [
           "exports-loader?module.exports.toString()",
@@ -293,9 +311,7 @@ module.exports = {
         ]
       },
       {
-        "exclude": [
-          path.join(process.cwd(), "src/styles.css")
-        ],
+        "exclude": style_paths,
         "test": /\.styl$/,
         "loaders": [
           "exports-loader?module.exports.toString()",
@@ -305,9 +321,7 @@ module.exports = {
         ]
       },
       {
-        "include": [
-          path.join(process.cwd(), "src/styles.css")
-        ],
+        "include": style_paths,
         "test": /\.css$/,
         "loaders": ExtractTextPlugin.extract({
           "use": [
@@ -319,9 +333,7 @@ module.exports = {
         })
       },
       {
-        "include": [
-          path.join(process.cwd(), "src/styles.css")
-        ],
+        "include": style_paths,
         "test": /\.scss$|\.sass$/,
         "loaders": ExtractTextPlugin.extract({
           "use": [
@@ -334,9 +346,7 @@ module.exports = {
         })
       },
       {
-        "include": [
-          path.join(process.cwd(), "src/styles.css")
-        ],
+        "include": style_paths,
         "test": /\.less$/,
         "loaders": ExtractTextPlugin.extract({
           "use": [
@@ -349,9 +359,7 @@ module.exports = {
         })
       },
       {
-        "include": [
-          path.join(process.cwd(), "src/styles.css")
-        ],
+        "include": style_paths,
         "test": /\.styl$/,
         "loaders": ExtractTextPlugin.extract({
           "use": [