Link channels from Transaction page.

frontend/src/app/components/address-labels/address-labels.component.html

@@ -1,4 +1,13 @@
-<span
-  *ngIf="label"
-  class="badge badge-pill badge-warning"
->{{ label }}</span>
+<a *ngIf="channel; else default" [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">
+  <span
+    *ngIf="label"
+    class="badge badge-pill badge-warning"
+  >{{ label }}</span>
+</a>
+
+<ng-template #default>
+  <span
+    *ngIf="label"
+    class="badge badge-pill badge-warning"
+  >{{ label }}</span>
+</ng-template>

frontend/src/app/components/address-labels/address-labels.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
 import { Vin, Vout } from '../../interfaces/electrs.interface';
 import { StateService } from 'src/app/services/state.service';
 
@@ -8,11 +8,12 @@ import { StateService } from 'src/app/services/state.service';
   styleUrls: ['./address-labels.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AddressLabelsComponent implements OnInit {
+export class AddressLabelsComponent implements OnChanges {
   network = '';
 
   @Input() vin: Vin;
   @Input() vout: Vout;
+  @Input() channel: any;
 
   label?: string;
 
@@ -22,14 +23,20 @@ export class AddressLabelsComponent implements OnInit {
     this.network = stateService.network;
   }
 
-  ngOnInit() {
-    if (this.vin) {
+  ngOnChanges() {
+    if (this.channel) {
+      this.handleChannel();
+    } else if (this.vin) {
       this.handleVin();
     } else if (this.vout) {
       this.handleVout();
     }
   }
 
+  handleChannel() {
+    this.label = `Channel open: ${this.channel.alias_left} <> ${this.channel.alias_right}`;
+  }
+
   handleVin() {
     if (this.vin.inner_witnessscript_asm) {
       if (this.vin.inner_witnessscript_asm.indexOf('OP_DEPTH OP_PUSHNUM_12 OP_EQUAL OP_IF OP_PUSHNUM_11') === 0) {

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

@@ -172,7 +172,7 @@
                     </span>
                   </a>
                   <div>
-                    <app-address-labels [vout]="vout"></app-address-labels>
+                    <app-address-labels [vout]="vout" [channel]="channels && channels[i] && channels[i].transaction_vout === vindex ? channels[i] : null"></app-address-labels>
                   </div>
                   <ng-template #scriptpubkey_type>
                     <ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { StateService } from '../../services/state.service';
-import { Observable, forkJoin, ReplaySubject, BehaviorSubject, merge, Subscription } from 'rxjs';
+import { Observable, ReplaySubject, BehaviorSubject, merge, Subscription } from 'rxjs';
 import { Outspend, Transaction, Vin, Vout } from '../../interfaces/electrs.interface';
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { environment } from 'src/environments/environment';
@@ -32,9 +32,11 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   latestBlock$: Observable<BlockExtended>;
   outspendsSubscription: Subscription;
   refreshOutspends$: ReplaySubject<string[]> = new ReplaySubject();
+  refreshChannels$: ReplaySubject<string[]> = new ReplaySubject();
   showDetails$ = new BehaviorSubject<boolean>(false);
   outspends: Outspend[][] = [];
   assetsMinimal: any;
+  channels: any[];
 
   constructor(
     public stateService: StateService,
@@ -73,7 +75,15 @@ export class TransactionsListComponent implements OnInit, OnChanges {
               };
             }
           }),
-        )
+        ),
+        this.refreshChannels$
+          .pipe(
+            switchMap((txIds) => this.apiService.getChannelByTxIds$(txIds)),
+            map((channels) => {
+              this.channels = channels;
+            }),
+          )
+        ,
     ).subscribe(() => this.ref.markForCheck());
   }
 
@@ -114,8 +124,9 @@ export class TransactionsListComponent implements OnInit, OnChanges {
         tx['addressValue'] = addressIn - addressOut;
       }
     });
-
-    this.refreshOutspends$.next(this.transactions.map((tx) => tx.txid));
+    const txIds = this.transactions.map((tx) => tx.txid);
+    this.refreshOutspends$.next(txIds);
+    this.refreshChannels$.next(txIds);
   }
 
   onScroll() {

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

@@ -231,4 +231,13 @@ export class ApiService {
   getRewardStats$(blockCount: number = 144): Observable<RewardStats> {
     return this.httpClient.get<RewardStats>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/reward-stats/${blockCount}`);
   }
+
+  getChannelByTxIds$(txIds: string[]): Observable<any[]> {
+    let params = new HttpParams();
+    txIds.forEach((txId: string) => {
+      params = params.append('txId[]', txId);
+    });
+    return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/lightning/api/v1/channels/txids/', { params });
+  }
+
 }