Store and display stats and node top lists

frontend/src/app/lightning/lightning-api.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+const API_BASE_URL = '/lightning/api/v1';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LightningApiService {
+  constructor(
+    private httpClient: HttpClient,
+  ) { }
+
+  getLatestStatistics$(): Observable<any> {
+    return this.httpClient.get<any>(API_BASE_URL + '/statistics/latest');
+  }
+
+  listTopNodes$(): Observable<any> {
+    return this.httpClient.get<any>(API_BASE_URL + '/nodes/top');
+  }
+}

frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html

@@ -0,0 +1,48 @@
+<div class="container-xl dashboard-container">
+
+  <div class="row row-cols-1 row-cols-md-2">
+
+    <div class="col">
+      <div class="main-title">
+        <span i18n="lightning.statistics-title">Nodes Statistics</span>&nbsp;
+      </div>
+      <div class="card-wrapper">
+        <div class="card" style="height: 123px">
+          <div class="card-body more-padding">
+            <app-node-statistics [statistics$]="statistics$"></app-node-statistics>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col">
+      <div class="main-title">
+        <span i18n="lightning.statistics-title">Channels Statistics</span>&nbsp;
+      </div>
+      <div class="card-wrapper">
+        
+      </div>
+    </div>
+
+    <div class="col">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">Top Capacity Nodes</h5>
+          <app-nodes-list [nodes$]="nodesByCapacity$"></app-nodes-list>
+          <div><a [routerLink]="['/lightning/nodes' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">Most Connected Nodes</h5>
+          <app-nodes-list [nodes$]="nodesByChannels$"></app-nodes-list>
+          <div><a [routerLink]="['/lightning/nodes' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss

