Merge pull request bitpay#2057 from rastajpa/feat/migration

[insight-previous] FEAT: Migration to Angular 5

Author: matiu

packages/insight-previous/package-lock.json

@@ -38,14 +38,14 @@
     "fix:tslint": "tslint --type-check --fix --project ."
   },
   "dependencies": {
-    "@angular/common": "4.4.7",
-    "@angular/compiler": "4.4.7",
-    "@angular/core": "4.4.7",
-    "@angular/forms": "4.4.7",
-    "@angular/http": "4.4.7",
-    "@angular/platform-browser": "4.4.7",
-    "@angular/platform-browser-dynamic": "4.4.7",
-    "angular2-moment": "1.6.0",
+    "@angular/common": "5.2.10",
+    "@angular/compiler": "5.2.10",
+    "@angular/core": "5.2.10",
+    "@angular/forms": "5.2.10",
+    "@angular/http": "5.2.10",
+    "@angular/platform-browser": "5.2.10",
+    "@angular/platform-browser-dynamic": "5.2.10",
+    "angular2-moment": "1.7.1",
     "angular2-qrcode": "2.0.1",
     "bitcore-lib": "8.1.0",
     "bitcore-lib-cash": "8.1.0",
@@ -56,9 +56,9 @@
     "zone.js": "0.8.12"
   },
   "devDependencies": {
-    "@angular/cli": "^1.7.4",
-    "@angular/compiler-cli": "4.4.7",
-    "@ionic/app-scripts": "3.2.1",
+    "@angular/cli": "7.3.4",
+    "@angular/compiler-cli": "5.2.10",
+    "@ionic/app-scripts": "3.2.3",
     "@types/jasmine": "2.5.41",
     "@types/lodash": "4.14.104",
     "@types/node": "7.0.4",
@@ -73,7 +73,7 @@
     "karma-jasmine-html-reporter": "0.2.2",
     "prettier": "^1.15.3",
     "serve": "^10.1.1",
-    "serve-static": "1.12.3",
+    "serve-static": "1.13.2",
     "ts-node": "3.0.4",
     "tslint": "5.3.2",
     "tslint-angular": "^1.1.2",

packages/insight-previous/package.json

@@ -1,5 +1,5 @@
+import { HttpClientModule } from '@angular/common/http';
 import { ErrorHandler, NgModule } from '@angular/core';
-import { HttpModule } from '@angular/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
 import { BlocksPage, HomePage, PagesModule } from '../pages';
@@ -19,7 +19,7 @@ import { InsightApp } from './app.component';
   declarations: [InsightApp],
   imports: [
     BrowserModule,
-    HttpModule,
+    HttpClientModule,
     PagesModule,
     IonicModule.forRoot(InsightApp, {
       mode: 'md',

packages/insight-previous/src/app/app.module.ts

@@ -21,7 +21,7 @@ export class DenominationComponent {
   public ionViewDidLoad() {
     this.currencySymbol = this.navParams.data.currencySymbol;
     this.api.getAvailableNetworks().subscribe(data => {
-      this.availableNetworks = data.json() as ChainNetwork[];
+      this.availableNetworks = data;
       this.showUnits = _.some(
         this.availableNetworks,
         this.api.networkSettings.value.selectedNetwork

packages/insight-previous/src/components/denomination/denomination.ts

@@ -1,7 +1,7 @@
 import { Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { ApiProvider } from '../../providers/api/api';
-import { BlocksProvider } from '../../providers/blocks/blocks';
+import { AppBlock, BlocksProvider } from '../../providers/blocks/blocks';
 import { CurrencyProvider } from '../../providers/currency/currency';
 import { DefaultProvider } from '../../providers/default/default';
 import { Logger } from '../../providers/logger/logger';
@@ -12,8 +12,6 @@ import { RedirProvider } from '../../providers/redir/redir';
   templateUrl: 'latest-blocks.html'
 })
 export class LatestBlocksComponent implements OnInit, OnDestroy {
-  public loading = true;
-  public blocks: any[] = [];
   @Input()
   public numBlocks: number;
   @Input()
@@ -22,19 +20,21 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
   public showLoadMoreButton = false;
   @Input()
   public showTimeAs: string;
-  private reloadInterval: any;
-
+  public loading = true;
+  public blocks: AppBlock[] = [];
   public subscriber: Subscription;
   public errorMessage: string;
 
+  private reloadInterval: any;
+
   constructor(
+    public currency: CurrencyProvider,
+    public defaults: DefaultProvider,
+    public redirProvider: RedirProvider,
     private blocksProvider: BlocksProvider,
     private apiProvider: ApiProvider,
     private ngZone: NgZone,
-    public currency: CurrencyProvider,
-    public defaults: DefaultProvider,
-    private logger: Logger,
-    public redirProvider: RedirProvider
+    private logger: Logger
   ) {
     this.numBlocks = parseInt(defaults.getDefault('%NUM_BLOCKS%'), 10);
   }
@@ -53,15 +53,18 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
 
   private loadBlocks(): void {
     this.subscriber = this.blocksProvider.getBlocks(this.numBlocks).subscribe(
-      ({ blocks }) => {
+      response => {
+        const blocks = response.map(block =>
+          this.blocksProvider.toAppBlock(block)
+        );
         this.blocks = blocks;
         this.loading = false;
       },
       err => {
         this.subscriber.unsubscribe();
         clearInterval(this.reloadInterval);
-        this.logger.error(err._body);
-        this.errorMessage = err;
+        this.logger.error(err.message);
+        this.errorMessage = err.message;
         this.loading = false;
       }
     );
@@ -72,14 +75,17 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
     const since: number =
       this.blocks.length > 0 ? this.blocks[this.blocks.length - 1].height : 0;
     return this.blocksProvider.pageBlocks(since, this.numBlocks).subscribe(
-      ({ blocks }) => {
+      response => {
+        const blocks = response.map(block =>
+          this.blocksProvider.toAppBlock(block)
+        );
         this.blocks = this.blocks.concat(blocks);
         this.loading = false;
         infiniteScroll.complete();
       },
       err => {
-        this.logger.error(err);
-        this.errorMessage = err;
+        this.logger.error(err.message);
+        this.errorMessage = err.message;
         this.loading = false;
       }
     );
@@ -93,10 +99,6 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
     });
   }
 
-  public getBlocks(): any[] {
-    return this.blocks;
-  }
-
   public goToBlocks(): void {
     this.redirProvider.redir('blocks', {
       chain: this.apiProvider.networkSettings.value.selectedNetwork.chain,

packages/insight-previous/src/components/latest-blocks/latest-blocks.ts

@@ -1,5 +1,5 @@
+import { HttpClient } from '@angular/common/http';
 import { Component, Input, NgZone, OnChanges } from '@angular/core';
-import { Http } from '@angular/http';
 import { ApiProvider } from '../../providers/api/api';
 import { CurrencyProvider } from '../../providers/currency/currency';
 import { Logger } from '../../providers/logger/logger';
@@ -17,7 +17,7 @@ export class LatestTransactionsComponent implements OnChanges {
   private transactions = [];
 
   constructor(
-    private http: Http,
+    private httpClient: HttpClient,
     private apiProvider: ApiProvider,
     public currency: CurrencyProvider,
     private ngZone: NgZone,
@@ -44,7 +44,7 @@ export class LatestTransactionsComponent implements OnChanges {
   private loadTransactions(): void {
     const url: string = this.apiProvider.getUrl() + 'txs';
 
-    this.http.get(url).subscribe(
+    this.httpClient.get(url).subscribe(
       (data: any) => {
         this.transactions = JSON.parse(data._body);
         this.loading = false;

packages/insight-previous/src/components/latest-transactions/latest-transactions.ts

@@ -16,7 +16,6 @@ export class TransactionListComponent implements OnInit {
   public queryValue?: string;
   @Input()
   public transactions?: any = [];
-
   public limit = 10;
   public chunkSize = 100;
 
@@ -25,9 +24,10 @@ export class TransactionListComponent implements OnInit {
   public ngOnInit(): void {
     if (this.transactions && this.transactions.length === 0) {
       this.txProvider.getTxs({ [this.queryType]: this.queryValue }).subscribe(
-        data => {
+        response => {
           // Newly Generated Coins (Coinbase) First
-          const sortedTxs = _.sortBy(data.txs, (tx: any) => {
+          const txs = response.map(tx => this.txProvider.toAppTx(tx));
+          const sortedTxs = _.sortBy(txs, (tx: any) => {
             return tx.isCoinBase ? 0 : 1;
           });
           this.transactions = sortedTxs;

packages/insight-previous/src/components/transaction-list/transaction-list.ts

@@ -67,7 +67,8 @@
 
           <div class="ellipsis">
             <p>
-              <a (click)="goToAddress(vin.address)">{{ vin.address }}</a>
+              <a (click)="goToAddress(vin.address)"
+                [ngClass]="{'disabled-link': getAddress(vin) === 'Unparsed address' }">{{ getAddress(vin) }}</a>
             </p>
           </div>
           <div [hidden]="!expanded">

packages/insight-previous/src/components/transaction/transaction.html

@@ -19,15 +19,15 @@ import {
   templateUrl: 'transaction.html'
 })
 export class TransactionComponent implements OnInit {
-  private COIN = 100000000;
-
   public expanded = false;
   @Input()
   public tx: any = {};
   @Input()
   public showCoins = false;
   public confirmations: number;
 
+  private COIN = 100000000;
+
   constructor(
     public currencyProvider: CurrencyProvider,
     public apiProvider: ApiProvider,
@@ -50,18 +50,20 @@ export class TransactionComponent implements OnInit {
     });
   }
 
-  public getAddress(vout: ApiCoin): string {
-    if (vout.address === 'false') {
+  public getAddress(v: ApiCoin): string {
+    if (v.address === 'false') {
       return 'Unparsed address';
     }
 
-    return vout.address;
+    return v.address;
   }
 
   public getConfirmations() {
     this.txProvider
       .getConfirmations(this.tx.blockheight)
-      .subscribe(confirmations => (this.confirmations = confirmations));
+      .subscribe(confirmations => {
+        this.confirmations = confirmations;
+      });
   }
 
   public goToTx(txId: string, vout?: number, fromVout?: boolean): void {

packages/insight-previous/src/components/transaction/transaction.ts

@@ -19,12 +19,13 @@ import { TxsProvider } from '../../providers/transactions/transactions';
 })
 export class AddressPage {
   public loading = true;
-  private addrStr: string;
-  private chainNetwork: ChainNetwork;
   public address: any = {};
   public nroTransactions = 0;
   public errorMessage: string;
 
+  private addrStr: string;
+  private chainNetwork: ChainNetwork;
+
   constructor(
     public navParams: NavParams,
     public currencyProvider: CurrencyProvider,
@@ -67,8 +68,8 @@ export class AddressPage {
         this.loading = false;
       },
       err => {
-        this.logger.error(err);
-        this.errorMessage = err;
+        this.logger.error(err.message);
+        this.errorMessage = err.message;
         this.loading = false;
       }
     );