Merge branch 'master' into nymkappa/search-bar-align

frontend/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -48,8 +48,7 @@ const providers = [
     AppComponent,
   ],
   imports: [
-    BrowserModule.withServerTransition({ appId: 'serverApp' }),
-    BrowserTransferStateModule,
+    BrowserModule,
     AppRoutingModule,
     HttpClientModule,
     BrowserAnimationsModule,

frontend/src/app/components/bisq-master-page/bisq-master-page.component.html

@@ -40,8 +40,8 @@
   </a>
 
   <div ngbDropdown (window:resize)="onResize($event)" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED || env.LIQUID_TESTNET_ENABLED">
-    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
-      <app-svg-images name="bisq" width="20" height="20" viewBox="0 0 75 75" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images>
+    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split d-flex justify-content-center align-items-center" aria-haspopup="true">
+      <app-svg-images class="d-flex justify-content-center align-items-center current-network-svg" name="bisq" width="20" height="20" viewBox="0 0 80 80"></app-svg-images>
     </button>
     <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
       <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['mainnet'] || '/')" ngbDropdownItem class="mainnet"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a>

frontend/src/app/components/bisq-master-page/bisq-master-page.component.scss

@@ -147,3 +147,18 @@ nav {
 .navbar-brand {
   margin-right: 5px;
 }
+
+.current-network-svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+:host-context(.rtl-layout) {
+  .current-network-svg {
+    width: 20px;
+    height: 20px;
+    margin-left: 5px;
+    margin-right: 0px;
+  }
+}

frontend/src/app/components/liquid-master-page/liquid-master-page.component.html

@@ -45,8 +45,8 @@
   </a>
 
   <div ngbDropdown (window:resize)="onResize()" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED || env.LIQUID_TESTNET_ENABLED">
-    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
-      <app-svg-images [name]="network.val === '' ? 'liquid' : network.val" width="22" height="22" viewBox="0 0 125 125" style="width: 30px; height: 30px; margin-right: 5px;"></app-svg-images>
+    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split d-flex justify-content-center align-items-center" aria-haspopup="true">
+      <app-svg-images class="d-flex justify-content-center align-items-center current-network-svg" [name]="network.val === '' ? 'liquid' : network.val" width="20" height="20" viewBox="0 0 125 125"></app-svg-images>
     </button>
     <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
       <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['mainnet'] || '')" ngbDropdownItem class="mainnet"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a>

frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss

@@ -136,4 +136,19 @@ nav {
 }
 .navbar-dark .navbar-nav .nav-link {
   color: #f1f1f1;
+}
+
+.current-network-svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+:host-context(.rtl-layout) {
+  .current-network-svg {
+    width: 20px;
+    height: 20px;
+    margin-left: 5px;
+    margin-right: 0px;
+  }
 }

frontend/src/app/components/master-page/master-page.component.html

@@ -18,8 +18,8 @@
   </a>
 
   <div (window:resize)="onResize()" ngbDropdown class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED || env.LIQUID_TESTNET_ENABLED">
-    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
-      <app-svg-images [name]="network.val === '' ? 'bitcoin' : network.val" width="20" height="20" viewBox="0 0 65 65" style="width: 30px; height: 30px; margin-right: 5px;"></app-svg-images>
+    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split d-flex justify-content-center align-items-center" aria-haspopup="true">
+      <app-svg-images class="d-flex justify-content-center align-items-center current-network-svg" [name]="network.val === '' ? 'bitcoin' : network.val" width="20" height="20" viewBox="0 0 65 65"></app-svg-images>
     </button>
     <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
       <a ngbDropdownItem class="mainnet" [routerLink]="networkPaths['mainnet'] || '/'"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a>

frontend/src/app/components/master-page/master-page.component.scss

@@ -193,3 +193,18 @@ nav {
     font-size: 7px;
   }
 }
+
+.current-network-svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+:host-context(.rtl-layout) {
+  .current-network-svg {
+    width: 20px;
+    height: 20px;
+    margin-left: 5px;
+    margin-right: 0px;
+  }
+}

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

@@ -22,12 +22,12 @@
       <div *ngFor="let tree of trees" class="tree">
         <p class="info">
           <span class="type">
