Merge pull request bitpay#2122 from rastajpa/fix/coins

[insight-previous] FIX: show outgoing and incoming txs on address page

Author: matiu

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

@@ -2,17 +2,17 @@
 
 <div *ngIf="!loading">
   <ion-grid>
-    <ion-row *ngFor="let coin of coins; let i = index">
+    <ion-row *ngFor="let tx of txs; let i = index">
       <ion-col col-12 *ngIf="i < limit">
-        <coin [coin]="coin"></coin>
+        <coin [coin]="tx"></coin>
       </ion-col>
     </ion-row>
-    <ion-row *ngIf="limit < coins.length">
+    <ion-row *ngIf="limit < txs.length">
       <ion-infinite-scroll (ionInfinite)="loadMore($event)">
         <loader [type]="'tx-list'"></loader>
       </ion-infinite-scroll>
     </ion-row>
-    <ion-row *ngIf="coins.length === 0" class="no-txs">
+    <ion-row *ngIf="txs.length === 0" class="no-txs">
       <ion-col col-12>
         There are no transactions involving this address.
       </ion-col>

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

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Events } from 'ionic-angular';
+import _ from 'lodash';
 import { AddressProvider } from '../../providers/address/address';
 import { Logger } from '../../providers/logger/logger';
 import { TxsProvider } from '../../providers/transactions/transactions';
@@ -12,7 +13,7 @@ export class CoinListComponent implements OnInit {
   @Input()
   public addrStr?: string;
 
-  public coins: any = [];
+  public txs: any = [];
   public showTransactions: boolean;
   public loading;
   public limit = 10;
@@ -26,11 +27,12 @@ export class CoinListComponent implements OnInit {
   ) {}
 
   public ngOnInit(): void {
-    if (this.coins && this.coins.length === 0) {
+    if (this.txs && this.txs.length === 0) {
       this.loading = true;
       this.addrProvider.getAddressActivity(this.addrStr).subscribe(
         data => {
-          this.coins = data.map(this.txsProvider.toAppCoin);
+          const formattedData = data.map(this.txsProvider.toAppCoin);
+          this.txs = this.orderByHeight(formattedData);
           this.showTransactions = true;
           this.loading = false;
           this.events.publish('CoinList', { length: data.length });
@@ -44,6 +46,26 @@ export class CoinListComponent implements OnInit {
     }
   }
 
+  orderByHeight(data) {
+    const unconfirmedTxs = [];
+    let confirmedTxs = [];
+
+    data.forEach(tx => {
+      const { mintHeight, mintTxid, value, spentHeight, spentTxid } = tx;
+
+      mintHeight < 0
+        ? unconfirmedTxs.push({ height: mintHeight, mintTxid, value })
+        : confirmedTxs.push({ height: mintHeight, mintTxid, value });
+
+      spentHeight < 0
+        ? unconfirmedTxs.push({ height: spentHeight, spentTxid, value })
+        : confirmedTxs.push({ height: spentHeight, spentTxid, value });
+    });
+
+    confirmedTxs = _.orderBy(confirmedTxs, ['height'], ['desc']);
+    return unconfirmedTxs.concat(confirmedTxs);
+  }
+
   public loadMore(infiniteScroll) {
     this.limit += this.chunkSize;
     this.chunkSize *= 2;

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

@@ -1,19 +1,47 @@
 <ion-grid>
-  <ion-row>
+  <ion-row *ngIf="coin?.mintTxid">
     <ion-col col-7>
       <div class="ellipsis">
-        <span>
+        <span *ngIf="coin.height >= 0">
           <a (click)="goToTx(coin.mintTxid)">{{ coin.mintTxid }}</a>
         </span>
+        <span ion-text color="danger" *ngIf="coin.height === -3">
+          Invalid
+        </span>
+      </div>
+    </ion-col>
+    <ion-col col-5 text-right>
+      <span ion-text>
+        <ion-icon name="md-add-circle" color="dark"></ion-icon>
+        {{ currencyProvider.getConvertedNumber(coin.value) | number:'1.0-8' }}
+        {{ currencyProvider.currencySymbol }}
+      </span>
+    </ion-col>
+  </ion-row>
+
+  <ion-row *ngIf="coin?.spentTxid || coin?.spentTxid == ''">
+    <ion-col col-7>
+      <div class="ellipsis">
+        <span *ngIf="coin.height >= -1">
+          <a (click)="goToTx(coin.spentTxid)">{{ coin.spentTxid }}</a>
+        </span>
+        <span *ngIf="coin.height === -2">
+          Unspent
+        </span>
+        <span ion-text color="danger" *ngIf="coin.height === -3">
+          Invalid
+        </span>
+        <span ion-text color="danger" *ngIf="coin.height === -4">
+          Error
+        </span>
       </div>
     </ion-col>
     <ion-col col-5 text-right>
-      {{ currencyProvider.getConvertedNumber(coin.value) | number:'1.0-8' }} {{ currencyProvider.currencySymbol }}
-      <a [hidden]="!coin.spentTxid" (click)="goToTx(coin.spentTxid)">
-        <span ion-text color="danger">(S)</span>
-      </a>
-      <span [hidden]="coin.spentTxid">
-        <span ion-text color="brand">(U)</span>
+      <span ion-text [color]="!coin.spentTxid ? 'default':'dark-light'">
+        <ion-icon name="md-remove-circle" [color]="!coin.spentTxid ? 'default':'dark-light'" *ngIf="coin.height >= 0">
+        </ion-icon>
+        {{ currencyProvider.getConvertedNumber(coin.value) | number:'1.0-8' }}
+        {{ currencyProvider.currencySymbol }}
       </span>
     </ion-col>
   </ion-row>

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

@@ -10,6 +10,10 @@ coin {
         font-size: 1.1rem;
       }
 
+      ion-icon {
+        color: rgba(0, 0, 0, 0.25);
+      }
+
     }
   }
 }

packages/insight-previous/src/theme/variables.scss

@@ -23,9 +23,10 @@ $colors: (
   brand: #8dc429,
   primary: #2fa4d7,
   secondary: #8dc429,
-  danger: #f53d3d,
+  danger: #a94442,
   warning: #ffa400,
   light: #f4f4f4,
+  dark-light: #a2a2a2,
   dark: #373d42
 );