Merge pull request #118 from stratisproject/ui

Add server polling

Breeze.UI/README.md

@@ -33,6 +33,9 @@ npm install -g @angular/cli
 ## To build for development
 
 - **in a terminal window** -> npm start
+
+If you want to seperate the build process from the Electron process you can use:
+- **in a terminal window** -> npm start:webpack
 - **in another terminal window** -> npm run electron:serve
 
 ## To build for production

Breeze.UI/package.json

@@ -20,7 +20,8 @@
   "scripts": {
     "ng": "ng",
     "lint": "ng lint",
-    "start": "webpack --watch",
+    "start": "concurrently \"npm run start:webpack\" \"npm run electron:serve\"",
+    "start:webpack": "webpack --watch",
     "start:web": "webpack-dev-server --content-base . --port 4200 --inline",
     "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",

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

@@ -22,7 +22,7 @@
           <select name="network" formControlName="selectNetwork">
             <!--<option value="main">Main</option>-->
             <option value="test">Testnet</option>
-            <option value="stratistest">StratisTest</option>
+            <!--<option value="stratistest">StratisTest</option>-->
           </select>
         </div>
         <div class="form-group">

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

@@ -32,7 +32,7 @@
           <select name="network" formControlName="selectNetwork">
             <!--<option value="main">Main</option>-->
             <option value="test">Testnet</option>
-            <option value="stratistest">StratisTest</option>
+            <!--<option value="stratistest">StratisTest</option>-->
           </select>
         </div>
         <div class="form-group">

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

@@ -2,7 +2,10 @@ import { Injectable } from '@angular/core';
 import { Http, Headers, Response, RequestOptions, URLSearchParams} from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/switchMap';
 import 'rxjs/add/operator/catch';
+import "rxjs/add/observable/interval";
+import 'rxjs/add/operator/startWith';
 
 import { WalletCreation } from '../classes/wallet-creation';
 import { WalletRecovery } from '../classes/wallet-recovery';
@@ -22,6 +25,7 @@ export class ApiService {
     private mockApiUrl = 'http://localhost:3000/api';
     private webApiUrl = 'http://localhost:5000/api';
     private headers = new Headers({'Content-Type': 'application/json'});
+    private pollingInterval = 3000;
 
     /**
      * Gets available wallets at the default path
@@ -74,11 +78,16 @@ export class ApiService {
     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.webApiUrl + '/wallet/balance', new RequestOptions({headers: this.headers, search: params}))
+      return Observable
+        .interval(this.pollingInterval)
+        .startWith(0)
+        .switchMap(() => this.http.get(this.webApiUrl + '/wallet/balance', new RequestOptions({headers: this.headers, search: params})))
         .map((response: Response) => response);
+
+      // return this.http
+      //   .get(this.webApiUrl + '/wallet/balance', new RequestOptions({headers: this.headers, search: params}))
+      //   .map((response: Response) => response);
     }
 
     /**
@@ -87,11 +96,16 @@ export class ApiService {
     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.webApiUrl + '/wallet/history', new RequestOptions({headers: this.headers, search: params}))
+      return Observable
+        .interval(this.pollingInterval)
+        .startWith(0)
+        .switchMap(() => this.http.get(this.webApiUrl + '/wallet/history', new RequestOptions({headers: this.headers, search: params})))
         .map((response: Response) => response);
+
+      // return this.http
+      //   .get(this.webApiUrl + '/wallet/history', new RequestOptions({headers: this.headers, search: params}))
+      //   .map((response: Response) => response);
     }
 
     /**
@@ -100,7 +114,6 @@ export class ApiService {
     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

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

-import { Component, OnInit, Input } from '@angular/core';
-import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { ApiService } from '../../shared/services/api.service';
 import { GlobalService } from '../../shared/services/global.service';
@@ -8,6 +8,10 @@ import { WalletInfo } from '../../shared/classes/wallet-info';
 import { SendComponent } from '../send/send.component';
 import { ReceiveComponent } from '../receive/receive.component';
 
+import { Observable } from 'rxjs/Rx';
+import { Subscription } from 'rxjs/Subscription';
+import 'rxjs/add/operator/first';
+
 @Component({
   selector: 'dashboard-component',
   templateUrl: './dashboard.component.html',
@@ -20,12 +24,19 @@ export class DashboardComponent {
   private confirmedBalance: number;
   private unconfirmedBalance: number;
   private transactions: any;
+  private walletBalanceSubscription: Subscription;
+  private walletHistorySubscription: Subscription;
 
   ngOnInit() {
     this.getWalletBalance();
     this.getHistory();
   };
 
+  ngOnDestroy() {
+    this.walletBalanceSubscription.unsubscribe();
+    this.walletHistorySubscription.unsubscribe();
+  };
+
   private openSendDialog() {
     const modalRef = this.modalService.open(SendComponent);
   };
@@ -36,7 +47,7 @@ export class DashboardComponent {
 
   private getWalletBalance() {
     let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
-    this.apiService.getWalletBalance(walletInfo)
+    this.walletBalanceSubscription = this.apiService.getWalletBalance(walletInfo)
       .subscribe(
             response =>  {
                 if (response.status >= 200 && response.status < 400) {
@@ -56,7 +67,7 @@ export class DashboardComponent {
 
   private getHistory() {
     let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
-    this.apiService.getWalletHistory(walletInfo)
+    this.walletHistorySubscription = this.apiService.getWalletHistory(walletInfo)
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {

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

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 
 import { ApiService } from '../../shared/services/api.service';
 import { GlobalService } from '../../shared/services/global.service';
 
 import { WalletInfo } from '../../shared/classes/wallet-info';
 
+import { Observable } from 'rxjs/Rx';
+import { Subscription } from 'rxjs/Subscription';
+
 @Component({
   selector: 'history-component',
   templateUrl: './history.component.html',
@@ -16,14 +19,19 @@ export class HistoryComponent {
 
   private transactions: any;
   private errorMessage: string;
+  private walletHistorySubscription: Subscription;
 
   ngOnInit() {
     this.getHistory();
   }
 
+  ngOnDestroy() {
+    this.walletHistorySubscription.unsubscribe();
+  }
+
   private getHistory() {
     let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
-    this.apiService.getWalletHistory(walletInfo)
+    this.walletHistorySubscription = this.apiService.getWalletHistory(walletInfo)
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {