Skip to content

B
Breeze
Commit 2bb8f4c4 authored by Pieterjan Vanhoof's avatar Pieterjan Vanhoof Committed by GitHub
Browse files
Options

Merge pull request #128 from stratisproject/ui 

New UI, add status bar and sidebar, improve error handling
parents f0f0c4c4 620fc9f9
Expand all Show whitespace changes
Inline Side-by-side
Showing with 8455 additions and 482 deletions
Breeze.UI/main.ts
View file @ 2bb8f4c4
...@@ -28,7 +28,14 @@ let mainWindow = null; ...@@ -28,7 +28,14 @@ let mainWindow = null;
function createWindow() { function createWindow() {
// Create the browser window. // Create the browser window.
mainWindow = new BrowserWindow({width: 1200, height: 700, frame: true, minWidth: 1200, minHeight: 700, icon: "./assets/images/stratis-tray.png"}); mainWindow = new BrowserWindow({
width: 1200,
height: 700,
frame: true,
minWidth: 1200,
minHeight: 700,
icon: __dirname + "/assets/images/stratis128x128.png"
});
// and load the index.html of the app. // and load the index.html of the app.
mainWindow.loadURL(url.format({ mainWindow.loadURL(url.format({
......
Breeze.UI/src/app/app.module.ts
View file @ 2bb8f4c4
...@@ -18,6 +18,7 @@ import { GlobalService } from './shared/services/global.service'; ...@@ -18,6 +18,7 @@ import { GlobalService } from './shared/services/global.service';
import { SendComponent } from './wallet/send/send.component'; import { SendComponent } from './wallet/send/send.component';
import { ReceiveComponent } from './wallet/receive/receive.component'; import { ReceiveComponent } from './wallet/receive/receive.component';
import { TransactionDetailsComponent } from './wallet/transaction-details/transaction-details.component';
@NgModule({ @NgModule({
...@@ -36,11 +37,13 @@ import { ReceiveComponent } from './wallet/receive/receive.component'; ...@@ -36,11 +37,13 @@ import { ReceiveComponent } from './wallet/receive/receive.component';
AppComponent, AppComponent,
LoginComponent, LoginComponent,
SendComponent, SendComponent,
ReceiveComponent ReceiveComponent,
TransactionDetailsComponent
], ],
entryComponents: [ entryComponents: [
SendComponent, SendComponent,
ReceiveComponent ReceiveComponent,
TransactionDetailsComponent
], ],
providers: [ ApiService, GlobalService ], providers: [ ApiService, GlobalService ],
bootstrap: [ AppComponent ] bootstrap: [ AppComponent ]
......
Breeze.UI/src/app/login/login.component.html
View file @ 2bb8f4c4
<div class="container col-md-8 offset-md-2"> <section id="breeze">
<div class="row"> <div class="login d-flex align-items-center text-center">
<div class="col"> <div class="container">
<h1>Welcome to Breeze</h1> <h3 class="display-5">Welcome to Breeze</h3>
</div> <div *ngIf="hasWallet">
</div> <p class="lead">Please choose the wallet you would like to open</p>
<div class="row"> <div class="row d-flex justify-content-center">
<div class="col"> <form class="col-md-8 col-xs-12 text-left" [formGroup]="openWalletForm">
<form *ngIf="hasWallet" [formGroup]="openWalletForm" (ngSubmit)="onDecryptClicked()">
<div class="form-group"> <div class="form-group">
<label>Select wallet name to open</label> <label class="col-12 row" for="Select">Wallet</label>
<select class="form-control" formControlName="selectWallet"> <select class="form-control custom-select col-12" formControlName="selectWallet">
<option *ngFor="let wallet of wallets" [value]="wallet">{{wallet}}</option> <option *ngFor="let wallet of wallets" [value]="wallet">{{ wallet }}</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Please enter your password to decrypt your wallet</label> <label class="text-left" for="Password">Password</label>
<input class="form-control" type="password" formControlName="password" placeholder="Enter password here"> <input type="password" class="form-control" id="Password" formControlName="password" placeholder="Enter your password.">
<div *ngIf="formErrors.password" class="alert alert-danger">{{formErrors.password}}</div> <div *ngIf="formErrors.password" class="form-control-feedback">{{ formErrors.password }}</div>
</div>
<div class="form-group">
<button type="submit" [disabled]="!openWalletForm.valid" class="btn">Decrypt</button>
</div> </div>
</form> </form>
</div> </div>
<!-- /row-->
<div class="row d-flex justify-content-center">
<button type="submit" class="btn btn-darkgray btn-lg" [disabled]="!openWalletForm.valid" (click)="onDecryptClicked()">Decrypt</button>
</div> </div>
<div class="row">
<div class="col" *ngIf="hasWallet;else no_wallet">
If you like to create or restore a wallet please click the button below.
</div> </div>
<!-- /row-->
<div class="row d-flex justify-content-center" *ngIf="hasWallet;else no_wallet">
<p class="lead">If you would like to create or restore a wallet please click the button below.</p>
</div> </div>
<div class="row">
<div class="col">
<ng-template #no_wallet> <ng-template #no_wallet>
<p> Looks like you're new here. Please create or restore a wallet.</p> <p class="lead">Looks like you're new here. <br />Please create or restore a wallet.</p>
</ng-template> </ng-template>
<div class="row d-flex justify-content-center">
<button type="button" class="btn btn-darkgray btn-lg" (click)="onCreateClicked()">Create or restore a wallet</button>
</div> </div>
</div> </div>
<div class="row"> <!-- /container-->
<div class="col">
<button type="button" (click)="onCreateClicked()" class="btn">Create or restore wallet</button>
</div> </div>
</div> <!-- /login-->
</div> </section>
<!-- /breeze-->
Breeze.UI/src/app/setup/create/create.component.html
View file @ 2bb8f4c4
<div class="container col-md-8 offset-md-2"> <section id="breeze">
<div class="row"> <div class="login d-flex align-items-center text-center">
<div class="col"> <div class="container">
<h1>Please create a new wallet</h1> <p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
</div> <h3 class="display-5">Welcome</h3>
</div> <div class="row d-flex justify-content-center">
<div class="row"> <form class="col-md-8 col-xs-12 text-left" [formGroup]="createWalletForm">
<div class="col"> <!--<div class="form-group has-success">-->
<form [formGroup]="createWalletForm" (ngSubmit)="onCreateClicked()">
<div class="form-group"> <div class="form-group">
<label>Name:</label> <label class="col-12 row" for="walletName">Name</label>
<input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet."> <input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
<div *ngIf="formErrors.walletName" class="alert alert-danger">{{formErrors.walletName}}</div> <div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Password:</label> <label class="text-left" for="walletPassword">Password</label>
<input class="form-control" formControlName="walletPassword" type="password" placeholder="Enter a password for your wallet."> <input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
<div *ngIf="formErrors.walletPassword" class="alert alert-danger">{{formErrors.walletPassword}}</div> <div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Network:</label> <label class="text-left" for="walletNetwork">Network</label>
<select name="network" formControlName="selectNetwork"> <select class="form-control custom-select" name="network" formControlName="selectNetwork">
<!--<option value="main">Main</option>--> <!--<option value="main">Main</option>-->
<option value="test">Testnet</option> <option value="test">Testnet</option>
<!--<option value="stratistest">StratisTest</option>--> <!--<option value="stratistest">StratisTest</option>-->
</select> </select>
</div> </div>
<div class="form-group">
<button type="button" class="btn btn-outline-secondary" (click)="onBackClicked()">Back</button>
<button type="submit" [disabled]="!createWalletForm.valid" class="btn">Create Wallet</button>
</div>
</form> </form>
</div> </div>
<!-- /row-->
<div class="row d-flex justify-content-center">
<button type="button" class="btn btn-darkgray btn-lg" [disabled]="!createWalletForm.valid" (click)="onCreateClicked()">Create</button>
</div> </div>
<div class="row"> <!-- /row-->
<div class="col" id="mnemonic">
<label>Mnemonic:</label>
<label>{{ mnemonic }}</label>
</div> </div>
<!-- /container-->
</div> </div>
</div> <!-- /login-->
</section>
<!-- /breeze-->
Breeze.UI/src/app/setup/create/create.component.ts
View file @ 2bb8f4c4
...@@ -93,11 +93,12 @@ export class CreateComponent { ...@@ -93,11 +93,12 @@ export class CreateComponent {
response => { response => {
if (response.status >= 200 && response.status < 400){ if (response.status >= 200 && response.status < 400){
this.mnemonic = response.json(); this.mnemonic = response.json();
alert("Your wallet has been created. Please write down your 12 word passphrase: \n" + this.mnemonic + "\nYou will be redirected to the decryption page."); alert("Your wallet has been created.\n\nPlease write down your 12 word passphrase: \n" + this.mnemonic + "\n\nYou will be redirected to the decryption page.");
this.router.navigate(['']); this.router.navigate(['']);
} }
}, },
error => { error => {
console.log(error);
if (error.status === 0) { if (error.status === 0) {
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) {
......
Breeze.UI/src/app/setup/recover/recover.component.html
View file @ 2bb8f4c4
<div class="container col-md-8 offset-md-2"> <section id="breeze">
<div class="row"> <div class="login d-flex align-items-center text-center">
<div class="col"> <div class="container">
<h1>Recover your wallet</h1> <p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
</div> <h3 class="display-5">Welcome</h3>
</div> <div class="row d-flex justify-content-center">
<div class="row"> <form class="col-md-8 col-xs-12 text-left" [formGroup]="recoverWalletForm">
<div class="col"> <div class="form-group">
<p>Welcome, please complete the form below to recover your wallet.</p> <label class="col-12 row" for="creationDate">Creation Date (optional)</label>
</div> <material-datepicker class="form-control" [(date)]="creationDate"></material-datepicker>
</div> </div>
<div class="row">
<div class="col">
<form [formGroup]="recoverWalletForm" (ngSubmit)="onRecoverClicked()">
<div class="form-group"> <div class="form-group">
<label>Mnemonic:</label> <label class="col-12 row" for="walletMnemonic">12 Secret Words</label>
<input class="form-control" formControlName="walletMnemonic" type="text" placeholder="Enter your saved mnemonic."> <input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your 12 secret words.">
<div *ngIf="formErrors.walletMnemonic" class="alert alert-danger">{{formErrors.walletMnemonic}}</div> <div *ngIf="formErrors.walletMnemonic" class="form-control-feedback">{{ formErrors.walletMnemonic }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Wallet password: </label> <label class="text-left" for="walletPassword">Password</label>
<input class="form-control" type="password" formControlName="walletPassword" placeholder="Enter password here."> <input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
<div *ngIf="formErrors.walletPassword" class="alert alert-danger">{{formErrors.walletPassword}}</div> <div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
</div> </div>
<!--<div class="form-group has-success">-->
<div class="form-group"> <div class="form-group">
<label>Name:</label> <label class="col-12 row" for="walletName">Name</label>
<input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet."> <input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
<div *ngIf="formErrors.walletName" class="alert alert-danger">{{formErrors.walletName}}</div> <div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Network:</label> <label class="text-left" for="walletNetwork">Network</label>
<select name="network" formControlName="selectNetwork"> <select class="form-control custom-select" name="network" formControlName="selectNetwork">
<!--<option value="main">Main</option>--> <!--<option value="main">Main</option>-->
<option value="test">Testnet</option> <option value="test">Testnet</option>
<!--<option value="stratistest">StratisTest</option>--> <!--<option value="stratistest">StratisTest</option>-->
</select> </select>
</div> </div>
<div class="form-group"> </form>
<label>Creation date:</label>
<material-datepicker [(date)]="creationDate"></material-datepicker>
</div> </div>
<div class="form-group" id="buttons"> <!-- /row-->
<button type="button" class="btn btn-outline-secondary" (click)="onBackClicked()">Back</button> <div class="row d-flex justify-content-center">
<button type="submit" [disabled]="!recoverWalletForm.valid" class="btn ml-2">Recover Wallet</button> <button type="button" class="btn btn-darkgray btn-lg" [disabled]="!recoverWalletForm.valid" (click)="onRecoverClicked()">Recover</button>
</div> </div>
</form> <!-- /row-->
</div> </div>
<!-- /container-->
</div> </div>
</div> <!-- /login-->
</section>
<!-- /breeze-->
Breeze.UI/src/app/setup/recover/recover.component.ts
View file @ 2bb8f4c4
...@@ -112,6 +112,7 @@ export class RecoverComponent implements OnInit { ...@@ -112,6 +112,7 @@ export class RecoverComponent implements OnInit {
} }
}, },
error => { error => {
console.log(error);
if (error.status === 0) { if (error.status === 0) {
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) {
......
Breeze.UI/src/app/setup/setup.component.css
View file @ 2bb8f4c4
#backButton {
margin-top: 50px;
margin-bottom: 100px;
}
Breeze.UI/src/app/setup/setup.component.html
View file @ 2bb8f4c4
<div class="container col-md-8 offset-md-2"> <section id="breeze">
<div class="row"> <div class="login d-flex align-items-center text-center">
<div class="col"> <div class="container">
<h1>Welcome to Breeze</h1> <h3 class="display-5">Welcome</h3>
</div> <p class="lead">
</div> If you would like to create a new wallet, please click Create. <br/>
<div class="row"> When you have used Breeze before, you can click Restore to recover your wallet.
<div vlass="col">
<p>
If you haven't used Breeze before, please create a new wallet.
<br>
<button (click)="onCreateClicked()" class="btn">Create</button>
</p>
<p style="margin-top: 30px;">
Users who have previously used Breeze, can choose to recover their wallet.
<br>
<button (click)="onRecoverClicked()" class="btn">Recover</button>
</p> </p>
<div class="row d-flex justify-content-center">
<button type="button" class="btn btn-darkgray btn-lg" (click)="onBackClicked()">Back</button>
<button type="button" class="btn btn-darkgray btn-lg" (click)="onCreateClicked()">Create</button>
<button type="button" class="btn btn-darkgray btn-lg" (click)="onRecoverClicked()">Restore</button>
</div> </div>
</div> </div>
<div class="row"> <!-- /container-->
<div class="col">
<button (click)="onBackClicked()" class="btn btn-outline-secondary" id="backButton">Back</button>
</div>
<!--<div class="col">
<button (click)="onCreateClicked()" class="btn">Create</button>
</div>
<div class="col">
<button (click)="onRecoverClicked()" class="btn">Recover</button>
</div>-->
</div> </div>
</div> <!-- /login-->
</section>
<!-- /breeze-->
Breeze.UI/src/app/shared/services/api.service.ts
View file @ 2bb8f4c4
...@@ -72,6 +72,20 @@ export class ApiService { ...@@ -72,6 +72,20 @@ export class ApiService {
.map((response: Response) => response); .map((response: Response) => response);
} }
/**
* Get general wallet info from the API.
*/
getGeneralInfo(data: WalletInfo): Observable<any> {
let params: URLSearchParams = new URLSearchParams();
params.set('Name', data.walletName);
return Observable
.interval(this.pollingInterval)
.startWith(0)
.switchMap(() => this.http.get(this.webApiUrl + '/wallet/general-info', new RequestOptions({headers: this.headers, search: params})))
.map((response: Response) => response);
}
/** /**
* Get wallet balance info from the API. * Get wallet balance info from the API.
*/ */
......
Breeze.UI/src/app/wallet/dashboard/dashboard.component.css
View file @ 2bb8f4c4
.container {
width: 100%;
}
#dashboard {
/*padding-top: 50px !important;*/
padding-left: 100px !important;
padding-right: 100px !important;
border: 2px solid;
border-color: #D5E3F0;
background-color: #DAE6F2;
height: 200px;
width:100%;
}
#sendButton {
width: 100px;
font-family: "Lato Black";
color: #A1B0C3;
background-color: white;
border-radius: 25px;
}
#receiveButton {
width: 100px;
font-family: "Lato Black";
color: white;
background-color: #20B9FF;
border-radius: 25px;
}
#transactions {
padding-left: 100px !important;
margin-top: 10px;
}
.transactionsTable {
border-collapse: separate;
border-spacing: 10px;
}
.transactionsTable tr {
border: 1px solid #D5E3F0;
text-align: left;
border-spacing: 10px;
}
.transactionsTable th {
text-align: left;
border-spacing: 10px;
}
.transactionsTable td {
height: 50px;
vertical-align: center;
}
Breeze.UI/src/app/wallet/dashboard/dashboard.component.html
View file @ 2bb8f4c4
<div class="container nopadding"> <section id="breeze">
<div class="d-flex flex-row align-items-center nopadding" id="dashboard"> <!-- CONTENT -->
<div class="d-flex flex-column"> <section id="content" class="bitcoin">
<div class="p">Active Balance</div> <!-- JUMBOTRON-->
<div class="p">Balance: {{confirmedBalance | coinNotation }}</div> <div class="jumbotron jumbotron-fluid">
<div class="p">Unconfirmed Balance: {{unconfirmedBalance | coinNotation }}</div> <div class="container">
</div> <div class="row d-flex align-items-center">
<div class="d-flex flex-column"> <div class="col-xs-12 col-md-4 text-left">
</div> <h5 class="text-uppercase">Active balance</h5>
<div class="d-flex flex-column ml-auto"> <p class="lead">
<div> <i class="icon-bitcoin"></i>
<button (click)="openSendDialog()" class="btn" id="sendButton">Send</button> <!--<strong><span class="h2">29</span>.76500293</strong>-->
<button (click)="openReceiveDialog()" class="btn ml-2" id="receiveButton">Receive</button> <strong>{{confirmedBalance | coinNotation }}</strong>
</div> <!--<small class="text-uppercase">btc</small>-->
</div> </p>
</div> </div>
<div class="row" id="transactions"> <!-- /col-->
<div class="col"> <!--<div class="col-xs-12 col-md-4 text-left">
<div>Transactions</div> <h5 class="text-uppercase">Current value</h5>
<table cellspacing="5px" cellpadding="5px" class="transactionsTable" *ngIf="transactions; else noTransactions"> <p class="lead">
<thead> <i class="icon-coin-dollar"></i>
<th>Type</th> <strong><span class="h2">51,390</span></strong>
<th>Amount</th> <small class="text-uppercase">usd</small>
<th>Transaction ID</th> </p>
<th>Confirmed in block</th> </div>-->
<th>Timestamp</th> <div class="col-xs-12 col-md-4 text-left">
</thead> <h5 class="text-uppercase">Unconfirmed balance</h5>
<tr *ngFor="let transaction of transactions; let i=index"> <p class="lead">
<td *ngIf="i<5">{{ transaction.type }}</td> <i class="icon-bitcoin"></i>
<td *ngIf="i<5">{{ transaction.amount | coinNotation }}</td> <strong>{{unconfirmedBalance | coinNotation }}</strong>
<td *ngIf="i<5">{{ transaction.id }}</td> </p>
<td *ngIf="i<5">{{ transaction.confirmedInBlock }}</td> </div>
<td *ngIf="i<5">{{ transaction.timestamp * 1000 | date:'medium' }}</td> <!-- /col-->
</tr> <div class="col-xs-12 col-md-4 text-right">
</table> <p>
<ng-template #noTransactions>Looks like you haven't made any transactions yet</ng-template> <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>
</p>
</div>
<!-- /col-->
</div>
<!-- /row-->
</div> </div>
<!-- /container-->
</div> </div>
</div> <!-- /JUMBOTRON-->
<!-- TRANSACTIONS -->
<section id="transaction" class="container">
<h5 class="text-uppercase">Latest Transactions</h5>
<div *ngIf="transactions; else noTransactions">
<div *ngFor="let transaction of transactions; let i=index">
<div class="card" *ngIf="i<3">
<div class="card-block text-nowrap">
<ul class="list-inline row">
<li class="list-inline-item hidden-xs-down col text-uppercase align-bottom">{{ transaction.type }}</li>
<li class="list-inline-item col-4 amount text-left align-baseline"><!--<span class="text-success">+</span>--> {{ transaction.amount | coinNotation }} <!--<small class="text-uppercase">btc</small> <span class="badge badge-danger text-capitalize">unconfirmed</span>--></li>
<li class="list-inline-item hidden-sm-down col text-center align-baseline">{{ transaction.timestamp * 1000 | date:'medium' }}</li>
<li class="list-inline-item col text-right align-baseline"><a data-toggle="modal" data-target="#modalDetail" (click)="openTransactionDetailDialog(transaction)">details</a></li>
</ul>
</div>
</div>
<!-- /card-->
</div>
</div>
<ng-template #noTransactions>Looks like you haven't made any transactions yet</ng-template>
</section>
<!-- /TRANSACTIONS -->
<status-bar></status-bar>
</section>
<!-- /CONTENT-->
</section>
<!-- /breeze-->
Breeze.UI/src/app/wallet/dashboard/dashboard.component.ts
View file @ 2bb8f4c4
...@@ -7,10 +7,10 @@ import { WalletInfo } from '../../shared/classes/wallet-info'; ...@@ -7,10 +7,10 @@ import { WalletInfo } from '../../shared/classes/wallet-info';
import { SendComponent } from '../send/send.component'; import { SendComponent } from '../send/send.component';
import { ReceiveComponent } from '../receive/receive.component'; import { ReceiveComponent } from '../receive/receive.component';
import { TransactionDetailsComponent } from '../transaction-details/transaction-details.component';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/first';
@Component({ @Component({
selector: 'dashboard-component', selector: 'dashboard-component',
...@@ -18,7 +18,7 @@ import 'rxjs/add/operator/first'; ...@@ -18,7 +18,7 @@ import 'rxjs/add/operator/first';
styleUrls: ['./dashboard.component.css'] styleUrls: ['./dashboard.component.css']
}) })
export class DashboardComponent { 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) {}
private confirmedBalance: number; private confirmedBalance: number;
...@@ -45,6 +45,11 @@ export class DashboardComponent { ...@@ -45,6 +45,11 @@ export class DashboardComponent {
const modalRef = this.modalService.open(ReceiveComponent); const modalRef = this.modalService.open(ReceiveComponent);
}; };
private openTransactionDetailDialog(transaction: any) {
const modalRef = this.modalService.open(TransactionDetailsComponent);
modalRef.componentInstance.transaction = transaction;
}
private getWalletBalance() { private getWalletBalance() {
let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType()) let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
this.walletBalanceSubscription = this.apiService.getWalletBalance(walletInfo) this.walletBalanceSubscription = this.apiService.getWalletBalance(walletInfo)
...@@ -57,6 +62,7 @@ export class DashboardComponent { ...@@ -57,6 +62,7 @@ export class DashboardComponent {
} }
}, },
error => { error => {
console.log(error);
if (error.status === 0) { if (error.status === 0) {
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) {
...@@ -64,7 +70,7 @@ export class DashboardComponent { ...@@ -64,7 +70,7 @@ export class DashboardComponent {
console.log(error); console.log(error);
} }
else { else {
alert(error.json().errors[0].message); alert(error.json().errors[0].description);
} }
} }
} }
...@@ -84,6 +90,7 @@ export class DashboardComponent { ...@@ -84,6 +90,7 @@ export class DashboardComponent {
} }
}, },
error => { error => {
console.log(error);
if (error.status === 0) { if (error.status === 0) {
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) {
...@@ -91,7 +98,7 @@ export class DashboardComponent { ...@@ -91,7 +98,7 @@ export class DashboardComponent {
console.log(error); console.log(error);
} }
else { else {
alert(error.json().errors[0].message); alert(error.json().errors[0].description);
} }
} }
} }
......
Breeze.UI/src/app/wallet/history/history.component.css
View file @ 2bb8f4c4
#transactions {
margin-top: 10px;
}
.transactionsTable {
border-collapse: separate;
border-spacing: 10px;
}
.transactionsTable tr {
border: 1px solid #D5E3F0;
text-align: left;
border-spacing: 10px;
}
.transactionsTable th {
text-align: left;
border-spacing: 10px;
}
.transactionsTable td {
height: 50px;
vertical-align: center;
}
Breeze.UI/src/app/wallet/history/history.component.html
View file @ 2bb8f4c4
<div class="container"> <section id="breeze">
<div class="row" id="transactions"> <!-- CONTENT -->
<div class="col"> <section id="content" class="bitcoin">
<table class="transactionsTable" *ngIf="transactions; else noTransactions"> <!-- JUMBOTRON-->
<thead> <!--<div class="jumbotron jumbotron-fluid">
<th>Type</th> <div class="container">
<th>Amount</th>
<th>Transaction ID</th>
<th>Confirmed in block</th>
<th>Timestamp</th>
</thead>
<tr *ngFor="let transaction of transactions">
<!--<td *ngIf="{{ transaction.amount }} < 0; else received">SENT</td>
<td #received>RECEIVED</td>-->
<td>{{ transaction.type }}</td>
<td>{{ transaction.amount | coinNotation }}</td>
<td>{{ transaction.id }}</td>
<td>{{ transaction.confirmedInBlock }}</td>
<td>{{ transaction.timestamp * 1000 | date:'medium' }}</td>
</tr>
</table>
</div>
<div class="row"> <div class="row">
<div class="col"> <div class="col d-flex justify-content-center">
<ng-template #noTransactions>Looks like you haven't made any transactions yet.</ng-template> <form class="col-md-6 col-xs-12">
<h5 class="text-uppercase text-center">Search for a transaction</h5>
<div class="form-group">
<input type="email" class="form-control mt-3" id="searchEmail" aria-describedby="emailHelp" placeholder="tax ID, amount, block number, ...">
</div>
</form>
</div>
</div>
</div> </div>
</div>-->
<!-- /JUMBOTRON-->
<!-- TRANSACTIONS -->
<section id="transaction" class="container">
<h5 class="text-uppercase">Transactions</h5>
<div *ngIf="transactions; else noTransactions">
<div *ngFor="let transaction of transactions">
<div class="card">
<div class="card-block text-nowrap">
<ul class="list-inline row">
<li class="list-inline-item hidden-xs-down col text-uppercase align-bottom">{{ transaction.type }}</li>
<li class="list-inline-item col-4 amount text-left align-baseline"><!--<span class="text-success">+</span>--> {{ transaction.amount | coinNotation }} <!--<small class="text-uppercase">btc</small> <span class="badge badge-danger text-capitalize">unconfirmed</span>--></li>
<li class="list-inline-item hidden-sm-down col text-center align-baseline">{{ transaction.timestamp * 1000 | date:'medium' }}</li>
<li class="list-inline-item col text-right align-baseline"><a data-toggle="modal" data-target="#modalDetail" (click)="openTransactionDetailDialog(transaction)">details</a></li>
</ul>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- /card-->
<div>
<ng-template #noTransactions>Looks like you haven't made any transactions yet.</ng-template>
</div>
</section>
<!-- /TRANSACTIONS -->
</section>
<!-- /CONTENT-->
</section>
<!-- /breeze-->
Breeze.UI/src/app/wallet/history/history.component.ts
View file @ 2bb8f4c4
import { Component, OnInit, OnDestroy } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ApiService } from '../../shared/services/api.service'; import { ApiService } from '../../shared/services/api.service';
import { GlobalService } from '../../shared/services/global.service'; import { GlobalService } from '../../shared/services/global.service';
...@@ -8,6 +9,8 @@ import { WalletInfo } from '../../shared/classes/wallet-info'; ...@@ -8,6 +9,8 @@ import { WalletInfo } from '../../shared/classes/wallet-info';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { TransactionDetailsComponent } from '../transaction-details/transaction-details.component';
@Component({ @Component({
selector: 'history-component', selector: 'history-component',
templateUrl: './history.component.html', templateUrl: './history.component.html',
...@@ -15,7 +18,7 @@ import { Subscription } from 'rxjs/Subscription'; ...@@ -15,7 +18,7 @@ import { Subscription } from 'rxjs/Subscription';
}) })
export class HistoryComponent { export class HistoryComponent {
constructor(private apiService: ApiService, private globalService: GlobalService) {} constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal) {}
private transactions: any; private transactions: any;
private errorMessage: string; private errorMessage: string;
...@@ -29,6 +32,11 @@ export class HistoryComponent { ...@@ -29,6 +32,11 @@ export class HistoryComponent {
this.walletHistorySubscription.unsubscribe(); this.walletHistorySubscription.unsubscribe();
} }
private openTransactionDetailDialog(transaction: any) {
const modalRef = this.modalService.open(TransactionDetailsComponent);
modalRef.componentInstance.transaction = transaction;
}
private getHistory() { private getHistory() {
let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType()) let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
this.walletHistorySubscription = this.apiService.getWalletHistory(walletInfo) this.walletHistorySubscription = this.apiService.getWalletHistory(walletInfo)
...@@ -41,6 +49,7 @@ export class HistoryComponent { ...@@ -41,6 +49,7 @@ export class HistoryComponent {
} }
}, },
error => { error => {
console.log(error);
if (error.status === 0) { if (error.status === 0) {
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) {
...@@ -48,7 +57,7 @@ export class HistoryComponent { ...@@ -48,7 +57,7 @@ export class HistoryComponent {
console.log(error); console.log(error);
} }
else { else {
alert(error.json().errors[0].message); alert(error.json().errors[0].description);
} }
} }
} }
......
Breeze.UI/src/app/wallet/menu/menu.component.css
View file @ 2bb8f4c4
.navbar {
height: 60px;
width: 100%;
padding-left: 85px;
}
.nav-link {
margin: 0 auto;
text-align: center;
width: 120px;
background-color: white;
color: black;
border: none;
}
.is-active {
background-color: white;
color: #FF9900;
border-bottom: 2px solid;
border-color: #FF9900;
padding-bottom:25px;
}
Breeze.UI/src/app/wallet/menu/menu.component.html
View file @ 2bb8f4c4
<nav class="navbar navbar-toggleable-sm navbar-fixed-top"> <section id="content" class="bitcoin">
<div class="container"> <nav class="navbar fixed-top navbar-toggleable-xl navbar-inverse">
<ul class="navbar-nav mr-auto" routerLinkActive="active"> <div class="collapse navbar-collapse" id="navbarBreeze">
<li class="nav-item"><a class="nav-link" routerLink="dashboard" [routerLinkActive]="['is-active']">Dashboard</a></li> <ul class="navbar-nav mr-auto ml-5" routerLinkActive="active">
<li class="nav-item"><a class="nav-link" routerLink="history" [routerLinkActive]="['is-active']">History</a></li> <li class="nav-item">
<li class="nav-item"><a class="nav-link" (click)="logOut()">Logout</a></li> <a class="nav-link" routerLink="dashboard" [routerLinkActive]="['is-active']">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="history" [routerLinkActive]="['is-active']">History</a>
</li>
<li class="nav-item">
<a class="nav-link" (click)="logOut()">Logout</a>
</li>
</ul> </ul>
<div class="navbar-brand">Breeze</div> <!-- /ul-->
</div> </div>
</nav> <!-- /navbar-collapse-->
</nav>
<!-- /nav-->
</section>
Breeze.UI/src/app/wallet/receive/receive.component.html
View file @ 2bb8f4c4
<div class="container" id="receiveForm"> <div id="modalReceive" tabindex="-1" role="dialog" aria-labelledby="modal_receive" aria-hidden="true">
<div class="row"> <div class="modal-dialog" role="document">
<div class="col"> <div class="modal-content">
<h1>Receive</h1> <div class="modal-header">
<div class="bubble"><i class="icon-download"></i></div>
</div> </div>
<div class="modal-body">
<h5 class="modal-title text-uppercase" id="modalReceive">Receive</h5>
<form>
<div class="form-group clearfix">
<label class="float-left" for="yourAddress">Your address</label>
<span class="float-right"><a ngxClipboard [cbContent]="address" (click)="onCopiedClick()">copy</a></span>
</div> </div>
<div class="row"> <div class="myAddress"><code>{{ address }}</code></div>
<div class="col"> <div class="text-center" *ngIf="copied">
<table *ngIf="address"> <span class="badge badge-success">Your address has been copied to your clipboard.</span>
<thead>
<th>Receive address: </th>
</thead>
<tr>
<td>{{ address }}</td>
<td><button class="btn btn-outline-primary" type="button" ngxClipboard [cbContent]="address" (cbOnSuccess)="isCopied1=true" [class.btn-outline-primary]="isCopied1">Copy</button>
</tr>
</table>
</div> </div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-lg btn-primary" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">OK</button>
</div> </div>
<div class="row">
<div class="col">
<button type="button" class="btn" (click)="activeModal.close('Close click')">Close</button>
</div> </div>
</div> </div>
</div> </div>
Breeze.UI/src/app/wallet/receive/receive.component.ts
View file @ 2bb8f4c4
...@@ -5,7 +5,7 @@ import { GlobalService } from '../../shared/services/global.service'; ...@@ -5,7 +5,7 @@ import { GlobalService } from '../../shared/services/global.service';
import { WalletInfo } from '../../shared/classes/wallet-info'; import { WalletInfo } from '../../shared/classes/wallet-info';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({ @Component({
selector: 'receive-component', selector: 'receive-component',
...@@ -17,12 +17,17 @@ export class ReceiveComponent { ...@@ -17,12 +17,17 @@ export class ReceiveComponent {
constructor(private apiService: ApiService, private globalService: GlobalService, public activeModal: NgbActiveModal) {} constructor(private apiService: ApiService, private globalService: GlobalService, public activeModal: NgbActiveModal) {}
private address: any = ""; private address: any = "";
private copied: boolean = false;
private errorMessage: string; private errorMessage: string;
ngOnInit() { ngOnInit() {
this.getUnusedReceiveAddresses(); this.getUnusedReceiveAddresses();
} }
private onCopiedClick() {
this.copied = true;
}
private getUnusedReceiveAddresses() { private getUnusedReceiveAddresses() {
let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType()) let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
this.apiService.getUnusedReceiveAddress(walletInfo) this.apiService.getUnusedReceiveAddress(walletInfo)
...@@ -33,6 +38,7 @@ export class ReceiveComponent { ...@@ -33,6 +38,7 @@ export class ReceiveComponent {
} }
}, },
error => { error => {
console.log(error);
if (error.status === 0) { if (error.status === 0) {
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) {
...@@ -40,7 +46,7 @@ export class ReceiveComponent { ...@@ -40,7 +46,7 @@ export class ReceiveComponent {
console.log(error); console.log(error);
} }
else { else {
alert(error.json().errors[0].message); alert(error.json().errors[0].description);
} }
} }
} }
......
Breeze.UI/src/app/wallet/send/send.component.css
View file @ 2bb8f4c4
#sendForm {
padding: 10px;
}
#feeSlider {
width: 200px;
}
Breeze.UI/src/app/wallet/send/send.component.html
View file @ 2bb8f4c4
<div class="container" id="sendForm"> <div id="modalSend" tabindex="-1" role="dialog" aria-labelledby="modal_send" aria-hidden="true">
<div class="row"> <div class="modal-dialog" role="document">
<div class="col"> <div class="modal-content">
<h1>Send</h1> <div class="modal-header">
</div> <div class="bubble"><i class="icon-upload"></i></div>
</div> </div>
<div class="row"> <div class="modal-body">
<div class="col"> <h5 class="modal-title text-uppercase" id="modalSend">Send</h5>
<form [formGroup]="sendForm" (ngSubmit)="send()"> <form [formGroup]="sendForm" (ngSubmit)="send()">
<div class="form-group"> <!--<div class="form-group has-danger clearfix">-->
<label>Pay To</label> <div class="form-group clearfix">
<input class="form-control" formControlName="address" type="text" placeholder="Please enter the recipients address."> <label class="float-left" for="yourAddress">Amount</label>
<div *ngIf="formErrors.address" class="alert alert-danger">{{formErrors.address}}</div> <!--<span class="float-right"><a href="#">max</a></span>-->
</div> <input type="text" class="form-control form-control-danger" formControlName="amount" id="Amount" placeholder="0.00 BTC">
<div class="form-group"> <div *ngIf="formErrors.amount" class="form-control-feedback">{{ formErrors.amount }}</div>
<label>Amount</label> </div>
<input class="form-control" formControlName="amount" type="text" placeholder="Please enter the amount you want to send."> <!--<div class="form-group has-success">-->
<div *ngIf="formErrors.amount" class="alert alert-danger">{{formErrors.amount}}</div> <div class="form-group clearfix">
</div> <label for="destinationAddress">Destination address</label>
<div class="form-group"> <input type="text" class="form-control form-control-success" formControlName="address" id="destinationAddress" placeholder="Please enter the destination address here.">
<label>Fee</label> <div *ngIf="formErrors.address" class="form-control-feedback">{{ formErrors.address }}</div>
<input class="form-control" id="feeSlider" formControlName="fee" type="range" min="1" max="3" value="2"> </div>
</div> <!--<div class="form-group">
<div class="form-group"> <label for="Fees">Fees</label>
<label>Wallet Password</label> <div class="col feeSlider text-center">
<input class="form-control" formControlName="password" type="password" placeholder="Please enter your wallet password."> <input class="form-control" id="dataSlider" type="text"
<div *ngIf="formErrors.password" class="alert alert-danger">{{formErrors.password}}</div> data-provide="slider"
</div> data-slider-ticks="[1, 2, 3]"
<button type="submit" [disabled]="!sendForm.valid" class="btn">Send</button> data-slider-ticks-labels='["Low", "Medium", "High"]'
<button type="button" class="btn" (click)="activeModal.close('Close click')">Close</button> data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="2"
data-slider-tooltip="hide">
</div>
<p class="text-muted text-center">
<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 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">
</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>
</form> </form>
<!-- /form-->
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-lg btn-primary" [disabled]="!sendForm.valid" (click)="send()">Send</button>
<button type="button" class="btn btn-lg btn-primary" (click)="activeModal.close('Close click')">Close</button>
</div>
</div> </div>
</div> </div>
</div> </div>
Breeze.UI/src/app/wallet/send/send.component.ts
View file @ 2bb8f4c4
...@@ -132,6 +132,7 @@ export class SendComponent { ...@@ -132,6 +132,7 @@ export class SendComponent {
} }
}, },
error => { error => {
console.log(error);
if (error.status === 0) { if (error.status === 0) {
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) {
...@@ -139,7 +140,7 @@ export class SendComponent { ...@@ -139,7 +140,7 @@ export class SendComponent {
console.log(error); console.log(error);
} }
else { else {
alert(error.json().errors[0].message); alert(error.json().errors[0].description);
} }
} }
} }
......
Breeze.UI/src/app/wallet/sidebar/sidebar.component.html 0 → 100644
View file @ 2bb8f4c4
<!-- SIDEBAR -->
<aside id="sidebar">
<ul class="list-unstyled menu">
<li class="active">
<!--<a href="#">--><img src="../../../assets/images/ico_bitcoin.svg" alt="Bitcoin"><!--</a>-->
<span class="bar"></span>
</li>
<!--<li>
<a href="#"><img src="../../../assets/images/ico_stratis.svg" alt="Stratis"></a>
<span class="bar"></span>
</li>-->
</ul>
<!-- /menu-->
<!--<ul class="list-unstyled second">
<li><a href="#"><span class="icon-settings"></span></a></li>
</ul>-->
</aside>
<!-- /sidebar -->
Breeze.UI/src/app/wallet/sidebar/sidebar.component.spec.ts 0 → 100644
View file @ 2bb8f4c4
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SidebarComponent } from './sidebar.component';
describe('SidebarComponent', () => {
let component: SidebarComponent;
let fixture: ComponentFixture<SidebarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SidebarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SidebarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
Breeze.UI/src/app/wallet/sidebar/sidebar.component.ts 0 → 100644
View file @ 2bb8f4c4
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Breeze.UI/src/app/wallet/status-bar/status-bar.component.html 0 → 100644
View file @ 2bb8f4c4
<div class="status">
<ul class="list-inline align-self-center row" title="Total blocks: {{ chainTip }}&#013;Last block received: {{ lastBlockSyncedHeight }}&#013;Connections: {{ connectedNodes }}">
<li class="list-inline-item pending"><i class="icon-syncr text-success"></i></li>
<li class="list-inline-item">{{ percentSynced }}%</li>
<li class="list-inline-item"><i class="icon-earth text-success"></i></li>
<li class="list-inline-item">{{ connectedNodes }}</li>
</ul>
</div>
Breeze.UI/src/app/wallet/status-bar/status-bar.component.spec.ts 0 → 100644
View file @ 2bb8f4c4
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { StatusBarComponent } from './status-bar.component';
describe('StatusBarComponent', () => {
let component: StatusBarComponent;
let fixture: ComponentFixture<StatusBarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ StatusBarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(StatusBarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
Breeze.UI/src/app/wallet/status-bar/status-bar.component.ts 0 → 100644
View file @ 2bb8f4c4
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ApiService } from '../../shared/services/api.service';
import { GlobalService } from '../../shared/services/global.service';
import { WalletInfo } from '../../shared/classes/wallet-info';
import { Observable } from 'rxjs/Rx';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'status-bar',
templateUrl: './status-bar.component.html',
styleUrls: ['./status-bar.component.scss']
})
export class StatusBarComponent implements OnInit {
private generalWalletInfoSubscription: Subscription;
private lastBlockSyncedHeight: number;
private chainTip: number;
private connectedNodes: number = 0;
private percentSyncedNumber: number = 0;
private percentSynced: string;
constructor(private apiService: ApiService, private globalService: GlobalService) { }
ngOnInit() {
this.getGeneralWalletInfo()
}
ngOnDestroy() {
this.generalWalletInfoSubscription.unsubscribe();
}
getGeneralWalletInfo() {
let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
this.generalWalletInfoSubscription = this.apiService.getGeneralInfo(walletInfo)
.subscribe(
response => {
if (response.status >= 200 && response.status < 400) {
let generalWalletInfoResponse = response.json();
this.lastBlockSyncedHeight = generalWalletInfoResponse.lastBlockSyncedHeight;
this.chainTip = generalWalletInfoResponse.chainTip;
this.connectedNodes = generalWalletInfoResponse.connectedNodes;
if (this.chainTip === 0) {
this.chainTip = 1;
}
this.percentSyncedNumber = ((this.lastBlockSyncedHeight / this.chainTip) * 100);
if (this.percentSyncedNumber.toFixed(0) === "100" && this.lastBlockSyncedHeight != this.chainTip) {
this.percentSyncedNumber = 99;
}
this.percentSynced = this.percentSyncedNumber.toFixed(0);
}
},
error => {
console.log(error);
if (error.status === 0) {
alert("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 {
alert(error.json().errors[0].description);
}
}
}
)
;
}
}
Breeze.UI/src/app/wallet/transaction-details/transaction-details.component.html 0 → 100644
View file @ 2bb8f4c4
<div id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="modal_detail" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="bubble"><i class="icon-settings"></i></div>
</div>
<div class="modal-body">
<h5 class="modal-title text-uppercase" id="modalDetail">Transaction Details</h5>
<ul class="list-inline row">
<li class="list-inline-item col blockLabel">Type</li>
<li class="list-inline-item col-9 blockText">{{ transaction.type }}</li>
</ul>
<ul class="list-inline row">
<li class="list-inline-item col blockLabel">Amount</li>
<li class="list-inline-item col-9 blockText"><strong class="text-success">{{transaction.amount | coinNotation }}</strong></li>
</ul>
<!--<ul class="list-inline row">
<li class="list-inline-item col blockLabel">From</li>
<li class="list-inline-item col-9 blockText"><code>n4kVJQarwwdmsXDdgNnJHgBSpZ8MhSkNBx</code></li>
</ul>-->
<ul class="list-inline row">
<li class="list-inline-item col blockLabel">Date</li>
<li class="list-inline-item col-9 blockText"><small>{{ transaction.timestamp * 1000 | date:'medium' }}</small></li>
</ul>
<ul class="list-inline row">
<li class="list-inline-item col blockLabel">Block</li>
<li class="list-inline-item col-9 blockText">#{{ transaction.confirmedInBlock }}</li>
</ul>
<ul class="list-inline row">
<li class="list-inline-item col blockLabel">Transaction ID</li>
<li class="list-inline-item col-9 blockText blockID"><code>{{ transaction.id }}</code></li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-lg btn-primary" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">OK</button>
</div>
</div>
</div>
</div>
Breeze.UI/src/app/wallet/transaction-details/transaction-details.component.spec.ts 0 → 100644
View file @ 2bb8f4c4
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TransactionDetailsComponent } from './transaction-details.component';
describe('TransactionDetailsComponent', () => {
let component: TransactionDetailsComponent;
let fixture: ComponentFixture<TransactionDetailsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TransactionDetailsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TransactionDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
Breeze.UI/src/app/wallet/transaction-details/transaction-details.component.ts 0 → 100644
View file @ 2bb8f4c4
import { Component, Input, OnInit } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'transaction-details',
templateUrl: './transaction-details.component.html',
styleUrls: ['./transaction-details.component.scss']
})
export class TransactionDetailsComponent implements OnInit {
@Input() transaction;
constructor(public activeModal: NgbActiveModal) {
}
ngOnInit() {
}
}
Breeze.UI/src/app/wallet/wallet.component.html
View file @ 2bb8f4c4
<div id="container"> <sidebar></sidebar>
<div id="navigation"> <app-menu></app-menu>
<app-menu></app-menu> <router-outlet></router-outlet>
</div>
<div id="content">
<router-outlet></router-outlet>
</div>
</div>
Breeze.UI/src/app/wallet/wallet.module.ts
View file @ 2bb8f4c4
...@@ -9,6 +9,9 @@ import { HistoryComponent } from './history/history.component'; ...@@ -9,6 +9,9 @@ import { HistoryComponent } from './history/history.component';
import {SharedModule} from '../shared/shared.module'; import {SharedModule} from '../shared/shared.module';
import { WalletRoutingModule } from './wallet-routing.module'; import { WalletRoutingModule } from './wallet-routing.module';
import { SidebarComponent } from './sidebar/sidebar.component';
import { StatusBarComponent } from './status-bar/status-bar.component';
import { TransactionDetailsComponent } from './transaction-details/transaction-details.component';
@NgModule({ @NgModule({
imports: [ imports: [
...@@ -22,7 +25,9 @@ import { WalletRoutingModule } from './wallet-routing.module'; ...@@ -22,7 +25,9 @@ import { WalletRoutingModule } from './wallet-routing.module';
WalletComponent, WalletComponent,
MenuComponent, MenuComponent,
DashboardComponent, DashboardComponent,
HistoryComponent HistoryComponent,
SidebarComponent,
StatusBarComponent
], ],
exports: [] exports: []
}) })
......
Breeze.UI/src/assets/fonts/Lato-Black.ttf 100644 → 100755
View file @ 2bb8f4c4
File mode changed from 100644 to 100755
Breeze.UI/src/assets/fonts/Lato-BlackItalic.ttf 100644 → 100755
View file @ 2bb8f4c4
File mode changed from 100644 to 100755
Breeze.UI/src/assets/fonts/Lato-Bold.ttf 100644 → 100755
View file @ 2bb8f4c4
File mode changed from 100644 to 100755
Breeze.UI/src/assets/fonts/Lato-BoldItalic.ttf 100644 → 100755
View file @ 2bb8f4c4
File mode changed from 100644 to 100755
Breeze.UI/src/assets/fonts/Lato-Hairline.ttf 100644 → 100755
View file @ 2bb8f4c4
File mode changed from 100644 to 100755
Breeze.UI/src/assets/fonts/Lato-HairlineItalic.ttf 100644 → 100755
View file @ 2bb8f4c4
File mode changed from 100644 to 100755
Breeze.UI/src/assets/fonts/Lato-Italic.ttf 100644 → 100755
View file @ 2bb8f4c4
File mode changed from 100644 to 100755
Breeze.UI/src/assets/fonts/Lato-Light.ttf 100644 → 100755
View file @ 2bb8f4c4
File mode changed from 100644 to 100755
Breeze.UI/src/assets/fonts/Lato-LightItalic.ttf 100644 → 100755
View file @ 2bb8f4c4
File mode changed from 100644 to 100755
Breeze.UI/src/assets/fonts/Lato-Regular.ttf 100644 → 100755
View file @ 2bb8f4c4
File mode changed from 100644 to 100755
Breeze.UI/src/assets/fonts/OFL.txt 0 → 100755
View file @ 2bb8f4c4
Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
Breeze.UI/src/assets/fonts/icon.svg 0 → 100755
View file @ 2bb8f4c4
This diff is collapsed.
Breeze.UI/src/assets/images/check.svg 0 → 100644
View file @ 2bb8f4c4
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
<title>check</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
<g id="Breeze-Wallet---dashboard-&gt;-Send-&gt;-BTC" transform="translate(-471.000000, -283.000000)" stroke="#2ECCA9" stroke-width="2">
<g id="popup-+-wallet" transform="translate(-455.000000, -265.000000)">
<g id="popup" transform="translate(820.000000, 317.000000)">
<g id="Amount" transform="translate(90.000000, 195.000000)">
<g id="check" transform="translate(17.000000, 37.000000)">
<circle id="Oval" stroke-opacity="0.200775589" cx="8" cy="8" r="8"></circle>
<polyline id="Shape" points="3.73333333 8 6.4 10.6666667 12.2666667 4.8"></polyline>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
Breeze.UI/src/assets/images/cross.svg 0 → 100644
View file @ 2bb8f4c4
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
<title>cross</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
<g id="Breeze-Wallet---dashboard-&gt;-Send-&gt;-BTC" transform="translate(-471.000000, -376.000000)" stroke="#FF5B8A" stroke-width="2">
<g id="popup-+-wallet" transform="translate(-455.000000, -265.000000)">
<g id="popup" transform="translate(820.000000, 317.000000)">
<g id="Send-to" transform="translate(90.000000, 288.000000)">
<g id="cross" transform="translate(17.000000, 37.000000)">
<circle id="Oval" stroke-opacity="0.2" cx="8" cy="8" r="8"></circle>
<path d="M4.8,4.8 L11.2,11.2" id="Shape"></path>
<path d="M11.2,4.8 L4.8,11.2" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
Breeze.UI/src/assets/images/ico_bitcoin.svg 0 → 100644
View file @ 2bb8f4c4
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
<title>Bitcoin (active)</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="42" height="42" rx="8"></rect>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Breeze-Wallet---Stratis-light---dashboard-&gt;-BTC" transform="translate(-14.000000, -30.000000)">
<g id="wallet" transform="translate(0.000000, -24.000000)">
<g id="content">
<g id="left-nav" transform="translate(0.000000, 24.000000)">
<g id="content" transform="translate(14.000000, 30.000000)">
<g id="icons">
<g id="Bitcoin-(active)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#F7931A" xlink:href="#path-1"></use>
<path d="M27.274994,20.6150151 C26.5661248,20.0811297 25.556326,19.867595 25.556326,19.867595 C25.556326,19.867595 26.4108533,19.3721633 26.7600442,18.8772172 C27.1096236,18.3820769 27.2843161,17.6149444 27.3135449,17.2169095 C27.3425794,16.8186803 27.4106502,15.1489534 26.1095353,14.1879015 C25.1031352,13.4442685 23.9498146,13.1490681 22.4010809,13.0530309 L22.4010809,9.68328014 L20.3234143,9.68328014 L20.3234143,13.0132177 C19.8598332,13.0132177 19.3180823,13.0132177 18.740888,13.0132177 L18.740888,9.68328014 L16.6634155,9.68328014 L16.6634155,13.0132177 C14.542537,13.0132177 12.576056,13.0132177 12.576056,13.0132177 L12.576056,15.1708021 C12.576056,15.1708021 13.4498102,15.1708021 13.7774437,15.1708021 C14.1049802,15.1708021 14.6875153,15.2072166 14.9350369,15.4842583 C15.1826556,15.7608144 15.2263531,15.9065695 15.2263531,16.445116 C15.2263531,16.9838566 15.2264502,24.8384192 15.2264502,25.0423405 C15.2264502,25.2461647 15.187608,25.4984445 15.0127212,25.6636207 C14.8381258,25.828797 14.6634332,25.8673478 14.245783,25.8673478 C13.8282298,25.8673478 13.0032226,25.8673478 13.0032226,25.8673478 L12.576056,28.3627618 C12.576056,28.3627618 14.6073063,28.3627618 16.6634155,28.3627618 L16.6634155,31.6832801 L18.7409851,31.6832801 L18.7409851,28.3627618 C19.3793558,28.3627618 19.935187,28.3627618 20.3235114,28.3627618 L20.3235114,31.6832801 L22.4011781,31.6832801 L22.4011781,28.3079943 C22.9382679,28.2766293 23.4390403,28.2359421 23.7311333,28.1976826 C24.3234761,28.1201925 25.6631419,27.9648239 26.9158012,27.0909726 C28.1680722,26.2170243 28.4493865,24.8480327 28.4786152,23.4695247 C28.5081352,22.0909197 27.9831835,21.1489975 27.274994,20.6150151 Z M18.740888,15.3627794 C18.740888,15.3627794 19.4010103,15.3046133 20.0515192,15.3141296 C20.7022224,15.3237431 21.2747557,15.3432612 22.1293801,15.6054458 C22.9836161,15.8677274 23.4880785,16.5085258 23.507888,17.2658506 C23.527212,18.0231754 23.1967624,18.5278321 22.6145186,18.8482798 C22.0320805,19.1686305 21.2266885,19.3434201 20.4690724,19.3722604 C19.7119417,19.4014892 18.740888,19.3722604 18.740888,19.3722604 L18.740888,15.3627794 L18.740888,15.3627794 Z M23.3912645,25.2946203 C22.9155452,25.5569019 21.9640096,25.7898577 21.041897,25.8576373 C20.119493,25.9257081 18.740888,25.8965765 18.740888,25.8965765 L18.740888,21.4401194 C18.740888,21.4401194 20.0613269,21.3723399 21.0905468,21.4401194 C22.1195725,21.5083845 22.9836161,21.7702777 23.3717463,21.9647798 C23.7600707,22.1587963 24.4399054,22.5858658 24.4399054,23.6054722 C24.4399054,24.6246903 23.8666924,25.0325329 23.3912645,25.2946203 Z" id="BTC_alt_1_" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-2)" transform="translate(20.527929, 20.683280) rotate(-345.000000) translate(-20.527929, -20.683280) "></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
Breeze.UI/src/assets/images/ico_stratis.svg 0 → 100644
View file @ 2bb8f4c4
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
<title>stratis</title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="0 0 70 0 70 115.835938 70 700 0 700"></polygon>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Breeze-Wallet---Stratis-light---dashboard-&gt;-BTC" transform="translate(-14.000000, -92.000000)">
<g id="wallet" transform="translate(0.000000, -24.000000)">
<g id="content">
<g id="left-nav" transform="translate(0.000000, 24.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Mask">
<use fill="#122B41" fill-rule="evenodd" xlink:href="#path-1"></use>
<path stroke="#192D3F" stroke-width="1" d="M-0.5,-0.5 L70.5,-0.5 L70.5,700.5 L-0.5,700.5 L-0.5,-0.5 Z"></path>
</g>
<g id="content" mask="url(#mask-2)">
<g transform="translate(14.000000, 30.000000)" id="icons">
<g>
<g id="stratis" transform="translate(0.000000, 62.000000)">
<rect id="Rectangle-3-Copy" fill="#FFFFFF" x="0" y="0" width="42" height="42" rx="8"></rect>
<path d="M7.46002337,16.8770481 L20.9852984,24.4456138 C20.9942689,24.4512619 21.005565,24.4512619 21.0145354,24.4456138 L34.5368204,16.8772142 C34.5539307,16.8664164 34.5540968,16.8416646 34.5369865,16.8307007 L21.0122098,9.26097213 C21.0030732,9.25532407 20.9914449,9.25532407 20.9824744,9.26113825 L7.45969113,16.8308669 C7.44291307,16.8418307 7.44307919,16.8664164 7.46002337,16.8770481 Z M20.4827873,33.8803649 L6.15299596,25.855303 C6.14020477,25.8471632 6.13655014,25.830219 6.14468999,25.8174278 L6.76448146,24.8559287 C6.77262131,24.8431376 6.78973161,24.839649 6.80235668,24.8477889 L20.9824744,32.7876315 C20.9914449,32.7934457 21.0030732,32.7936118 21.0120437,32.7876315 L34.3017614,25.3486389 C34.628186,25.1657414 34.7919798,24.7938001 34.7919798,24.4208621 L34.7919798,22.4011824 C34.7919798,22.3794208 34.7680586,22.3662974 34.7497854,22.3779257 L21.5089068,29.7915021 C21.1439425,29.995829 20.8555592,29.9984869 20.4864419,29.7921666 L7.09572353,22.2988529 C6.40616192,21.8611283 6.00332239,21.1120959 6.00332239,20.2952869 L6,16.7662464 C6,16.2555954 6.26446208,16.0931306 6.65118803,15.8763448 L20.465677,8.14165965 C20.8047267,7.95244965 21.1929477,7.95228353 21.5338247,8.14415144 L35.5592852,15.9964491 C35.8481669,16.1582494 36,16.5001232 36,16.8439903 C36,17.1685876 35.8161058,17.532223 35.5592852,17.6760824 L21.5040893,25.5453242 C21.1444408,25.7461626 20.8500772,25.7461626 20.4899304,25.544992 L7.2359283,18.1242725 C7.21748905,18.1128102 7.19373398,18.1259337 7.19373398,18.1475292 L7.19722248,20.2952869 C7.19722248,20.6982925 7.40022039,21.0677421 7.74026679,21.2836973 L20.9826405,28.6999316 C20.991611,28.7055796 21.0030732,28.7055796 21.0120437,28.6999316 L34.5094107,21.1408346 C34.859092,20.9180685 35.3584469,20.907603 35.6823797,21.1953217 C35.8891984,21.3792159 36,21.6484955 36,21.9250843 L35.9996678,24.4117255 C35.9973421,25.180526 35.5592852,26.015276 34.9419856,26.3608044 L21.5055844,33.8833551 C21.1399556,34.0880142 20.8560575,34.0880142 20.4827873,33.8803649 L20.4827873,33.8803649 Z" id="logo" fill="#2FBAFF"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
Breeze.UI/src/index.html
View file @ 2bb8f4c4
...@@ -3,9 +3,7 @@ ...@@ -3,9 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Breeze</title> <title>Breeze</title>
<base href=""> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<app-root>Loading...</app-root> <app-root>Loading...</app-root>
......
Breeze.UI/src/styles.css
View file @ 2bb8f4c4
This diff is collapsed.
Breeze.UI/src/styles.scss
View file @ 2bb8f4c4
/* You can add global styles to this file, and also import other style files */
html, body {
margin: 0;
padding: 0;
height: 100%;
}
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