Skip to content

B
Breeze
Commit af4a6185 authored by dev0tion's avatar dev0tion
Browse files
Options

Update wallet components to new design

parent 402229bd
Show whitespace changes
Inline Side-by-side
Showing with 240 additions and 140 deletions
Breeze.UI/src/app/wallet/dashboard/dashboard.component.html
View file @ af4a6185
<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 @ af4a6185
...@@ -7,6 +7,7 @@ import { WalletInfo } from '../../shared/classes/wallet-info'; ...@@ -7,6 +7,7 @@ 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';
...@@ -17,7 +18,7 @@ import { Subscription } from 'rxjs/Subscription'; ...@@ -17,7 +18,7 @@ import { Subscription } from 'rxjs/Subscription';
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;
...@@ -44,6 +45,11 @@ export class DashboardComponent { ...@@ -44,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)
......
Breeze.UI/src/app/wallet/history/history.component.html
View file @ af4a6185
<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 @ af4a6185
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)
......
Breeze.UI/src/app/wallet/menu/menu.component.html
View file @ af4a6185
<nav class="navbar navbar-toggleable-sm navbar-fixed-top"> <section id="content" class="bitcoin">
<div class="container"> <nav class="navbar 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 @ af4a6185
<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 @ af4a6185
...@@ -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)
......
Breeze.UI/src/app/wallet/send/send.component.html
View file @ af4a6185
<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/sidebar/sidebar.component.html
View file @ af4a6185
...@@ -11,9 +11,8 @@ ...@@ -11,9 +11,8 @@
</li>--> </li>-->
</ul> </ul>
<!-- /menu--> <!-- /menu-->
<ul class="list-unstyled second"> <!--<ul class="list-unstyled second">
<!--<li><a href="#"><span class="icon-settings"></span></a></li>-->
<li><a href="#"><span class="icon-settings"></span></a></li> <li><a href="#"><span class="icon-settings"></span></a></li>
</ul> </ul>-->
</aside> </aside>
<!-- /sidebar --> <!-- /sidebar -->
Breeze.UI/src/app/wallet/wallet.component.html
View file @ af4a6185
<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>
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