Switch to Breeze.Api data (#42)

- Switched wallet interface to real API data
- Added basic validation
- Updated Angular

Breeze.UI/package.json

@@ -22,67 +22,67 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.0.1",
-    "@angular/common": "^4.0.1",
-    "@angular/compiler": "^4.0.1",
-    "@angular/compiler-cli": "^4.0.1",
-    "@angular/core": "^4.0.1",
-    "@angular/forms": "^4.0.1",
-    "@angular/http": "^4.0.1",
-    "@angular/platform-browser": "^4.0.1",
-    "@angular/platform-browser-dynamic": "^4.0.1",
-    "@angular/platform-server": "^4.0.1",
-    "@angular/router": "^4.0.1",
+    "@angular/animations": "^4.1.0",
+    "@angular/common": "^4.1.0",
+    "@angular/compiler": "^4.1.0",
+    "@angular/compiler-cli": "^4.1.0",
+    "@angular/core": "^4.1.0",
+    "@angular/forms": "^4.1.0",
+    "@angular/http": "^4.1.0",
+    "@angular/platform-browser": "^4.1.0",
+    "@angular/platform-browser-dynamic": "^4.1.0",
+    "@angular/platform-server": "^4.1.0",
+    "@angular/router": "^4.1.0",
     "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
-    "rxjs": "^5.2.0",
-    "zone.js": "^0.8.5"
+    "rxjs": "^5.3.0",
+    "zone.js": "^0.8.9"
   },
   "devDependencies": {
-    "@angular/cli": "^1.0.0",
-    "@angular/compiler-cli": "^4.0.1",
-    "@types/electron": "^1.4.35",
-    "@types/jasmine": "2.5.46",
-    "@types/node": "~7.0.12",
-    "autoprefixer": "^6.5.3",
-    "codelyzer": "~2.0.0",
+    "@angular/cli": "^1.0.1",
+    "@angular/compiler-cli": "^4.1.0",
+    "@types/electron": "^1.4.37",
+    "@types/jasmine": "2.5.47",
+    "@types/node": "~7.0.15",
+    "autoprefixer": "^6.7.7",
+    "codelyzer": "3.0.1",
     "concurrently": "^3.4.0",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.26.1",
+    "copy-webpack-plugin": "4.0.1",
+    "css-loader": "^0.28.1",
     "cssnano": "^3.10.0",
-    "electron": "^1.6.2",
-    "electron-packager": "^8.6.0",
-    "exports-loader": "^0.6.3",
+    "electron": "^1.6.6",
+    "electron-packager": "^8.7.0",
+    "exports-loader": "^0.6.4",
     "extract-text-webpack-plugin": "^2.1.0",
-    "file-loader": "^0.10.0",
+    "file-loader": "^0.11.1",
     "html-webpack-plugin": "^2.28.0",
     "istanbul-instrumenter-loader": "^2.0.0",
-    "jasmine-core": "~2.5.2",
-    "jasmine-spec-reporter": "~3.2.0",
+    "jasmine-core": "~2.6.1",
+    "jasmine-spec-reporter": "~4.1.0",
     "json-loader": "^0.5.4",
-    "karma": "~1.5.0",
+    "karma": "~1.6.0",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.0.0",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-electron": "^5.1.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-sourcemap-loader": "^0.3.7",
-    "less-loader": "^2.2.3",
-    "postcss-loader": "^0.13.0",
-    "postcss-url": "^5.1.2",
+    "less-loader": "^4.0.3",
+    "postcss-loader": "^1.3.3",
+    "postcss-url": "^6.0.4",
     "protractor": "~5.1.1",
     "raw-loader": "^0.5.1",
-    "sass-loader": "^4.1.1",
+    "sass-loader": "^6.0.3",
     "script-loader": "^0.7.0",
-    "source-map-loader": "^0.1.5",
-    "style-loader": "^0.13.1",
-    "stylus-loader": "^2.4.0",
+    "source-map-loader": "^0.2.1",
+    "style-loader": "^0.17.0",
+    "stylus-loader": "^3.0.1",
     "ts-node": "~3.0.2",
-    "tslint": "~4.5.1",
-    "typescript": "^2.2.2",
-    "url-loader": "^0.5.7",
-    "webpack": "^2.3.2",
-    "webpack-dev-server": "~2.3.0"
+    "tslint": "~5.1.0",
+    "typescript": "^2.3.2",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.4.1",
+    "webpack-dev-server": "~2.4.5"
   }
 }

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

