Merge pull request #271 from stratisproject/ui

Various UI additions

Breeze.UI/main.ts

@@ -144,7 +144,7 @@ function startBitcoinApi() {
       apiPath = path.join(__dirname, '".\\assets\\daemon\\Stratis.BreezeD.exe"');
   }
 
-  bitcoinProcess = execBitcoin('"' + apiPath + '" light -testnet', {
+  bitcoinProcess = execBitcoin('"' + apiPath + '" -testnet', {
       detached: true
   }, (error, stdout, stderr) => {
       if (error) {
@@ -168,7 +168,7 @@ function startStratisApi() {
       apiPath = path.join(__dirname, '".\\assets\\daemon\\Stratis.BreezeD.exe"');
   }
 
-  stratisProcess = execStratis('"' + apiPath + '" stratis light -testnet', {
+  stratisProcess = execStratis('"' + apiPath + '" stratis -testnet', {
       detached: true
   }, (error, stdout, stderr) => {
       if (error) {

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

@@ -28,7 +28,6 @@ export class RecoverComponent implements OnInit {
 
   ngOnInit() {
     this.bsConfig = Object.assign({}, {showWeekNumbers: false, containerClass: 'theme-blue'});
-    console.log(new Date());
   }
 
   private buildRecoverForm(): void {
@@ -170,7 +169,7 @@ export class RecoverComponent implements OnInit {
             }
           }
           this.AlertIfNeeded(bitcoinErrorMessage, stratisErrorMessage);
-        }     
+        }
       )
     ;
   }

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

@@ -5,11 +5,17 @@
     <div class="jumbotron jumbotron-fluid">
       <div class="container">
         <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>
             <p class="lead">
               <!--<strong><span class="h2">29</span>.76500293</strong>-->
-              <strong>{{ confirmedBalance | coinNotation }}</strong>
+              <strong>{{ (confirmedBalance | coinNotation) || (0 | coinNotation) }}</strong>
               <small class="text-uppercase"> {{ coinUnit }}</small>
             </p>
           </div>
@@ -22,15 +28,15 @@
               <small class="text-uppercase">usd</small>
             </p>
           </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>
             <p class="lead">
-              <strong>{{ unconfirmedBalance | coinNotation }}</strong>
+              <strong>{{ (unconfirmedBalance | coinNotation) || (0 | coinNotation) }}</strong>
               <small class="text-uppercase"> {{ coinUnit }}</small>
             </p>
           </div>
           <!-- /col-->
-          <div class="col-xs-12 col-md-4 text-right">
+          <div class="col-xs-12 col-md-3 text-right">
             <p>
               <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>
@@ -56,7 +62,7 @@
                 <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 == 'sent'" class="text-danger">-</span>
-                  {{ transaction.transactionAmount | coinNotation }}
+                  {{ transaction.transactionAmount + transaction.transactionFee | coinNotation }}
                   <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-warning text-capitalize">Pending</span>

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

@@ -22,15 +22,17 @@ import { Subscription } from 'rxjs/Subscription';
 export class DashboardComponent implements OnInit {
   constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal) {}
 
+  public walletName: string;
+  public coinUnit: string;
   public confirmedBalance: number;
   public unconfirmedBalance: number;
   public transactionArray: TransactionInfo[];
-  public coinUnit: string;
   private walletBalanceSubscription: Subscription;
   private walletHistorySubscription: Subscription;
 
   ngOnInit() {
     this.startSubscriptions();
+    this.walletName = this.globalService.getWalletName();
     this.coinUnit = this.globalService.getCoinUnit();
   };
 
@@ -65,6 +67,7 @@ export class DashboardComponent implements OnInit {
         error => {
           console.log(error);
           if (error.status === 0) {
+            this.cancelSubscriptions();
             alert("Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
@@ -101,6 +104,7 @@ export class DashboardComponent implements OnInit {
         error => {
           console.log(error);
           if (error.status === 0) {
+            this.cancelSubscriptions();
             alert("Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
@@ -132,7 +136,12 @@ export class DashboardComponent implements OnInit {
       }
       let transactionId = transaction.id;
       let transactionAmount = transaction.amount;
-      let transactionFee = transaction.fee;
+      let transactionFee;
+      if (transaction.fee) {
+        transactionFee = transaction.fee;
+      } else {
+        transactionFee = 0;
+      }
       let transactionConfirmedInBlock = transaction.confirmedInBlock;
       let transactionTimestamp = transaction.timestamp;
       let transactionConfirmed;

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

@@ -30,7 +30,7 @@
                   <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 == 'sent'" class="text-danger">-</span>
-                    {{ transaction.transactionAmount | coinNotation }}
+                    {{ transaction.transactionAmount + transaction.transactionFee | coinNotation }}
                     <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-warning text-capitalize">Pending</span>

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

@@ -57,6 +57,7 @@ export class HistoryComponent {
         error => {
           console.log(error);
           if (error.status === 0) {
+            this.cancelSubscriptions();
             alert("Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
@@ -88,7 +89,12 @@ export class HistoryComponent {
       }
       let transactionId = transaction.id;
       let transactionAmount = transaction.amount;
-      let transactionFee = transaction.fee;
+      let transactionFee;
+      if (transaction.fee) {
+        transactionFee = transaction.fee;
+      } else {
+        transactionFee = 0;
+      }
       let transactionConfirmedInBlock = transaction.confirmedInBlock;
       let transactionTimestamp = transaction.timestamp;
       let transactionConfirmed;

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

@@ -116,7 +116,7 @@ export class SendComponent implements OnInit {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].message);
+              alert(error.json().errors[0].description);
             }
           }
         },
@@ -158,7 +158,7 @@ export class SendComponent implements OnInit {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].message);
+              alert(error.json().errors[0].description);
             }
           }
         },

Breeze.UI/src/app/wallet/status-bar/status-bar.component.ts

@@ -60,6 +60,7 @@ export class StatusBarComponent implements OnInit {
         error => {
           console.log(error);
           if (error.status === 0) {
+            this.cancelSubscriptions();
             alert("Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {

Breeze.UI/src/app/wallet/transaction-details/transaction-details.component.html

@@ -13,8 +13,12 @@
         <ul class="list-inline row">
           <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 == '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 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">
           <li class="list-inline-item col blockLabel">Date</li>
           <li class="list-inline-item col-9 blockText">{{ transaction.transactionTimestamp * 1000 | date:'medium' }}</li>

Breeze.UI/src/scss/_custom.scss

@@ -44,16 +44,14 @@ code {color: $spacegray !important;}
   display:inline-block;
   fill: $darkgray !important;
 }
-@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }
+
 em {
   &.display-4 {
     font-size: 1.6em;
     color: $darkgray;
     font-weight: 400;
     padding-right: 5px;
-  	border-right: .1em solid $blue;
   	white-space: nowrap;
-  	-webkit-animation: blink-caret .5s step-end infinite alternate;
   }
 }
 
@@ -174,7 +172,7 @@ em {
   }
 }
 
-// bagdes
+// badges
 .badge {
   &.badge-danger {color: $pink;}
   &.badge-warning {color: $yellow;}

Breeze.UI/src/styles.css

@@ -61,20 +61,12 @@ code {
   fill: #1B354B !important;
 }
 
-@-webkit-keyframes blink-caret {
-  50% {
-    border-color: transparent;
-  }
-}
-
 em.display-4 {
   font-size: 1.6em;
   color: #1B354B;
   font-weight: 400;
   padding-right: 5px;
-  border-right: 0.1em solid #7385A0;
   white-space: nowrap;
-  -webkit-animation: blink-caret .5s step-end infinite alternate;
 }
 
 .datepicker__input {