theme, polish for first release
This commit is contained in:
Jason Dreyzehner
parent
468c2618b6
commit
7dfd544992
@ -1,12 +1,14 @@
|
||||
{
|
||||
"name": "insight-ui",
|
||||
"name": "insight",
|
||||
"app_id": "",
|
||||
"type": "ionic-angular",
|
||||
"integrations": {
|
||||
"cordova": {}
|
||||
},
|
||||
"proxies": [{
|
||||
"path": "/api",
|
||||
"proxyUrl": "https://bch-insight.bitpay.com/api"
|
||||
}]
|
||||
"proxies": [
|
||||
{
|
||||
"path": "/api",
|
||||
"proxyUrl": "https://bch-insight.bitpay.com/api"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
import { Component, ViewChild } from '@angular/core';
|
||||
import { Component, ViewChild } from '@angular/core';
|
||||
import { Platform, MenuController, Nav } from 'ionic-angular';
|
||||
import { StatusBar } from '@ionic-native/status-bar';
|
||||
import { SplashScreen } from '@ionic-native/splash-screen';
|
||||
import { StatusBar } from '@ionic-native/status-bar';
|
||||
import { SplashScreen } from '@ionic-native/splash-screen';
|
||||
import {
|
||||
HomePage,
|
||||
BlocksPage,
|
||||
BroadcastTxPage,
|
||||
NodeStatusPage,
|
||||
VerifyMessagePage
|
||||
BroadcastTxPage
|
||||
// NodeStatusPage,
|
||||
// VerifyMessagePage
|
||||
} from '../pages';
|
||||
|
||||
@Component({
|
||||
templateUrl: './app.html'
|
||||
})
|
||||
export class InsightApp {
|
||||
|
||||
@ViewChild(Nav) public nav: Nav;
|
||||
|
||||
private menu: MenuController;
|
||||
@ -23,10 +22,14 @@ export class InsightApp {
|
||||
private status: StatusBar;
|
||||
|
||||
public rootPage: any;
|
||||
public pages: Array<{ title: string, component: any }>;
|
||||
|
||||
constructor(platform: Platform, menu: MenuController, splash: SplashScreen, status: StatusBar) {
|
||||
public pages: Array<{ title: string; component: any }>;
|
||||
|
||||
constructor(
|
||||
platform: Platform,
|
||||
menu: MenuController,
|
||||
splash: SplashScreen,
|
||||
status: StatusBar
|
||||
) {
|
||||
this.menu = menu;
|
||||
this.platform = platform;
|
||||
this.splash = splash;
|
||||
@ -39,9 +42,9 @@ export class InsightApp {
|
||||
this.pages = [
|
||||
{ title: 'Home', component: HomePage },
|
||||
{ title: 'Blocks', component: BlocksPage },
|
||||
{ title: 'Broadcast Transaction', component: BroadcastTxPage },
|
||||
{ title: 'Verify Signed Message', component: VerifyMessagePage },
|
||||
{ title: 'Node Status', component: NodeStatusPage }
|
||||
{ title: 'Broadcast Transaction', component: BroadcastTxPage }
|
||||
// { title: 'Verify Signed Message', component: VerifyMessagePage },
|
||||
// { title: 'Node Status', component: NodeStatusPage }
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
// http://ionicframework.com/docs/v2/theming/
|
||||
|
||||
|
||||
// App Global Sass
|
||||
// --------------------------------------------------
|
||||
// Put style rules here that you want to apply globally. These
|
||||
@ -12,6 +11,10 @@ body {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
@ -19,20 +22,29 @@ body {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item-hash {
|
||||
@extend .ellipsis;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.list--summary {
|
||||
ion-label {
|
||||
color: #333;
|
||||
color: #334;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ion-item {
|
||||
color: #999;
|
||||
color: #99a;
|
||||
font-size: 1.125rem;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ion-note {
|
||||
color: #999;
|
||||
max-width: 50%;
|
||||
color: #99a;
|
||||
max-width: 80%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -42,25 +54,28 @@ body {
|
||||
.grid--table {
|
||||
margin: 10px 0 20px;
|
||||
|
||||
.col {
|
||||
padding: 1em 0.6em;
|
||||
}
|
||||
|
||||
ion-row {
|
||||
border-top: 1px solid #ccc;
|
||||
border-top: 1px solid #dde;
|
||||
|
||||
&:first-child {
|
||||
background-color: white;
|
||||
background-color: #fff;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: #f4f4f4;
|
||||
background-color: #f8f8f9;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
background-color: white;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Shared Sass variables, which can be used to adjust Ionic's
|
||||
// default Sass variables, belong in "theme/variables.scss".
|
||||
//
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<ion-navbar color="primary">
|
||||
<ion-navbar color="brand">
|
||||
<button ion-button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>{{title}}</ion-title>
|
||||
<ion-buttons end>
|
||||
<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> {{ currency.currencySymbol }}
|
||||
<ion-icon name="logo-bitcoin" *ngIf="currency.currencySymbol !== 'USD'"></ion-icon>
|
||||
<ion-icon name="logo-usd" *ngIf="currency.currencySymbol === 'USD'"></ion-icon> {{ currency.currencySymbol }}
|
||||
</button>
|
||||
<button ion-button icon-only (click)="toggleSearch()">
|
||||
<ion-icon name="search"></ion-icon>
|
||||
@ -15,4 +16,4 @@
|
||||
|
||||
<form (ngSubmit)="search($event)">
|
||||
<ion-searchbar [hidden]="!showSearch" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" name="search"></ion-searchbar>
|
||||
</form>
|
||||
</form>
|
||||
@ -2,7 +2,11 @@
|
||||
<ion-row>
|
||||
<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>
|
||||
<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-5 text-right>
|
||||
@ -12,7 +16,8 @@
|
||||
</ion-note>
|
||||
<ion-note [hidden]="!tx.blocktime && tx.firstSeenTs">
|
||||
<span translate>mined</span>
|
||||
<time>{{tx.time * 1000 | date:'MMM d, y'}}</time> <time>{{tx.time * 1000 | date:'hh:mm:ss a'}}</time>
|
||||
<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>
|
||||
@ -30,15 +35,20 @@
|
||||
<ion-item *ngFor="let vin of aggregateItems(tx.vin)">
|
||||
<div>
|
||||
<div class="ellipsis">
|
||||
<p><a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a></p>
|
||||
<p>
|
||||
<a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a>
|
||||
</p>
|
||||
</div>
|
||||
<div [hidden]="!expanded">
|
||||
<p *ngIf="vin.confirmations"><b>Confirmations</b> {{vin.confirmations}}</p>
|
||||
<p><b>scriptSig</b></p>
|
||||
<p *ngIf="vin.confirmations">
|
||||
<b>Confirmations</b> {{vin.confirmations}}</p>
|
||||
<p>
|
||||
<b>Unlocking Script</b>
|
||||
</p>
|
||||
<div *ngFor="let item of vin.items">
|
||||
<div *ngIf="item.scriptSig">
|
||||
<div *ngFor="let scriptSig of item.scriptSig.asm | split:' '">
|
||||
<div class="ellipsis">
|
||||
<div class="unlocking-script">
|
||||
<p>{{ scriptSig }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,12 +74,19 @@
|
||||
<ion-item *ngFor="let vout of tx.vout">
|
||||
<div>
|
||||
<div class="ellipsis">
|
||||
<p><a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a></p>
|
||||
<p>
|
||||
<a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a>
|
||||
</p>
|
||||
</div>
|
||||
<div [hidden]="!expanded">
|
||||
<p><b>Type</b> {{vout.scriptPubKey.type}}</p>
|
||||
<p><b>scriptPubKey</b></p>
|
||||
<div class="ellipsis">
|
||||
<p>
|
||||
<b>Script Template</b>
|
||||
<i>{{vout.scriptPubKey.type}}</i>
|
||||
</p>
|
||||
<p>
|
||||
<b>Locking Script</b>
|
||||
</p>
|
||||
<div class="locking-script">
|
||||
<p>{{vout.scriptPubKey.asm}}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -89,17 +106,26 @@
|
||||
<ion-col col-6>
|
||||
<div [hidden]="tx.isCoinBase">
|
||||
<ion-chip>
|
||||
<ion-label>Fee <span text-nowrap>{{ currency.getConvertedNumber(tx.fees) | number:'1.0-8' }} {{ currency.currencySymbol }}</span></ion-label>
|
||||
<ion-label>Fee
|
||||
<span text-nowrap>{{ currency.getConvertedNumber(tx.fees) | number:'1.0-8' }} {{ currency.currencySymbol }}</span>
|
||||
</ion-label>
|
||||
</ion-chip>
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-6 text-right>
|
||||
<ion-chip color="primary">
|
||||
<ion-label>{{ tx.confirmations | number }} Confirmation<span *ngIf="tx.confirmations !== 1">s</span></ion-label>
|
||||
<ion-chip color="danger" *ngIf="tx.confirmations === 0">
|
||||
<ion-label>Unconfirmed</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary">
|
||||
<ion-chip color="warning" *ngIf="tx.confirmations === 1">
|
||||
<ion-label>1 Confirmation</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="primary" *ngIf="tx.confirmations > 1">
|
||||
<ion-label>{{ tx.confirmations | number }} Confirmations
|
||||
</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="brand">
|
||||
<ion-label>{{ currency.getConvertedNumber(tx.valueOut) | number:'1.0-8' }} {{ currency.currencySymbol }}</ion-label>
|
||||
</ion-chip>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-grid>
|
||||
@ -3,12 +3,12 @@ transaction {
|
||||
// See http://ionicframework.com/docs/api/components/grid/Grid/#customizing-the-grid
|
||||
|
||||
ion-grid {
|
||||
background-color: #F4F4F4;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 2px;
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #f3f3f3;
|
||||
border-radius: 3px;
|
||||
|
||||
ion-row {
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid #f3f3f3;
|
||||
|
||||
&.small {
|
||||
font-size: 1.1rem;
|
||||
@ -22,19 +22,47 @@ transaction {
|
||||
}
|
||||
}
|
||||
|
||||
.item, .item p {
|
||||
ion-icon {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.item,
|
||||
.item p {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
$transaction-item-boarder-radius: 3px;
|
||||
.item:first-of-type {
|
||||
border-top-left-radius: $transaction-item-boarder-radius;
|
||||
border-top-right-radius: $transaction-item-boarder-radius;
|
||||
}
|
||||
.item:last-of-type {
|
||||
border-bottom-left-radius: $transaction-item-boarder-radius;
|
||||
border-bottom-right-radius: $transaction-item-boarder-radius;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-bottom: 5px
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
//background-color: red;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
border-radius: 3px;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
|
||||
&.chip-md-primary {
|
||||
//background-color: blue;
|
||||
}
|
||||
}
|
||||
|
||||
.note-md {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.unlocking-script,
|
||||
.locking-script {
|
||||
white-space: normal;
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,98 +7,105 @@
|
||||
<ion-spinner name="crescent"></ion-spinner>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!loading">
|
||||
<div *ngIf="!loading" class="page-content">
|
||||
<h1>Block #{{ block.height }}</h1>
|
||||
<p class="ellipsis"><b>BlockHash</b> {{ block.hash }}</p>
|
||||
<p class="item-hash">
|
||||
<b>Block Hash</b> {{ block.hash }}</p>
|
||||
|
||||
<h2>Summary</h2>
|
||||
|
||||
<ion-list *ngIf="!loading" class="list--summary">
|
||||
<ion-item>
|
||||
Number of Transactions
|
||||
<ion-note item-end>
|
||||
{{ block.tx.length }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Height
|
||||
<ion-note item-end>
|
||||
{{ block.height }} <span [hidden]="!block.isMainChain">(Mainchain)</span>
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Block Reward
|
||||
<ion-note item-end>
|
||||
{{ currency.getConvertedNumber(block.reward) | number:'1.0-8' }} {{ currency.currencySymbol }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Timestamp
|
||||
<ion-note item-end>
|
||||
{{ block.time * 1000 | date:'medium' }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Mined by
|
||||
<ion-note item-end *ngIf="block.poolInfo">
|
||||
<a href="{{ block.poolInfo.url }}">{{ block.poolInfo.poolName }}</a>
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Merkle Root
|
||||
<ion-note item-end>
|
||||
{{ block.merkleroot }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Previous Block
|
||||
<ion-note item-end>
|
||||
<a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a>
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Difficulty
|
||||
<ion-note item-end>
|
||||
{{ block.difficulty }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Bits
|
||||
<ion-note item-end>
|
||||
{{ block.bits }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Size (bytes)
|
||||
<ion-note item-end>
|
||||
{{ block.size }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Version
|
||||
<ion-note item-end>
|
||||
{{ block.version }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Nonce
|
||||
<ion-note item-end>
|
||||
{{ block.nonce }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Next Block
|
||||
<ion-note item-end>
|
||||
<a (click)="goToNextBlock()">{{ block.height + 1 }}</a>
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col col-12 col-md class="allow-truncated-text">
|
||||
<ion-item>
|
||||
Number of Transactions
|
||||
<ion-note item-end>
|
||||
{{ block.tx.length }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Height
|
||||
<ion-note item-end>
|
||||
{{ block.height }}
|
||||
<span [hidden]="!block.isMainChain">(Mainchain)</span>
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Block Reward
|
||||
<ion-note item-end>
|
||||
{{ currency.getConvertedNumber(block.reward) | number:'1.0-8' }} {{ currency.currencySymbol }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Timestamp
|
||||
<ion-note item-end>
|
||||
{{ block.time * 1000 | date:'medium' }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Mined by
|
||||
<ion-note item-end *ngIf="block.poolInfo">
|
||||
<a href="{{ block.poolInfo.url }}">{{ block.poolInfo.poolName }}</a>
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Merkle Root
|
||||
<ion-note item-end>
|
||||
{{ block.merkleroot }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Previous Block
|
||||
<ion-note item-end>
|
||||
<a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a>
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-md class="allow-truncated-text">
|
||||
<ion-item>
|
||||
Difficulty
|
||||
<ion-note item-end>
|
||||
{{ block.difficulty }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Bits
|
||||
<ion-note item-end>
|
||||
{{ block.bits }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Size (bytes)
|
||||
<ion-note item-end>
|
||||
{{ block.size }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Version
|
||||
<ion-note item-end>
|
||||
{{ block.version }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Nonce
|
||||
<ion-note item-end>
|
||||
{{ block.nonce }}
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Next Block
|
||||
<ion-note item-end>
|
||||
<a (click)="goToNextBlock()">{{ block.height + 1 }}</a>
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-list>
|
||||
|
||||
<div *ngIf="!loading">
|
||||
<h2>Transactions</h2>
|
||||
|
||||
<transaction-list [queryType]="'block'" [queryValue]="block.hash"></transaction-list>
|
||||
</div>
|
||||
<h2>Transactions</h2>
|
||||
<transaction-list [queryType]="'block'" [queryValue]="block.hash"></transaction-list>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
@ -1,3 +1,6 @@
|
||||
page-block-detail {
|
||||
|
||||
// https://css-tricks.com/flexbox-truncated-text/
|
||||
.allow-truncated-text {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
<ion-spinner name="crescent"></ion-spinner>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!loading">
|
||||
<div *ngIf="!loading" class="page-content">
|
||||
<h1>Blocks</h1>
|
||||
<latest-blocks [numBlocks]="100" [showTimeAs]="'timestamp'" [showAllBlocksButton]="false"></latest-blocks>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
@ -1,5 +1,5 @@
|
||||
<ion-header>
|
||||
<ion-navbar color="primary">
|
||||
<ion-navbar color="brand">
|
||||
<button ion-button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
@ -8,24 +8,26 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<form [formGroup]="txForm">
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<p>This form can be used to broadcast a raw transaction in hex format over the Bitcoin network.</p>
|
||||
</ion-item>
|
||||
<div class="page-content">
|
||||
<form [formGroup]="txForm">
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<p>This form can be used to broadcast a raw transaction in hex format over the Bitcoin network.</p>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label floating>Raw transaction data</ion-label>
|
||||
<ion-input type="text" [(ngModel)]="transaction" formControlName="rawData"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label floating>Raw transaction data</ion-label>
|
||||
<ion-input type="text" [(ngModel)]="transaction" formControlName="rawData"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item *ngIf="!txForm.controls.rawData.valid">
|
||||
<p>Raw transaction data must be a valid hexadecimal string.</p>
|
||||
</ion-item>
|
||||
<ion-item *ngIf="!txForm.controls.rawData.valid">
|
||||
<p>Raw transaction data must be a valid hexadecimal string.</p>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<button ion-button outline (click)="send()" [disabled]="!txForm.touched || !txForm.valid">Send transaction</button>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</form>
|
||||
</ion-content>
|
||||
<ion-item>
|
||||
<button ion-button outline (click)="send()" [disabled]="!txForm.touched || !txForm.valid">Send transaction</button>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</form>
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -5,37 +5,43 @@
|
||||
Ionic pages and navigation.
|
||||
-->
|
||||
<ion-header>
|
||||
<head-nav [title]="'Home'"></head-nav>
|
||||
<head-nav [title]="'Insight'"></head-nav>
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content padding>
|
||||
<div class="page-content">
|
||||
|
||||
<div>
|
||||
<h1>Latest Blocks</h1>
|
||||
<latest-blocks [numBlocks]="6" [showTimeAs]="'age'" [showAllBlocksButton]="true"></latest-blocks>
|
||||
</div>
|
||||
<div class="latest-blocks">
|
||||
<h1>Latest Blocks</h1>
|
||||
<latest-blocks [numBlocks]="13" [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/issues" target="_blank">github issue tracker</a>.</p>
|
||||
<div id="powered" class="row">
|
||||
<div class="powered-text">
|
||||
<small class="text-muted">Powered by</small>
|
||||
<!--
|
||||
<div>
|
||||
<h1>Latest Transactions</h1>
|
||||
<latest-transactions [refreshSeconds]="8"></latest-transactions>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="about">
|
||||
<p>
|
||||
<strong>Insight</strong> is an open-source Bitcoin blockchain explorer developed by
|
||||
<a href="https://bitpay.com/" target="_blank">BitPay</a>. Insight also provides a complete REST and websocket API, giving developers access to more advanced blockchain
|
||||
queries than those provided by many Bitcoin node implementations.</p>
|
||||
<p>
|
||||
The Insight project is available
|
||||
<a href="https://github.com/bitpay/insight" target="_blank">on GitHub</a>.</p>
|
||||
<div id="powered" class="row">
|
||||
<div class="powered-text">
|
||||
<small class="text-muted">Powered by</small>
|
||||
</div>
|
||||
<a href="http://bitcore.io" target="_blank" class="bitcore" title="Bitcore"></a>
|
||||
<a href="https://angular.io/" target="_blank" class="angular" title="Angular"></a>
|
||||
<a href="https://code.google.com/p/leveldb/" target="_blank" class="leveldb" title="LevelDB"></a>
|
||||
<a href="http://nodejs.org" target="_blank" class="nodejs" title="NodeJs"></a>
|
||||
</div>
|
||||
<a href="http://bitcore.io" target="_blank" class="bitcore" title="Bitcore"></a>
|
||||
<a href="http://angularjs.org" target="_blank" class="angularjs" title="AngularJS"></a>
|
||||
<a href="https://code.google.com/p/leveldb/" target="_blank" class="leveldb" title="LevelDB"></a>
|
||||
<a href="http://nodejs.org" target="_blank" class="nodejs" title="NodeJs"></a>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
@ -1,6 +1,17 @@
|
||||
page-home {
|
||||
@media screen and (min-width: 768px) {
|
||||
.latest-blocks {
|
||||
width: 68%;
|
||||
display: inline-block;
|
||||
}
|
||||
.about {
|
||||
width: 30%;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.about {
|
||||
background-color: #F4F4F4;
|
||||
background-color: #f4f4f4;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
padding: 14px;
|
||||
@ -36,7 +47,7 @@ page-home {
|
||||
background-size: 80px;
|
||||
width: 30%;
|
||||
}
|
||||
#powered a.angularjs {
|
||||
#powered a.angular {
|
||||
background-image: url('../../assets/img/angularjs.png');
|
||||
background-size: 50px;
|
||||
width: 20%;
|
||||
@ -46,5 +57,4 @@ page-home {
|
||||
background-size: 50px;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<ion-header>
|
||||
<ion-navbar color="primary">
|
||||
<ion-navbar color="brand">
|
||||
<button ion-button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
@ -8,5 +8,7 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<h1>Node Status</h1>
|
||||
</ion-content>
|
||||
<div class="page-content">
|
||||
<h1>Node Status</h1>
|
||||
</div>
|
||||
</ion-content>
|
||||
15
app/src/pages/pages.scss
Normal file
15
app/src/pages/pages.scss
Normal file
@ -0,0 +1,15 @@
|
||||
.page-content {
|
||||
max-width: 1280px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
.page-content {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
ion-navbar.toolbar-md {
|
||||
padding: 4px calc((100vw - 1244px) / 2) 4px calc((100vw - 1332px) / 2);
|
||||
}
|
||||
}
|
||||
@ -7,9 +7,10 @@
|
||||
<ion-spinner name="crescent"></ion-spinner>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!loading">
|
||||
<div *ngIf="!loading" class="page-content">
|
||||
<h1>Transaction</h1>
|
||||
<p class="ellipsis"><b>Transaction</b> {{ tx.txid }}</p>
|
||||
<p class="item-hash">
|
||||
<b>Transaction Hash</b> {{ tx.txid }}</p>
|
||||
|
||||
<h2>Summary</h2>
|
||||
|
||||
@ -45,4 +46,4 @@
|
||||
<transaction [tx]="tx"></transaction>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
@ -1,5 +1,5 @@
|
||||
<ion-header>
|
||||
<ion-navbar color="primary">
|
||||
<ion-navbar color="brand">
|
||||
<button ion-button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
@ -8,31 +8,33 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<p>Bitcoin comes with a way of signing arbitrary messages.</p>
|
||||
<div class="page-content">
|
||||
|
||||
<p>This form can be used to verify that a message comes from a specific Bitcoin address.</p>
|
||||
</ion-item>
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<p>Bitcoin comes with a way of signing arbitrary messages.</p>
|
||||
|
||||
<ion-item>
|
||||
<ion-label floating>Address</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
<p>This form can be used to verify that a message comes from a specific Bitcoin address.</p>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label floating>Signature</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label floating>Address</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label floating>Message</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label floating>Signature</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<button ion-button outline>Verify</button>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-item>
|
||||
<ion-label floating>Message</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
</ion-content>
|
||||
<ion-item>
|
||||
<button ion-button outline>Verify</button>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -1,9 +1,8 @@
|
||||
// Ionic Variables and Theming. For more info, please see:
|
||||
// http://ionicframework.com/docs/v2/theming/
|
||||
$font-path: "../assets/fonts";
|
||||
|
||||
@import "ionic.globals";
|
||||
$font-path: '../assets/fonts';
|
||||
|
||||
@import 'ionic.globals';
|
||||
|
||||
// Shared Variables
|
||||
// --------------------------------------------------
|
||||
@ -12,9 +11,6 @@ $font-path: "../assets/fonts";
|
||||
// To view all the possible Ionic variables, see:
|
||||
// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
|
||||
|
||||
|
||||
|
||||
|
||||
// Named Color Variables
|
||||
// --------------------------------------------------
|
||||
// Named colors makes it easy to reuse colors on various components.
|
||||
@ -24,35 +20,27 @@ $font-path: "../assets/fonts";
|
||||
// The "primary" color is the only required color in the map.
|
||||
|
||||
$colors: (
|
||||
primary: #8dc429,
|
||||
secondary: #32db64,
|
||||
danger: #f53d3d,
|
||||
light: #f4f4f4,
|
||||
dark: #373D42
|
||||
brand: #8dc429,
|
||||
primary: #2fa4d7,
|
||||
secondary: #8dc429,
|
||||
danger: #f53d3d,
|
||||
warning: #ffa400,
|
||||
light: #f4f4f4,
|
||||
dark: #373d42
|
||||
);
|
||||
|
||||
|
||||
// App iOS Variables
|
||||
// --------------------------------------------------
|
||||
// iOS only Sass variables can go here
|
||||
|
||||
|
||||
|
||||
|
||||
// App Material Design Variables
|
||||
// --------------------------------------------------
|
||||
// Material Design only Sass variables can go here
|
||||
|
||||
|
||||
|
||||
|
||||
// App Windows Variables
|
||||
// --------------------------------------------------
|
||||
// Windows only Sass variables can go here
|
||||
|
||||
|
||||
|
||||
|
||||
// App Theme
|
||||
// --------------------------------------------------
|
||||
// Ionic apps can have different themes applied, which can
|
||||
@ -60,19 +48,25 @@ $colors: (
|
||||
// so that the above variables are used and Ionic's
|
||||
// default are overridden.
|
||||
|
||||
@import "ionic.theme.default";
|
||||
@import 'ionic.theme.default';
|
||||
|
||||
$chip-ios-background-color: rgba(0, 0, 0, 0.06);
|
||||
$chip-md-background-color: rgba(0, 0, 0, 0.06);
|
||||
$chip-wp-background-color: rgba(0, 0, 0, 0.06);
|
||||
|
||||
// Ionicons
|
||||
// --------------------------------------------------
|
||||
// The premium icon font for Ionic. For more info, please see:
|
||||
// http://ionicframework.com/docs/v2/ionicons/
|
||||
|
||||
@import "ionic.ionicons";
|
||||
|
||||
@import 'ionic.ionicons';
|
||||
|
||||
// Fonts
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "roboto";
|
||||
@import "noto-sans";
|
||||
@import 'roboto';
|
||||
@import 'noto-sans';
|
||||
|
||||
// Other globals
|
||||
|
||||
$desktop-min-width: 1288px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user