web-ui: collapse similar inputs while displaying a transaction (#49)

Author: JonSalazar

web-ui/src/app/components/transaction-details/transaction-details.component.html

@@ -43,15 +43,15 @@
 
     <div class="row">
       <!-- Input -->
-      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
+      <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
         <table class="table table-condensed table-bordered table-striped table-hover">
           <thead>
             <tr *ngIf="transaction.input == null">
-              <th class="col-xs-3 col-sm-3 col-md-2 col-lg-2">{{'label.noInput' | translate}}</th>
+              <th class="col-xs-4 col-sm-4 col-md-3 col-lg-3">{{'label.noInput' | translate}}</th>
               <th class="col-xs-5 col-sm-5 col-md-4 col-lg-4"></th>
             </tr>
             <tr *ngIf="transaction.input != null">
-              <th class="col-xs-3 col-sm-3 col-md-2 col-lg-2">{{'label.from' | translate}}</th>
+              <th class="col-xs-4 col-sm-4 col-md-3 col-lg-3">{{'label.from' | translate}}</th>
               <th class="col-xs-5 col-sm-5 col-md-4 col-lg-4"></th>
             </tr>
           </thead>
@@ -61,8 +61,11 @@
               <td>{{'label.coinbase' | translate}}</td>
               <td></td>
             </tr>
-            <tr *ngFor="let item of transaction.input">
-              <td>
+            <tr *ngFor="let item of collapsedInput">
+              <td *ngIf="count(item.address, transaction.input) != 1">
+                <a routerLink="/addresses/{{item.address}}">{{item.address}}</a> ({{count(item.address, transaction.input)}})
+              </td>
+              <td *ngIf="count(item.address, transaction.input) == 1">
                 <a routerLink="/addresses/{{item.address}}">{{item.address}}</a>
               </td>
               <td>{{item.value}} {{'label.coinName' | translate}}</td>
@@ -77,8 +80,11 @@
               <td><strong>{{'label.output' | translate}}</strong></td>
               <td></td>
             </tr>
-            <tr *ngFor="let item of transaction.output">
-              <td>
+            <tr *ngFor="let item of collapsedOutput">
+              <td *ngIf="count(item.address, transaction.output) != 1">
+                <a routerLink="/addresses/{{item.address}}">{{item.address}}</a> ({{count(item.address, transaction.output)}})
+              </td>
+              <td *ngIf="count(item.address, transaction.output) == 1">
                 <a routerLink="/addresses/{{item.address}}">{{item.address}}</a>
               </td>
               <td>{{item.value}} {{'label.coinName' | translate}}</td>

web-ui/src/app/components/transaction-details/transaction-details.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { TranslateService } from '@ngx-translate/core';
 
-import { Transaction } from '../../models/transaction';
+import { Transaction, TransactionValue } from '../../models/transaction';
 
 import { ErrorService } from '../../services/error.service';
 import { NavigatorService } from '../../services/navigator.service';
@@ -17,6 +17,8 @@ import { TransactionsService } from '../../services/transactions.service';
 export class TransactionDetailsComponent implements OnInit {
 
   transaction: Transaction;
+  collapsedInput: TransactionValue[];
+  collapsedOutput: TransactionValue[];
 
   constructor(
     private route: ActivatedRoute,
@@ -38,12 +40,39 @@ export class TransactionDetailsComponent implements OnInit {
 
   private onTransactionRetrieved(response: Transaction) {
     this.transaction = response;
+    this.collapsedInput = this.collapseRepeatedRows(this.transaction.input);
+    this.collapsedOutput = this.collapseRepeatedRows(this.transaction.output);
   }
 
   private onError(response: any) {
     this.errorService.renderServerErrors(null, response);
   }
 
+  private collapseRepeatedRows(rows: TransactionValue[]): TransactionValue[] {
+    const addresses = new Set(rows.map(r => r.address));
+    const collapsedRows = Array.from(addresses)
+      .map(address => {
+          const sum = rows
+            .filter(r => r.address === address)
+            .map(r => r.value)
+            .reduce((a, b) => a + b);
+
+          const newValue = new TransactionValue();
+          newValue.address = address;
+          newValue.value = sum;
+
+          return newValue;
+      });
+
+    return collapsedRows;
+  }
+
+  count(address: string, rows: TransactionValue[]): number {
+    return rows
+      .filter(r => r.address === address)
+      .length;
+  }
+
   getFee(tx: Transaction): number {
     const vout = tx.output.map(t => t.value).reduce((a, b) => a + b, 0);
     return Math.max(0, this.getVIN(tx) - vout);

web-ui/src/app/models/transaction.ts

@@ -12,7 +12,7 @@ export class Transaction {
   received: number;
 }
 
-class TransactionValue {
+export class TransactionValue {
   address: string;
   value: number;
 }