Skip to content

Commit 3d50203

Browse files
bitjsonbitjson
committed
feat(insight): block detail view
1 parent de5cbd1 commit 3d50203

20 files changed

+412
-134
lines changed

‎packages/bitcore-node/src/types/Block.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export type IBlock = {
22
chain: string;
3+
confirmations?: number;
34
network: string;
45
height: number;
56
hash: string;

‎packages/insight/package-lock.json

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/insight/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
"@ionic-native/splash-screen": "5.0.0-beta.15",
5353
"@ionic-native/status-bar": "5.0.0-beta.15",
5454
"@ionic/angular": "^4.0.0-beta.12",
55+
"angular-pipes": "^9.0.0",
5556
"backoff-rxjs": "0.0.10",
5657
"core-js": "^2.5.3",
5758
"fast-deep-equal": "^2.0.1",

‎packages/insight/src/app/app-routing.module.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
const routes: Routes = [
1010
{
1111
path: '',
12-
redirectTo: `${environment.initialChain.code}/home`,
12+
redirectTo: `${environment.initialChain.code}`,
1313
pathMatch: 'full'
1414
},
1515
{
@@ -18,11 +18,6 @@ const routes: Routes = [
1818
children: [
1919
{
2020
path: '',
21-
redirectTo: `home`,
22-
pathMatch: 'full'
23-
},
24-
{
25-
path: 'home',
2621
loadChildren: './home/home.module#HomePageModule'
2722
},
2823
{

‎packages/insight/src/app/app.component.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@
99
<ion-menu-toggle auto-hide="false">
1010
<ion-item
1111
[routerDirection]="'root'"
12-
[routerLink]="['/' + (config.currentChain$ | async).code + '/home']"
12+
[routerLink]="['/' + (config.currentChain$ | async).code]"
13+
[routerLinkActiveOptions]="{exact: true}"
1314
routerLinkActive="active"
1415
>
15-
<ion-label>Home</ion-label>
16+
<ion-label>Chain</ion-label>
1617
</ion-item>
1718
<ion-item
1819
[routerDirection]="'root'"

‎packages/insight/src/app/app.component.scss

+5
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,8 @@
77
border-left: 3px solid rgba(119, 209, 255, 0.79);
88
}
99
}
10+
11+
ion-header.header-md:after {
12+
background: none;
13+
border-top: 1px solid lighten(#3d3d4d, 50%);
14+
}

‎packages/insight/src/app/block/block.page.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ion-header>
1+
<ion-header no-border>
22
<ion-toolbar>
33
<ion-buttons slot="start">
44
<ion-menu-button></ion-menu-button>

‎packages/insight/src/app/blocks/blocks.page.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ion-header>
1+
<ion-header no-border>
22
<ion-toolbar>
33
<ion-buttons slot="start">
44
<ion-menu-button></ion-menu-button>

‎packages/insight/src/app/home/home.page.html

+72-66
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,76 @@
1-
<ion-header>
2-
<ion-toolbar>
3-
<ion-buttons slot="start">
4-
<ion-menu-button></ion-menu-button>
5-
</ion-buttons>
6-
<ion-title>
7-
Bitcoin Cash
8-
</ion-title>
9-
</ion-toolbar>
1+
<ion-header no-border>
2+
<ion-toolbar>
3+
<ion-buttons slot="start">
4+
<ion-menu-button></ion-menu-button>
5+
</ion-buttons>
6+
<ion-title>Bitcoin Cash</ion-title>
7+
</ion-toolbar>
108
</ion-header>
119

1210
<ion-content padding>
13-
<ion-grid>
14-
<ion-row>
15-
<ion-col size="12" size-md>
16-
<div class="placeholder top-element">
17-
signs of life
18-
</div>
19-
</ion-col>
20-
<ion-col size="12" size-md>
21-
<div class="placeholder top-element">
22-
last 6 blocks
23-
</div>
24-
</ion-col>
25-
</ion-row>
26-
<ion-row>
27-
<ion-col size="12" size-md>
28-
<div class="placeholder top-element">
29-
transaction activity measured in USD
30-
</div>
31-
</ion-col>
32-
</ion-row>
33-
<ion-row>
34-
<ion-col size="12" size-md>
35-
<div class="placeholder heatmap">
36-
2018 day-by-day heatmap
37-
</div>
38-
</ion-col>
39-
</ion-row>
40-
<ion-row>
41-
<ion-col size="12" size-md>
42-
<div class="placeholder heatmap">
43-
2017 day-by-day heatmap
44-
</div>
45-
</ion-col>
46-
</ion-row>
47-
<ion-row>
48-
<ion-col size="12" size-md>
49-
<div class="placeholder heatmap">
50-
2016 day-by-day heatmap
51-
</div>
52-
</ion-col>
53-
</ion-row>
54-
<ion-row>
55-
<ion-col size="12" size-md>
56-
<div class="placeholder heatmap">
57-
2015 day-by-day heatmap
58-
</div>
59-
</ion-col>
60-
</ion-row>
61-
<ion-row>
62-
<ion-col size="12" size-md>
63-
<div class="placeholder heatmap">
64-
load earlier button
65-
</div>
66-
</ion-col>
67-
</ion-row>
68-
</ion-grid>
11+
<ion-grid>
12+
<ion-row>
13+
<ion-col
14+
size="12"
15+
size-md
16+
>
17+
<div class="placeholder top-element">signs of life</div>
18+
</ion-col>
19+
<ion-col
20+
size="12"
21+
size-md
22+
>
23+
<div class="placeholder top-element">last 6 blocks</div>
24+
</ion-col>
25+
</ion-row>
26+
<ion-row>
27+
<ion-col
28+
size="12"
29+
size-md
30+
>
31+
<div class="placeholder top-element">transaction activity measured in USD</div>
32+
</ion-col>
33+
</ion-row>
34+
<ion-row>
35+
<ion-col
36+
size="12"
37+
size-md
38+
>
39+
<div class="placeholder heatmap">2018 day-by-day heatmap</div>
40+
</ion-col>
41+
</ion-row>
42+
<ion-row>
43+
<ion-col
44+
size="12"
45+
size-md
46+
>
47+
<div class="placeholder heatmap">2017 day-by-day heatmap</div>
48+
</ion-col>
49+
</ion-row>
50+
<ion-row>
51+
<ion-col
52+
size="12"
53+
size-md
54+
>
55+
<div class="placeholder heatmap">2016 day-by-day heatmap</div>
56+
</ion-col>
57+
</ion-row>
58+
<ion-row>
59+
<ion-col
60+
size="12"
61+
size-md
62+
>
63+
<div class="placeholder heatmap">2015 day-by-day heatmap</div>
64+
</ion-col>
65+
</ion-row>
66+
<ion-row>
67+
<ion-col
68+
size="12"
69+
size-md
70+
>
71+
<div class="placeholder heatmap">load earlier button</div>
72+
</ion-col>
73+
</ion-row>
74+
</ion-grid>
6975

70-
</ion-content>
76+
</ion-content>

‎packages/insight/src/app/not-found/not-found.page.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ion-header>
1+
<ion-header no-border>
22
<ion-toolbar>
33
<ion-buttons slot="start">
44
<ion-menu-button></ion-menu-button>

‎packages/insight/src/app/services/network/network.service.ts

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export class NetworkService {
1313
const connect = fromEvent(window, 'online');
1414
const disconnect = fromEvent(window, 'offline');
1515

16+
// TODO: also check for connectivity on window focus (when macOS sleeps with the app open, this sometimes gets stuck in an offline state, even when navigator.onLine is `true`)
17+
1618
connect.subscribe(() => this._isOnline.next(true));
1719
disconnect.subscribe(() => this._isOnline.next(false));
1820
}

‎packages/insight/src/app/shared/block/block.component.html

+62-39
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,82 @@
1-
<!-- <small>block:
2-
{{block | json}}</small> -->
3-
4-
<div class="card">
1+
<div [ngClass]="{'card': true, 'detail-view': !summary}">
52
<div class="section header">
63
<div class="identifiers">
7-
<div
8-
class="height"
9-
title="The height of this block, i.e. its position in the chain."
10-
>
4+
<div class="height" title="The height of this block, i.e. its position in the chain.">
115
{{block.height}}
126
</div>
13-
<span
14-
*ngIf="!block.nextBlockHash"
15-
class="tip-tag"
16-
title="This is the latest block on the network."
17-
>
7+
<span *ngIf="!block.nextBlockHash" class="tip-tag" title="This is the latest block on the network.">
188
Tip
199
</span>
2010
</div>
21-
<app-date-time
22-
[value]="block.timeNormalized"
23-
class="time"
24-
>
11+
<app-date-time [value]="block.timeNormalized" class="time">
2512
</app-date-time>
2613
</div>
27-
<div class="section body">
14+
<app-card-item class="section">
2815
<div class="property">
29-
<div class="key">Block Hash</div>
30-
<div class="value">{{block.hash}}</div>
16+
<span class="key">Block Hash</span>
17+
<span class="value">{{block.hash}}</span>
3118
</div>
3219
<div class="property">
3320
<span class="key">Transaction Count</span>
34-
<span
35-
class="value link"
36-
(click)="listTransactionsInBlock(block)"
37-
>
21+
<span class="value link" (click)="listTransactionsInBlock(block)">
3822
{{block.transactionCount}}
3923
</span>
4024
</div>
4125
<div class="property">
42-
<span class="key">Reward</span>
26+
<span class="key">Block Revenue</span>
4327
<span class="value">
44-
<app-currency-value
45-
class="reward"
46-
amount="{{block.reward}}"
47-
code="{{block.chain}}_satoshis"
48-
displayAs="{{displayValueCode}}"
49-
></app-currency-value>
28+
<app-currency-value class="reward" amount="{{block.reward}}" code="{{block.chain}}_satoshis" displayAs="{{displayValueCode}}"></app-currency-value>
5029
</span>
5130
</div>
52-
</div>
53-
<div
54-
class="section details"
55-
*ngIf="!summary"
56-
>
57-
[show details]
58-
</div>
59-
</div>
31+
<ng-container *ngIf="!summary">
32+
<div class="property">
33+
<span class="key">Mining Pool Claim</span>
34+
<span class="value link" (click)="listBlocksBySameMiner(block)">
35+
Unknown
36+
</span>
37+
</div>
38+
<div class="property">
39+
<span class="key">Block Size</span>
40+
<span class="value">{{block.size | bytes}}</span>
41+
</div>
42+
<div class="property">
43+
<span class="key">Confirmations</span>
44+
<span class="value">{{block.confirmations}}</span>
45+
</div>
46+
</ng-container>
47+
</app-card-item>
48+
<ng-container *ngIf="!summary">
49+
<app-card-item class="section" header="Block Header" type="expand-collapse" [isOpen]='true'>
50+
<table>
51+
<tr>
52+
<th>Version</th>
53+
<td>{{block.version}}</td>
54+
</tr>
55+
<tr>
56+
<th>Previous Block Hash</th>
57+
<td>{{block.previousBlockHash}}</td>
58+
</tr>
59+
<tr>
60+
<th>Merkle Root</th>
61+
<td>{{block.merkleRoot}}</td>
62+
</tr>
63+
<tr>
64+
<th>Block Time</th>
65+
<td>{{block.time | date:'medium'}}</td>
66+
</tr>
67+
<tr>
68+
<th>Bits</th>
69+
<td>{{block.bits}}</td>
70+
</tr>
71+
<tr>
72+
<th>Nonce</th>
73+
<td>{{block.nonce | number}}</td>
74+
</tr>
75+
</table>
76+
</app-card-item>
77+
<app-card-item class="section" header="Previous Block" headerValue="{{block.height - 1}}" type="forward"
78+
[routerLink]="['/' + block.chain + '/block/' + block.previousBlockHash]"></app-card-item>
79+
<app-card-item *ngIf="block.nextBlockHash" class="section" header="Next Block" headerValue="{{block.height + 1}}"
80+
type="forward" [routerLink]="['/' + block.chain + '/block/' + block.nextBlockHash]"></app-card-item>
81+
</ng-container>
82+
</div>

0 commit comments

Comments
 (0)