Add lightning node link previews

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

@@ -366,6 +366,18 @@ let routes: Routes = [
         children: [],
         component: AddressPreviewComponent
       },
+      {
+        path: 'lightning',
+        loadChildren: () => import('./lightning/lightning-previews.module').then(m => m.LightningPreviewsModule)
+      },
+      {
+        path: 'testnet/lightning',
+        loadChildren: () => import('./lightning/lightning-previews.module').then(m => m.LightningPreviewsModule)
+      },
+      {
+        path: 'signet/lightning',
+        loadChildren: () => import('./lightning/lightning-previews.module').then(m => m.LightningPreviewsModule)
+      },
     ],
   },
   {

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

@@ -7,12 +7,12 @@
     </span>
 
     <div [ngSwitch]="network.val">
-      <span *ngSwitchCase="'signet'" class="network signet"><img src="/resources/signet-logo.png" style="width: 45px;" class="signet mr-1" alt="logo"> Signet</span>
-      <span *ngSwitchCase="'testnet'" class="network testnet"><img src="/resources/testnet-logo.png" style="width: 45px;" class="mr-1" alt="testnet logo"> Testnet</span>
+      <span *ngSwitchCase="'signet'" class="network signet"><img src="/resources/signet-logo.png" style="width: 45px;" class="signet mr-1" alt="logo"> Signet <ng-template [ngIf]="(lightning$ | async)">Lightning</ng-template></span>
+      <span *ngSwitchCase="'testnet'" class="network testnet"><img src="/resources/testnet-logo.png" style="width: 45px;" class="mr-1" alt="testnet logo"> Testnet <ng-template [ngIf]="(lightning$ | async)">Lightning</ng-template></span>
       <span *ngSwitchCase="'bisq'" class="network bisq"><img src="/resources/bisq-logo.png" style="width: 45px;" class="mr-1" alt="bisq logo"> Bisq</span>
       <span *ngSwitchCase="'liquid'" class="network liquid"><img src="/resources/liquid-logo.png" style="width: 45px;" class="mr-1" alt="liquid mainnet logo"> Liquid</span>
       <span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><img src="/resources/liquidtestnet-logo.png" style="width: 45px;" class="mr-1" alt="liquid testnet logo"> Liquid Testnet</span>
-      <span *ngSwitchDefault class="network mainnet"><img src="/resources/bitcoin-logo.png" style="width: 45px;" class="mainnet mr-1" alt="bitcoin logo"> Mainnet</span>
+      <span *ngSwitchDefault class="network mainnet"><img src="/resources/bitcoin-logo.png" style="width: 45px;" class="mainnet mr-1" alt="bitcoin logo"> Mainnet <ng-template [ngIf]="(lightning$ | async)">Lightning</ng-template></span>
     </div>
   </header>
   <router-outlet></router-outlet>

frontend/src/app/components/master-page-preview/master-page-preview.component.ts

@@ -10,6 +10,7 @@ import { LanguageService } from 'src/app/services/language.service';
 })
 export class MasterPagePreviewComponent implements OnInit {
   network$: Observable<string>;
+  lightning$: Observable<boolean>;
   officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
   urlLanguage: string;
 
@@ -20,6 +21,7 @@ export class MasterPagePreviewComponent implements OnInit {
 
   ngOnInit() {
     this.network$ = merge(of(''), this.stateService.networkChanged$);
+    this.lightning$ = this.stateService.lightningChanged$;
     this.urlLanguage = this.languageService.getLanguageForUrl();
   }
 }

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

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../shared/shared.module';
+import { RouterModule } from '@angular/router';
+import { GraphsModule } from '../graphs/graphs.module';
+import { LightningModule } from './lightning.module';
+import { LightningApiService } from './lightning-api.service';
+import { NodePreviewComponent } from './node/node-preview.component';
+import { LightningPreviewsRoutingModule } from './lightning-previews.routing.module';
+@NgModule({
+  declarations: [
+    NodePreviewComponent,
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    RouterModule,
+    GraphsModule,
+    LightningPreviewsRoutingModule,
+    LightningModule,
+  ],
+  providers: [
+    LightningApiService,
+  ]
+})
+export class LightningPreviewsModule { }

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

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { NodePreviewComponent } from './node/node-preview.component';
+
+const routes: Routes = [
+    {
+      path: 'node/:public_key',
+      component: NodePreviewComponent,
+    },
+    {
+      path: '**',
+      redirectTo: ''
+    }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class LightningPreviewsRoutingModule { }

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

@@ -53,6 +53,27 @@ import { NodesChannelsMap } from '../lightning/nodes-channels-map/nodes-channels
     LightningRoutingModule,
     GraphsModule,
   ],
+  exports: [
+    LightningDashboardComponent,
+    NodesListComponent,
+    NodeStatisticsComponent,
+    NodeStatisticsChartComponent,
+    NodeComponent,
+    ChannelsListComponent,
+    ChannelComponent,
+    LightningWrapperComponent,
+    ChannelBoxComponent,
+    ClosingTypeComponent,
+    LightningStatisticsChartComponent,
+    NodesNetworksChartComponent,
+    ChannelsStatisticsComponent,
+    NodesPerISPChartComponent,
+    NodesPerCountry,
+    NodesPerISP,
+    NodesPerCountryChartComponent,
+    NodesMap,
+    NodesChannelsMap,
+  ],
   providers: [
     LightningApiService,
   ]

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

@@ -0,0 +1,50 @@
+<div class="box preview-box" *ngIf="(node$ | async) as node">
+  <div class="row">
+    <div class="col-md">
+      <h1 class="title">{{ node.alias }}</h1>
+      <table class="table table-borderless table-striped">
+        <tbody>
+          <tr>
+            <td i18n="lightning.active-capacity">Active capacity</td>
+            <td>
+              <app-amount [satoshis]="node.capacity" [noFiat]="true"></app-amount>
+            </td>
+          </tr>
+          <tr>
+            <td i18n="lightning.active-channels">Active channels</td>
+            <td>
+              {{ node.active_channel_count }}
+            </td>
+          </tr>
+          <tr>
+            <td i18n="lightning.active-channels-avg">Average size</td>
+            <td>
+              <app-amount [satoshis]="node.avgCapacity" [noFiat]="true"></app-amount>
+            </td>
+          </tr>
+          <tr *ngIf="node.city">
+            <td i18n="location">Location</td>
+            <td>
+              <span>{{ node.city.en }}</span>
+            </td>
+          </tr>
+          <tr *ngIf="node.country">
+            <td i18n="country">Country</td>
+            <td>
+              {{ node.country.en }} {{ node.flag }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="col-md map-col">
+      <app-nodes-channels-map *ngIf="!error" [style]="'nodepage'" [publicKey]="node.public_key" [fitContainer]="true" (readyEvent)="onMapReady()"></app-nodes-channels-map>
+    </div>
+  </div>
+</div>
+
+<ng-template [ngIf]="error">
+  <div class="text-center">
+    <span i18n="error.general-loading-data">Error loading data.</span>
+  </div>
+</ng-template>

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

@@ -0,0 +1,27 @@
+.title {
+  font-size: 52px;
+  margin-bottom: 48px;
+}
+
+.table {
+  font-size: 32px;
+}
+
+.map-col {
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 470px;
+  min-width: 470px;
+  padding: 0;
+  background: #181b2d;
+  max-height: 470px;
+  overflow: hidden;
+}
+
+.row {
+  margin-right: 0;
+}
+
+::ng-deep .symbol {
+  font-size: 24px;
+}

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

@@ -0,0 +1,101 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { Observable } from 'rxjs';
+import { catchError, map, switchMap } from 'rxjs/operators';
+import { SeoService } from 'src/app/services/seo.service';
+import { OpenGraphService } from 'src/app/services/opengraph.service';
+import { getFlagEmoji } from 'src/app/shared/graphs.utils';
+import { LightningApiService } from '../lightning-api.service';
+import { isMobile } from '../../shared/common.utils';
+
+@Component({
+  selector: 'app-node-preview',
+  templateUrl: './node-preview.component.html',
+  styleUrls: ['./node-preview.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodePreviewComponent implements OnInit {
+  node$: Observable<any>;
+  statistics$: Observable<any>;
+  publicKey$: Observable<string>;
+  selectedSocketIndex = 0;
+  qrCodeVisible = false;
+  channelsListStatus: string;
+  error: Error;
+  publicKey: string;
+
+  publicKeySize = 99;
+
+  constructor(
+    private lightningApiService: LightningApiService,
+    private activatedRoute: ActivatedRoute,
+    private seoService: SeoService,
+    private openGraphService: OpenGraphService,
+  ) {
+    if (isMobile()) {
+      this.publicKeySize = 12;
+    }
+  }
+
+  ngOnInit(): void {
+    this.node$ = this.activatedRoute.paramMap
+      .pipe(
+        switchMap((params: ParamMap) => {
+          this.openGraphService.waitFor('node-map');
+          this.openGraphService.waitFor('node-data');
+          this.publicKey = params.get('public_key');
+          return this.lightningApiService.getNode$(params.get('public_key'));
+        }),
+        map((node) => {
+          this.seoService.setTitle(`Node: ${node.alias}`);
+
+          const socketsObject = [];
+          for (const socket of node.sockets.split(',')) {
+            if (socket === '') {
+              continue;
+            }
+            let label = '';
+            if (socket.match(/(?:[0-9]{1,3}\.){3}[0-9]{1,3}/)) {
+              label = 'IPv4';
+            } else if (socket.indexOf('[') > -1) {
+              label = 'IPv6';
+            } else if (socket.indexOf('onion') > -1) {
+              label = 'Tor';
+            }
+            node.flag = getFlagEmoji(node.iso_code);
+            socketsObject.push({
+              label: label,
+              socket: node.public_key + '@' + socket,
+            });
+          }
+          node.socketsObject = socketsObject;
+          node.avgCapacity = node.capacity / Math.max(1, node.active_channel_count);
+
+          this.openGraphService.waitOver('node-data');
+
+          return node;
+        }),
+        catchError(err => {
+          this.error = err;
+          this.openGraphService.waitOver('node-map');
+          this.openGraphService.waitOver('node-data');
+          return [{
+            alias: this.publicKey,
+            public_key: this.publicKey,
+          }];
+        })
+      );
+  }
+
+  changeSocket(index: number) {
+    this.selectedSocketIndex = index;
+  }
+
+  onChannelsListStatusChanged(e) {
+    this.channelsListStatus = e;
+  }
+
+  onMapReady() {
+    this.openGraphService.waitOver('node-map');
+  }
+}

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html

@@ -1,4 +1,4 @@
-<div [class]="'full-container ' + style">
+<div [class]="'full-container ' + style + (fitContainer ? ' fit-container' : '')">
 
   <div *ngIf="style === 'graph'" class="card-header">
     <div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
@@ -8,7 +8,7 @@
   </div>
 
   <div *ngIf="observable$ | async" class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" (chartFinished)="onChartFinished($event)">
   </div>
 
 </div>

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss

@@ -29,6 +29,18 @@
   min-height: 250px;
 }
 
+.full-container.fit-container {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  min-height: 100px;
+
+  .chart {
+    padding: 0;
+    min-height: 100px;
+  }
+}
+
 .widget {
   width: 90vw;
   margin-left: auto;

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostListener, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Input, Output, EventEmitter, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { SeoService } from 'src/app/services/seo.service';
 import { ApiService } from 'src/app/services/api.service';
 import { Observable, switchMap, tap, zip } from 'rxjs';
@@ -20,9 +20,11 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
   @Input() style: 'graph' | 'nodepage' | 'widget' | 'channelpage' = 'graph';
   @Input() publicKey: string | undefined;
   @Input() channel: any[] = [];
+  @Input() fitContainer = false;
+  @Output() readyEvent = new EventEmitter();
 
   observable$: Observable<any>;
-  
+
   center: number[] | undefined;
   zoom: number | undefined;
   channelWidth = 0.6;
@@ -313,4 +315,8 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
       this.chartInstance.setOption(chartOptions);
     });
   }
+
+  onChartFinished(e) {
+    this.readyEvent.emit();
+  }
 }

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

