feat(insight): begin building out blocks view, related components

packages/bitcore-node/src/models/block.ts

@@ -5,25 +5,9 @@ import { LoggifyClass } from '../decorators/Loggify';
 import { Bitcoin } from '../types/namespaces/Bitcoin';
 import { BaseModel, MongoBound } from './base';
 import logger from '../logger';
+import { IBlock } from '../types/Block';
 
-export type IBlock = {
-  chain: string;
-  network: string;
-  height: number;
-  hash: string;
-  version: number;
-  merkleRoot: string;
-  time: Date;
-  timeNormalized: Date;
-  nonce: number;
-  previousBlockHash: string;
-  nextBlockHash: string;
-  transactionCount: number;
-  size: number;
-  bits: number;
-  reward: number;
-  processed: boolean;
-};
+export { IBlock };
 
 @LoggifyClass
 export class Block extends BaseModel<IBlock> {

packages/bitcore-node/src/services/storage.ts

@@ -8,14 +8,10 @@ import { ObjectID } from 'bson';
 import { MongoClient, Db, Cursor } from 'mongodb';
 import { MongoBound } from '../models/base';
 import '../models';
+import { StreamingFindOptions } from '../types/Query';
+
+export { StreamingFindOptions };
 
-export type StreamingFindOptions<T> = Partial<{
-  paging: keyof T;
-  since: T[keyof T];
-  sort: any;
-  direction: 1 | -1;
-  limit: number;
-}>;
 @LoggifyClass
 export class StorageService {
   client?: MongoClient;
@@ -88,8 +84,8 @@ export class StorageService {
             typecastedValue = new Date(oldValue) as any;
             break;
         }
-      // TODO: Micah check this!
-      } else if (modelKey == "_id") {
+        // TODO: Micah check this!
+      } else if (modelKey == '_id') {
         typecastedValue = new ObjectID(oldValue) as any;
       }
     }
