RanchiMall/flosight-api
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #808 from SonicWizard/next

Browse Source 
BEM-ified some of the styles
This commit is contained in:
Jason Dreyzehner 2018-02-01 15:32:37 -05:00 committed by GitHub
commit 51199e4d87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 262 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/ionic.config.json
View File

@ -7,6 +7,6 @@
},
"proxies": [{
"path": "/api",
"proxyUrl": "http://localhost:3000/api"
"proxyUrl": "https://bch-insight.bitpay.com/api"
}]
}

2
app/package.json
View File

@ -41,7 +41,7 @@
"@types/jasmine": "2.5.41",
"@types/node": "7.0.4",
"codecov": "2.2.0",
"ionic": "3.9.2",
"ionic": "3.19.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "3.2.0",
"karma": "1.4.1",

50
app/src/app/app.scss
View File

@ -8,6 +8,10 @@
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
body {
user-select: text;
}
.ellipsis {
display: block;
overflow: hidden;
@ -15,19 +19,47 @@
white-space: nowrap;
}
.summary ion-label {
color: #333;
font-weight: bold;
.list--summary {
ion-label {
color: #333;
font-weight: bold;
}
ion-item {
color: #999;
font-size: 1.125rem;
}
ion-note {
color: #999;
max-width: 50%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.summary ion-item {
color: #999;
font-size: 1.4rem;
.grid--table {
margin: 10px 0 20px;
ion-row {
border-top: 1px solid #ccc;
&:first-child {
background-color: white;
border-top: none;
}
&:nth-child(even) {
background-color: #f4f4f4;
}
&:last-child {
background-color: white;
}
}
}
body {
user-select: text;
}
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".

10
app/src/components/denomination/denomination.html Normal file
View File

@ -0,0 +1,10 @@
<ion-list radio-group [(ngModel)]="currency.currencySymbol" (ionChange)="currency.setCurrency(currency.currencySymbol)">
<ion-list-header>
Units
</ion-list-header>
<ion-item *ngFor="let unit of units">
<ion-label color="dark">{{ unit }}</ion-label>
<ion-radio value="{{ unit }}" (click)="close()"></ion-radio>
</ion-item>
</ion-list>

19
app/src/components/denomination/denomination.module.ts Normal file
View File

@ -0,0 +1,19 @@
import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { DenominationComponent } from './denomination';
@NgModule({
declarations: [
DenominationComponent
],
imports: [
IonicModule
],
exports: [
DenominationComponent
],
entryComponents: [
DenominationComponent
]
})
export class DenominationComponentModule {}

3
app/src/components/denomination/denomination.scss Normal file
View File

@ -0,0 +1,3 @@
denomination {
}

31
app/src/components/denomination/denomination.ts Normal file
View File

@ -0,0 +1,31 @@
import { Component } from '@angular/core';
import { CurrencyProvider } from '../../providers/currency/currency';
import { ViewController } from 'ionic-angular';
@Component({
selector: 'denomination',
templateUrl: 'denomination.html'
})
export class DenominationComponent {
public text: string;
public units: any = [];
constructor(
public currency: CurrencyProvider,
public viewCtrl: ViewController
) {
this.text = 'Hello World';
this.units = [
'USD',
this.currency.defaultCurrency,
'm' + this.currency.defaultCurrency,
'bits'
];
}
public close(): void {
this.viewCtrl.dismiss();
}
}

7
app/src/components/head-nav/head-nav.html
View File

@ -4,7 +4,7 @@
</button>
<ion-title>{{title}}</ion-title>
<ion-buttons end>
<button ion-button (click)="changeCurrency()">
<button ion-button (click)="changeCurrency($event)">
<ion-icon name="logo-bitcoin" *ngIf="currency.currencySymbol !== 'USD'"></ion-icon><ion-icon name="logo-usd" *ngIf="currency.currencySymbol === 'USD'"></ion-icon>&nbsp;{{ currency.currencySymbol }}
</button>
<button ion-button icon-only (click)="toggleSearch()">
@ -12,4 +12,7 @@
</button>
</ion-buttons>
</ion-navbar>
<ion-searchbar [hidden]="!showSearch" (ionInput)="search($event)" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" [debounce]="1500"></ion-searchbar>
<form (ngSubmit)="search($event)">
<ion-searchbar [hidden]="!showSearch" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" name="search"></ion-searchbar>
</form>

4
app/src/components/head-nav/head-nav.module.ts
View File

@ -1,13 +1,15 @@
import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { HeadNavComponent } from './head-nav';
import { DenominationComponentModule } from '../denomination/denomination.module';
@NgModule({
declarations: [
HeadNavComponent
],
imports: [
IonicModule
IonicModule,
DenominationComponentModule
],
exports: [
HeadNavComponent

28
app/src/components/head-nav/head-nav.ts
View File

@ -5,6 +5,8 @@ import { Http } from '@angular/http';
import { ApiProvider } from '../../providers/api/api';
import { CurrencyProvider } from '../../providers/currency/currency';
import { ActionSheetController } from 'ionic-angular';
import { PopoverController } from 'ionic-angular';
import { DenominationComponent } from '../denomination/denomination';
/**
* Generated class for the HeadNavComponent component.
@ -24,7 +26,14 @@ export class HeadNavComponent {
public q: string;
public badQuery: boolean = false;
constructor(private navCtrl: NavController, private http: Http, private api: ApiProvider, public currency: CurrencyProvider, public actionSheetCtrl: ActionSheetController) {
constructor(
private navCtrl: NavController,
private http: Http,
private api: ApiProvider,
public currency: CurrencyProvider,
public actionSheetCtrl: ActionSheetController,
public popoverCtrl: PopoverController
) {
}
public search(): void {
@ -102,7 +111,8 @@ export class HeadNavComponent {
}
/* tslint:enable:no-unused-variable */
public changeCurrency(): void {
public changeCurrency(myEvent: any): void {
/*
let actionSheet: any = this.actionSheetCtrl.create({
title: 'Change Denomination',
buttons: [
@ -113,15 +123,15 @@ export class HeadNavComponent {
}
},
{
text: 'BTC',
text: this.currency.defaultCurrency,
handler: () => {
this.currency.setCurrency('BTC');
this.currency.setCurrency(this.currency.defaultCurrency);
}
},
{
text: 'mBTC',
text: 'm' + this.currency.defaultCurrency,
handler: () => {
this.currency.setCurrency('mBTC');
this.currency.setCurrency('m' + this.currency.defaultCurrency);
}
},
{
@ -137,6 +147,12 @@ export class HeadNavComponent {
]
});
actionSheet.present();
*/
let popover: any = this.popoverCtrl.create(DenominationComponent);
popover.present({
ev: myEvent
});
}
public toggleSearch(): void {

4
app/src/components/latest-blocks/latest-blocks.html
View File

@ -5,7 +5,7 @@
</div>
<div *ngIf="!loading">
<ion-grid>
<ion-grid class="grid--table">
<ion-row>
<ion-col><b>Height</b></ion-col>
@ -15,6 +15,7 @@
<ion-col hideWhen="portrait"><b>Mined By</b></ion-col>
<ion-col text-right><b>Size</b></ion-col>
</ion-row>
<ion-row *ngFor="let block of getBlocks()">
<ion-col>
<a (click)="goToBlock(block.hash)">{{block.height}}</a>
@ -35,6 +36,7 @@
{{ block.size }}
</ion-col>
</ion-row>
<ion-row *ngIf="showAllBlocksButton">
<ion-col text-center>
<button ion-button (click)="goToBlocks()">See all blocks</button>

21
app/src/components/latest-blocks/latest-blocks.scss
View File

@ -1,23 +1,2 @@
latest-blocks {
ion-grid {
// border: 2px solid green;
margin: 10px 0 20px;
ion-row {
border-top: 1px solid #ccc;
}
ion-row:nth-child(even) {
background-color: #f4f4f4;
}
ion-row:first-child {
background-color: white;
border-top: none;
}
ion-row:last-child {
background-color: white;
}
}
}

2
app/src/components/latest-transactions/latest-transactions.html
View File

@ -4,7 +4,7 @@
</div>
<div *ngIf="!loading">
<ion-grid>
<ion-grid class="grid--table">
<ion-row>
<ion-col><b>Hash</b></ion-col>

21
app/src/components/latest-transactions/latest-transactions.scss
View File

@ -1,23 +1,2 @@
latest-transactions {
ion-grid {
// border: 2px solid green;
margin: 10px 0 20px;
ion-row {
border-top: 1px solid #ccc;
}
ion-row:nth-child(even) {
background-color: #f4f4f4;
}
ion-row:first-child {
background-color: white;
border-top: none;
}
ion-row:last-child {
background-color: white;
}
}
}

34
app/src/components/transaction/transaction.html
View File

@ -1,19 +1,19 @@
<ion-grid>
<ion-row>
<ion-col col-8>
<ion-col col-7>
<div class="ellipsis">
<ion-icon name="add-circle" [hidden]="expanded" (click)="toggleExpanded()"></ion-icon><ion-icon name="remove-circle" [hidden]="!expanded" (click)="toggleExpanded()"></ion-icon> <span><a (click)="goToTx(tx.txid)">{{ tx.txid }}</a></span>
</div>
</ion-col>
<ion-col col-4 text-right>
<div [hidden]="!tx.firstSeenTs">
<ion-col col-5 text-right>
<ion-note [hidden]="!tx.firstSeenTs">
<span translate>first seen at</span>
<time>{{tx.firstSeenTs * 1000 | date:'medium'}}</time>
</div>
<div [hidden]="!tx.blocktime && tx.firstSeenTs">
</ion-note>
<ion-note [hidden]="!tx.blocktime && tx.firstSeenTs">
<span translate>mined</span>
<time>{{tx.time * 1000 | date:'medium'}}</time>
</div>
<time>{{tx.time * 1000 | date:'MMM d, y'}}</time> <time>{{tx.time * 1000 | date:'hh:mm:ss a'}}</time>
</ion-note>
</ion-col>
</ion-row>
@ -48,7 +48,7 @@
</div>
<div item-end>
{{ currency.getConversion(vin.value) }}
{{ currency.getConvertedNumber(vin.value) | number:'1.0-8' }} {{ currency.currencySymbol }}
</div>
</ion-item>
</ion-list>
@ -76,7 +76,7 @@
</div>
<div item-end>
{{ currency.getConversion(vout.value) }}
{{ currency.getConvertedNumber(vout.value) | number:'1.0-8' }} {{ currency.currencySymbol }}
<span [hidden]="!vout.spentTxId">(S)</span>
<span [hidden]="vout.spentTxId">(U)</span>
</div>
@ -85,15 +85,15 @@
</ion-col>
</ion-row>
<ion-row>
<ion-col col-3>
<span [hidden]="tx.isCoinBase">Fee {{ currency.getConversion(tx.fees) }}</span>
<ion-row align-items-center text-uppercase class="small">
<ion-col col-6>
<div [hidden]="tx.isCoinBase">
Fee <span text-nowrap>{{ currency.getConvertedNumber(tx.fees) | number:'1.0-8' }} {{ currency.currencySymbol }}</span>
</div>
</ion-col>
<ion-col col-6 text-center>
{{ tx.confirmations }} Confirmations
</ion-col>
<ion-col col-3 text-right>
<span class="">{{ currency.getConversion(tx.valueOut) }}</span>
<ion-col col-6 text-right>
<span text-nowrap>{{ tx.confirmations }} Confirmation<span *ngIf="tx.confirmations !== 1">s</span></span>
<span text-nowrap>{{ currency.getConvertedNumber(tx.valueOut) | number:'1.0-8' }} {{ currency.currencySymbol }}</span>
</ion-col>
</ion-row>
</ion-grid>

18
app/src/components/transaction/transaction.scss
View File

@ -9,6 +9,24 @@ transaction {
ion-row {
border: 1px solid #eee;
&.small {
font-size: 1.1rem;
}
ion-col {
ion-note {
font-size: 1.2rem;
}
}
}
}
.item, .item p {
font-size: 1.4rem;
}
.list {
margin-bottom: 5px
}
}

26
app/src/pages/address/address.html
View File

@ -10,34 +10,34 @@
<div *ngIf="!loading">
<h1>Address</h1>
<p class="ellipsis"><b>Address</b> {{ address.addrStr }}</p>
<p>{{ currency.getConversion(address.balance) }}</p>
<p>{{ currency.getConvertedNumber(address.balance) | number:'1.0-8' }} {{ currency.currencySymbol }}</p>
<h2>Summary</h2>
<ion-list class="summary">
<ion-list class="list--summary">
<ion-item>
Total Received
<span item-end>
{{ currency.getConversion(address.totalReceived) }}
</span>
<ion-note item-end>
{{ currency.getConvertedNumber(address.totalReceived) | number:'1.0-8' }} {{ currency.currencySymbol }}
</ion-note>
</ion-item>
<ion-item>
Total Sent
<span item-end>
{{ currency.getConversion(address.totalSent) }}
</span>
<ion-note item-end>
{{ currency.getConvertedNumber(address.totalSent) | number:'1.0-8' }} {{ currency.currencySymbol }}
</ion-note>
</ion-item>
<ion-item>
Final Balance
<span item-end>
{{ currency.getConversion(address.balance) }}
</span>
<ion-note item-end>
{{ currency.getConvertedNumber(address.balance) | number:'1.0-8' }} {{ currency.currencySymbol }}
</ion-note>
</ion-item>
<ion-item>
No. Transactions
<span item-end>
<ion-note item-end>
{{ address.txApperances }}
</span>
</ion-note>
</ion-item>
</ion-list>

56
app/src/pages/block-detail/block-detail.html
View File

@ -13,84 +13,84 @@
<h2>Summary</h2>
<ion-list *ngIf="!loading" class="summary">
<ion-list *ngIf="!loading" class="list--summary">
<ion-item>
Number of Transactions
<span item-end>
<ion-note item-end>
{{ block.tx.length }}
</span>
</ion-note>
</ion-item>
<ion-item>
Height
<span item-end>
<ion-note item-end>
{{ block.height }} <span [hidden]="!block.isMainChain">(Mainchain)</span>
</span>
</ion-note>
</ion-item>
<ion-item>
Block Reward
<span item-end>
{{ currency.getConversion(block.reward) }}
</span>
<ion-note item-end>
{{ currency.getConvertedNumber(block.reward) | number:'1.0-8' }} {{ currency.currencySymbol }}
</ion-note>
</ion-item>
<ion-item>
Timestamp
<span item-end>
<ion-note item-end>
{{ block.time * 1000 | date:'medium' }}
</span>
</ion-note>
</ion-item>
<ion-item>
Mined by
<span item-end *ngIf="block.poolInfo">
<ion-note item-end *ngIf="block.poolInfo">
<a href="{{ block.poolInfo.url }}">{{ block.poolInfo.poolName }}</a>
</span>
</ion-note>
</ion-item>
<ion-item>
Merkle Root
<span item-end class="ellipsis">
<ion-note item-end>
{{ block.merkleroot }}
</span>
</ion-note>
</ion-item>
<ion-item>
Previous Block
<span item-end>
<ion-note item-end>
<a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a>
</span>
</ion-note>
</ion-item>
<ion-item>
Difficulty
<span item-end>
<ion-note item-end>
{{ block.difficulty }}
</span>
</ion-note>
</ion-item>
<ion-item>
Bits
<span item-end>
<ion-note item-end>
{{ block.bits }}
</span>
</ion-note>
</ion-item>
<ion-item>
Size (bytes)
<span item-end>
<ion-note item-end>
{{ block.size }}
</span>
</ion-note>
</ion-item>
<ion-item>
Version
<span item-end>
<ion-note item-end>
{{ block.version }}
</span>
</ion-note>
</ion-item>
<ion-item>
Nonce
<span item-end>
<ion-note item-end>
{{ block.nonce }}
</span>
</ion-note>
</ion-item>
<ion-item>
Next Block
<span item-end>
<ion-note item-end>
<a (click)="goToNextBlock()">{{ block.height + 1 }}</a>
</span>
</ion-note>
</ion-item>
</ion-list>

4
app/src/pages/home/home.html
View File

@ -16,16 +16,18 @@
<latest-blocks [numBlocks]="6" [showTimeAs]="'age'" [showAllBlocksButton]="true"></latest-blocks>
</div>
<!--
<div>
<h1>Latest Transactions</h1>
<latest-transactions [refreshSeconds]="8"></latest-transactions>
</div>
-->
<div class="about">
<h2>About</h2>
<p><strong>insight</strong> is an <a href="https://insight.is/"
target="_blank">open-source Bitcoin blockchain explorer</a> with complete REST and websocket APIs that can be used for writing web wallets and other apps that need more advanced blockchain queries than provided by bitcoind RPC. Check out the <a href="https://github.com/bitpay/insight-ui" target="_blank">source code</a>.</p>
<p><strong>insight</strong> is still in development, so be sure to report any bugs and provide feedback for improvement at our <a href="https://github.com/bitpay/insight-ui/issues" target="_blank">github issue tracker</a>.</p>
<p><strong>insight</strong> is still in development, so be sure to report any bugs and provide feedback for improvement at our <a href="https://github.com/bitpay/insight/issues" target="_blank">github issue tracker</a>.</p>
<div id="powered" class="row">
<div class="powered-text">
<small class="text-muted">Powered by</small>

18
app/src/pages/transaction/transaction.html
View File

@ -13,30 +13,30 @@
<h2>Summary</h2>
<ion-list class="summary">
<ion-list class="list--summary">
<ion-item>
Size
<span item-end>
<ion-note item-end>
{{ tx.size }} (bytes)
</span>
</ion-note>
</ion-item>
<ion-item>
Received Time
<span item-end>
<ion-note item-end>
{{ tx.time * 1000 | date:'medium' }}
</span>
</ion-note>
</ion-item>
<ion-item>
Mined Time
<span item-end>
<ion-note item-end>
{{ tx.blocktime * 1000 | date:'medium' }}
</span>
</ion-note>
</ion-item>
<ion-item>
Included in Block
<span item-end>
<ion-note item-end>
<a (click)="goToBlock(tx.blockhash)">{{ tx.blockhash }}</a>
</span>
</ion-note>
</ion-item>
</ion-list>

39
app/src/providers/currency/currency.ts
View File

@ -16,10 +16,11 @@ export class CurrencyProvider {
public currencySymbol: string;
public factor: number = 1;
private bitstamp: number;
private kraken: number;
private loading: boolean;
constructor(public http: Http, private api: ApiProvider) {
this.defaultCurrency = 'BTC';
this.defaultCurrency = 'BCH';
this.currencySymbol = this.defaultCurrency;
}
@ -27,6 +28,30 @@ export class CurrencyProvider {
return Math.round(aFloat * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces);
}
public getConvertedNumber(value: number): number {
if (value === 0.00000000) return 0;
let response: number;
if (this.currencySymbol === 'USD') {
response = this.roundFloat((value * this.factor), 2);
} else if (this.currencySymbol === 'm' + this.defaultCurrency) {
this.factor = 1000;
response = this.roundFloat((value * this.factor), 5);
} else if (this.currencySymbol === 'bits') {
this.factor = 1000000;
response = this.roundFloat((value * this.factor), 2);
} else {
this.factor = 1;
response = this.roundFloat((value * this.factor), 8);
}
return response;
}
/**
* @deprecated use getConvertedNumber
*/
public getConversion(value: number): string {
if (value === 0.00000000) return '0 ' + this.currencySymbol; // fix value to show
@ -34,13 +59,13 @@ export class CurrencyProvider {
if (this.currencySymbol === 'USD') {
response = this.roundFloat((value * this.factor), 2);
} else if (this.currencySymbol === 'mBTC') {
} else if (this.currencySymbol === 'm' + this.defaultCurrency) {
this.factor = 1000;
response = this.roundFloat((value * this.factor), 5);
} else if (this.currencySymbol === 'bits') {
this.factor = 1000000;
response = this.roundFloat((value * this.factor), 2);
} else { // assumes currencySymbol is BTC
} else {
this.factor = 1;
response = this.roundFloat((value * this.factor), 8);
}
@ -56,7 +81,11 @@ export class CurrencyProvider {
this.http.get(this.api.apiPrefix + 'currency').subscribe(
(data) => {
let currencyParsed: any = JSON.parse(data['_body']);
this.factor = this.bitstamp = currencyParsed.data.bitstamp;
if (currencyParsed.data.bitstamp) {
this.factor = this.bitstamp = currencyParsed.data.bitstamp;
} else if (currencyParsed.data.kraken) {
this.factor = this.kraken = currencyParsed.data.kraken;
}
this.loading = false;
},
(err) => {
@ -64,7 +93,7 @@ export class CurrencyProvider {
this.loading = false;
}
);
} else if (currency === 'mBTC') {
} else if (currency === 'm' + this.defaultCurrency) {
this.factor = 1000;
} else if (currency === 'bits') {
this.factor = 1000000;