@@ -71,11 +71,13 @@ const defaultEnv: Env = {
 export class StateService {
   isBrowser: boolean = isPlatformBrowser(this.platformId);
   network = '';
+  lightning = false;
   blockVSize: number;
   env: Env;
   latestBlockHeight = -1;
 
   networkChanged$ = new ReplaySubject<string>(1);
+  lightningChanged$ = new ReplaySubject<boolean>(1);
   blocks$: ReplaySubject<[BlockExtended, boolean]>;
   transactions$ = new ReplaySubject<TransactionStripped>(6);
   conversions$ = new ReplaySubject<any>(1);
@@ -122,15 +124,18 @@ export class StateService {
 
     if (this.isBrowser) {
       this.setNetworkBasedonUrl(window.location.pathname);
+      this.setLightningBasedonUrl(window.location.pathname);
       this.isTabHidden$ = fromEvent(document, 'visibilitychange').pipe(map(() => this.isHidden()), shareReplay());
     } else {
       this.setNetworkBasedonUrl('/');
+      this.setLightningBasedonUrl('/');
       this.isTabHidden$ = new BehaviorSubject(false);
     }
 
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationStart) {
         this.setNetworkBasedonUrl(event.url);
+        this.setLightningBasedonUrl(event.url);
       }
     });
 