@@ -123,17 +119,13 @@ export class StorageService {
   }
   getFindOptions<T>(model: TransformableModel<T>, originalOptions: StreamingFindOptions<T>) {
     let options: StreamingFindOptions<T> = {};
-    let query: any = {}, since: any;
-    if ( originalOptions.paging &&
-      this.validPagingProperty(model, originalOptions.paging)
-    ) {
-
-
+    let query: any = {},
+      since: any;
+    if (originalOptions.paging && this.validPagingProperty(model, originalOptions.paging)) {
       if (originalOptions.since !== undefined) {
         since = this.typecastForDb(model, originalOptions.paging, originalOptions.since);
       }
 
-
       if (originalOptions.direction && Number(originalOptions.direction) === 1) {
         if (since) {
           query[originalOptions.paging] = { $gt: since };

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

@@ -0,0 +1,18 @@
+export type IBlock = {
+  chain: string;
+  network: string;
+  height: number;
+  hash: string;
+  version: number;
+  merkleRoot: string;
+  time: Date;
+  timeNormalized: Date;
+  nonce: number;
+  previousBlockHash: string;
+  nextBlockHash: string;
+  transactionCount: number;
+  size: number;
+  bits: number;
+  reward: number;
+  processed: boolean;
+};

packages/bitcore-node/src/types/Query.ts

@@ -0,0 +1,12 @@
+const enum Direction {
+  ascending = 1,
+  descending = -1
+}
+
+export type StreamingFindOptions<T> = Partial<{
+  paging: keyof T;
+  since: T[keyof T];
+  sort: any;
+  direction: Direction;
+  limit: number;
+}>;

packages/insight/angular.json

@@ -9,7 +9,11 @@
       "sourceRoot": "src",
       "projectType": "application",
       "prefix": "app",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:component": {
+          "styleext": "scss"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",

packages/insight/package.json

@@ -53,6 +53,7 @@
     "@ionic/angular": "^4.0.0-beta.12",
     "backoff-rxjs": "0.0.10",
     "core-js": "^2.5.3",
+    "fast-deep-equal": "^2.0.1",
     "ngx-logger": "^3.3.2",
     "rxjs": "~6.3.3",
     "zone.js": "^0.8.26"

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

@@ -1,18 +1,25 @@
 <ion-app>
-  <ion-split-pane when="lg">
-    <ion-menu>
-      <ion-content>
-        <ion-list>
-          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
-            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
-              <ion-label>
-                {{ p.title }}
-              </ion-label>
-            </ion-item>
-          </ion-menu-toggle>
-        </ion-list>
-      </ion-content>
-    </ion-menu>
-    <ion-router-outlet main></ion-router-outlet>
-  </ion-split-pane>
-</ion-app>
+    <ion-split-pane when="lg">
+        <ion-menu>
+            <ion-content
+                class="dark-theme"
+                padding
+            >
+                <ion-list>
+                    <ion-menu-toggle
+                        auto-hide="false"
+                        *ngFor="let p of appPages"
+                    >
+                        <ion-item
+                            [routerDirection]="'root'"
+                            [routerLink]="[p.url]"
+                        >
+                            <ion-label>{{ p.title }}</ion-label>
+                        </ion-item>
+                    </ion-menu-toggle>
+                </ion-list>
+            </ion-content>
+        </ion-menu>
+        <ion-router-outlet main></ion-router-outlet>
+    </ion-split-pane>
+</ion-app>

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

@@ -0,0 +1,5 @@
+.dark-theme {
+  --ion-background-color: #3d3d4d;
+  --ion-item-background-color-active: lighten(--ion-background-color, 15%);
+  --ion-text-color: rgba(255, 255, 255, 0.9);
+}

packages/insight/src/app/app.component.ts

@@ -6,7 +6,8 @@ import { Platform } from '@ionic/angular';
 
 @Component({
   selector: 'app-root',
-  templateUrl: 'app.component.html'
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss']
 })
 export class AppComponent {
   public appPages = [

packages/insight/src/app/blocks/block-list/block-list.component.html

@@ -1,3 +1,6 @@
-<p>
-  block-list works!
-</p>
+<app-block
+    *ngFor="let block of block$ | async as blocks; index as i; first as isFirst"
+    [block]="block"
+    (click)="goToBlock(block)"
+    [displayValueIn]="displayValueIn"
+></app-block>

packages/insight/src/app/blocks/block-list/block-list.component.scss

@@ -0,0 +1,3 @@
+app-block {
+  cursor: pointer;
+}

packages/insight/src/app/blocks/block-list/block-list.component.ts

@@ -1,29 +1,42 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit
+} from '@angular/core';
+import * as equal from 'fast-deep-equal';
+import { combineLatest, Observable } from 'rxjs';
+import { distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api/api.service';
-import { IBlock } from '../../types/bitcore-node';
-import { Network, Ticker } from '../../types/configuration';
+import { IBlock, StreamingFindOptions } from '../../types/bitcore-node';
+import { Chain } from '../../types/configuration';
 
 @Component({
   selector: 'app-block-list',
   templateUrl: './block-list.component.html',
-  styleUrls: ['./block-list.component.scss']
+  styleUrls: ['./block-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class BlockListComponent {
+export class BlockListComponent implements OnInit {
   @Input()
-  public ticker: Ticker;
+  chain: Observable<Chain>;
   @Input()
-  public network: Network;
+  query: Observable<StreamingFindOptions<IBlock>>;
   @Input()
-  public blocks: number;
-  @Input()
-  public paging: keyof IBlock = 'height';
-
-  public blockStream = this.apiService.streamBlocks(
-    { ticker: this.ticker, network: this.network },
-    {
-      paging: this.paging
-    }
-  );
+  displayValueIn = 'BCH';
+  block$: Observable<IBlock>;
 
   constructor(private apiService: ApiService) {}
+  ngOnInit() {
+    this.block$ = combineLatest(this.chain, this.query).pipe(
+      distinctUntilChanged((x, y) => equal(x, y)),
+      switchMap(([chain, query]) => this.apiService.streamBlocks(chain, query)),
+      distinctUntilChanged((x, y) => equal(x, y))
+    );
+  }
+
+  goToBlock(block: IBlock) {
+    // tslint:disable-next-line:no-console
+    console.log('TODO: navigate to block', block.hash);
+  }
 }

packages/insight/src/app/blocks/block/block.component.html

@@ -0,0 +1,59 @@
+<!-- <small>block:
+  {{block | json}}</small> -->
+
+<div class="card">
+    <div class="section header">
+        <div class="identifiers">
+            <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."
+            >
+                Tip
+            </span>
+        </div>
+        <app-date-time
+            [value]="block.timeNormalized"
+            class="time"
+        >
+        </app-date-time>
+    </div>
+    <div class="section body">
+        <div class="property">
+            <div class="key">Block Hash</div>
+            <div class="value">{{block.hash}}</div>
+        </div>
+        <div class="property">
+            <span class="key">Transaction Count</span>
+            <span
+                class="value link"
+                (click)="listTransactionsInBlock(block)"
+            >
+                {{block.transactionCount}}
+            </span>
+        </div>
+        <div class="property">
+            <span class="key">Reward</span>
+            <span class="value">
+                <app-currency-value
+                    class="reward"
+                    inAtomicUnits="{{block.reward}}"
+                    ticker="{{block.chain}}"
+                    displayAs="displayValueIn"
+                ></app-currency-value>
+            </span>
+        </div>
+    </div>
+    <div
+        class="section details"
+        *ngIf="!summary"
+    >
+        [show details]
+    </div>
+</div>