From 415605986b447ed72edaa4d5ca636be1b608c546 Mon Sep 17 00:00:00 2001
From: Alexis Hernandez <alexis22229@gmail.com>
Date: Sat, 17 Mar 2018 16:58:59 -0600
Subject: [PATCH] web-ui: Complete pending fields on the TransactionDetails
 view

---
 web-ui/src/app/app.component.ts               | 10 +++-
 .../transaction-details.component.html        | 46 +++++++++++++------
 .../transaction-details.component.ts          | 38 ++++++---------
 web-ui/src/app/models/transaction.ts          | 16 +++++++
 .../src/app/services/transactions.service.ts  |  6 ++-
 5 files changed, 72 insertions(+), 44 deletions(-)
 create mode 100644 web-ui/src/app/models/transaction.ts

diff --git a/web-ui/src/app/app.component.ts b/web-ui/src/app/app.component.ts
index 9fc1626..6646c17 100644
--- a/web-ui/src/app/app.component.ts
+++ b/web-ui/src/app/app.component.ts
@@ -41,12 +41,18 @@ export class AppComponent {
       'action.find': 'Find',
 
       // labels
+      'label.coinName': 'XSN',
       'label.transactionId': 'Transaction Id',
       'label.confirmations': 'Confirmations',
       'label.blockhash': 'Block Hash',
       'label.blocktime': 'Block Time',
-      'label.inputAddresses': 'Senders',
-      'label.outputAddresses': 'Receivers'
+      'label.noInput': 'No input',
+      'label.coinbase': 'Coinbase',
+      'label.output': 'Receivers',
+      'label.from': 'From',
+      'label.to': 'To',
+      'label.value': 'Amount',
+      'label.fee': 'Fee'
     };
   }
 }
diff --git a/web-ui/src/app/components/transaction-details/transaction-details.component.html b/web-ui/src/app/components/transaction-details/transaction-details.component.html
index 5adaff5..1699c7d 100644
--- a/web-ui/src/app/components/transaction-details/transaction-details.component.html
+++ b/web-ui/src/app/components/transaction-details/transaction-details.component.html
@@ -5,12 +5,13 @@
   <div *ngIf="transaction != null">
     <div class="row">
       <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.transactionId' | translate}}</label>
-      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.txid}}</label>
+      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.id}}</label>
     </div>
     <div class="row">
       <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.confirmations' | translate}}</label>
       <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.confirmations}}</label>
     </div>
+    <!-- TODO: Add link to block view -->
     <div class="row">
       <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.blockhash' | translate}}</label>
       <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.blockhash}}</label>
@@ -19,29 +20,44 @@
       <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.blocktime' | translate}}</label>
       <label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{transaction.blocktime * 1000 | date:'MMMM d, y, h:mm:ss a'}}</label>
     </div>
+    <div class="row">
+      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.fee' | translate}}</label>
+      <label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{getFee(transaction)}} {{'label.coinName' | translate}}</label>
+    </div>
 
-    <!-- TODO: Add amounts -->
+    <!-- Input -->
     <div>
-      <div class="row">
-        <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.inputAddresses' | translate}}</label>
+      <div *ngIf="transaction.input == null">
+        <div class="row">
+          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.noInput' | translate}}</label>
+          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.coinbase' | translate}}</label>
+        </div>
       </div>
-      <div class="row">
-        <div *ngFor="let item of inputAddresses(transaction)">
-          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1"></label>
-          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{item}}</label>
+      <div *ngIf="transaction.input != null">
+        <div class="row">
+          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.from' | translate}}</label>
+          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.input.address}}</label>
+        </div>
+        <div class="row">
+          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.value' | translate}}</label>
+          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.input.value}} {{'label.coinName' | translate}}</label>
         </div>
       </div>
     </div>
-    
-    <!-- TODO: Add amounts -->
+
+    <!-- Output -->
     <div>
       <div class="row">
-        <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.outputAddresses' | translate}}</label>
+        <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1"><strong>{{'label.output' | translate}}</strong></label>
       </div>