-            <span *ngIf="isMined(tree)" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
-            <span *ngIf="isFullRbf(tree)" class="badge badge-info" i18n="transaction.full-rbf">Full RBF</span>
+            <span *ngIf="tree.mined" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
+            <span *ngIf="tree.fullRbf" class="badge badge-info" i18n="transaction.full-rbf">Full RBF</span>
           </span>
           <app-time kind="since" [time]="tree.time"></app-time>
         </p>
-        <div class="timeline-wrapper" [class.mined]="isMined(tree)">
+        <div class="timeline-wrapper" [class.mined]="tree.mined">
           <app-rbf-timeline [replacements]="tree"></app-rbf-timeline>
         </div>
       </div>
@@ -36,11 +36,6 @@
         <p i18n="rbf.no-replacements-yet">there are no replacements in the mempool yet!</p>
       </div>
     </ng-container>
-    
-    <!-- <ngb-pagination class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
-      [collectionSize]="blocksCount" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
-      (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
-    </ngb-pagination> -->
   </div>
   
 </div>

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

@@ -53,25 +53,6 @@ export class RbfList implements OnInit, OnDestroy {
     );
   }
 
-  toggleFullRbf(event) {
-    this.router.navigate([], {
-      relativeTo: this.route,
-      fragment: this.fullRbf ? null : 'fullrbf'
-    });
-  }
-
-  isFullRbf(tree: RbfTree): boolean {
-    return tree.fullRbf;
-  }
-
-  isMined(tree: RbfTree): boolean {
-    return tree.mined;
-  }
-
-  // pageChange(page: number) {
-  //   this.fromTreeSubject.next(this.lastTreeId);
-  // }
-
   ngOnDestroy(): void {
     this.websocketService.stopTrackRbf();
   }

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

@@ -379,7 +379,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
                 ancestors: tx.ancestors,
                 bestDescendant: tx.bestDescendant,
               };
-              const hasRelatives = !!(tx.ancestors.length || tx.bestDescendant);
+              const hasRelatives = !!(tx.ancestors?.length || tx.bestDescendant);
               this.hasEffectiveFeeRate = hasRelatives || (tx.effectiveFeePerVsize && (Math.abs(tx.effectiveFeePerVsize - tx.feePerVsize) > 0.01));
             } else {
               this.fetchCpfp$.next(this.tx.txid);

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

@@ -73,7 +73,7 @@
                           {{ vin.prevout.scriptpubkey_type?.toUpperCase() }}
                         </ng-template>
                         <div>
-                          <app-address-labels [vin]="vin" [channel]="tx._channels && tx._channels.inputs[vindex] || null"></app-address-labels>
+                          <app-address-labels [vin]="vin" [channel]="tx._channels && tx._channels.inputs[vindex] ? tx._channels.inputs[vindex] : null"></app-address-labels>
                         </div>
                       </ng-template>
                     </ng-container>

frontend/src/app/dashboard/dashboard.component.ts

@@ -206,16 +206,4 @@ export class DashboardComponent implements OnInit, OnDestroy {
   trackByBlock(index: number, block: BlockExtended) {
     return block.height;
   }
-
-  checkFullRbf(tree: RbfTree): void {
-    let fullRbf = false;
-    for (const replaced of tree.replaces) {
-      if (!replaced.tx.rbf) {
-        fullRbf = true;
-      }
-      replaced.replacedBy = tree.tx;
-      this.checkFullRbf(replaced);
-    }
-    tree.tx.fullRbf = fullRbf;
-  }
 }

frontend/src/app/interfaces/node-api.interface.ts

@@ -270,6 +270,7 @@ export interface IChannel {
   closing_transaction_id: string;
   closing_reason: string;
   updated_at: string;
+  closing_date?: string;
   created: string;
   status: number;
   node_left: INode,

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

@@ -0,0 +1,83 @@
+
+
+<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>
+  <td colspan="6">
+    <div class="text-center">
+      <div class="spinner-border text-light"></div>
+    </div>
+  </td>
+</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();
+  }
+}

