Moved apiPrefix into api provider; put transaction list into ion-grid

app/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { SplashScreen } from '@ionic-native/splash-screen';
 import { InsightApp } from './app.component';
 import { PagesModule, BlocksPage, BroadcastTxPage, NodeStatusPage, VerifyMessagePage } from '../pages';
 import { BlocksService, StorageService } from '../services';
+import { ApiProvider } from '../providers/api/api';
 
 @NgModule({
   declarations: [
@@ -31,7 +32,8 @@ import { BlocksService, StorageService } from '../services';
     SplashScreen,
     StorageService,
     BlocksService,
-    {provide: ErrorHandler, useClass: IonicErrorHandler}
+    {provide: ErrorHandler, useClass: IonicErrorHandler},
+    ApiProvider
   ]
 })
 

app/src/components/transaction-list/transaction-list.html

@@ -1,5 +1,7 @@
-<div>
+<ion-grid>
-  <div *ngFor="let tx of transactions.txs" style="border: 1px solid purple">
+  <ion-row *ngFor="let tx of transactions.txs">
-    <transaction [tx]="tx"></transaction>
+    <ion-col col-12>
-  </div>
+      <transaction [tx]="tx"></transaction>
-</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>

app/src/components/transaction-list/transaction-list.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { Input } from '@angular/core';
 import { Http } from '@angular/http';
