wip add tx details - fix pipes

src/app/app.module.ts

@@ -42,6 +42,7 @@ import { AddressbookPage } from '../pages/addressbook/addressbook';
 import { AddressbookAddPage } from '../pages/addressbook/add/add';
 import { AddressbookViewPage } from '../pages/addressbook/view/view';
 import { WalletDetailsPage } from '../pages/wallet-details/wallet-details';
+import { TxDetailsPage } from '../pages/tx-details/tx-details';
 
 /* Tabs */
 import { HomePage } from '../pages/home/home';
@@ -68,6 +69,7 @@ import { ChooseFeeLevelPage } from '../pages/choose-fee-level/choose-fee-level';
 import { CustomAmountPage } from '../pages/receive/custom-amount/custom-amount';
 
 /* Pipes */
+import { ToUnitPipe } from '../pipes/toUnit';
 import { ToFiatPipe } from '../pipes/toFiat';
 
 /* Providers */
@@ -144,6 +146,7 @@ let pages: any = [
   TermsOfUsePage,
   TourPage,
   TabsPage,
+  TxDetailsPage,
   WalletDetailsPage,
 ];
 
@@ -199,6 +202,7 @@ let providers: any = [
 ];
 
 let pipes = [
+  ToUnitPipe,
   ToFiatPipe,
 ];
 

src/assets/img/tx-action/icon-sent.svg

@@ -18,3 +18,4 @@
             </g>
         </g>
     </g>
+</svg>

src/pages/tx-details/tx-details.html

