add infinite scroll

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

@@ -11,7 +11,7 @@
   </div>
 
   <ion-list>
-    <button ion-item *ngFor="let tx of wallet.completeHistory" (click)="goToTxDetails(tx)">
+    <button ion-item *ngFor="let tx of history" (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">
@@ -24,4 +24,8 @@
       </div>
     </button>
   </ion-list>
+
+  <ion-infinite-scroll (ionInfinite)="loadHistory($event)">
+    <ion-infinite-scroll-content></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
 </ion-content>

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

@@ -9,7 +9,11 @@ import { TxDetailsPage } from '../../pages/tx-details/tx-details';
   templateUrl: 'wallet-details.html'
 })
 export class WalletDetailsPage {
+  private HISTORY_SHOW_LIMIT: number;
+  private HISTORY_PAGE_COUNTER: number;
+
   public wallet: any;
+  public history: any;
 
   constructor(
     private navCtrl: NavController,
@@ -18,6 +22,9 @@ export class WalletDetailsPage {
     private walletProvider: WalletProvider,
   ) {
     this.wallet = this.profileProvider.getWallet(this.navParams.data.walletId);
+    this.history = [];
+    this.HISTORY_SHOW_LIMIT = 10;
+    this.HISTORY_PAGE_COUNTER = 2;
   }
   
   ionViewDidEnter() {
@@ -29,16 +36,34 @@ export class WalletDetailsPage {
   }
   
   getTxHistory(force?: boolean) {
-    if (force) this.wallet.completeHistory = [];
+    if (force) {
+      this.history = [];
+      this.HISTORY_PAGE_COUNTER = 2;
+    }
 
-    this.walletProvider.getTxHistory(this.wallet, {force: force}).then((txh) => {
+    this.walletProvider.getTxHistory(this.wallet, { force: force }).then((txh) => {
       this.wallet.completeHistory = txh;
+      this.wallet.completeHistory.isValid = true;
+      this.history = this.wallet.completeHistory.slice(0, this.HISTORY_SHOW_LIMIT);
     }).catch((err) => {
       console.log(err);
     });
   }
 
+  loadHistory(loading) {
+    if (this.history.length === this.wallet.completeHistory.length) {
+      loading.complete();
+      return;
+    }
+    let self = this;
+    setTimeout(function() {
+      self.history = self.wallet.completeHistory.slice(0, self.HISTORY_PAGE_COUNTER * self.HISTORY_SHOW_LIMIT);
+      self.HISTORY_PAGE_COUNTER++;
+      loading.complete();
+    }, 300);
+  }
+
   goToTxDetails(tx: any) {
-    this.navCtrl.push(TxDetailsPage, {walletId: this.wallet.credentials.walletId, txid: tx.txid});
+    this.navCtrl.push(TxDetailsPage, { walletId: this.wallet.credentials.walletId, txid: tx.txid });
   }
 }

src/providers/wallet/wallet.ts

@@ -368,18 +368,22 @@ export class WalletProvider {
 
   public getTxHistory(wallet: any, opts: any) {
     return new Promise((resolve, reject) => {
-      opts = opts ? opts : {};
+      opts = opts || {};
 
       // TODO isHistoryCached should get the properties from status or profile service
 
       this.logger.debug('Updating Transaction History');
 
       this.getTxsFromLocal(wallet.credentials.walletId).then((txsFromLocal) => {
-        if (!lodash.isEmpty(txsFromLocal) && !opts.force) return resolve(txsFromLocal);
+        if (!lodash.isEmpty(txsFromLocal) && !opts.force) {
+          return resolve(txsFromLocal.slice(0, opts.limit));
+        }
 
-        this.getTxsFromServer(wallet, 0, null, 10).then((txsFromServer) => {
+        this.getTxsFromServer(wallet, opts).then((txsFromServer) => {
 
-          this.updateTxHistory(wallet, txsFromLocal, txsFromServer);
+          this.updateTxHistory(wallet, txsFromLocal, txsFromServer).then((newHistory: any) => {
+            return resolve(newHistory);
+          });
         }).catch((err) => {
           this.logger.debug('Error getting txs from server');
           return reject(err);
@@ -392,12 +396,14 @@ export class WalletProvider {
   }
 
   private updateTxHistory(wallet: any, txsFromLocal: any, txsFromServer?: any) {
-    let array = txsFromLocal.concat(txsFromServer.res);
+    return new Promise((resolve, reject) => {
+      var txsFromServer_ = txsFromServer && txsFromServer.res || [];
+      let array = txsFromLocal.concat(txsFromServer_);
       let newHistory = lodash.uniqBy(array, (x: any) => {
         return x.txid;
       });
-    wallet.completeHistory = newHistory;
-    wallet.completeHistory.isValid = true;
+      resolve(newHistory);
+
       let historyToSave = lodash.compact(lodash.flatten(newHistory));
 
       this.persistenceProvider.setTxHistory(wallet.credentials.walletId, JSON.stringify(historyToSave)).then(() => {
@@ -405,6 +411,7 @@ export class WalletProvider {
       }).catch((err) => {
         this.logger.warn('Error saving history for: ' + wallet.credentials.walletId);
       });
+    });
   }
 
   private getTxsFromLocal(walletId: string): Promise<any> {
@@ -429,13 +436,14 @@ export class WalletProvider {
     });
   }
 
-  private getTxsFromServer(wallet: any, skip: number, endingTxid: string, limit: number): Promise<any> {
+  private getTxsFromServer(wallet: any, opts: any): Promise<any> {
     return new Promise((resolve, reject) => {
+      opts = opts || {};
       let res = [];
 
       wallet.getTxHistory({
-        skip: skip,
-        limit: limit
+        skip: opts.skip,
+        limit: opts.limit
       }, (err: Error, txsFromServer: Array<any>) => {
         if (err) return reject(err);
 
@@ -443,12 +451,12 @@ export class WalletProvider {
           return resolve();
 
         res = lodash.takeWhile(txsFromServer, (tx) => {
-          return tx.txid != endingTxid;
+          return tx.txid != opts.endingTxid;
         });
 
         let result = {
           res: res,
-          shouldContinue: res.length >= limit
+          shouldContinue: res.length >= opts.limit
         };
 
         return resolve(result);