Merge pull request #351 from stratisproject/ui

Various UI changes

Breeze.UI/src/app/setup/create/create.component.html

@@ -28,14 +28,6 @@
           <div class="col-12">
             <div class="form-control-feedback">Your password will be required to recover your wallet in the future. Keep it safe.</div>
           </div>
-          <div class="form-group col-12">
-            <label class="text-left" for="walletNetwork">Network</label>
-            <select class="form-control custom-select" name="network" formControlName="selectNetwork">
-              <!--<option value="main">Main</option>-->
-              <option value="test">Testnet</option>
-              <!--<option value="stratistest">StratisTest</option>-->
-            </select>
-          </div>
         </form>
       </div>
       <!-- /row-->

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

@@ -108,7 +108,6 @@ export class CreateComponent implements OnInit {
         this.createWalletForm.get("walletName").value,
         this.mnemonic,
         this.createWalletForm.get("walletPassword").value,
-        this.createWalletForm.get("selectNetwork").value
       );
       this.createWallets(this.newWallet);
     }

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

@@ -27,18 +27,11 @@
             <input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your secret words.">
             <div *ngIf="formErrors.walletMnemonic" class="text-danger mt-2">{{ formErrors.walletMnemonic }}</div>
           </div>
-          <div class="form-group col-6">
+          <div class="form-group col-12">
             <label class="text-left" for="walletPassword">Password</label>
             <input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
             <div *ngIf="formErrors.walletPassword" class="text-danger mt-2">{{ formErrors.walletPassword }}</div>
           </div>
-          <div class="form-group col-6">
-            <label class="text-left" for="walletNetwork">Network</label>
-            <select class="form-control custom-select" name="network" formControlName="selectNetwork">
-              <!--<option value="main">Main</option>-->
-              <option value="test">Testnet</option>
-            </select>
-          </div>
         </form>
       </div>
       <!-- /row-->

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

@@ -108,7 +108,6 @@ export class RecoverComponent implements OnInit {
       this.recoverWalletForm.get("walletName").value,
       this.recoverWalletForm.get("walletMnemonic").value,
       this.recoverWalletForm.get("walletPassword").value,
-      this.recoverWalletForm.get("selectNetwork").value,
       recoveryDate
     );
     this.recoverWallets(this.walletRecovery);

Breeze.UI/src/app/shared/classes/fee-estimation.ts

+export class FeeEstimation {
+    constructor(walletName: string, accountName: string, destinationAddress: string, amount: string, feeType: string, allowUnconfirmed: boolean) {
+        this.walletName = walletName;
+        this.accountName = accountName;
+        this.destinationAddress = destinationAddress;
+        this.amount = amount;
+        this.feeType = feeType;
+        this.allowUnconfirmed = allowUnconfirmed;
+    }
+    
+    walletName: string;
+    accountName: string;
+    destinationAddress: string;
+    amount: string;
+    feeType: string;
+    allowUnconfirmed: boolean;
+}
+    
\ No newline at end of file

