Add history, unused addresses and balance (#14)

- Added transaction history
- Added unused receive addresses list
- Added balance component in menu

Breeze.UI/.env

-DEBUG=true
-HOST=http://localhost:4200

Breeze.UI/db.json

@@ -10,5 +10,45 @@
         "trackedScriptPubKeyCount": "100",
         "walletState": "syncingBlocks",
         "historyChangeBump": "231321"
+    },
+    "balance": 
+    {
+        "success": "true",
+        "synced": "true",
+        "confirmed": "0.144",
+        "unconfirmed": "-6.23"
+    },
+    "history":
+    {
+        "success": "true",
+        "history": 
+        [
+            {
+            "txid": "9a9949476b629b4075b31d8faad64dad352586a18df8f2810c5a7bb900478c60",
+            "amount": "0.1",
+            "confirmed": "true",
+            "timestamp": "2016.12.19. 23:15:05"
+            },
+            {
+            "txid": "9a9949476b629b4075b31d8faad64dad352586a18df8f2810c5a7bb900478c60",
+            "amount": "-0.1",
+            "confirmed": "false",
+            "timestamp": "2016.12.20. 1:15:36"
+            }
+        ]
+    },
+    "receive":
+    {
+        "success": "true",
+        "addresses":
+        [
+            "mzz63n3n89KVeHQXRqJEVsQX8MZj5zeqCw",
+            "mhm1pFe2hH7yqkdQhwbBQ8qLnMZqfL6jXb",
+            "mmRzqMDBrfNxMfryQSYec3rfPHXURNapBA",
+            "my2ELDBqLGVz1ER7CMynDqG4BUpV2pwfR5",
+            "mmwccp4GefhPn4P6Mui6DGLGzHTVyQ12tD",
+            "miTedyDXJAz6GYMRasiJk9M3ibnGnb99M1",
+            "mrsb39MmPceSPfKAURTH23hYgLRH1M1Uhg"
+        ]
     }
 }
\ No newline at end of file

Breeze.UI/routes.json

 {
   "/api/v1/wallet/": "/",
-  "/api/v1/create/": "/"
+  "/api/v1/setup/": "/"
 }
\ No newline at end of file

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

 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+
 import { remote } from 'electron';
