Closed channels forensics

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

@@ -29,7 +29,7 @@
                 <td><app-time-since [dateString]="channel.updated_at"></app-time-since></td>
               </tr>
               <tr>
-                <td i18n="address.total-sent">Transaction ID</td>
+                <td i18n="address.total-sent">Opening transaction</td>
                 <td>
                   <a [routerLink]="['/tx' | relativeUrl, channel.transaction_id + ':' + channel.transaction_vout]" >
                     <span>{{ channel.transaction_id | shortenString : 10 }}</span>
@@ -37,6 +37,23 @@
                   <app-clipboard [text]="channel.transaction_id"></app-clipboard>
                 </td>
               </tr>
+              <ng-template [ngIf]="channel.closing_transaction_id">
+                <tr *ngIf="channel.closing_transaction_id">
+                  <td i18n="address.total-sent">Closing transaction</td>
+                  <td>
+                    <a [routerLink]="['/tx' | relativeUrl, channel.closing_transaction_id]" >
+                      <span>{{ channel.closing_transaction_id | shortenString : 10 }}</span>
+                    </a>
+                    <app-clipboard [text]="channel.closing_transaction_id"></app-clipboard>
+                  </td>
+                </tr>
+                <tr>
+                  <td i18n="address.total-sent">Closing type</td>
+                  <td>
+                    <app-closing-type [type]="channel.closing_reason"></app-closing-type>
+                  </td>
+                </tr>
+              </ng-template>
             </tbody>
           </table>
         </div>
@@ -69,3 +86,11 @@
 </div>
 
 <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>

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
+import { catchError, switchMap } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
 import { LightningApiService } from '../lightning-api.service';
 
@@ -13,6 +13,7 @@ import { LightningApiService } from '../lightning-api.service';
 })
 export class ChannelComponent implements OnInit {
   channel$: Observable<any>;
+  error: any = null;
 
   constructor(
     private lightningApiService: LightningApiService,
@@ -24,8 +25,16 @@ export class ChannelComponent implements OnInit {
     this.channel$ = this.activatedRoute.paramMap
       .pipe(
         switchMap((params: ParamMap) => {
+          this.error = null;
           this.seoService.setTitle(`Channel: ${params.get('short_id')}`);
-          return this.lightningApiService.getChannel$(params.get('short_id'));
+          return this.lightningApiService.getChannel$(params.get('short_id'))
+            .pipe(
+              catchError((err) => {
+                this.error = err;
+                console.log(this.error);
+                return of(null);
+              })
+            );
         })
       );
   }

frontend/src/app/lightning/channel/closing-type/closing-type.component.html

@@ -0,0 +1 @@
+<span class="badge badge-pill badge-{{ label.class }}" >{{ label.label }}</span>

frontend/src/app/lightning/channel/closing-type/closing-type.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-closing-type',
+  templateUrl: './closing-type.component.html',
+  styleUrls: ['./closing-type.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ClosingTypeComponent implements OnChanges {
+  @Input() type = 0;
+  label: { label: string; class: string };
+
+  ngOnChanges() {
+    this.label = this.getLabelFromType(this.type);
+  }
+
+  getLabelFromType(type: number): { label: string; class: string } {
+    switch (type) {
+      case 1: return { 
+        label: 'Mutually closed',
+        class: 'success',
+      };
+      case 2: return {
+        label: 'Force closed',
+        class: 'warning',
+      };
+      case 3: return {
+        label: 'Force closed with penalty',
+        class: 'danger',
+      };
+      default: return {
+        label: 'Unknown',
+        class: 'secondary',
+      };
+    }
+  }
+}