Liquid Federation: filter out change UTXOs from table

frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html

@@ -1,8 +1,18 @@
 <div [ngClass]="{'widget': widget}">
+  
+  <div *ngIf="!widget" class="form-check">
+    <div style="padding-left: 0.75rem;">
+      <input style="margin-top: 6px" class="form-check-input" type="checkbox" [checked]="showChangeUtxosToggle$ | async" id="show-change-utxos" (change)="onShowChangeUtxosToggleChange($event)">
+      <label class="form-check-label" for="show-change-utxos">
+        <small i18n="liquid.include-change-utxos">Include Change UTXOs</small>
+      </label>
+    </div>
+  </div>
+
   <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
 
   <div class="clearfix"></div>
-
+  
   <div style="min-height: 295px">
     <table class="table table-borderless">
       <thead style="vertical-align: middle;">
@@ -12,7 +22,7 @@
         <th class="pegin text-left" *ngIf="!widget" i18n="liquid.peg-in">Liquid Peg-in</th>
         <th class="timestamp text-right" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
       </thead>
-      <tbody *ngIf="federationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
+      <tbody *ngIf="filteredFederationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
         <ng-container *ngIf="widget; else regularRows">
           <tr *ngFor="let utxo of utxos | slice:0:5">
             <td class="txid text-left widget">
@@ -96,7 +106,7 @@
       </ng-template>
     </table>
 
-    <ngb-pagination *ngIf="!widget && federationUtxos$ | async as utxos" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
+    <ngb-pagination *ngIf="!widget && filteredFederationUtxos$ | async as utxos" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
       [collectionSize]="utxos.length" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
       (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
     </ngb-pagination>

frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
-import { Observable, Subject, combineLatest, of, timer } from 'rxjs';
+import { BehaviorSubject, Observable, Subject, combineLatest, of, timer } from 'rxjs';
 import { delayWhen, filter, map, share, shareReplay, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
 import { ApiService } from '../../../services/api.service';
 import { Env, StateService } from '../../../services/state.service';
@@ -22,8 +22,12 @@ export class FederationUtxosListComponent implements OnInit {
   pageSize = 15;
   maxSize = window.innerWidth <= 767.98 ? 3 : 5;
   skeletonLines: number[] = [];
+  changeAddress: string = "bc1qxvay4an52gcghxq5lavact7r6qe9l4laedsazz8fj2ee2cy47tlqff4aj4";
   auditStatus$: Observable<AuditStatus>;
   auditUpdated$: Observable<boolean>;
+  showChangeUtxosToggleSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  showChangeUtxosToggle$: Observable<boolean> = this.showChangeUtxosToggleSubject.asObservable();
+  filteredFederationUtxos$: Observable<FederationUtxo[]>;
   lastReservesBlockUpdate: number = 0;
   currentPeg$: Observable<CurrentPegs>;
   lastPegBlockUpdate: number = 0;
@@ -31,7 +35,7 @@ export class FederationUtxosListComponent implements OnInit {
   isLoad: boolean = true;
 
   private destroy$ = new Subject();
-
+  
   constructor(
     private apiService: ApiService,
     public stateService: StateService,
@@ -43,6 +47,7 @@ export class FederationUtxosListComponent implements OnInit {
     this.isLoading = !this.widget;
     this.env = this.stateService.env;
     this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
+
     if (!this.widget) {
       this.websocketService.want(['blocks']);
       this.auditStatus$ = this.stateService.blocks$.pipe(
@@ -94,6 +99,16 @@ export class FederationUtxosListComponent implements OnInit {
         share()
       );
     }
+    
+    if (this.federationUtxos$) {
+      this.filteredFederationUtxos$ = combineLatest([
+        this.federationUtxos$,
+        this.showChangeUtxosToggle$
+      ]).pipe(
+        switchMap(([federationUtxos, showChangeUtxosToggle]) => showChangeUtxosToggle ? of(federationUtxos) : of(federationUtxos.filter(utxo => utxo.bitcoinaddress !== this.changeAddress))),
+        share()
+      );
+    }
 
   }
 
@@ -106,4 +121,7 @@ export class FederationUtxosListComponent implements OnInit {
     this.page = page;
   }
 
+  onShowChangeUtxosToggleChange(e): void {
+    this.showChangeUtxosToggleSubject.next(e.target.checked);
+  }
 }