Feat/insight eth

packages/insight/src/app/app.scss

@@ -108,3 +108,12 @@ a.disabled-link{
   color: #99a;
   pointer-events: none;
 }
+
+.no-txs {
+  background-color: #fcf8e3;
+  border: 1px solid #faebcc;
+  color: #8a6d3b;
+  border-radius: 3px;
+  margin: 5px;
+  padding: 5px;
+}

packages/insight/src/components/block-summary-eth/block-summary-eth.html

@@ -0,0 +1,18 @@
+<ion-item>
+  Total Difficulty
+  <ion-note item-end>
+    {{ block.totalDifficulty }}
+  </ion-note>
+</ion-item>
+<ion-item>
+  Gas Limit
+  <ion-note item-end>
+    {{ block.gasLimit }}
+  </ion-note>
+</ion-item>
+<ion-item>
+  Gas Used
+  <ion-note item-end>
+    {{ block.gasUsed }}
+  </ion-note>
+</ion-item>

packages/insight/src/components/block-summary-eth/block-summary-eth.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+import { BlockSummaryEthComponent } from './block-summary-eth';
+
+@NgModule({
+  declarations: [BlockSummaryEthComponent],
+  imports: [IonicModule],
+  exports: [BlockSummaryEthComponent]
+})
+export class BlockSummaryEthComponentModule {}

packages/insight/src/components/block-summary-eth/block-summary-eth.scss

@@ -0,0 +1,2 @@
+block-summary-eth {
+}

packages/insight/src/components/block-summary-eth/block-summary-eth.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { ChainNetwork } from '../../providers/api/api';
+import { CurrencyProvider } from '../../providers/currency/currency';
+
+/**
+ * Generated class for the BlockSummaryEthComponent component.
+ *
+ * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
+ * for more info on Angular Components.
+ */
+@Component({
+  selector: 'block-summary-eth',
+  templateUrl: 'block-summary-eth.html'
+})
+export class BlockSummaryEthComponent {
+  @Input()
+  public block: any = {};
+  @Input()
+  public chainNetwork: ChainNetwork;
+
+  constructor(
+    public currencyProvider: CurrencyProvider
+  ) {
+  }
+}

packages/insight/src/components/block-summary/block-summary.html

@@ -0,0 +1,18 @@
+  <ion-item>
+    Merkle Root
+    <ion-note item-end>
+      {{ block.merkleroot }}
+    </ion-note>
+  </ion-item>
+  <ion-item *ngIf="block.bits">
+    Bits
+    <ion-note item-end>
+      {{ block.bits }}
+    </ion-note>
+  </ion-item>
+  <ion-item *ngIf="block.version">
+    Version
+    <ion-note item-end>
+      {{ block.version }}
+    </ion-note>
+  </ion-item>

packages/insight/src/components/block-summary/block-summary.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+import { BlockSummaryComponent } from './block-summary';
+
+@NgModule({
+  declarations: [BlockSummaryComponent],
+  imports: [IonicModule],
+  exports: [BlockSummaryComponent]
+})
+export class BlockSummaryComponentModule {}

packages/insight/src/components/block-summary/block-summary.scss

@@ -0,0 +1,2 @@
+block-summary {
+}

packages/insight/src/components/block-summary/block-summary.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { ChainNetwork } from '../../providers/api/api';
+import { CurrencyProvider } from '../../providers/currency/currency';
+
+/**
+ * Generated class for the BlockSummaryComponent component.
+ *
+ * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
+ * for more info on Angular Components.
+ */
+@Component({
+  selector: 'block-summary',
+  templateUrl: 'block-summary.html'
+})
+export class BlockSummaryComponent {
+  @Input()
+  public block: any = {};
+  @Input()
+  public chainNetwork: ChainNetwork;
+
+  constructor(
+    public currencyProvider: CurrencyProvider
+  ) {
+  }
+}

packages/insight/src/components/coin-list/coin-list.html

