display transactions with vins/vouts

app/src/components/transactions/transactions.html

@@ -1,3 +1,48 @@
 <div>
-  Put Transactions here
+  <div *ngFor="let tx of transactions.txs" style="border: 1px solid purple">
+    <p>{{ tx.txid }}</p>
+    <div [hidden]="!tx.firstSeenTs">
+      <span translate>first seen at</span>
+      <time>{{tx.firstSeenTs * 1000 | date:'medium'}}</time>
+    </div>
+    <div [hidden]="!tx.blocktime && tx.firstSeenTs">
+      <span translate>mined</span>
+      <time>{{tx.time * 1000 | date:'medium'}}</time>
+    </div>
+
+    <div [hidden]="!tx.isCoinBase">
+      <div *ngFor="let vin of tx.vin">
+        <div>
+          <span translate>No Inputs (Newly Generated Coins)</span>
+        </div>
+      </div>
+
+      <div>
+        &gt;
+      </div>
+
+      <div *ngFor="let vout of tx.vout">
+        <div>
+          <p>{{ getAddress(vout) }} {{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span></p>
+        </div>
+      </div>
+    </div>
+
+    <div [hidden]="tx.isCoinBase">
+      <div *ngFor="let vin of tx.vin">
+        <div>{{ vin.addr }}</div>
+        <p>{{ vin.value + ' BTC' }}</p>
+      </div>
+
+      <div>
+        &gt;
+      </div>
+
+      <div *ngFor="let vout of tx.vout">
+        <div>
+          <p>{{ getAddress(vout) }} {{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span></p>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>

app/src/components/transactions/transactions.ts

@@ -15,24 +15,36 @@ import { Http } from '@angular/http';
 export class TransactionsComponent {
 
   public loading: boolean = true;
-  @Input() private blockHash: string;
+  @Input() public blockHash: string;
   public transactions: any = [];
 
   constructor(private http: Http) {
+  }
+
+  private ngOnInit(): void {
     let apiPrefix: string = 'http://localhost:3001/insight-api/';
 
-    this.http.get(apiPrefix + 'txs/' + this.blockHash).subscribe(
+    this.http.get(apiPrefix + 'txs?block=' + this.blockHash).subscribe(
       (data) => {
-        console.log('hey, got data');
         this.transactions = JSON.parse(data['_body']);
+        this.loading = false;
+
+        this.transactions.txs.forEach((tx) => {
+          console.log('tx is', tx);
+        });
       },
       (err) => {
         console.log('err is', err);
-      },
-      () => {
         this.loading = false;
       }
     );
   }
 
+  public getAddress(vout: any): string {
+    if (vout.scriptPubKey && vout.scriptPubKey.addresses) {
+      return vout.scriptPubKey.addresses[0];
+    } else {
+      return 'Unparsed address';
+    }
+  }
 }

app/src/pages/block-detail/block-detail.html

@@ -33,7 +33,7 @@
     <p>Next Block <a (click)="goToNextBlock()">{{ block.height + 1 }}</a></p>
 
     <h3>Transactions</h3>
-    <transactions blockHash="block.hash"></transactions>
+    <transactions [blockHash]="block.hash"></transactions>
   </div>
   <div *ngIf="loading">
     <p>Loading...</p>

app/src/pages/block-detail/block-detail.ts

@@ -32,11 +32,10 @@ export class BlockDetailPage {
     this.http.get(apiPrefix + 'block/' + this.blockHash).subscribe(
       (data) => {
         this.block = JSON.parse(data['_body']);
+        this.loading = false;
       },
       (err) => {
         console.log('err is', err);
-      },
-      () => {
         this.loading = false;
       }
     );