From 290e53f697c25319ec349a6a895927c97cfc359f Mon Sep 17 00:00:00 2001
From: Darren Nelsen <darren@bitpay.com>
Date: Wed, 2 Aug 2017 16:28:54 -0400
Subject: [PATCH] Added transaction page

---
 .../components/transactions/transactions.ts   |  7 +--
 app/src/pages/transaction/transaction.html    | 49 +++++++++++++++++++
 .../pages/transaction/transaction.module.ts   | 18 +++++++
 app/src/pages/transaction/transaction.scss    |  3 ++
 app/src/pages/transaction/transaction.ts      | 44 +++++++++++++++++
 5 files changed, 116 insertions(+), 5 deletions(-)
 create mode 100644 app/src/pages/transaction/transaction.html
 create mode 100644 app/src/pages/transaction/transaction.module.ts
 create mode 100644 app/src/pages/transaction/transaction.scss
 create mode 100644 app/src/pages/transaction/transaction.ts

diff --git a/app/src/components/transactions/transactions.ts b/app/src/components/transactions/transactions.ts
index 7524501..db8aa08 100644
--- a/app/src/components/transactions/transactions.ts
+++ b/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('tx', {
-      'tx': txId 
+    this.navCtrl.push('transaction', {
+      'txId': txId 
     });
-     */
   }
 
   public goToAddress(addrStr: string): void {
diff --git a/app/src/pages/transaction/transaction.html b/app/src/pages/transaction/transaction.html
new file mode 100644
index 0000000..a66b0bc
--- /dev/null
+++ b/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>
diff --git a/app/src/pages/transaction/transaction.module.ts b/app/src/pages/transaction/transaction.module.ts
new file mode 100644
index 0000000..eb351e5
--- /dev/null
+++ b/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 {}
diff --git a/app/src/pages/transaction/transaction.scss b/app/src/pages/transaction/transaction.scss
new file mode 100644
index 0000000..b7253af
--- /dev/null
+++ b/app/src/pages/transaction/transaction.scss
@@ -0,0 +1,3 @@
+page-transaction {
+
+}
diff --git a/app/src/pages/transaction/transaction.ts b/app/src/pages/transaction/transaction.ts
new file mode 100644
index 0000000..5427fb5
--- /dev/null
+++ b/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;
+      }
+    );
+  }
+}