From 3b873f48417cb312bc97e52d5fce3ec7e165250a Mon Sep 17 00:00:00 2001
From: Darren Nelsen <darren@bitpay.com>
Date: Fri, 4 Aug 2017 17:41:29 -0400
Subject: [PATCH] put vins and vouts into ion-lists; add fee, confirmation, and
 value data

---
 .../components/transaction/transaction.html   | 48 ++++++++++---------
 app/src/pages/transaction/transaction.ts      |  1 -
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/app/src/components/transaction/transaction.html b/app/src/components/transaction/transaction.html
index 1e31754..9139ab4 100644
--- a/app/src/components/transaction/transaction.html
+++ b/app/src/components/transaction/transaction.html
@@ -17,41 +17,45 @@
 
   <ion-row>
     <ion-col col-5>
-      <div [hidden]="!tx.isCoinBase">
-        <div *ngFor="let vin of tx.vin">
-          <div>
-            <span translate>No Inputs (Newly Generated Coins)</span>
-          </div>
-        </div>
-      </div>
 
-      <div [hidden]="tx.isCoinBase">
-        <div *ngFor="let vin of tx.vin">
-          <div><a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a></div>
-          <p>{{ vin.value + ' BTC' }}</p>
-        </div>
-      </div>
+      <ion-list [hidden]="!tx.isCoinBase">
+        <ion-item>
+          No Inputs (Newly Generated Coins)
+        </ion-item>
+      </ion-list>
+
+      <ion-list [hidden]="tx.isCoinBase">
+        <ion-item *ngFor="let vin of tx.vin">
+          <a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a>
+          <span item-end>{{ vin.value + ' BTC' }}</span>
+        </ion-item>
+      </ion-list>
+
     </ion-col>
-    <ion-col col-2>
+    <ion-col col-2 text-center>
       <div>
         &gt;
       </div>
     </ion-col>
     <ion-col col-5>
-      <div *ngFor="let vout of tx.vout">
-        <div>
-          <p><a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a> {{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span></p>
-        </div>
-      </div>
+      <ion-list>
+        <ion-item *ngFor="let vout of tx.vout">
+            <a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a>
+            <div item-end>
+              {{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span>
+            </div>
+        </ion-item>
+      </ion-list>
     </ion-col>
   </ion-row>
 
   <ion-row>
     <ion-col col-6>
-      Fee
+      <span [hidden]="tx.isCoinBase">Fee {{ tx.fees + 'BTC' }}</span>
     </ion-col>
-    <ion-col col-6>
-      Confirmations
+    <ion-col col-6 text-right>
+      {{ tx.confirmations }} Confirmations
+      <span class="">{{ tx.valueOut + ' BTC' }}</span>
     </ion-col>
   </ion-row>
 </ion-grid>
diff --git a/app/src/pages/transaction/transaction.ts b/app/src/pages/transaction/transaction.ts
index 50f2d4b..0d3eabb 100644
--- a/app/src/pages/transaction/transaction.ts
+++ b/app/src/pages/transaction/transaction.ts
@@ -31,7 +31,6 @@ export class TransactionPage {
     this.http.get(this.api.apiPrefix + 'tx/' + this.txId).subscribe(
       (data) => {
         this.tx = JSON.parse(data['_body']);
-        console.log('tx', this.tx);
         this.loading = false;
       },
       (err) => {