merge outpoints

app/src/components/transaction/transaction.html

@@ -32,7 +32,7 @@
       </ion-list>
 
       <ion-list [hidden]="tx.isCoinBase">
-        <ion-item *ngFor="let vin of aggregateItems(tx.vin)">
+        <ion-item *ngFor="let vin of aggregateItems(tx.vin); let i = index" [ngClass]="{'item--state-highlight' : i === txIndex && txDirection === '<'}">
           <div>
             <div class="ellipsis">
               <p>
@@ -41,14 +41,18 @@
             </div>
             <div [hidden]="!expanded">
               <p *ngIf="vin.confirmations">
-                <b>Confirmations</b> {{vin.confirmations}}</p>
+                <b>Confirmations</b> {{vin.confirmations}}
+              </p>
               <p>
                 <b>Unlocking Script</b>
               </p>
               <div *ngFor="let item of vin.items">
                 <div *ngIf="item.scriptSig">
                   <div class="unlocking-script">
-                    <p>{{ item.scriptSig.asm }}
+                    <a (click)="goToOutpoint(item.txid,'>', item.vout)">
+                      <ion-icon name="arrow-dropleft-circle"></ion-icon>
+                    </a>
+                    <p>{{ item.scriptSig.asm }}</p>
                   </div>
                 </div>
               </div>
@@ -69,7 +73,7 @@
 
     <ion-col col-12 col-md-6>
       <ion-list>
-        <ion-item *ngFor="let vout of tx.vout">
+        <ion-item *ngFor="let vout of tx.vout; let i = index" [ngClass]="{'item--state-highlight' : i === txIndex && txDirection === '>'}">
           <div>
             <div class="ellipsis">
               <p>
@@ -92,7 +96,12 @@
 
           <div item-end>
             {{ currency.getConvertedNumber(vout.value) | number:'1.0-8' }} {{ currency.currencySymbol }}
-            <span [hidden]="!vout.spentTxId">(S)</span>
+            <span [hidden]="!vout.spentTxId">
+              (S)
+              <a (click)="goToOutpoint(vout.spentTxId, '<', vout.spentIndex)" [hidden]="!expanded">
+                  <ion-icon name="arrow-dropright-circle"></ion-icon>
+              </a>
+            </span>
             <span [hidden]="vout.spentTxId">(U)</span>
           </div>
         </ion-item>

app/src/components/transaction/transaction.scss

@@ -41,6 +41,10 @@ transaction {
     border-bottom-right-radius: $transaction-item-boarder-radius;
   }
 
+  .item--state-highlight {
+    background-color: #8dc429;
+  }
+
   .list {
     margin-bottom: 5px;
   }

app/src/components/transaction/transaction.ts

@@ -19,6 +19,8 @@ export class TransactionComponent {
 
   public expanded: boolean = false;
   @Input() public tx: any = {};
+  @Input() public txDirection?: string;
+  @Input() public txIndex?: number;
 
   constructor(private navCtrl: NavController, public currency: CurrencyProvider) {
   }
@@ -37,6 +39,14 @@ export class TransactionComponent {
     });
   }
 
