Add sending and receiving to the UI

Breeze.UI/package.json

@@ -33,6 +33,7 @@
     "@angular/platform-browser-dynamic": "^4.1.2",
     "@angular/platform-server": "^4.1.2",
     "@angular/router": "^4.1.2",
+    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25",
     "angular2-material-datepicker": "^0.5.0",
     "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",

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

@@ -3,6 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { HttpModule } from '@angular/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 
 import { SharedModule } from './shared/shared.module';
 
@@ -14,6 +15,9 @@ import { LoginComponent } from './login/login.component';
 import { ApiService } from './shared/services/api.service';
 import { GlobalService } from './shared/services/global.service';
 
+import { SendComponent } from './wallet/send/send.component';
+import { ReceiveComponent } from './wallet/receive/receive.component';
+
 
 @NgModule({
   imports: [
@@ -23,11 +27,18 @@ import { GlobalService } from './shared/services/global.service';
     ReactiveFormsModule,
     FormsModule,
     HttpModule,
+    NgbModule.forRoot(),
     SharedModule.forRoot()
   ],
   declarations: [
     AppComponent,
-    LoginComponent
+    LoginComponent,
+    SendComponent,
+    ReceiveComponent
+  ],
+  entryComponents: [
+    SendComponent,
+    ReceiveComponent
   ],
   providers: [ ApiService, GlobalService ],
   bootstrap: [ AppComponent ]

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

+#transactions {
+  margin-top: 10px;
+}

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

@@ -15,7 +15,7 @@
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="row" id="transactions">
     <div class="col">
       <div>Transactions</div>
       <table *ngIf="transactions; else noTransactions">
@@ -29,7 +29,7 @@
             <!--<td *ngIf="{{ transaction.amount }} < 0">SENT</td>
             <td *ngIf="{{ transaction.amount }} > 0">RECEIVED</td>-->
             <td *ngIf="i<5">{{ transaction.timestamp }}</td>
-            <td *ngIf="i<5">{{ transaction.amount }}</td>
+            <td *ngIf="i<5">{{ transaction.amount | coinNotation | coinAbbreviation }}</td>
             <td *ngIf="i<5">{{ transaction.confirmed }}</td>
             <td *ngIf="i<5">{{ transaction.txId }}</td>
         </tr>

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

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, 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';
 import { WalletInfo } from '../../shared/classes/wallet-info';
 
+import { SendComponent } from '../send/send.component';
+import { ReceiveComponent } from '../receive/receive.component';
+
 @Component({
   selector: 'dashboard-component',
   templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.css'],
+  styleUrls: ['./dashboard.component.css']
 })
 
 export class DashboardComponent {
-  constructor(private apiService: ApiService, private globalService: GlobalService) {}
+  constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal) {}
 
   private balanceResponse: any;
   private confirmedBalance: number;
@@ -24,11 +29,11 @@ export class DashboardComponent {
   };
 
   private openSendDialog() {
-
+    const modalRef = this.modalService.open(SendComponent);
   };
 
   private openReceiveDialog() {
-
+    const modalRef = this.modalService.open(ReceiveComponent);
   };
 
   private getWalletBalance() {

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

@@ -2,8 +2,6 @@
   <div class="container">
     <ul class="navbar-nav mr-auto" routerLinkActive="active">
       <li class="nav-item"><a class="nav-link" routerLink="dashboard">Dashboard</a></li>
-      <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>
       <li class="nav-item"><a class="nav-link" routerLink="history">History</a></li>
       <li class="nav-item"><a class="nav-link" (click)="logOut()">Logout</a></li>
     </ul>

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

+#receiveForm {
+  padding: 10px;
+}

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

-<div class="content-wrapper">
+<div class="content-wrapper" id="receiveForm">
     <h1>Receive</h1>
     <div>
         <div>
@@ -10,6 +10,7 @@
                     <td>{{ address }}</td>
                 </tr>
             </table>
+            <button type="button" class="btn" (click)="activeModal.close('Close click')">Close</button>
         </div>
     </div>
 </div>

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

@@ -5,6 +5,8 @@ import { GlobalService } from '../../shared/services/global.service';
 
 import { WalletInfo } from '../../shared/classes/wallet-info';
 
+import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
+
 @Component({
   selector: 'receive-component',
   templateUrl: './receive.component.html',
@@ -12,7 +14,7 @@ import { WalletInfo } from '../../shared/classes/wallet-info';
 })
 
 export class ReceiveComponent {
-  constructor(private apiService: ApiService, private globalService: GlobalService) {}
+  constructor(private apiService: ApiService, private globalService: GlobalService, public activeModal: NgbActiveModal) {}
 
   private address: any;
   private errorMessage: string;

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

+#sendForm {
+  padding: 10px;
+}

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

-<div class="content-wrapper">
+<div class="content-wrapper" id="sendForm">
   <h1>Send</h1>
-  <form (ngSubmit)="onSubmit()" #sendForm="ngForm">
+  <form [formGroup]="sendForm" (ngSubmit)="send()">
       <div class="form-group">
-        <label for="toAddress">Pay To: </label>
-        <input type="text" class="form-control" id="name" required name="toAddress">
+        <label>Pay To: </label>
+        <input class="form-control" formControlName="address" type="text" placeholder="Please enter the recipients address.">
+        <div *ngIf="formErrors.address" class="alert alert-danger">{{formErrors.address}}</div>
       </div>
       <div class="form-group">
-        <label for="amount">Amount</label>
-        <input type="text" class="form-control" id="amount" required name="amount">
+        <label>Amount</label>
+        <input class="form-control" formControlName="amount" type="text" placeholder="Please enter the amount you want to send.">
+        <div *ngIf="formErrors.amount" class="alert alert-danger">{{formErrors.amount}}</div>
       </div>
-      <button type="submit" class="btn btn-success">Submit</button>
+      <button type="submit" [disabled]="!sendForm.valid" class="btn btn-success">Send</button>
+      <button type="button" class="btn" (click)="activeModal.close('Close click')">Close</button>
   </form>
 </div>

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

 import { Component } from '@angular/core';
 import { ApiService } from '../../shared/services/api.service';
+import { GlobalService } from '../../shared/services/global.service';
+import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
+
+import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
+
+import { TransactionBuilding } from '../../shared/classes/transaction-building';
+import { TransactionSending } from '../../shared/classes/transaction-sending';
 
 @Component({
   selector: 'send-component',
@@ -8,6 +15,104 @@ import { ApiService } from '../../shared/services/api.service';
 })
 
 export class SendComponent {
-  constructor(private apiService: ApiService) {}
+  constructor(private apiService: ApiService, private globalService: GlobalService, public activeModal: NgbActiveModal, private fb: FormBuilder) {
+    this.buildSendForm();
+  }
+
+  private sendForm: FormGroup;
+  private responseMessage: any;
+  private errorMessage: string;
+
+  private buildSendForm(): void {
+    this.sendForm = this.fb.group({
+      "address": ["", Validators.required],
+      "amount": ["", Validators.required]
+    });
+
+    this.sendForm.valueChanges
+      .subscribe(data => this.onValueChanged(data));
+
+    this.onValueChanged();
+  }
+
+  onValueChanged(data?: any) {
+    if (!this.sendForm) { return; }
+    const form = this.sendForm;
+    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 = {
+    'address': '',
+    'amount': ''
+  };
+
+  validationMessages = {
+    'address': {
+      'required': 'An address is required.'
+    },
+    'amount': {
+      'required': 'An amount is required.'
+    }
+  };
+
+  private send() {
+
+    let transaction = new TransactionBuilding(
+      this.globalService.getWalletName(),
+      this.globalService.getCoinType(),
+      "account 0",
+      "123",
+      this.sendForm.get("address").value,
+      this.sendForm.get("amount").value,
+      "medium",
+      true
+    );
+
+    this.apiService
+      .buildTransaction(transaction)
+      .subscribe(
+        response => {
+          if (response.status >= 200 && response.status < 400){
+            this.responseMessage = response.json();
+            console.log(this.responseMessage);
+          }
+        },
+        error => {
+          if (error.status >= 400) {
+            this.errorMessage = error;
+            console.log(this.errorMessage);
+          }
+        },
+        () => this.sendTransaction(this.responseMessage.hex)
+      );
+  };
 
+  private sendTransaction(hex: string) {
+    let transaction = new TransactionSending(hex);
+    this.apiService
+      .sendTransaction(transaction)
+      .subscribe(
+        response => {
+          if (response.status >= 200 && response.status < 400){
+            console.log(response.status);
+            this.activeModal.close("Close clicked");
+          }
+        },
+        error => {
+          if (error.status >= 400) {
+            this.errorMessage = error;
+            console.log(this.errorMessage);
+          }
+        }
+      );
+  }
 }

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

@@ -13,8 +13,6 @@ const routes: Routes = [
     children: [
       { path: '', redirectTo:'dashboard', pathMatch:'full' },
       { path: 'dashboard', component: DashboardComponent},
-      { path: 'send', component: SendComponent},
-      { path: 'receive', component: ReceiveComponent},
       { path: 'history', component: HistoryComponent}
     ]
   },

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

@@ -5,8 +5,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { WalletComponent } from './wallet.component';
 import { MenuComponent } from './menu/menu.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { SendComponent } from './send/send.component';
-import { ReceiveComponent } from './receive/receive.component';
 import { HistoryComponent } from './history/history.component';
 
 import {SharedModule} from '../shared/shared.module';
@@ -24,8 +22,6 @@ import { WalletRoutingModule } from './wallet-routing.module';
     WalletComponent,
     MenuComponent,
     DashboardComponent,
-    ReceiveComponent,
-    SendComponent,
     HistoryComponent
   ],
   exports: []

Breeze.UI/src/styles.css

@@ -4,6 +4,11 @@
   font-family: "Lato";
 }
 
+/* Temporary min td with */
+td {
+  min-width: 150px;
+}
+
 .content-wrapper {
   width: 100%;
   height: 100%;