Merge pull request #793 from SonicWizard/ionic

Update CurrencyProvider with USD. Enable denomination changes on all the things.

app/src/app/app.module.ts

@@ -8,6 +8,7 @@ import { InsightApp } from './app.component';
 import { PagesModule, BlocksPage, BroadcastTxPage, NodeStatusPage, VerifyMessagePage } from '../pages';
 import { BlocksService, StorageService } from '../services';
 import { ApiProvider } from '../providers/api/api';
+import { CurrencyProvider } from '../providers/currency/currency';
 
 @NgModule({
   declarations: [
@@ -33,7 +34,8 @@ import { ApiProvider } from '../providers/api/api';
     StorageService,
     BlocksService,
     {provide: ErrorHandler, useClass: IonicErrorHandler},
-    ApiProvider
+    ApiProvider,
+    CurrencyProvider
   ]
 })
 

app/src/app/app.scss

@@ -15,6 +15,16 @@
   white-space: nowrap;
 }
 
+.summary ion-label {
+  color: #333;
+  font-weight: bold;
+}
+
+.summary ion-item {
+  color: #999;
+  font-size: 1.4rem;
+}
+
 // Shared Sass variables, which can be used to adjust Ionic's
 // default Sass variables, belong in "theme/variables.scss".
 //

app/src/components/head-nav/head-nav.html

@@ -4,6 +4,9 @@
   </button>
   <ion-title>{{title}}</ion-title>
   <ion-buttons end>
+    <button ion-button (click)="changeCurrency()">
+      <ion-icon name="logo-bitcoin" *ngIf="currency.currencySymbol !== 'USD'"></ion-icon><ion-icon name="logo-usd" *ngIf="currency.currencySymbol === 'USD'"></ion-icon>&nbsp;{{ currency.currencySymbol }}
+    </button>
     <button ion-button icon-only>
       <ion-icon name="search"></ion-icon>
     </button>

app/src/components/head-nav/head-nav.module.ts

