Unverified Commit bacecc47 authored by Pieterjan Vanhoof's avatar Pieterjan Vanhoof Committed by GitHub

Merge pull request #351 from stratisproject/ui

Various UI changes
parents f7c107e9 c215c2cc
...@@ -28,14 +28,6 @@ ...@@ -28,14 +28,6 @@
<div class="col-12"> <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 class="form-control-feedback">Your password will be required to recover your wallet in the future. Keep it safe.</div>
</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> </form>
</div> </div>
<!-- /row--> <!-- /row-->
......
...@@ -108,7 +108,6 @@ export class CreateComponent implements OnInit { ...@@ -108,7 +108,6 @@ export class CreateComponent implements OnInit {
this.createWalletForm.get("walletName").value, this.createWalletForm.get("walletName").value,
this.mnemonic, this.mnemonic,
this.createWalletForm.get("walletPassword").value, this.createWalletForm.get("walletPassword").value,
this.createWalletForm.get("selectNetwork").value
); );
this.createWallets(this.newWallet); this.createWallets(this.newWallet);
} }
......
...@@ -27,18 +27,11 @@ ...@@ -27,18 +27,11 @@
<input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your secret words."> <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 *ngIf="formErrors.walletMnemonic" class="text-danger mt-2">{{ formErrors.walletMnemonic }}</div>
</div> </div>
<div class="form-group col-6"> <div class="form-group col-12">
<label class="text-left" for="walletPassword">Password</label> <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."> <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 *ngIf="formErrors.walletPassword" class="text-danger mt-2">{{ formErrors.walletPassword }}</div>
</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> </form>
</div> </div>
<!-- /row--> <!-- /row-->
......
...@@ -108,7 +108,6 @@ export class RecoverComponent implements OnInit { ...@@ -108,7 +108,6 @@ export class RecoverComponent implements OnInit {
this.recoverWalletForm.get("walletName").value, this.recoverWalletForm.get("walletName").value,
this.recoverWalletForm.get("walletMnemonic").value, this.recoverWalletForm.get("walletMnemonic").value,
this.recoverWalletForm.get("walletPassword").value, this.recoverWalletForm.get("walletPassword").value,
this.recoverWalletForm.get("selectNetwork").value,
recoveryDate recoveryDate
); );
this.recoverWallets(this.walletRecovery); this.recoverWallets(this.walletRecovery);
......
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
export class WalletCreation { 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.name = name;
this.mnemonic = mnemonic; this.mnemonic = mnemonic;
this.password = password; this.password = password;
this.network = network;
this.folderPath = folderPath; this.folderPath = folderPath;
} }
name: string; name: string;
mnemonic: string; mnemonic: string;
password: string; password: string;
network: string;
folderPath?: string; folderPath?: string;
} }
export class WalletRecovery { 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.name = walletName;
this.mnemonic = mnemonic; this.mnemonic = mnemonic;
this.password = password; this.password = password;
this.network = network;
this.creationDate = creationDate; this.creationDate = creationDate;
this.folderPath = folderPath; this.folderPath = folderPath;
} }
...@@ -12,7 +11,6 @@ export class WalletRecovery { ...@@ -12,7 +11,6 @@ export class WalletRecovery {
mnemonic: string; mnemonic: string;
password: string; password: string;
name: string; name: string;
network: string;
creationDate: Date; creationDate: Date;
folderPath?: string; folderPath?: string;
} }
...@@ -14,6 +14,7 @@ import { WalletRecovery } from '../classes/wallet-recovery'; ...@@ -14,6 +14,7 @@ import { WalletRecovery } from '../classes/wallet-recovery';
import { WalletLoad } from '../classes/wallet-load'; import { WalletLoad } from '../classes/wallet-load';
import { WalletInfo } from '../classes/wallet-info'; import { WalletInfo } from '../classes/wallet-info';
import { Mnemonic } from '../classes/mnemonic'; import { Mnemonic } from '../classes/mnemonic';
import { FeeEstimation } from '../classes/fee-estimation';
import { TransactionBuilding } from '../classes/transaction-building'; import { TransactionBuilding } from '../classes/transaction-building';
import { TransactionSending } from '../classes/transaction-sending'; import { TransactionSending } from '../classes/transaction-sending';
...@@ -227,6 +228,25 @@ export class ApiService { ...@@ -227,6 +228,25 @@ export class ApiService {
.map((response: Response) => response); .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 * Build a transaction
*/ */
...@@ -234,7 +254,7 @@ export class ApiService { ...@@ -234,7 +254,7 @@ export class ApiService {
this.getCurrentCoin(); this.getCurrentCoin();
return this.http 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); .map((response: Response) => response);
} }
...@@ -245,7 +265,7 @@ export class ApiService { ...@@ -245,7 +265,7 @@ export class ApiService {
this.getCurrentCoin(); this.getCurrentCoin();
return this.http 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); .map((response: Response) => response);
} }
......
...@@ -35,19 +35,19 @@ ...@@ -35,19 +35,19 @@
</label> </label>
</div> </div>
<!-- /fee buttons --> <!-- /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"> <div class="form-group clearfix">
<button type="button" class="btn btn-link" (click)="buildTransaction()" [disabled]="!sendForm.valid">Estimate Fee</button>
<div *ngIf="estimatedFee"> <div *ngIf="estimatedFee">
<label>Estimated Fee: </label> <label>Estimated Fee: </label>
<label>{{ estimatedFee | coinNotation }} {{ coinUnit }}</label> <label>{{ estimatedFee | coinNotation }} {{ coinUnit }}</label>
</div> </div>
</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>
<!-- /form--> <!-- /form-->
</div> </div>
......
...@@ -7,6 +7,7 @@ import { ModalService } from '../../shared/services/modal.service'; ...@@ -7,6 +7,7 @@ import { ModalService } from '../../shared/services/modal.service';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { FeeEstimation } from '../../shared/classes/fee-estimation';
import { TransactionBuilding } from '../../shared/classes/transaction-building'; import { TransactionBuilding } from '../../shared/classes/transaction-building';
import { TransactionSending } from '../../shared/classes/transaction-sending'; import { TransactionSending } from '../../shared/classes/transaction-sending';
...@@ -27,6 +28,7 @@ export class SendComponent implements OnInit { ...@@ -27,6 +28,7 @@ export class SendComponent implements OnInit {
public coinUnit: string; public coinUnit: string;
public isSending: boolean = false; public isSending: boolean = false;
public estimatedFee: number; public estimatedFee: number;
public apiError: string;
private transactionHex: string; private transactionHex: string;
private responseMessage: any; private responseMessage: any;
private errorMessage: string; private errorMessage: string;
...@@ -38,7 +40,7 @@ export class SendComponent implements OnInit { ...@@ -38,7 +40,7 @@ export class SendComponent implements OnInit {
private buildSendForm(): void { private buildSendForm(): void {
this.sendForm = this.fb.group({ 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})?$/)])],
"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], "fee": ["medium", Validators.required],
...@@ -64,6 +66,12 @@ export class SendComponent implements OnInit { ...@@ -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 = { formErrors = {
...@@ -75,7 +83,8 @@ export class SendComponent implements OnInit { ...@@ -75,7 +83,8 @@ export class SendComponent implements OnInit {
validationMessages = { validationMessages = {
'address': { 'address': {
'required': 'An address is required.' 'required': 'An address is required.',
'minlength': 'An address is at least 26 characters long.'
}, },
'amount': { 'amount': {
'required': 'An amount is required.', 'required': 'An amount is required.',
...@@ -109,13 +118,15 @@ export class SendComponent implements OnInit { ...@@ -109,13 +118,15 @@ export class SendComponent implements OnInit {
error => { error => {
console.log(error); console.log(error);
if (error.status === 0) { 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) { } else if (error.status >= 400) {
if (!error.json().errors[0]) { if (!error.json().errors[0]) {
console.log(error); console.log(error);
} }
else { 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 { ...@@ -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() { public buildTransaction() {
this.transaction = new TransactionBuilding( this.transaction = new TransactionBuilding(
this.globalService.getWalletName(), this.globalService.getWalletName(),
"account 0", "account 0",
this.sendForm.get("password").value, this.sendForm.get("password").value,
this.sendForm.get("address").value, this.sendForm.get("address").value.trim(),
this.sendForm.get("amount").value, this.sendForm.get("amount").value,
this.sendForm.get("fee").value, this.sendForm.get("fee").value,
true true
); );
let transactionData;
this.apiService this.apiService
.buildTransaction(this.transaction) .buildTransaction(this.transaction)
.subscribe( .subscribe(
response => { response => {
if (response.status >= 200 && response.status < 400){ if (response.status >= 200 && response.status < 400){
console.log(response);
this.responseMessage = response.json(); this.responseMessage = response.json();
} }
}, },
...@@ -149,13 +201,15 @@ export class SendComponent implements OnInit { ...@@ -149,13 +201,15 @@ export class SendComponent implements OnInit {
console.log(error); console.log(error);
this.isSending = false; this.isSending = false;
if (error.status === 0) { 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) { } else if (error.status >= 400) {
if (!error.json().errors[0]) { if (!error.json().errors[0]) {
console.log(error); console.log(error);
} }
else { 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 { ...@@ -189,13 +243,15 @@ export class SendComponent implements OnInit {
console.log(error); console.log(error);
this.isSending = false; this.isSending = false;
if (error.status === 0) { 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) { } else if (error.status >= 400) {
if (!error.json().errors[0]) { if (!error.json().errors[0]) {
console.log(error); console.log(error);
} }
else { 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;
} }
} }
}, },
......
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