server: Update the address details view to use the API V2

web-ui/src/app/components/address-details/address-details.component.html

@@ -57,8 +57,8 @@
         </thead>
 
         <tbody>
-          <tr *ngFor="let index = index; let item of asyncItems | async | paginate: { id: 'transactions', itemsPerPage: pageSize, currentPage: currentPage, totalItems: total }">
-            <td>{{(currentPage - 1) * pageSize + index + 1}}</td>
+          <tr *ngFor="let index = index; let item of items">
+            <td>{{index + 1}}</td>
             <td>
               <a routerLink="/transactions/{{item.id}}">{{item.id | slice:0:15}}...</a>
             </td>
@@ -66,7 +66,7 @@
               <a routerLink="/blocks/{{item.blockhash}}">{{item.blockhash | slice:0:15}}...</a>
             </td>
             <td>{{item.time * 1000 | explorerDatetime}}</td>
-            <td>{{item.received >= item.sent ? '+' : ''}}{{item.received - item.sent}} {{'label.coinName' | translate}}</td>
+            <td>{{renderValue(item)}} {{'label.coinName' | translate}}</td>
             <td>{{item.size}} bytes</td>
           </tr>
         </tbody>
@@ -75,8 +75,7 @@
 
     <div class="row">
       <div class="col-xs-11 col-xs-offset-1 col-sm-5 col-sm-offset-4">
-        <pagination-controls (pageChange)="getPage($event)" id="transactions" previousLabel="" nextLabel="">
-        </pagination-controls>
+        <button (click)="load()">{{'label.more' | translate}}</button>
       </div>
     </div>
   </div>

web-ui/src/app/components/address-details/address-details.component.ts

@@ -1,13 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { Observable } from 'rxjs/Observable';
-
 import { Balance } from '../../models/balance';
-import { Transaction } from '../../models/transaction';
-
 import { AddressesService } from '../../services/addresses.service';
 import { ErrorService } from '../../services/error.service';
+import { LightWalletTransaction } from '../..//models/light-wallet-transaction';
 
 @Component({
   selector: 'app-address-details',
@@ -20,10 +17,8 @@ export class AddressDetailsComponent implements OnInit {
   addressString: string;
 
   // pagination
-  total = 0;
-  currentPage = 1;
-  pageSize = 10;
-  asyncItems: Observable<Transaction[]>;
+  limit = 10;
+  items: LightWalletTransaction[] = [];
 
   constructor(
     private route: ActivatedRoute,
@@ -36,26 +31,46 @@ export class AddressDetailsComponent implements OnInit {
       response => this.onAddressRetrieved(response),
       response => this.onError(response)
     );
-    this.getPage(this.currentPage);
   }
 
   private onAddressRetrieved(response: Balance) {
     this.address = response;
+    this.load();
   }
 
-  getPage(page: number) {
-    const offset = (page - 1) * this.pageSize;
-    const limit = this.pageSize;
-    const order = 'time:desc';
+  load() {
+    const order = 'desc';
+    let lastSeenTxid = '';
+    if (this.items.length > 0) {
+      lastSeenTxid = this.items[this.items.length - 1].id;
+    }
 
-    this.asyncItems = this.addressesService
-      .getTransactions(this.addressString, offset, limit, order)
-      .do(response => this.total = response.total)
-      .do(response => this.currentPage = 1 + (response.offset / this.pageSize))
-      .map(response => response.data);
+    this.addressesService
+      .getTransactionsV2(this.addressString, this.limit, lastSeenTxid, order)
+      .do(response => this.items = this.items.concat(response.data))
+      .subscribe();
   }
 
   private onError(response: any) {
     this.errorService.renderServerErrors(null, response);
   }
+
+  renderValue(tx: LightWalletTransaction): string {
+    const spent = tx
+      .inputs
+      .map(input => input.value)
+      .reduce((a, b) => a + b, 0);
+
+    const received = tx
+      .outputs
+      .map(output => output.value)
+      .reduce((a, b) => a + b, 0);
+
+    const diff = Math.abs(received - spent);
+    if (received >= spent) {
+      return '+' + diff;
+    } else {
+      return '-' + diff;
+    }
+  }
 }

web-ui/src/app/models/light-wallet-transaction.ts

@@ -0,0 +1,14 @@
+
+export class LightWalletTransaction {
+  id: string;
+  size: number;
+  blockhash: string;
+  time: number;
+  inputs: LightWalletTransactionValue[];
+  outputs: LightWalletTransactionValue[];
+}
+
+class LightWalletTransactionValue {
+  index: number;
+  value: number;
+}

web-ui/src/app/services/addresses.service.ts

@@ -6,7 +6,9 @@ import { environment } from '../../environments/environment';
 
 import { Balance } from '../models/balance';
 import { PaginatedResult } from '../models/paginated-result';
+import { LightWalletTransaction } from '../models/light-wallet-transaction';
 import { Transaction } from '../models/transaction';
+import { WrappedResult } from '../models/wrapped-result';
 
 const httpOptions = {
   headers: new HttpHeaders({ 'Content-Type': 'application/json' })
@@ -16,6 +18,7 @@ const httpOptions = {
 export class AddressesService {
 
   private baseUrl = environment.api.url + '/addresses';
+  private baseUrlV2 = environment.api.url + '/v2/addresses';
 
   constructor(private http: HttpClient) { }
 
@@ -28,4 +31,18 @@ export class AddressesService {
     const url = `${this.baseUrl}/${address}/transactions?offset=${offset}&limit=${limit}&orderBy=${orderBy}`;
     return this.http.get<PaginatedResult<Transaction>>(url);
   }
+
+  getTransactionsV2(
+    address: string,
+    limit: number = 10,
+    lastSeenTxid: string = '',
+    order: string = 'desc'): Observable<WrappedResult<LightWalletTransaction>> {
+
+    let url = `${this.baseUrlV2}/${address}/transactions?limit=${limit}&order=${order}`;
+    if (lastSeenTxid !== '') {
+      url += `&lastSeenTxid=${lastSeenTxid}`;
+    }
+
+    return this.http.get<WrappedResult<LightWalletTransaction>>(url);
+  }
 }