Switch to reactive forms, add pipes, improve navigation, various fixes (#35)

- Switch from template driven forms to reactive forms
- Add pipes for coin notation and coin abbreviation (tbc)
- Improve navigation, add lazy loading and back buttons
- Add classes for creation, recovery and loading of wallets
- Various small improvements

Breeze.UI/src/app/app-routing.module.ts

@@ -4,7 +4,10 @@ import { RouterModule, Routes } from '@angular/router';
 import { LoginComponent } from './login/login.component';
 
 const routes: Routes = [
-  { path: 'login', component: LoginComponent}
+  { path: '', redirectTo: 'login', pathMatch: 'full'},
+  { path: 'login', component: LoginComponent},
+  { path: 'setup', loadChildren: 'app/setup/setup.module#SetupModule'},
+  { path: 'wallet', loadChildren: 'app/wallet/wallet.module#WalletModule'}
 ];
 
 @NgModule({

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

 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { ApiService } from './shared/api/api.service';
+import { ApiService } from './shared/services/api.service';
 
 @Component({
   selector: 'app-root',

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

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { HttpModule } from '@angular/http';
 
-import { SetupModule } from './setup/setup.module';
-import { WalletModule } from './wallet/wallet.module';
 import { SharedModule } from './shared/shared.module';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -11,25 +10,25 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
 
-import { ApiService } from './shared/api/api.service';
+import { ApiService } from './shared/services/api.service';
+import { GlobalService } from './shared/services/global.service';
 
 
 @NgModule({
   imports: [
-    
     AppRoutingModule,
     BrowserModule,
+    ReactiveFormsModule,
+    FormsModule,
     HttpModule,
-    SetupModule,
-    WalletModule,
     SharedModule.forRoot()
   ],
   declarations: [
     AppComponent,
     LoginComponent
   ],
-  providers: [ ApiService ],
+  providers: [ ApiService, GlobalService ],
   bootstrap: [ AppComponent ]
 })
 
-export class AppModule { }
\ No newline at end of file
+export class AppModule { }

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

 <h1>Welcome to Breeze</h1>
-<div *ngIf="hasWallet">
+<form *ngIf="hasWallet" [formGroup]="openWalletForm" (ngSubmit)="onDecryptClicked()">
   <p>Choose the wallet you want to open:</p>
   <div class="form-group">
-    <label for="walletLabel">Wallet to open:</label>
-    <select name="wallet" #walletName (change)="walletChanged(walletName.value)">
+    <label>Select wallet name to open:</label>
+    <select class="form-control" formControlName="selectWallet">
       <option *ngFor="let wallet of wallets" [value]="wallet">{{wallet}}</option>
     </select>
   </div>
   <p>Please enter your password to decrypt your wallet</p>
-  <form (ngSubmit)="onSubmit()" #passwordForm="ngForm">
-    <div class="form-group">
-      <label for="password">Your password: </label>
-      <input type="password" class="form-control" id="password" [(ngModel)]="password" required name="password">
-    </div>
-    <button type="submit" class="btn btn-success">Decrypt</button>
-  </form>
-  <p></p>
-</div>
+  <div class="form-group">
+    <label>Your password: </label>
+    <input class="form-control" type="password" formControlName="password" placeholder="Enter password here">
+  </div>
+  <div class="form-group">
+    <button type="submit" [disabled]="!openWalletForm.valid" class="btn btn-success">Decrypt</button>
+  </div>
+</form>
+
 <div *ngIf="hasWallet;else no_wallet">
   <p> If you like to create or restore a wallet please click the button below.</p>
 </div>
@@ -24,4 +24,4 @@
   <p> Looks like you're new here. Please create or restore a wallet.</p>
 </ng-template>
 
-<button type="button" (click)="clickedCreate()" class="btn btn-success">Create or restore wallet</button>
\ No newline at end of file
+<button type="button" (click)="onCreateClicked()" class="btn btn-success">Create or restore wallet</button>

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

 import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
-import { ApiService } from '../shared/api/api.service';
-import { WalletLoad } from '../shared/wallet-load';
+
+import { GlobalService } from '../shared/services/global.service';
+import { ApiService } from '../shared/services/api.service';
+import { WalletLoad } from '../shared/classes/wallet-load';
 
 @Component({
   selector: 'app-login',
@@ -9,81 +12,91 @@ import { WalletLoad } from '../shared/wallet-load';
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
-  constructor(private apiService: ApiService, private router: Router) { }
+  constructor(private globalService: GlobalService, private apiService: ApiService, private router: Router, private fb: FormBuilder) {
+    this.openWalletForm = fb.group({
+      "selectWallet": ["", Validators.required],
+      "password": ["", Validators.required]
+    });
+   }
 
-  private walletLoad: WalletLoad;
+  private openWalletForm: FormGroup;
   private hasWallet: boolean = false;
-  private currentWalletName: string;
-  private wallets: [any];
-  private walletPath: string;
-  private password: string;
-  
-  private responseMessage: any;
-  private errorMessage: any;
-  
+  private wallets: [string];
 
   ngOnInit() {
+    this.getWalletFiles();
+  }
+
+  private updateWalletFileDisplay(walletName: string) {
+    this.openWalletForm.patchValue({selectWallet: walletName})
+  }
+
+  private onDecryptClicked() {
+    this.setGlobalWalletName(this.openWalletForm.get("selectWallet").value);
+    let walletLoad = new WalletLoad(
+      this.openWalletForm.get("password").value,
+      this.globalService.getWalletPath(),
+      this.openWalletForm.get("selectWallet").value
+      );
+    this.loadWallet(walletLoad);
+  }
+
+  private onCreateClicked() {
+    this.router.navigate(['/setup']);
+  }
+
+  private setGlobalWalletName(walletName: string) {
+    this.globalService.setCurrentWalletName(walletName);
+  }
+
+  private getWalletFiles() {
     this.apiService.getWalletFiles()
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {
-            this.responseMessage=response;
-            this.wallets = response.json().walletsFiles;
-            this.walletPath = response.json().walletsPath;
+            let responseMessage = response.json();
+            this.wallets = responseMessage.walletsFiles;
+            this.globalService.setWalletPath(responseMessage.walletsPath);
             if (this.wallets.length > 0) {
               this.hasWallet = true;
-              this.currentWalletName = this.wallets[0].slice(0, -5);
+              for (let wallet in this.wallets) {
+                this.wallets[wallet] = this.wallets[wallet].slice(0, -5);
+              }
+              this.updateWalletFileDisplay(this.wallets[0]);
             } else {
               this.hasWallet = false;
             }
           }
         },
         error => {
-          this.errorMessage = <any>error;
+          let errorMessage = <any>error;
           if (error.status >= 400) {
-            alert(this.errorMessage);
-            console.log(this.errorMessage);
+            alert(errorMessage);
+            console.log(errorMessage);
           }
         }
       );
   }
 
-  private onSubmit() {
-
-    this.walletLoad = new WalletLoad();
-    this.walletLoad.password = this.password;
-    this.walletLoad.name = this.currentWalletName;
-    this.walletLoad.folderPath = this.walletPath;
-
-    console.log(this.walletLoad);
-
-    this.apiService.loadWallet(this.walletLoad)
+  private loadWallet(walletLoad: WalletLoad) {
+    this.apiService.loadWallet(walletLoad)
       .subscribe(
         response => {
           console.log(response);
           if (response.status >= 200 && response.status < 400) {
-            this.responseMessage = response;
+            let responseMessage = response.json();
             this.router.navigate(['/wallet']);
           }
         },
         error => {
-          this.errorMessage = <any>error;
+          let errorMessage = <any>error;
           if (error.status === 403 && error.json().errors[0].message === "Wrong password, please try again.") {
             alert("Wrong password, try again.");
           } else if (error.status >= 400) {
-            alert(this.errorMessage);
-            console.log(this.errorMessage);
+            alert(errorMessage);
+            console.log(errorMessage);
           }
         }
       );
   }
-
-  private walletChanged(walletName: string) {
-    let walletNameNoJson: string = walletName.slice(0, -5);
-    this.currentWalletName = walletNameNoJson;
-  }
-
-  private clickedCreate() {
-    this.router.navigate(['/setup']);
-  }
-}
\ No newline at end of file
+}

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

@@ -2,30 +2,33 @@
 <h1>
   Please create a new wallet.
 </h1>
-<div class="form-group">
-  <label for="name">Name:</label>
-  <input class="form-control" type="text" #walletName required>
-</div>
-<div class="form-group">
-  <label for="password">Password:</label>
-  <input class="form-control" type="password" #walletPassword required>
-</div>
-<div class="form-group">
-  <label for="networklabel">Network:</label>
-  <select name="network" #walletNetwork>
-    <option value="main">Main</option>
-    <option value="test">Testnet</option>
-  </select>
-</div>
-<div class="form-group">
-  <label for="path">Path:</label>
-  <input class="form-control" type="text" #walletPath required>
-</div>
-<button type="submit" (click)="createWallet(walletPassword.value, walletNetwork.value, walletPath.value, walletName.value)">Create</button>
+<form [formGroup]="createWalletForm" (ngSubmit)="onCreateClicked()">
+  <div class="form-group">
+    <label>Name:</label>
+    <input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
+  </div>
+  <div class="form-group">
+    <label>Password:</label>
+    <input class="form-control" formControlName="walletPassword" type="password" placeholder="Enter a password for your wallet.">
+  </div>
+  <div class="form-group">
+    <label>Network:</label>
+    <select name="network" formControlName="selectNetwork">
+      <option value="main">Main</option>
+      <option value="test">Testnet</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <button type="submit" [disabled]="!createWalletForm.valid" class="btn btn-success">Create Wallet</button>
+  </div>
+</form>
 <div>
   <label>Mnemonic:</label>
 </div>
 <div>
   <label>{{responseMessage}}</label>
 </div>
-</div>
\ No newline at end of file
+<div class="form-group">
+    <button type="button" class="btn btn-success" (click)="onBackClicked()">Back</button>
+  </div>
+</div>

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

 import { Component, Injectable } from '@angular/core';
+import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
+import { Router } from '@angular/router';
 
-import { ApiService } from '../../shared/api/api.service';
+import { GlobalService } from '../../shared/services/global.service';
+import { ApiService } from '../../shared/services/api.service';
 
-import { WalletCreation } from '../../shared/wallet-creation';
-import { Mnemonic } from '../../shared/mnemonic';
+import { WalletCreation } from '../../shared/classes/wallet-creation';
+import { Mnemonic } from '../../shared/classes/mnemonic';
 
 @Component({
   selector: 'create-component',
@@ -12,22 +15,37 @@ import { Mnemonic } from '../../shared/mnemonic';
 })
 
 export class CreateComponent {
-  constructor(private apiService: ApiService) {}
+  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]
+    });
+  }
 
+  private createWalletForm: FormGroup;
   private newWallet: WalletCreation;
 
   private responseMessage: string;
   private errorMessage: string;
 
-  private createWallet(password: string, network: string, folderPath: string, name: string, ) {
-    this.newWallet = new WalletCreation();
-    this.newWallet.password = password;
-    this.newWallet.network = network;
-    this.newWallet.folderPath = folderPath;
-    this.newWallet.name = name;
+  private onBackClicked() {
+    this.router.navigate(["/setup"]);
+  }
+
+  private onCreateClicked() {
+    this.newWallet = new WalletCreation(
+      this.createWalletForm.get("walletPassword").value,
+      this.createWalletForm.get("selectNetwork").value,
+      this.globalService.getWalletPath(),
+      this.createWalletForm.get("walletName").value
+      );
+    this.createWallet(this.newWallet);
+  }
 
+  private createWallet(wallet: WalletCreation) {
     this.apiService
-      .createWallet(this.newWallet)
+      .createWallet(wallet)
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400){

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

@@ -2,27 +2,30 @@
 <p>
   Welcome, please complete the form below to recover your wallet.
 </p>
-<div class="form-group">
-  <label for="name">Mnemonic:</label>
-  <input class="form-control" type="text" #walletMnemonic required>
-</div>
-<div class="form-group">
-  <label for="name">Password:</label>
-  <input class="form-control" type="password" #walletPassword required>
-</div>
-<div class="form-group">
-  <label for="name">Wallet Path:</label>
-  <input class="form-control" type="text" #walletPath required>
-</div>
-<div class="form-group">
-  <label for="name">Wallet Name:</label>
-  <input class="form-control" type="text" #walletName required>
-</div>
-<div class="form-group">
-  <label for="networklabel">Network:</label>
-  <select name="network" #walletNetwork>
-    <option value="main">Main</option>
-    <option value="test">Testnet</option>
-  </select>
-</div>
-<button type="submit" (click)="recoverWallet(walletMnemonic.value, walletPassword.value, walletPath.value, walletName.value, walletNetwork.value)">Recover</button>
\ No newline at end of file
+<form [formGroup]="recoverWalletForm" (ngSubmit)="onRecoverClicked()">
+  <div class="form-group">
+    <label>Mnemonic:</label>
+    <input class="form-control" formControlName="walletMnemonic" type="text" placeholder="Enter your saved mnemonic.">
+  </div>
+  <div class="form-group">
+    <label>Wallet password: </label>
+    <input class="form-control" type="password" formControlName="walletPassword" placeholder="Enter password here.">
+  </div>
+  <div class="form-group">
+    <label>Name:</label>
+    <input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
+  </div>
+  <div class="form-group">
+    <label>Network:</label>
+    <select name="network" formControlName="selectNetwork">
+      <option value="main">Main</option>
+      <option value="test">Testnet</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <button type="submit" [disabled]="!recoverWalletForm.valid" class="btn btn-success">Recover Wallet</button>
+  </div>
+  <div class="form-group">
+    <button type="button" class="btn btn-success" (click)="onBackClicked()">Back</button>
+  </div>
+</form>

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

 import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../../shared/api/api.service'
-import { WalletRecovery } from '../../shared/wallet-recovery'
+import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { GlobalService } from '../../shared/services/global.service';
+import { ApiService } from '../../shared/services/api.service';
+
+import { WalletRecovery } from '../../shared/classes/wallet-recovery';
 
 @Component({
   selector: 'app-recover',
@@ -9,26 +14,43 @@ import { WalletRecovery } from '../../shared/wallet-recovery'
 })
 export class RecoverComponent implements OnInit {
 
-  constructor(private apiService: ApiService) { }
+  constructor(private globalService: GlobalService, private apiService: ApiService, private router: Router, private fb: FormBuilder) {
+    this.recoverWalletForm = fb.group({
+      "walletMnemonic": ["", Validators.required],
+      "walletPassword": ["", Validators.required],
+      "walletName": ["", Validators.required],
+      "selectNetwork": ["main", Validators.required]
+    });
+  }
 
+  private recoverWalletForm: FormGroup;
   private walletRecovery: WalletRecovery;
-  
+
   private responseMessage: string;
   private errorMessage: string;
 
   ngOnInit() {
   }
 
-  private recoverWallet(mnemonic: string, password: string, folderPath: string, name: string, network: string) {
-    this.walletRecovery = new WalletRecovery();
-    this.walletRecovery.mnemonic = mnemonic;
-    this.walletRecovery.password = password;
-    this.walletRecovery.folderPath = folderPath;
-    this.walletRecovery.name = name;
-    this.walletRecovery.network = network;
+  private onBackClicked() {
+    this.router.navigate(["/setup"]);
+  }
+
+  private onRecoverClicked(){
+    this.walletRecovery = new WalletRecovery(
+      this.recoverWalletForm.get("walletMnemonic").value,
+      this.recoverWalletForm.get("walletPassword").value,
+      this.recoverWalletForm.get("selectNetwork").value,
+      this.globalService.getWalletPath(),
+      this.recoverWalletForm.get("walletName").value
+      );
+    this.recoverWallet(this.walletRecovery);
+  }
+
+  private recoverWallet(recoverWallet: WalletRecovery) {
 
     this.apiService
-      .recoverWallet(this.walletRecovery)
+      .recoverWallet(recoverWallet)
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {
@@ -43,4 +65,4 @@ export class RecoverComponent implements OnInit {
         }
       );
   }
-}
\ No newline at end of file
+}

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

@@ -6,9 +6,10 @@ import { CreateComponent } from './create/create.component';
 import { RecoverComponent } from './recover/recover.component';
 
 const routes: Routes = [
+  { path: '', redirectTo: 'setup', pathMatch: 'full'},
   { path: 'setup', component: SetupComponent },
-  { path: 'setup/create', component: CreateComponent },
-  { path: 'setup/recover', component: RecoverComponent }
+  { path: 'create', component: CreateComponent },
+  { path: 'recover', component: RecoverComponent }
 ];
 
 @NgModule({

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

@@ -5,5 +5,6 @@
 <p>
   Users who have previously used Breeze, can choose to recover their wallet.
 </p>
-<button (click)="createWallet()">Create</button>
-<button (click)="recoverWallet()">Recover</button>
\ No newline at end of file
+<button (click)="onCreateClicked()">Create</button>
+<button (click)="onRecoverClicked()">Recover</button>
+<button (click)="onBackClicked()">Back</button>

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

 import { Component } from '@angular/core';
+import {Location} from '@angular/common';
 import { Router } from '@angular/router';
 
 @Component({
@@ -7,12 +8,16 @@ import { Router } from '@angular/router';
   styleUrls: ['./setup.component.css'],
 })
 export class SetupComponent {
-  constructor(private router: Router) {}
-  private createWallet() {
-    this.router.navigate(['/setup/create'])
+  constructor(private router: Router, private location: Location) {}
+  private onCreateClicked() {
+    this.router.navigate(['/setup/create']);
   }
 
-  private recoverWallet() {
-    this.router.navigate(['/setup/recover'])
+  private onRecoverClicked() {
+    this.router.navigate(['/setup/recover']);
+  }
+
+  private onBackClicked() {
+    this.router.navigate(['']);
   }
 }

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

-import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RouterModule }   from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { SetupComponent } from './setup.component';
 import { CreateComponent } from './create/create.component';
@@ -13,17 +12,17 @@ import { RecoverComponent } from './recover/recover.component';
 
 @NgModule({
   imports: [
-    BrowserModule,
-    FormsModule,
+    CommonModule,
+    ReactiveFormsModule,
     SetupRoutingModule,
-    SharedModule
+    SharedModule.forRoot()
   ],
   declarations: [
     CreateComponent,
     SetupComponent,
     RecoverComponent
   ],
-  exports: [ SetupComponent ],
+  exports: [],
   providers: []
 })
 

Breeze.UI/src/app/shared/wallet-creation.ts → Breeze.UI/src/app/shared/classes/wallet-creation.ts

 export class WalletCreation {
+
+  constructor(password: string, network:string, folderPath: string, name: string) {
+    this.password = password;
+    this.network = network;
+    this.folderPath = folderPath;
+    this.name = name;
+  }
+
   password: string;
   network: string;
   folderPath: string;

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

+export class WalletLoad {
+
+  constructor(password: string, folderPath: string, name: string) {
+    this.password = password;
+    this.folderPath = folderPath;
+    this.name = name;
+  }
+
+  private password: string;
+  private folderPath: string;
+  private name: string;
+}

Breeze.UI/src/app/shared/wallet-recovery.ts → Breeze.UI/src/app/shared/classes/wallet-recovery.ts

 export class WalletRecovery {
+
+  constructor(mnemonic: string, password: string, network:string, folderPath: string, name: string) {
+    this.mnemonic = mnemonic;
+    this.password = password;
+    this.network = network;
+    this.folderPath = folderPath;
+    this.name = name;
+  }
+
   mnemonic: string;
   password: string;
   folderPath: string;
   name: string;
   network: string;
-}
\ No newline at end of file
+}

Breeze.UI/src/app/shared/pipes/coin-abbreviation.pipe.spec.ts

+import { CoinAbbreviationPipe } from './coin-abbreviation.pipe';
+
+describe('CoinAbbreviationPipe', () => {
+  it('create an instance', () => {
+    const pipe = new CoinAbbreviationPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

Breeze.UI/src/app/shared/pipes/coin-abbreviation.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'coinAbbreviation'
+})
+export class CoinAbbreviationPipe implements PipeTransform {
+
+  transform(value: any): any {
+    if (!value) return value;
+
+    let abbreviationAdded = value + " BTC"
+    return abbreviationAdded;
+  }
+}

Breeze.UI/src/app/shared/pipes/coin-notation.pipe.spec.ts

+import { CoinNotationPipe } from './coin-notation.pipe';
+
+describe('CoinNotationPipe', () => {
+  it('create an instance', () => {
+    const pipe = new CoinNotationPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

Breeze.UI/src/app/shared/pipes/coin-notation.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'coinNotation'
+})
+export class CoinNotationPipe implements PipeTransform {
+
+  transform(value: any): any {
+    if (!value) return value;
+
+    let coinNotation = Number(value).toFixed(8);
+    return coinNotation;
+  }
+}

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

@@ -4,10 +4,10 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 
-import { WalletCreation } from '../wallet-creation';
-import { WalletRecovery } from '../wallet-recovery';
-import { WalletLoad } from '../wallet-load';
-import { Mnemonic } from '../mnemonic';
+import { WalletCreation } from '../classes/wallet-creation';
+import { WalletRecovery } from '../classes/wallet-recovery';
+import { WalletLoad } from '../classes/wallet-load';
+import { Mnemonic } from '../classes/mnemonic';
 
 /**
  * For information on the API specification have a look at our Github:
@@ -26,7 +26,7 @@ export class ApiService {
      */
      getWalletFiles(): Observable<any> {
         return this.http
-          .get(this.mockApiUrl + '/wallet/files')
+          .get(this.webApiUrl + '/wallet/files')
           .map((response: Response) => response);
      }
 
@@ -67,7 +67,7 @@ export class ApiService {
     }
 
     /**
-     * Get wallet balance info from the API. 
+     * Get wallet balance info from the API.
      */
     getWalletBalance(): Observable<any> {
       return this.http

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

+import {Injectable} from "@angular/core";
+
+@Injectable()
+export class GlobalService {
+    constructor() {}
+
+    private walletPath: string;
+    private currentWalletName: string;
+
+    getWalletPath() {
+        return this.walletPath;
+    }
+
+    setWalletPath(walletPath: string) {
+        this.walletPath = walletPath;
+    }
+
+    getCurrentWalletName() {
+        return this.currentWalletName;
+    }
+
+    setCurrentWalletName(currentWalletName: string) {
+        this.currentWalletName = currentWalletName;
+    }
+}
\ No newline at end of file

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

 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-
-import { ApiService} from './api/api.service';
+import { CoinNotationPipe } from './pipes/coin-notation.pipe';
+import { CoinAbbreviationPipe } from './pipes/coin-abbreviation.pipe';
 
 @NgModule({
-  imports: [CommonModule, RouterModule],
-  declarations: [],
-  exports: [CommonModule, FormsModule, RouterModule]
+  imports: [CommonModule],
+  declarations: [CoinNotationPipe, CoinAbbreviationPipe],
+  exports: [CoinNotationPipe, CoinAbbreviationPipe]
 })
 
 export class SharedModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: SharedModule,
-      providers: [ApiService]
+      providers: []
     };
   }
-}
\ No newline at end of file
+}

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

-export class WalletLoad {
-  password: string;
-  folderPath: string;
-  name: string;
-}
\ No newline at end of file

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

 import { Component, OnInit } from '@angular/core';
 
-import { ApiService } from '../../shared/api/api.service'
+import { ApiService } from '../../shared/services/api.service'
 
 @Component({
   selector: 'history-component',

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

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

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

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoinNotationPipe } from '../../shared/pipes/coin-notation.pipe';
+import { CoinAbbreviationPipe } from '../../shared/pipes/coin-abbreviation.pipe';
 
 import { DashboardComponent } from './dashboard.component';
 

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

 import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../../shared/api/api.service';
+import { ApiService } from '../../shared/services/api.service';
 
 @Component({
   selector: 'dashboard-component',

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

 import { Component, OnInit } from '@angular/core';
 
-import { ApiService } from '../../shared/api/api.service'
+import { ApiService } from '../../shared/services/api.service'
 
 @Component({
   selector: 'receive-component',

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

 import { Component } from '@angular/core';
-import { ApiService } from '../../shared/api/api.service';
+import { ApiService } from '../../shared/services/api.service';
 
 @Component({
   selector: 'send-component',

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

@@ -7,9 +7,10 @@ import { ReceiveComponent } from './receive/receive.component';
 import { HistoryComponent } from './history/history.component';
 
 const routes: Routes = [
-  { path: 'wallet', component: WalletComponent, 
+  { path: '', redirectTo: 'wallet', pathMatch: 'full' },
+  { path: 'wallet', component: WalletComponent,
     children: [
-      { path: '', redirectTo:'send', pathMatch:'full' },
+      { path: '', redirectTo:'history', pathMatch:'full' },
       { path: 'send', component: SendComponent},
       { path: 'receive', component: ReceiveComponent},
       { path: 'history', component: HistoryComponent}

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

-import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RouterModule }   from '@angular/router';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { WalletComponent } from './wallet.component';
 import { MenuComponent } from './menu/menu.component';
@@ -10,16 +9,16 @@ import { SendComponent } from './send/send.component';
 import { ReceiveComponent } from './receive/receive.component';
 import { HistoryComponent } from './history/history.component';
 
-import { SharedModule } from '../shared/shared.module';
-
+import {SharedModule} from '../shared/shared.module';
 import { WalletRoutingModule } from './wallet-routing.module';
 
 @NgModule({
   imports: [
-    BrowserModule,
+    CommonModule,
     FormsModule,
-    WalletRoutingModule,
-    SharedModule
+    SharedModule.forRoot(),
+    ReactiveFormsModule,
+    WalletRoutingModule
   ],
   declarations: [
     WalletComponent,
@@ -29,9 +28,7 @@ import { WalletRoutingModule } from './wallet-routing.module';
     SendComponent,
     HistoryComponent
   ],
-  exports: [
-    WalletComponent
-  ]
+  exports: []
 })
 
 export class WalletModule { }