web-ui: Update the richest addresses view to use the API V2

web-ui/src/app/app.component.ts

@@ -151,7 +151,8 @@ export class AppComponent implements OnInit {
       'label.active': 'Active',
       'label.details': 'Details',
       'label.raw': 'Raw',
-      'label.date': 'Date'
+      'label.date': 'Date',
+      'label.more': 'More'
     };
   }
 }

web-ui/src/app/components/richest-addresses/richest-addresses.component.html

@@ -15,8 +15,8 @@
       </thead>
 
       <tbody>
-        <tr *ngFor="let index = index; let item of asyncItems | async | paginate: { id: 'richestAddresses', 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="/addresses/{{item.address}}">{{item.address}}</a>
           </td>
@@ -37,8 +37,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="richestAddresses" previousLabel="" nextLabel="">
-      </pagination-controls>
+      <button (click)="load()">{{'label.more' | translate}}</button>
     </div>
   </div>
 </div>

web-ui/src/app/components/richest-addresses/richest-addresses.component.ts

@@ -1,14 +1,11 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
-
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/map';
 
 import { Balance } from '../../models/balance';
 
 import { BalancesService } from '../../services/balances.service';
-import { ErrorService } from '../../services/error.service';
 import { TickerService } from '../../services/ticker.service';
 import { ServerStats } from '../../models/ticker';
 
@@ -23,30 +20,28 @@ export class RichestAddressesComponent implements OnInit {
   ticker: ServerStats;
 
   // pagination
-  total = 0;
-  currentPage = 1;
-  pageSize = 10;
-  asyncItems: Observable<Balance[]>;
+  limit = 10;
+  items: Balance[] = [];
 
   constructor(
     private balancesService: BalancesService,
-    private tickerService: TickerService,
-    private errorService: ErrorService) { }
+    private tickerService: TickerService) { }
 
   ngOnInit() {
-    this.getPage(this.currentPage);
+    this.load();
     this.tickerService.get().subscribe(response => this.ticker = response);
   }
 
-  getPage(page: number) {
-    const offset = (page - 1) * this.pageSize;
-    const limit = this.pageSize;
+  load() {
+    let lastSeenAddress = '';
+    if (this.items.length > 0) {
+      lastSeenAddress = this.items[this.items.length - 1].address;
+    }
 
-    this.asyncItems = this.balancesService
-      .get(offset, limit, 'available:desc')
-      .do(response => this.total = response.total)
-      .do(response => this.currentPage = 1 + (response.offset / this.pageSize))
-      .map(response => response.data);
+    this.balancesService
+      .getHighest(this.limit, lastSeenAddress)
+      .do(response => this.items = this.items.concat(response.data))
+      .subscribe();
   }
 
   getPercent(balance: Balance): number {

web-ui/src/app/models/wrapped-result.ts

@@ -0,0 +1,4 @@
+
+export class WrappedResult<T> {
+  data: T[];
+}

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

@@ -6,6 +6,7 @@ import { environment } from '../../environments/environment';
 
 import { Balance } from '../models/balance';
 import { PaginatedResult } from '../models/paginated-result';
+import { WrappedResult } from '../models/wrapped-result';
 
 const httpOptions = {
   headers: new HttpHeaders({ 'Content-Type': 'application/json' })
@@ -15,6 +16,7 @@ const httpOptions = {
 export class BalancesService {
 
   private baseUrl = environment.api.url + '/balances';
+  private baseUrlV2 = environment.api.url + '/v2/balances';
 
   constructor(private http: HttpClient) { }
 
@@ -22,4 +24,13 @@ export class BalancesService {
     const url = `${this.baseUrl}?offset=${offset}&limit=${limit}&orderBy=${orderBy}`;
     return this.http.get<PaginatedResult<Balance>>(url);
   }
+
+  getHighest(limit: number = 10, lastSeenAddress: string = ''): Observable<WrappedResult<Balance>> {
+    let url = `${this.baseUrlV2}?limit=${limit}`;
+    if (lastSeenAddress !== '') {
+      url += `&lastSeenAddress=${lastSeenAddress}`;
+    }
+
+    return this.http.get<WrappedResult<Balance>>(url);
+  }
 }