Added transaction page

app/src/components/transactions/transactions.ts

@@ -53,12 +53,9 @@ export class TransactionsComponent {
   }
 
   public goToTx(txId: string): void {
-    console.log('tx', txId);
+    this.navCtrl.push('transaction', {
-    /*
+      'txId': txId 
-    this.navCtrl.push('tx', {
-      'tx': txId 
     });
-     */
   }
 
   public goToAddress(addrStr: string): void {

app/src/pages/transaction/transaction.html

@@ -0,0 +1,49 @@
+<!--
+  Generated template for the TransactionPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Transaction</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+  <ion-grid>
+    <ion-row>
+      <ion-col col-12>
+        <h1>Transaction</h1>
+        <p>{{ transaction.txid }}</p>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col col-12><h2>Summary</h2></ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col col-6>Size</ion-col>
+      <ion-col col-6 text-right>{{ transaction.size }} (bytes)</ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col col-6>Received Time</ion-col>
+      <ion-col col-6 text-right>{{ transaction.receivedTime }}</ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col col-6>Mined Time</ion-col>
+      <ion-col col-6 text-right>{{ transaction.minedTime }}</ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col col-6>Included in Block</ion-col>
+      <ion-col col-6 text-right>{{ transaction.blockhash }}</ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col col-12><h2>Details</h2></ion-col>
+    </ion-row>
+  </ion-grid>
+
+    <transactions [queryType]="'tx'" [queryValue]="txId"></transactions>
+</ion-content>

app/src/pages/transaction/transaction.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { TransactionPage } from './transaction';
+import { TransactionsComponentModule } from '../../components/transactions/transactions.module';
+
+@NgModule({
+  declarations: [
+    TransactionPage
+  ],
+  imports: [
+    IonicPageModule.forChild(TransactionPage),
+    TransactionsComponentModule
+  ],
+  exports: [
+    TransactionPage
+  ]
+})
+export class TransactionPageModule {}

app/src/pages/transaction/transaction.scss

@@ -0,0 +1,3 @@
+page-transaction {
+
+}

app/src/pages/transaction/transaction.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { Http } from '@angular/http';
+
+/**
+ * Generated class for the TransactionPage page.
+ *
+ * See http://ionicframework.com/docs/components/#navigation for more info
+ * on Ionic pages and navigation.
+ */
+@IonicPage({
+  name: 'transaction',
+  segment: 'tx/:txId'
+})
+@Component({
+  selector: 'page-transaction',
+  templateUrl: 'transaction.html',
+})
+export class TransactionPage {
+
+  public loading: boolean = true;
+  private txId: string;
+  public transaction: any = {};
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {
+    this.txId = navParams.get('txId');
+  }
+
+  ionViewDidLoad() {
+    let apiPrefix: string = 'http://localhost:3001/insight-api/';
+
+    this.http.get(apiPrefix + 'tx/' + this.txId).subscribe(
+      (data) => {
+        this.transaction = JSON.parse(data['_body']);
+        console.log('transaction', this.transaction);
+        this.loading = false;
+      },
+      (err) => {
+        console.log('err is', err);
+        this.loading = false;
+      }
+    );
+  }
+}