frontend/src/app/lightning/lightning-api.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { StateService } from '../services/state.service';
-import { INodesRanking, IOldestNodes, ITopNodesPerCapacity, ITopNodesPerChannels } from '../interfaces/node-api.interface';
+import { IChannel, INodesRanking, IOldestNodes, ITopNodesPerCapacity, ITopNodesPerChannels } from '../interfaces/node-api.interface';
 
 @Injectable({
   providedIn: 'root'
@@ -84,6 +84,12 @@ export class LightningApiService {
     );
   }
 
+  getPenaltyClosedChannels$(): Observable<IChannel[]> {
+    return this.httpClient.get<IChannel[]>(
+      this.apiBasePath + '/api/v1/lightning/penalties'
+    );
+  }
+
   getOldestNodes$(): Observable<IOldestNodes[]> {
     return this.httpClient.get<IOldestNodes[]>(
       this.apiBasePath + '/api/v1/lightning/nodes/rankings/age'

frontend/src/app/lightning/lightning.module.ts

@@ -29,6 +29,7 @@ import { NodesChannelsMap } from '../lightning/nodes-channels-map/nodes-channels
 import { NodesRanking } from '../lightning/nodes-ranking/nodes-ranking.component';
 import { TopNodesPerChannels } from '../lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component';
 import { TopNodesPerCapacity } from '../lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component';
+import { JusticeList } from '../lightning/justice-list/justice-list.component';
 import { OldestNodes } from '../lightning/nodes-ranking/oldest-nodes/oldest-nodes.component';
 import { NodesRankingsDashboard } from '../lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component';
 import { NodeChannels } from '../lightning/nodes-channels/node-channels.component';
@@ -60,6 +61,7 @@ import { GroupComponent } from './group/group.component';
     NodesRanking,
     TopNodesPerChannels,
     TopNodesPerCapacity,
+    JusticeList,
     OldestNodes,
     NodesRankingsDashboard,
     NodeChannels,
@@ -97,6 +99,7 @@ import { GroupComponent } from './group/group.component';
     NodesRanking,
     TopNodesPerChannels,
     TopNodesPerCapacity,
+    JusticeList,
     OldestNodes,
     NodesRankingsDashboard,
     NodeChannels,

frontend/src/app/lightning/lightning.routing.module.ts

@@ -9,6 +9,7 @@ import { NodesPerISP } from './nodes-per-isp/nodes-per-isp.component';
 import { NodesRanking } from './nodes-ranking/nodes-ranking.component';
 import { NodesRankingsDashboard } from './nodes-rankings-dashboard/nodes-rankings-dashboard.component';
 import { GroupComponent } from './group/group.component';
+import { JusticeList } from './justice-list/justice-list.component';
 
 const routes: Routes = [
     {
@@ -66,6 +67,10 @@ const routes: Routes = [
             type: 'oldest'
           },
         },
+        {
+          path: 'penalties',
+          component: JusticeList,
+        },
         {
           path: '**',
           redirectTo: ''

frontend/src/app/shared/components/truncate/truncate.component.html

@@ -1,4 +1,4 @@
-<span class="truncate" [style.max-width]="maxWidth ? maxWidth + 'px' : null">
+<span class="truncate" [style.max-width]="maxWidth ? maxWidth + 'px' : null" [style.justify-content]="textAlign" [class.inline]="inline">
     <ng-container *ngIf="link">
       <a [routerLink]="link" class="truncate-link">
         <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>

frontend/src/app/shared/components/truncate/truncate.component.scss

@@ -23,4 +23,8 @@
     flex-shrink: 0;
     flex-grow: 0;
   }
+
+  &.inline {
+    display: inline-flex;
+  }
 }

frontend/src/app/shared/components/truncate/truncate.component.ts

@@ -11,6 +11,8 @@ export class TruncateComponent {
   @Input() link: any = null;
   @Input() lastChars: number = 4;
   @Input() maxWidth: number = null;
+  @Input() inline: boolean = false;
+  @Input() textAlign: 'start' | 'end' = 'start';
   rtl: boolean;
 
   constructor(

frontend/src/styles.scss

@@ -45,8 +45,8 @@ $dropdown-link-hover-bg: #11131f;
 $dropdown-link-active-color: #fff;
 $dropdown-link-active-bg: #11131f;
 
-@import "~bootstrap/scss/bootstrap";
-@import '~tlite/tlite.css';
+@import "bootstrap/scss/bootstrap";
+@import 'tlite/tlite.css';
 
 html, body {
   height: 100%;