Commit 5c1388d3 authored by dev0tion's avatar dev0tion

Add send confirmation modal

parent a41c68bd
......@@ -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
......
<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
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();
});
});
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;
}
}
......@@ -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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment