Merge pull request bitpay#1978 from cmgustavo/ref/insight-address-vie…

…w-01 Ref(insight-previous): address view 01
nitsujlangston · Feb 6, 2019 · 3941813 · 3941813
2 parents 967fb6d + b75db1c
commit 3941813
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 63 deletions.
diff --git a/packages/insight-previous/src/components/coin-list/coin-list.html b/packages/insight-previous/src/components/coin-list/coin-list.html
@@ -1,37 +1,16 @@
 <div *ngIf="showTransactions">
   <h2>Transactions</h2>
-  <ion-grid>
-    <div *ngIf="loading">
+    <div [hidden]="!loading">
       <ion-spinner name="crescent"></ion-spinner>
     </div>
-    <div *ngIf="!loading">
-      <ion-row>
-        <ion-col col-5>
-          <ion-note text-left>
-            Received
-          </ion-note>
-        </ion-col>
-        <ion-col col-3 text-right>
-          <ion-note>
-            Value
-          </ion-note>
-        </ion-col>
-        <ion-col col-4 text-left>
-          <ion-note>
-            Spent
-          </ion-note>
-        </ion-col>
-      </ion-row>
-      <ion-row *ngFor="let coin of coins; let i = index">
-        <ion-col col-12 *ngIf="i < limit">
-          <coin [coin]="coin"></coin>
-        </ion-col>
-      </ion-row>
-      <ion-row *ngIf="limit < coins.length">
-        <ion-col col-12 text-center (click)="loadMore()">
-          <a>Load More</a>
-        </ion-col>
-      </ion-row>
+    <div [hidden]="loading">
+      <ion-grid class="grid--table">
+        <div *ngFor="let coin of coins; let i = index">
+          <coin *ngIf="i < limit" [coin]="coin"></coin>
+        </div>
+      </ion-grid>
+      <div *ngIf="limit < coins.length" text-center>
+        <button ion-button (click)="loadMore()">Load more</button>
+      </div>
     </div>
-  </ion-grid>
 </div>
diff --git a/packages/insight-previous/src/components/coin-list/coin-list.ts b/packages/insight-previous/src/components/coin-list/coin-list.ts
@@ -1,3 +1,4 @@
+import { Events } from 'ionic-angular';
 import { Component, Input, OnInit } from '@angular/core';
 import { AddressProvider } from '../../providers/address/address';
 import { Logger } from '../../providers/logger/logger';
