web-ui: Update the richest addresses view to show the percent of coins

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

@@ -108,7 +108,8 @@ export class AppComponent {
       'label.circulatingSupply': 'Circulating supply',
       'label.blocks': 'Blocks',
       'label.richestAddresses': 'Richest addresses',
-      'label.masternodes': 'Masternodes'
+      'label.masternodes': 'Masternodes',
+      'label.percentOfCoins': 'Percent of coins'
     };
   }
 }

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

@@ -9,9 +9,8 @@
         <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>
+            <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.amount' | translate}}</th>
+            <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.percentOfCoins' | translate}}</th>
           </tr>
         </thead>
 
@@ -21,8 +20,8 @@
               <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>
+            <td *ngIf="ticker == null || ticker.circulatingSupply == null">{{'label.unavailable' | translate}}</td>
+            <td *ngIf="ticker != null && ticker.circulatingSupply != null">{{getPercent(item)}} %</td>
           </tr>
         </tbody>
       </table>

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

@@ -9,6 +9,8 @@ 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';
 
 @Component({
   selector: 'app-richest-addresses',
@@ -17,6 +19,9 @@ import { ErrorService } from '../../services/error.service';
 })
 export class RichestAddressesComponent implements OnInit {
 
+  // ticker
+  ticker: ServerStats;
+
   // pagination
   total = 0;
   currentPage = 1;
@@ -25,10 +30,12 @@ export class RichestAddressesComponent implements OnInit {
 
   constructor(
     private balancesService: BalancesService,
+    private tickerService: TickerService,
     private errorService: ErrorService) { }
 
   ngOnInit() {
     this.getPage(this.currentPage);
+    this.tickerService.get().subscribe(response => this.ticker = response);
   }
 
   getPage(page: number) {
@@ -41,4 +48,8 @@ export class RichestAddressesComponent implements OnInit {
       .do(response => this.currentPage = 1 + (response.offset / this.pageSize))
       .map(response => response.data);
   }
+
+  getPercent(balance: Balance): number {
+    return balance.available * 100 / this.ticker.circulatingSupply;
+  }
 }