Liquid: Add support for peg outs display

frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts

@@ -15,6 +15,7 @@ import { WebsocketService } from '../../../services/websocket.service';
 export class RecentPegsListComponent implements OnInit {
   @Input() widget: boolean = false;
   @Input() recentPegIns$: Observable<RecentPeg[]>;
+  @Input() recentPegOuts$: Observable<RecentPeg[]>;
 
   env: Env;
   isLoading = true;
@@ -103,6 +104,7 @@ export class RecentPegsListComponent implements OnInit {
             txid: utxo.pegtxid,
             txindex: utxo.pegindex,
             amount: utxo.amount,
+            bitcoinaddress: utxo.bitcoinaddress,
             bitcointxid: utxo.txid,
             bitcoinindex: utxo.txindex,
             blocktime: utxo.pegblocktime,
@@ -110,9 +112,30 @@ export class RecentPegsListComponent implements OnInit {
         })),
         share()
       );
+
+      this.recentPegOuts$ = this.auditUpdated$.pipe(
+        filter(auditUpdated => auditUpdated === true),
+        throttleTime(40000),
+        switchMap(_ => this.apiService.recentPegOuts$()),
+        share()
+      );
+  
     }
 
-    this.recentPegs$ = this.recentPegIns$;
+    this.recentPegs$ = combineLatest([
+      this.recentPegIns$,
+      this.recentPegOuts$
+    ]).pipe(
+      map(([recentPegIns, recentPegOuts]) => {
+        return [
+          ...recentPegIns,
+          ...recentPegOuts
+        ].sort((a, b) => {
+          return b.blocktime - a.blocktime;
+        });
+      }),
+      share()
+    );
   }
 
   ngOnDestroy(): void {

frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html

@@ -26,7 +26,7 @@
       <div class="card">
         <div class="card-body">
           <app-recent-pegs-stats></app-recent-pegs-stats>
-          <app-recent-pegs-list [recentPegIns$]="recentPegIns$" [widget]="true"></app-recent-pegs-list>
+          <app-recent-pegs-list [recentPegIns$]="recentPegIns$" [recentPegOuts$]="recentPegOuts$"[widget]="true"></app-recent-pegs-list>
         </div>
       </div>
     </div>

frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts

@@ -19,6 +19,7 @@ export class ReservesAuditDashboardComponent implements OnInit {
   currentReserves$: Observable<CurrentPegs>;
   federationUtxos$: Observable<FederationUtxo[]>;
   recentPegIns$: Observable<RecentPeg[]>;
+  recentPegOuts$: Observable<RecentPeg[]>;
   federationAddresses$: Observable<FederationAddress[]>;
   federationAddressesOneMonthAgo$: Observable<any>;
   liquidPegsMonth$: Observable<any>;
@@ -110,6 +111,7 @@ export class ReservesAuditDashboardComponent implements OnInit {
           txid: utxo.pegtxid,
           txindex: utxo.pegindex,
           amount: utxo.amount,
+          bitcoinaddress: utxo.bitcoinaddress,
           bitcointxid: utxo.txid,
           bitcoinindex: utxo.txindex,
           blocktime: utxo.pegblocktime,
@@ -118,6 +120,13 @@ export class ReservesAuditDashboardComponent implements OnInit {
       share()
     );
 
+    this.recentPegOuts$ = this.auditUpdated$.pipe(
+      filter(auditUpdated => auditUpdated === true),
+      throttleTime(40000),
+      switchMap(_ => this.apiService.recentPegOuts$()),
+      share()
+    );
+
     this.federationAddresses$ = this.auditUpdated$.pipe(
       filter(auditUpdated => auditUpdated === true),
       throttleTime(40000),

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

@@ -101,8 +101,9 @@ export interface FederationUtxo {
 
 export interface RecentPeg {
   txid: string;
-  txindex: number; // input #0 for peg-ins
+  txindex: number;
   amount: number;
+  bitcoinaddress: string;
   bitcointxid: string;
   bitcoinindex: number;
   blocktime: number;

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
 import { CpfpInfo, OptimizedMempoolStats, AddressInformation, LiquidPegs, ITranslators,
-  PoolStat, BlockExtended, TransactionStripped, RewardStats, AuditScore, BlockSizesAndWeights, RbfTree, BlockAudit, Acceleration, AccelerationHistoryParams, CurrentPegs, AuditStatus, FederationAddress, FederationUtxo } from '../interfaces/node-api.interface';
+  PoolStat, BlockExtended, TransactionStripped, RewardStats, AuditScore, BlockSizesAndWeights, RbfTree, BlockAudit, Acceleration, AccelerationHistoryParams, CurrentPegs, AuditStatus, FederationAddress, FederationUtxo, RecentPeg } from '../interfaces/node-api.interface';
 import { BehaviorSubject, Observable, catchError, filter, of, shareReplay, take, tap } from 'rxjs';
 import { StateService } from './state.service';
 import { IBackendInfo, WebsocketResponse } from '../interfaces/websocket.interface';
@@ -206,6 +206,10 @@ export class ApiService {
     return this.httpClient.get<FederationUtxo[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves/utxos');
   }
 
+  recentPegOuts$(): Observable<RecentPeg[]> {
+    return this.httpClient.get<RecentPeg[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/pegouts');
+  }
+
   federationAddressesOneMonthAgo$(): Observable<any> {
     return this.httpClient.get<FederationAddress[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves/addresses/previous-month');
   }