Merge branch 'master' into nymkappa/feature/align-dashboards

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

@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { StateService } from '../../services/state.service';
 import { Observable, Subscription } from 'rxjs';
-import { Price } from 'src/app/services/price.service';
+import { Price } from '../../services/price.service';
 
 @Component({
   selector: 'app-amount',

frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts

@@ -5,7 +5,7 @@ import BlockScene from './block-scene';
 import TxSprite from './tx-sprite';
 import TxView from './tx-view';
 import { Position } from './sprite-types';
-import { Price } from 'src/app/services/price.service';
+import { Price } from '../../services/price.service';
 
 @Component({
   selector: 'app-block-overview-graph',

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, ViewChild, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
 import { TransactionStripped } from '../../interfaces/websocket.interface';
 import { Position } from '../../components/block-overview-graph/sprite-types.js';
-import { Price } from 'src/app/services/price.service';
+import { Price } from '../../services/price.service';
 
 @Component({
   selector: 'app-block-overview-tooltip',

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

@@ -13,7 +13,7 @@ import { BlockAudit, BlockExtended, TransactionStripped } from '../../interfaces
 import { ApiService } from '../../services/api.service';
 import { BlockOverviewGraphComponent } from '../../components/block-overview-graph/block-overview-graph.component';
 import { detectWebGL } from '../../shared/graphs.utils';
-import { PriceService, Price } from 'src/app/services/price.service';
+import { PriceService, Price } from '../../services/price.service';
 
 @Component({
   selector: 'app-block',

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

@@ -22,7 +22,7 @@ import { SeoService } from '../../services/seo.service';
 import { BlockExtended, CpfpInfo } from '../../interfaces/node-api.interface';
 import { LiquidUnblinding } from './liquid-ublinding';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
-import { Price, PriceService } from 'src/app/services/price.service';
+import { Price, PriceService } from '../../services/price.service';
 
 @Component({
   selector: 'app-transaction',

frontend/src/app/components/transactions-list/transactions-list.component.ts

@@ -9,7 +9,7 @@ import { AssetsService } from '../../services/assets.service';
 import { filter, map, tap, switchMap, shareReplay } from 'rxjs/operators';
 import { BlockExtended } from '../../interfaces/node-api.interface';
 import { ApiService } from '../../services/api.service';
-import { PriceService } from 'src/app/services/price.service';
+import { PriceService } from '../../services/price.service';
 
 @Component({
   selector: 'app-transactions-list',

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, ViewChild, Input, OnChanges, OnInit } from '@angular/core';
 import { tap } from 'rxjs';
-import { Price, PriceService } from 'src/app/services/price.service';
+import { Price, PriceService } from '../../services/price.service';
 
 interface Xput {
   type: 'input' | 'output' | 'fee';

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

@@ -1,25 +1,32 @@
 <div class="container-xl" *ngIf="(channel$ | async) as channel; else skeletonLoader">
-  <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
-  <div class="title-container">
-    <h1 class="mb-0">{{ channel.short_id }}</h1>
-    <span class="tx-link">
-      <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
-      <app-clipboard [text]="channel.id"></app-clipboard>
-    </span>
-  </div>
-  <div class="badges mb-2">
-    <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0" i18n="status.inactive">Inactive</span>
-    <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1" i18n="status.active">Active</span>
-    <span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2" i18n="status.closed">Closed</span>
-    <app-closing-type *ngIf="channel.closing_reason" [type]="channel.closing_reason"></app-closing-type>
-  </div>
+
+  <ng-container *ngIf="!error">
+    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
+    <div class="title-container">
+      <h1 class="mb-0">{{ channel.short_id }}</h1>
+      <span class="tx-link">
+        <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
+        <app-clipboard [text]="channel.id"></app-clipboard>
+      </span>
+    </div>
+    <div class="badges mb-2">
+      <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0" i18n="status.inactive">Inactive</span>
+      <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1" i18n="status.active">Active</span>
+      <span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2" i18n="status.closed">Closed</span>
+      <app-closing-type *ngIf="channel.closing_reason" [type]="channel.closing_reason"></app-closing-type>
+    </div>
+  </ng-container>
 
   <div class="clearfix"></div>
 
+  <div *ngIf="error" class="d-flex flex-column justify-content-around align-items-center mt-5 w-100" style="min-height: 100px">
+    <span class="text-center" i18n="lightning.channel-not-found">No channel found for short id "{{ channel.short_id }}"</span>
+  </div>
+
   <app-nodes-channels-map *ngIf="!error && (channelGeo$ | async) as channelGeo" [style]="'channelpage'"
     [channel]="channelGeo"></app-nodes-channels-map>
 
-  <div class="box">
+  <div class="box" *ngIf="!error">
 
       <div class="row">
         <div class="col-md">
@@ -65,7 +72,7 @@
 
   <br>
 
-  <div class="row row-cols-1 row-cols-md-2">
+  <div class="row row-cols-1 row-cols-md-2" *ngIf="!error">
     <div class="col">
       <app-channel-box [channel]="channel.node_left"></app-channel-box>
       <app-channel-close-box *ngIf="showCloseBoxes(channel)" [channel]="channel" [local]="channel.node_left" [remote]="channel.node_right"></app-channel-close-box>
@@ -104,14 +111,6 @@
 
 <br>
 
-<ng-template [ngIf]="error">
-  <div class="text-center">
-    <span i18n="error.general-loading-data">Error loading data.</span>
-    <br><br>
-    <i>{{ error.status }}: {{ error.error }}</i>
-  </div>
-</ng-template>
-
 <ng-template #skeletonLoader>
   <div class="container-xl">
     <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>

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

@@ -38,7 +38,9 @@ export class ChannelComponent implements OnInit {
               }),
               catchError((err) => {
                 this.error = err;
-                return of(null);
+                return [{
+                  short_id: params.get('short_id')
+                }];
               })
             );
         }),

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

@@ -1,20 +1,23 @@
 <div class="container-xl" *ngIf="(node$ | async) as node; else skeletonLoader">
-  <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 text-truncate">{{ node.alias }}</h1>
-    <span class="tx-link">
-      <span class="node-id">
-        <app-truncate [text]="node.public_key" [lastChars]="8" [link]="['/lightning/node' | relativeUrl, node.public_key]">
-          <app-clipboard [text]="node.public_key"></app-clipboard>
-        </app-truncate>
+
+  <ng-container *ngIf="!error">
+    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
+    <div class="title-container mb-2">
+      <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
+      <span class="tx-link">
+        <span class="node-id">
+          <app-truncate [text]="node.public_key" [lastChars]="8" [link]="['/lightning/node' | relativeUrl, node.public_key]">
+            <app-clipboard [text]="node.public_key"></app-clipboard>
+          </app-truncate>
+        </span>
       </span>
-    </span>
-  </div>
+    </div>
+  </ng-container>
 
   <div class="clearfix"></div>
 
   <div *ngIf="error" class="d-flex flex-column justify-content-around align-items-center mt-5 w-100" style="min-height: 100px">
-    <span i18n="lightning.node-not-found">No node found for public key "{{ node.public_key | shortenString : 12}}"</span>
+    <span class="text-center" i18n="lightning.node-not-found">No node found for public key "{{ node.public_key | shortenString : 12}}"</span>
   </div>
 
   <div class="box" *ngIf="!error">