Merge branch 'master' into simon/channel-closing-type-header

frontend/src/app/lightning/channel/channel-box/channel-box.component.html

@@ -4,7 +4,7 @@
     <a [routerLink]="['/lightning/node' | relativeUrl, channel.public_key]" >
       {{ channel.public_key | shortenString : 12 }}
     </a>
-    <app-clipboard [text]="channel.node1_public_key"></app-clipboard>
+    <app-clipboard [text]="channel.public_key"></app-clipboard>
   </div>
   <div class="box-right">
     <div class="second-line">{{ channel.channels }} channels</div>
@@ -51,4 +51,4 @@
   </div>
 </div>
 
-<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
+<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>

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

@@ -58,7 +58,7 @@
       </table>
     </div>
     <div class="col-md map-col">
-      <app-nodes-channels-map *ngIf="!error" [style]="'channelpage'" [channel]="channelGeo" [fitContainer]="true" (readyEvent)="onMapReady()"></app-nodes-channels-map>
+      <app-nodes-channels-map *ngIf="!error" [style]="'channelpage'" [channel]="channelGeo" [fitContainer]="true" [placeholder]="true" (readyEvent)="onMapReady()"></app-nodes-channels-map>
     </div>
   </div>
 </div>

frontend/src/app/lightning/channel/channel.component.html

@@ -66,13 +66,13 @@
     <ng-container *ngIf="transactions$ | async as transactions">
       <ng-template [ngIf]="transactions[0]">
         <h3>Opening transaction</h3>
-        <app-transactions-list [transactions]="[transactions[0]]" [showConfirmations]="true" [rowLimit]="5" [channels]="{ inputs: [], outputs: [channel] }"></app-transactions-list>
+        <app-transactions-list [transactions]="[transactions[0]]" [showConfirmations]="true" [rowLimit]="5"></app-transactions-list>
       </ng-template>
       <ng-template [ngIf]="transactions[1]">
         <div class="closing-header">
           <h3 style="margin: 0;">Closing transaction</h3>&nbsp;&nbsp;<app-closing-type [type]="channel.closing_reason"></app-closing-type>
         </div>
-        <app-transactions-list [transactions]="[transactions[1]]" [showConfirmations]="true" [rowLimit]="5" [channels]="{ inputs: [channel], outputs: [] }"></app-transactions-list>
+        <app-transactions-list [transactions]="[transactions[1]]" [showConfirmations]="true" [rowLimit]="5"></app-transactions-list>
       </ng-template>
     </ng-container>
 

frontend/src/app/lightning/channel/channel.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { forkJoin, Observable, of, share, zip } from 'rxjs';
 import { catchError, map, shareReplay, switchMap, tap } from 'rxjs/operators';
+import { IChannel } from 'src/app/interfaces/node-api.interface';
 import { ApiService } from 'src/app/services/api.service';
 import { ElectrsApiService } from 'src/app/services/electrs-api.service';
 import { SeoService } from 'src/app/services/seo.service';
