Add send confirmation modal

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

@@ -17,6 +17,7 @@ import { ApiService } from './shared/services/api.service';
 import { GlobalService } from './shared/services/global.service';
 
 import { SendComponent } from './wallet/send/send.component';
+import { SendConfirmationComponent } from './wallet/send/send-confirmation/send-confirmation.component';
 import { ReceiveComponent } from './wallet/receive/receive.component';
 import { TransactionDetailsComponent } from './wallet/transaction-details/transaction-details.component';
 import { LogoutConfirmationComponent } from './wallet/logout-confirmation/logout-confirmation.component';
@@ -39,11 +40,13 @@ import { LogoutConfirmationComponent } from './wallet/logout-confirmation/logout
     LoginComponent,
     LogoutConfirmationComponent,
     SendComponent,
+    SendConfirmationComponent,
     ReceiveComponent,
     TransactionDetailsComponent
   ],
   entryComponents: [
     SendComponent,
+    SendConfirmationComponent,
     ReceiveComponent,
     TransactionDetailsComponent,
     LogoutConfirmationComponent

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

+
+<div id="modalCheck" tabindex="-1" role="dialog" aria-labelledby="modal_check" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div>
+      <div class="modal-body">
+        <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>
+        <p class="lead text-success text-center">
+          <strong>Your transaction has been sent with success !</strong>
+           <small class="text-center">
+            <a class="btn btn-link" (click)="toggleDetails()">Show details</a>
+          </small> 
+        </p>
+         <div *ngIf="showDetails" id="collapseExample">
+          <div class="card card-block">
+            <ul class="list-inline row">
+              <li class="list-inline-item col blockLabel">Type</li>
+              <li class="list-inline-item col-9 blockText">Sent</li>
+            </ul>
+            <ul class="list-inline row">
+              <li class="list-inline-item col blockLabel">Amount</li>
+              <li class="list-inline-item col-9 blockText"><strong class="text-danger">-{{ transaction.amount }}</strong> <small class="text-uppercase ml-2">BTC</small></li>
+            </ul>
+            <ul class="list-inline row">
+              <li class="list-inline-item col blockLabel">Destination</li>
+              <li class="list-inline-item col-9 blockText"><code>{{ transaction.destinationAddress }}</code></li>
+            </ul>
+            <!-- <ul class="list-inline row">
+              <li class="list-inline-item col blockLabel">Date</li>
+              <li class="list-inline-item col-9 blockText"><small>{{ transaction.timestamp * 1000 | date:'medium' }}</small></li>
+            </ul>
+            <ul class="list-inline row">
+              <li class="list-inline-item col blockLabel">transaction ID</li>
+              <li class="list-inline-item col-9 blockText blockID"><code>{{ transaction.id }}</code></li>
+            </ul> -->
+          </div>
+        </div>
+      </div> 
+      <div class="modal-footer">
+        <button type="button" class="btn btn-lg btn-primary" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">OK</button>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

Breeze.UI/src/app/wallet/send/send-confirmation/send-confirmation.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SendConfirmationComponent } from './send-confirmation.component';
+
+describe('SendConfirmationComponent', () => {
+  let component: SendConfirmationComponent;
+  let fixture: ComponentFixture<SendConfirmationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SendConfirmationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SendConfirmationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit, Input } from '@angular/core';
+
+import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-send-confirmation',
+  templateUrl: './send-confirmation.component.html',
+  styleUrls: ['./send-confirmation.component.css']
+})
+export class SendConfirmationComponent implements OnInit {
+
+  @Input() transaction: any;
+  constructor(public activeModal: NgbActiveModal) { }
+
+  private showDetails: boolean = false;
+
+  ngOnInit() {
+    console.log(this.transaction);
+  }
+
+  toggleDetails() {
+    this.showDetails = !this.showDetails;
+  }
+}

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

@@ -3,11 +3,13 @@ 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 { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { TransactionBuilding } from '../../shared/classes/transaction-building';
 import { TransactionSending } from '../../shared/classes/transaction-sending';
 
+import { SendConfirmationComponent } from './send-confirmation/send-confirmation.component';
+
 @Component({
   selector: 'send-component',
   templateUrl: './send.component.html',
@@ -15,13 +17,14 @@ import { TransactionSending } from '../../shared/classes/transaction-sending';
 })
 
 export class SendComponent {
-  constructor(private apiService: ApiService, private globalService: GlobalService, public activeModal: NgbActiveModal, private fb: FormBuilder) {
+  constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal, public activeModal: NgbActiveModal, private fb: FormBuilder) {
     this.buildSendForm();
   }
 
   private sendForm: FormGroup;
   private responseMessage: any;
   private errorMessage: string;
+  private transaction: TransactionBuilding;
 
   private buildSendForm(): void {
     this.sendForm = this.fb.group({
@@ -76,8 +79,7 @@ export class SendComponent {
   };
 
   private send() {
-
-    let transaction = new TransactionBuilding(
+    this.transaction = new TransactionBuilding(
       this.globalService.getWalletName(),
       this.globalService.getCoinType(),
       "account 0",
@@ -89,7 +91,7 @@ export class SendComponent {
     );
 
     this.apiService
-      .buildTransaction(transaction)
+      .buildTransaction(this.transaction)
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400){
@@ -110,7 +112,7 @@ export class SendComponent {
             }
           }
         },
-        () => this.sendTransaction("123")
+        () => this.sendTransaction(this.responseMessage.hex)
       )
     ;
   };
@@ -150,8 +152,14 @@ export class SendComponent {
               alert(error.json().errors[0].message);
             }
           }
-        }
+        },
+        ()=>this.openConfirmationModal()
       )
     ;
   }
+
+  private openConfirmationModal() {
+    const modalRef = this.modalService.open(SendConfirmationComponent);
+    modalRef.componentInstance.transaction = this.transaction;
+  }
 }