Commit 2022fae5 authored by Pieterjan Vanhoof's avatar Pieterjan Vanhoof Committed by GitHub

Merge pull request #271 from stratisproject/ui

Various UI additions
parents 6d626805 bd1111f6
...@@ -144,7 +144,7 @@ function startBitcoinApi() { ...@@ -144,7 +144,7 @@ function startBitcoinApi() {
apiPath = path.join(__dirname, '".\\assets\\daemon\\Stratis.BreezeD.exe"'); apiPath = path.join(__dirname, '".\\assets\\daemon\\Stratis.BreezeD.exe"');
} }
bitcoinProcess = execBitcoin('"' + apiPath + '" light -testnet', { bitcoinProcess = execBitcoin('"' + apiPath + '" -testnet', {
detached: true detached: true
}, (error, stdout, stderr) => { }, (error, stdout, stderr) => {
if (error) { if (error) {
...@@ -168,7 +168,7 @@ function startStratisApi() { ...@@ -168,7 +168,7 @@ function startStratisApi() {
apiPath = path.join(__dirname, '".\\assets\\daemon\\Stratis.BreezeD.exe"'); apiPath = path.join(__dirname, '".\\assets\\daemon\\Stratis.BreezeD.exe"');
} }
stratisProcess = execStratis('"' + apiPath + '" stratis light -testnet', { stratisProcess = execStratis('"' + apiPath + '" stratis -testnet', {
detached: true detached: true
}, (error, stdout, stderr) => { }, (error, stdout, stderr) => {
if (error) { if (error) {
......
...@@ -28,7 +28,6 @@ export class RecoverComponent implements OnInit { ...@@ -28,7 +28,6 @@ export class RecoverComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.bsConfig = Object.assign({}, {showWeekNumbers: false, containerClass: 'theme-blue'}); this.bsConfig = Object.assign({}, {showWeekNumbers: false, containerClass: 'theme-blue'});
console.log(new Date());
} }
private buildRecoverForm(): void { private buildRecoverForm(): void {
......
...@@ -5,11 +5,17 @@ ...@@ -5,11 +5,17 @@
<div class="jumbotron jumbotron-fluid"> <div class="jumbotron jumbotron-fluid">
<div class="container"> <div class="container">
<div class="row d-flex align-items-center"> <div class="row d-flex align-items-center">
<div class="col-xs-12 col-md-4 text-left"> <div class="col-xs-12 col-md-3 text-left">
<h5>Active Wallet</h5>
<p class="lead">
<strong>{{ walletName }}</strong>
</p>
</div>
<div class="col-xs-12 col-md-3 text-left">
<h5>Active balance</h5> <h5>Active balance</h5>
<p class="lead"> <p class="lead">
<!--<strong><span class="h2">29</span>.76500293</strong>--> <!--<strong><span class="h2">29</span>.76500293</strong>-->
<strong>{{ confirmedBalance | coinNotation }}</strong> <strong>{{ (confirmedBalance | coinNotation) || (0 | coinNotation) }}</strong>
<small class="text-uppercase"> {{ coinUnit }}</small> <small class="text-uppercase"> {{ coinUnit }}</small>
</p> </p>
</div> </div>
...@@ -22,15 +28,15 @@ ...@@ -22,15 +28,15 @@
<small class="text-uppercase">usd</small> <small class="text-uppercase">usd</small>
</p> </p>
</div>--> </div>-->
<div class="col-xs-12 col-md-4 text-left"> <div class="col-xs-12 col-md-3 text-left">
<h5>Unconfirmed balance</h5> <h5>Unconfirmed balance</h5>
<p class="lead"> <p class="lead">
<strong>{{ unconfirmedBalance | coinNotation }}</strong> <strong>{{ (unconfirmedBalance | coinNotation) || (0 | coinNotation) }}</strong>
<small class="text-uppercase"> {{ coinUnit }}</small> <small class="text-uppercase"> {{ coinUnit }}</small>
</p> </p>
</div> </div>
<!-- /col--> <!-- /col-->
<div class="col-xs-12 col-md-4 text-right"> <div class="col-xs-12 col-md-3 text-right">
<p> <p>
<a class="btn btn-secondary" data-toggle="modal" data-target="#modalReceive" role="button" (click)="openReceiveDialog()">Receive</a> <a class="btn btn-secondary" data-toggle="modal" data-target="#modalReceive" role="button" (click)="openReceiveDialog()">Receive</a>
<a class="btn btn-primary ml-2" data-toggle="modal" data-target="#modalSend" role="button" (click)="openSendDialog()">Send</a> <a class="btn btn-primary ml-2" data-toggle="modal" data-target="#modalSend" role="button" (click)="openSendDialog()">Send</a>
...@@ -56,7 +62,7 @@ ...@@ -56,7 +62,7 @@
<li class="list-inline-item col-4 amount text-left align-baseline"> <li class="list-inline-item col-4 amount text-left align-baseline">
<span *ngIf="transaction.transactionType == 'received'" class="text-success">+</span> <span *ngIf="transaction.transactionType == 'received'" class="text-success">+</span>
<span *ngIf="transaction.transactionType == 'sent'" class="text-danger">-</span> <span *ngIf="transaction.transactionType == 'sent'" class="text-danger">-</span>
{{ transaction.transactionAmount | coinNotation }} {{ transaction.transactionAmount + transaction.transactionFee | coinNotation }}
<small class="text-uppercase">{{ coinUnit }}</small> <small class="text-uppercase">{{ coinUnit }}</small>
<span *ngIf="transaction.transactionConfirmedInBlock" class="badge badge-success text-capitalize">Confirmed</span> <span *ngIf="transaction.transactionConfirmedInBlock" class="badge badge-success text-capitalize">Confirmed</span>
<span *ngIf="!transaction.transactionConfirmedInBlock" class="badge badge-warning text-capitalize">Pending</span> <span *ngIf="!transaction.transactionConfirmedInBlock" class="badge badge-warning text-capitalize">Pending</span>
......
...@@ -22,15 +22,17 @@ import { Subscription } from 'rxjs/Subscription'; ...@@ -22,15 +22,17 @@ import { Subscription } from 'rxjs/Subscription';
export class DashboardComponent implements OnInit { export class DashboardComponent implements OnInit {
constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal) {} constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal) {}
public walletName: string;
public coinUnit: string;
public confirmedBalance: number; public confirmedBalance: number;
public unconfirmedBalance: number; public unconfirmedBalance: number;
public transactionArray: TransactionInfo[]; public transactionArray: TransactionInfo[];
public coinUnit: string;
private walletBalanceSubscription: Subscription; private walletBalanceSubscription: Subscription;
private walletHistorySubscription: Subscription; private walletHistorySubscription: Subscription;
ngOnInit() { ngOnInit() {
this.startSubscriptions(); this.startSubscriptions();
this.walletName = this.globalService.getWalletName();
this.coinUnit = this.globalService.getCoinUnit(); this.coinUnit = this.globalService.getCoinUnit();
}; };
...@@ -65,6 +67,7 @@ export class DashboardComponent implements OnInit { ...@@ -65,6 +67,7 @@ export class DashboardComponent implements OnInit {
error => { error => {
console.log(error); console.log(error);
if (error.status === 0) { if (error.status === 0) {
this.cancelSubscriptions();
alert("Something went wrong while connecting to the API. Please restart the application."); alert("Something went wrong while connecting to the API. Please restart the application.");
} else if (error.status >= 400) { } else if (error.status >= 400) {
if (!error.json().errors[0]) { if (!error.json().errors[0]) {
...@@ -101,6 +104,7 @@ export class DashboardComponent implements OnInit { ...@@ -101,6 +104,7 @@ export class DashboardComponent implements OnInit {
error => { error => {
console.log(error); console.log(error);
if (error.status === 0) { if (error.status === 0) {
this.cancelSubscriptions();
alert("Something went wrong while connecting to the API. Please restart the application."); alert("Something went wrong while connecting to the API. Please restart the application.");
} else if (error.status >= 400) { } else if (error.status >= 400) {
if (!error.json().errors[0]) { if (!error.json().errors[0]) {
...@@ -132,7 +136,12 @@ export class DashboardComponent implements OnInit { ...@@ -132,7 +136,12 @@ export class DashboardComponent implements OnInit {
} }
let transactionId = transaction.id; let transactionId = transaction.id;
let transactionAmount = transaction.amount; let transactionAmount = transaction.amount;
let transactionFee = transaction.fee; let transactionFee;
if (transaction.fee) {
transactionFee = transaction.fee;
} else {
transactionFee = 0;
}
let transactionConfirmedInBlock = transaction.confirmedInBlock; let transactionConfirmedInBlock = transaction.confirmedInBlock;
let transactionTimestamp = transaction.timestamp; let transactionTimestamp = transaction.timestamp;
let transactionConfirmed; let transactionConfirmed;
......
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<li class="list-inline-item col-4 amount text-left align-baseline"> <li class="list-inline-item col-4 amount text-left align-baseline">
<span *ngIf="transaction.transactionType == 'received'" class="text-success">+</span> <span *ngIf="transaction.transactionType == 'received'" class="text-success">+</span>
<span *ngIf="transaction.transactionType == 'sent'" class="text-danger">-</span> <span *ngIf="transaction.transactionType == 'sent'" class="text-danger">-</span>
{{ transaction.transactionAmount | coinNotation }} {{ transaction.transactionAmount + transaction.transactionFee | coinNotation }}
<small class="text-uppercase"> {{ coinUnit }} </small> <small class="text-uppercase"> {{ coinUnit }} </small>
<span *ngIf="transaction.transactionConfirmedInBlock" class="badge badge-success text-capitalize">Confirmed</span> <span *ngIf="transaction.transactionConfirmedInBlock" class="badge badge-success text-capitalize">Confirmed</span>
<span *ngIf="!transaction.transactionConfirmedInBlock" class="badge badge-warning text-capitalize">Pending</span> <span *ngIf="!transaction.transactionConfirmedInBlock" class="badge badge-warning text-capitalize">Pending</span>
......
...@@ -57,6 +57,7 @@ export class HistoryComponent { ...@@ -57,6 +57,7 @@ export class HistoryComponent {
error => { error => {
console.log(error); console.log(error);
if (error.status === 0) { if (error.status === 0) {
this.cancelSubscriptions();
alert("Something went wrong while connecting to the API. Please restart the application."); alert("Something went wrong while connecting to the API. Please restart the application.");
} else if (error.status >= 400) { } else if (error.status >= 400) {
if (!error.json().errors[0]) { if (!error.json().errors[0]) {
...@@ -88,7 +89,12 @@ export class HistoryComponent { ...@@ -88,7 +89,12 @@ export class HistoryComponent {
} }
let transactionId = transaction.id; let transactionId = transaction.id;
let transactionAmount = transaction.amount; let transactionAmount = transaction.amount;
let transactionFee = transaction.fee; let transactionFee;
if (transaction.fee) {
transactionFee = transaction.fee;
} else {
transactionFee = 0;
}
let transactionConfirmedInBlock = transaction.confirmedInBlock; let transactionConfirmedInBlock = transaction.confirmedInBlock;
let transactionTimestamp = transaction.timestamp; let transactionTimestamp = transaction.timestamp;
let transactionConfirmed; let transactionConfirmed;
......
...@@ -116,7 +116,7 @@ export class SendComponent implements OnInit { ...@@ -116,7 +116,7 @@ export class SendComponent implements OnInit {
console.log(error); console.log(error);
} }
else { else {
alert(error.json().errors[0].message); alert(error.json().errors[0].description);
} }
} }
}, },
...@@ -158,7 +158,7 @@ export class SendComponent implements OnInit { ...@@ -158,7 +158,7 @@ export class SendComponent implements OnInit {
console.log(error); console.log(error);
} }
else { else {
alert(error.json().errors[0].message); alert(error.json().errors[0].description);
} }
} }
}, },
......
...@@ -60,6 +60,7 @@ export class StatusBarComponent implements OnInit { ...@@ -60,6 +60,7 @@ export class StatusBarComponent implements OnInit {
error => { error => {
console.log(error); console.log(error);
if (error.status === 0) { if (error.status === 0) {
this.cancelSubscriptions();
alert("Something went wrong while connecting to the API. Please restart the application."); alert("Something went wrong while connecting to the API. Please restart the application.");
} else if (error.status >= 400) { } else if (error.status >= 400) {
if (!error.json().errors[0]) { if (!error.json().errors[0]) {
......
...@@ -13,8 +13,12 @@ ...@@ -13,8 +13,12 @@
<ul class="list-inline row"> <ul class="list-inline row">
<li class="list-inline-item col blockLabel">Amount</li> <li class="list-inline-item col blockLabel">Amount</li>
<li *ngIf="transaction.transactionType == 'received'" class="list-inline-item col-9 blockText text-success">{{ transaction.transactionAmount | coinNotation }} {{ coinUnit }}</li> <li *ngIf="transaction.transactionType == 'received'" class="list-inline-item col-9 blockText text-success">{{ transaction.transactionAmount | coinNotation }} {{ coinUnit }}</li>
<li *ngIf="transaction.transactionType == 'sent'" class="list-inline-item col-9 blockText text-danger">-{{ transaction.transactionAmount | coinNotation }} {{ coinUnit }}</li> <li *ngIf="transaction.transactionType == 'sent'" class="list-inline-item col-9 blockText text-danger">-{{ transaction.transactionAmount + transaction.transactionFee | coinNotation }} {{ coinUnit }}</li>
</ul> </ul>
<!-- <ul class="list-inline row" *ngIf="transaction.transactionType == 'sent'">
<li class="list-inline-item col blockLabel">Fee</li>
<li *ngIf="transaction.transactionType == 'sent'" class="list-inline-item col-9 blockText text-danger">{{ transaction.transactionFee | coinNotation }} {{ coinUnit }}</li>
</ul> -->
<ul class="list-inline row"> <ul class="list-inline row">
<li class="list-inline-item col blockLabel">Date</li> <li class="list-inline-item col blockLabel">Date</li>
<li class="list-inline-item col-9 blockText">{{ transaction.transactionTimestamp * 1000 | date:'medium' }}</li> <li class="list-inline-item col-9 blockText">{{ transaction.transactionTimestamp * 1000 | date:'medium' }}</li>
......
...@@ -44,16 +44,14 @@ code {color: $spacegray !important;} ...@@ -44,16 +44,14 @@ code {color: $spacegray !important;}
display:inline-block; display:inline-block;
fill: $darkgray !important; fill: $darkgray !important;
} }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }
em { em {
&.display-4 { &.display-4 {
font-size: 1.6em; font-size: 1.6em;
color: $darkgray; color: $darkgray;
font-weight: 400; font-weight: 400;
padding-right: 5px; padding-right: 5px;
border-right: .1em solid $blue;
white-space: nowrap; white-space: nowrap;
-webkit-animation: blink-caret .5s step-end infinite alternate;
} }
} }
...@@ -174,7 +172,7 @@ em { ...@@ -174,7 +172,7 @@ em {
} }
} }
// bagdes // badges
.badge { .badge {
&.badge-danger {color: $pink;} &.badge-danger {color: $pink;}
&.badge-warning {color: $yellow;} &.badge-warning {color: $yellow;}
......
...@@ -61,20 +61,12 @@ code { ...@@ -61,20 +61,12 @@ code {
fill: #1B354B !important; fill: #1B354B !important;
} }
@-webkit-keyframes blink-caret {
50% {
border-color: transparent;
}
}
em.display-4 { em.display-4 {
font-size: 1.6em; font-size: 1.6em;
color: #1B354B; color: #1B354B;
font-weight: 400; font-weight: 400;
padding-right: 5px; padding-right: 5px;
border-right: 0.1em solid #7385A0;
white-space: nowrap; white-space: nowrap;
-webkit-animation: blink-caret .5s step-end infinite alternate;
} }
.datepicker__input { .datepicker__input {
......
This source diff could not be displayed because it is too large. You can view the blob instead.
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