+  public goToOutpoint(txId: string, txDirection: string, txIndex: number): void {
+    this.navCtrl.push('outpoint', {
+        'txId': txId,
+        'txDirection': txDirection,
+        'txIndex': txIndex
+    });
+  }
+
   public goToAddress(addrStr: string): void {
     this.navCtrl.push('address', {
       'addrStr': addrStr
@@ -48,6 +58,7 @@ export class TransactionComponent {
   }
 
   public aggregateItems(items: Array<any>): Array<any> {
+
     if (!items) return [];
 
     let l: number = items.length;

app/src/pages/outpoint/outpoint.html

@@ -0,0 +1,62 @@
+<ion-header>
+    <head-nav [title]="'Transaction'"></head-nav>
+  </ion-header>
+  
+  
+  <ion-content padding>
+    <div *ngIf="loading">
+      <ion-spinner name="crescent"></ion-spinner>
+    </div>
+  
+    <div *ngIf="!loading" class="page-content">
+      <h1> 
+        <span [hidden]=" txIndex !== null && txDirection !== '<' ">Input</span>
+        <span [hidden]=" txIndex !== null && txDirection !== '>' ">Output</span>
+        Transaction | Index #{{ txIndex }}
+      </h1>
+      <p class="item-hash">
+        <b>Transaction Hash</b> {{ tx.txid }}
+      </p>
+      <br><br>
+      <h2>Summary</h2>
+  
+      <ion-list class="list--summary">
+        <ion-item>
+          Size
+          <ion-note item-end>
+            {{ tx.size }} (bytes)
+          </ion-note>
+        </ion-item>
+        <ion-item>
+          Fee Rate
+          <ion-note item-end>
+            {{ (tx.fees / tx.size) * 1E8 | number:'1.0-8' }} sats/byte
+          </ion-note>
+        </ion-item>
+        <ion-item>
+          Received Time
+          <ion-note item-end>
+            {{ tx.time * 1000 | date:'medium' }}
+          </ion-note>
+        </ion-item>
+        <ion-item>
+          Mined Time
+          <ion-note item-end>
+            {{ tx.blocktime * 1000 | date:'medium' }}
+          </ion-note>
+        </ion-item>
+        <ion-item>
+          Included in Block
+          <ion-note item-end>
+            <a (click)="goToBlock(tx.blockhash)">{{ tx.blockhash }}</a>
+          </ion-note>
+        </ion-item>
+      </ion-list>
+      <br>
+      <h2>Details</h2>
+  
+      <transaction [tx]="tx" [txIndex]="txIndex" [txDirection]="txDirection"></transaction>
+    </div>
+  
+  </ion-content>
+  

app/src/pages/outpoint/outpoint.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { OutpointPage } from './outpoint';
+import { TransactionComponentModule } from '../../components/transaction/transaction.module';
+import { HeadNavComponentModule } from '../../components/head-nav/head-nav.module';
+
+@NgModule({
+  declarations: [
+    OutpointPage
+  ],
+  imports: [
+    IonicPageModule.forChild(OutpointPage),
+    TransactionComponentModule,
+    HeadNavComponentModule
+  ],
+  exports: [
+    OutpointPage
+  ]
+})
+export class OutpointPageModule {}

app/src/pages/outpoint/outpoint.scss

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

app/src/pages/outpoint/outpoint.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { Http } from '@angular/http';
+import { ApiProvider } from '../../providers/api/api';
+
+/**
+ * Generated class for the InputOutputPage page.
+ *
+ * See http://ionicframework.com/docs/components/#navigation for more info
+ * on Ionic pages and navigation.
+ */
+@IonicPage({
+  name: 'outpoint',
+  segment: 'tx/:txId/:txDirection/:txIndex'
+})
+@Component({
+  selector: 'page-outpoint',
+  templateUrl: 'outpoint.html'
+})
+export class OutpointPage {
+
+  public loading: boolean = true;
+  private txId: string;
+  public txIndex: number;
+  public txDirection: string;
+  public tx: any = {};
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, private api: ApiProvider) {
+    this.txId = navParams.get('txId');
+    this.txIndex = Number(navParams.get('txIndex'));
+    this.txDirection = navParams.get('txDirection');
+  }
+
+  public ionViewDidLoad(): void {
+    this.http.get(this.api.apiPrefix + 'tx/' + this.txId).subscribe(
+      (data) => {
+        this.tx = JSON.parse(data['_body']);
+        this.loading = false;
+      },
+      (err) => {
+        console.log('err is', err);
+        this.loading = false;
+      }
+    );
+  }
+
+  public goToBlock(blockHash: string): void {
+    this.navCtrl.push('block-detail', {
+      'blockHash': blockHash
+    });
+  }
+
+}