Merge pull request #273 from stratisproject/ui

Add fee estimation

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

@@ -20,7 +20,7 @@
             <input type="text" class="form-control form-control-success" formControlName="address" id="destinationAddress" placeholder="Please enter the destination address here.">
             <div *ngIf="formErrors.address" class="form-control-feedback">{{ formErrors.address }}</div>
           </div>
-          <!--<div class="form-group">
+          <!-- <div class="form-group">
             <label for="Fees">Fees</label>
             <div class="col feeSlider text-center">
               <input class="form-control" id="dataSlider" type="text"
@@ -37,16 +37,19 @@
                 <em>A higher fee helps expedite your transaction.
                 <br>You are sending <strong>1 BTC</strong> with an included <strong>Medium</strong> fee of <strong>0.0001</strong>.</em>
               </p>
-          </div>-->
+          </div> -->
           <div class="form-group clearfix">
             <label for="feeSlider">Fee</label>
-            <input class="form-control col text-center" formControlName="fee" id="feeSlider" type="range" min="1" max="3" value="2">
+            <input class="form-control col text-center" formControlName="fee" type="range" min="1" max="3" value="2">
           </div>
             <div class="form-group clearfix">
             <label for="walletPassword">Wallet Password</label>
             <input type="password" class="form-control form-control-success" formControlName="password" id="walletPassword" placeholder="Please enter your wallet password.">
             <div *ngIf="formErrors.password" class="form-control-feedback">{{formErrors.password}}</div>
           </div>
+          <button type="button" class="btn btn-link" (click)="buildTransaction()" [disabled]="!sendForm.valid">Estimate Fee</button>
+          <label *ngIf="estimatedFee">Estimated Fee: </label>
+          <label *ngIf="estimatedFee">{{ estimatedFee | coinNotation }} {{ coinUnit }}</label>
         </form>
         <!-- /form-->
       </div>

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

@@ -22,11 +22,13 @@ export class SendComponent implements OnInit {
   }
 
   public sendForm: FormGroup;
+  public coinUnit: string;
+  public isSending: boolean = false;
+  public estimatedFee: number;
+  private transactionHex: string;
   private responseMessage: any;
   private errorMessage: string;
-  public coinUnit: string;
   private transaction: TransactionBuilding;
-  public isSending: boolean = false;
 
   ngOnInit() {
     this.coinUnit = this.globalService.getCoinUnit();
@@ -84,9 +86,7 @@ export class SendComponent implements OnInit {
     }
   };
 
-  public send() {
-    this.isSending = true;
-
+  public buildTransaction() {
     this.transaction = new TransactionBuilding(
       this.globalService.getWalletName(),
       this.globalService.getCoinType(),
@@ -108,7 +108,6 @@ export class SendComponent implements OnInit {
         },
         error => {
           console.log(error);
-          this.isSending = false;
           if (error.status === 0) {
             alert("Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {
@@ -120,23 +119,21 @@ export class SendComponent implements OnInit {
             }
           }
         },
-        () => this.sendTransaction(this.responseMessage.hex)
+        () => {
+          this.estimatedFee = this.responseMessage.fee;
+          this.transactionHex = this.responseMessage.hex;
+          if (this.isSending) {
+            this.sendTransaction(this.transactionHex);
+          }
+        }
       )
     ;
   };
 
-  private getFeeType(){
-    let feeValue = this.sendForm.get("fee").value;
-
-    switch(feeValue){
-      case 1:
-        return "low";
-      case 2:
-        return "medium";
-      case 3:
-        return "high";
-    }
-  }
+  public send() {
+    this.isSending = true;
+    this.buildTransaction();
+  };
 
   private sendTransaction(hex: string) {
     let transaction = new TransactionSending(hex);
@@ -167,6 +164,19 @@ export class SendComponent implements OnInit {
     ;
   }
 
+  private getFeeType(){
+    let feeValue = this.sendForm.get("fee").value;
+
+    switch(feeValue){
+      case 1:
+        return "low";
+      case 2:
+        return "medium";
+      case 3:
+        return "high";
+    }
+  }
+
   private openConfirmationModal() {
     const modalRef = this.modalService.open(SendConfirmationComponent);
     modalRef.componentInstance.transaction = this.transaction;