Breeze.UI/src/app/shared/classes/wallet-creation.ts

 export class WalletCreation {
 
-  constructor(name: string, mnemonic: string, password: string, network:string, folderPath: string = null ) {
+  constructor(name: string, mnemonic: string, password: string, folderPath: string = null ) {
     this.name = name;
     this.mnemonic = mnemonic;
     this.password = password;
-    this.network = network;
     this.folderPath = folderPath;
   }
 
   name: string;
   mnemonic: string;
   password: string;
-  network: string;
   folderPath?: string;
 }

Breeze.UI/src/app/shared/classes/wallet-recovery.ts

 export class WalletRecovery {
 
-  constructor(walletName: string, mnemonic: string, password: string, network:string, creationDate: Date, folderPath: string = null) {
+  constructor(walletName: string, mnemonic: string, password: string, creationDate: Date, folderPath: string = null) {
     this.name = walletName;
     this.mnemonic = mnemonic;
     this.password = password;
-    this.network = network;
     this.creationDate = creationDate;
     this.folderPath = folderPath;
   }
@@ -12,7 +11,6 @@ export class WalletRecovery {
   mnemonic: string;
   password: string;
   name: string;
-  network: string;
   creationDate: Date;
   folderPath?: string;
 }

Breeze.UI/src/app/shared/services/api.service.ts

@@ -14,6 +14,7 @@ import { WalletRecovery } from '../classes/wallet-recovery';
 import { WalletLoad } from '../classes/wallet-load';
 import { WalletInfo } from '../classes/wallet-info';
 import { Mnemonic } from '../classes/mnemonic';
+import { FeeEstimation } from '../classes/fee-estimation';
 import { TransactionBuilding } from '../classes/transaction-building';
 import { TransactionSending } from '../classes/transaction-sending';
 
@@ -227,6 +228,25 @@ export class ApiService {
         .map((response: Response) => response);
     }
 
+    /**
+     * Estimate the fee of a transaction
+     */
+    estimateFee(data: FeeEstimation): Observable<any> {
+      this.getCurrentCoin();
+
+      let params: URLSearchParams = new URLSearchParams();
+      params.set('walletName', data.walletName);
+      params.set('accountName', data.accountName);
+      params.set('destinationAddress', data.destinationAddress);
+      params.set('amount', data.amount);
+      params.set('feeType', data.feeType);
+      params.set('allowUnconfirmed', "true");
+      
+      return this.http
+        .get(this.currentApiUrl + '/wallet/estimate-txfee', new RequestOptions({headers: this.headers, search: params}))
+        .map((response: Response) => response);
+    }
+
     /**
      * Build a transaction
      */
@@ -234,7 +254,7 @@ export class ApiService {
       this.getCurrentCoin();
 
       return this.http
-        .post(this.currentApiUrl + '/wallet/build-transaction/', JSON.stringify(data), {headers: this.headers})
+        .post(this.currentApiUrl + '/wallet/build-transaction', JSON.stringify(data), {headers: this.headers})
         .map((response: Response) => response);
     }
 
@@ -245,7 +265,7 @@ export class ApiService {
       this.getCurrentCoin();
 
       return this.http
-        .post(this.currentApiUrl + '/wallet/send-transaction/', JSON.stringify(data), {headers: this.headers})
+        .post(this.currentApiUrl + '/wallet/send-transaction', JSON.stringify(data), {headers: this.headers})
         .map((response: Response) => response);
     }
 

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

@@ -35,19 +35,19 @@
                 </label>
               </div>
             <!-- /fee buttons -->
-          </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>
           <div class="form-group clearfix">
-            <button type="button" class="btn btn-link" (click)="buildTransaction()" [disabled]="!sendForm.valid">Estimate Fee</button>
             <div *ngIf="estimatedFee">
               <label>Estimated Fee: </label>
               <label>{{ estimatedFee | coinNotation }} {{ coinUnit }}</label>
             </div>
           </div>
+          </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>
+          <div *ngIf="apiError" class="text-danger mt-2">{{ apiError }}</div>
         </form>
         <!-- /form-->
       </div>

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

@@ -7,6 +7,7 @@ import { ModalService } from '../../shared/services/modal.service';
 
 import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
+import { FeeEstimation } from '../../shared/classes/fee-estimation';
 import { TransactionBuilding } from '../../shared/classes/transaction-building';
 import { TransactionSending } from '../../shared/classes/transaction-sending';
 
@@ -27,6 +28,7 @@ export class SendComponent implements OnInit {
   public coinUnit: string;
   public isSending: boolean = false;
   public estimatedFee: number;
+  public apiError: string;
   private transactionHex: string;
   private responseMessage: any;
   private errorMessage: string;
@@ -38,7 +40,7 @@ export class SendComponent implements OnInit {
 
   private buildSendForm(): void {
     this.sendForm = this.fb.group({
-      "address": ["", Validators.required],
+      "address": ["", Validators.compose([Validators.required, Validators.minLength(26)])],
       // "amount": ["", Validators.compose([Validators.required, Validators.pattern(/^[0-9]+(\.[0-9]{0,8})?$/)])],
       "amount": ["", Validators.compose([Validators.required, Validators.pattern(/^([0-9]+)?(\.[0-9]{0,8})?$/)])],
       "fee": ["medium", Validators.required],
@@ -64,6 +66,12 @@ export class SendComponent implements OnInit {
         }
       }
     }
+
+    this.apiError = "";
+
+    if(this.sendForm.get("address").valid && this.sendForm.get("amount").valid) {
+      this.estimateFee();
+    }
   }
 
   formErrors = {
@@ -75,7 +83,8 @@ export class SendComponent implements OnInit {
 
   validationMessages = {
     'address': {
-      'required': 'An address is required.'
+      'required': 'An address is required.',
+      'minlength': 'An address is at least 26 characters long.'
     },
     'amount': {
       'required': 'An amount is required.',
@@ -109,13 +118,15 @@ export class SendComponent implements OnInit {
         error => {
           console.log(error);
           if (error.status === 0) {
-            this.genericModalService.openModal(null, null);
+            //this.genericModalService.openModal(null, null);
+            this.apiError = "Something went wrong while connecting to the API. Please restart the application."
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
-              this.genericModalService.openModal(null, error.json().errors[0].message);
+              //this.genericModalService.openModal(null, error.json().errors[0].message);
+              this.apiError = error.json().errors[0].message;
             }
           }
         },
@@ -126,22 +137,63 @@ export class SendComponent implements OnInit {
       )
   };
 
+  public estimateFee() {
+    let transaction = new FeeEstimation(
+      this.globalService.getWalletName(),
+      "account 0",
+      this.sendForm.get("address").value.trim(),
+      this.sendForm.get("amount").value,
+      this.sendForm.get("fee").value,
+      true
+    );
+
+    this.apiService.estimateFee(transaction)
+      .subscribe(
+        response => {
+          if (response.status >= 200 && response.status < 400){
+            this.responseMessage = response.json();
+          }
+        },
+        error => {
+          console.log(error);
+          if (error.status === 0) {
+            this.genericModalService.openModal(null, null);
+          } else if (error.status >= 400) {
+            if (!error.json().errors[0]) {
+              console.log(error);
+            }
+            else {
+              //this.genericModalService.openModal(null, error.json().errors[0].message);
+              this.apiError = error.json().errors[0].message;
+            }
+          }
+        },
+        () => {
+          this.estimatedFee = this.responseMessage.fee;
+        }
+      )
+    ;
+  }
+
   public buildTransaction() {
     this.transaction = new TransactionBuilding(
       this.globalService.getWalletName(),
       "account 0",
       this.sendForm.get("password").value,
-      this.sendForm.get("address").value,
+      this.sendForm.get("address").value.trim(),
       this.sendForm.get("amount").value,
       this.sendForm.get("fee").value,
       true
     );
 
+    let transactionData;
+
     this.apiService
       .buildTransaction(this.transaction)
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400){
+            console.log(response);
             this.responseMessage = response.json();
           }
         },
@@ -149,13 +201,15 @@ export class SendComponent implements OnInit {
           console.log(error);
           this.isSending = false;
           if (error.status === 0) {
-            this.genericModalService.openModal(null, null);
+            //this.genericModalService.openModal(null, null);
+            this.apiError = "Something went wrong while connecting to the API. Please restart the application."
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
-              this.genericModalService.openModal(null, error.json().errors[0].message);
+              //this.genericModalService.openModal(null, error.json().errors[0].message);
+              this.apiError = error.json().errors[0].message;
             }
           }
         },
@@ -189,13 +243,15 @@ export class SendComponent implements OnInit {
           console.log(error);
           this.isSending = false;
           if (error.status === 0) {
-            this.genericModalService.openModal(null, null);
+            //this.genericModalService.openModal(null, null);
+            this.apiError = "Something went wrong while connecting to the API. Please restart the application."
           } else if (error.status >= 400) {
             if (!error.json().errors[0]) {
               console.log(error);
             }
             else {
-              this.genericModalService.openModal(null, error.json().errors[0].message);
+              //this.genericModalService.openModal(null, error.json().errors[0].message);
+              this.apiError = error.json().errors[0].message;
             }
           }
         },