add supply-stats route to show total supply and rich list

src/app/app-routing.module.ts

@@ -36,6 +36,9 @@ import { WalletTutorialPageComponent } from "./tutorial/wallet-tutorial-page/wal
 import { SellCreatorCoinsTutorialComponent } from "./tutorial/sell-creator-coins-tutorial-page/sell-creator-coins-tutorial/sell-creator-coins-tutorial.component";
 import { DiamondTutorialPageComponent } from "./tutorial/diamond-tutorial-page/diamond-tutorial-page.component";
 import { CreatePostTutorialPageComponent } from "./tutorial/create-post-tutorial-page/create-post-tutorial-page.component";
+import {
+  SupplyMonitoringStatsPageComponent
+} from "./supply-monitoring-stats-page/supply-monitoring-stats-page.component";
 
 class RouteNames {
   // Not sure if we should have a smarter schema for this, e.g. what happens if we have
@@ -81,6 +84,7 @@ class RouteNames {
   public static TUTORIAL = "tutorial";
   public static CREATE_PROFILE = "create-profile";
   public static INVEST = "invest";
+  public static SUPPLY_STATS = "supply-stats";
 }
 
 const routes: Routes = [
@@ -162,6 +166,11 @@ const routes: Routes = [
     component: CreatePostTutorialPageComponent,
     pathMatch: "full",
   },
+  {
+    path: RouteNames.SUPPLY_STATS,
+    component: SupplyMonitoringStatsPageComponent,
+    pathMatch: "full",
+  },
   // This NotFound route must be the last one as it catches all paths that were not matched above.
   { path: "**", component: NotFoundPageComponent, pathMatch: "full" },
 ];

src/app/app.module.ts

@@ -159,6 +159,12 @@ import { AdminNodeAddFeesComponent } from "./admin/admin-node-fees/admin-node-ad
 // Modular Themes for DeSo by Carsen Klock @carsenk
 import { ThemeModule } from "./theme/theme.module";
 import { Theme } from "./theme/symbols";
+import {
+  SupplyMonitoringStatsPageComponent
+} from "./supply-monitoring-stats-page/supply-monitoring-stats-page.component";
+import {
+  SupplyMonitoringStatsComponent
+} from "./supply-monitoring-stats-page/supply-monitoring-stats/supply-monitoring-stats.component";
 const lightTheme: Theme = { key: "light", name: "Light Theme" };
 const darkTheme: Theme = { key: "dark", name: "Dark Theme" };
 const icydarkTheme: Theme = { key: "icydark", name: "Icy Dark Theme" };
@@ -299,6 +305,8 @@ const greenishTheme: Theme = { key: "greenish", name: "Green Theme" };
     SanitizeVideoUrlPipe,
     AdminNodeFeesComponent,
     AdminNodeAddFeesComponent,
+    SupplyMonitoringStatsPageComponent,
+    SupplyMonitoringStatsComponent,
   ],
   imports: [
     BrowserModule,

src/app/backend-api.service.ts

@@ -146,6 +146,10 @@ export class BackendRoutes {
   static RoutePathAdminGetTransactionFeeMap = "/api/v0/admin/get-transaction-fee-map";
   static RoutePathAdminAddExemptPublicKey = "/api/v0/admin/add-exempt-public-key";
   static RoutePathAdminGetExemptPublicKeys = "/api/v0/admin/get-exempt-public-keys";
+
+  // Supply Monitoring endpoints
+  static RoutePathGetTotalSupply = "/api/v0/total-supply";
+  static RoutePathGetRichList = "/api/v0/rich-list";
 }
 
 export class Transaction {
@@ -397,6 +401,14 @@ type GetUsersStatelessResponse = {
   ParamUpdaters: { [k: string]: boolean };
 };
 
+export type RichListEntryResponse = {
+  PublicKeyBase58Check: string;
+  BalanceNanos: number;
+  BalanceDESO: number;
+  Percentage: number;
+  Value: number;
+};
+
 @Injectable({
   providedIn: "root",
 })
@@ -2229,6 +2241,14 @@ export class BackendApiService {
     return this.get(endpoint, `${BackendRoutes.RoutePathGetVideoStatus}/${videoId}`);
   }
 
+  GetTotalSupply(endpoint: string): Observable<number> {
+    return this.get(endpoint, BackendRoutes.RoutePathGetTotalSupply);
+  }
+
+  GetRichList(endpoint: string): Observable<RichListEntryResponse[]> {
+    return this.get(endpoint, BackendRoutes.RoutePathGetRichList);
+  }
+
   // Error parsing
   stringifyError(err): string {
     if (err && err.error && err.error.error) {

src/app/supply-monitoring-stats-page/supply-monitoring-stats-page.component.html

@@ -0,0 +1,3 @@
+<app-page>
+  <supply-monitoring-stats></supply-monitoring-stats>
+</app-page>

src/app/supply-monitoring-stats-page/supply-monitoring-stats-page.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { SupplyMonitoringStatsPageComponent } from "./supply-monitoring-stats-page.component";
+
+describe("SupplyMonitoringStatsPageComponent", () => {
+  let component: SupplyMonitoringStatsPageComponent;
+  let fixture: ComponentFixture<SupplyMonitoringStatsPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SupplyMonitoringStatsPageComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SupplyMonitoringStatsPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/supply-monitoring-stats-page/supply-monitoring-stats-page.component.ts

@@ -0,0 +1,10 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "supply-monitoring-stats-page",
+  templateUrl: "./supply-monitoring-stats-page.component.html",
+  styleUrls: ["./supply-monitoring-stats-page.component.scss"],
+})
+export class SupplyMonitoringStatsPageComponent {
+  constructor() {}
+}

src/app/supply-monitoring-stats-page/supply-monitoring-stats/supply-monitoring-stats.component.html

@@ -0,0 +1,20 @@
+<div class="p-15px">
+  <simple-center-loader *ngIf="loadingTotalSupply && loadingRichList"></simple-center-loader>
+  <div>Total Supply: {{ loadingTotalSupply ? "...loading" : totalSupplyDESO }}</div>
+  <div *ngIf="!loadingRichList">
+    <div class="d-flex fs-12px">
+      <div class="col-1">Rank</div>
+      <div class="col-4">Public Key</div>
+      <div class="col-2">Balance (DESO)</div>
+      <div class="col-2">Percentage</div>
+      <div class="col-2">USD Value</div>
+    </div>
+    <div #uiScroll *uiScroll="let entry of datasource; let ii = index" class="d-flex fs-12px">
+      <div class="col-1">#{{ ii + 1}}</div>
+      <div class="col-4 text-truncate">{{ entry.PublicKeyBase58Check }}</div>
+      <div class="col-2">{{ globalVars.nanosToDeSo(entry.BalanceNanos) }}</div>
+      <div class="col-2">{{ (entry.Percentage * 100).toFixed(2) }} %</div>
+      <div class="col-2">{{ globalVars.nanosToUSD(entry.BalanceNanos, 2) }}</div>
+    </div>
+  </div>
+</div>

src/app/supply-monitoring-stats-page/supply-monitoring-stats/supply-monitoring-stats.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { SupplyMonitoringStatsComponent } from "./supply-monitoring-stats.component";
+
+describe("SupplyMonitoringStatsComponent", () => {
+  let component: SupplyMonitoringStatsComponent;
+  let fixture: ComponentFixture<SupplyMonitoringStatsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SupplyMonitoringStatsComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SupplyMonitoringStatsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/supply-monitoring-stats-page/supply-monitoring-stats/supply-monitoring-stats.component.ts

@@ -0,0 +1,66 @@
+import { Component, OnDestroy } from "@angular/core";
+import { BackendApiService, ProfileEntryResponse, RichListEntryResponse } from "../../backend-api.service";
+import { GlobalVarsService } from "../../global-vars.service";
+import { ActivatedRoute, Router } from "@angular/router";
+import { Subscription } from "rxjs";
+import { RouteNames, AppRoutingModule } from "../../app-routing.module";
+import { CanPublicKeyFollowTargetPublicKeyHelper } from "../../../lib/helpers/follows/can_public_key_follow_target_public_key_helper";
+import { Datasource, IAdapter, IDatasource } from "ngx-ui-scroll";
+import { InfiniteScroller } from "src/app/infinite-scroller";
+
+@Component({
+  selector: "supply-monitoring-stats",
+  templateUrl: "./supply-monitoring-stats.component.html",
+  styleUrls: ["./supply-monitoring-stats.component.scss"],
+})
+export class SupplyMonitoringStatsComponent {
+  static BUFFER_SIZE = 10;
+  static PAGE_SIZE = 10;
+  static WINDOW_VIEWPORT = true;
+  totalSupplyDESO: number;
+  loadingTotalSupply: boolean = true;
+  richList: RichListEntryResponse[];
+  loadingRichList: boolean = true;
+  datasource: IDatasource<IAdapter<any>> = this.getDatasource();
+  constructor(public globalVars: GlobalVarsService, private backendApi: BackendApiService) {
+    this.backendApi
+      .GetRichList(this.globalVars.localNode)
+      .subscribe((res) => {
+        this.richList = res || [];
+      })
+      .add(() => (this.loadingRichList = false));
+    this.backendApi
+      .GetTotalSupply(this.globalVars.localNode)
+      .subscribe((res) => {
+        this.totalSupplyDESO = res;
+      })
+      .add(() => (this.loadingTotalSupply = false));
+  }
+
+  getDatasource(): IDatasource<IAdapter<any>> {
+    return new Datasource<IAdapter>({
+      get: (index, count, success) => {
+        const startIdx = Math.max(index, 0);
+        const endIdx = index + count - 1;
+        if (startIdx > endIdx) {
+          success([]);
+          return;
+        }
+        if (endIdx + 1 > this.richList.length) {
+          success(this.richList.slice(startIdx, this.richList.length) as any[]);
+          return;
+        }
+        success(this.richList.slice(startIdx, endIdx + 1) as any[]);
+        return;
+      },
+      settings: {
+        startIndex: 0,
+        minIndex: 0,
+        bufferSize: 5,
+        padding: 0.5,
+        windowViewport: true,
+        infinite: true,
+      },
+    });
+  }
+}