Skip to content

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

Update wallet components to new design

parent 402229bd
Hide 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">
<div class="d-flex flex-row align-items-center nopadding" id="dashboard">
<div class="d-flex flex-column">
<div class="p">Active Balance</div>
<div class="p">Balance: {{confirmedBalance | coinNotation }}</div>
<div class="p">Unconfirmed Balance: {{unconfirmedBalance | coinNotation }}</div>
</div>
<div class="d-flex flex-column">
</div>
<div class="d-flex flex-column ml-auto">
<div>
<button (click)="openSendDialog()" class="btn" id="sendButton">Send</button>
<button (click)="openReceiveDialog()" class="btn ml-2" id="receiveButton">Receive</button>
<section id="breeze">
<!-- CONTENT -->
<section id="content" class="bitcoin">
<!-- JUMBOTRON-->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-xs-12 col-md-4 text-left">
<h5 class="text-uppercase">Active balance</h5>
<p class="lead">
<i class="icon-bitcoin"></i>
<!--<strong><span class="h2">29</span>.76500293</strong>-->
<strong>{{confirmedBalance | coinNotation }}</strong>
<!--<small class="text-uppercase">btc</small>-->
</p>
</div>
<!-- /col-->
<!--<div class="col-xs-12 col-md-4 text-left">
<h5 class="text-uppercase">Current value</h5>
<p class="lead">
<i class="icon-coin-dollar"></i>
<strong><span class="h2">51,390</span></strong>
<small class="text-uppercase">usd</small>
</p>
</div>-->
<div class="col-xs-12 col-md-4 text-left">
<h5 class="text-uppercase">Unconfirmed balance</h5>
<p class="lead">
<i class="icon-bitcoin"></i>
<strong>{{unconfirmedBalance | coinNotation }}</strong>
</p>
</div>
<!-- /col-->
<div class="col-xs-12 col-md-4 text-right">
<p>
<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>
<!-- /container-->
</div>
</div>
<div class="row" id="transactions">
<div class="col">
<div>Transactions</div>
<table cellspacing="5px" cellpadding="5px" class="transactionsTable" *ngIf="transactions; else noTransactions">
<thead>
<th>Type</th>
<th>Amount</th>
<th>Transaction ID</th>
<th>Confirmed in block</th>
<th>Timestamp</th>
</thead>
<tr *ngFor="let transaction of transactions; let i=index">
<td *ngIf="i<5">{{ transaction.type }}</td>
<td *ngIf="i<5">{{ transaction.amount | coinNotation }}</td>
<td *ngIf="i<5">{{ transaction.id }}</td>
<td *ngIf="i<5">{{ transaction.confirmedInBlock }}</td>
<td *ngIf="i<5">{{ transaction.timestamp * 1000 | date:'medium' }}</td>
</tr>
</table>
<!-- /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>
</div>
</div>
</div>
</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';
import { SendComponent } from '../send/send.component';
import { ReceiveComponent } from '../receive/receive.component';
import { TransactionDetailsComponent } from '../transaction-details/transaction-details.component';
import { Observable } from 'rxjs/Rx';
import { Subscription } from 'rxjs/Subscription';
......@@ -17,7 +18,7 @@ import { Subscription } from 'rxjs/Subscription';
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {
export class DashboardComponent implements OnInit {
constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal) {}
private confirmedBalance: number;
......@@ -44,6 +45,11 @@ export class DashboardComponent {
const modalRef = this.modalService.open(ReceiveComponent);
};
private openTransactionDetailDialog(transaction: any) {
const modalRef = this.modalService.open(TransactionDetailsComponent);
modalRef.componentInstance.transaction = transaction;
}
private getWalletBalance() {
let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
this.walletBalanceSubscription = this.apiService.getWalletBalance(walletInfo)
......
Breeze.UI/src/app/wallet/history/history.component.html
View file @ af4a6185
<div class="container">
<div class="row" id="transactions">
<div class="col">
<table class="transactionsTable" *ngIf="transactions; else noTransactions">
<thead>
<th>Type</th>
<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="col">
<section id="breeze">
<!-- CONTENT -->
<section id="content" class="bitcoin">
<!-- JUMBOTRON-->
<!--<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
<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>-->
<!-- /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>
<!-- /card-->
<div>
<ng-template #noTransactions>Looks like you haven't made any transactions yet.</ng-template>
</div>
</div>
</div>
</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 { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ApiService } from '../../shared/services/api.service';
import { GlobalService } from '../../shared/services/global.service';
......@@ -8,6 +9,8 @@ import { WalletInfo } from '../../shared/classes/wallet-info';
import { Observable } from 'rxjs/Rx';
import { Subscription } from 'rxjs/Subscription';
import { TransactionDetailsComponent } from '../transaction-details/transaction-details.component';
@Component({
selector: 'history-component',
templateUrl: './history.component.html',
......@@ -15,7 +18,7 @@ import { Subscription } from 'rxjs/Subscription';
})
export class HistoryComponent {
constructor(private apiService: ApiService, private globalService: GlobalService) {}
constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal) {}
private transactions: any;
private errorMessage: string;
......@@ -29,6 +32,11 @@ export class HistoryComponent {
this.walletHistorySubscription.unsubscribe();
}
private openTransactionDetailDialog(transaction: any) {
const modalRef = this.modalService.open(TransactionDetailsComponent);
modalRef.componentInstance.transaction = transaction;
}
private getHistory() {
let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
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">
<div class="container">
<ul class="navbar-nav mr-auto" routerLinkActive="active">
<li class="nav-item"><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>
<div class="navbar-brand">Breeze</div>
</div>
</nav>
<section id="content" class="bitcoin">
<nav class="navbar navbar-toggleable-xl navbar-inverse">
<div class="collapse navbar-collapse" id="navbarBreeze">
<ul class="navbar-nav mr-auto ml-5" routerLinkActive="active">
<li class="nav-item">
<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>
<!-- /navbar-collapse-->
</nav>
<!-- /nav-->
</section>
Breeze.UI/src/app/wallet/receive/receive.component.html
View file @ af4a6185
<div class="container" id="receiveForm">
<div class="row">
<div class="col">
<h1>Receive</h1>
</div>
</div>
<div class="row">
<div class="col">
<table *ngIf="address">
<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>
<div class="row">
<div class="col">
<button type="button" class="btn" (click)="activeModal.close('Close click')">Close</button>
<div id="modalReceive" tabindex="-1" role="dialog" aria-labelledby="modal_receive" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="bubble"><i class="icon-download"></i></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 class="myAddress"><code>{{ address }}</code></div>
<div class="text-center" *ngIf="copied">
<span class="badge badge-success">Your address has been copied to your clipboard.</span>
</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>
</div>
Breeze.UI/src/app/wallet/receive/receive.component.ts
View file @ af4a6185
......@@ -5,7 +5,7 @@ import { GlobalService } from '../../shared/services/global.service';
import { WalletInfo } from '../../shared/classes/wallet-info';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'receive-component',
......@@ -17,12 +17,17 @@ export class ReceiveComponent {
constructor(private apiService: ApiService, private globalService: GlobalService, public activeModal: NgbActiveModal) {}
private address: any = "";
private copied: boolean = false;
private errorMessage: string;
ngOnInit() {
this.getUnusedReceiveAddresses();
}
private onCopiedClick() {
this.copied = true;
}
private getUnusedReceiveAddresses() {
let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
this.apiService.getUnusedReceiveAddress(walletInfo)
......
Breeze.UI/src/app/wallet/send/send.component.html
View file @ af4a6185
<div class="container" id="sendForm">
<div class="row">
<div class="col">
<h1>Send</h1>
</div>
</div>
<div class="row">
<div class="col">
<form [formGroup]="sendForm" (ngSubmit)="send()">
<div class="form-group">
<label>Pay To</label>
<input class="form-control" formControlName="address" type="text" placeholder="Please enter the recipients address.">
<div *ngIf="formErrors.address" class="alert alert-danger">{{formErrors.address}}</div>
</div>
<div class="form-group">
<label>Amount</label>
<input class="form-control" formControlName="amount" type="text" placeholder="Please enter the amount you want to send.">
<div *ngIf="formErrors.amount" class="alert alert-danger">{{formErrors.amount}}</div>
</div>
<div class="form-group">
<label>Fee</label>
<input class="form-control" id="feeSlider" formControlName="fee" type="range" min="1" max="3" value="2">
</div>
<div class="form-group">
<label>Wallet Password</label>
<input class="form-control" formControlName="password" type="password" placeholder="Please enter your wallet password.">
<div *ngIf="formErrors.password" class="alert alert-danger">{{formErrors.password}}</div>
</div>
<button type="submit" [disabled]="!sendForm.valid" class="btn">Send</button>
<button type="button" class="btn" (click)="activeModal.close('Close click')">Close</button>
</form>
<div id="modalSend" tabindex="-1" role="dialog" aria-labelledby="modal_send" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="bubble"><i class="icon-upload"></i></div>
</div>
<div class="modal-body">
<h5 class="modal-title text-uppercase" id="modalSend">Send</h5>
<form [formGroup]="sendForm" (ngSubmit)="send()">
<!--<div class="form-group has-danger clearfix">-->
<div class="form-group clearfix">
<label class="float-left" for="yourAddress">Amount</label>
<!--<span class="float-right"><a href="#">max</a></span>-->
<input type="text" class="form-control form-control-danger" formControlName="amount" id="Amount" placeholder="0.00 BTC">
<div *ngIf="formErrors.amount" class="form-control-feedback">{{ formErrors.amount }}</div>
</div>
<!--<div class="form-group has-success">-->
<div class="form-group clearfix">
<label for="destinationAddress">Destination address</label>
<input type="text" class="form-control form-control-success" formControlName="address" id="destinationAddress" placeholder="Please enter the destination address here.">
<div *ngIf="formErrors.address" class="form-control-feedback">{{ formErrors.address }}</div>
</div>
<!--<div class="form-group">
<label for="Fees">Fees</label>
<div class="col feeSlider text-center">
<input class="form-control" id="dataSlider" type="text"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["Low", "Medium", "High"]'
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-->
</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>
Breeze.UI/src/app/wallet/sidebar/sidebar.component.html
View file @ af4a6185
......@@ -11,9 +11,8 @@
</li>-->
</ul>
<!-- /menu-->
<ul class="list-unstyled second">
<!--<li><a href="#"><span class="icon-settings"></span></a></li>-->
<!--<ul class="list-unstyled second">
<li><a href="#"><span class="icon-settings"></span></a></li>
</ul>
</ul>-->
</aside>
<!-- /sidebar -->
Breeze.UI/src/app/wallet/wallet.component.html
View file @ af4a6185
<div id="container">
<div id="navigation">
<app-menu></app-menu>
</div>
<div id="content">
<router-outlet></router-outlet>
</div>
</div>
<sidebar></sidebar>
<app-menu></app-menu>
<router-outlet></router-outlet>
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