+
 import { ApiService } from './shared/api/api.service';
 
 @Component({

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

-import { Observable } from 'rxjs/Observable';
-import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../../shared/api/api.service';
-
-@Component({
-    selector: 'is-connected',
-    template: 'Wallet connected to API: {{result}}',
-})
-
-export class ApiComponent implements OnInit {
-  result: string;
-  constructor(private apiService: ApiService) {}
-  ngOnInit() {
-    this.apiService
-        .isConnected()
-        .subscribe((data: string) => this.result = data,
-        () => console.log("isConnected() complete from init"));
-
-    if (!this.result) {
-      this.result = "false"
-    }
-  }
-}

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

@@ -2,9 +2,6 @@
 <h1>
   Please create a new wallet.
 </h1>
-<div>
-  <is-connected></is-connected>
-</div>
 <div class="form-group">
   <label for="name">Name:</label>
   <input class="form-control" type="text" #walletName required>

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

@@ -5,7 +5,6 @@ import { RouterModule }   from '@angular/router';
 
 import { SetupComponent } from './setup.component';
 import { CreateComponent } from './create/create.component';
-import { ApiComponent } from './create/api.component';
 
 import { SharedModule } from '../shared/shared.module';
 
@@ -20,8 +19,7 @@ import { SetupRoutingModule } from './setup-routing.module';
   ],
   declarations: [
     CreateComponent,
-    SetupComponent,
-    ApiComponent
+    SetupComponent
   ],
   exports: [ SetupComponent ],
   providers: []

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

@@ -28,6 +28,27 @@ export class ApiService {
         .catch(this.handleError);
     }
 
+    getWalletBalance(): Observable<any> {
+      return this.http
+        .get(this.webApiUrl + '/wallet/balance')
+        .map((response:Response) => response.json())
+        .catch(this.handleError);
+    }
+
+    getWalletHistory(): Observable<any> {
+      return this.http
+        .get(this.webApiUrl + '/wallet/history')
+        .map((response:Response) => response.json())
+        .catch(this.handleError);
+    }
+
+    getUnusedReceiveAddresses(): Observable<any> {
+      return this.http
+        .get(this.webApiUrl + '/wallet/receive')
+        .map((response:Response) => response.json())
+        .catch(this.handleError);
+    }
+
     createWallet(data: SafeCreation): Observable<any> {
       console.log(JSON.stringify(data));
       return this.http

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

-<h1>History</h1>
\ No newline at end of file
+<h1>History</h1>
+<table *ngIf="transactions"> 
+    <thead>
+        <th>Timestamp</th>
+        <th>Amount</th>
+        <th>Confirmed</th>
+        <th>Transaction ID</th>
+    </thead>
+    <tr *ngFor="let transaction of transactions">
+        <td>{{ transaction.timestamp }}</td>
+        <td>{{ transaction.amount }}</td>
+        <td>{{ transaction.confirmed }}</td>
+        <td>{{ transaction.txid }}</td>
+    </tr>
+</table>
\ No newline at end of file

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

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { ApiService } from '../../shared/api/api.service'
 
 @Component({
   selector: 'history-component',
@@ -7,5 +9,20 @@ import { Component } from '@angular/core';
 })
 
 export class HistoryComponent {
-    
+  constructor(private apiService: ApiService) {}
+
+  private transactions: any;
+  private errorMessage: string;
+
+  ngOnInit() {
+    this.getWalletHistory();
+  }
+
+  private getWalletHistory() {
+    this.apiService.getWalletHistory()
+      .subscribe(
+        response => this.transactions = response.history,
+        error => this.errorMessage = <any>error
+    );
+  }
 }

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

+<p>Balance: {{confirmedBalance}}</p>
+<p>Unconfirmed: {{unconfirmedBalance}}<p>
\ No newline at end of file

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

+import { Component, OnInit } from '@angular/core';
+import { ApiService } from '../../shared/api/api.service';
+
+@Component({
+  selector: 'dashboard-component',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.css'],
+})
+export class DashboardComponent {
+    constructor(private apiService: ApiService) {}
+    
+    private balanceResponse: any;
+    private confirmedBalance: number;
+    private unconfirmedBalance: number;
+    private errorMessage: string;
+
+    ngOnInit() {
+        this.getWalletBalance();
+    }
+
+    private getWalletBalance() {
+        this.apiService.getWalletBalance()
+            .subscribe(
+                response => this.balanceResponse = response,
+                error => this.errorMessage = <any>error,
+                () => this.setBalance()
+        );
+    }
+
+    private setBalance() {
+        this.confirmedBalance = this.balanceResponse.confirmed;
+        this.unconfirmedBalance = this.balanceResponse.unconfirmed;
+    }
+}

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

 <nav class="navbar navbar-fixed-top">
     <div class="container">
         <a class="navbar-brand">Breeze</a>
+        <dashboard-component></dashboard-component>
         <ul class="nav navbar-nav" routerLinkActive="active">
             <li class="nav-item"><a class="nav-link" routerLink="send">Send</a></li>
             <li class="nav-item"><a class="nav-link" routerLink="receive">Receive</a></li>

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

 <div class="content-wrapper">
     <h1>Receive</h1>
     <div>
-        <label>Unused Receive Addresses</label>
         <div>
+            <table *ngIf="addresses"> 
+                <thead>
+                    <th>Unused Receive Addresses: </th>
+                </thead>
+                <tr *ngFor="let address of addresses">
+                    <td>{{ address }}</td>
+                </tr>
+            </table>
         </div>
     </div>
     <div>

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

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { ApiService } from '../../shared/api/api.service'
 
 @Component({
   selector: 'receive-component',
@@ -7,5 +9,20 @@ import { Component } from '@angular/core';
 })
 
 export class ReceiveComponent {
-  
+  constructor(private apiService: ApiService) {}
+
+  private addresses: any;
+  private errorMessage: string;
+
+  ngOnInit() {
+    this.getUnusedReceiveAddresses();
+  }
+
+  private getUnusedReceiveAddresses() {
+    this.apiService.getUnusedReceiveAddresses()
+      .subscribe(
+        response => this.addresses = response.addresses,
+        error => this.errorMessage = <any>error
+    );
+  }
 }
\ No newline at end of file

Breeze.UI/src/app/wallet/wallet.module.ts

@@ -5,6 +5,7 @@ import { RouterModule }   from '@angular/router';
 
 import { WalletComponent } from './wallet.component';
 import { MenuComponent } from './menu/menu.component';
+import { DashboardComponent } from './menu/dashboard.component';
 import { SendComponent } from './send/send.component';
 import { ReceiveComponent } from './receive/receive.component';
 import { HistoryComponent } from './history/history.component';
@@ -23,6 +24,7 @@ import { WalletRoutingModule } from './wallet-routing.module';
   declarations: [
     WalletComponent,
     MenuComponent,
+    DashboardComponent,
     ReceiveComponent,
     SendComponent,
     HistoryComponent,