@@ -4,7 +4,8 @@
   <ion-grid>
     <ion-row *ngFor="let tx of txs; let i = index">
       <ion-col col-12 *ngIf="i < limit && (tx.spentTxid !== '' || tx.mintTxid)">
-        <coin [coin]="tx" [chainNetwork]="chainNetwork"></coin>
+        <coin *ngIf="chainNetwork.chain === 'BTC' || chainNetwork.chain === 'BCH'" [coin]="tx" [chainNetwork]="chainNetwork"></coin>
+        <transaction-details-eth *ngIf="chainNetwork.chain === 'ETH'" [tx]="tx" [showCoins]="true" [chainNetwork]="chainNetwork"></transaction-details-eth>
       </ion-col>
     </ion-row>
     <ion-row *ngIf="limit < txs.length">

packages/insight/src/components/coin-list/coin-list.module.ts

@@ -1,12 +1,13 @@
 import { NgModule } from '@angular/core';
 import { IonicModule } from 'ionic-angular';
+import { TransactionDetailsEthComponentModule } from '../../components/transaction-details-eth/transaction-details-eth.module';
 import { CoinComponentModule } from '../coin/coin.module';
 import { LoaderComponentModule } from '../loader/loader.module';
 import { CoinListComponent } from './coin-list';
 
 @NgModule({
   declarations: [CoinListComponent],
-  imports: [IonicModule, CoinComponentModule, LoaderComponentModule],
+  imports: [IonicModule, CoinComponentModule,TransactionDetailsEthComponentModule, LoaderComponentModule],
   exports: [CoinListComponent]
 })
 export class CoinListComponentModule {}

packages/insight/src/components/coin-list/coin-list.scss

@@ -1,10 +1,3 @@
 coin-list {
-  .no-txs {
-    background-color: #fcf8e3;
-    border: 1px solid #faebcc;
-    color: #8a6d3b;
-    border-radius: 3px;
-    margin: 5px;
-    padding: 5px;
-  }
+
 }

packages/insight/src/components/coin-list/coin-list.ts

@@ -3,7 +3,6 @@ import { Events } from 'ionic-angular';
 import _ from 'lodash';
 import { AddressProvider } from '../../providers/address/address';
 import { ChainNetwork } from '../../providers/api/api';
