Fixed Problems

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); let i = index" [ngClass]="[i === dx && dr === '<' ? 'itemHighlight' : 'itemNoLight']">
+        <ion-item *ngFor="let vin of aggregateItems(tx.vin); let i = index" [ngClass]="[i === txIndex && txDirection === '<' ? 'item--state-highlight' : 'item--state-nolight']">
           <div>
             <div class="ellipsis">
               <p>
@@ -48,18 +48,12 @@
               </p>
               <div *ngFor="let item of vin.items">
                 <div *ngIf="item.scriptSig">
-
-                  <!-- <div *ngFor="let scriptSig of item.scriptSig.asm"> -->
-
                     <div class="unlocking-script">
-                        <a (click)="goToOutput(item.txid, item.vout)">
+                        <a (click)="goToOutpoint(item.txid,'>', item.vout)">
                             <ion-icon name="arrow-dropleft-circle"></ion-icon>
                           </a>
                       <p>{{ item.scriptSig.asm }}</p>
                     </div>
-
-                  <!-- </div> -->
-                  
                 </div>
               </div>
             </div>
@@ -79,7 +73,7 @@
 
     <ion-col col-12 col-md-6>
       <ion-list>
-        <ion-item *ngFor="let vout of tx.vout; let i = index" [ngClass]="[i === dx && dr === '>' ? 'itemHighlight' : 'itemNoLight']">
+        <ion-item *ngFor="let vout of tx.vout; let i = index" [ngClass]="[i === txIndex && txDirection === '>' ? 'item--state-highlight' : 'item--state-nolight']">
           <div>
             <div class="ellipsis">
               <p>
@@ -104,7 +98,7 @@
             {{ currency.getConvertedNumber(vout.value) | number:'1.0-8' }} {{ currency.currencySymbol }}
             <span [hidden]="!vout.spentTxId">
               (S)
-              <a (click)="goToInput(vout.spentTxId, vout.spentIndex)" [hidden]="!expanded">
+              <a (click)="goToOutpoint(vout.spentTxId, '<', vout.spentIndex)" [hidden]="!expanded">
                   <ion-icon name="arrow-dropright-circle"></ion-icon>
               </a>
             </span>

app/src/components/transaction/transaction.scss

@@ -9,8 +9,6 @@ transaction {
 
     ion-row {
       border: 1px solid #f3f3f3;
-      margin-top: 10px;
-      margin-bottom: 10px;
 
       &.small {
         font-size: 1.1rem;
@@ -26,35 +24,11 @@ transaction {
 
   ion-icon {
     color: rgba(0, 0, 0, 0.25);
-    margin-right: 5px;
   }
 
-// New Stuff
-
-.shiftDown {
-    padding-top: 1.2em;
-}
-
-.ellipsis {
-  margin-bottom: .7rem;
-  margin-top: 8px;
-}
-
-.unlocking-script {
-  padding-top: .7rem;
-  max-width: 90%;
-}
-
-.locking-script {
-  padding-top: .7rem;
-}
-
-//end
-
   .item,
   .item p {
     font-size: 1.4rem;
-    font-weight: bold;
   }
 
   $transaction-item-boarder-radius: 3px;
@@ -67,10 +41,10 @@ transaction {
     border-bottom-right-radius: $transaction-item-boarder-radius;
   }
 
-  .itemHighlight {
+  .item--state-highlight {
     background-color: #8dc429;
   }
-  .itemNoLight {
+  .item--state-nolight {
     background-color: default;
   }
 

app/src/components/transaction/transaction.ts

@@ -19,8 +19,8 @@ export class TransactionComponent {
 
   public expanded: boolean = false;
   @Input() public tx: any = {};
-  @Input() public dr?: string;
-  @Input() public dx?: number;
+  @Input() public txDirection?: string;
+  @Input() public txIndex?: number;
 
   constructor(private navCtrl: NavController, public currency: CurrencyProvider) {
   }
@@ -39,20 +39,23 @@ export class TransactionComponent {
     });
   }
 
-  public goToInput(txId: string, dxNm: number): void {
-    this.navCtrl.push('input-output', {
-      'txId': txId,
-      'dir': '<',
-      'dxNm': dxNm
-    });
-  }
-
-  public goToOutput(txId: string, dxNm: number): void {
-    this.navCtrl.push('input-output', {
-      'txId': txId,
-      'dir': '>',
-      'dxNm': dxNm
-    });
+  public goToOutpoint(txId: string, txDirection: string, txIndex: number): void {
+    // output page
+    if (txDirection === '>') {
+      this.navCtrl.push('outpoint', {
+        'txId': txId,
+        'txDirection': '>',
+        'txIndex': txIndex
+      }); 
+    }
+    // input page
+    if (txDirection === '<') {
+      this.navCtrl.push('outpoint', {
+        'txId': txId,
+        'txDirection': '<',
+        'txIndex': txIndex
+      });
+    }
   }
 
   public goToAddress(addrStr: string): void {

app/src/pages/input-output/input-output.scss

@@ -1,3 +0,0 @@
-page-input-output {
-
-}

app/src/pages/outpoint/outpoint.html

@@ -9,8 +9,11 @@
     </div>
   
     <div *ngIf="!loading" class="page-content">
-      <h1 [hidden]=" dxNm !== null && dir !== '>' ">Output Transaction | Index #{{ dxNm }}</h1>
-      <h1 [hidden]=" dxNm !== null && dir !== '<' ">Input Transaction | Index #{{ dxNm }}</h1>
+      <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>
@@ -52,7 +55,7 @@
       <br>
       <h2>Details</h2>
   
-      <transaction [tx]="tx" [dx]="dxNm" [dr]="dir"></transaction>
+      <transaction [tx]="tx" [txIndex]="txIndex" [txDirection]="txDirection"></transaction>
     </div>
   
   </ion-content>

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

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

app/src/pages/outpoint/outpoint.scss

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

app/src/pages/outpoint/outpoint.ts

@@ -10,25 +10,25 @@ import { ApiProvider } from '../../providers/api/api';
  * on Ionic pages and navigation.
  */
 @IonicPage({
-  name: 'input-output',
-  segment: 'tx/:txId/:dir/:dxNm'
+  name: 'outpoint',
+  segment: 'tx/:txId/:txDirection/:txIndex'
 })
 @Component({
-  selector: 'page-input-output',
-  templateUrl: 'input-output.html'
+  selector: 'page-outpoint',
+  templateUrl: 'outpoint.html'
 })
-export class InputOutputPage {
+export class OutpointPage {
 
   public loading: boolean = true;
   private txId: string;
-  public dxNm: number;
-  public dir: 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.dxNm = Number(navParams.get('dxNm'));
-    this.dir = navParams.get('dir');
+    this.txIndex = Number(navParams.get('txIndex'));
+    this.txDirection = navParams.get('txDirection');
   }
 
   public ionViewDidLoad(): void {