@@ -198,6 +203,15 @@ export class StateService {
     }
   }
 
+  setLightningBasedonUrl(url: string) {
+    if (this.env.BASE_MODULE !== 'mempool') {
+      return;
+    }
+    const networkMatches = url.match(/\/lightning\//);
+    this.lightning = !!networkMatches;
+    this.lightningChanged$.next(this.lightning);
+  }
+
   getHiddenProp(){
     const prefixes = ['webkit', 'moz', 'ms', 'o'];
     if ('hidden' in document) { return 'hidden'; }

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

@@ -4,7 +4,7 @@ import { NgbCollapse, NgbCollapseModule, NgbRadioGroup, NgbTypeaheadModule } fro
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
-  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode } from '@fortawesome/free-solid-svg-icons';
+  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { MasterPageComponent } from '../components/master-page/master-page.component';
 import { MasterPagePreviewComponent } from '../components/master-page-preview/master-page-preview.component';
@@ -297,5 +297,6 @@ export class SharedModule {
     library.addIcons(faListUl);
     library.addIcons(faDownload);
     library.addIcons(faQrcode);
+    library.addIcons(faArrowRightArrowLeft);
   }
 }

unfurler/src/index.ts

@@ -150,16 +150,31 @@ class Server {
     }
 
     // handle supported preview routes
