Add lightning node link previews

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');
+  }
+}