-      <div class="row">
-        <div *ngFor="let item of outputAddresses(transaction)">
-          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1"></label>
-          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{item}}</label>
+      <div *ngFor="let item of transaction.output">
+        <div class="row">
+          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.to' | translate}}</label>
+          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{item.address}}</label>
+        </div>
+        <div class="row">
+          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.value' | translate}}</label>
+          <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{item.value}} {{'label.coinName' | translate}}</label>
         </div>
       </div>
     </div>
diff --git a/web-ui/src/app/components/transaction-details/transaction-details.component.ts b/web-ui/src/app/components/transaction-details/transaction-details.component.ts
index 26b8588..24939b7 100644
--- a/web-ui/src/app/components/transaction-details/transaction-details.component.ts
+++ b/web-ui/src/app/components/transaction-details/transaction-details.component.ts
@@ -3,6 +3,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { TranslateService } from '@ngx-translate/core';
 
+import { Transaction } from '../../models/transaction';
+
 import { ErrorService } from '../../services/error.service';
 import { NavigatorService } from '../../services/navigator.service';
 import { TransactionsService } from '../../services/transactions.service';
@@ -14,7 +16,7 @@ import { TransactionsService } from '../../services/transactions.service';
 })
 export class TransactionDetailsComponent implements OnInit {
 
-  transaction: object;
+  transaction: Transaction;
 
   constructor(
     private route: ActivatedRoute,
@@ -31,8 +33,7 @@ export class TransactionDetailsComponent implements OnInit {
     );
   }
 
-  private onTransactionRetrieved(response: any) {
-    console.log(response);
+  private onTransactionRetrieved(response: Transaction) {
     this.transaction = response;
   }
 
@@ -40,29 +41,16 @@ export class TransactionDetailsComponent implements OnInit {
     this.errorService.renderServerErrors(null, response);
   }
 
-  inputAddresses(transaction): string[] {
-    // TODO: complete
-    // transaction.vin.keys
-    return [];
-  }
-
-  // TODO: verify correctness
-  outputAddresses(transaction): string[] {
-    const keys: number[] = Array.from(transaction.vout.keys());
-    const nestedAddresses = keys.map(k => transaction.vout[k].scriptPubKey.addresses);
-    return this.flatten(nestedAddresses);
+  getFee(tx: Transaction): number {
+    const vout = tx.output.map(t => t.value).reduce((a, b) => a + b);
+    return Math.max(0, this.getVIN(tx) - vout);
   }
 
-  // TODO: move function to another package
-  private flatten = function (arr, result = []) {
-    for (let i = 0, length = arr.length; i < length; i++) {
-      const value = arr[i];
-      if (Array.isArray(value)) {
-        this.flatten(value, result);
-      } else {
-        result.push(value);
-      }
+  private getVIN(tx): number {
+    if (tx.input == null) {
+      return 0;
+    } else {
+      return tx.input.value;
     }
-    return result;
-  };
+  }
 }
diff --git a/web-ui/src/app/models/transaction.ts b/web-ui/src/app/models/transaction.ts
new file mode 100644
index 0000000..198d453
--- /dev/null
+++ b/web-ui/src/app/models/transaction.ts
@@ -0,0 +1,16 @@
+
+export class Transaction {
+  id: string;
+  size: number;
+  blockhash: string;
+  time: number;
+  blocktime: number;
+  confirmations: number;
+  input: TransactionValue;
+  output: TransactionValue[];
+}
+
+class TransactionValue {
+  address: string;
+  value: number;
+}
diff --git a/web-ui/src/app/services/transactions.service.ts b/web-ui/src/app/services/transactions.service.ts
index 90cd852..21eb678 100644
--- a/web-ui/src/app/services/transactions.service.ts
+++ b/web-ui/src/app/services/transactions.service.ts
@@ -4,6 +4,8 @@ import { Observable } from 'rxjs/Observable';
 
 import { environment } from '../../environments/environment';
 
+import { Transaction } from '../models/transaction';
+
 const httpOptions = {
   headers: new HttpHeaders({ 'Content-Type': 'application/json' })
 };
@@ -15,8 +17,8 @@ export class TransactionsService {
 
   constructor(private http: HttpClient) { }
 
-  get(txid: string): Observable<any> {
+  get(txid: string): Observable<Transaction> {
     const url = `${this.baseUrl}/${txid}`;
-    return this.http.get(url);
+    return this.http.get<Transaction>(url);
   }
 }