@@ -62,10 +63,15 @@ export class ChannelComponent implements OnInit {
     );
 
     this.transactions$ = this.channel$.pipe(
-      switchMap((data) => {
+      switchMap((channel: IChannel) => {
         return zip([
-          data.transaction_id ? this.electrsApiService.getTransaction$(data.transaction_id) : of(null),
-          data.closing_transaction_id ? this.electrsApiService.getTransaction$(data.closing_transaction_id) : of(null),
+          channel.transaction_id ? this.electrsApiService.getTransaction$(channel.transaction_id) : of(null),
+          channel.closing_transaction_id ? this.electrsApiService.getTransaction$(channel.closing_transaction_id).pipe(
+            map((tx) => {
+              tx._channels = { inputs: {0: channel}, outputs: {}};
+              return tx;
+            })
+          ) : of(null),
         ]);
       }),
     );

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

@@ -87,8 +87,6 @@
 </ng-template>
 
 <ng-template #skeleton>
-  <h2 class="float-left" i18n="lightning.channels">Channels</h2>
-
   <table class="table table-borderless">
   <ng-container *ngTemplateOutlet="tableHeader"></ng-container>
   <tbody>

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

@@ -52,7 +52,7 @@
       </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>
+      <app-nodes-channels-map *ngIf="!error" [style]="'nodepage'" [publicKey]="node.public_key" [fitContainer]="true" [placeholder]="true" [hasLocation]="!!node.as_number" (readyEvent)="onMapReady()"></app-nodes-channels-map>
     </div>
   </div>
 </div>

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

@@ -1,7 +1,7 @@
 <div class="container-xl" *ngIf="(node$ | async) as node">
   <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
   <div class="title-container mb-2" *ngIf="!error">
-    <h1 class="mb-0">{{ node.alias }}</h1>
+    <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
     <span class="tx-link">
       <a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
         {{ node.public_key | shortenString : publicKeySize }}
@@ -131,7 +131,6 @@
       <app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart>
     </div>
 
-    <h2 i18n="lightning.active-channels-map">Active channels map</h2>
     <app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels>
 
     <div class="d-flex justify-content-between">

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

@@ -22,6 +22,7 @@ export class NodesChannelsMap implements OnInit {
   @Input() channel: any[] = [];
   @Input() fitContainer = false;
   @Input() hasLocation = true;
+  @Input() placeholder = false;
   @Output() readyEvent = new EventEmitter();
 
   channelsObservable: Observable<any>; 
@@ -201,11 +202,26 @@ export class NodesChannelsMap implements OnInit {
 
   prepareChartOptions(nodes, channels) {
     let title: object;
-    if (channels.length === 0) {
+    if (channels.length === 0 && !this.placeholder) {
       this.chartOptions = null;
       return;
     }
 
+    // empty map fallback
+    if (channels.length === 0 && this.placeholder) {
+      title = {
+        textStyle: {
+          color: 'white',
+          fontSize: 18
+        },
+        text: $localize`No geolocation data available`,
+        left: 'center',
+        top: 'center'
+      };
+      this.zoom = 1.5;
+      this.center = [0, 20];
+    }
+
     this.chartOptions = {
       silent: this.style === 'widget',
       title: title ?? undefined,

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

@@ -1,2 +1,9 @@
-<div *ngIf="channelsObservable$ | async" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)">
+<div *ngIf="channelsObservable$ | async" style="min-height: 455px">
+  <h2 i18n="lightning.active-channels-map">Active channels map</h2>
+  <div echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)">
+  </div>
+</div>
+
+<div *ngIf="isLoading" class="text-center loading-spinner">
+  <div class="spinner-border text-light"></div>
 </div>

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

@@ -0,0 +1,9 @@
+.loading-spinner {
+  min-height: 455px;
+  z-index: 100;
+}
+
+.spinner-border {
+  position: relative;
+  top: 225px;
+}

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

@@ -1,8 +1,8 @@
 import { formatNumber } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges } from '@angular/core';
 import { Router } from '@angular/router';
 import { ECharts, EChartsOption, TreemapSeriesOption } from 'echarts';
-import { Observable, tap } from 'rxjs';
+import { Observable, share, switchMap, tap } from 'rxjs';
 import { lerpColor } from 'src/app/shared/graphs.utils';
 import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
 import { LightningApiService } from '../lightning-api.service';
@@ -25,7 +25,7 @@ export class NodeChannels implements OnChanges {
   };
 
   channelsObservable$: Observable<any>;
-  isLoading: true;
+  isLoading = true;
 
   constructor(
     @Inject(LOCALE_ID) public locale: string,
@@ -41,9 +41,20 @@ export class NodeChannels implements OnChanges {
 
     this.channelsObservable$ = this.lightningApiService.getChannelsByNodeId$(this.publicKey, -1, 'active')
       .pipe(
-        tap((response) => {
-          const biggestCapacity = response.body[0].capacity;
-          this.prepareChartOptions(response.body.map(channel => {
+        switchMap((response) => {
+          this.isLoading = true;
+          if ((response.body?.length ?? 0) <= 0) {
+            return [];
+          }
+          return [response.body];
+        }),
+        tap((body: any[]) => {
+          if (body.length === 0) {
+            this.isLoading = false;
+            return;
+          }
+          const biggestCapacity = body[0].capacity;
+          this.prepareChartOptions(body.map(channel => {
             return {
               name: channel.node.alias,
               value: channel.capacity,
@@ -54,7 +65,9 @@ export class NodeChannels implements OnChanges {
               }
             };
           }));
-        })
+          this.isLoading = false;
+        }),
+        share(),
       );
   }