+import { ApiProvider } from '../../providers/api/api';
 
 /**
  * Generated class for the TransactionListComponent component.
@@ -19,13 +20,11 @@ export class TransactionListComponent {
   @Input() public queryValue: string;
   public transactions: any = [];
 
-  constructor(private http: Http) {
+  constructor(private http: Http, private api: ApiProvider) {
   }
 
   private ngOnInit(): void {
-    let apiPrefix: string = 'http://localhost:3001/insight-api/';
+    let url: string = this.api.apiPrefix + 'txs?' + this.queryType + '=' + this.queryValue;
-
-    let url: string = apiPrefix + 'txs?' + this.queryType + '=' + this.queryValue;
 
     this.http.get(url).subscribe(
       (data) => {

app/src/components/transaction/transaction.html

@@ -1,46 +1,57 @@
-<div>
+<ion-grid>
-  <p><a (click)="goToTx(tx.txid)">{{ tx.txid }}</a></p>
+  <ion-row>
-  <div [hidden]="!tx.firstSeenTs">
+    <ion-col col-8>
-    <span translate>first seen at</span>
+      <span><a (click)="goToTx(tx.txid)">{{ tx.txid }}</a></span>
-    <time>{{tx.firstSeenTs * 1000 | date:'medium'}}</time>
+    </ion-col>
-  </div>
+    <ion-col col-4 text-right>
-  <div [hidden]="!tx.blocktime && tx.firstSeenTs">
+      <div [hidden]="!tx.firstSeenTs">
-    <span translate>mined</span>
+        <span translate>first seen at</span>
-    <time>{{tx.time * 1000 | date:'medium'}}</time>
+        <time>{{tx.firstSeenTs * 1000 | date:'medium'}}</time>
-  </div>
-
-  <div [hidden]="!tx.isCoinBase">
-    <div *ngFor="let vin of tx.vin">
-      <div>
-        <span translate>No Inputs (Newly Generated Coins)</span>
       </div>
-    </div>
+      <div [hidden]="!tx.blocktime && tx.firstSeenTs">
-
+        <span translate>mined</span>
-    <div>
+        <time>{{tx.time * 1000 | date:'medium'}}</time>
-      &gt;
-    </div>
-
-    <div *ngFor="let vout of tx.vout">
-      <div>
-        <p><a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a> {{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span></p>
       </div>
-    </div>
+    </ion-col>
-  </div>
+  </ion-row>
 
-  <div [hidden]="tx.isCoinBase">
+  <ion-row>
-    <div *ngFor="let vin of tx.vin">
+    <ion-col col-5>
-      <div><a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a></div>
+      <div [hidden]="!tx.isCoinBase">
-      <p>{{ vin.value + ' BTC' }}</p>
+        <div *ngFor="let vin of tx.vin">
-    </div>
+          <div>
-
+            <span translate>No Inputs (Newly Generated Coins)</span>
-    <div>
+          </div>
-      &gt;
+        </div>
-    </div>
-
-    <div *ngFor="let vout of tx.vout">
-      <div>
-        <p><a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a> {{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span></p>
       </div>
-    </div>
+
-  </div>
+      <div [hidden]="tx.isCoinBase">
-</div>
+        <div *ngFor="let vin of tx.vin">
+          <div><a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a></div>
+          <p>{{ vin.value + ' BTC' }}</p>
+        </div>
+      </div>
+    </ion-col>
+    <ion-col col-2>
+      <div>
+        &gt;
+      </div>
+    </ion-col>
+    <ion-col col-5>
+      <div *ngFor="let vout of tx.vout">
+        <div>
+          <p><a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a> {{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span></p>
+        </div>
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col col-6>
+      Fee
+    </ion-col>
+    <ion-col col-6>
+      Confirmations
+    </ion-col>
+  </ion-row>
+</ion-grid>

app/src/pages/address/address.html

@@ -49,5 +49,5 @@
     </ion-row>
   </ion-grid>
 
-    <transaction-list [queryType]="'address'" [queryValue]="addrStr"></transaction-list>
+  <transaction-list [queryType]="'address'" [queryValue]="addrStr"></transaction-list>
 </ion-content>

app/src/pages/address/address.ts

@@ -1,6 +1,7 @@
 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 AddressPage page.
@@ -22,14 +23,12 @@ export class AddressPage {
   private addrStr: string;
   public address: any = {};
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {
+  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, private api: ApiProvider) {
     this.addrStr = navParams.get('addrStr');
   }
 
   public ionViewDidLoad(): void {
-    let apiPrefix: string = 'http://localhost:3001/insight-api/';
+    this.http.get(this.api.apiPrefix + 'addr/' + this.addrStr + '/?noTxList=1').subscribe(
-
-    this.http.get(apiPrefix + 'addr/' + this.addrStr + '/?noTxList=1').subscribe(
       (data) => {
         this.address = JSON.parse(data['_body']);
         this.loading = false;

app/src/pages/block-detail/block-detail.ts

@@ -1,6 +1,7 @@
 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 BlockDetailPage page.
@@ -24,12 +25,10 @@ export class BlockDetailPage {
     tx: []
   };
 
-  constructor(public navCtrl: NavController, private http: Http, public navParams: NavParams) {
+  constructor(public navCtrl: NavController, private http: Http, public navParams: NavParams, private api: ApiProvider) {
     this.blockHash = navParams.get('blockHash');
 
-    let apiPrefix: string = 'http://localhost:3001/insight-api/';
+    this.http.get(this.api.apiPrefix + 'block/' + this.blockHash).subscribe(
-
-    this.http.get(apiPrefix + 'block/' + this.blockHash).subscribe(
       (data) => {
         this.block = JSON.parse(data['_body']);
         this.loading = false;

app/src/pages/blocksPage/blocksPage.ts

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
 import { Block } from '../../models';
 import { BlocksService } from '../../services';
 import { Http } from '@angular/http';
+import { ApiProvider } from '../../providers/api/api';
 
 @Component({
   templateUrl: './blocksPage.html'
@@ -17,7 +18,7 @@ export class BlocksPage {
   public q: string;
   public badQuery: boolean = false;
 
-  constructor(private navCtrl: NavController, private http: Http, private blocksService: BlocksService) {
+  constructor(private navCtrl: NavController, private http: Http, private blocksService: BlocksService, private api: ApiProvider) {
     this.title = 'Blocks';
     this.blocks = blocksService.latestBlocks;
     // this.blocks.subscribe((blocks) => {
@@ -27,8 +28,8 @@ export class BlocksPage {
   }
 
   public search(): void {
-    console.log('q is', this.q);
+    let apiPrefix: string = this.api.apiPrefix;
-    let apiPrefix: string = 'http://localhost:3001/insight-api/';
+
     this.http.get(apiPrefix + 'block/' + this.q).subscribe(
       (data) => {
         this.resetSearch();

app/src/pages/transaction/transaction.ts

@@ -1,6 +1,7 @@
 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 TransactionPage page.
@@ -22,14 +23,12 @@ export class TransactionPage {
   private txId: string;
   public tx: any = {};
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {
+  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, private api: ApiProvider) {
     this.txId = navParams.get('txId');
   }
 
   public ionViewDidLoad(): void {
-    let apiPrefix: string = 'http://localhost:3001/insight-api/';
+    this.http.get(this.api.apiPrefix + 'tx/' + this.txId).subscribe(
-
-    this.http.get(apiPrefix + 'tx/' + this.txId).subscribe(
       (data) => {
         this.tx = JSON.parse(data['_body']);
         console.log('tx', this.tx);

app/src/providers/api/api.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import 'rxjs/add/operator/map';
+
+/*
+  Generated class for the ApiProvider provider.
+
+  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
+  for more info on providers and Angular DI.
+*/
+@Injectable()
+export class ApiProvider {
+
+  public apiPrefix: string = 'http://localhost:3001/insight-api/';
+
+  constructor(public http: Http) {
+  }
+
+}