feat(insight): block detail view

nitsujlangston · Oct 24, 2018 · 3d50203 · 3d50203
1 parent de5cbd1
commit 3d50203
Show file tree

Hide file tree

Showing 20 changed files with 412 additions and 134 deletions.
diff --git a/packages/bitcore-node/src/types/Block.ts b/packages/bitcore-node/src/types/Block.ts
@@ -1,5 +1,6 @@
 export type IBlock = {
   chain: string;
+  confirmations?: number;
   network: string;
   height: number;
   hash: string;

diff --git a/packages/insight/package-lock.json b/packages/insight/package-lock.json
diff --git a/packages/insight/package.json b/packages/insight/package.json
@@ -52,6 +52,7 @@
     "@ionic-native/splash-screen": "5.0.0-beta.15",
     "@ionic-native/status-bar": "5.0.0-beta.15",
     "@ionic/angular": "^4.0.0-beta.12",
+    "angular-pipes": "^9.0.0",
     "backoff-rxjs": "0.0.10",
     "core-js": "^2.5.3",
     "fast-deep-equal": "^2.0.1",

diff --git a/packages/insight/src/app/app-routing.module.ts b/packages/insight/src/app/app-routing.module.ts
@@ -9,7 +9,7 @@ import {
 const routes: Routes = [
   {
     path: '',
-    redirectTo: `${environment.initialChain.code}/home`,
+    redirectTo: `${environment.initialChain.code}`,
     pathMatch: 'full'
   },
   {
@@ -18,11 +18,6 @@ const routes: Routes = [
     children: [
       {
         path: '',
-        redirectTo: `home`,
-        pathMatch: 'full'
-      },
-      {
-        path: 'home',
         loadChildren: './home/home.module#HomePageModule'
       },
       {

diff --git a/packages/insight/src/app/app.component.html b/packages/insight/src/app/app.component.html
@@ -9,10 +9,11 @@
                     <ion-menu-toggle auto-hide="false">
                         <ion-item
                             [routerDirection]="'root'"
-                            [routerLink]="['/' + (config.currentChain$ | async).code + '/home']"
+                            [routerLink]="['/' + (config.currentChain$ | async).code]"
+                            [routerLinkActiveOptions]="{exact: true}"
                             routerLinkActive="active"
                         >
-                            <ion-label>Home</ion-label>
+                            <ion-label>Chain</ion-label>
                         </ion-item>
                         <ion-item
                             [routerDirection]="'root'"

diff --git a/packages/insight/src/app/app.component.scss b/packages/insight/src/app/app.component.scss
@@ -7,3 +7,8 @@
     border-left: 3px solid rgba(119, 209, 255, 0.79);
   }
 }
+
+ion-header.header-md:after {
+  background: none;
+  border-top: 1px solid lighten(#3d3d4d, 50%);
+}
diff --git a/packages/insight/src/app/block/block.page.html b/packages/insight/src/app/block/block.page.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header no-border>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-menu-button></ion-menu-button>

diff --git a/packages/insight/src/app/blocks/blocks.page.html b/packages/insight/src/app/blocks/blocks.page.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header no-border>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-menu-button></ion-menu-button>

diff --git a/packages/insight/src/app/home/home.page.html b/packages/insight/src/app/home/home.page.html
@@ -1,70 +1,76 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-menu-button></ion-menu-button>
-    </ion-buttons>
-    <ion-title>
-      Bitcoin Cash
-    </ion-title>
-  </ion-toolbar>
+<ion-header no-border>
+    <ion-toolbar>
+        <ion-buttons slot="start">
+            <ion-menu-button></ion-menu-button>
+        </ion-buttons>
+        <ion-title>Bitcoin Cash</ion-title>
+    </ion-toolbar>
 </ion-header>
 
 <ion-content padding>
-  <ion-grid>
-    <ion-row>
-      <ion-col size="12" size-md>
-        <div class="placeholder top-element">
-          signs of life
-        </div>
-      </ion-col>
-      <ion-col size="12" size-md>
-        <div class="placeholder top-element">
-          last 6 blocks
-        </div>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="12" size-md>
-        <div class="placeholder top-element">
-          transaction activity measured in USD
-        </div>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="12" size-md>
-        <div class="placeholder heatmap">
-          2018 day-by-day heatmap
-        </div>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="12" size-md>
-        <div class="placeholder heatmap">
-          2017 day-by-day heatmap
-        </div>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="12" size-md>
-        <div class="placeholder heatmap">
-          2016 day-by-day heatmap
-        </div>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="12" size-md>
-        <div class="placeholder heatmap">
-          2015 day-by-day heatmap
-        </div>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="12" size-md>
-        <div class="placeholder heatmap">
-          load earlier button
-        </div>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+    <ion-grid>
+        <ion-row>
+            <ion-col
+                size="12"
+                size-md
+            >
+                <div class="placeholder top-element">signs of life</div>
+            </ion-col>
+            <ion-col
+                size="12"
+                size-md
+            >
+                <div class="placeholder top-element">last 6 blocks</div>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col
+                size="12"
+                size-md
+            >
+                <div class="placeholder top-element">transaction activity measured in USD</div>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col
+                size="12"
+                size-md
+            >
+                <div class="placeholder heatmap">2018 day-by-day heatmap</div>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col
+                size="12"
+                size-md
+            >
+                <div class="placeholder heatmap">2017 day-by-day heatmap</div>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col
+                size="12"
+                size-md
+            >
+                <div class="placeholder heatmap">2016 day-by-day heatmap</div>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col
+                size="12"
+                size-md
+            >
+                <div class="placeholder heatmap">2015 day-by-day heatmap</div>
+            </ion-col>
+        </ion-row>
+        <ion-row>
+            <ion-col
+                size="12"
+                size-md
+            >
+                <div class="placeholder heatmap">load earlier button</div>
+            </ion-col>
+        </ion-row>
+    </ion-grid>
 
-</ion-content>
+</ion-content>
diff --git a/packages/insight/src/app/not-found/not-found.page.html b/packages/insight/src/app/not-found/not-found.page.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header no-border>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-menu-button></ion-menu-button>

diff --git a/packages/insight/src/app/services/network/network.service.ts b/packages/insight/src/app/services/network/network.service.ts
@@ -13,6 +13,8 @@ export class NetworkService {
     const connect = fromEvent(window, 'online');
     const disconnect = fromEvent(window, 'offline');
 
+    // 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`)
+
     connect.subscribe(() => this._isOnline.next(true));
     disconnect.subscribe(() => this._isOnline.next(false));
   }

diff --git a/packages/insight/src/app/shared/block/block.component.html b/packages/insight/src/app/shared/block/block.component.html
@@ -1,59 +1,82 @@
-<!-- <small>block:
-  {{block | json}}</small> -->
-
-<div class="card">
+<div [ngClass]="{'card': true, 'detail-view': !summary}">
     <div class="section header">
         <div class="identifiers">
-            <div
-                class="height"
-                title="The height of this block, i.e. its position in the chain."
-            >
+            <div class="height" title="The height of this block, i.e. its position in the chain.">
                 {{block.height}}
             </div>
-            <span
-                *ngIf="!block.nextBlockHash"
-                class="tip-tag"
-                title="This is the latest block on the network."
-            >
+            <span *ngIf="!block.nextBlockHash" class="tip-tag" title="This is the latest block on the network.">
                 Tip
             </span>
         </div>
-        <app-date-time
-            [value]="block.timeNormalized"
-            class="time"
-        >
+        <app-date-time [value]="block.timeNormalized" class="time">
         </app-date-time>
     </div>
-    <div class="section body">
+    <app-card-item class="section">
         <div class="property">
-            <div class="key">Block Hash</div>
-            <div class="value">{{block.hash}}</div>
+            <span class="key">Block Hash</span>
+            <span class="value">{{block.hash}}</span>
         </div>
         <div class="property">
             <span class="key">Transaction Count</span>
-            <span
-                class="value link"
-                (click)="listTransactionsInBlock(block)"
-            >
+            <span class="value link" (click)="listTransactionsInBlock(block)">
                 {{block.transactionCount}}
             </span>
         </div>
         <div class="property">
-            <span class="key">Reward</span>
+            <span class="key">Block Revenue</span>
             <span class="value">
-                <app-currency-value
-                    class="reward"
-                    amount="{{block.reward}}"
-                    code="{{block.chain}}_satoshis"
-                    displayAs="{{displayValueCode}}"
-                ></app-currency-value>
+                <app-currency-value class="reward" amount="{{block.reward}}" code="{{block.chain}}_satoshis" displayAs="{{displayValueCode}}"></app-currency-value>
             </span>
         </div>
-    </div>
-    <div
-        class="section details"
-        *ngIf="!summary"
-    >
-        [show details]
-    </div>
-</div>
+        <ng-container *ngIf="!summary">
+            <div class="property">
+                <span class="key">Mining Pool Claim</span>
+                <span class="value link" (click)="listBlocksBySameMiner(block)">
+                    Unknown
+                </span>
+            </div>
+            <div class="property">
+                <span class="key">Block Size</span>
+                <span class="value">{{block.size | bytes}}</span>
+            </div>
+            <div class="property">
+                <span class="key">Confirmations</span>
+                <span class="value">{{block.confirmations}}</span>
+            </div>
+        </ng-container>
+    </app-card-item>
+    <ng-container *ngIf="!summary">
+        <app-card-item class="section" header="Block Header" type="expand-collapse" [isOpen]='true'>
+            <table>
+                <tr>
+                    <th>Version</th>
+                    <td>{{block.version}}</td>
+                </tr>
+                <tr>
+                    <th>Previous Block Hash</th>
+                    <td>{{block.previousBlockHash}}</td>
+                </tr>
+                <tr>
+                    <th>Merkle Root</th>
+                    <td>{{block.merkleRoot}}</td>
+                </tr>
+                <tr>
+                    <th>Block Time</th>
+                    <td>{{block.time | date:'medium'}}</td>
+                </tr>
+                <tr>
+                    <th>Bits</th>
+                    <td>{{block.bits}}</td>
+                </tr>
+                <tr>
+                    <th>Nonce</th>
+                    <td>{{block.nonce | number}}</td>
+                </tr>
+            </table>
+        </app-card-item>
+        <app-card-item class="section" header="Previous Block" headerValue="{{block.height - 1}}" type="forward"
+            [routerLink]="['/' + block.chain + '/block/' + block.previousBlockHash]"></app-card-item>
+        <app-card-item *ngIf="block.nextBlockHash" class="section" header="Next Block" headerValue="{{block.height + 1}}"
+            type="forward" [routerLink]="['/' + block.chain + '/block/' + block.nextBlockHash]"></app-card-item>
+    </ng-container>
+</div>