Add basic lightning justice page

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

@@ -0,0 +1,79 @@
+
+
+<div class="container-xl full-height" style="min-height: 335px">
+  <h1 class="float-left" i18n="lightning.liquidity-ranking">Penalties</h1>
+
+  <div class="clearfix"></div>
+
+  <div style="min-height: 295px">
+    <table class="table table-borderless">
+      <thead>
+        <th class="timestamp" i18n="lightning.closed-at">Closed</th>
+        <th class="channels text-right" i18n="lightning.capacity">Capacity</th>
+        <th class="node text-right"></th>
+        <th class="node text-right" i18n="lightning.node">Nodes</th>
+        <th class="channelid text-right" i18n="channels.id">Channel ID</th>
+        <th></th>
+      </thead>
+      <tbody *ngIf="justiceChannels$ | async as channels">
+        <ng-container *ngFor="let channel of channels;">
+          <tr>
+            <td class="timestamp">
+              &lrm;{{ channel.closing_date | date:'yyyy-MM-dd HH:mm' }}
+            </td>
+            <td class="capacity text-right">
+              <app-amount *ngIf="channel.capacity > 100000000; else smallnode" [satoshis]="channel.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
+              <ng-template #smallnode>
+                {{ channel.capacity | amountShortener: 1 }}
+                <span class="sats" i18n="shared.sats">sats</span>
+              </ng-template>
+            </td>
+            <td class="alias text-right">
+              <app-truncate [text]="channel.alias_left || '?'" [maxWidth]="200" [lastChars]="6" textAlign="end" [inline]="true"></app-truncate>
+            </td>
+            <td class="alias text-right">
+              <app-truncate [text]="channel.alias_right || '?'" [maxWidth]="200" [lastChars]="6" textAlign="end" [inline]="true"></app-truncate>
+            </td>
+            <td class="channelid text-right">
+              <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.short_id }}</a>
+             </td>
+             <td class="text-right">
+              <button type="button" class="btn btn-outline-info details-button btn-sm" (click)="toggleDetails(channel)"
+                i18n="transaction.details|Transaction Details">Details</button>
+             </td>
+          </tr>
+          <tr *ngIf="channel.short_id === expanded">
+            <ng-container *ngTemplateOutlet="channelTransactions"></ng-container>
+          </tr>
+        </ng-container>
+      </tbody>
+    </table>
+
+    <div class="clearfix"></div>
+    <br>
+  </div>
+  
+</div>
+
+<ng-template #channelTransactions>
+  <td colspan="6" *ngIf="transactions && !loadingTransactions else loadingTemplate;">
+    <ng-template [ngIf]="transactions[0]">
+      <div class="d-flex">
+        <h5 i18n="lightning.opening-transaction">Opening transaction</h5>
+      </div>
+      <app-transactions-list #txList1 [transactions]="[transactions[0]]" [showConfirmations]="true" [rowLimit]="5">
+      </app-transactions-list>
+    </ng-template>
+    <ng-template [ngIf]="transactions[1]">
+      <div class="closing-header d-flex">
+        <h5 style="margin: 0;" i18n="lightning.closing-transaction">Closing transaction</h5>&nbsp;&nbsp;<app-closing-type [type]="3"></app-closing-type>
+      </div>
+      <app-transactions-list #txList2 [transactions]="[transactions[1]]" [showConfirmations]="true" [rowLimit]="5">
+      </app-transactions-list>
+    </ng-template>
+  </td>
+</ng-template>
+
+<ng-template #loadingTemplate>
+  <span>loading...</span>
+</ng-template>

frontend/src/app/lightning/justice-list/justice-list.component.scss

@@ -0,0 +1,52 @@
+.container-xl {
+  max-width: 1400px;
+}
+.container-xl.widget {
+  padding-right: 0px;
+  padding-left: 0px;
+  padding-bottom: 0px;
+}
+
+tr, td, th {
+  border: 0px;
+  padding-top: 0.65rem !important;
+  padding-bottom: 0.7rem !important;
+}
+
+.clear-link {
+  color: white;
+}
+
+.pool {
+  width: 15%;
+  @media (max-width: 575px) {
+    width: 75%;
+  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+}
+.pool-name {
+  display: inline-block;
+  vertical-align: text-top;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.liquidity {
+  width: 10%;
+  @media (max-width: 575px) {
+    width: 25%;
+  }
+}
+
+.fiat {
+  width: 15%;
+  @media (min-width: 768px) and (max-width: 991px) {
+    display: none !important;
+  }
+  @media (max-width: 575px) {
+    display: none !important;
+  }
+}

frontend/src/app/lightning/justice-list/justice-list.component.ts

@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { map, Observable, of, Subject, Subscription, switchMap, tap, zip } from 'rxjs';
+import { IChannel } from '../../interfaces/node-api.interface';
+import { LightningApiService } from '../lightning-api.service';
+import { Transaction } from '../../interfaces/electrs.interface';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+
+@Component({
+  selector: 'app-justice-list',
+  templateUrl: './justice-list.component.html',
+  styleUrls: ['./justice-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class JusticeList implements OnInit, OnDestroy {
+  justiceChannels$: Observable<any[]>;
+  fetchTransactions$: Subject<IChannel> = new Subject();
+  transactionsSubscription: Subscription;
+  transactions: Transaction[];
+  expanded: string = null;
+  loadingTransactions: boolean = true;
+
+  constructor(
+    private apiService: LightningApiService,
+    private electrsApiService: ElectrsApiService,
+    private cd: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.justiceChannels$ = this.apiService.getPenaltyClosedChannels$();
+
+    this.transactionsSubscription = this.fetchTransactions$.pipe(
+      tap(() => {
+        this.loadingTransactions = true;
+      }),
+      switchMap((channel: IChannel) => {
+        return zip([
+          channel.transaction_id ? this.electrsApiService.getTransaction$(channel.transaction_id) : of(null),
+          channel.closing_transaction_id ? this.electrsApiService.getTransaction$(channel.closing_transaction_id) : of(null),
+        ]);
+      }),
+    ).subscribe((transactions) => {
+      this.transactions = transactions;
+      this.loadingTransactions = false;
+      this.cd.markForCheck();
+    });
+  }
+
+  toggleDetails(channel: any): void {
+    if (this.expanded === channel.short_id) {
+      this.expanded = null;
+    } else {
+      this.expanded = channel.short_id;
+      this.fetchTransactions$.next(channel);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.transactionsSubscription.unsubscribe();
+  }
+}