Store and display stats and node top lists

frontend/mempool-frontend-config.sample.json

@@ -16,5 +16,6 @@
   "MEMPOOL_WEBSITE_URL": "https://mempool.space",
   "LIQUID_WEBSITE_URL": "https://liquid.network",
   "BISQ_WEBSITE_URL": "https://bisq.markets",
-  "MINING_DASHBOARD": true
+  "MINING_DASHBOARD": true,
+  "LIGHTNING": false
 }

frontend/proxy.conf.local.js

@@ -102,6 +102,16 @@ if (configContent && configContent.BASE_MODULE === 'bisq') {
 }
 
 PROXY_CONFIG.push(...[
+  {
+    context: ['/lightning/api/v1/**'],
+    target: `http://localhost:8899`,
+    secure: false,
+    changeOrigin: true,
+    proxyTimeout: 30000,
+    pathRewrite: {
+        "^/lightning/api": "/api"
+    },
+  },
   {
     context: ['/api/v1/**'],
     target: `http://localhost:8999`,

frontend/src/app/app-routing.module.ts

@@ -20,6 +20,7 @@ import { AssetsFeaturedComponent } from './components/assets/assets-featured/ass
 import { AssetsComponent } from './components/assets/assets.component';
 import { AssetComponent } from './components/asset/asset.component';
 import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.component';
+import { LightningDashboardComponent } from './lightning/lightning-dashboard/lightning-dashboard.component';
 
 let routes: Routes = [
   { 
@@ -96,6 +97,11 @@ let routes: Routes = [
             path: 'api',
             loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
           },
+          {
+            path: 'lightning',
+            component: LightningDashboardComponent,
+            loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule)
+          },
         ],
       },
       {
@@ -186,6 +192,11 @@ let routes: Routes = [
             path: 'api',
             loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
           },
+          {
+            path: 'lightning',
+            component: LightningDashboardComponent,
+            loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule)
+          },
         ],
       },
       {
@@ -273,6 +284,11 @@ let routes: Routes = [
         path: 'api',
         loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
       },
+      {
+        path: 'lightning',
+        component: LightningDashboardComponent,
+        loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule)
+      },
     ],
   },
   {

frontend/src/app/components/change/change.component.html

@@ -0,0 +1,3 @@
+<span [style]="change >= 0 ? 'color: #42B747' : 'color: #B74242'">
+  {{ change >= 0 ? '+' : '' }}{{ change | amountShortener }}%
+</span>

frontend/src/app/components/change/change.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+
+@Component({
+  selector: 'app-change',
+  templateUrl: './change.component.html',
+  styleUrls: ['./change.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChangeComponent implements OnChanges {
+  @Input() current: number;
+  @Input() previous: number;
+
+  change: number;
+
+  constructor() { }
+
+  ngOnChanges(): void {
+    this.change = (this.current - this.previous) / this.previous * 100;
+  }
+
+}

frontend/src/app/components/master-page/master-page.component.html

@@ -35,15 +35,15 @@
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" id="btn-pools" *ngIf="stateService.env.MINING_DASHBOARD">
         <a class="nav-link" [routerLink]="['/mining' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'hammer']" [fixedWidth]="true" i18n-title="mining.mining-dashboard" title="Mining Dashboard"></fa-icon></a>
       </li>
+      <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" id="btn-pools" *ngIf="stateService.env.LIGHTNING">
+        <a class="nav-link" [routerLink]="['/lightning' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'bolt']" [fixedWidth]="true" i18n-title="master-page.lightning" title="Lightning Explorer"></fa-icon></a>
+      </li>
       <li class="nav-item" routerLinkActive="active" id="btn-blocks" *ngIf="!stateService.env.MINING_DASHBOARD">
         <a class="nav-link" [routerLink]="['/blocks' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cubes']" [fixedWidth]="true" i18n-title="master-page.blocks" title="Blocks"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active" id="btn-graphs">
         <a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
       </li>
-      <li class="nav-item d-none d-lg-block" routerLinkActive="active" id="btn-tv">
-        <a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon></a>
-      </li>
       <li class="nav-item" routerLinkActive="active" id="btn-docs">
         <a class="nav-link" [routerLink]="['/docs' | relativeUrl ]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="documentation.title" title="Documentation"></fa-icon></a>
       </li>

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 {
+  }
+
+}

frontend/src/app/services/state.service.ts

@@ -37,6 +37,7 @@ export interface Env {
   LIQUID_WEBSITE_URL: string;
   BISQ_WEBSITE_URL: string;
   MINING_DASHBOARD: boolean;
+  LIGHTNING: boolean;
 }
 
 const defaultEnv: Env = {
@@ -60,7 +61,8 @@ const defaultEnv: Env = {
   'MEMPOOL_WEBSITE_URL': 'https://mempool.space',
   'LIQUID_WEBSITE_URL': 'https://liquid.network',
   'BISQ_WEBSITE_URL': 'https://bisq.markets',
-  'MINING_DASHBOARD': true
+  'MINING_DASHBOARD': true,
+  'LIGHTNING': false,
 };
 
 @Injectable({

frontend/src/app/shared/shared.module.ts

@@ -40,7 +40,6 @@ import { BlockchainBlocksComponent } from '../components/blockchain-blocks/block
 import { AmountComponent } from '../components/amount/amount.component';
 import { RouterModule } from '@angular/router';
 import { CapAddressPipe } from './pipes/cap-address-pipe/cap-address-pipe';
-
 import { StartComponent } from '../components/start/start.component';
 import { TransactionComponent } from '../components/transaction/transaction.component';
 import { TransactionsListComponent } from '../components/transactions-list/transactions-list.component';
@@ -74,6 +73,7 @@ import { DataCyDirective } from '../data-cy.directive';
 import { LoadingIndicatorComponent } from '../components/loading-indicator/loading-indicator.component';
 import { IndexingProgressComponent } from '../components/indexing-progress/indexing-progress.component';
 import { SvgImagesComponent } from '../components/svg-images/svg-images.component';
+import { ChangeComponent } from '../components/change/change.component';
 
 @NgModule({
   declarations: [
@@ -104,7 +104,6 @@ import { SvgImagesComponent } from '../components/svg-images/svg-images.componen
     MempoolBlocksComponent,
     BlockchainBlocksComponent,
     AmountComponent,
-
     AboutComponent,
     MasterPageComponent,
     BisqMasterPageComponent,
@@ -142,6 +141,7 @@ import { SvgImagesComponent } from '../components/svg-images/svg-images.componen
     LoadingIndicatorComponent,
     IndexingProgressComponent,
     SvgImagesComponent,
+    ChangeComponent,
   ],
   imports: [
     CommonModule,
@@ -163,6 +163,7 @@ import { SvgImagesComponent } from '../components/svg-images/svg-images.componen
     NoSanitizePipe,
     ShortenStringPipe,
     CapAddressPipe,
+    AmountShortenerPipe,
   ],
   exports: [
     RouterModule,
@@ -203,7 +204,6 @@ import { SvgImagesComponent } from '../components/svg-images/svg-images.componen
     MempoolBlocksComponent,
     BlockchainBlocksComponent,
     AmountComponent,
-
     StartComponent,
     TransactionComponent,
     BlockComponent,
@@ -237,6 +237,7 @@ import { SvgImagesComponent } from '../components/svg-images/svg-images.componen
     LoadingIndicatorComponent,
     IndexingProgressComponent,
     SvgImagesComponent,
+    ChangeComponent,
   ]
 })
 export class SharedModule {