web-ui: Add RichestAddresses view

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

@@ -46,6 +46,7 @@ export class AppComponent {
       'message.addressNotFound': 'Address not found',
       'message.blockNotFound': 'Block not found',
       'message.loadingLatestBlocks': 'Loading latest blocks...',
+      'message.loadingRichestAddresses': 'Loading richest addresses...',
 
       // error messages
       'error.nothingFound': 'That doesn\'t seem to be a valid address, nor valid block, neither a valid transaction',
@@ -71,6 +72,7 @@ export class AppComponent {
 
       'label.address': 'Address',
       'label.balance': 'Balance',
+      'label.available': 'Available',
       'label.received': 'Received',
       'label.spent': 'Spent',
       'label.transactionCount': 'Transactions',
@@ -102,7 +104,8 @@ export class AppComponent {
       'label.height': 'Block height',
       'label.extractedBy': 'Extracted by',
       'label.latestBlocks': 'Latest 10 blocks',
-      'label.totalSupply': 'Total supply'
+      'label.totalSupply': 'Total supply',
+      'label.richestAddresses': 'Richest addresses'
     };
   }
 }

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

@@ -13,6 +13,7 @@ import { ToastrModule } from 'ngx-toastr';
 import { NgHttpLoaderModule } from 'ng-http-loader/ng-http-loader.module'
 
 import { AddressesService } from './services/addresses.service';
+import { BalancesService } from './services/balances.service';
 import { BlocksService } from './services/blocks.service';
 import { ErrorService } from './services/error.service';
 import { LanguageService } from './services/language.service';
@@ -31,6 +32,7 @@ import { AddressDetailsComponent } from './components/address-details/address-de
 import { BlockDetailsComponent } from './components/block-details/block-details.component';
 import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
 import { TickerComponent } from './components/ticker/ticker.component';
+import { RichestAddressesComponent } from './components/richest-addresses/richest-addresses.component';
 
 @NgModule({
   declarations: [
@@ -43,7 +45,8 @@ import { TickerComponent } from './components/ticker/ticker.component';
     AddressDetailsComponent,
     BlockDetailsComponent,
     LatestBlocksComponent,
-    TickerComponent
+    TickerComponent,
+    RichestAddressesComponent
   ],
   imports: [
     AppRoutingModule,
@@ -64,6 +67,7 @@ import { TickerComponent } from './components/ticker/ticker.component';
   ],
   providers: [
     AddressesService,
+    BalancesService,
     BlocksService,
     ErrorService,
     LanguageService,

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

@@ -0,0 +1,37 @@
+<div>
+  <div [hidden]="balances != null">
+    <alert>{{'message.loadingRichestAddresses' | translate}}</alert>
+  </div>
+
+  <div *ngIf="balances != null">
+    <div class="row">
+      <h2 class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-1'">{{'label.richestAddresses' | translate}}</h2>
+    </div>
+
+    <div class="row">
+      <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10">
+        <table class="table table-condensed table-bordered table-striped table-hover">
+          <thead>
+            <tr>
+              <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.address' | translate}}</th>
+              <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.available' | translate}}</th>
+              <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.received' | translate}}</th>
+              <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.spent' | translate}}</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr *ngFor="let item of balances">
+              <td>
+                <a routerLink="/addresses/{{item.address}}">{{item.address}}</a>
+              </td>
+              <td>{{item.available}} {{'label.coinName' | translate}}</td>
+              <td>{{item.received}} {{'label.coinName' | translate}}</td>
+              <td>{{item.spent}} {{'label.coinName' | translate}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RichestAddressesComponent } from './richest-addresses.component';
+
+describe('RichestAddressesComponent', () => {
+  let component: RichestAddressesComponent;
+  let fixture: ComponentFixture<RichestAddressesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RichestAddressesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RichestAddressesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,43 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+import { Balance } from '../../models/balance';
+
+import { BalancesService } from '../../services/balances.service';
+import { ErrorService } from '../../services/error.service';
+import { PaginatedResult } from '../../models/paginated-result';
+
+@Component({
+  selector: 'app-richest-addresses',
+  templateUrl: './richest-addresses.component.html',
+  styleUrls: ['./richest-addresses.component.css']
+})
+export class RichestAddressesComponent implements OnInit {
+
+  balances: Balance[];
+
+  constructor(
+    private balancesService: BalancesService,
+    private errorService: ErrorService) { }
+
+  ngOnInit() {
+    this.balances = [];
+    this.updateBalances();
+  }
+
+  private updateBalances() {
+    this.balancesService
+      .getRichest()
+      .subscribe(
+        response => this.onBalancesRetrieved(response),
+        response => this.onError(response)
+      );
+  }
+
+  private onBalancesRetrieved(response: PaginatedResult<Balance>) {
+    this.balances = response.data;
+  }
+
+  private onError(response: any) {
+    this.errorService.renderServerErrors(null, response);
+  }
+}