@@ -0,0 +1,80 @@
+.dashboard-container {
+  padding-bottom: 60px;
+  text-align: center;
+  margin-top: 0.5rem;
+  @media (min-width: 992px) {
+    padding-bottom: 0px;
+  }
+  .col {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.card {
+  background-color: #1d1f31;
+}
+
+.card-title {
+  font-size: 1rem;
+  color: #4a68b9;
+}
+.card-title > a {
+  color: #4a68b9;
+}
+
+.card-body {
+  padding: 1.25rem 1rem 0.75rem 1rem;
+}
+.card-body.pool-ranking {
+  padding: 1.25rem 0.25rem 0.75rem 0.25rem;
+}
+.card-text {
+  font-size: 22px;
+}
+
+
+.main-title {
+  position: relative;
+  color: #ffffff91;
+  margin-top: -13px;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}
+
+.more-padding {
+  padding: 18px;
+}
+
+.card-wrapper {
+  .card {
+    height: auto !important;
+  }
+  .card-body {
+    display: flex;
+    flex: inherit;
+    text-align: center;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 22px 20px;
+  }
+}
+
+.skeleton-loader {
+  width: 100%;
+  display: block;
+  &:first-child {
+    max-width: 90px;
+    margin: 15px auto 3px;
+  }
+  &:last-child {
+    margin: 10px auto 3px;
+    max-width: 55px;
+  }
+}
+
+.card-text {
+  font-size: 22px;
+}

frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map, share } from 'rxjs/operators';
+import { LightningApiService } from '../lightning-api.service';
+
+@Component({
+  selector: 'app-lightning-dashboard',
+  templateUrl: './lightning-dashboard.component.html',
+  styleUrls: ['./lightning-dashboard.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LightningDashboardComponent implements OnInit {
+  nodesByCapacity$: Observable<any>;
+  nodesByChannels$: Observable<any>;
+  statistics$: Observable<any>;
+
+  constructor(
+    private lightningApiService: LightningApiService,
+  ) { }
+
+  ngOnInit(): void {
+    const sharedObservable = this.lightningApiService.listTopNodes$().pipe(share());
+
+    this.nodesByCapacity$ = sharedObservable
+      .pipe(
+        map((object) => object.topByCapacity),
+      );
+
+    this.nodesByChannels$ = sharedObservable
+      .pipe(
+        map((object) => object.topByChannels),
+      );
+
+    this.statistics$ = this.lightningApiService.getLatestStatistics$();
+  }
+
+}

frontend/src/app/lightning/lightning.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../shared/shared.module';
+import { LightningDashboardComponent } from './lightning-dashboard/lightning-dashboard.component';
+import { LightningApiService } from './lightning-api.service';
+import { NodesListComponent } from './nodes-list/nodes-list.component';
+import { RouterModule } from '@angular/router';
+import { NodeStatisticsComponent } from './node-statistics/node-statistics.component';
+@NgModule({
+  declarations: [
+    LightningDashboardComponent,
+    NodesListComponent,
+    NodeStatisticsComponent,
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    RouterModule,
+  ],
+  providers: [
+    LightningApiService,
+  ]
+})
+export class LightningModule { }

frontend/src/app/lightning/node-statistics/node-statistics.component.html

@@ -0,0 +1,64 @@
+<div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward">
+  <div class="fee-estimation-container">
+    <div class="item">
+      <h5 class="card-title" i18n="mining.rewards">Nodes</h5>
+      <div class="card-text" i18n-ngbTooltip="mining.rewards-desc"
+        ngbTooltip="Amount being paid to miners in the past 144 blocks" placement="bottom">
+        <div class="fee-text">
+          {{ statistics.latest.node_count | number }}
+        </div>
+        <span class="fiat">
+          <app-change [current]="statistics.latest.node_count" [previous]="statistics.previous.node_count"></app-change>
+        </span>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5>
+      <div class="card-text" i18n-ngbTooltip="mining.rewards-per-tx-desc"
+        ngbTooltip="Average miners' reward per transaction in the past 144 blocks" placement="bottom">
+        <div class="fee-text">
+          {{ statistics.latest.channel_count | number }}
+        </div>
+        <span class="fiat">
+          <app-change [current]="statistics.latest.channel_count" [previous]="statistics.previous.channel_count"></app-change>
+        </span>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="mining.average-fee">Average Channel</h5>
+      <div class="card-text" i18n-ngbTooltip="mining.average-fee"
+        ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
+        <app-amount [satoshis]="statistics.latest.average_channel_size" digitsInfo="1.2-3"></app-amount>
+        <span class="fiat">
+          <app-change [current]="statistics.latest.average_channel_size" [previous]="statistics.previous.average_channel_size"></app-change>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ng-template #loadingReward>
+  <div class="fee-estimation-container loading-container">
+    <div class="item">
+      <h5 class="card-title" i18n="mining.rewards">Nodes</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="mining.average-fee">Average Channel</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+  </div>
+</ng-template>

frontend/src/app/lightning/node-statistics/node-statistics.component.scss

@@ -0,0 +1,85 @@
+.card-title {
+  color: #4a68b9;
+  font-size: 10px;
+  margin-bottom: 4px;  
+  font-size: 1rem;
+}
+
+.card-text {
+  font-size: 22px;
+  span {
+    font-size: 11px;
+    position: relative;
+    top: -2px;
+    display: inline-flex;
+  }
+  .green-color {
+    display: block;
+  }
+}
+
+.fee-estimation-container {
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: 376px) {
+    flex-direction: row;
+  }  
+  .item {
+    max-width: 150px;
+    margin: 0;
+    width: -webkit-fill-available;
+    @media (min-width: 376px) {
+      margin: 0 auto 0px;
+    }    
+    &:first-child{
+      display: none;
+      @media (min-width: 485px) {
+        display: block;
+      }    
+      @media (min-width: 768px) {
+        display: none;
+      }    
+      @media (min-width: 992px) {
+        display: block;
+      }    
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .card-text span {
+      color: #ffffff66;
+      font-size: 12px;
+      top: 0px;
+    }
+    .fee-text{
+      border-bottom: 1px solid #ffffff1c;
+      width: fit-content;
+      margin: auto;
+      line-height: 1.45;
+      padding: 0px 2px;
+    }
+    .fiat {
+      display: block;
+      font-size: 14px !important;
+    }
+  }
+}
+
+.loading-container {
+  min-height: 76px;
+}
+
+.card-text {
+  .skeleton-loader {
+    width: 100%;
+    display: block;
+    &:first-child {
+      max-width: 90px;
+      margin: 15px auto 3px;
+    }
+    &:last-child {
+      margin: 10px auto 3px;
+      max-width: 55px;
+    }
+  }
+}

frontend/src/app/lightning/node-statistics/node-statistics.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-node-statistics',
+  templateUrl: './node-statistics.component.html',
+  styleUrls: ['./node-statistics.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodeStatisticsComponent implements OnInit {
+  @Input() statistics$: Observable<any>;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/lightning/nodes-list/nodes-list.component.html

@@ -0,0 +1,39 @@
+<div style="min-height: 295px">
+
+  <table class="table table-borderless">
+    <thead>
+      <th class="alias text-left" i18n="nodes.alias">Alias</th>
+      <th class="capacity text-right" i18n="node.capacity">Capacity</th>
+      <th class="channels text-right" i18n="node.channels">Channels</th>
+    </thead>
+    <tbody *ngIf="nodes$ | async as nodes; else skeleton">
+      <tr *ngFor="let node of nodes; let i = index;">
+        <td class="alias text-left">
+          <a [routerLink]="['/lightning/nodes/:public_key' | relativeUrl, node.public]">{{ node.alias }}</a>
+        </td>
+        <td class="capacity text-right">
+          <app-amount [satoshis]="node.capacity_left + node.capacity_right" digitsInfo="1.2-2"></app-amount>
+        </td>
+        <td class="channels text-right">
+          {{ node.channels_left + node.channels_right | number }}
+        </td>
+      </tr>
+    </tbody>
+    <ng-template #skeleton>
+      <tbody>
+        <tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
+          <td class="alias text-left">
+            <span class="skeleton-loader"></span>
+          </td>
+          <td class="capacity text-right">
+            <span class="skeleton-loader"></span>
+          </td>
+          <td class="channels text-right">
+            <span class="skeleton-loader"></span>
+          </td>
+        </tr>
+      </tbody>
+    </ng-template>
+  </table>
+
+</div>

frontend/src/app/lightning/nodes-list/nodes-list.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-nodes-list',
+  templateUrl: './nodes-list.component.html',
+  styleUrls: ['./nodes-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodesListComponent implements OnInit {
+  @Input() nodes$: Observable<any>;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}