-    if (parts[0] === 'block') {
-      ogTitle = `Block: ${parts[1]}`;
-    } else if (parts[0] === 'address') {
-      ogTitle = `Address: ${parts[1]}`;
-    } else {
-      previewSupported = false;
+    switch (parts[0]) {
+      case 'block':
+        ogTitle = `Block: ${parts[1]}`;
+      break;
+      case 'address':
+        ogTitle = `Address: ${parts[1]}`;
+      break;
+      case 'lightning':
+        switch (parts[1]) {
+          case 'node':
+            ogTitle = `Lightning Node: ${parts[2]}`;
+          break;
+          case 'channel':
+            ogTitle = `Lightning Channel: ${parts[2]}`;
+          break;
+          default:
+            previewSupported = false;
+        }
+      break;
+      default:
+        previewSupported = false;
     }
 
     if (previewSupported) {
-      ogImageUrl = `${config.SERVER.HOST}/render/${lang || 'en'}/preview${path}`;
+      ogImageUrl = `${config.SERVER.HOST}${config.SERVER.HTTP_PORT ? ':' + config.SERVER.HTTP_PORT : ''}/render/${lang || 'en'}/preview${path}`;
       ogTitle = `${this.network ? capitalize(this.network) + ' ' : ''}${mode !== 'mainnet' ? capitalize(mode) + ' ' : ''}${ogTitle}`;
     } else {
       ogTitle = 'The Mempool Open Source Project™';