-import { Logger } from '../../providers/logger/logger';
 import { TxsProvider } from '../../providers/transactions/transactions';
 
 @Component({
@@ -34,8 +33,9 @@ export class CoinListComponent implements OnInit {
       this.loading = true;
       this.addrProvider.getAddressActivity(this.addrStr).subscribe(
         data => {
-          const formattedData = data.map(this.txsProvider.toAppCoin);
-          this.txs = this.processData(formattedData);
+          const toAppCoin: any = this.chainNetwork.chain !== 'ETH' ? this.txsProvider.toAppCoin: this.txsProvider.toAppEthCoin;
+          const formattedData = data.map(toAppCoin);
+          this.txs = this.chainNetwork.chain !== 'ETH' ? this.processData(formattedData): formattedData;
           this.showTransactions = true;
           this.loading = false;
           this.events.publish('CoinList', { length: data.length });

packages/insight/src/components/coin/coin.html

@@ -28,7 +28,7 @@
       </ion-chip>
       <ion-chip item-end color="default" class="size-fixed">
         <ion-label>
-          {{ currencyProvider.getConvertedNumber(coin.value) | number:'1.0-8' }}
+          {{ currencyProvider.getConvertedNumber(coin.value, chainNetwork.chain) | number:'1.0-8' }}
           {{ currencyProvider.currencySymbol }}
         </ion-label>
       </ion-chip>
@@ -70,7 +70,7 @@
       </ion-chip>
       <ion-chip item-end class="size-fixed">
         <ion-label color="danger">
-          - {{ currencyProvider.getConvertedNumber(coin.value) | number:'1.0-8' }}
+          - {{ currencyProvider.getConvertedNumber(coin.value, chainNetwork.chain) | number:'1.0-8' }}
           {{ currencyProvider.currencySymbol }}
         </ion-label>
       </ion-chip>

packages/insight/src/components/coin/coin.ts

@@ -25,7 +25,9 @@ export class CoinComponent {
 
   // tslint:disable-next-line:use-life-cycle-interface
   ngAfterViewInit() {
+    if (this.chainNetwork.chain !== 'ETH') {
     this.getConfirmations();
+    }
   }
 
   public getConfirmations() {

packages/insight/src/components/components.module.ts

@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { IonicModule } from 'ionic-angular';
+import { SplitPipe } from '../pipes/split/split';
 
 @NgModule({
-  declarations: [],
+  declarations: [SplitPipe],
   imports: [FormsModule, IonicModule, ReactiveFormsModule],
   exports: [],
   entryComponents: [],

packages/insight/src/components/footer/footer.html

@@ -6,7 +6,7 @@
       <a *ngIf="chainNetwork" (click)="openPage('messages')">Verify Message</a>
     </div>
     <div class="about">
-      <a href="https://github.com/bitpay/bitcore/tree/master/packages/insight-previous" target="_blank">
+      <a href="https://github.com/bitpay/bitcore/tree/master/packages/insight" target="_blank">
         <span class="logo">insight</span>
         <span class="version">v8.1.0</span>
       </a>

packages/insight/src/components/footer/footer.ts

@@ -9,7 +9,7 @@ import { ChainNetwork } from '../../providers/api/api';
 })
 export class FooterComponent {
   @Input()
-  private chainNetwork: ChainNetwork;
+  public chainNetwork: ChainNetwork;
 
   constructor(public nav: Nav) {}
 

packages/insight/src/components/head-nav/head-nav.html

@@ -5,14 +5,14 @@
       <ion-icon name="search" [color]="!showSearch ? 'light' : 'dark'"></ion-icon>
     </button>
     <form class="search" (ngSubmit)="search($event)">
-      <input dir="auto" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" name="search"
-        autocomplete="off" autocorrect="off" spellcheck="false">
+      <input dir="auto" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" name="search" autocomplete="off" autocorrect="off" spellcheck="false">
     </form>
 
     <ion-buttons>
-      <button ion-button (click)="changeCurrency($event)">
-        <ion-icon name="logo-bitcoin" *ngIf="currencyProvider?.currencySymbol !== 'USD'"></ion-icon>
+      <button ion-button (click)="changeCurrency($event)" class="cn-button">
+        <ion-icon name="logo-bitcoin" *ngIf="(chainNetwork.chain === 'BTC' || chainNetwork.chain === 'BCH') && currencyProvider?.currencySymbol !== 'USD'"></ion-icon>
         <ion-icon name="logo-usd" *ngIf="currencyProvider?.currencySymbol === 'USD'"></ion-icon>
+        <img class="eth-icon" src="assets/img/ethicon.svg" *ngIf="chainNetwork.chain === 'ETH' && currencyProvider?.currencySymbol !== 'USD'" width="12">
         &nbsp;
         {{ currencyProvider?.currencySymbol }}
         &nbsp;
@@ -26,8 +26,7 @@
 
   <ion-toolbar class="mobile-searchbar" fixed [hidden]="!showSearch">
     <form (ngSubmit)="search($event)">
-      <ion-searchbar #searchbar placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q"
-        name="search"></ion-searchbar>
+      <ion-searchbar #searchbar placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" name="search"></ion-searchbar>
     </form>
   </ion-toolbar>
 </ion-header>

packages/insight/src/components/head-nav/head-nav.scss

@@ -62,4 +62,10 @@ head-nav {
       display: none;
     }
   }
+  .cn-button:hover,
+  .cn-button:focus {
+    img{
+      filter:  invert(100%) contrast(44%);
+    }
+  }
 }