@@ -4,10 +4,10 @@ import { HeadNavComponent } from './head-nav';
 
 @NgModule({
   declarations: [
-    HeadNavComponent,
+    HeadNavComponent
   ],
   imports: [
-    IonicModule,
+    IonicModule
   ],
   exports: [
     HeadNavComponent

app/src/components/head-nav/head-nav.ts

@@ -3,6 +3,8 @@ import { Input } from '@angular/core';
 import { NavController } from 'ionic-angular';
 import { Http } from '@angular/http';
 import { ApiProvider } from '../../providers/api/api';
+import { CurrencyProvider } from '../../providers/currency/currency';
+import { ActionSheetController } from 'ionic-angular';
 
 /**
  * Generated class for the HeadNavComponent component.
@@ -21,19 +23,14 @@ export class HeadNavComponent {
   public q: string;
   public badQuery: boolean = false;
 
-  constructor(private navCtrl: NavController, private http: Http, private api: ApiProvider) {
+  constructor(private navCtrl: NavController, private http: Http, private api: ApiProvider, public currency: CurrencyProvider, public actionSheetCtrl: ActionSheetController) {
-  }
-
-  private resetSearch(): void {
-    this.q = '';
-    this.loading = false;
   }
 
   public search(): void {
     let apiPrefix: string = this.api.apiPrefix;
 
     this.http.get(apiPrefix + 'block/' + this.q).subscribe(
-      function (data: any) {
+      function (data: any): void {
         this.resetSearch();
         console.log('block', data);
         let parsedData: any = JSON.parse(data._body);
@@ -43,7 +40,7 @@ export class HeadNavComponent {
       }.bind(this),
       () => {
         this.http.get(apiPrefix + 'tx/' + this.q).subscribe(
-          function (data: any) {
+          function (data: any): void {
             this.resetSearch();
             console.log('tx', data);
             let parsedData: any = JSON.parse(data._body);
@@ -53,7 +50,7 @@ export class HeadNavComponent {
           }.bind(this),
           () => {
             this.http.get(apiPrefix + 'addr/' + this.q).subscribe(
-              function (data: any) {
+              function (data: any): void {
                 this.resetSearch();
                 console.log('addr', data);
                 let parsedData: any = JSON.parse(data._body);
@@ -96,6 +93,47 @@ export class HeadNavComponent {
       2000
     );
   };
+
+  private resetSearch(): void {
+    this.q = '';
+    this.loading = false;
+  }
   /* tslint:enable:no-unused-variable */
 
+  public changeCurrency(): void {
+    let actionSheet: any = this.actionSheetCtrl.create({
+      title: 'Change Denomination',
+      buttons: [
+        {
+          text: 'USD',
+          handler: () => {
+            this.currency.setCurrency('USD');
+          }
+        },
+        {
+          text: 'BTC',
+          handler: () => {
+            this.currency.setCurrency('BTC');
+          }
+        },
+        {
+          text: 'mBTC',
+          handler: () => {
+            this.currency.setCurrency('mBTC');
+          }
+        },
+        {
+          text: 'bits',
+          handler: () => {
+            this.currency.setCurrency('bits');
+          }
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel'
+        }
+      ]
+    });
+    actionSheet.present();
+  }
 }

app/src/components/transaction/transaction.html

@@ -29,9 +29,9 @@
       <ion-list [hidden]="tx.isCoinBase">
         <ion-item *ngFor="let vin of tx.vin">
           <div>
-            <p><a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a> <span item-end>{{ vin.value + ' BTC' }}</span></p>
+            <p><a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a> <span item-end>{{ currency.getConversion(vin.value) }}</span></p>
             <div [hidden]="!expanded">
-              <p><b>Confirmations</b> {{vin.confirmations}}</p>
+              <p *ngIf="vin.confirmations"><b>Confirmations</b> {{vin.confirmations}}</p>
               <p><b>scriptSig</b></p>
               <div *ngIf="vin.scriptSig">
                 <div *ngFor="let item of vin.scriptSig.asm | split:' '" class="ellipsis">
@@ -44,10 +44,10 @@
       </ion-list>
 
     </ion-col>
-    <ion-col col-2 text-center>
+    <ion-col col-1 text-center>
       <ion-icon name="arrow-forward"></ion-icon>
     </ion-col>
-    <ion-col col-5>
+    <ion-col col-6>
       <ion-list>
         <ion-item *ngFor="let vout of tx.vout">
           <div>
@@ -62,7 +62,7 @@
           </div>
 
           <div item-end>
-            {{ vout.value + ' BTC' }}
+            {{ currency.getConversion(vout.value) }}
             <span [hidden]="!vout.spentTxId">(S)</span>
             <span [hidden]="vout.spentTxId">(U)</span>
           </div>
@@ -73,11 +73,11 @@
 
   <ion-row>
     <ion-col col-6>
-      <span [hidden]="tx.isCoinBase">Fee {{ tx.fees + ' BTC' }}</span>
+      <span [hidden]="tx.isCoinBase">Fee {{ currency.getConversion(tx.fees) }}</span>
     </ion-col>
     <ion-col col-6 text-right>
       {{ tx.confirmations }} Confirmations
-      <span class="">{{ tx.valueOut + ' BTC' }}</span>
+      <span class="">{{ currency.getConversion(tx.valueOut) }}</span>
     </ion-col>
   </ion-row>
 </ion-grid>

app/src/components/transaction/transaction.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { Input } from '@angular/core';
 import { NavController } from 'ionic-angular';
+import { CurrencyProvider } from '../../providers/currency/currency';
 
 /**
  * Generated class for the TransactionComponent component.
@@ -17,7 +18,7 @@ export class TransactionComponent {
   public expanded: boolean = false;
   @Input() public tx: any = {};
 
-  constructor(private navCtrl: NavController) {
+  constructor(private navCtrl: NavController, public currency: CurrencyProvider) {
   }
 
   public getAddress(vout: any): string {

app/src/pages/address/address.html

@@ -5,27 +5,27 @@
 <ion-content padding>
   <h1>Address</h1>
   <p class="ellipsis"><b>Address</b> {{ address.addrStr }}</p>
-  <p>{{ address.balance }} BTC</p>
+  <p>{{ currency.getConversion(address.balance) }}</p>
 
   <h2>Summary</h2>
 
-  <ion-list>
+  <ion-list class="summary">
     <ion-item>
       Total Received
       <span item-end>
-        {{ address.totalReceived }} BTC
+        {{ currency.getConversion(address.totalReceived) }}
       </span>
     </ion-item>
     <ion-item>
       Total Sent
       <span item-end>
-        {{ address.totalSent }} BTC
+        {{ currency.getConversion(address.totalSent) }}
       </span>
     </ion-item>
     <ion-item>
       Final Balance
       <span item-end>
-        {{ address.balance }} BTC
+        {{ currency.getConversion(address.balance) }}
       </span>
     </ion-item>
     <ion-item>

app/src/pages/address/address.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { Http } from '@angular/http';
 import { ApiProvider } from '../../providers/api/api';
+import { CurrencyProvider } from '../../providers/currency/currency';
 
 /**
  * Generated class for the AddressPage page.
@@ -23,7 +24,7 @@ export class AddressPage {
   private addrStr: string;
   public address: any = {};
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, private api: ApiProvider) {
+  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, private api: ApiProvider, public currency: CurrencyProvider) {
     this.addrStr = navParams.get('addrStr');
   }
 

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

@@ -8,9 +8,9 @@
 
   <h2>Summary</h2>
 
-  <ion-list *ngIf="!loading">
+  <ion-list *ngIf="!loading" class="summary">
     <ion-item>
-        Number of Transactions
+      Number of Transactions
       <span item-end>
         {{ block.tx.length }}
       </span>
@@ -24,7 +24,7 @@
     <ion-item>
       Block Reward
       <span item-end>
-        {{ block.reward + ' BTC' }}
+        {{ currency.getConversion(block.reward) }}
       </span>
     </ion-item>
     <ion-item>

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

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { Http } from '@angular/http';
 import { ApiProvider } from '../../providers/api/api';
+import { CurrencyProvider } from '../../providers/currency/currency';
 
 /**
  * Generated class for the BlockDetailPage page.
@@ -25,9 +26,11 @@ export class BlockDetailPage {
     tx: []
   };
 
-  constructor(public navCtrl: NavController, private http: Http, public navParams: NavParams, private api: ApiProvider) {
+  constructor(public navCtrl: NavController, private http: Http, public navParams: NavParams, private api: ApiProvider, public currency: CurrencyProvider) {
     this.blockHash = navParams.get('blockHash');
+  }
 
+  public ionViewDidLoad(): void {
     this.http.get(this.api.apiPrefix + 'block/' + this.blockHash).subscribe(
       (data) => {
         this.block = JSON.parse(data['_body']);
@@ -40,10 +43,6 @@ export class BlockDetailPage {
     );
   }
 
-  public ionViewWillLeave(): void {
-    this.loading = true;
-  }
-
   public goToPreviousBlock(): void {
     this.navCtrl.push('block-detail', {
       'blockHash': this.block.previousblockhash

app/src/pages/transaction/transaction.html

@@ -8,7 +8,7 @@
 
   <h2>Summary</h2>
 
-  <ion-list>
+  <ion-list class="summary">
     <ion-item>
       Size
       <span item-end>

app/src/pipes/split/split.ts

@@ -15,7 +15,6 @@ export class SplitPipe implements PipeTransform {
    */
   public transform(value: string, delimiter: string): Array<string> {
     let array: Array<string> = value.split(delimiter);
-    console.log('split is', array);
     return array;
   }
 }

app/src/providers/currency/currency.spec.ts

@@ -2,9 +2,10 @@
 import { TestBed, ComponentFixture, inject } from '@angular/core/testing';
 import { HttpModule } from '@angular/http';
 import { CurrencyProvider } from './currency';
+import { ApiProvider } from '../api/api';
 
 describe('CurrencyProvider', () => {
-  let currency;
+  let currency: CurrencyProvider;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -12,6 +13,7 @@ describe('CurrencyProvider', () => {
         HttpModule
       ],
       providers: [
+        ApiProvider,
         CurrencyProvider
       ]
     });
@@ -47,7 +49,7 @@ describe('CurrencyProvider', () => {
   });
 
   it('rounds float using specified number of decimal places', () => {
-    let aFloat = 4.32943;
+    let aFloat: number = 4.32943;
 
     expect(currency.roundFloat(aFloat, 2)).toBe(4.33);
     expect(currency.roundFloat(aFloat, 3)).toBe(4.329);
@@ -66,7 +68,7 @@ describe('CurrencyProvider', () => {
   });
 
   it('gets proper conversion after changing currency', () => {
-    let aFloat = 12345.09876543;
+    let aFloat: number = 12345.09876543;
     expect(currency.getConversion(aFloat)).toBe('12345.09876543 BTC');
 
     currency.setCurrency('mBTC');

app/src/providers/currency/currency.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
+import { ApiProvider } from '../../providers/api/api';
 import 'rxjs/add/operator/map';
 
 /*
@@ -11,16 +12,18 @@ import 'rxjs/add/operator/map';
 @Injectable()
 export class CurrencyProvider {
 
-  private defaultCurrency: string;
+  public defaultCurrency: string;
-  private currencySymbol: string;
+  public currencySymbol: string;
-  private factor: number = 1;
+  public factor: number = 1;
+  private bitstamp: number;
+  private loading: boolean;
 
-  constructor(public http: Http) {
+  constructor(public http: Http, private api: ApiProvider) {
     this.defaultCurrency = 'BTC';
     this.currencySymbol = this.defaultCurrency;
   }
 
-  private roundFloat(aFloat: number, decimalPlaces: number): number {
+  public roundFloat(aFloat: number, decimalPlaces: number): number {
     return Math.round(aFloat * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces);
   }
 
@@ -50,12 +53,17 @@ export class CurrencyProvider {
     localStorage.setItem('insight-currency', currency);
 
     if (currency === 'USD') {
-      // TODO Replace this with call
+      this.http.get(this.api.apiPrefix + 'currency').subscribe(
-      /*
+        (data) => {
-      Currency.get({}, function(res) {
+          let currencyParsed: any = JSON.parse(data['_body']);
-        $rootScope.currency.factor = $rootScope.currency.bitstamp = res.data.bitstamp;
+          this.factor = this.bitstamp = currencyParsed.data.bitstamp;
-      });
+          this.loading = false;
-       */
+        },
+        (err) => {
+          console.log('err is', err);
+          this.loading = false;
+        }
+      );
     } else if (currency === 'mBTC') {
       this.factor = 1000;
     } else if (currency === 'bits') {

app/src/test.ts

@@ -17,7 +17,9 @@ import { ConfigMock, PlatformMock } from './mocks';
 import { BlocksServiceMock } from './services/mocks';
 import { BlocksService } from './services';
 import { ApiProvider } from './providers/api/api';
+import { CurrencyProvider } from './providers/currency/currency';
 import { HeadNavComponentModule } from './components/head-nav/head-nav.module';
+import { ActionSheetController } from 'ionic-angular';
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare var __karma__: any;
@@ -63,7 +65,9 @@ export class TestUtils {
         {provide: Platform, useClass: PlatformMock},
         {provide: Config, useClass: ConfigMock},
         {provide: BlocksService, useClass: BlocksServiceMock},
-        ApiProvider
+        ApiProvider,
+        CurrencyProvider,
+        ActionSheetController
       ],
       imports: [
         FormsModule,