@@ -0,0 +1,56 @@
+<ion-header no-border>
+  <ion-navbar>
+    <ion-title>{{title | translate}}</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item>
+      <div *ngIf="tx.action == 'received'" class="action">
+        <img src="assets/img/tx-action/icon-received.svg" width="40">
+        <span translate>Received</span>
+      </div>
+      <div *ngIf="tx.action == 'sent'" class="action">
+        <img src="assets/img/tx-action/icon-sent.svg" width="40">
+        <span translate>Sent</span>
+      </div>
+      <div *ngIf="tx.action == 'moved'" class="action">
+        <img src="assets/img/tx-action/icon-moved.svg" width="40">
+        <span translate>Moved</span>
+      </div>
+
+      <div class="amount-str">{{amountStr | toUnit : tx.amount}}</div>
+      <div class="amount-alt-str">{{fiatAmountStr | toFiat : tx.amount}}</div>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar item-start>
+        <img src="assets/img/icon-wallet.svg" class="icon-wallet">
+      </ion-avatar>
+      <h2 translate>To</h2>
+      <p>{{destinationAddress || '...'}}</p>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>{{'Date' | translate}}</ion-label>
+      <ion-note item-end>
+        {{tx.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}
+      </ion-note>
+    </ion-item>
+
+    <button ion-item (click)="addMemo()">
+      <ion-label>{{'Memo' | translate}}</ion-label>
+      <span>{{tx.message}}</span>
+    </button>
+
+    <ion-item>
+      <ion-label>{{'Confirmations' | translate}}</ion-label>
+      <ion-note item-end>
+        {{tx.Confirmations || 'Unconfirmed' | translate}}
+      </ion-note>
+    </ion-item>
+  </ion-list>
+
+  <button ion-button block clear (click)="viewOnBlockchain()" translate>View on blockchain</button>
+</ion-content>

src/pages/tx-details/tx-details.scss

@@ -0,0 +1,24 @@
+page-tx-details {
+  .action {
+    display: flex;
+    height: 4rem;
+    align-items: center;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+  img {
+    margin-right: 15px;
+    &.icon-wallet {
+      background-color: color($colors, primary);
+    }
+  }
+  .amount-str {
+    font-size: 30px;
+    margin-bottom: .5rem;
+  }
+  .amount-alt-str {
+    font-size: 16px;
+    margin-left: 2px;
+    margin-bottom: 1.5rem;
+  }
+}

src/pages/tx-details/tx-details.ts

@@ -0,0 +1,29 @@
+import { Component } from "@angular/core";
+import { NavParams } from 'ionic-angular';
+import { TxFormatProvider } from '../../providers/tx-format/tx-format';
+
+@Component({
+  selector: 'page-tx-details',
+  templateUrl: 'tx-details.html'
+})
+export class TxDetailsPage {
+  public title: string;
+  public tx: any;
+  public fiatAmountStr: string;
+  
+  constructor(
+    private navParams: NavParams,
+    private txFormatProvider: TxFormatProvider,
+  ) {
+    this.tx = this.navParams.data.tx;
+    this.fiatAmountStr = this.txFormatProvider.formatAlternativeStr('btc', this.tx.amount);
+  }
+
+  addMemo() {
+    return;
+  }
+
+  viewOnBlockchain() {
+    return;
+  }
+}

src/pages/wallet-details/wallet-details.html

@@ -7,11 +7,11 @@
 <ion-content>
   <div class="balance-header">
     <div class="balance-str">{{wallet.status.availableBalanceStr}}</div>
-    <div class="balance-alt-str">{{alternativeBalanceStr || '...'}}</div>
+    <div class="balance-alt-str">{{alternativeBalanceStr | toFiat : wallet.status.totalBalanceSat}}</div>
   </div>
 
   <ion-list>
-    <button ion-item *ngFor="let tx of wallet.completeHistory" (click)="goToTxDetails(tx.txid)">
+    <button ion-item *ngFor="let tx of wallet.completeHistory" (click)="goToTxDetails(tx)">
       <ion-icon item-start>
         <img src="assets/img/tx-action/icon-received.svg" *ngIf="tx.action == 'received'" width="40">
         <img src="assets/img/tx-action/icon-sent.svg" *ngIf="tx.action == 'sent'" width="40">
@@ -19,7 +19,7 @@
       </ion-icon>
       <div class="action">{{tx.action}}</div>
       <div class="detail">
-        <div class="amount">{{amountStr | toFiat : tx.amount : unitCode}}</div>
+        <div class="amount">{{amountStr | toUnit : tx.amount}}</div>
         <div class="date">{{tx.time * 1000 | amTimeAgo}}</div>
       </div>
     </button>

src/pages/wallet-details/wallet-details.ts

@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
-import { NavParams } from 'ionic-angular';
+import { NavController, NavParams } from 'ionic-angular';
 import { WalletProvider } from '../../providers/wallet/wallet';
 import { ConfigProvider } from '../../providers/config/config';
+import { TxDetailsPage } from '../../pages/tx-details/tx-details';
 
 @Component({
   selector: 'page-wallet-details',
@@ -13,6 +14,7 @@ export class WalletDetailsPage {
   public alternativeBalanceStr: string;
 
   constructor(
+    private navCtrl: NavController,
     private navParams: NavParams,
     private walletProvider: WalletProvider,
     private configProvider: ConfigProvider,
@@ -20,20 +22,19 @@ export class WalletDetailsPage {
     this.wallet = this.navParams.data.wallet;
     this.unitCode = this.configProvider.get()['wallet']['settings'].unitCode;
   }
-
+  
   ionViewDidEnter() {
     if (!this.wallet.isComplete()) {
       console.log('Wallet incomplete');
       return;
     };
-    this.alternativeBalanceStr = this.wallet.status.totalBalanceAlternative + ' ' + this.wallet.status.alternativeIsoCode;
     this.getTxHistory();
   }
-
-  goToTxDetails(txid: string) {
-    return;
+  
+  goToTxDetails(tx: any) {
+    this.navCtrl.push(TxDetailsPage, {tx: tx});
   }
-
+  
   getTxHistory(force?: boolean) {
     let self = this;
     this.walletProvider.getTxHistory_(this.wallet, {force: force}).then((txh) => {

src/pipes/toFiat.ts

@@ -1,12 +1,18 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { TxFormatProvider } from '../providers/tx-format/tx-format';
+import { ConfigProvider } from '../providers/config/config';
 
 @Pipe({ name: 'toFiat' })
 export class ToFiatPipe implements PipeTransform {
+  private unitCode: string;
+
   constructor(
+    private configProvider: ConfigProvider,
     private txFormatProvider: TxFormatProvider
-  ) {}
-  transform(value: string, satoshis: number, coin: string): any {
-    return this.txFormatProvider.formatAmountStr(coin, satoshis);
+  ) { 
+    this.unitCode = this.configProvider.get()['wallet']['settings'].unitCode;
+  }
+  transform(value: string, satoshis: number): any {
+    return this.txFormatProvider.formatAlternativeStr(this.unitCode, satoshis);
   }
 }

src/pipes/toUnit.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TxFormatProvider } from '../providers/tx-format/tx-format';
+import { ConfigProvider } from '../providers/config/config';
+
+@Pipe({ name: 'toUnit' })
+export class ToUnitPipe implements PipeTransform {
+  private unitCode: string;
+  
+  constructor(
+    private configProvider: ConfigProvider,
+    private txFormatProvider: TxFormatProvider
+  ) {
+    this.unitCode = this.configProvider.get()['wallet']['settings'].unitCode;
+  }
+  transform(value: string, satoshis: number): any {
+    return this.txFormatProvider.formatAmountStr(this.unitCode, satoshis);
+  }
+}

src/providers/tx-format/tx-format.ts

@@ -57,17 +57,15 @@ export class TxFormatProvider {
     });
   };
 
-  public formatAlternativeStr(coin: string, satoshis: number): Promise<any> {
-    return new Promise((resolve, reject) => {
-      if (isNaN(satoshis)) return resolve();
-      let settings = this.config.get().wallet.settings;
+  public formatAlternativeStr(coin: string, satoshis: number) {
+    if (isNaN(satoshis)) return;
+    let settings = this.config.get().wallet.settings;
 
-      var v1 = parseFloat((this.rate.toFiat(satoshis, settings.alternativeIsoCode, coin)).toFixed(2));
-      var v1FormatFiat = this.filter.formatFiatAmount(v1);
-      if (!v1FormatFiat) return resolve(null);
+    var v1 = parseFloat((this.rate.toFiat(satoshis, settings.alternativeIsoCode, coin)).toFixed(2));
+    var v1FormatFiat = this.filter.formatFiatAmount(v1);
+    if (!v1FormatFiat) return;
 
-      return resolve(v1FormatFiat + ' ' + settings.alternativeIsoCode);
-    });
+    return v1FormatFiat + ' ' + settings.alternativeIsoCode;
   };
 
   public processTx(coin: string, tx: any): any {