@@ -46,7 +46,7 @@ export class LoginComponent implements OnInit {
   }
 
   private setGlobalWalletName(walletName: string) {
-    this.globalService.setCurrentWalletName(walletName);
+    this.globalService.setWalletName(walletName);
   }
 
   private getWalletFiles() {
@@ -82,9 +82,10 @@ export class LoginComponent implements OnInit {
     this.apiService.loadWallet(walletLoad)
       .subscribe(
         response => {
-          console.log(response);
           if (response.status >= 200 && response.status < 400) {
             let responseMessage = response.json();
+            this.globalService.setWalletName(walletLoad.name)
+            this.globalService.setCoinType(0);
             this.router.navigate(['/wallet']);
           }
         },

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

@@ -6,10 +6,12 @@
   <div class="form-group">
     <label>Name:</label>
     <input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
+    <div *ngIf="formErrors.walletName" class="alert alert-danger">{{formErrors.walletName}}</div>
   </div>
   <div class="form-group">
     <label>Password:</label>
     <input class="form-control" formControlName="walletPassword" type="password" placeholder="Enter a password for your wallet.">
+    <div *ngIf="formErrors.walletPassword" class="alert alert-danger">{{formErrors.walletPassword}}</div>
   </div>
   <div class="form-group">
     <label>Network:</label>

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

@@ -16,11 +16,7 @@ import { Mnemonic } from '../../shared/classes/mnemonic';
 
 export class CreateComponent {
   constructor(private globalService: GlobalService, private apiService: ApiService, private router: Router, private fb: FormBuilder) {
-    this.createWalletForm = fb.group({
-      "walletName": ["", Validators.required],
-      "walletPassword": ["", Validators.required],
-      "selectNetwork": ["main", Validators.required]
-    });
+    this.buildCreateForm();
   }
 
   private createWalletForm: FormGroup;
@@ -29,6 +25,55 @@ export class CreateComponent {
   private responseMessage: string;
   private errorMessage: string;
 
+  private buildCreateForm(): void {
+    this.createWalletForm = this.fb.group({
+      "walletName": ["", [
+          Validators.required,
+          Validators.minLength(3),
+          Validators.maxLength(24)
+        ]
+      ],
+      "walletPassword": ["", Validators.required],
+      "selectNetwork": ["main", Validators.required]
+    });
+
+    this.createWalletForm.valueChanges
+      .subscribe(data => this.onValueChanged(data));
+
+    this.onValueChanged();
+  }
+
+  onValueChanged(data?: any) {
+    if (!this.createWalletForm) { return; }
+    const form = this.createWalletForm;
+    for (const field in this.formErrors) {
+      this.formErrors[field] = '';
+      const control = form.get(field);
+      if (control && control.dirty && !control.valid) {
+        const messages = this.validationMessages[field];
+        for (const key in control.errors) {
+          this.formErrors[field] += messages[key] + ' ';
+        }
+      }
+    }
+  }
+
+  formErrors = {
+    'walletName': '',
+    'walletPassword': ''
+  };
+
+  validationMessages = {
+    'walletName': {
+      'required':      'Name is required.',
+      'minlength':     'Name must be at least 3 characters long.',
+      'maxlength':     'Name cannot be more than 24 characters long.'
+    },
+    'walletPassword': {
+      'required': 'A password is required.'
+    }
+  };
+
   private onBackClicked() {
     this.router.navigate(["/setup"]);
   }

Breeze.UI/src/app/shared/classes/wallet-info.ts

+export class WalletInfo {
+
+  constructor(walletName: string, coinType: number) {
+    this.walletName = walletName;
+    this.coinType = coinType;
+  }
+
+  public walletName: string;
+  public coinType: number;
+}

Breeze.UI/src/app/shared/classes/wallet-load.ts

@@ -6,7 +6,7 @@ export class WalletLoad {
     this.name = name;
   }
 
-  private password: string;
-  private folderPath: string;
-  private name: string;
+  public password: string;
+  public folderPath: string;
+  public name: string;
 }

Breeze.UI/src/app/shared/services/api.service.ts

 import { Injectable } from '@angular/core';
-import { Http, Headers, Response } from '@angular/http';
+import { Http, Headers, Response, RequestOptions, URLSearchParams} from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
@@ -7,6 +7,7 @@ import 'rxjs/add/operator/catch';
 import { WalletCreation } from '../classes/wallet-creation';
 import { WalletRecovery } from '../classes/wallet-recovery';
 import { WalletLoad } from '../classes/wallet-load';
+import { WalletInfo } from '../classes/wallet-info';
 import { Mnemonic } from '../classes/mnemonic';
 
 /**
@@ -62,34 +63,47 @@ export class ApiService {
      */
     getWalletStatus(): Observable<any> {
       return this.http
-        .get(this.mockApiUrl + '/wallet/status')
+        .get(this.webApiUrl + '/wallet/status')
         .map((response: Response) => response);
     }
 
     /**
      * Get wallet balance info from the API.
      */
-    getWalletBalance(): Observable<any> {
+    getWalletBalance(data: WalletInfo): Observable<any> {
+      let params: URLSearchParams = new URLSearchParams();
+      params.set('walletName', data.walletName);
+      params.set('coinType', data.coinType.toString());
+
       return this.http
-        .get(this.mockApiUrl + '/wallet/balance')
+        .get(this.webApiUrl + '/wallet/balance', new RequestOptions({headers: this.headers, search: params}))
         .map((response: Response) => response);
     }
 
     /**
      * Get a wallets transaction history info from the API.
      */
-    getWalletHistory(): Observable<any> {
+    getWalletHistory(data: WalletInfo): Observable<any> {
+      let params: URLSearchParams = new URLSearchParams();
+      params.set('walletName', data.walletName);
+      params.set('coinType', data.coinType.toString());
+
       return this.http
-        .get(this.mockApiUrl + '/wallet/history')
+        .get(this.webApiUrl + '/wallet/history', new RequestOptions({headers: this.headers, search: params}))
         .map((response: Response) => response);
     }
 
     /**
      * Get unused receive addresses for a certain wallet from the API.
      */
-    getUnusedReceiveAddresses(): Observable<any> {
+    getUnusedReceiveAddress(data: WalletInfo): Observable<any> {
+      let params: URLSearchParams = new URLSearchParams();
+      params.set('walletName', data.walletName);
+      params.set('coinType', data.coinType.toString());
+      params.set('accountName', "account 0"); //temporary
+
       return this.http
-        .get(this.mockApiUrl + '/wallet/receive')
+        .get(this.webApiUrl + '/wallet/address', new RequestOptions({headers: this.headers, search: params}))
         .map((response: Response) => response);
     }
 }

Breeze.UI/src/app/shared/services/global.service.ts

@@ -6,6 +6,7 @@ export class GlobalService {
 
     private walletPath: string;
     private currentWalletName: string;
+    private coinType: number;
 
     getWalletPath() {
         return this.walletPath;
@@ -15,11 +16,19 @@ export class GlobalService {
         this.walletPath = walletPath;
     }
 
-    getCurrentWalletName() {
+    getWalletName() {
         return this.currentWalletName;
     }
 
-    setCurrentWalletName(currentWalletName: string) {
+    setWalletName(currentWalletName: string) {
         this.currentWalletName = currentWalletName;
     }
-}
\ No newline at end of file
+
+    getCoinType () {
+      return this.coinType;
+    }
+
+    setCoinType (coinType: number) {
+      this.coinType = coinType;
+    }
+}

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

 <h1>History</h1>
-<table *ngIf="transactions"> 
+<table *ngIf="transactions">
     <thead>
         <th>Timestamp</th>
         <th>Amount</th>
@@ -10,6 +10,6 @@
         <td>{{ transaction.timestamp }}</td>
         <td>{{ transaction.amount }}</td>
         <td>{{ transaction.confirmed }}</td>
-        <td>{{ transaction.txid }}</td>
+        <td>{{ transaction.txId }}</td>
     </tr>
-</table>
\ No newline at end of file
+</table>

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

 import { Component, OnInit } from '@angular/core';
 
-import { ApiService } from '../../shared/services/api.service'
+import { ApiService } from '../../shared/services/api.service';
+import { GlobalService } from '../../shared/services/global.service';
+
+import { WalletInfo } from '../../shared/classes/wallet-info';
 
 @Component({
   selector: 'history-component',
@@ -9,7 +12,7 @@ import { ApiService } from '../../shared/services/api.service'
 })
 
 export class HistoryComponent {
-  constructor(private apiService: ApiService) {}
+  constructor(private apiService: ApiService, private globalService: GlobalService) {}
 
   private transactions: any;
   private errorMessage: string;
@@ -19,11 +22,12 @@ export class HistoryComponent {
   }
 
   private getWalletHistory() {
-    this.apiService.getWalletHistory()
+    let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
+    this.apiService.getWalletHistory(walletInfo)
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {
-            this.transactions = response.json().history;
+            this.transactions = response.json().transactions;
           }
         },
         error => {

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

 import { Component, OnInit } from '@angular/core';
 import { ApiService } from '../../shared/services/api.service';
+import { GlobalService } from '../../shared/services/global.service';
+import { WalletInfo } from '../../shared/classes/wallet-info';
 
 @Component({
   selector: 'dashboard-component',
@@ -7,8 +9,8 @@ import { ApiService } from '../../shared/services/api.service';
   styleUrls: ['./dashboard.component.css'],
 })
 export class DashboardComponent {
-    constructor(private apiService: ApiService) {}
-    
+    constructor(private apiService: ApiService, private globalService: GlobalService) {}
+
     private balanceResponse: any;
     private confirmedBalance: number;
     private unconfirmedBalance: number;
@@ -19,21 +21,22 @@ export class DashboardComponent {
     }
 
     private getWalletBalance() {
-        this.apiService.getWalletBalance()
-            .subscribe(
-                response =>  {
-                    if (response.status >= 200 && response.status < 400) {
-                        this.balanceResponse = response.json();
-                        this.confirmedBalance = this.balanceResponse.confirmed;
-                        this.unconfirmedBalance = this.balanceResponse.unconfirmed;
-                    } 
-                },
-                error => {
-                    if (error.status >= 400) {
-                        this.errorMessage = <any>error;
-                        console.log(this.errorMessage);                    
-                    }
-                }
+      let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
+      this.apiService.getWalletBalance(walletInfo)
+          .subscribe(
+              response =>  {
+                  if (response.status >= 200 && response.status < 400) {
+                      this.balanceResponse = response.json();
+                      this.confirmedBalance = this.balanceResponse.balances[0].amountConfirmed;
+                      this.unconfirmedBalance = this.balanceResponse.balances[0].amountUnconfirmed;
+                  }
+              },
+              error => {
+                  if (error.status >= 400) {
+                      this.errorMessage = <any>error;
+                      console.log(this.errorMessage);
+                  }
+              }
         );
     }
 }

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

@@ -2,20 +2,14 @@
     <h1>Receive</h1>
     <div>
         <div>
-            <table *ngIf="addresses"> 
+            <table *ngIf="address">
                 <thead>
-                    <th>Unused Receive Addresses: </th>
+                    <th>Receive address: </th>
                 </thead>
-                <tr *ngFor="let address of addresses">
+                <tr>
                     <td>{{ address }}</td>
                 </tr>
             </table>
         </div>
     </div>
-    <div>
-        <label>Used Receive Addresses</label>
-    </div>
-    <div>
-        <label>Change Addresses</label>
-    </div>
-</div>
\ No newline at end of file
+</div>

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

 import { Component, OnInit } from '@angular/core';
 
-import { ApiService } from '../../shared/services/api.service'
+import { ApiService } from '../../shared/services/api.service';
+import { GlobalService } from '../../shared/services/global.service';
+
+import { WalletInfo } from '../../shared/classes/wallet-info';
 
 @Component({
   selector: 'receive-component',
@@ -9,9 +12,9 @@ import { ApiService } from '../../shared/services/api.service'
 })
 
 export class ReceiveComponent {
-  constructor(private apiService: ApiService) {}
+  constructor(private apiService: ApiService, private globalService: GlobalService) {}
 
-  private addresses: any;
+  private address: any;
   private errorMessage: string;
 
   ngOnInit() {
@@ -19,11 +22,12 @@ export class ReceiveComponent {
   }
 
   private getUnusedReceiveAddresses() {
-    this.apiService.getUnusedReceiveAddresses()
+    let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
+    this.apiService.getUnusedReceiveAddress(walletInfo)
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {
-            this.addresses = response.json().addresses;
+            this.address = response.json();
           }
         },
         error => {
@@ -34,4 +38,4 @@ export class ReceiveComponent {
         }
     );
   }
-}
\ No newline at end of file
+}