web-ui: Display transaction details

web-ui/src/app/app.component.ts

@@ -40,7 +40,12 @@ export class AppComponent {
       'action.find': 'Find',
 
       // labels
-      'label.transactionId': 'Transaction Id'
+      'label.transactionId': 'Transaction Id',
+      'label.confirmations': 'Confirmations',
+      'label.blockhash': 'Block Hash',
+      'label.blocktime': 'Block Time',
+      'label.inputAddresses': 'Senders',
+      'label.outputAddresses': 'Receivers'
     };
   }
 }

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

@@ -1,3 +1,49 @@
-<p>
-  transaction-details works!
-</p>
+<div>
+  <div [hidden]="transaction != null">
+    <alert>{{'message.transactionNotFound' | translate}}</alert>
+  </div>
+  <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>
+    </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>
+    <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>
+    </div>
+    <div class="row">
+      <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>
+
+    <!-- TODO: Add amounts -->
+    <div>
+      <div class="row">
+        <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.inputAddresses' | translate}}</label>
+      </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>
+      </div>
+    </div>
+    
+    <!-- TODO: Add amounts -->
+    <div>
+      <div class="row">
+        <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.outputAddresses' | translate}}</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>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -1,4 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { ErrorService } from '../../services/error.service';
+import { NavigatorService } from '../../services/navigator.service';
+import { TransactionsService } from '../../services/transactions.service';
 
 @Component({
   selector: 'app-transaction-details',
@@ -7,9 +14,55 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TransactionDetailsComponent implements OnInit {
 
-  constructor() { }
+  transaction: object;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private navigatorService: NavigatorService,
+    private transactionsService: TransactionsService,
+    private errorService: ErrorService) { }
 
   ngOnInit() {
+    const txid = this.route.snapshot.paramMap.get('txid');
+    this.transactionsService.get(txid).subscribe(
+      response => this.onTransactionRetrieved(response),
+      response => this.onError(response)
+    );
+  }
+
+  private onTransactionRetrieved(response: any) {
+    console.log(response);
+    this.transaction = response;
+  }
+
+  private onError(response: any) {
+    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);
   }
 
+  // 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);
+      }
+    }
+    return result;
+  };
 }