@@ -13,32 +14,33 @@ export class CoinListComponent implements OnInit {
 
   public coins: any = [];
   public showTransactions: boolean;
-  public loading = true;
+  public loading;
   public limit = 10;
   public chunkSize = 100;
 
   constructor(
     private addrProvider: AddressProvider,
     private txsProvider: TxsProvider,
-    private logger: Logger
+    private logger: Logger,
+    private events: Events
   ) {}
 
   public ngOnInit(): void {
     if (this.coins && this.coins.length === 0) {
+      this.loading = true;
       this.addrProvider.getAddressActivity(this.addrStr).subscribe(
         data => {
           this.coins = data.map(this.txsProvider.toAppCoin);
           this.showTransactions = true;
           this.loading = false;
+          this.events.publish('CoinList', { length: data.length });
         },
         err => {
           this.logger.error(err);
           this.loading = false;
           this.showTransactions = false;
         }
       );
-    } else {
-      this.loading = false;
     }
   }
 

diff --git a/packages/insight-previous/src/components/coin/coin.html b/packages/insight-previous/src/components/coin/coin.html
@@ -1,15 +1,14 @@
 <ion-row>
-  <ion-col col-5>
+  <ion-col col-8>
     <ion-note text-left>
       <a class="ellipsis" (click)="goToTx(coin.mintTxid)">{{ coin.mintTxid }}</a>
     </ion-note>
   </ion-col>
-  <ion-col col-3 text-right>
-    {{ currencyProvider.getConvertedNumber(coin.value) | number:'1.0-8' }} {{ currencyProvider.currencySymbol }}
-  </ion-col>
-  <ion-col col-4 text-left>
-    <ion-note [hidden]="!coin.spentTxid">
-      <a class="ellipsis" (click)="goToTx(coin.spentTxid)">{{ coin.spentTxid }}</a>
-    </ion-note>
+  <ion-col col-4 text-right>
+    {{ currencyProvider.getConvertedNumber(coin.value) | number:'1.0-8' }} {{ currencyProvider.currencySymbol }} 
+    (
+    <a [hidden]="!coin.spentTxid" (click)="goToTx(coin.spentTxid)">S</a>
+    <span [hidden]="coin.spentTxid">U</span>
+    )
   </ion-col>
 </ion-row>
diff --git a/packages/insight-previous/src/pages/address/address.html b/packages/insight-previous/src/pages/address/address.html
@@ -6,24 +6,41 @@
   </div>
 
   <div *ngIf="!loading" class="page-content">
-    <h1>Address</h1>
+    <h1>Address <small>{{ getConvertedNumber(address.balance) | number:'1.0-8' }} {{ currencyProvider.currencySymbol }}</small></h1>
     <p class="ellipsis">{{ address.addrStr }}</p>
+
     <h2>Summary</h2>
+    <ion-grid>
+      <ion-row align-items-start>
+        <ion-col col-md-8 col-12>
+          <ion-list class="list--summary">
+            <ion-item>
+              Confirmed Balance
+              <ion-note item-end>
+                {{ getConvertedNumber(address.confirmed) | number:'1.0-8' }} {{ currencyProvider.currencySymbol }}
+              </ion-note>
+            </ion-item>
+            <ion-item *ngIf="address.unconfirmed > 0">
+              Unconfirmed Balance
+              <ion-note item-end>
+                {{ getConvertedNumber(address.unconfirmed) | number:'1.0-8' }} {{ currencyProvider.currencySymbol }}
+              </ion-note>
+            </ion-item>
+            <ion-item *ngIf="nroTransactions > 0">
+              Nro. Transactions
+              <ion-note item-end>
+                {{ nroTransactions }}
+              </ion-note>
+            </ion-item>
+          </ion-list>
+        </ion-col>
+        <ion-col col-md-4 col-12 text-center>
+          <qr-code [value]="address.addrStr" [size]="160"></qr-code>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
 
-    <ion-list class="list--summary">
-      <ion-item>
-        Final Balance
-        <ion-note item-end>
-          {{ getBalance() | number:'1.0-8' }} {{ currencyProvider.currencySymbol }}
-        </ion-note>
-      </ion-item>
-    </ion-list>
-
-    <p text-center>
-      <qr-code [value]="address.addrStr" [size]="160"></qr-code>
-      <p>
-
-        <coin-list [addrStr]="address.addrStr"></coin-list>
+    <coin-list [addrStr]="address.addrStr"></coin-list>
   </div>
 
 </ion-content>
diff --git a/packages/insight-previous/src/pages/address/address.ts b/packages/insight-previous/src/pages/address/address.ts
@@ -1,5 +1,5 @@
 import { Component, Injectable } from '@angular/core';
-import { IonicPage, NavParams } from 'ionic-angular';
+import { Events, IonicPage, NavParams } from 'ionic-angular';
 import { AddressProvider } from '../../providers/address/address';
 import { ApiProvider, ChainNetwork } from '../../providers/api/api';
 import { CurrencyProvider } from '../../providers/currency/currency';
@@ -22,6 +22,7 @@ export class AddressPage {
   private addrStr: string;
   private chainNetwork: ChainNetwork;
   public address: any = {};
+  public nroTransactions: number = 0;
 
   constructor(
     public navParams: NavParams,
@@ -30,7 +31,8 @@ export class AddressPage {
     public txProvider: TxsProvider,
     private logger: Logger,
     private priceProvider: PriceProvider,
-    private addrProvider: AddressProvider
+    private addrProvider: AddressProvider,
+    private events: Events
   ) {
     this.addrStr = navParams.get('addrStr');
 
@@ -45,13 +47,19 @@ export class AddressPage {
     };
     this.apiProvider.changeNetwork(this.chainNetwork);
     this.priceProvider.setCurrency(this.chainNetwork.chain);
+
+    this.events.subscribe('CoinList', (d: any) => {
+      this.nroTransactions = d.length;
+    });
   }
 
-  public ionViewDidLoad(): void {
+  public ionViewWillLoad(): void {
     this.addrProvider.getAddressBalance(this.addrStr).subscribe(
       data => {
         this.address = {
           balance: data.balance,
+          confirmed: data.confirmed,
+          unconfirmed: data.unconfirmed,
           addrStr: this.addrStr
         };
         this.loading = false;
@@ -62,7 +70,7 @@ export class AddressPage {
     );
   }
 
-  public getBalance(): number {
-    return this.currencyProvider.getConvertedNumber(this.address.balance);
+  public getConvertedNumber(n: number): number {
+    return this.currencyProvider.getConvertedNumber(n);
   }
 }