From ed215aa4cd0755d8c59348a88ca30816639c3da9 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Tue, 12 Dec 2023 09:07:27 +0100
Subject: [PATCH 01/92] [menu] only add space after @ username if username
 already contains @

---
 frontend/src/app/components/menu/menu.component.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/menu/menu.component.html b/frontend/src/app/components/menu/menu.component.html
index 1cc7bdd03..0f5163ac4 100644
--- a/frontend/src/app/components/menu/menu.component.html
+++ b/frontend/src/app/components/menu/menu.component.html
@@ -3,7 +3,12 @@
 
     <nav class="scrollable menu-click">
       <span *ngIf="userAuth" class="menu-click">
-        <strong class="menu-click text-nowrap ellipsis">@ {{ userAuth.user.username }}</strong>
+        <u class="menu-click text-nowrap ellipsis">
+          <strong>
+            <span *ngIf="userAuth.user.username.includes('@'); else usernamenospace">{{ userAuth.user.username }}</span>
+            <ng-template #usernamenospace>@{{ userAuth.user.username }}</ng-template>
+          </strong>
+        </u>
       </span>
       <a *ngIf="!userAuth" class="d-flex justify-content-center align-items-center nav-link m-0  menu-click" routerLink="/login" role="tab" (click)="onLinkClick('/login')">
         <fa-icon class="menu-click" [icon]="['fas', 'user-circle']" [fixedWidth]="true" style="font-size: 25px;margin-right: 15px;"></fa-icon>

From 590188fe6d2ff0519c895cfc8c9ba63491a42789 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Tue, 12 Dec 2023 09:17:46 +0100
Subject: [PATCH 02/92] [footer] remove services version number

---
 .../components/global-footer/global-footer.component.html       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index fba04e605..e5664dd22 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -94,7 +94,7 @@
       <div class="col-sm-12">
         <p *ngIf="officialMempoolSpace">
           <span>{{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [<a target="_blank" href="https://github.com/mempool/mempool/commit/{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}">{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}</a>]</span>
-          <span *ngIf="stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE"> - (v{{ (servicesBackendInfo$ | async )?.version }}) [{{ (servicesBackendInfo$ | async )?.gitCommit | slice:0:8 }}]</span>
+          <span *ngIf="stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE">[{{ (servicesBackendInfo$ | async )?.gitCommit | slice:0:8 }}]</span>
         </p>
         <p *ngIf="!officialMempoolSpace">v{{ packetJsonVersion }} [<a target="_blank" href="https://github.com/mempool/mempool/commit/{{ frontendGitCommitHash }}">{{ frontendGitCommitHash }}</a>]</p>
       </div>

From 2013dc6d8b05d1bed4ec855ec97720e24aec4986 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Tue, 12 Dec 2023 17:24:58 +0100
Subject: [PATCH 03/92] [refactoring] move servics related api calls to its own
 service

---
 frontend/src/app/app.module.ts                |   2 +
 .../accelerate-preview.component.ts           |   7 +-
 .../acceleration-fees-graph.component.ts      |  12 +-
 .../accelerations-list.component.ts           |   6 +-
 .../accelerator-dashboard.component.ts        |  10 +-
 .../pending-stats/pending-stats.component.ts  |   6 +-
 .../src/app/components/menu/menu.component.ts |  12 +-
 .../transaction/transaction.component.ts      |   5 +-
 .../src/app/lightning/node/node.component.ts  |   6 +-
 frontend/src/app/services/api.service.ts      |  74 +--------
 .../src/app/services/services-api.service.ts  | 140 ++++++++++++++++++
 11 files changed, 181 insertions(+), 99 deletions(-)
 create mode 100644 frontend/src/app/services/services-api.service.ts

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 378ef11ed..6b7ec7f51 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -22,6 +22,7 @@ import { FiatCurrencyPipe } from './shared/pipes/fiat-currency.pipe';
 import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
 import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe';
 import { AppPreloadingStrategy } from './app.preloading-strategy';
+import { ServicesApiServices } from './services/services-api.service';
 
 const providers = [
   ElectrsApiService,
@@ -40,6 +41,7 @@ const providers = [
   FiatCurrencyPipe,
   CapAddressPipe,
   AppPreloadingStrategy,
+  ServicesApiServices,
   { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true }
 ];
 
diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts
index f2224841a..45e50346a 100644
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.ts
@@ -4,6 +4,7 @@ import { Subscription, catchError, of, tap } from 'rxjs';
 import { StorageService } from '../../services/storage.service';
 import { Transaction } from '../../interfaces/electrs.interface';
 import { nextRoundNumber } from '../../shared/common.utils';
+import { ServicesApiServices } from '../../services/services-api.service';
 
 export type AccelerationEstimate = {
   txSummary: TxSummary;
@@ -61,7 +62,7 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
   maxRateOptions: RateOption[] = [];
 
   constructor(
-    private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
     private storageService: StorageService,
     private cd: ChangeDetectorRef
   ) { }
@@ -81,7 +82,7 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
   ngOnInit() {
     this.user = this.storageService.getAuth()?.user ?? null;
 
-    this.estimateSubscription = this.apiService.estimate$(this.tx.txid).pipe(
+    this.estimateSubscription = this.servicesApiService.estimate$(this.tx.txid).pipe(
       tap((response) => {
         if (response.status === 204) {
           this.estimate = undefined;
@@ -181,7 +182,7 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
     if (this.accelerationSubscription) {
       this.accelerationSubscription.unsubscribe();
     }
-    this.accelerationSubscription = this.apiService.accelerate$(
+    this.accelerationSubscription = this.servicesApiService.accelerate$(
       this.tx.txid,
       this.userBid
     ).subscribe({
diff --git a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
index d27b10690..a51476dca 100644
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
@@ -1,8 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
-import { EChartsOption, graphic } from 'echarts';
+import { EChartsOption } from 'echarts';
 import { Observable, Subscription, combineLatest } from 'rxjs';
-import { map, max, startWith, switchMap, tap } from 'rxjs/operators';
-import { ApiService } from '../../../services/api.service';
+import { map, startWith, switchMap, tap } from 'rxjs/operators';
 import { SeoService } from '../../../services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
@@ -11,6 +10,8 @@ import { StorageService } from '../../../services/storage.service';
 import { MiningService } from '../../../services/mining.service';
 import { ActivatedRoute } from '@angular/router';
 import { Acceleration } from '../../../interfaces/node-api.interface';
+import { ServicesApiServices } from '../../../services/services-api.service';
+import { ApiService } from '../../../services/api.service';
 
 @Component({
   selector: 'app-acceleration-fees-graph',
@@ -54,6 +55,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
     @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
     private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
     private formBuilder: UntypedFormBuilder,
     private storageService: StorageService,
     private miningService: MiningService,
@@ -73,7 +75,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
       this.timespan = this.miningWindowPreference;
 
       this.statsObservable$ = combineLatest([
-        (this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: this.miningWindowPreference })),
+        (this.accelerations$ || this.servicesApiService.getAccelerationHistory$({ timeframe: this.miningWindowPreference })),
         this.apiService.getHistoricalBlockFees$(this.miningWindowPreference),
       ]).pipe(
         tap(([accelerations, blockFeesResponse]) => {
@@ -101,7 +103,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
             this.isLoading = true;
             this.storageService.setValue('miningWindowPreference', timespan);
             this.timespan = timespan;
-            return this.apiService.getAccelerationHistory$({});
+            return this.servicesApiService.getAccelerationHistory$({});
           })
         ),
         this.radioGroupForm.get('dateSpan').valueChanges.pipe(
diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
index ddd89d31c..d53de7c1d 100644
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
 import { Observable, catchError, of, switchMap, tap } from 'rxjs';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
-import { ApiService } from '../../../services/api.service';
 import { StateService } from '../../../services/state.service';
 import { WebsocketService } from '../../../services/websocket.service';
+import { ServicesApiServices } from '../../../services/services-api.service';
 
 @Component({
   selector: 'app-accelerations-list',
@@ -26,7 +26,7 @@ export class AccelerationsListComponent implements OnInit {
   skeletonLines: number[] = [];
 
   constructor(
-    private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
     private websocketService: WebsocketService,
     public stateService: StateService,
     private cd: ChangeDetectorRef,
@@ -41,7 +41,7 @@ export class AccelerationsListComponent implements OnInit {
     this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
 
-    const accelerationObservable$ = this.accelerations$ || (this.pending ? this.apiService.getAccelerations$() : this.apiService.getAccelerationHistory$({ timeframe: '1m' }));
+    const accelerationObservable$ = this.accelerations$ || (this.pending ? this.servicesApiService.getAccelerations$() : this.servicesApiService.getAccelerationHistory$({ timeframe: '1m' }));
     this.accelerationList$ = accelerationObservable$.pipe(
       switchMap(accelerations => {
         if (this.pending) {
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
index 79a77a600..baeacf3cd 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -3,12 +3,12 @@ import { SeoService } from '../../../services/seo.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
 import { StateService } from '../../../services/state.service';
-import { Observable, Subject, catchError, combineLatest, distinctUntilChanged, interval, map, of, share, startWith, switchMap, tap } from 'rxjs';
-import { ApiService } from '../../../services/api.service';
+import { Observable, catchError, combineLatest, distinctUntilChanged, interval, map, of, share, startWith, switchMap, tap } from 'rxjs';
 import { Color } from '../../block-overview-graph/sprite-types';
 import { hexToColor } from '../../block-overview-graph/utils';
 import TxView from '../../block-overview-graph/tx-view';
 import { feeLevels, mempoolFeeColors } from '../../../app.constants';
+import { ServicesApiServices } from '../../../services/services-api.service';
 
 const acceleratedColor: Color = hexToColor('8F5FF6');
 const normalColors = mempoolFeeColors.map(hex => hexToColor(hex + '5F'));
@@ -33,7 +33,7 @@ export class AcceleratorDashboardComponent implements OnInit {
   constructor(
     private seoService: SeoService,
     private websocketService: WebsocketService,
-    private apiService: ApiService,
+    private serviceApiServices: ServicesApiServices,
     private stateService: StateService,
   ) {
     this.seoService.setTitle($localize`:@@a681a4e2011bb28157689dbaa387de0dd0aa0c11:Accelerator Dashboard`);
@@ -45,7 +45,7 @@ export class AcceleratorDashboardComponent implements OnInit {
     this.pendingAccelerations$ = interval(30000).pipe(
       startWith(true),
       switchMap(() => {
-        return this.apiService.getAccelerations$();
+        return this.serviceApiServices.getAccelerations$();
       }),
       catchError((e) => {
         return of([]);
@@ -56,7 +56,7 @@ export class AcceleratorDashboardComponent implements OnInit {
     this.accelerations$ = this.stateService.chainTip$.pipe(
       distinctUntilChanged(),
       switchMap((chainTip) => {
-        return this.apiService.getAccelerationHistory$({ timeframe: '1m' });
+        return this.serviceApiServices.getAccelerationHistory$({ timeframe: '1m' });
       }),
       catchError((e) => {
         return of([]);
diff --git a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts
index f344c37a0..ed7061156 100644
--- a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts
+++ b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts
@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
-import { ApiService } from '../../../services/api.service';
 import { Acceleration } from '../../../interfaces/node-api.interface';
+import { ServicesApiServices } from '../../../services/services-api.service';
 
 @Component({
   selector: 'app-pending-stats',
@@ -15,11 +15,11 @@ export class PendingStatsComponent implements OnInit {
   public accelerationStats$: Observable<any>;
 
   constructor(
-    private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
   ) { }
 
   ngOnInit(): void {
-    this.accelerationStats$ = (this.accelerations$ || this.apiService.getAccelerations$()).pipe(
+    this.accelerationStats$ = (this.accelerations$ || this.servicesApiService.getAccelerations$()).pipe(
       switchMap(accelerations => {
         let totalAccelerations = 0;
         let totalFeeDelta = 0;
diff --git a/frontend/src/app/components/menu/menu.component.ts b/frontend/src/app/components/menu/menu.component.ts
index 28ba0a1ad..e3f66ce25 100644
--- a/frontend/src/app/components/menu/menu.component.ts
+++ b/frontend/src/app/components/menu/menu.component.ts
@@ -1,10 +1,10 @@
 import { Component, OnInit, Input, Output, EventEmitter, HostListener, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
-import { ApiService } from '../../services/api.service';
 import { MenuGroup } from '../../interfaces/services.interface';
 import { StorageService } from '../../services/storage.service';
 import { Router, NavigationStart } from '@angular/router';
 import { StateService } from '../../services/state.service';
+import { IUser, ServicesApiServices } from '../../services/services-api.service';
 
 @Component({
   selector: 'app-menu',
@@ -18,11 +18,12 @@ export class MenuComponent implements OnInit, OnDestroy {
   @Output() menuToggled = new EventEmitter<boolean>();
   
   userMenuGroups$: Observable<MenuGroup[]> | undefined;
+  user$: Observable<IUser | null>;
   userAuth: any | undefined;
   isServicesPage = false;
 
   constructor(
-    private apiService: ApiService,
+    private servicesApiServices: ServicesApiServices,
     private storageService: StorageService,
     private router: Router,
     private stateService: StateService
@@ -32,7 +33,8 @@ export class MenuComponent implements OnInit, OnDestroy {
     this.userAuth = this.storageService.getAuth();
     
     if (this.stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE) {
-      this.userMenuGroups$ = this.apiService.getUserMenuGroups$();
+      this.userMenuGroups$ = this.servicesApiServices.getUserMenuGroups$();
+      this.user$ = this.servicesApiServices.userSubject$;
     }
 
     this.isServicesPage = this.router.url.includes('/services/');
@@ -55,10 +57,10 @@ export class MenuComponent implements OnInit, OnDestroy {
   }
 
   logout(): void {
-    this.apiService.logout$().subscribe(() => {
+    this.servicesApiServices.logout$().subscribe(() => {
       this.loggedOut.emit(true);
       if (this.stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE) {
-        this.userMenuGroups$ = this.apiService.getUserMenuGroups$();
+        this.userMenuGroups$ = this.servicesApiServices.getUserMenuGroups$();
         this.router.navigateByUrl('/');
       }
     });
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index ae3a950bd..c12c91eb1 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -7,7 +7,6 @@ import {
   catchError,
   retryWhen,
   delay,
-  map,
   mergeMap,
   tap
 } from 'rxjs/operators';
@@ -26,6 +25,7 @@ import { LiquidUnblinding } from './liquid-ublinding';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 import { Price, PriceService } from '../../services/price.service';
 import { isFeatureActive } from '../../bitcoin.utils';
+import { ServicesApiServices } from '../../services/services-api.service';
 
 @Component({
   selector: 'app-transaction',
@@ -113,6 +113,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     private websocketService: WebsocketService,
     private audioService: AudioService,
     private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
     private seoService: SeoService,
     private priceService: PriceService,
     private storageService: StorageService
@@ -246,7 +247,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         this.accelerationInfo = null;
       }),
       switchMap((blockHash: string) => {
-        return this.apiService.getAccelerationHistory$({ blockHash });
+        return this.servicesApiService.getAccelerationHistory$({ blockHash });
       }),
       catchError(() => {
         return of(null);
diff --git a/frontend/src/app/lightning/node/node.component.ts b/frontend/src/app/lightning/node/node.component.ts
index 56f48bf65..cb465f0b2 100644
--- a/frontend/src/app/lightning/node/node.component.ts
+++ b/frontend/src/app/lightning/node/node.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { Observable, of, EMPTY } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { catchError, map, switchMap, tap, share } from 'rxjs/operators';
 import { SeoService } from '../../services/seo.service';
 import { ApiService } from '../../services/api.service';
@@ -8,6 +8,7 @@ import { LightningApiService } from '../lightning-api.service';
 import { GeolocationData } from '../../shared/components/geolocation/geolocation.component';
 import { ILiquidityAd, parseLiquidityAdHex } from './liquidity-ad';
 import { haversineDistance, kmToMiles } from '../../../app/shared/common.utils';
+import { ServicesApiServices } from '../../services/services-api.service';
 
 interface CustomRecord {
   type: string;
@@ -43,6 +44,7 @@ export class NodeComponent implements OnInit {
 
   constructor(
     private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
     private lightningApiService: LightningApiService,
     private activatedRoute: ActivatedRoute,
     private seoService: SeoService,
@@ -155,7 +157,7 @@ export class NodeComponent implements OnInit {
     this.nodeOwner$ = this.activatedRoute.paramMap
       .pipe(
         switchMap((params: ParamMap) => {
-          return this.apiService.getNodeOwner$(params.get('public_key')).pipe(
+          return this.servicesApiService.getNodeOwner$(params.get('public_key')).pipe(
             switchMap((response) =>  {
               if (response.status === 204) {
                 return of(false);
diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index 854d15c2a..e5048d619 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -1,17 +1,13 @@
 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 } from '../interfaces/node-api.interface';
+  PoolStat, BlockExtended, TransactionStripped, RewardStats, AuditScore, BlockSizesAndWeights, RbfTree, BlockAudit } 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';
-import { Outspend, Transaction } from '../interfaces/electrs.interface';
+import { Transaction } from '../interfaces/electrs.interface';
 import { Conversion } from './price.service';
-import { MenuGroup } from '../interfaces/services.interface';
 import { StorageService } from './storage.service';
-
-// Todo - move to config.json
-const SERVICES_API_PREFIX = `/api/v1/services`;
+import { WebsocketResponse } from '../interfaces/websocket.interface';
 
 @Injectable({
   providedIn: 'root'
@@ -38,12 +34,6 @@ export class ApiService {
       }
       this.apiBasePath = network ? '/' + network : '';
     });
-
-    if (this.stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE) {
-      this.getServicesBackendInfo$().subscribe(version => {
-        this.stateService.servicesBackendInfo$.next(version);
-      })
-    }
   }
 
   private generateCacheKey(functionName: string, params: any[]): string {
@@ -378,62 +368,4 @@ export class ApiService {
         (timestamp ? `?timestamp=${timestamp}` : '')
     );
   }
-
-  /**
-   * Services
-   */
-
-  getNodeOwner$(publicKey: string): Observable<any> {
-    let params = new HttpParams()
-      .set('node_public_key', publicKey);
-    return this.httpClient.get<any>(`${SERVICES_API_PREFIX}/lightning/claim/current`, { params, observe: 'response' });
-  }
-
-  getUserMenuGroups$(): Observable<MenuGroup[]> {
-    const auth = this.storageService.getAuth();
-    if (!auth) {
-      return of(null);
-    }
-
-    return this.httpClient.get<MenuGroup[]>(`${SERVICES_API_PREFIX}/account/menu`);
-  }
-
-  getUserInfo$(): Observable<any> {
-    const auth = this.storageService.getAuth();
-    if (!auth) {
-      return of(null);
-    }
-
-    return this.httpClient.get<any>(`${SERVICES_API_PREFIX}/account`);
-  }
-
-  logout$(): Observable<any> {
-    const auth = this.storageService.getAuth();
-    if (!auth) {
-      return of(null);
-    }
-
-    localStorage.removeItem('auth');
-    return this.httpClient.post(`${SERVICES_API_PREFIX}/auth/logout`, {});
-  }
-
-  getServicesBackendInfo$(): Observable<IBackendInfo> {
-    return this.httpClient.get<IBackendInfo>(`${SERVICES_API_PREFIX}/version`);
-  }
-
-  estimate$(txInput: string) {
-    return this.httpClient.post<any>(`${SERVICES_API_PREFIX}/accelerator/estimate`, { txInput: txInput }, { observe: 'response' });
-  }
-
-  accelerate$(txInput: string, userBid: number) {
-    return this.httpClient.post<any>(`${SERVICES_API_PREFIX}/accelerator/accelerate`, { txInput: txInput, userBid: userBid });
-  }
-
-  getAccelerations$(): Observable<Acceleration[]> {
-    return this.httpClient.get<Acceleration[]>(`${SERVICES_API_PREFIX}/accelerator/accelerations`);
-  }
-
-  getAccelerationHistory$(params: AccelerationHistoryParams): Observable<Acceleration[]> {
-    return this.httpClient.get<Acceleration[]>(`${SERVICES_API_PREFIX}/accelerator/accelerations/history`, { params: { ...params } });
-  }
 }
diff --git a/frontend/src/app/services/services-api.service.ts b/frontend/src/app/services/services-api.service.ts
new file mode 100644
index 000000000..1c350c37b
--- /dev/null
+++ b/frontend/src/app/services/services-api.service.ts
@@ -0,0 +1,140 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { StateService } from './state.service';
+import { StorageService } from './storage.service';
+import { MenuGroup } from '../interfaces/services.interface';
+import { Observable, of, ReplaySubject, tap, catchError, share } from 'rxjs';
+import { IBackendInfo } from '../interfaces/websocket.interface';
+import { Acceleration, AccelerationHistoryParams } from '../interfaces/node-api.interface';
+
+export type ProductType = 'enterprise' | 'community' | 'mining_pool' | 'custom';
+export interface IUser {
+  username: string;
+  email: string | null;
+  passwordIsSet: boolean;
+  snsId: string;
+  type: ProductType;
+  subscription_tag: string;
+  status: 'pending' | 'verified' | 'disabled';
+  features: string | null;
+  fullName: string | null;
+  countryCode: string | null;
+  imageMd5: string;
+}
+
+// Todo - move to config.json
+const SERVICES_API_PREFIX = `/api/v1/services`;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ServicesApiServices {
+  private apiBaseUrl: string; // base URL is protocol, hostname, and port
+  private apiBasePath: string; // network path is /testnet, etc. or '' for mainnet
+
+  userSubject$ = new ReplaySubject<IUser | null>(1);
+
+  constructor(
+    private httpClient: HttpClient,
+    private stateService: StateService,
+    private storageService: StorageService
+  ) {
+    this.apiBaseUrl = ''; // use relative URL by default
+    if (!stateService.isBrowser) { // except when inside AU SSR process
+      this.apiBaseUrl = this.stateService.env.NGINX_PROTOCOL + '://' + this.stateService.env.NGINX_HOSTNAME + ':' + this.stateService.env.NGINX_PORT;
+    }
+    this.apiBasePath = ''; // assume mainnet by default
+    this.stateService.networkChanged$.subscribe((network) => {
+      if (network === 'bisq' && !this.stateService.env.BISQ_SEPARATE_BACKEND) {
+        network = '';
+      }
+      this.apiBasePath = network ? '/' + network : '';
+    });
+
+    if (this.stateService.env.GIT_COMMIT_HASH_MEMPOOL_SPACE) {
+      this.getServicesBackendInfo$().subscribe(version => {
+        this.stateService.servicesBackendInfo$.next(version);
+      })
+    }
+
+    this.getUserInfo$().subscribe();
+  }
+
+  /**
+   * Do not call directly, userSubject$ instead
+   */
+  private getUserInfo$() {
+    return this.getUserInfoApi$().pipe(
+      tap((user) => {
+        this.userSubject$.next(user);
+      }),
+      catchError((e) => {
+        if (e.error === 'User does not exists') {
+          this.userSubject$.next(null);
+          this.logout$().subscribe();
+          return of(null);
+        }
+        this.userSubject$.next(null);
+        return of(null);
+      }),
+      share(),
+    )
+  }
+
+  /**
+   * Do not call directly, userSubject$ instead
+   */
+  private getUserInfoApi$(): Observable<any> {
+    const auth = this.storageService.getAuth();
+    if (!auth) {
+      return of(null);
+    }
+
+    return this.httpClient.get<any>(`${SERVICES_API_PREFIX}/account`);
+  }
+
+  getNodeOwner$(publicKey: string): Observable<any> {
+    let params = new HttpParams()
+      .set('node_public_key', publicKey);
+    return this.httpClient.get<any>(`${SERVICES_API_PREFIX}/lightning/claim/current`, { params, observe: 'response' });
+  }
+
+  getUserMenuGroups$(): Observable<MenuGroup[]> {
+    const auth = this.storageService.getAuth();
+    if (!auth) {
+      return of(null);
+    }
+
+    return this.httpClient.get<MenuGroup[]>(`${SERVICES_API_PREFIX}/account/menu`);
+  }
+
+  logout$(): Observable<any> {
+    const auth = this.storageService.getAuth();
+    if (!auth) {
+      return of(null);
+    }
+
+    localStorage.removeItem('auth');
+    return this.httpClient.post(`${SERVICES_API_PREFIX}/auth/logout`, {});
+  }
+
+  getServicesBackendInfo$(): Observable<IBackendInfo> {
+    return this.httpClient.get<IBackendInfo>(`${SERVICES_API_PREFIX}/version`);
+  }
+
+  estimate$(txInput: string) {
+    return this.httpClient.post<any>(`${SERVICES_API_PREFIX}/accelerator/estimate`, { txInput: txInput }, { observe: 'response' });
+  }
+
+  accelerate$(txInput: string, userBid: number) {
+    return this.httpClient.post<any>(`${SERVICES_API_PREFIX}/accelerator/accelerate`, { txInput: txInput, userBid: userBid });
+  }
+
+  getAccelerations$(): Observable<Acceleration[]> {
+    return this.httpClient.get<Acceleration[]>(`${SERVICES_API_PREFIX}/accelerator/accelerations`);
+  }
+
+  getAccelerationHistory$(params: AccelerationHistoryParams): Observable<Acceleration[]> {
+    return this.httpClient.get<Acceleration[]>(`${SERVICES_API_PREFIX}/accelerator/accelerations/history`, { params: { ...params } });
+  }
+}

From 8238edb7214f4495eef6c0b98bf2b6a0b80f8029 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Fri, 15 Dec 2023 14:48:17 +0100
Subject: [PATCH 04/92] [menu] show og rank and active subscription in menu

---
 .../app/components/menu/menu.component.html   | 16 +++++++---
 .../app/components/menu/menu.component.scss   | 32 +++++++++++++++++++
 .../src/app/services/services-api.service.ts  |  1 +
 3 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/menu/menu.component.html b/frontend/src/app/components/menu/menu.component.html
index 0f5163ac4..c72016ef5 100644
--- a/frontend/src/app/components/menu/menu.component.html
+++ b/frontend/src/app/components/menu/menu.component.html
@@ -2,13 +2,19 @@
   <div class="d-flex menu-click">
 
     <nav class="scrollable menu-click">
-      <span *ngIf="userAuth" class="menu-click">
-        <u class="menu-click text-nowrap ellipsis">
+      <span *ngIf="user$ | async as user" class="menu-click">
+        <span class="menu-click text-nowrap ellipsis">
           <strong>
-            <span *ngIf="userAuth.user.username.includes('@'); else usernamenospace">{{ userAuth.user.username }}</span>
-            <ng-template #usernamenospace>@{{ userAuth.user.username }}</ng-template>
+            <span *ngIf="user.username.includes('@'); else usernamenospace">{{ user.username }}</span>
+            <ng-template #usernamenospace>@{{ user.username }}</ng-template>
           </strong>
-        </u>
+        </span>
+        <span class="badge mr-1 badge-og" *ngIf="user.ogRank">
+          OG #{{ user.ogRank }}
+        </span>
+        <span class="badge mr-1 badge-default" [class]="'badge-' + user.subscription_tag" *ngIf="user.subscription_tag !== 'free'">
+          {{ user.subscription_tag.toUpperCase() }}
+        </span>
       </span>
       <a *ngIf="!userAuth" class="d-flex justify-content-center align-items-center nav-link m-0  menu-click" routerLink="/login" role="tab" (click)="onLinkClick('/login')">
         <fa-icon class="menu-click" [icon]="['fas', 'user-circle']" [fixedWidth]="true" style="font-size: 25px;margin-right: 15px;"></fa-icon>
diff --git a/frontend/src/app/components/menu/menu.component.scss b/frontend/src/app/components/menu/menu.component.scss
index 59b04e92c..8a2006a4e 100644
--- a/frontend/src/app/components/menu/menu.component.scss
+++ b/frontend/src/app/components/menu/menu.component.scss
@@ -55,4 +55,36 @@
 
 @media screen and (max-height: 450px) {
   .sidenav a {font-size: 18px;}
+}
+
+.badge-default {
+  background-color: black;
+}
+
+.badge-og {
+  background-color: #4a68b9;
+}
+
+.badge-pleb {
+  background-color: #3ccbe3;
+}
+
+.badge-chad {
+  background-color: #957d0b;
+}
+
+.badge-whale {
+  background-color: #653b9c;
+}
+
+.badge-silver {
+  background-color: #95a5a6;
+}
+
+.badge-gold {
+  background-color: #f1c40f;
+}
+
+.badge-platinium {
+  background-color: #653b9c;
 }
\ No newline at end of file
diff --git a/frontend/src/app/services/services-api.service.ts b/frontend/src/app/services/services-api.service.ts
index 1c350c37b..758829852 100644
--- a/frontend/src/app/services/services-api.service.ts
+++ b/frontend/src/app/services/services-api.service.ts
@@ -20,6 +20,7 @@ export interface IUser {
   fullName: string | null;
   countryCode: string | null;
   imageMd5: string;
+  ogRank: number | null;
 }
 
 // Todo - move to config.json

From ec4c418c22339f511008d090fd57056dd0744f01 Mon Sep 17 00:00:00 2001
From: James Blacklock <public@jamesblacklock.net>
Date: Wed, 20 Dec 2023 17:02:12 -0500
Subject: [PATCH 05/92] sign contributor agreement

---
 contributors/jamesblacklock.txt | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 contributors/jamesblacklock.txt

diff --git a/contributors/jamesblacklock.txt b/contributors/jamesblacklock.txt
new file mode 100644
index 000000000..11591f451
--- /dev/null
+++ b/contributors/jamesblacklock.txt
@@ -0,0 +1,3 @@
+I hereby accept the terms of the Contributor License Agreement in the CONTRIBUTING.md file of the mempool/mempool git repository as of December 20, 2023.
+
+Signed: jamesblacklock

From cd964d37e806811fa52dba0647e70efd802a9050 Mon Sep 17 00:00:00 2001
From: James Blacklock <public@jamesblacklock.net>
Date: Wed, 20 Dec 2023 17:03:06 -0500
Subject: [PATCH 06/92] fix bug in backend Docker start.sh script

---
 backend/.gitignore      | 6 ++++++
 docker/backend/start.sh | 2 +-
 frontend/.gitignore     | 7 +++++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/backend/.gitignore b/backend/.gitignore
index b4393c2f0..5cefd4bab 100644
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -7,6 +7,12 @@ mempool-config.json
 pools.json
 icons.json
 
+# docker
+Dockerfile
+GeoIP
+start.sh
+wait-for-it.sh
+
 # compiled output
 /dist
 /tmp
diff --git a/docker/backend/start.sh b/docker/backend/start.sh
index 232cf7284..aab5ad489 100755
--- a/docker/backend/start.sh
+++ b/docker/backend/start.sh
@@ -53,7 +53,7 @@ __ELECTRUM_TLS_ENABLED__=${ELECTRUM_TLS_ENABLED:=false}
 
 # ESPLORA
 __ESPLORA_REST_API_URL__=${ESPLORA_REST_API_URL:=http://127.0.0.1:3000}
-__ESPLORA_UNIX_SOCKET_PATH__=${ESPLORA_UNIX_SOCKET_PATH:="null"}
+__ESPLORA_UNIX_SOCKET_PATH__=${ESPLORA_UNIX_SOCKET_PATH:=""}
 __ESPLORA_BATCH_QUERY_BASE_SIZE__=${ESPLORA_BATCH_QUERY_BASE_SIZE:=1000}
 __ESPLORA_RETRY_UNIX_SOCKET_AFTER__=${ESPLORA_RETRY_UNIX_SOCKET_AFTER:=30000}
 __ESPLORA_REQUEST_TIMEOUT__=${ESPLORA_REQUEST_TIMEOUT:=5000}
diff --git a/frontend/.gitignore b/frontend/.gitignore
index 8159e7c7b..d2a765dda 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -6,6 +6,13 @@
 /out-tsc
 server.run.js
 
+# docker
+Dockerfile
+entrypoint.sh
+nginx-mempool.conf
+nginx.conf
+wait-for
+
 # Only exists if Bazel was run
 /bazel-out
 

From 02254557841e6620efd6011190e427e77d208ee5 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Tue, 9 Jan 2024 12:11:45 +0100
Subject: [PATCH 07/92] Fix merge conflict with
 2013dc6d8b05d1bed4ec855ec97720e24aec4986

---
 .../src/app/components/block/block-preview.component.ts     | 6 ++++--
 frontend/src/app/components/block/block.component.ts        | 4 +++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/block/block-preview.component.ts b/frontend/src/app/components/block/block-preview.component.ts
index e634ae11f..3e1d9b409 100644
--- a/frontend/src/app/components/block/block-preview.component.ts
+++ b/frontend/src/app/components/block/block-preview.component.ts
@@ -10,6 +10,7 @@ import { BlockExtended, TransactionStripped } from '../../interfaces/node-api.in
 import { ApiService } from '../../services/api.service';
 import { seoDescriptionNetwork } from '../../shared/common.utils';
 import { BlockOverviewGraphComponent } from '../../components/block-overview-graph/block-overview-graph.component';
+import { ServicesApiServices } from '../../services/services-api.service';
 
 @Component({
   selector: 'app-block-preview',
@@ -42,7 +43,8 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
     public stateService: StateService,
     private seoService: SeoService,
     private openGraphService: OpenGraphService,
-    private apiService: ApiService
+    private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
   ) { }
 
   ngOnInit() {
@@ -134,7 +136,7 @@ export class BlockPreviewComponent implements OnInit, OnDestroy {
                   return of(transactions);
                 })
               ),
-            this.stateService.env.ACCELERATOR === true && block.height > 819500 ? this.apiService.getAccelerationHistory$({ blockHash: block.id }) : of([])
+            this.stateService.env.ACCELERATOR === true && block.height > 819500 ? this.servicesApiService.getAccelerationHistory$({ blockHash: block.id }) : of([])
           ]);
         }
       ),
diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts
index 6a995127b..5bba24852 100644
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -16,6 +16,7 @@ import { detectWebGL } from '../../shared/graphs.utils';
 import { seoDescriptionNetwork } from '../../shared/common.utils';
 import { PriceService, Price } from '../../services/price.service';
 import { CacheService } from '../../services/cache.service';
+import { ServicesApiServices } from '../../services/services-api.service';
 
 @Component({
   selector: 'app-block',
@@ -103,6 +104,7 @@ export class BlockComponent implements OnInit, OnDestroy {
     private apiService: ApiService,
     private priceService: PriceService,
     private cacheService: CacheService,
+    private servicesApiService: ServicesApiServices,
   ) {
     this.webGlEnabled = detectWebGL();
   }
@@ -329,7 +331,7 @@ export class BlockComponent implements OnInit, OnDestroy {
                 return of(null);
               })
             ),
-          this.stateService.env.ACCELERATOR === true && block.height > 819500 ? this.apiService.getAccelerationHistory$({ blockHash: block.id }) : of([])
+          this.stateService.env.ACCELERATOR === true && block.height > 819500 ? this.servicesApiService.getAccelerationHistory$({ blockHash: block.id }) : of([])
         ]);
       })
     )

From f6d779051287314895c0c09e283d303c6ef8bb6d Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Thu, 18 Jan 2024 12:13:52 +0100
Subject: [PATCH 08/92] [sponsors] allow setting up custom host for the sponsor
 component

---
 .../src/app/components/about/about-sponsors.component.html    | 4 ++--
 frontend/src/app/components/about/about-sponsors.component.ts | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/about/about-sponsors.component.html b/frontend/src/app/components/about/about-sponsors.component.html
index f76d74f8b..ae7232682 100644
--- a/frontend/src/app/components/about/about-sponsors.component.html
+++ b/frontend/src/app/components/about/about-sponsors.component.html
@@ -1,14 +1,14 @@
 <div id="become-sponsor-container">
   <div class="become-sponsor community">
     <p style="font-weight: 700; font-size: 18px;">If you're an individual...</p>
-    <a href="https://mempool.space/sponsor" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.community-sponsor-button" (click)="onSponsorClick($event)">Become a Community Sponsor</a>
+    <a [href]="host + '/sponsor'" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.community-sponsor-button" (click)="onSponsorClick($event)">Become a Community Sponsor</a>
     <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Exclusive swag</p>
     <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Your avatar on the About page</p>
     <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> And more coming soon :)</p>
   </div>
   <div class="become-sponsor enterprise">
     <p style="font-weight: 700; font-size: 18px;">If you're a business...</p>
-    <a href="https://mempool.space/enterprise" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.enterprise-sponsor-button" (click)="onEnterpriseClick($event)">Become an Enterprise Sponsor</a>
+    <a [href]="host + '/enterprise'" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.enterprise-sponsor-button" (click)="onEnterpriseClick($event)">Become an Enterprise Sponsor</a>
     <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Increased API limits</p>
     <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Co-branded instance</p>
     <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> 99% service-level agreement</p>
diff --git a/frontend/src/app/components/about/about-sponsors.component.ts b/frontend/src/app/components/about/about-sponsors.component.ts
index 31863cd8f..6d8f4f7de 100644
--- a/frontend/src/app/components/about/about-sponsors.component.ts
+++ b/frontend/src/app/components/about/about-sponsors.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { EnterpriseService } from '../../services/enterprise.service';
 
 @Component({
@@ -7,6 +7,8 @@ import { EnterpriseService } from '../../services/enterprise.service';
   styleUrls: ['./about-sponsors.component.scss'],
 })
 export class AboutSponsorsComponent {
+  @Input() host = 'https://mempool.space';
+
   constructor(private enterpriseService: EnterpriseService) {
   }
 

From 8054e2d79a2f727fa8eadc66f14547f32a78498d Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Thu, 18 Jan 2024 15:54:04 +0100
Subject: [PATCH 09/92] [accelerator] fix success rate stat value

---
 .../accelerator-dashboard/accelerator-dashboard.component.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
index baeacf3cd..ed4b973ac 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -66,7 +66,7 @@ export class AcceleratorDashboardComponent implements OnInit {
 
     this.minedAccelerations$ = this.accelerations$.pipe(
       map(accelerations => {
-        return accelerations.filter(acc => ['mined', 'completed'].includes(acc.status))
+        return accelerations.filter(acc => ['mined', 'completed', 'failed'].includes(acc.status))
       })
     );
 

From 4b10e32e73282c3bea7f0d928ea11ef033f7adf8 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Sat, 20 Jan 2024 15:15:15 +0100
Subject: [PATCH 10/92] Liquid: add indexing process of Federation utxos

---
 backend/src/api/database-migration.ts     |  43 ++-
 backend/src/api/liquid/elements-parser.ts | 305 +++++++++++++++++++++-
 backend/src/api/liquid/liquid.routes.ts   | 108 ++++++++
 backend/src/index.ts                      |   1 +
 4 files changed, 443 insertions(+), 14 deletions(-)

diff --git a/backend/src/api/database-migration.ts b/backend/src/api/database-migration.ts
index 89ef7a7be..698d7769d 100644
--- a/backend/src/api/database-migration.ts
+++ b/backend/src/api/database-migration.ts
@@ -7,7 +7,7 @@ import cpfpRepository from '../repositories/CpfpRepository';
 import { RowDataPacket } from 'mysql2';
 
 class DatabaseMigration {
-  private static currentVersion = 66;
+  private static currentVersion = 67;
   private queryTimeout = 3600_000;
   private statisticsAddedIndexed = false;
   private uniqueLogs: string[] = [];
@@ -558,6 +558,21 @@ class DatabaseMigration {
       await this.$executeQuery('ALTER TABLE `statistics` ADD min_fee FLOAT UNSIGNED DEFAULT NULL');
       await this.updateToSchemaVersion(66);
     }
+
+    if (databaseSchemaVersion < 67 && config.MEMPOOL.NETWORK === "liquid") {
+      // Drop and re-create the elements_pegs table
+      await this.$executeQuery('DROP table IF EXISTS elements_pegs;');
+      await this.$executeQuery(this.getCreateElementsTableQuery(), await this.$checkIfTableExists('elements_pegs'));
+      await this.$executeQuery(`UPDATE state SET number = 0 WHERE name = 'last_elements_block';`);
+      // Create the federation_addresses table and add the two Liquid Federation change addresses in
+      await this.$executeQuery(this.getCreateFederationAddressesTableQuery(), await this.$checkIfTableExists('federation_addresses'));
+      await this.$executeQuery(`INSERT INTO federation_addresses (bitcoinaddress) VALUES ('bc1qxvay4an52gcghxq5lavact7r6qe9l4laedsazz8fj2ee2cy47tlqff4aj4')`); // Federation change address
+      await this.$executeQuery(`INSERT INTO federation_addresses (bitcoinaddress) VALUES ('3EiAcrzq1cELXScc98KeCswGWZaPGceT1d')`); // Federation change address
+      // Create the federation_txos table that uses the federation_addresses table as a foreign key
+      await this.$executeQuery(this.getCreateFederationTxosTableQuery(), await this.$checkIfTableExists('federation_txos'));
+      await this.$executeQuery(`INSERT INTO state VALUES('last_bitcoin_block_audit', 0, NULL);`);
+      await this.updateToSchemaVersion(67);
+    }
   }
 
   /**
@@ -801,7 +816,31 @@ class DatabaseMigration {
       bitcoinaddress varchar(100) NOT NULL,
       bitcointxid varchar(65) NOT NULL,
       bitcoinindex int(11) NOT NULL,
-      final_tx int(11) NOT NULL
+      final_tx int(11) NOT NULL,
+      PRIMARY KEY (txid, txindex)
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`;
+  }
+
+  private getCreateFederationAddressesTableQuery(): string {
+    return `CREATE TABLE IF NOT EXISTS federation_addresses (
+      bitcoinaddress varchar(100) NOT NULL,
+      PRIMARY KEY (bitcoinaddress)
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`;
+  }
+
+  private getCreateFederationTxosTableQuery(): string {
+    return `CREATE TABLE IF NOT EXISTS federation_txos (
+      txid varchar(65) NOT NULL,
+      txindex int(11) NOT NULL,
+      bitcoinaddress varchar(100) NOT NULL,
+      amount bigint(20) unsigned NOT NULL,
+      blocknumber int(11) unsigned NOT NULL,
+      blocktime int(11) unsigned NOT NULL,
+      unspent tinyint(1) NOT NULL,
+      lastblockupdate int(11) unsigned NOT NULL,
+      lasttimeupdate int(11) unsigned NOT NULL,
+      PRIMARY KEY (txid, txindex), 
+      FOREIGN KEY (bitcoinaddress) REFERENCES federation_addresses (bitcoinaddress)
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`;
   }
 
diff --git a/backend/src/api/liquid/elements-parser.ts b/backend/src/api/liquid/elements-parser.ts
index 12439e037..842234a3a 100644
--- a/backend/src/api/liquid/elements-parser.ts
+++ b/backend/src/api/liquid/elements-parser.ts
@@ -5,8 +5,12 @@ import { Common } from '../common';
 import DB from '../../database';
 import logger from '../../logger';
 
+const federationChangeAddresses = ['bc1qxvay4an52gcghxq5lavact7r6qe9l4laedsazz8fj2ee2cy47tlqff4aj4', '3EiAcrzq1cELXScc98KeCswGWZaPGceT1d'];
+const auditBlockOffsetWithTip = 1; // Wait for 1 block confirmation before processing the block in the audit process to reduce the risk of reorgs
+
 class ElementsParser {
   private isRunning = false;
+  private isUtxosUpdatingRunning = false;
 
   constructor() { }
 
@@ -22,22 +26,19 @@ class ElementsParser {
       for (let height = latestBlockHeight + 1; height <= tip; height++) {
         const blockHash: IBitcoinApi.ChainTips = await bitcoinClient.getBlockHash(height);
         const block: IBitcoinApi.Block = await bitcoinClient.getBlock(blockHash, 2);
+        await DB.query('START TRANSACTION;');
         await this.$parseBlock(block);
         await this.$saveLatestBlockToDatabase(block.height);
+        await DB.query('COMMIT;');
       }
       this.isRunning = false;
     } catch (e) {
+      await DB.query('ROLLBACK;');
       this.isRunning = false;
       throw new Error(e instanceof Error ? e.message : 'Error');
     }
   }
 
-  public async $getPegDataByMonth(): Promise<any> {
-    const query = `SELECT SUM(amount) AS amount, DATE_FORMAT(FROM_UNIXTIME(datetime), '%Y-%m-01') AS date FROM elements_pegs GROUP BY DATE_FORMAT(FROM_UNIXTIME(datetime), '%Y%m')`;
-    const [rows] = await DB.query(query);
-    return rows;
-  }
-
   protected async $parseBlock(block: IBitcoinApi.Block) {
     for (const tx of block.tx) {
       await this.$parseInputs(tx, block);
@@ -55,29 +56,30 @@ class ElementsParser {
 
   protected async $parsePegIn(input: IBitcoinApi.Vin, vindex: number, txid: string, block: IBitcoinApi.Block) {
     const bitcoinTx: IBitcoinApi.Transaction = await bitcoinSecondClient.getRawTransaction(input.txid, true);
+    const bitcoinBlock: IBitcoinApi.Block = await bitcoinSecondClient.getBlock(bitcoinTx.blockhash);
     const prevout = bitcoinTx.vout[input.vout || 0];
     const outputAddress = prevout.scriptPubKey.address || (prevout.scriptPubKey.addresses && prevout.scriptPubKey.addresses[0]) || '';
     await this.$savePegToDatabase(block.height, block.time, prevout.value * 100000000, txid, vindex,
-      outputAddress, bitcoinTx.txid, prevout.n, 1);
+      outputAddress, bitcoinTx.txid, prevout.n, bitcoinBlock.height, bitcoinBlock.time, 1);
   }
 
   protected async $parseOutputs(tx: IBitcoinApi.Transaction, block: IBitcoinApi.Block) {
     for (const output of tx.vout) {
       if (output.scriptPubKey.pegout_chain) {
         await this.$savePegToDatabase(block.height, block.time, 0 - output.value * 100000000, tx.txid, output.n,
-          (output.scriptPubKey.pegout_addresses && output.scriptPubKey.pegout_addresses[0] || ''), '', 0, 0);
+          (output.scriptPubKey.pegout_addresses && output.scriptPubKey.pegout_addresses[0] || ''), '', 0, 0, 0, 0);
       }
       if (!output.scriptPubKey.pegout_chain && output.scriptPubKey.type === 'nulldata'
         && output.value && output.value > 0 && output.asset && output.asset === Common.nativeAssetId) {
         await this.$savePegToDatabase(block.height, block.time, 0 - output.value * 100000000, tx.txid, output.n,
-          (output.scriptPubKey.pegout_addresses && output.scriptPubKey.pegout_addresses[0] || ''), '', 0, 1);
+          (output.scriptPubKey.pegout_addresses && output.scriptPubKey.pegout_addresses[0] || ''), '', 0, 0, 0, 1);
       }
     }
   }
 
   protected async $savePegToDatabase(height: number, blockTime: number, amount: number, txid: string,
-    txindex: number, bitcoinaddress: string, bitcointxid: string, bitcoinindex: number, final_tx: number): Promise<void> {
-    const query = `INSERT INTO elements_pegs(
+    txindex: number, bitcoinaddress: string, bitcointxid: string, bitcoinindex: number, bitcoinblock: number, bitcoinBlockTime: number, final_tx: number): Promise<void> {
+    const query = `INSERT IGNORE INTO elements_pegs(
         block, datetime, amount, txid, txindex, bitcoinaddress, bitcointxid, bitcoinindex, final_tx
       ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`;
 
@@ -85,7 +87,23 @@ class ElementsParser {
       height, blockTime, amount, txid, txindex, bitcoinaddress, bitcointxid, bitcoinindex, final_tx
     ];
     await DB.query(query, params);
-    logger.debug(`Saved L-BTC peg from block height #${height} with TXID ${txid}.`);
+    logger.debug(`Saved L-BTC peg from Liquid block height #${height} with TXID ${txid}.`);
+
+    if (amount > 0) { // Peg-in
+  
+      // Add the address to the federation addresses table
+      await DB.query(`INSERT IGNORE INTO federation_addresses (bitcoinaddress) VALUES (?)`, [bitcoinaddress]);
+      logger.debug(`Saved new Federation address ${bitcoinaddress} to federation addresses.`);
+
+      // Add the UTXO to the federation txos table
+      const query_utxos = `INSERT IGNORE INTO federation_txos (txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, unspent, lastblockupdate, lasttimeupdate) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+      const params_utxos: (string | number)[] = [bitcointxid, bitcoinindex, bitcoinaddress, amount, bitcoinblock, bitcoinBlockTime, 1, bitcoinblock - 1, 0];
+      await DB.query(query_utxos, params_utxos);
+      const [minBlockUpdate] = await DB.query(`SELECT MIN(lastblockupdate) AS lastblockupdate FROM federation_txos WHERE unspent = 1`)
+      await this.$saveLastBlockAuditToDatabase(minBlockUpdate[0]['lastblockupdate']);
+      logger.debug(`Saved new Federation UTXO ${bitcointxid}:${bitcoinindex} belonging to ${bitcoinaddress} to federation txos.`);
+
+    }
   }
 
   protected async $getLatestBlockHeightFromDatabase(): Promise<number> {
@@ -98,6 +116,269 @@ class ElementsParser {
     const query = `UPDATE state SET number = ? WHERE name = 'last_elements_block'`;
     await DB.query(query, [blockHeight]);
   }
+
+  ///////////// FEDERATION AUDIT //////////////
+
+  public async $updateFederationUtxos() {
+    if (this.isUtxosUpdatingRunning) {
+      return;
+    }
+
+    this.isUtxosUpdatingRunning = true;
+
+    try {
+      let auditProgress = await this.$getAuditProgress();
+      // If no peg in transaction was found in the database, return
+      if (!auditProgress.lastBlockAudit) {
+        logger.debug(`No Federation UTXOs found in the database. Waiting for some to be confirmed before starting the Federation UTXOs audit.`);
+        this.isUtxosUpdatingRunning = false;
+        return;
+      }
+
+      const bitcoinBlocksToSync = await this.$getBitcoinBlockchainState();
+      // If the bitcoin blockchain is not synced yet, return
+      if (bitcoinBlocksToSync.bitcoinHeaders > bitcoinBlocksToSync.bitcoinBlocks + 1) {
+        logger.debug(`Bitcoin client is not synced yet. ${bitcoinBlocksToSync.bitcoinHeaders - bitcoinBlocksToSync.bitcoinBlocks} blocks remaining to sync before the Federation audit process can start.`);
+        this.isUtxosUpdatingRunning = false;
+        return;
+      }
+
+      auditProgress.lastBlockAudit++;
+
+      while (auditProgress.lastBlockAudit <= auditProgress.confirmedTip) {
+        // First, get the current UTXOs that need to be scanned in the block
+        const utxos = await this.$getFederationUtxosToScan(auditProgress.lastBlockAudit);
+        logger.debug(`Found ${utxos.length} Federation UTXOs to scan in block ${auditProgress.lastBlockAudit} / ${auditProgress.confirmedTip}`);
+
+        // The fast way: check if these UTXOs are still unspent as of the current block with gettxout
+        let spentAsTip: any[];
+        let unspentAsTip: any[];
+        if (auditProgress.confirmedTip - auditProgress.lastBlockAudit <= 150) { // If the audit status is not too far in the past, we can use gettxout (fast way)
+          const utxosToParse = await this.$getFederationUtxosToParse(utxos);
+          spentAsTip = utxosToParse.spentAsTip;
+          unspentAsTip = utxosToParse.unspentAsTip;
+          logger.debug(`${unspentAsTip.length} / ${utxos.length} Federation UTXOs are unspent as of tip`);
+        } else { // If the audit status is too far in the past, it is useless to look for still unspent txos since they will all be spent as of the tip
+          spentAsTip = utxos;
+          unspentAsTip = [];
+        }
+
+        // The slow way: parse the block to look for the spending tx
+        logger.debug(`${spentAsTip.length} / ${utxos.length} Federation UTXOs are spent as of tip`);
+
+        const blockHash: IBitcoinApi.ChainTips = await bitcoinSecondClient.getBlockHash(auditProgress.lastBlockAudit);
+        const block: IBitcoinApi.Block = await bitcoinSecondClient.getBlock(blockHash, 2);
+        const nbUtxos = spentAsTip.length;
+        await DB.query('START TRANSACTION;');
+        await this.$parseBitcoinBlock(block, spentAsTip, unspentAsTip, auditProgress.confirmedTip);
+        await DB.query(`COMMIT;`);
+        logger.debug(`Watched for spending of ${nbUtxos} Federation UTXOs in block ${auditProgress.lastBlockAudit} / ${auditProgress.confirmedTip}`);
+
+        // Finally, update the lastblockupdate of the remaining UTXOs and save to the database
+        const [minBlockUpdate] = await DB.query(`SELECT MIN(lastblockupdate) AS lastblockupdate FROM federation_txos WHERE unspent = 1`)
+        await this.$saveLastBlockAuditToDatabase(minBlockUpdate[0]['lastblockupdate']);
+
+        auditProgress = await this.$getAuditProgress();
+        auditProgress.lastBlockAudit++;
+      }
+
+      this.isUtxosUpdatingRunning = false;
+    } catch (e) {
+      await DB.query('ROLLBACK;');
+      this.isUtxosUpdatingRunning = false;
+      throw new Error(e instanceof Error ? e.message : 'Error');
+    } 
+  }
+
+  // Get the UTXOs that need to be scanned in block height (UTXOs that were last updated in the block height - 1)
+  protected async $getFederationUtxosToScan(height: number) { 
+    const query = `SELECT txid, txindex, bitcoinaddress, amount FROM federation_txos WHERE lastblockupdate = ? AND unspent = 1`;
+    const [rows] = await DB.query(query, [height - 1]);
+    return rows as any[];
+  }
+
+  // Returns the UTXOs that are spent as of tip and need to be scanned
+  protected async $getFederationUtxosToParse(utxos: any[]): Promise<any> {
+    const spentAsTip: any[] = [];
+    const unspentAsTip: any[] = [];
+
+    for (const utxo of utxos) {
+      const result = await bitcoinSecondClient.getTxOut(utxo.txid, utxo.txindex, false);
+      result ? unspentAsTip.push(utxo) : spentAsTip.push(utxo);
+    }
+    
+    return {spentAsTip, unspentAsTip};
+  }
+
+  protected async $parseBitcoinBlock(block: IBitcoinApi.Block, spentAsTip: any[], unspentAsTip: any[], confirmedTip: number) {
+    for (const tx of block.tx) {
+      // Check if the Federation UTXOs that was spent as of tip are spent in this block
+      for (const input of tx.vin) {
+        const txo = spentAsTip.find(txo => txo.txid === input.txid && txo.txindex === input.vout);
+        if (txo) {
+          await DB.query(`UPDATE federation_txos SET unspent = 0, lastblockupdate = ?, lasttimeupdate = ? WHERE txid = ? AND txindex = ?`, [block.height, block.time, txo.txid, txo.txindex]);
+          // Remove the TXO from the utxo array
+          spentAsTip.splice(spentAsTip.indexOf(txo), 1);
+          logger.debug(`Federation UTXO ${txo.txid}:${txo.txindex} (${txo.amount} sats) was spent in block ${block.height}.`);
+        }
+      }
+      // Check if an output is sent to a change address of the federation
+      for (const output of tx.vout) {
+        if (output.scriptPubKey.address && federationChangeAddresses.includes(output.scriptPubKey.address)) {
+          // Check that the UTXO was not already added in the DB by previous scans
+          const [rows_check] = await DB.query(`SELECT txid FROM federation_txos WHERE txid = ? AND txindex = ?`, [tx.txid, output.n]) as any[];
+          if (rows_check.length === 0) {
+            const query_utxos = `INSERT INTO federation_txos (txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, unspent, lastblockupdate, lasttimeupdate) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+            const params_utxos: (string | number)[] = [tx.txid, output.n, output.scriptPubKey.address, output.value * 100000000, block.height, block.time, 1, block.height, 0];
+            await DB.query(query_utxos, params_utxos);
+            // Add the UTXO to the utxo array
+            spentAsTip.push({
+              txid: tx.txid,
+              txindex: output.n,
+              bitcoinaddress: output.scriptPubKey.address,
+              amount: output.value * 100000000
+            });
+            logger.debug(`Added new Federation UTXO ${tx.txid}:${output.n} of ${output.value * 100000000} sats belonging to ${output.scriptPubKey.address} (Federation change address).`);
+          }
+        }
+      }
+    }
+
+    for (const utxo of spentAsTip) {
+      await DB.query(`UPDATE federation_txos SET lastblockupdate = ? WHERE txid = ? AND txindex = ?`, [block.height, utxo.txid, utxo.txindex]);    
+    }
+
+    for (const utxo of unspentAsTip) {
+      await DB.query(`UPDATE federation_txos SET lastblockupdate = ? WHERE txid = ? AND txindex = ?`, [confirmedTip, utxo.txid, utxo.txindex]);
+    }
+  }
+
+  protected async $saveLastBlockAuditToDatabase(blockHeight: number) {
+    const query = `UPDATE state SET number = ? WHERE name = 'last_bitcoin_block_audit'`;
+    await DB.query(query, [blockHeight]);
+  }
+
+  // Get the bitcoin block where the audit process was last updated
+  protected async $getAuditProgress(): Promise<any> {
+    const lastblockaudit = await this.$getLastBlockAudit();
+    const bitcoinBlocksToSync = await this.$getBitcoinBlockchainState();
+    return {
+      lastBlockAudit: lastblockaudit,
+      confirmedTip: bitcoinBlocksToSync.bitcoinBlocks - auditBlockOffsetWithTip,
+    };
+  }
+
+  // Get the bitcoin blocks remaining to be synced
+  protected async $getBitcoinBlockchainState(): Promise<any> {
+    const result = await bitcoinSecondClient.getBlockchainInfo();
+    return {
+      bitcoinBlocks: result.blocks,
+      bitcoinHeaders: result.headers,
+    }
+  }
+
+  protected async $getLastBlockAudit(): Promise<number> {
+    const query = `SELECT number FROM state WHERE name = 'last_bitcoin_block_audit'`;
+    const [rows] = await DB.query(query);
+    return rows[0]['number'];
+  }
+
+    ///////////// DATA QUERY //////////////
+
+    public async $getAuditStatus(): Promise<any> {
+    const lastBlockAudit = await this.$getLastBlockAudit();
+    const bitcoinBlocksToSync = await this.$getBitcoinBlockchainState();
+    return {
+      bitcoinBlocks: bitcoinBlocksToSync.bitcoinBlocks,
+      bitcoinHeaders: bitcoinBlocksToSync.bitcoinHeaders,
+      lastBlockAudit: lastBlockAudit,
+      isAuditSynced: bitcoinBlocksToSync.bitcoinHeaders - bitcoinBlocksToSync.bitcoinBlocks <= 2 && bitcoinBlocksToSync.bitcoinBlocks - lastBlockAudit <= 3,
+    };
+  }
+
+  public async $getPegDataByMonth(): Promise<any> {
+    const query = `SELECT SUM(amount) AS amount, DATE_FORMAT(FROM_UNIXTIME(datetime), '%Y-%m-01') AS date FROM elements_pegs GROUP BY DATE_FORMAT(FROM_UNIXTIME(datetime), '%Y%m')`;
+    const [rows] = await DB.query(query);
+    return rows;
+  }
+
+  public async $getFederationReservesByMonth(): Promise<any> {
+    const query = `
+    SELECT SUM(amount) AS amount, DATE_FORMAT(FROM_UNIXTIME(blocktime), '%Y-%m-01') AS date FROM federation_txos 
+    WHERE
+        (blocktime > UNIX_TIMESTAMP(LAST_DAY(FROM_UNIXTIME(blocktime) - INTERVAL 1 MONTH) + INTERVAL 1 DAY))
+      AND 
+        ((unspent = 1) OR (unspent = 0 AND lasttimeupdate > UNIX_TIMESTAMP(LAST_DAY(FROM_UNIXTIME(blocktime)) + INTERVAL 1 DAY)))
+    GROUP BY 
+        date;`;          
+    const [rows] = await DB.query(query);
+    return rows;
+  }
+
+  // Get the current L-BTC pegs and the last Liquid block it was updated
+  public async $getCurrentLbtcSupply(): Promise<any> {
+    const [rows] = await DB.query(`SELECT SUM(amount) AS LBTC_supply FROM elements_pegs;`);
+    const lastblockupdate = await this.$getLatestBlockHeightFromDatabase();
+    const hash = await bitcoinClient.getBlockHash(lastblockupdate);
+    return {
+      amount: rows[0]['LBTC_supply'],
+      lastBlockUpdate: lastblockupdate,
+      hash: hash
+    };
+  }
+
+  // Get the current reserves of the federation and the last Bitcoin block it was updated
+  public async $getCurrentFederationReserves(): Promise<any> {
+    const [rows] = await DB.query(`SELECT SUM(amount) AS total_balance FROM federation_txos WHERE unspent = 1;`);
+    const lastblockaudit = await this.$getLastBlockAudit();
+    const hash = await bitcoinSecondClient.getBlockHash(lastblockaudit);
+    return {
+      amount: rows[0]['total_balance'],
+      lastBlockUpdate: lastblockaudit,
+      hash: hash
+    };
+  }
+
+  // Get all of the federation addresses, most balances first
+  public async $getFederationAddresses(): Promise<any> {
+    const query = `SELECT bitcoinaddress, SUM(amount) AS balance FROM federation_txos WHERE unspent = 1 GROUP BY bitcoinaddress ORDER BY balance DESC;`;
+    const [rows] = await DB.query(query);
+    return rows;
+  }
+
+  // Get all of the UTXOs held by the federation, most recent first
+  public async $getFederationUtxos(): Promise<any> {
+    const query = `SELECT txid, txindex, bitcoinaddress, amount, blocknumber, blocktime FROM federation_txos WHERE unspent = 1 ORDER BY blocktime DESC;`;
+    const [rows] = await DB.query(query);
+    return rows;
+  }
+
+  // Get all of the federation addresses one month ago, most balances first
+  public async $getFederationAddressesOneMonthAgo(): Promise<any> {
+    const query = `
+    SELECT bitcoinaddress, SUM(amount) AS balance FROM federation_txos 
+    WHERE
+        (blocktime < UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -30, CURRENT_TIMESTAMP())))
+      AND
+        ((unspent = 1) OR (unspent = 0 AND lasttimeupdate > UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -30, CURRENT_TIMESTAMP()))))
+   	GROUP BY bitcoinaddress ORDER BY balance DESC;`;
+    const [rows] = await DB.query(query);
+    return rows;
+  }
+
+  // Get all of the UTXOs held by the federation one month ago, most recent first
+  public async $getFederationUtxosOneMonthAgo(): Promise<any> {
+    const query = `
+    SELECT txid, txindex, amount, blocknumber, blocktime FROM federation_txos 
+    WHERE
+        (blocktime < UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -30, CURRENT_TIMESTAMP())))
+      AND
+        ((unspent = 1) OR (unspent = 0 AND lasttimeupdate > UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -30, CURRENT_TIMESTAMP()))))
+    ORDER BY blocktime DESC;`;
+    const [rows] = await DB.query(query);
+    return rows;
+  }
+
 }
 
 export default new ElementsParser();
diff --git a/backend/src/api/liquid/liquid.routes.ts b/backend/src/api/liquid/liquid.routes.ts
index b130373e1..582b139af 100644
--- a/backend/src/api/liquid/liquid.routes.ts
+++ b/backend/src/api/liquid/liquid.routes.ts
@@ -15,7 +15,15 @@ class LiquidRoutes {
     
     if (config.DATABASE.ENABLED) {
       app
+        .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/pegs', this.$getElementsPegs)
         .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/pegs/month', this.$getElementsPegsByMonth)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves', this.$getFederationReserves)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves/month', this.$getFederationReservesByMonth)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves/addresses', this.$getFederationAddresses)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves/addresses/previous-month', this.$getFederationAddressesOneMonthAgo)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves/utxos', this.$getFederationUtxos)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves/utxos/previous-month', this.$getFederationUtxosOneMonthAgo)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves/status', this.$getFederationAuditStatus)
         ;
     }
   }
@@ -63,11 +71,111 @@ class LiquidRoutes {
   private async $getElementsPegsByMonth(req: Request, res: Response) {
     try {
       const pegs = await elementsParser.$getPegDataByMonth();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60 * 60).toUTCString());
       res.json(pegs);
     } catch (e) {
       res.status(500).send(e instanceof Error ? e.message : e);
     }
   }
+
+  private async $getFederationReservesByMonth(req: Request, res: Response) {
+    try {
+      const reserves = await elementsParser.$getFederationReservesByMonth();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60 * 60).toUTCString());
+      res.json(reserves);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  private async $getElementsPegs(req: Request, res: Response) {
+    try {
+      const currentSupply = await elementsParser.$getCurrentLbtcSupply();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
+      res.json(currentSupply);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  private async $getFederationReserves(req: Request, res: Response) {
+    try {
+      const currentReserves = await elementsParser.$getCurrentFederationReserves();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
+      res.json(currentReserves);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  private async $getFederationAuditStatus(req: Request, res: Response) {
+    try {
+      const auditStatus = await elementsParser.$getAuditStatus();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
+      res.json(auditStatus);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  private async $getFederationAddresses(req: Request, res: Response) {
+    try {
+      const federationAddresses = await elementsParser.$getFederationAddresses();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
+      res.json(federationAddresses);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  private async $getFederationAddressesOneMonthAgo(req: Request, res: Response) {
+    try {
+      const federationAddresses = await elementsParser.$getFederationAddressesOneMonthAgo();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60 * 60 * 24).toUTCString());
+      res.json(federationAddresses);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  private async $getFederationUtxos(req: Request, res: Response) {
+    try {
+      const federationUtxos = await elementsParser.$getFederationUtxos();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
+      res.json(federationUtxos);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
+  private async $getFederationUtxosOneMonthAgo(req: Request, res: Response) {
+    try {
+      const federationUtxos = await elementsParser.$getFederationUtxosOneMonthAgo();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60 * 60 * 24).toUTCString());
+      res.json(federationUtxos);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
 }
 
 export default new LiquidRoutes();
diff --git a/backend/src/index.ts b/backend/src/index.ts
index a7b2ad4df..3a8449131 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -266,6 +266,7 @@ class Server {
       blocks.setNewBlockCallback(async () => {
         try {
           await elementsParser.$parse();
+          await elementsParser.$updateFederationUtxos();
         } catch (e) {
           logger.warn('Elements parsing error: ' + (e instanceof Error ? e.message : e));
         }

From de2842b62a0600de37f215847948b7f9cca240db Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Sun, 21 Jan 2024 12:46:07 +0100
Subject: [PATCH 11/92] Add pegtxid and pegindex data to federation_txos table

---
 backend/src/api/database-migration.ts     |  2 ++
 backend/src/api/liquid/elements-parser.ts | 12 ++++++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/backend/src/api/database-migration.ts b/backend/src/api/database-migration.ts
index 698d7769d..9d0a0a0d1 100644
--- a/backend/src/api/database-migration.ts
+++ b/backend/src/api/database-migration.ts
@@ -839,6 +839,8 @@ class DatabaseMigration {
       unspent tinyint(1) NOT NULL,
       lastblockupdate int(11) unsigned NOT NULL,
       lasttimeupdate int(11) unsigned NOT NULL,
+      pegtxid varchar(65) NOT NULL,
+      pegindex int(11) NOT NULL,
       PRIMARY KEY (txid, txindex), 
       FOREIGN KEY (bitcoinaddress) REFERENCES federation_addresses (bitcoinaddress)
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`;
diff --git a/backend/src/api/liquid/elements-parser.ts b/backend/src/api/liquid/elements-parser.ts
index 842234a3a..427779898 100644
--- a/backend/src/api/liquid/elements-parser.ts
+++ b/backend/src/api/liquid/elements-parser.ts
@@ -96,8 +96,8 @@ class ElementsParser {
       logger.debug(`Saved new Federation address ${bitcoinaddress} to federation addresses.`);
 
       // Add the UTXO to the federation txos table
-      const query_utxos = `INSERT IGNORE INTO federation_txos (txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, unspent, lastblockupdate, lasttimeupdate) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`;
-      const params_utxos: (string | number)[] = [bitcointxid, bitcoinindex, bitcoinaddress, amount, bitcoinblock, bitcoinBlockTime, 1, bitcoinblock - 1, 0];
+      const query_utxos = `INSERT IGNORE INTO federation_txos (txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, unspent, lastblockupdate, lasttimeupdate, pegtxid, pegindex) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+      const params_utxos: (string | number)[] = [bitcointxid, bitcoinindex, bitcoinaddress, amount, bitcoinblock, bitcoinBlockTime, 1, bitcoinblock - 1, 0, txid, txindex];
       await DB.query(query_utxos, params_utxos);
       const [minBlockUpdate] = await DB.query(`SELECT MIN(lastblockupdate) AS lastblockupdate FROM federation_txos WHERE unspent = 1`)
       await this.$saveLastBlockAuditToDatabase(minBlockUpdate[0]['lastblockupdate']);
@@ -228,8 +228,8 @@ class ElementsParser {
           // Check that the UTXO was not already added in the DB by previous scans
           const [rows_check] = await DB.query(`SELECT txid FROM federation_txos WHERE txid = ? AND txindex = ?`, [tx.txid, output.n]) as any[];
           if (rows_check.length === 0) {
-            const query_utxos = `INSERT INTO federation_txos (txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, unspent, lastblockupdate, lasttimeupdate) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`;
-            const params_utxos: (string | number)[] = [tx.txid, output.n, output.scriptPubKey.address, output.value * 100000000, block.height, block.time, 1, block.height, 0];
+            const query_utxos = `INSERT INTO federation_txos (txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, unspent, lastblockupdate, lasttimeupdate, pegtxid, pegindex) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+            const params_utxos: (string | number)[] = [tx.txid, output.n, output.scriptPubKey.address, output.value * 100000000, block.height, block.time, 1, block.height, 0, '', 0];
             await DB.query(query_utxos, params_utxos);
             // Add the UTXO to the utxo array
             spentAsTip.push({
@@ -348,7 +348,7 @@ class ElementsParser {
 
   // Get all of the UTXOs held by the federation, most recent first
   public async $getFederationUtxos(): Promise<any> {
-    const query = `SELECT txid, txindex, bitcoinaddress, amount, blocknumber, blocktime FROM federation_txos WHERE unspent = 1 ORDER BY blocktime DESC;`;
+    const query = `SELECT txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, pegtxid, pegindex FROM federation_txos WHERE unspent = 1 ORDER BY blocktime DESC;`;
     const [rows] = await DB.query(query);
     return rows;
   }
@@ -369,7 +369,7 @@ class ElementsParser {
   // Get all of the UTXOs held by the federation one month ago, most recent first
   public async $getFederationUtxosOneMonthAgo(): Promise<any> {
     const query = `
-    SELECT txid, txindex, amount, blocknumber, blocktime FROM federation_txos 
+    SELECT txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, pegtxid, pegindex FROM federation_txos 
     WHERE
         (blocktime < UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -30, CURRENT_TIMESTAMP())))
       AND

From 752eba767addb7042437d3f79a01f6b76c636e92 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Sun, 21 Jan 2024 13:19:02 +0100
Subject: [PATCH 12/92] Liquid: add BTC reserves to L-BTC widget and make it
 dynamic

---
 .../lbtc-pegs-graph.component.ts              |  43 +++--
 .../app/dashboard/dashboard.component.html    |  14 +-
 .../app/dashboard/dashboard.component.scss    |   6 +
 .../src/app/dashboard/dashboard.component.ts  | 153 ++++++++++++++----
 .../src/app/interfaces/node-api.interface.ts  |  29 ++++
 frontend/src/app/services/api.service.ts      |  34 +++-
 6 files changed, 233 insertions(+), 46 deletions(-)

diff --git a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
index c4e8cbf91..f8d0843b1 100644
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
@@ -41,20 +41,24 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges() {
-    if (!this.data) {
+    if (!this.data?.liquidPegs) {
       return;
     }
-    this.pegsChartOptions = this.createChartOptions(this.data.series, this.data.labels);
+    if (!this.data.liquidReserves || this.data.liquidReserves?.series.length !== this.data.liquidPegs.series.length) {
+      this.pegsChartOptions = this.createChartOptions(this.data.liquidPegs.series, this.data.liquidPegs.labels);
+    } else {
+      this.pegsChartOptions = this.createChartOptions(this.data.liquidPegs.series, this.data.liquidPegs.labels, this.data.liquidReserves.series);
+    }
   }
 
   rendered() {
-    if (!this.data) {
+    if (!this.data.liquidPegs) {
       return;
     }
     this.isLoading = false;
   }
 
-  createChartOptions(series: number[], labels: string[]): EChartsOption {
+  createChartOptions(pegSeries: number[], labels: string[], reservesSeries?: number[],): EChartsOption {
     return {
       grid: {
         height: this.height,
@@ -99,17 +103,18 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
           type: 'line',
         },
         formatter: (params: any) => {
-          const colorSpan = (color: string) => `<span class="indicator" style="background-color: #116761;"></span>`;
+          const colorSpan = (color: string) => `<span class="indicator" style="background-color: ${color};"></span>`;
           let itemFormatted = '<div class="title">' + params[0].axisValue + '</div>';
-          params.map((item: any, index: number) => {
+          for (let index = params.length - 1; index >= 0; index--) {
+            const item = params[index];
             if (index < 26) {
               itemFormatted += `<div class="item">
                 <div class="indicator-container">${colorSpan(item.color)}</div>
-                <div class="grow"></div>
-                <div class="value">${formatNumber(item.value, this.locale, '1.2-2')} <span class="symbol">L-BTC</span></div>
+                <div style="margin-right: 5px"></div>
+                <div class="value">${formatNumber(item.value, this.locale, '1.2-2')} <span class="symbol">${item.seriesName}</span></div>
               </div>`;
             }
-          });
+          };
           return `<div class="tx-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'tx-wrapper-tooltip-chart-advanced' : ''}">${itemFormatted}</div>`;
         }
       },
@@ -138,20 +143,34 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
       },
       series: [
         {
-          data: series,
+          data: pegSeries,
+          name: 'L-BTC',
+          color: '#116761',
           type: 'line',
           stack: 'total',
-          smooth: false,
+          smooth: true,
           showSymbol: false,
           areaStyle: {
             opacity: 0.2,
             color: '#116761',
           },
           lineStyle: {
-            width: 3,
+            width: 2,
             color: '#116761',
           },
         },
+        {
+          data: reservesSeries,
+          name: 'BTC',
+          color: '#EA983B',
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          lineStyle: {
+            width: 2,
+            color: '#EA983B',
+          },
+        },
       ],
     };
   }
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 12ce14512..9603c8d93 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -33,7 +33,7 @@
             </ng-container>
           </ng-template>
           <ng-template #liquidPegs>
-            <app-lbtc-pegs-graph [data]="liquidPegsMonth$ | async"></app-lbtc-pegs-graph>
+            <app-lbtc-pegs-graph [data]="fullHistory$ | async"></app-lbtc-pegs-graph>
           </ng-template>
         </div>
       </div>
@@ -270,8 +270,16 @@
   <div class="mempool-info-data">
     <div class="item">
       <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">L-BTC in circulation</h5>
-      <ng-container *ngIf="(liquidPegsMonth$ | async) as liquidPegsMonth; else loadingTransactions">
-        <p class="card-text">{{ liquidPegsMonth.series.slice(-1)[0] | number: '1.2-2' }} <span>L-BTC</span></p>
+      <ng-container *ngIf="(currentPeg$ | async) as currentPeg; else loadingTransactions">
+        <p i18n-ngbTooltip="liquid.last-elements-audit-block" [ngbTooltip]="'L-BTC supply last updated at Liquid block ' + (currentPeg.lastBlockUpdate)" placement="top" class="card-text">{{ (+currentPeg.amount) / 100000000 | number: '1.2-2' }} <span class="liquid-color">L-BTC</span></p>
+      </ng-container>
+    </div>
+    <div class="item">
+      <a class="title-link" [routerLink]="['/audit' | relativeUrl]">
+        <h5 class="card-title" i18n="dashboard.btc-reserves">BTC Reserves <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+      </a>
+      <ng-container *ngIf="(currentReserves$ | async) as currentReserves; else loadingTransactions">
+        <p i18n-ngbTooltip="liquid.last-bitcoin-audit-block" [ngbTooltip]="'BTC reserves last updated at Bitcoin block ' + (currentReserves.lastBlockUpdate)" placement="top" class="card-text">{{ +(currentReserves.amount) / 100000000 | number: '1.2-2' }} <span class="bitcoin-color">BTC</span></p>
       </ng-container>
     </div>
   </div>
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 884ba1027..f10c4957f 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -97,6 +97,12 @@
         color: #ffffff66;
         font-size: 12px;
       }
+      .liquid-color {
+        color: #116761;
+      }
+      .bitcoin-color {
+        color: #b86d12;
+      }
     }
     .progress {
       width: 90%;
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 8a34bf768..2f97b23a0 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -1,7 +1,7 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
-import { combineLatest, merge, Observable, of, Subscription } from 'rxjs';
-import { catchError, filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
-import { BlockExtended, OptimizedMempoolStats } from '../interfaces/node-api.interface';
+import { combineLatest, concat, EMPTY, interval, merge, Observable, of, Subscription } from 'rxjs';
+import { catchError, delay, filter, map, mergeMap, scan, share, skip, startWith, switchMap, tap } from 'rxjs/operators';
+import { AuditStatus, BlockExtended, CurrentPegs, OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { MempoolInfo, TransactionStripped, ReplacementInfo } from '../interfaces/websocket.interface';
 import { ApiService } from '../services/api.service';
 import { StateService } from '../services/state.service';
@@ -47,8 +47,15 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   transactionsWeightPerSecondOptions: any;
   isLoadingWebSocket$: Observable<boolean>;
   liquidPegsMonth$: Observable<any>;
+  currentPeg$: Observable<CurrentPegs>;
+  auditStatus$: Observable<AuditStatus>;
+  liquidReservesMonth$: Observable<any>;
+  currentReserves$: Observable<CurrentPegs>;
+  fullHistory$: Observable<any>;
   currencySubscription: Subscription;
   currency: string;
+  private lastPegBlockUpdate: number = 0;
+  private lastReservesBlockUpdate: number = 0;
 
   constructor(
     public stateService: StateService,
@@ -82,35 +89,35 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
       this.stateService.mempoolInfo$,
       this.stateService.vbytesPerSecond$
     ])
-    .pipe(
-      map(([mempoolInfo, vbytesPerSecond]) => {
-        const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100);
+      .pipe(
+        map(([mempoolInfo, vbytesPerSecond]) => {
+          const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100);
 
-        let progressColor = 'bg-success';
-        if (vbytesPerSecond > 1667) {
-          progressColor = 'bg-warning';
-        }
-        if (vbytesPerSecond > 3000) {
-          progressColor = 'bg-danger';
-        }
+          let progressColor = 'bg-success';
+          if (vbytesPerSecond > 1667) {
+            progressColor = 'bg-warning';
+          }
+          if (vbytesPerSecond > 3000) {
+            progressColor = 'bg-danger';
+          }
 
-        const mempoolSizePercentage = (mempoolInfo.usage / mempoolInfo.maxmempool * 100);
-        let mempoolSizeProgress = 'bg-danger';
-        if (mempoolSizePercentage <= 50) {
-          mempoolSizeProgress = 'bg-success';
-        } else if (mempoolSizePercentage <= 75) {
-          mempoolSizeProgress = 'bg-warning';
-        }
+          const mempoolSizePercentage = (mempoolInfo.usage / mempoolInfo.maxmempool * 100);
+          let mempoolSizeProgress = 'bg-danger';
+          if (mempoolSizePercentage <= 50) {
+            mempoolSizeProgress = 'bg-success';
+          } else if (mempoolSizePercentage <= 75) {
+            mempoolSizeProgress = 'bg-warning';
+          }
 
-        return {
-          memPoolInfo: mempoolInfo,
-          vBytesPerSecond: vbytesPerSecond,
-          progressWidth: percent + '%',
-          progressColor: progressColor,
-          mempoolSizeProgress: mempoolSizeProgress,
-        };
-      })
-    );
+          return {
+            memPoolInfo: mempoolInfo,
+            vBytesPerSecond: vbytesPerSecond,
+            progressWidth: percent + '%',
+            progressColor: progressColor,
+            mempoolSizeProgress: mempoolSizeProgress,
+          };
+        })
+      );
 
     this.mempoolBlocksData$ = this.stateService.mempoolBlocks$
       .pipe(
@@ -204,8 +211,11 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
       );
 
     if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') {
-      this.liquidPegsMonth$ = this.apiService.listLiquidPegsMonth$()
+      ////////// Pegs historical data //////////
+      this.liquidPegsMonth$ = interval(60 * 60 * 1000)
         .pipe(
+          startWith(0),
+          switchMap(() => this.apiService.listLiquidPegsMonth$()),
           map((pegs) => {
             const labels = pegs.map(stats => stats.date);
             const series = pegs.map(stats => parseFloat(stats.amount) / 100000000);
@@ -217,6 +227,89 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
           }),
           share(),
         );
+
+      this.currentPeg$ = concat(
+        // We fetch the current peg when the page load and
+        // wait for the API response before listening to websocket blocks
+        this.apiService.liquidPegs$()
+          .pipe(
+            tap((currentPeg) => this.lastPegBlockUpdate = currentPeg.lastBlockUpdate)
+          ),
+        // Or when we receive a newer block, we wait 2 seconds so that the backend updates and we fetch the current peg
+        this.stateService.blocks$
+          .pipe(
+            delay(2000),
+            switchMap((_) => this.apiService.liquidPegs$()),
+            filter((currentPeg) => currentPeg.lastBlockUpdate > this.lastPegBlockUpdate),
+            tap((currentPeg) => this.lastPegBlockUpdate = currentPeg.lastBlockUpdate)
+          )
+      ).pipe(
+        share()
+      );
+
+      ////////// BTC Reserves historical data //////////
+      this.auditStatus$ = concat(
+        this.apiService.federationAuditSynced$().pipe(share()),
+        this.stateService.blocks$.pipe(
+          skip(1),
+          delay(2000),
+          switchMap(() => this.apiService.federationAuditSynced$()),
+          share()
+        )
+      );
+      
+      this.liquidReservesMonth$ = interval(60 * 60 * 1000).pipe(
+        startWith(0),
+        mergeMap(() => this.apiService.federationAuditSynced$()),
+        switchMap((auditStatus) => {
+          return auditStatus.isAuditSynced ? this.apiService.listLiquidReservesMonth$() : EMPTY;
+        }),
+        map(reserves => {
+          const labels = reserves.map(stats => stats.date);
+          const series = reserves.map(stats => parseFloat(stats.amount) / 100000000);
+          return {
+            series,
+            labels
+          };
+        }),
+        share()
+      );
+
+      this.currentReserves$ = this.auditStatus$.pipe(
+        filter(auditStatus => auditStatus.isAuditSynced === true),
+        switchMap(_ =>
+          this.apiService.liquidReserves$().pipe(
+            filter((currentReserves) => currentReserves.lastBlockUpdate > this.lastReservesBlockUpdate),
+            tap((currentReserves) => {
+              this.lastReservesBlockUpdate = currentReserves.lastBlockUpdate;
+            })
+          )
+        ),
+        share()
+      );
+
+      this.fullHistory$ = combineLatest([this.liquidPegsMonth$, this.currentPeg$, this.liquidReservesMonth$.pipe(startWith(null)), this.currentReserves$.pipe(startWith(null))])
+        .pipe(
+          map(([liquidPegs, currentPeg, liquidReserves, currentReserves]) => {
+            liquidPegs.series[liquidPegs.series.length - 1] = parseFloat(currentPeg.amount) / 100000000;
+
+            if (liquidPegs.series.length === liquidReserves?.series.length) {
+              liquidReserves.series[liquidReserves.series.length - 1] = parseFloat(currentReserves?.amount) / 100000000;
+            } else if (liquidPegs.series.length === liquidReserves?.series.length + 1) {
+              liquidReserves.series.push(parseFloat(currentReserves?.amount) / 100000000);
+            } else {
+              liquidReserves = {
+                series: [],
+                labels: []
+              };
+            }
+
+            return {
+              liquidPegs,
+              liquidReserves
+            };
+          })
+        );
     }
 
     this.currencySubscription = this.stateService.fiatCurrency$.subscribe((fiat) => {
diff --git a/frontend/src/app/interfaces/node-api.interface.ts b/frontend/src/app/interfaces/node-api.interface.ts
index 9d936722d..5989be7fa 100644
--- a/frontend/src/app/interfaces/node-api.interface.ts
+++ b/frontend/src/app/interfaces/node-api.interface.ts
@@ -76,6 +76,35 @@ export interface LiquidPegs {
   date: string;
 }
 
+export interface CurrentPegs {
+  amount: string;
+  lastBlockUpdate: number;
+  hash: string;
+}
+
+export interface FederationAddress { 
+  address: string;
+  balance: string;
+}
+
+export interface FederationUtxo {
+  txid: string;
+  txindex: number;
+  bitcoinaddress: string;
+  amount: number;
+  blocknumber: number;
+  blocktime: number;
+  pegtxid: string;
+  pegindex: number;
+}
+
+export interface AuditStatus {
+  bitcoinBlocks: number;
+  bitcoinHeaders: number;
+  lastBlockAudit: number;
+  isAuditSynced: boolean;
+}
+
 export interface ITranslators { [language: string]: string; }
 
 /**
diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index 854d15c2a..42dd6a26e 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/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 } from '../interfaces/node-api.interface';
+  PoolStat, BlockExtended, TransactionStripped, RewardStats, AuditScore, BlockSizesAndWeights, RbfTree, BlockAudit, Acceleration, AccelerationHistoryParams, CurrentPegs, AuditStatus, FederationAddress, FederationUtxo } 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';
@@ -178,10 +178,42 @@ export class ApiService {
     return this.httpClient.get<RbfTree[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/' + (fullRbf ? 'fullrbf/' : '') + 'replacements/' + (after || ''));
   }
 
+  liquidPegs$(): Observable<CurrentPegs> {
+    return this.httpClient.get<CurrentPegs>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/pegs');
+  }
+
   listLiquidPegsMonth$(): Observable<LiquidPegs[]> {
     return this.httpClient.get<LiquidPegs[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/pegs/month');
   }
 
+  liquidReserves$(): Observable<CurrentPegs> {
+    return this.httpClient.get<CurrentPegs>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves');
+  }
+
+  listLiquidReservesMonth$(): Observable<LiquidPegs[]> {
+    return this.httpClient.get<LiquidPegs[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves/month');
+  }
+
+  federationAuditSynced$(): Observable<AuditStatus> {
+    return this.httpClient.get<AuditStatus>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves/status');
+  }
+
+  federationAddresses$(): Observable<FederationAddress[]> {
+    return this.httpClient.get<FederationAddress[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves/addresses');
+  }
+
+  federationUtxos$(): Observable<FederationUtxo[]> {
+    return this.httpClient.get<FederationUtxo[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves/utxos');
+  }
+
+  federationAddressesOneMonthAgo$(): Observable<FederationAddress[]> {
+    return this.httpClient.get<FederationAddress[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves/addresses/previous-month');
+  }
+
+  federationUtxosOneMonthAgo$(): Observable<FederationUtxo[]> {
+    return this.httpClient.get<FederationUtxo[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves/utxos/previous-month');
+  }
+
   listFeaturedAssets$(): Observable<any[]> {
     return this.httpClient.get<any[]>(this.apiBaseUrl + '/api/v1/assets/featured');
   }

From cd713c61b3fe403e1ac7398bbacffe1db0438d6b Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Sun, 21 Jan 2024 13:33:20 +0100
Subject: [PATCH 13/92] Liquid: wip on Federation audit dashboard

---
 .../components/amount/amount.component.html   |   2 +-
 .../app/components/amount/amount.component.ts |   1 +
 .../liquid-master-page.component.html         |   3 +
 .../federation-utxos-list.component.html      |  84 +++++++++
 .../federation-utxos-list.component.scss      |  91 ++++++++++
 .../federation-utxos-list.component.ts        |  66 ++++++++
 .../federation-utxos-stats.component.html     |  46 +++++
 .../federation-utxos-stats.component.scss     |  80 +++++++++
 .../federation-utxos-stats.component.ts       |  42 +++++
 .../reserves-audit-dashboard.component.html   |  58 +++++++
 .../reserves-audit-dashboard.component.scss   | 160 ++++++++++++++++++
 .../reserves-audit-dashboard.component.ts     |  86 ++++++++++
 .../reserves-ratio.component.html             |   4 +
 .../reserves-ratio.component.scss             |   6 +
 .../reserves-ratio.component.ts               | 127 ++++++++++++++
 .../reserves-supply-stats.component.html      |  44 +++++
 .../reserves-supply-stats.component.scss      |  73 ++++++++
 .../reserves-supply-stats.component.ts        |  24 +++
 frontend/src/app/graphs/echarts.ts            |   4 +-
 .../app/liquid/liquid-master-page.module.ts   |  31 ++++
 20 files changed, 1029 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.scss
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.html
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.scss
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.ts

diff --git a/frontend/src/app/components/amount/amount.component.html b/frontend/src/app/components/amount/amount.component.html
index 29f61ca41..34f9be8ae 100644
--- a/frontend/src/app/components/amount/amount.component.html
+++ b/frontend/src/app/components/amount/amount.component.html
@@ -19,7 +19,7 @@
   </ng-template>
   <ng-template #default>
     &lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }}
-    <span class="symbol"><ng-template [ngIf]="network === 'liquid'">L-</ng-template>
+    <span class="symbol"><ng-template [ngIf]="network === 'liquid' && !forceBtc">L-</ng-template>
     <ng-template [ngIf]="network === 'liquidtestnet'">tL-</ng-template>
     <ng-template [ngIf]="network === 'testnet'">t</ng-template>
     <ng-template [ngIf]="network === 'signet'">s</ng-template>BTC</span>
diff --git a/frontend/src/app/components/amount/amount.component.ts b/frontend/src/app/components/amount/amount.component.ts
index 479ae4791..9c779265c 100644
--- a/frontend/src/app/components/amount/amount.component.ts
+++ b/frontend/src/app/components/amount/amount.component.ts
@@ -23,6 +23,7 @@ export class AmountComponent implements OnInit, OnDestroy {
   @Input() noFiat = false;
   @Input() addPlus = false;
   @Input() blockConversion: Price;
+  @Input() forceBtc: boolean = false;
 
   constructor(
     private stateService: StateService,
diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
index 49f05c3a2..30fc153c7 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
@@ -78,6 +78,9 @@
       <li class="nav-item" routerLinkActive="active" id="btn-assets">
         <a class="nav-link" [routerLink]="['/assets' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" i18n-title="master-page.assets" title="Assets"></fa-icon></a>
       </li>
+      <li class="nav-item" routerLinkActive="active" id="btn-audit">
+        <a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'check-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="BTC Reserves Audit"></fa-icon></a>
+      </li>
       <li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active" id="btn-docs">
         <a class="nav-link" [routerLink]="['/docs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="master-page.docs" title="Docs"></fa-icon></a>
       </li>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
new file mode 100644
index 000000000..0c5981be6
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -0,0 +1,84 @@
+<div class="container-xl" style="min-height: 335px" [ngClass]="{'widget': widget, 'full-height': !widget}">
+  <h1 *ngIf="!widget" class="float-left" i18n="liquid.federation-utxos">Liquid Federation UTXOs</h1>
+  <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;">
+        <th class="txid text-left" [ngClass]="{'widget': widget}">Output</th>
+        <th class="address text-left" *ngIf="!widget">Address</th>
+        <th class="amount text-right" [ngClass]="{'widget': widget}">Amount</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' : ''">
+        <ng-container *ngIf="widget; else regularRows">
+          <tr *ngFor="let utxo of utxos | slice:0:5">
+            <td class="txid text-left widget">
+              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:#b86d12">
+                <app-truncate [text]="utxo.txid + ':' + utxo.txindex" [lastChars]="6"></app-truncate>
+              </a>
+            </td>
+            <td class="amount text-right widget">
+              <app-amount [satoshis]="utxo.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
+            </td>
+            <td class="timestamp text-right widget" [ngClass]="{'widget': widget}">
+              <app-time kind="since" [time]="utxo.blocktime"></app-time>
+            </td>
+          </tr>
+        </ng-container>
+        <ng-template #regularRows>
+          <tr *ngFor="let utxo of utxos | slice:(page - 1) * pageSize:page * pageSize">
+            <td class="txid text-left">
+              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:#b86d12">
+                <app-truncate [text]="utxo.txid + ':' + utxo.txindex" [lastChars]="6"></app-truncate>
+              </a>
+            </td>
+            <td class="address text-left">
+              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + utxo.bitcoinaddress }}" target="_blank" style="color:#b86d12">
+                <app-truncate [text]="utxo.bitcoinaddress" [lastChars]="6"></app-truncate>
+              </a>
+            </td>
+            <td class="amount text-right">
+              <app-amount [satoshis]="utxo.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
+            </td>
+            <td class="timestamp text-right">
+              &lrm;{{ utxo.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
+              <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="utxo.blocktime"></app-time>)</i></div>
+            </td>
+          </tr>
+        </ng-template>
+      </tbody>
+      <ng-template #skeleton>
+        <tbody>
+          <tr *ngFor="let item of skeletonLines">
+            <td class="txid text-left" [ngClass]="{'widget': widget}">
+              <span class="skeleton-loader" style="max-width: 75px"></span>
+            </td>
+            <td class="address text-left" [ngClass]="{'widget': widget}">
+              <span class="skeleton-loader" style="max-width: 125px"></span>
+            </td>
+            <td class="amount" *ngIf="!widget">
+              <span class="skeleton-loader" style="max-width: 150px"></span>
+            </td>
+            <td class="timestamp" *ngIf="!widget">
+              <span class="skeleton-loader" style="max-width: 125px"></span>
+            </td>
+          </tr>
+        </tbody>
+      </ng-template>
+    </table>
+
+    <ngb-pagination *ngIf="!widget && federationUtxos$ | 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>
+
+    <ng-template [ngIf]="!widget">
+      <div class="clearfix"></div>
+      <br>
+    </ng-template>
+  </div>
+  
+</div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
new file mode 100644
index 000000000..4208fd167
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
@@ -0,0 +1,91 @@
+.spinner-border {
+  height: 25px;
+  width: 25px;
+  margin-top: 13px;
+}
+
+.container-xl {
+  max-width: 1400px;
+}
+.container-xl.widget {
+  padding-left: 0px;
+  padding-bottom: 0px;
+}
+
+tr, td, th {
+  border: 0px;
+  padding-top: 0.65rem !important;
+  padding-bottom: 0.6rem !important;
+  padding-right: 2rem !important;
+  .widget {
+    padding-right: 1rem !important;
+  }
+}
+
+.clear-link {
+  color: white;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.progress {
+  background-color: #2d3348;
+}
+
+.txid {
+  width: 35%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+}
+.txid.widget {
+  width: 50%;
+  
+}
+
+.address {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+  @media (max-width: 527px) {
+    display: none;
+  }
+}
+
+.amount {
+  width: 12%;
+}
+.amount.widget {
+  width: 25%;
+}
+
+.timestamp {
+  width: 18%;
+  @media (max-width: 800px) {
+    display: none;
+  }
+  @media (max-width: 1000px) {
+    .relative-time {
+      display: none;
+    }
+  }
+}
+.timestamp.widget {
+  width: 25%;
+  @media (min-width: 768px) AND (max-width: 1050px) {
+    display: none;
+  }
+  @media (max-width: 767px) {
+    display: block;
+  }
+
+  @media (max-width: 500px) {
+    display: none;
+  }
+}
+
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
new file mode 100644
index 000000000..19122b658
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
@@ -0,0 +1,66 @@
+import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
+import { BehaviorSubject, combineLatest, Observable, timer, of, concat } from 'rxjs';
+import { delay, delayWhen, filter, map, retryWhen, scan, share, skip, switchMap, tap } from 'rxjs/operators';
+import { ApiService } from '../../../services/api.service';
+import { Env, StateService } from '../../../services/state.service';
+import { AuditStatus, FederationUtxo } from '../../../interfaces/node-api.interface';
+import { WebsocketService } from '../../../services/websocket.service';
+
+@Component({
+  selector: 'app-federation-utxos-list',
+  templateUrl: './federation-utxos-list.component.html',
+  styleUrls: ['./federation-utxos-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FederationUtxosListComponent implements OnInit {
+  @Input() widget: boolean = false;
+  @Input() federationUtxos$: Observable<FederationUtxo[]>;
+
+  env: Env;
+  isLoading = true;
+  page = 1;
+  pageSize = 15;
+  maxSize = window.innerWidth <= 767.98 ? 3 : 5;
+  skeletonLines: number[] = [];
+  auditStatus$: Observable<AuditStatus>;
+
+  constructor(
+    private apiService: ApiService,
+    public stateService: StateService,
+    private websocketService: WebsocketService,
+    private cd: ChangeDetectorRef,
+  ) {
+  }
+
+  ngOnInit(): void {
+    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$ = concat(
+        this.apiService.federationAuditSynced$(),
+        this.stateService.blocks$.pipe(
+          skip(1),
+          delay(2000),
+          switchMap(() => this.apiService.federationAuditSynced$()),
+          share()
+        )
+      );
+
+      this.federationUtxos$ = this.auditStatus$.pipe(
+        filter(auditStatus => auditStatus.isAuditSynced === true),
+        switchMap(_ => this.apiService.federationUtxos$()),
+        tap(_ => this.isLoading = false),
+        share()
+      );
+    }
+
+
+  }
+
+  pageChange(page: number): void {
+    this.page = page;
+  }
+
+}
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
new file mode 100644
index 000000000..84078b201
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
@@ -0,0 +1,46 @@
+<div *ngIf="(federationUtxos$ | async) as federationUtxos; else loadingData">
+  <div *ngIf="(federationAddresses$ | async) as federationAddresses; else loadingData">
+    <div class="fee-estimation-container">
+      <div class="item">
+        <a class="title-link" [routerLink]="['/audit/utxos' | relativeUrl]">
+          <h5 class="card-title" i18n="dashboard.federation-utxos">Outputs <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+        </a>
+        <div class="card-text">
+          <div class="fee-text">{{ federationUtxos.length }} <span>UTXOs</span></div>
+          <span class="fiat" *ngIf="(federationUtxosOneMonthAgo$ | async) as federationUtxosOneMonthAgo" i18n-ngbTooltip="liquid.percentage-change-last-month" ngbTooltip="Percentage change past month" placement="bottom">
+            <app-change [current]="federationUtxos.length" [previous]="federationUtxosOneMonthAgo.length"></app-change>
+          </span>
+        </div>
+      </div>
+      <div class="item">
+        <h5 class="card-title" i18n="dashboard.federation-addresses">Addresses</h5>
+        <div class="card-text">
+          <div class="fee-text">{{ federationAddresses.length }} <span>addresses</span></div>
+          <span class="fiat" *ngIf="(federationAddressesOneMonthAgo$ | async) as federationAddressesOneMonthAgo" i18n-ngbTooltip="liquid.percentage-change-last-month" ngbTooltip="Percentage change past month" placement="bottom">
+            <app-change [current]="federationAddresses.length" [previous]="federationAddressesOneMonthAgo.length"></app-change>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ng-template #loadingData>
+  <div class="fee-estimation-container loading-container">
+    <div class="item">
+      <h5 class="card-title" i18n="dashboard.federation-utxos">Outputs</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="dashboard.federation-addresses">Addresses</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+  </div>
+</ng-template>
+
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss
new file mode 100644
index 000000000..50ab123b6
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss
@@ -0,0 +1,80 @@
+.fee-estimation-container {
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: 376px) {
+    flex-direction: row;
+  }  
+  .item {
+    max-width: 150px;
+    margin: 0;
+    width: -webkit-fill-available;
+    @media (min-width: 376px) {
+      margin: 0 auto 0px;
+    }
+
+    .card-title {
+      color: #4a68b9;
+      font-size: 10px;
+      margin-bottom: 4px;  
+      font-size: 1rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .card-text {
+      font-size: 22px;
+      span {
+        font-size: 11px;
+        position: relative;
+        top: -2px;
+      }
+    }
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .card-text span {
+      color: #ffffff66;
+      font-size: 12px;
+      top: 0px;
+    }
+    .fee-text{
+      border-bottom: 1px solid #ffffff1c;
+      width: fit-content;
+      margin: auto;
+      line-height: 1.45;
+      padding: 0px 2px;
+    }
+    .fiat {
+      display: block;
+      font-size: 14px !important;
+    }
+  }
+}
+
+.loading-container{
+  min-height: 76px;
+}
+
+.card-text {
+  .skeleton-loader {
+    width: 100%;
+    display: block;
+    &:first-child {
+      max-width: 90px;
+      margin: 15px auto 3px;
+    }
+    &:last-child {
+      margin: 10px auto 3px;
+      max-width: 55px;
+    }
+  }
+}
+
+.title-link, .title-link:hover, .title-link:focus, .title-link:active {
+  display: block;
+  margin-bottom: 10px;
+  text-decoration: none;
+  color: inherit;
+}
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts
new file mode 100644
index 000000000..5f35b582e
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts
@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { concat, interval, Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { ApiService } from '../../../services/api.service';
+import { StateService } from '../../../services/state.service';
+import { FederationAddress, FederationUtxo } from '../../../interfaces/node-api.interface';
+
+@Component({
+  selector: 'app-federation-utxos-stats',
+  templateUrl: './federation-utxos-stats.component.html',
+  styleUrls: ['./federation-utxos-stats.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FederationUtxosStatsComponent implements OnInit {
+  @Input() federationUtxos$: Observable<FederationUtxo[]>;
+  @Input() federationAddresses$: Observable<FederationAddress[]>;
+
+  federationUtxosOneMonthAgo$: Observable<FederationUtxo[]>;
+  federationAddressesOneMonthAgo$: Observable<FederationAddress[]>;
+
+  constructor(private apiService: ApiService, private stateService: StateService) { }
+
+  ngOnInit(): void {
+
+    // Calls this.apiService.federationUtxosOneMonthAgo$ at load and then every day
+    this.federationUtxosOneMonthAgo$ = concat(
+      this.apiService.federationUtxosOneMonthAgo$(),
+      interval(24 * 60 * 60 * 1000).pipe(
+        switchMap(() => this.apiService.federationUtxosOneMonthAgo$())
+      )
+    );
+
+    // Calls this.apiService.federationAddressesOneMonthAgo$ at load and then every day
+    this.federationAddressesOneMonthAgo$ = concat(
+      this.apiService.federationAddressesOneMonthAgo$(),
+      interval(24 * 60 * 60 * 1000).pipe(
+        switchMap(() => this.apiService.federationAddressesOneMonthAgo$())
+      )
+    );
+  }
+
+}
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
new file mode 100644
index 000000000..ddac8dd1c
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
@@ -0,0 +1,58 @@
+<div class="container-xl dashboard-container" *ngIf="(auditStatus$ | async)?.isAuditSynced; else auditInProgress">
+
+  <div class="row row-cols-1 row-cols-md-2">
+
+    <div class="col">
+      <div class="main-title">
+        <span i18n="liquid.bitcoin-reserves">BTC Reserves</span>
+      </div>
+      <div class="card">
+        <div class="card-body">
+          <app-reserves-supply-stats [currentPeg$]="currentPeg$" [currentReserves$]="currentReserves$"></app-reserves-supply-stats>
+          <app-reserves-ratio [currentPeg]="currentPeg$ | async" [currentReserves]="currentReserves$ | async"></app-reserves-ratio>
+        </div>
+      </div>
+    </div>
+
+    <div class="col">
+      <div class="main-title">
+        <span i18n="liquid.federation-utxos">Liquid Federation UTXOs</span>
+      </div>
+      <div class="card">
+        <div class="card-body">
+          <app-federation-utxos-stats [federationUtxos$]="federationUtxos$" [federationAddresses$]="federationAddresses$"></app-federation-utxos-stats>
+          <app-federation-utxos-list [federationUtxos$]="federationUtxos$" [widget]="true"></app-federation-utxos-list>
+        </div>
+      </div>
+    </div>
+
+    <div class="col" style="margin-bottom: 1.47rem">
+      <div class="card graph-card">
+        <div class="card-body pl-2 pr-2">
+          <!-- The historical ratio chart -->
+        </div>
+      </div>
+    </div>
+
+    <div class="col" style="margin-bottom: 1.47rem">
+      <div class="card graph-card">
+        <div class="card-body pl-2 pr-2">
+          <!-- The addresses table -->
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<ng-template #loadingTransactions>
+  <div class="skeleton-loader skeleton-loader-transactions"></div>
+</ng-template>
+
+<ng-template #auditInProgress>
+  <ng-container *ngIf="(auditStatus$ | async) as auditStatus; else loadingTransactions">
+    <div class="in-progress-message" *ngIf="auditStatus.lastBlockAudit && auditStatus.bitcoinHeaders; else loadingTransactions">
+      <span i18n="liquid.audit-in-progress">Audit in progress: block {{ auditStatus.lastBlockAudit }} / {{ auditStatus.bitcoinHeaders }}</span>
+    </div>
+  </ng-container>
+</ng-template>
\ No newline at end of file
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.scss b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.scss
new file mode 100644
index 000000000..46f9ffa4d
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.scss
@@ -0,0 +1,160 @@
+.dashboard-container {
+  text-align: center;
+  margin-top: 0.5rem;
+  .col {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.card {
+  background-color: #1d1f31;
+}
+
+.graph-card {
+  height: 100%;
+  @media (min-width: 992px) {
+    height: 385px;
+  }
+}
+
+.card-title {
+  font-size: 1rem;
+  color: #4a68b9;
+}
+.card-title > a {
+  color: #4a68b9;
+}
+
+.card-body.pool-ranking {
+  padding: 1.25rem 0.25rem 0.75rem 0.25rem;
+}
+.card-text {
+  font-size: 22px;
+}
+
+#blockchain-container {
+  position: relative;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+#blockchain-container::-webkit-scrollbar {
+  display: none;
+}
+
+.fade-border {
+  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 80%, transparent 100%)
+}
+
+.main-title {
+  position: relative;
+  color: #ffffff91;
+  margin-top: -13px;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}
+
+.in-progress-message {
+  position: relative;
+  color: #ffffff91;
+  margin-top: 20px;
+  text-align: center;
+  padding-bottom: 3px;
+  font-weight: 500;
+}
+
+.more-padding {
+  padding: 24px 20px !important;
+}
+
+.card-wrapper {
+  .card {
+    height: auto !important;
+  }
+  .card-body {
+    display: flex;
+    flex: inherit;
+    text-align: center;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 22px 20px;
+  }
+}
+
+.skeleton-loader {
+  width: 100%;
+  display: block;
+  &:first-child {
+    max-width: 90px;
+    margin: 15px auto 3px;
+  }
+  &:last-child {
+    margin: 10px auto 3px;
+    max-width: 55px;
+  }
+}
+
+.card-text {
+  font-size: 22px;
+}
+
+.title-link, .title-link:hover, .title-link:focus, .title-link:active {
+  display: block;
+  margin-bottom: 10px;
+  text-decoration: none;
+  color: inherit;
+}
+
+.lastest-blocks-table {
+  width: 100%;
+  text-align: left;
+  tr, td, th {
+    border: 0px;
+    padding-top: 0.65rem !important;
+    padding-bottom: 0.8rem !important;
+  }
+  .table-cell-height {
+    width: 25%;
+  }
+  .table-cell-fee {
+    width: 25%;
+    text-align: right;
+  }
+  .table-cell-pool {
+    text-align: left;
+    width: 30%;
+
+    @media (max-width: 875px) {
+      display: none;
+    }
+
+    .pool-name {
+      margin-left: 1em;
+    }
+  }
+  .table-cell-acceleration-count {
+    text-align: right;
+    width: 20%;
+  }
+}
+
+.card {
+  height: 385px;
+}
+.list-card {
+  height: 410px;
+  @media (max-width: 767px) {
+    height: auto;
+  }
+}
+
+.mempool-block-wrapper {
+  max-height: 380px;
+  max-width: 380px;
+  margin: auto;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
new file mode 100644
index 000000000..e71ff8e80
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
@@ -0,0 +1,86 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { SeoService } from '../../../services/seo.service';
+import { WebsocketService } from '../../../services/websocket.service';
+import { StateService } from '../../../services/state.service';
+import { Observable, concat, delay, filter, share, skip, switchMap, tap } from 'rxjs';
+import { ApiService } from '../../../services/api.service';
+import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo } from '../../../interfaces/node-api.interface';
+
+@Component({
+  selector: 'app-reserves-audit-dashboard',
+  templateUrl: './reserves-audit-dashboard.component.html',
+  styleUrls: ['./reserves-audit-dashboard.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReservesAuditDashboardComponent implements OnInit {
+  auditStatus$: Observable<AuditStatus>;
+  currentPeg$: Observable<CurrentPegs>;
+  currentReserves$: Observable<CurrentPegs>;
+  federationUtxos$: Observable<FederationUtxo[]>;
+  federationAddresses$: Observable<FederationAddress[]>;
+  private lastPegBlockUpdate: number = 0;
+  private lastReservesBlockUpdate: number = 0;
+
+
+  constructor(
+    private seoService: SeoService,
+    private websocketService: WebsocketService,
+    private apiService: ApiService,
+    private stateService: StateService,
+  ) {
+    this.seoService.setTitle($localize`:@@liquid.reserves-audit:Reserves Audit Dashboard`);
+  }
+
+  ngOnInit(): void {
+    this.websocketService.want(['blocks', 'mempool-blocks']);
+
+    this.auditStatus$ = concat(
+      this.apiService.federationAuditSynced$().pipe(share()),
+      this.stateService.blocks$.pipe(
+        skip(1),
+        delay(2000),
+        switchMap(() => this.apiService.federationAuditSynced$()),
+        share()
+      )
+    );
+
+    this.currentReserves$ = this.auditStatus$.pipe(
+      filter(auditStatus => auditStatus.isAuditSynced === true),
+      switchMap(_ =>
+        this.apiService.liquidReserves$().pipe(
+          filter((currentReserves) => currentReserves.lastBlockUpdate > this.lastReservesBlockUpdate),
+          tap((currentReserves) => {
+            this.lastReservesBlockUpdate = currentReserves.lastBlockUpdate;
+          })
+        )
+      ),
+      share()
+    );
+
+    this.currentPeg$ = this.auditStatus$.pipe(
+      filter(auditStatus => auditStatus.isAuditSynced === true),
+      switchMap(_ =>
+        this.apiService.liquidPegs$().pipe(
+          filter((currentPegs) => currentPegs.lastBlockUpdate > this.lastPegBlockUpdate),
+          tap((currentPegs) => {
+            this.lastPegBlockUpdate = currentPegs.lastBlockUpdate;
+          })
+        )
+      ),
+      share()
+    );
+
+    this.federationUtxos$ = this.auditStatus$.pipe(
+      filter(auditStatus => auditStatus.isAuditSynced === true),
+      switchMap(_ => this.apiService.federationUtxos$()),
+      share()
+    );
+
+    this.federationAddresses$ = this.auditStatus$.pipe(
+      filter(auditStatus => auditStatus.isAuditSynced === true),
+      switchMap(_ => this.apiService.federationAddresses$()),
+      share()
+    );
+  }
+
+}
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.html
new file mode 100644
index 000000000..561656760
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.html
@@ -0,0 +1,4 @@
+<div class="echarts" echarts [initOpts]="pegsChartInitOption" [options]="pegsChartOptions" (chartRendered)="rendered()"></div>
+<div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="spinner-border text-light"></div>
+</div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.scss b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.scss
new file mode 100644
index 000000000..9881148fc
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.scss
@@ -0,0 +1,6 @@
+.loadingGraphs {
+  position: absolute;
+  top: 50%;
+  left: calc(50% - 16px);
+  z-index: 100;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
new file mode 100644
index 000000000..0a6363257
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
@@ -0,0 +1,127 @@
+import { Component, ChangeDetectionStrategy, Input, OnChanges, OnInit } from '@angular/core';
+import { EChartsOption } from '../../../graphs/echarts';
+import { CurrentPegs } from '../../../interfaces/node-api.interface';
+
+
+@Component({
+  selector: 'app-reserves-ratio',
+  templateUrl: './reserves-ratio.component.html',
+  styleUrls: ['./reserves-ratio.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReservesRatioComponent implements OnInit, OnChanges {
+  @Input() currentPeg: CurrentPegs;
+  @Input() currentReserves: CurrentPegs;
+  pegsChartOptions: EChartsOption;
+
+  height: number | string = '200';
+  right: number | string = '10';
+  top: number | string = '20';
+  left: number | string = '50';
+  template: ('widget' | 'advanced') = 'widget';
+  isLoading = true;
+
+  pegsChartOption: EChartsOption = {};
+  pegsChartInitOption = {
+    renderer: 'svg'
+  };
+
+  constructor() { }
+
+  ngOnInit() {
+    this.isLoading = true;
+  }
+
+  ngOnChanges() {
+    if (!this.currentPeg || !this.currentReserves || this.currentPeg.amount === '0') {
+      return;
+    }
+    this.pegsChartOptions = this.createChartOptions(this.currentPeg, this.currentReserves);
+  }
+
+  rendered() {
+    if (!this.currentPeg || !this.currentReserves) {
+      return;
+    }
+    this.isLoading = false;
+  }
+
+  createChartOptions(currentPeg: CurrentPegs, currentReserves: CurrentPegs): EChartsOption {
+    return {
+      series: [
+        {
+          type: 'gauge',
+          startAngle: 180,
+          endAngle: 0,
+          center: ['50%', '70%'],
+          radius: '100%',
+          min: 0.999,
+          max: 1.001,
+          splitNumber: 2,
+          axisLine: {
+            lineStyle: {
+              width: 6,
+              color: [
+                [0.49, '#D81B60'],
+                [1, '#7CB342']
+              ]
+            }
+          },
+          axisLabel: {
+            color: 'inherit',        
+            fontFamily: 'inherit',    
+          },
+          pointer: {
+            icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
+            length: '50%',
+            width: 16,
+            offsetCenter: [0, '-27%'],
+            itemStyle: {
+              color: 'auto'
+            }
+          },
+          axisTick: {
+            length: 12,
+            lineStyle: {
+              color: 'auto',
+              width: 2
+            }
+          },
+          splitLine: {
+            length: 20,
+            lineStyle: {
+              color: 'auto',
+              width: 5
+            }
+          },
+          title: {
+            show: true,
+            offsetCenter: [0, '-117.5%'],
+            fontSize: 18,
+            color: '#4a68b9',
+            fontFamily: 'inherit',
+            fontWeight: 500,
+          },
+          detail: {
+            fontSize: 25,
+            offsetCenter: [0, '-0%'],
+            valueAnimation: true,
+            fontFamily: 'inherit',
+            fontWeight: 500,
+            formatter: function (value) {
+              return (value).toFixed(5);
+            },
+            color: 'inherit'
+          },
+          data: [
+            {
+              value: parseFloat(currentReserves.amount) / parseFloat(currentPeg.amount),
+              name: 'Peg-O-Meter'
+            }
+          ]
+        }
+      ]
+    };
+  }
+}
+
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
new file mode 100644
index 000000000..d0a624a4f
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
@@ -0,0 +1,44 @@
+<div *ngIf="(currentPeg$ | async) as currentPeg; else loadingData">
+  <div *ngIf="(currentReserves$ | async) as currentReserves; else loadingData">
+    <div class="fee-estimation-container">
+      <div class="item">
+        <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">L-BTC in circulation</h5>
+        <div class="card-text">
+          <div class="fee-text">{{ (+currentPeg.amount) / 100000000 | number: '1.2-2' }} <span style="color: #116761;">L-BTC</span></div>
+          <span class="fiat">
+            <span>As of block&nbsp;<a [routerLink]="['/block', currentPeg.hash]" target="_blank" style="color:#116761">{{ currentPeg.lastBlockUpdate }}</a></span>
+          </span>
+        </div>
+      </div>
+      <div class="item">
+        <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">BTC Reserves</h5>
+        <div class="card-text">
+          <div class="fee-text">{{ (+currentReserves.amount) / 100000000 | number: '1.2-2' }} <span style="color: #b86d12;">BTC</span></div>
+          <span class="fiat">
+            <span>As of block&nbsp;<a href="{{ env.MEMPOOL_WEBSITE_URL + '/block/' + currentReserves.hash }}" target="_blank" style="color:#b86d12">{{ currentReserves.lastBlockUpdate }}</a></span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ng-template #loadingData>
+  <div class="fee-estimation-container loading-container">
+    <div class="item">
+      <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">L-BTC in circulation</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="dashboard.btc-reserves">BTC Reserves</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+  </div>
+</ng-template>
+
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
new file mode 100644
index 000000000..3a8a83f26
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
@@ -0,0 +1,73 @@
+.fee-estimation-container {
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: 376px) {
+    flex-direction: row;
+  }  
+  .item {
+    max-width: 150px;
+    margin: 0;
+    width: -webkit-fill-available;
+    @media (min-width: 376px) {
+      margin: 0 auto 0px;
+    }
+
+    .card-title {
+      color: #4a68b9;
+      font-size: 10px;
+      margin-bottom: 4px;  
+      font-size: 1rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .card-text {
+      font-size: 22px;
+      span {
+        font-size: 11px;
+        position: relative;
+        top: -2px;
+      }
+    }
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .card-text span {
+      color: #ffffff66;
+      font-size: 12px;
+      top: 0px;
+    }
+    .fee-text{
+      border-bottom: 1px solid #ffffff1c;
+      width: fit-content;
+      margin: auto;
+      line-height: 1.45;
+      padding: 0px 2px;
+    }
+    .fiat {
+      display: block;
+      font-size: 14px !important;
+    }
+  }
+}
+
+.loading-container{
+  min-height: 76px;
+}
+
+.card-text {
+  .skeleton-loader {
+    width: 100%;
+    display: block;
+    &:first-child {
+      max-width: 90px;
+      margin: 15px auto 3px;
+    }
+    &:last-child {
+      margin: 10px auto 3px;
+      max-width: 55px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.ts
new file mode 100644
index 000000000..61f2deb8c
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.ts
@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Env, StateService } from '../../../services/state.service';
+import { CurrentPegs } from '../../../interfaces/node-api.interface';
+
+@Component({
+  selector: 'app-reserves-supply-stats',
+  templateUrl: './reserves-supply-stats.component.html',
+  styleUrls: ['./reserves-supply-stats.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReservesSupplyStatsComponent implements OnInit {
+  @Input() currentReserves$: Observable<CurrentPegs>;
+  @Input() currentPeg$: Observable<CurrentPegs>;
+
+  env: Env;
+
+  constructor(private stateService: StateService) { }
+
+  ngOnInit(): void {
+    this.env = this.stateService.env;
+  }
+
+}
diff --git a/frontend/src/app/graphs/echarts.ts b/frontend/src/app/graphs/echarts.ts
index 342867168..74fec1e71 100644
--- a/frontend/src/app/graphs/echarts.ts
+++ b/frontend/src/app/graphs/echarts.ts
@@ -1,6 +1,6 @@
 // Import tree-shakeable echarts
 import * as echarts from 'echarts/core';
-import { LineChart, LinesChart, BarChart, TreemapChart, PieChart, ScatterChart } from 'echarts/charts';
+import { LineChart, LinesChart, BarChart, TreemapChart, PieChart, ScatterChart, GaugeChart } from 'echarts/charts';
 import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GeoComponent, DataZoomComponent, VisualMapComponent, MarkLineComponent } from 'echarts/components';
 import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
 // Typescript interfaces
@@ -12,6 +12,6 @@ echarts.use([
   TitleComponent, TooltipComponent, GridComponent,
   LegendComponent, GeoComponent, DataZoomComponent,
   VisualMapComponent, MarkLineComponent,
-  LineChart, LinesChart, BarChart, TreemapChart, PieChart, ScatterChart
+  LineChart, LinesChart, BarChart, TreemapChart, PieChart, ScatterChart, GaugeChart
 ]);
 export { echarts, EChartsOption, TreemapSeriesOption, LineSeriesOption, PieSeriesOption };
\ No newline at end of file
diff --git a/frontend/src/app/liquid/liquid-master-page.module.ts b/frontend/src/app/liquid/liquid-master-page.module.ts
index bb6e4cff8..90c50e0df 100644
--- a/frontend/src/app/liquid/liquid-master-page.module.ts
+++ b/frontend/src/app/liquid/liquid-master-page.module.ts
@@ -2,8 +2,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
 import { SharedModule } from '../shared/shared.module';
+import { NgxEchartsModule } from 'ngx-echarts';
 import { LiquidMasterPageComponent } from '../components/liquid-master-page/liquid-master-page.component';
 
+
 import { StartComponent } from '../components/start/start.component';
 import { AddressComponent } from '../components/address/address.component';
 import { PushTransactionComponent } from '../components/push-transaction/push-transaction.component';
@@ -13,6 +15,11 @@ import { AssetsComponent } from '../components/assets/assets.component';
 import { AssetsFeaturedComponent } from '../components/assets/assets-featured/assets-featured.component'
 import { AssetComponent } from '../components/asset/asset.component';
 import { AssetsNavComponent } from '../components/assets/assets-nav/assets-nav.component';
+import { ReservesAuditDashboardComponent } from '../components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component';
+import { ReservesSupplyStatsComponent } from '../components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component';
+import { FederationUtxosStatsComponent } from '../components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component';
+import { FederationUtxosListComponent } from '../components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component';
+import { ReservesRatioComponent } from '../components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component';
 
 const routes: Routes = [
   {
@@ -64,6 +71,22 @@ const routes: Routes = [
         data: { preload: true, networkSpecific: true },
         loadChildren: () => import('../components/block/block.module').then(m => m.BlockModule),
       },
+      {
+        path: 'audit',
+        data: { networks: ['liquid'] },
+        component: StartComponent,
+        children: [
+          {
+            path: '',
+            data: { networks: ['liquid'] },
+            component: ReservesAuditDashboardComponent,
+          }
+        ]
+      },
+      {
+        path: 'audit/utxos',
+        component: FederationUtxosListComponent,
+      },
       {
         path: 'assets',
         data: { networks: ['liquid'] },
@@ -123,9 +146,17 @@ export class LiquidRoutingModule { }
     CommonModule,
     LiquidRoutingModule,
     SharedModule,
+    NgxEchartsModule.forRoot({
+      echarts: () => import('../graphs/echarts').then(m => m.echarts),
+    })
   ],
   declarations: [
     LiquidMasterPageComponent,
+    ReservesAuditDashboardComponent,
+    ReservesSupplyStatsComponent,
+    FederationUtxosStatsComponent,
+    FederationUtxosListComponent,
+    ReservesRatioComponent,
   ]
 })
 export class LiquidMasterPageModule { }
\ No newline at end of file

From 81a09e9dba772c4bcbed476f8c69a902ca99c97f Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Sun, 21 Jan 2024 13:40:31 +0100
Subject: [PATCH 14/92] Add Liquid Peg-in column to Federation UTXOs list

---
 .../federation-utxos-list.component.html               |  6 ++++++
 .../federation-utxos-list.component.scss               | 10 +++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index 0c5981be6..9edddff4c 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -10,6 +10,7 @@
         <th class="txid text-left" [ngClass]="{'widget': widget}">Output</th>
         <th class="address text-left" *ngIf="!widget">Address</th>
         <th class="amount text-right" [ngClass]="{'widget': widget}">Amount</th>
+        <th class="pegin text-right" *ngIf="!widget">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' : ''">
@@ -43,6 +44,11 @@
             <td class="amount text-right">
               <app-amount [satoshis]="utxo.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
             </td>
+            <td class="pegin text-left">
+              <a *ngIf="utxo.pegtxid" [routerLink]="['/tx', utxo.pegtxid + ':' + utxo.pegindex]" target="_blank" style="color:#116761">
+                <app-truncate [text]="utxo.pegtxid + ':' + utxo.pegindex" [lastChars]="6"></app-truncate>
+              </a>
+            </td>
             <td class="timestamp text-right">
               &lrm;{{ utxo.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
               <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="utxo.blocktime"></app-time>)</i></div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
index 4208fd167..fe458841e 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
@@ -36,7 +36,7 @@ tr, td, th {
 }
 
 .txid {
-  width: 35%;
+  width: 25%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -64,6 +64,14 @@ tr, td, th {
   width: 25%;
 }
 
+.pegin {
+  width: 25%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+}
+
 .timestamp {
   width: 18%;
   @media (max-width: 800px) {

From fa90eb84fc8ef304a87b4beb41b539a0ec4f3665 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Mon, 22 Jan 2024 13:59:11 +0100
Subject: [PATCH 15/92] Truncate elements_pegs and add primary key instead of
 drop/create

---
 backend/src/api/database-migration.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/backend/src/api/database-migration.ts b/backend/src/api/database-migration.ts
index 9d0a0a0d1..911576f2d 100644
--- a/backend/src/api/database-migration.ts
+++ b/backend/src/api/database-migration.ts
@@ -561,8 +561,8 @@ class DatabaseMigration {
 
     if (databaseSchemaVersion < 67 && config.MEMPOOL.NETWORK === "liquid") {
       // Drop and re-create the elements_pegs table
-      await this.$executeQuery('DROP table IF EXISTS elements_pegs;');
-      await this.$executeQuery(this.getCreateElementsTableQuery(), await this.$checkIfTableExists('elements_pegs'));
+      await this.$executeQuery('TRUNCATE TABLE elements_pegs');
+      await this.$executeQuery('ALTER TABLE elements_pegs ADD PRIMARY KEY (txid, txindex);');
       await this.$executeQuery(`UPDATE state SET number = 0 WHERE name = 'last_elements_block';`);
       // Create the federation_addresses table and add the two Liquid Federation change addresses in
       await this.$executeQuery(this.getCreateFederationAddressesTableQuery(), await this.$checkIfTableExists('federation_addresses'));
@@ -816,8 +816,7 @@ class DatabaseMigration {
       bitcoinaddress varchar(100) NOT NULL,
       bitcointxid varchar(65) NOT NULL,
       bitcoinindex int(11) NOT NULL,
-      final_tx int(11) NOT NULL,
-      PRIMARY KEY (txid, txindex)
+      final_tx int(11) NOT NULL
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`;
   }
 

From 8f7cd708824df19f0464dc13a751922105149053 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Mon, 22 Jan 2024 14:19:01 +0100
Subject: [PATCH 16/92] Add throttleTime to avoid too frequent calls to backend

---
 .../reserves-audit-dashboard.component.ts                      | 3 ++-
 frontend/src/app/dashboard/dashboard.component.ts              | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
index e71ff8e80..95de4fdca 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { SeoService } from '../../../services/seo.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { StateService } from '../../../services/state.service';
-import { Observable, concat, delay, filter, share, skip, switchMap, tap } from 'rxjs';
+import { Observable, concat, delay, filter, share, skip, switchMap, tap, throttleTime } from 'rxjs';
 import { ApiService } from '../../../services/api.service';
 import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo } from '../../../interfaces/node-api.interface';
 
@@ -38,6 +38,7 @@ export class ReservesAuditDashboardComponent implements OnInit {
       this.apiService.federationAuditSynced$().pipe(share()),
       this.stateService.blocks$.pipe(
         skip(1),
+        throttleTime(40000),
         delay(2000),
         switchMap(() => this.apiService.federationAuditSynced$()),
         share()
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 2f97b23a0..d0f111499 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -1,6 +1,6 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { combineLatest, concat, EMPTY, interval, merge, Observable, of, Subscription } from 'rxjs';
-import { catchError, delay, filter, map, mergeMap, scan, share, skip, startWith, switchMap, tap } from 'rxjs/operators';
+import { catchError, delay, filter, map, mergeMap, scan, share, skip, startWith, switchMap, tap, throttleTime } from 'rxjs/operators';
 import { AuditStatus, BlockExtended, CurrentPegs, OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { MempoolInfo, TransactionStripped, ReplacementInfo } from '../interfaces/websocket.interface';
 import { ApiService } from '../services/api.service';
@@ -252,6 +252,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
         this.apiService.federationAuditSynced$().pipe(share()),
         this.stateService.blocks$.pipe(
           skip(1),
+          throttleTime(40000),
           delay(2000),
           switchMap(() => this.apiService.federationAuditSynced$()),
           share()

From 392ea35d510bc2e4683c6796448ac0ae1b5a93a5 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Mon, 22 Jan 2024 16:03:55 +0100
Subject: [PATCH 17/92] Skeleton audit dashboard

---
 .../liquid-master-page.component.html         |  2 +-
 .../federation-utxos-list.component.html      | 46 ++++++++++------
 .../federation-utxos-list.component.scss      |  8 +--
 .../reserves-audit-dashboard.component.html   | 52 +++++++++++++++++--
 4 files changed, 85 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
index 30fc153c7..0ec9ab337 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
@@ -79,7 +79,7 @@
         <a class="nav-link" [routerLink]="['/assets' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" i18n-title="master-page.assets" title="Assets"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active" id="btn-audit">
-        <a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'check-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="BTC Reserves Audit"></fa-icon></a>
+        <a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'check-circle']" [fixedWidth]="true" i18n-title="master-page.audit" title="BTC Reserves Audit"></fa-icon></a>
       </li>
       <li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active" id="btn-docs">
         <a class="nav-link" [routerLink]="['/docs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="master-page.docs" title="Docs"></fa-icon></a>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index 9edddff4c..2b4f81beb 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -1,4 +1,4 @@
-<div class="container-xl" style="min-height: 335px" [ngClass]="{'widget': widget, 'full-height': !widget}">
+<div class="container-xl" [ngClass]="{'widget': widget, 'full-height': !widget}">
   <h1 *ngIf="!widget" class="float-left" i18n="liquid.federation-utxos">Liquid Federation UTXOs</h1>
   <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
 
@@ -10,8 +10,8 @@
         <th class="txid text-left" [ngClass]="{'widget': widget}">Output</th>
         <th class="address text-left" *ngIf="!widget">Address</th>
         <th class="amount text-right" [ngClass]="{'widget': widget}">Amount</th>
-        <th class="pegin text-right" *ngIf="!widget">Liquid Peg-in</th>
-        <th class="timestamp text-right" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
+        <th class="pegin text-left" *ngIf="!widget">Liquid Peg-in</th>
+        <th class="timestamp text-left" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
       </thead>
       <tbody *ngIf="federationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
         <ng-container *ngIf="widget; else regularRows">
@@ -24,7 +24,7 @@
             <td class="amount text-right widget">
               <app-amount [satoshis]="utxo.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
             </td>
-            <td class="timestamp text-right widget" [ngClass]="{'widget': widget}">
+            <td class="timestamp text-left widget">
               <app-time kind="since" [time]="utxo.blocktime"></app-time>
             </td>
           </tr>
@@ -49,7 +49,7 @@
                 <app-truncate [text]="utxo.pegtxid + ':' + utxo.pegindex" [lastChars]="6"></app-truncate>
               </a>
             </td>
-            <td class="timestamp text-right">
+            <td class="timestamp text-left">
               &lrm;{{ utxo.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
               <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="utxo.blocktime"></app-time>)</i></div>
             </td>
@@ -57,22 +57,38 @@
         </ng-template>
       </tbody>
       <ng-template #skeleton>
-        <tbody>
+        <tbody *ngIf="widget; else regularRowsSkeleton">
           <tr *ngFor="let item of skeletonLines">
-            <td class="txid text-left" [ngClass]="{'widget': widget}">
-              <span class="skeleton-loader" style="max-width: 75px"></span>
+            <td class="txid text-left widget">
+              <span class="skeleton-loader" style="max-width: 190px"></span>
             </td>
-            <td class="address text-left" [ngClass]="{'widget': widget}">
-              <span class="skeleton-loader" style="max-width: 125px"></span>
+            <td class="amount text-right widget">
+              <span class="skeleton-loader" style="max-width: 140px"></span>
             </td>
-            <td class="amount" *ngIf="!widget">
-              <span class="skeleton-loader" style="max-width: 150px"></span>
-            </td>
-            <td class="timestamp" *ngIf="!widget">
-              <span class="skeleton-loader" style="max-width: 125px"></span>
+            <td class="timestamp text-left widget">
+              <span class="skeleton-loader" style="max-width: 200px"></span>
             </td>
           </tr>
         </tbody>
+        <ng-template #regularRowsSkeleton>
+          <tr *ngFor="let item of skeletonLines">
+            <td class="txid text-left">
+              <span class="skeleton-loader" style="max-width: 300px"></span>
+            </td>
+            <td class="address text-left">
+              <span class="skeleton-loader" style="max-width: 300px"></span>
+            </td>
+            <td class="amount text-right">
+              <span class="skeleton-loader" style="max-width: 140px"></span>
+            </td>
+            <td class="pegin text-left">
+              <span class="skeleton-loader" style="max-width: 300px"></span>
+            </td>
+            <td class="timestamp text-left">
+              <span class="skeleton-loader" style="max-width: 140px"></span>
+            </td>
+          </tr>
+        </ng-template>
       </ng-template>
     </table>
 
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
index fe458841e..0589b7b1f 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
@@ -9,6 +9,7 @@
 }
 .container-xl.widget {
   padding-left: 0px;
+  padding-right: 0px;
   padding-bottom: 0px;
 }
 
@@ -43,7 +44,7 @@ tr, td, th {
   max-width: 160px;
 }
 .txid.widget {
-  width: 50%;
+  width: 40%;
   
 }
 
@@ -61,7 +62,7 @@ tr, td, th {
   width: 12%;
 }
 .amount.widget {
-  width: 25%;
+  width: 30%;
 }
 
 .pegin {
@@ -84,7 +85,8 @@ tr, td, th {
   }
 }
 .timestamp.widget {
-  width: 25%;
+  width: 30%;
+  padding-right: 0px !important;
   @media (min-width: 768px) AND (max-width: 1050px) {
     display: none;
   }
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
index ddac8dd1c..a4cdce13f 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
@@ -45,13 +45,57 @@
 </div>
 
 
-<ng-template #loadingTransactions>
-  <div class="skeleton-loader skeleton-loader-transactions"></div>
+<ng-template #loadingSkeleton>
+  <div class="container-xl dashboard-container">
+
+    <div class="row row-cols-1 row-cols-md-2">
+  
+      <div class="col">
+        <div class="main-title">
+          <span i18n="liquid.bitcoin-reserves">BTC Reserves</span>
+        </div>
+        <div class="card">
+          <div class="card-body">
+            <app-reserves-supply-stats></app-reserves-supply-stats>
+            <app-reserves-ratio></app-reserves-ratio>
+          </div>
+        </div>
+      </div>
+  
+      <div class="col">
+        <div class="main-title">
+          <span i18n="liquid.federation-utxos">Liquid Federation UTXOs</span>
+        </div>
+        <div class="card">
+          <div class="card-body">
+            <app-federation-utxos-stats></app-federation-utxos-stats>
+            <app-federation-utxos-list [widget]="true"></app-federation-utxos-list>
+          </div>
+        </div>
+      </div>
+  
+      <div class="col" style="margin-bottom: 1.47rem">
+        <div class="card graph-card">
+          <div class="card-body pl-2 pr-2">
+            <!-- The historical ratio chart -->
+          </div>
+        </div>
+      </div>
+  
+      <div class="col" style="margin-bottom: 1.47rem">
+        <div class="card graph-card">
+          <div class="card-body pl-2 pr-2">
+            <!-- The addresses table -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </ng-template>
 
 <ng-template #auditInProgress>
-  <ng-container *ngIf="(auditStatus$ | async) as auditStatus; else loadingTransactions">
-    <div class="in-progress-message" *ngIf="auditStatus.lastBlockAudit && auditStatus.bitcoinHeaders; else loadingTransactions">
+  <ng-container *ngIf="(auditStatus$ | async) as auditStatus; else loadingSkeleton">
+    <div class="in-progress-message" *ngIf="auditStatus.lastBlockAudit && auditStatus.bitcoinHeaders; else loadingSkeleton">
       <span i18n="liquid.audit-in-progress">Audit in progress: block {{ auditStatus.lastBlockAudit }} / {{ auditStatus.bitcoinHeaders }}</span>
     </div>
   </ng-container>

From cef060be2d6efc6df05f543f12d779f79f3c10eb Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Tue, 23 Jan 2024 09:46:15 +0100
Subject: [PATCH 18/92] Only include count in federation address and UTXO
 queries

---
 backend/src/api/liquid/elements-parser.ts | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/backend/src/api/liquid/elements-parser.ts b/backend/src/api/liquid/elements-parser.ts
index 427779898..0b6840b7b 100644
--- a/backend/src/api/liquid/elements-parser.ts
+++ b/backend/src/api/liquid/elements-parser.ts
@@ -356,27 +356,30 @@ class ElementsParser {
   // Get all of the federation addresses one month ago, most balances first
   public async $getFederationAddressesOneMonthAgo(): Promise<any> {
     const query = `
-    SELECT bitcoinaddress, SUM(amount) AS balance FROM federation_txos 
-    WHERE
-        (blocktime < UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -30, CURRENT_TIMESTAMP())))
-      AND
-        ((unspent = 1) OR (unspent = 0 AND lasttimeupdate > UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -30, CURRENT_TIMESTAMP()))))
-   	GROUP BY bitcoinaddress ORDER BY balance DESC;`;
+    SELECT COUNT(*) AS addresses_count_one_month FROM (
+      SELECT bitcoinaddress, SUM(amount) AS balance
+      FROM federation_txos 
+      WHERE
+          (blocktime < UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -30, CURRENT_TIMESTAMP())))
+        AND
+          ((unspent = 1) OR (unspent = 0 AND lasttimeupdate > UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -30, CURRENT_TIMESTAMP()))))
+      GROUP BY bitcoinaddress
+    ) AS result;`;
     const [rows] = await DB.query(query);
-    return rows;
+    return rows[0];
   }
 
   // Get all of the UTXOs held by the federation one month ago, most recent first
   public async $getFederationUtxosOneMonthAgo(): Promise<any> {
     const query = `
-    SELECT txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, pegtxid, pegindex FROM federation_txos 
+    SELECT COUNT(*) AS utxos_count_one_month FROM federation_txos 
     WHERE
         (blocktime < UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -30, CURRENT_TIMESTAMP())))
       AND
         ((unspent = 1) OR (unspent = 0 AND lasttimeupdate > UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -30, CURRENT_TIMESTAMP()))))
     ORDER BY blocktime DESC;`;
     const [rows] = await DB.query(query);
-    return rows;
+    return rows[0];
   }
 
 }

From a6b584d964aa73f1e8746dba7d6d134b17d997cf Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Tue, 23 Jan 2024 09:57:26 +0100
Subject: [PATCH 19/92] Liquid: Federation Audit Dashboard

---
 .../lbtc-pegs-graph.component.ts              |   3 +-
 .../liquid-master-page.component.html         |   2 +-
 .../federation-addresses-list.component.html  |  74 +++++++
 .../federation-addresses-list.component.scss  |  54 +++++
 .../federation-addresses-list.component.ts    |  77 +++++++
 .../federation-addresses-stats.component.html |  34 +++
 .../federation-addresses-stats.component.scss |  75 +++++++
 .../federation-addresses-stats.component.ts   |  20 ++
 .../federation-utxos-list.component.html      |  35 ++--
 .../federation-utxos-list.component.scss      |   6 +-
 .../federation-utxos-list.component.ts        |  21 +-
 .../federation-utxos-stats.component.html     |  32 +--
 .../federation-utxos-stats.component.scss     |  13 +-
 .../federation-utxos-stats.component.ts       |  30 +--
 .../reserves-audit-dashboard.component.html   |  66 +++---
 .../reserves-audit-dashboard.component.scss   |  24 +--
 .../reserves-audit-dashboard.component.ts     |  95 ++++++++-
 .../reserves-ratio-stats.component.html       |  42 ++++
 .../reserves-ratio-stats.component.scss       |  63 ++++++
 .../reserves-ratio-stats.component.ts         |  51 +++++
 .../reserves-ratio-graph.component.html       |   4 +
 .../reserves-ratio-graph.component.scss       |   6 +
 .../reserves-ratio-graph.component.ts         | 195 ++++++++++++++++++
 .../reserves-ratio.component.html             |   2 +-
 .../reserves-ratio.component.ts               |   7 +-
 .../reserves-supply-stats.component.html      |   2 +-
 .../app/dashboard/dashboard.component.html    |   2 +-
 .../src/app/dashboard/dashboard.component.ts  |  19 +-
 .../src/app/interfaces/node-api.interface.ts  |   2 +-
 .../app/liquid/liquid-master-page.module.ts   |  12 ++
 frontend/src/app/services/api.service.ts      |   4 +-
 frontend/src/app/shared/shared.module.ts      |   3 +-
 32 files changed, 913 insertions(+), 162 deletions(-)
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.ts
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.ts
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.html
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.scss
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.ts

diff --git a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
index f8d0843b1..38a944d27 100644
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
@@ -27,7 +27,6 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
   template: ('widget' | 'advanced') = 'widget';
   isLoading = true;
 
-  pegsChartOption: EChartsOption = {};
   pegsChartInitOption = {
     renderer: 'svg'
   };
@@ -44,7 +43,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
     if (!this.data?.liquidPegs) {
       return;
     }
-    if (!this.data.liquidReserves || this.data.liquidReserves?.series.length !== this.data.liquidPegs.series.length) {
+    if (!this.data.liquidReserves) {
       this.pegsChartOptions = this.createChartOptions(this.data.liquidPegs.series, this.data.liquidPegs.labels);
     } else {
       this.pegsChartOptions = this.createChartOptions(this.data.liquidPegs.series, this.data.liquidPegs.labels, this.data.liquidReserves.series);
diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
index 0ec9ab337..2137d7a7d 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
@@ -79,7 +79,7 @@
         <a class="nav-link" [routerLink]="['/assets' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" i18n-title="master-page.assets" title="Assets"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active" id="btn-audit">
-        <a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'check-circle']" [fixedWidth]="true" i18n-title="master-page.audit" title="BTC Reserves Audit"></fa-icon></a>
+        <a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'scale-balanced']" [fixedWidth]="true" i18n-title="master-page.audit" title="BTC Reserves Audit"></fa-icon></a>
       </li>
       <li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active" id="btn-docs">
         <a class="nav-link" [routerLink]="['/docs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="master-page.docs" title="Docs"></fa-icon></a>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
new file mode 100644
index 000000000..11b668030
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
@@ -0,0 +1,74 @@
+<div class="container-xl" [ngClass]="{'widget': widget, 'full-height': !widget}">
+  <h1 *ngIf="!widget" class="float-left" i18n="liquid.federation-addresses">Liquid Federation Addresses</h1>
+  <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;">
+        <th class="address text-left" [ngClass]="{'widget': widget}" i18n="liquid.address">Address</th>
+        <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="liquid.balance">Balance</th>
+      </thead>
+      <tbody *ngIf="federationAddresses$ | async as addresses; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
+        <ng-container *ngIf="widget; else regularRows">
+          <tr *ngFor="let address of addresses | slice:0:5">
+            <td class="address text-left widget">
+              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + address.bitcoinaddress }}" target="_blank" style="color:#b86d12">
+                <app-truncate [text]="address.bitcoinaddress" [lastChars]="6"></app-truncate>
+              </a>
+            </td>
+            <td class="amount text-right widget">
+              <app-amount [satoshis]="+address.balance" [noFiat]="true" [forceBtc]="true"></app-amount>
+            </td>
+          </tr>
+        </ng-container>
+        <ng-template #regularRows>
+          <tr *ngFor="let address of addresses | slice:(page - 1) * pageSize:page * pageSize">
+            <td class="address text-left">
+              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + address.bitcoinaddress }}" target="_blank" style="color:#b86d12">
+                <app-truncate [text]="address.bitcoinaddress" [lastChars]="6"></app-truncate>
+              </a>
+            </td>
+            <td class="amount text-right">
+              <app-amount [satoshis]="+address.balance" [noFiat]="true" [forceBtc]="true"></app-amount>
+            </td>
+          </tr>
+        </ng-template>
+      </tbody>
+      <ng-template #skeleton>
+        <tbody *ngIf="widget; else regularRowsSkeleton">
+          <tr *ngFor="let item of skeletonLines">
+            <td class="address text-left widget">
+              <span class="skeleton-loader" style="max-width: 400px"></span>
+            </td>
+            <td class="amount text-right widget">
+              <span class="skeleton-loader" style="max-width: 350px"></span>
+            </td>
+          </tr>
+        </tbody>
+        <ng-template #regularRowsSkeleton>
+          <tr *ngFor="let item of skeletonLines">
+            <td class="address text-left">
+              <span class="skeleton-loader" style="max-width: 600px"></span>
+            </td>
+            <td class="amount text-right">
+              <span class="skeleton-loader" style="max-width: 400px"></span>
+            </td>
+          </tr>
+        </ng-template>
+      </ng-template>
+    </table>
+
+    <ngb-pagination *ngIf="!widget && federationAddresses$ | async as addresses" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
+      [collectionSize]="addresses.length" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
+      (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
+    </ngb-pagination>
+
+    <ng-template [ngIf]="!widget">
+      <div class="clearfix"></div>
+      <br>
+    </ng-template>
+  </div>
+  
+</div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
new file mode 100644
index 000000000..bb20745e7
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
@@ -0,0 +1,54 @@
+.spinner-border {
+  height: 25px;
+  width: 25px;
+  margin-top: 13px;
+}
+
+.container-xl {
+  max-width: 1000px;
+}
+.container-xl.widget {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-bottom: 0px;
+}
+
+tr, td, th {
+  border: 0px;
+  padding-top: 0.65rem !important;
+  padding-bottom: 0.6rem !important;
+  padding-right: 2rem !important;
+  .widget {
+    padding-right: 1rem !important;
+  }
+}
+
+.clear-link {
+  color: white;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.progress {
+  background-color: #2d3348;
+}
+
+.address {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+}
+.address.widget {
+  width: 60%;
+}
+
+.amount {
+  width: 25%;
+}
+.amount.widget {
+  width: 40%;
+}
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
new file mode 100644
index 000000000..b066f0b65
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
@@ -0,0 +1,77 @@
+import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Observable, concat } from 'rxjs';
+import { delay, filter, map, share, skip, switchMap, tap, throttleTime } from 'rxjs/operators';
+import { ApiService } from '../../../services/api.service';
+import { Env, StateService } from '../../../services/state.service';
+import { AuditStatus, FederationAddress } from '../../../interfaces/node-api.interface';
+import { WebsocketService } from '../../../services/websocket.service';
+
+@Component({
+  selector: 'app-federation-addresses-list',
+  templateUrl: './federation-addresses-list.component.html',
+  styleUrls: ['./federation-addresses-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FederationAddressesListComponent implements OnInit {
+  @Input() widget: boolean = false;
+  @Input() federationAddresses$: Observable<FederationAddress[]>;
+
+  env: Env;
+  isLoading = true;
+  page = 1;
+  pageSize = 15;
+  maxSize = window.innerWidth <= 767.98 ? 3 : 5;
+  skeletonLines: number[] = [];
+  auditStatus$: Observable<AuditStatus>;
+  auditUpdated$: Observable<boolean>;
+  lastReservesBlockUpdate: number = 0;
+
+  constructor(
+    private apiService: ApiService,
+    public stateService: StateService,
+    private websocketService: WebsocketService
+  ) {
+  }
+
+  ngOnInit(): void {
+    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$ = concat(
+        this.apiService.federationAuditSynced$(),
+        this.stateService.blocks$.pipe(
+          skip(1),
+          throttleTime(40000),
+          delay(2000),
+          switchMap(() => this.apiService.federationAuditSynced$()),
+          share()
+        )
+      );
+
+      this.auditUpdated$ = this.auditStatus$.pipe(
+        filter(auditStatus => auditStatus.isAuditSynced === true),
+        map(auditStatus => {
+          const beforeLastBlockAudit = this.lastReservesBlockUpdate;
+          this.lastReservesBlockUpdate = auditStatus.lastBlockAudit;
+          return auditStatus.lastBlockAudit > beforeLastBlockAudit ? true : false;
+        })
+      );
+
+      this.federationAddresses$ = this.auditUpdated$.pipe(
+        filter(auditUpdated => auditUpdated === true),
+        switchMap(_ => this.apiService.federationAddresses$()),
+        tap(_ => this.isLoading = false),
+        share()
+      );
+    }
+
+
+  }
+
+  pageChange(page: number): void {
+    this.page = page;
+  }
+
+}
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
new file mode 100644
index 000000000..a97c36bf6
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
@@ -0,0 +1,34 @@
+<div *ngIf="(federationAddresses$ | async) as federationAddresses; else loadingData">
+  
+    <div class="fee-estimation-container">
+      <div class="item">
+        <a class="title-link" [routerLink]="['/audit/addresses' | relativeUrl]">
+          <h5 class="card-title" i18n="liquid.federation-addresses">Liquid Federation Addresses <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+        </a>
+        <div class="card-text">
+          <div class="fee-text">{{ federationAddresses.length }} <span i18n="liquid.addresses">addresses</span></div>
+          <span class="fiat" *ngIf="(federationAddressesOneMonthAgo$ | async) as federationAddressesOneMonthAgo; else loadingSkeleton" i18n-ngbTooltip="liquid.percentage-change-last-month" ngbTooltip="Percentage change past month" placement="bottom">
+            <app-change [current]="federationAddresses.length" [previous]="federationAddressesOneMonthAgo.addresses_count_one_month"></app-change>
+          </span>
+        </div>
+      </div>
+    </div>
+</div>
+
+<ng-template #loadingData>
+  <div class="fee-estimation-container loading-container">
+    <div class="item">
+      <a class="title-link" [routerLink]="['/audit/addresses' | relativeUrl]">
+        <h5 class="card-title" i18n="liquid.federation-addresses">Liquid Federation Addresses <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+      </a>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #loadingSkeleton>
+  <div class="skeleton-loader skeleton-loader-transactions" style="margin-top: 2px; margin-bottom: 5px;"></div>
+</ng-template>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
new file mode 100644
index 000000000..f7c2f104c
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
@@ -0,0 +1,75 @@
+.fee-estimation-container {
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: 376px) {
+    flex-direction: row;
+  }  
+  .item {
+    max-width: 300px;
+    margin: 0;
+    width: -webkit-fill-available;
+    @media (min-width: 376px) {
+      margin: 0 auto 0px;
+    }
+
+    .card-title {
+      margin: 0;
+      color: #4a68b9;
+      font-size: 10px;
+      font-size: 1rem;
+      white-space: nowrap;
+    }
+
+    .card-text {
+      font-size: 22px;
+      span {
+        font-size: 11px;
+        position: relative;
+        top: -2px;
+      }
+    }
+
+    .card-text span {
+      color: #ffffff66;
+      font-size: 12px;
+      top: 0px;
+    }
+    .fee-text{
+      border-bottom: 1px solid #ffffff1c;
+      width: fit-content;
+      margin: auto;
+      line-height: 1.45;
+      padding: 0px 2px;
+    }
+    .fiat {
+      display: block;
+      font-size: 14px !important;
+    }
+  }
+}
+
+.loading-container{
+  min-height: 76px;
+}
+
+.card-text {
+  .skeleton-loader {
+    width: 100%;
+    display: block;
+    &:first-child {
+      max-width: 90px;
+      margin: 15px auto 3px;
+    }
+    &:last-child {
+      margin: 10px auto 3px;
+      max-width: 55px;
+    }
+  }
+}
+
+.title-link, .title-link:hover, .title-link:focus, .title-link:active {
+  display: block;
+  margin-bottom: 4px;
+  text-decoration: none;
+  color: inherit;
+}
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.ts
new file mode 100644
index 000000000..081b22a4f
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.ts
@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { FederationAddress } from '../../../interfaces/node-api.interface';
+
+@Component({
+  selector: 'app-federation-addresses-stats',
+  templateUrl: './federation-addresses-stats.component.html',
+  styleUrls: ['./federation-addresses-stats.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FederationAddressesStatsComponent implements OnInit {
+  @Input() federationAddresses$: Observable<FederationAddress[]>;
+  @Input() federationAddressesOneMonthAgo$: Observable<any>;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index 2b4f81beb..cb9aa1317 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -7,11 +7,11 @@
   <div style="min-height: 295px">
     <table class="table table-borderless">
       <thead style="vertical-align: middle;">
-        <th class="txid text-left" [ngClass]="{'widget': widget}">Output</th>
-        <th class="address text-left" *ngIf="!widget">Address</th>
-        <th class="amount text-right" [ngClass]="{'widget': widget}">Amount</th>
-        <th class="pegin text-left" *ngIf="!widget">Liquid Peg-in</th>
-        <th class="timestamp text-left" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
+        <th class="txid text-left" [ngClass]="{'widget': widget}" i18n="liquid.output">Output</th>
+        <th class="address text-left" *ngIf="!widget" i18n="liquid.address">Address</th>
+        <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="liquid.amount">Amount</th>
+        <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' : ''">
         <ng-container *ngIf="widget; else regularRows">
@@ -24,7 +24,7 @@
             <td class="amount text-right widget">
               <app-amount [satoshis]="utxo.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
             </td>
-            <td class="timestamp text-left widget">
+            <td class="timestamp text-right widget">
               <app-time kind="since" [time]="utxo.blocktime"></app-time>
             </td>
           </tr>
@@ -45,11 +45,16 @@
               <app-amount [satoshis]="utxo.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
             </td>
             <td class="pegin text-left">
-              <a *ngIf="utxo.pegtxid" [routerLink]="['/tx', utxo.pegtxid + ':' + utxo.pegindex]" target="_blank" style="color:#116761">
-                <app-truncate [text]="utxo.pegtxid + ':' + utxo.pegindex" [lastChars]="6"></app-truncate>
-              </a>
+              <ng-container *ngIf="utxo.pegtxid; else noPeginMessage">
+                <a [routerLink]="['/tx', utxo.pegtxid + ':' + utxo.pegindex]" target="_blank" style="color:#116761">
+                  <app-truncate [text]="utxo.pegtxid + ':' + utxo.pegindex" [lastChars]="6"></app-truncate>
+                </a>
+              </ng-container>
+              <ng-template #noPeginMessage>
+                <span class="text-muted">-</span>
+              </ng-template>
             </td>
-            <td class="timestamp text-left">
+            <td class="timestamp text-right">
               &lrm;{{ utxo.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
               <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="utxo.blocktime"></app-time>)</i></div>
             </td>
@@ -60,13 +65,13 @@
         <tbody *ngIf="widget; else regularRowsSkeleton">
           <tr *ngFor="let item of skeletonLines">
             <td class="txid text-left widget">
-              <span class="skeleton-loader" style="max-width: 190px"></span>
+              <span class="skeleton-loader" style="max-width: 400px"></span>
             </td>
             <td class="amount text-right widget">
-              <span class="skeleton-loader" style="max-width: 140px"></span>
+              <span class="skeleton-loader" style="max-width: 300px"></span>
             </td>
-            <td class="timestamp text-left widget">
-              <span class="skeleton-loader" style="max-width: 200px"></span>
+            <td class="timestamp text-right widget">
+              <span class="skeleton-loader" style="max-width: 300px"></span>
             </td>
           </tr>
         </tbody>
@@ -84,7 +89,7 @@
             <td class="pegin text-left">
               <span class="skeleton-loader" style="max-width: 300px"></span>
             </td>
-            <td class="timestamp text-left">
+            <td class="timestamp text-right">
               <span class="skeleton-loader" style="max-width: 140px"></span>
             </td>
           </tr>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
index 0589b7b1f..f326350a8 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
@@ -71,6 +71,9 @@ tr, td, th {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 160px;
+  @media (max-width: 872px) {
+    display: none;
+  }
 }
 
 .timestamp {
@@ -85,8 +88,7 @@ tr, td, th {
   }
 }
 .timestamp.widget {
-  width: 30%;
-  padding-right: 0px !important;
+  width: 100%;
   @media (min-width: 768px) AND (max-width: 1050px) {
     display: none;
   }
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
index 19122b658..0ae371841 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
-import { BehaviorSubject, combineLatest, Observable, timer, of, concat } from 'rxjs';
-import { delay, delayWhen, filter, map, retryWhen, scan, share, skip, switchMap, tap } from 'rxjs/operators';
+import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Observable, concat } from 'rxjs';
+import { delay, filter, map, share, skip, switchMap, tap, throttleTime } from 'rxjs/operators';
 import { ApiService } from '../../../services/api.service';
 import { Env, StateService } from '../../../services/state.service';
 import { AuditStatus, FederationUtxo } from '../../../interfaces/node-api.interface';
@@ -23,12 +23,13 @@ export class FederationUtxosListComponent implements OnInit {
   maxSize = window.innerWidth <= 767.98 ? 3 : 5;
   skeletonLines: number[] = [];
   auditStatus$: Observable<AuditStatus>;
+  auditUpdated$: Observable<boolean>;
+  lastReservesBlockUpdate: number = 0;
 
   constructor(
     private apiService: ApiService,
     public stateService: StateService,
     private websocketService: WebsocketService,
-    private cd: ChangeDetectorRef,
   ) {
   }
 
@@ -42,14 +43,24 @@ export class FederationUtxosListComponent implements OnInit {
         this.apiService.federationAuditSynced$(),
         this.stateService.blocks$.pipe(
           skip(1),
+          throttleTime(40000),
           delay(2000),
           switchMap(() => this.apiService.federationAuditSynced$()),
           share()
         )
       );
 
-      this.federationUtxos$ = this.auditStatus$.pipe(
+      this.auditUpdated$ = this.auditStatus$.pipe(
         filter(auditStatus => auditStatus.isAuditSynced === true),
+        map(auditStatus => {
+          const beforeLastBlockAudit = this.lastReservesBlockUpdate;
+          this.lastReservesBlockUpdate = auditStatus.lastBlockAudit;
+          return auditStatus.lastBlockAudit > beforeLastBlockAudit ? true : false;
+        })
+      );
+
+      this.federationUtxos$ = this.auditUpdated$.pipe(
+        filter(auditUpdated => auditUpdated === true),
         switchMap(_ => this.apiService.federationUtxos$()),
         tap(_ => this.isLoading = false),
         share()
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
index 84078b201..0bae55a67 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
@@ -1,41 +1,26 @@
 <div *ngIf="(federationUtxos$ | async) as federationUtxos; else loadingData">
-  <div *ngIf="(federationAddresses$ | async) as federationAddresses; else loadingData">
+  
     <div class="fee-estimation-container">
       <div class="item">
         <a class="title-link" [routerLink]="['/audit/utxos' | relativeUrl]">
-          <h5 class="card-title" i18n="dashboard.federation-utxos">Outputs <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+          <h5 class="card-title" i18n="liquid.federation-utxos">Liquid Federation UTXOs <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
         </a>
         <div class="card-text">
           <div class="fee-text">{{ federationUtxos.length }} <span>UTXOs</span></div>
-          <span class="fiat" *ngIf="(federationUtxosOneMonthAgo$ | async) as federationUtxosOneMonthAgo" i18n-ngbTooltip="liquid.percentage-change-last-month" ngbTooltip="Percentage change past month" placement="bottom">
-            <app-change [current]="federationUtxos.length" [previous]="federationUtxosOneMonthAgo.length"></app-change>
-          </span>
-        </div>
-      </div>
-      <div class="item">
-        <h5 class="card-title" i18n="dashboard.federation-addresses">Addresses</h5>
-        <div class="card-text">
-          <div class="fee-text">{{ federationAddresses.length }} <span>addresses</span></div>
-          <span class="fiat" *ngIf="(federationAddressesOneMonthAgo$ | async) as federationAddressesOneMonthAgo" i18n-ngbTooltip="liquid.percentage-change-last-month" ngbTooltip="Percentage change past month" placement="bottom">
-            <app-change [current]="federationAddresses.length" [previous]="federationAddressesOneMonthAgo.length"></app-change>
+          <span class="fiat" *ngIf="(federationUtxosOneMonthAgo$ | async) as federationUtxosOneMonthAgo; else loadingSkeleton" i18n-ngbTooltip="liquid.percentage-change-last-month" ngbTooltip="Percentage change past month" placement="bottom">
+            <app-change [current]="federationUtxos.length" [previous]="federationUtxosOneMonthAgo.utxos_count_one_month"></app-change>
           </span>
         </div>
       </div>
     </div>
-  </div>
 </div>
 
 <ng-template #loadingData>
   <div class="fee-estimation-container loading-container">
     <div class="item">
-      <h5 class="card-title" i18n="dashboard.federation-utxos">Outputs</h5>
-      <div class="card-text">
-        <div class="skeleton-loader"></div>
-        <div class="skeleton-loader"></div>
-      </div>
-    </div>
-    <div class="item">
-      <h5 class="card-title" i18n="dashboard.federation-addresses">Addresses</h5>
+      <a class="title-link" [routerLink]="['/audit/utxos' | relativeUrl]">
+        <h5 class="card-title" i18n="liquid.federation-utxos">Liquid Federation UTXOs <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+      </a>
       <div class="card-text">
         <div class="skeleton-loader"></div>
         <div class="skeleton-loader"></div>
@@ -44,3 +29,6 @@
   </div>
 </ng-template>
 
+<ng-template #loadingSkeleton>
+  <div class="skeleton-loader skeleton-loader-transactions" style="margin-top: 2px; margin-bottom: 5px;"></div>
+</ng-template>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss
index 50ab123b6..f7c2f104c 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss
@@ -5,7 +5,7 @@
     flex-direction: row;
   }  
   .item {
-    max-width: 150px;
+    max-width: 300px;
     margin: 0;
     width: -webkit-fill-available;
     @media (min-width: 376px) {
@@ -13,12 +13,10 @@
     }
 
     .card-title {
+      margin: 0;
       color: #4a68b9;
       font-size: 10px;
-      margin-bottom: 4px;  
       font-size: 1rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
       white-space: nowrap;
     }
 
@@ -30,10 +28,7 @@
         top: -2px;
       }
     }
-    
-    &:last-child {
-      margin-bottom: 0;
-    }
+
     .card-text span {
       color: #ffffff66;
       font-size: 12px;
@@ -74,7 +69,7 @@
 
 .title-link, .title-link:hover, .title-link:focus, .title-link:active {
   display: block;
-  margin-bottom: 10px;
+  margin-bottom: 4px;
   text-decoration: none;
   color: inherit;
 }
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts
index 5f35b582e..0064de89c 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts
@@ -1,9 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { concat, interval, Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
-import { ApiService } from '../../../services/api.service';
-import { StateService } from '../../../services/state.service';
-import { FederationAddress, FederationUtxo } from '../../../interfaces/node-api.interface';
+import { Observable } from 'rxjs';
+import { FederationUtxo } from '../../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-federation-utxos-stats',
@@ -13,30 +10,11 @@ import { FederationAddress, FederationUtxo } from '../../../interfaces/node-api.
 })
 export class FederationUtxosStatsComponent implements OnInit {
   @Input() federationUtxos$: Observable<FederationUtxo[]>;
-  @Input() federationAddresses$: Observable<FederationAddress[]>;
+  @Input() federationUtxosOneMonthAgo$: Observable<any>;
 
-  federationUtxosOneMonthAgo$: Observable<FederationUtxo[]>;
-  federationAddressesOneMonthAgo$: Observable<FederationAddress[]>;
-
-  constructor(private apiService: ApiService, private stateService: StateService) { }
+  constructor() { }
 
   ngOnInit(): void {
-
-    // Calls this.apiService.federationUtxosOneMonthAgo$ at load and then every day
-    this.federationUtxosOneMonthAgo$ = concat(
-      this.apiService.federationUtxosOneMonthAgo$(),
-      interval(24 * 60 * 60 * 1000).pipe(
-        switchMap(() => this.apiService.federationUtxosOneMonthAgo$())
-      )
-    );
-
-    // Calls this.apiService.federationAddressesOneMonthAgo$ at load and then every day
-    this.federationAddressesOneMonthAgo$ = concat(
-      this.apiService.federationAddressesOneMonthAgo$(),
-      interval(24 * 60 * 60 * 1000).pipe(
-        switchMap(() => this.apiService.federationAddressesOneMonthAgo$())
-      )
-    );
   }
 
 }
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
index a4cdce13f..e2aa96816 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
@@ -3,9 +3,6 @@
   <div class="row row-cols-1 row-cols-md-2">
 
     <div class="col">
-      <div class="main-title">
-        <span i18n="liquid.bitcoin-reserves">BTC Reserves</span>
-      </div>
       <div class="card">
         <div class="card-body">
           <app-reserves-supply-stats [currentPeg$]="currentPeg$" [currentReserves$]="currentReserves$"></app-reserves-supply-stats>
@@ -14,30 +11,31 @@
       </div>
     </div>
 
-    <div class="col">
-      <div class="main-title">
-        <span i18n="liquid.federation-utxos">Liquid Federation UTXOs</span>
+    <div class="col" style="margin-bottom: 1.47rem">
+      <div class="card"> 
+        <div class="card-title">
+          <app-reserves-ratio-stats [fullHistory$]="fullHistory$"></app-reserves-ratio-stats>
+        </div>
+        <div class="card-body pl-0" style="padding-top: 10px;">
+          <app-reserves-ratio-graph [data]="fullHistory$ | async"></app-reserves-ratio-graph>
+        </div>
       </div>
+    </div>
+
+    <div class="col">
       <div class="card">
         <div class="card-body">
-          <app-federation-utxos-stats [federationUtxos$]="federationUtxos$" [federationAddresses$]="federationAddresses$"></app-federation-utxos-stats>
+          <app-federation-utxos-stats [federationUtxos$]="federationUtxos$" [federationUtxosOneMonthAgo$]="federationUtxosOneMonthAgo$"></app-federation-utxos-stats>
           <app-federation-utxos-list [federationUtxos$]="federationUtxos$" [widget]="true"></app-federation-utxos-list>
         </div>
       </div>
     </div>
 
     <div class="col" style="margin-bottom: 1.47rem">
-      <div class="card graph-card">
-        <div class="card-body pl-2 pr-2">
-          <!-- The historical ratio chart -->
-        </div>
-      </div>
-    </div>
-
-    <div class="col" style="margin-bottom: 1.47rem">
-      <div class="card graph-card">
-        <div class="card-body pl-2 pr-2">
-          <!-- The addresses table -->
+      <div class="card">
+        <div class="card-body">
+          <app-federation-addresses-stats [federationAddresses$]="federationAddresses$" [federationAddressesOneMonthAgo$]="federationAddressesOneMonthAgo$"></app-federation-addresses-stats>
+          <app-federation-addresses-list [federationAddresses$]="federationAddresses$" [widget]="true"></app-federation-addresses-list>
         </div>
       </div>
     </div>
@@ -51,9 +49,6 @@
     <div class="row row-cols-1 row-cols-md-2">
   
       <div class="col">
-        <div class="main-title">
-          <span i18n="liquid.bitcoin-reserves">BTC Reserves</span>
-        </div>
         <div class="card">
           <div class="card-body">
             <app-reserves-supply-stats></app-reserves-supply-stats>
@@ -61,11 +56,19 @@
           </div>
         </div>
       </div>
+
+      <div class="col" style="margin-bottom: 1.47rem">
+        <div class="card"> 
+          <div class="card-title">
+            <app-reserves-ratio-stats></app-reserves-ratio-stats>
+          </div>
+          <div class="card-body pl-0" style="padding-top: 10px;">
+            <app-reserves-ratio-graph></app-reserves-ratio-graph>
+          </div>
+        </div>
+      </div>
   
       <div class="col">
-        <div class="main-title">
-          <span i18n="liquid.federation-utxos">Liquid Federation UTXOs</span>
-        </div>
         <div class="card">
           <div class="card-body">
             <app-federation-utxos-stats></app-federation-utxos-stats>
@@ -75,17 +78,10 @@
       </div>
   
       <div class="col" style="margin-bottom: 1.47rem">
-        <div class="card graph-card">
-          <div class="card-body pl-2 pr-2">
-            <!-- The historical ratio chart -->
-          </div>
-        </div>
-      </div>
-  
-      <div class="col" style="margin-bottom: 1.47rem">
-        <div class="card graph-card">
-          <div class="card-body pl-2 pr-2">
-            <!-- The addresses table -->
+        <div class="card">
+          <div class="card-body">
+            <app-federation-addresses-stats></app-federation-addresses-stats>
+            <app-federation-addresses-list [widget]="true"></app-federation-addresses-list>
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.scss b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.scss
index 46f9ffa4d..1116f8d85 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.scss
@@ -10,19 +10,8 @@
   background-color: #1d1f31;
 }
 
-.graph-card {
-  height: 100%;
-  @media (min-width: 992px) {
-    height: 385px;
-  }
-}
-
 .card-title {
-  font-size: 1rem;
-  color: #4a68b9;
-}
-.card-title > a {
-  color: #4a68b9;
+  padding-top: 20px;
 }
 
 .card-body.pool-ranking {
@@ -48,17 +37,6 @@
   -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 80%, transparent 100%)
 }
 
-.main-title {
-  position: relative;
-  color: #ffffff91;
-  margin-top: -13px;
-  font-size: 11px;
-  text-transform: uppercase;
-  font-weight: 500;
-  text-align: center;
-  padding-bottom: 3px;
-}
-
 .in-progress-message {
   position: relative;
   color: #ffffff91;
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
index 95de4fdca..c3fa6321d 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
@@ -2,9 +2,9 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { SeoService } from '../../../services/seo.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { StateService } from '../../../services/state.service';
-import { Observable, concat, delay, filter, share, skip, switchMap, tap, throttleTime } from 'rxjs';
+import { Observable, combineLatest, concat, delay, filter, interval, map, mergeMap, of, share, skip, startWith, switchMap, tap, throttleTime } from 'rxjs';
 import { ApiService } from '../../../services/api.service';
-import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo } from '../../../interfaces/node-api.interface';
+import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo, LiquidPegs } from '../../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-reserves-audit-dashboard',
@@ -14,10 +14,16 @@ import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo } from '../
 })
 export class ReservesAuditDashboardComponent implements OnInit {
   auditStatus$: Observable<AuditStatus>;
+  auditUpdated$: Observable<boolean>;
   currentPeg$: Observable<CurrentPegs>;
   currentReserves$: Observable<CurrentPegs>;
   federationUtxos$: Observable<FederationUtxo[]>;
+  federationUtxosOneMonthAgo$: Observable<any>;
   federationAddresses$: Observable<FederationAddress[]>;
+  federationAddressesOneMonthAgo$: Observable<any>;
+  liquidPegsMonth$: Observable<any>;
+  liquidReservesMonth$: Observable<any>;
+  fullHistory$: Observable<any>;
   private lastPegBlockUpdate: number = 0;
   private lastReservesBlockUpdate: number = 0;
 
@@ -45,8 +51,16 @@ export class ReservesAuditDashboardComponent implements OnInit {
       )
     );
 
-    this.currentReserves$ = this.auditStatus$.pipe(
+    this.auditUpdated$ = this.auditStatus$.pipe(
       filter(auditStatus => auditStatus.isAuditSynced === true),
+      map(auditStatus => auditStatus.lastBlockAudit),
+      switchMap((lastBlockAudit) => {
+        return lastBlockAudit > this.lastReservesBlockUpdate ? of(true) : of(false);
+      }),
+    );
+
+    this.currentReserves$ = this.auditUpdated$.pipe(
+      filter(auditUpdated => auditUpdated === true),
       switchMap(_ =>
         this.apiService.liquidReserves$().pipe(
           filter((currentReserves) => currentReserves.lastBlockUpdate > this.lastReservesBlockUpdate),
@@ -71,17 +85,84 @@ export class ReservesAuditDashboardComponent implements OnInit {
       share()
     );
 
-    this.federationUtxos$ = this.auditStatus$.pipe(
-      filter(auditStatus => auditStatus.isAuditSynced === true),
+    this.federationUtxos$ = this.auditUpdated$.pipe(
+      filter(auditUpdated => auditUpdated === true),
       switchMap(_ => this.apiService.federationUtxos$()),
       share()
     );
 
-    this.federationAddresses$ = this.auditStatus$.pipe(
-      filter(auditStatus => auditStatus.isAuditSynced === true),
+    this.federationAddresses$ = this.auditUpdated$.pipe(
+      filter(auditUpdated => auditUpdated === true),
       switchMap(_ => this.apiService.federationAddresses$()),
       share()
     );
+
+    this.federationUtxosOneMonthAgo$ = interval(60 * 60 * 1000)
+      .pipe(
+        startWith(0),
+        switchMap(() => this.apiService.federationUtxosOneMonthAgo$())
+      );
+
+    this.federationAddressesOneMonthAgo$ = interval(60 * 60 * 1000)
+      .pipe(
+        startWith(0),
+        switchMap(() => this.apiService.federationAddressesOneMonthAgo$())
+      );
+
+    this.liquidPegsMonth$ = interval(60 * 60 * 1000)
+      .pipe(
+        startWith(0),
+        switchMap(() => this.apiService.listLiquidPegsMonth$()),
+        map((pegs) => {
+          const labels = pegs.map(stats => stats.date);
+          const series = pegs.map(stats => parseFloat(stats.amount) / 100000000);
+          series.reduce((prev, curr, i) => series[i] = prev + curr, 0);
+          return {
+            series,
+            labels
+          };
+        }),
+        share(),
+      );
+
+    this.liquidReservesMonth$ = interval(60 * 60 * 1000).pipe(
+      startWith(0),
+      switchMap(() => this.apiService.listLiquidReservesMonth$()),
+      map(reserves => {
+        const labels = reserves.map(stats => stats.date);
+        const series = reserves.map(stats => parseFloat(stats.amount) / 100000000);
+        return {
+          series,
+          labels
+        };
+      }),
+      share()
+    );
+
+    this.fullHistory$ = combineLatest([this.liquidPegsMonth$, this.currentPeg$, this.liquidReservesMonth$, this.currentReserves$])
+      .pipe(
+        map(([liquidPegs, currentPeg, liquidReserves, currentReserves]) => {
+          liquidPegs.series[liquidPegs.series.length - 1] = parseFloat(currentPeg.amount) / 100000000;
+
+          if (liquidPegs.series.length === liquidReserves?.series.length) {
+            liquidReserves.series[liquidReserves.series.length - 1] = parseFloat(currentReserves?.amount) / 100000000;
+          } else if (liquidPegs.series.length === liquidReserves?.series.length + 1) {
+            liquidReserves.series.push(parseFloat(currentReserves?.amount) / 100000000);
+            liquidReserves.labels.push(liquidPegs.labels[liquidPegs.labels.length - 1]);
+          } else {
+            liquidReserves = {
+              series: [],
+              labels: []
+            };
+          }
+
+          return {
+            liquidPegs,
+            liquidReserves
+          };
+        }),
+        share()
+      );
   }
 
 }
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
new file mode 100644
index 000000000..04d82f37b
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
@@ -0,0 +1,42 @@
+<div *ngIf="(unbackedMonths$ | async) as unbackedMonths; else loadingData">
+  <ng-container *ngIf="unbackedMonths.historyComplete; else loadingData">
+    <div class="fee-estimation-container">
+      <div class="item"> 
+        <h5 class="card-title" i18n="liquid.unpeg">Unpeg</h5> 
+        <div class="card-text">
+          <div class="fee-text" [ngClass]="{'danger' : unbackedMonths.total > 0, 'correct': unbackedMonths.total === 0}">
+            {{ unbackedMonths.total }} <span i18n="liquid.unpeg-event">Unpeg Event</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="item"> 
+        <h5 class="card-title" i18n="liquid.peg-ratio-history">Avg Peg Ratio</h5> 
+        <div class="card-text">
+          <div class="fee-text" [ngClass]="{'danger' : unbackedMonths.avg < 1, 'correct': unbackedMonths.avg >= 1}">
+            {{ unbackedMonths.avg.toFixed(5) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</div>
+
+<ng-template #loadingData>
+  <div class="fee-estimation-container loading-container">
+    <div class="item">
+      <h5 class="card-title" i18n="liquid.peg-ratio-history">Peg Ratio History</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+
+    <div class="item"> 
+      <h5 class="card-title" i18n="liquid.peg-ratio-history">Avg Peg Ratio</h5> 
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+  </div>
+</ng-template>
+
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
new file mode 100644
index 000000000..72aa390e4
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
@@ -0,0 +1,63 @@
+.fee-estimation-container {
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: 376px) {
+    flex-direction: row;
+  }  
+  .item {
+    max-width: 300px;
+    margin: 0;
+    width: -webkit-fill-available;
+    @media (min-width: 376px) {
+      margin: 0 auto 0px;
+    }
+
+    .card-title {
+      margin-bottom: 4px;
+      color: #4a68b9;
+      font-size: 10px;
+      font-size: 1rem;
+      white-space: nowrap;
+    }
+
+    .card-text {
+      font-size: 22px;
+      span {
+        font-size: 11px;
+        position: relative;
+        top: -2px;
+      }
+      .danger {
+        color: #D81B60;
+      }
+      .correct {
+        color: #7CB342;
+      }
+    }
+
+    .card-text span {
+      color: #ffffff66;
+      font-size: 12px;
+      top: 0px;
+    }
+    .fee-text{
+      width: fit-content;
+      margin: auto;
+      line-height: 1.45;
+      padding: 0px 2px;
+    }
+  }
+}
+
+.loading-container{
+  min-height: 76px;
+}
+
+.card-text {
+  .skeleton-loader {
+    width: 100%;
+    display: block;
+    max-width: 90px;
+    margin: 15px auto 3px;
+  }
+}
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.ts
new file mode 100644
index 000000000..45a114c1f
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.ts
@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Observable, map } from 'rxjs';
+
+@Component({
+  selector: 'app-reserves-ratio-stats',
+  templateUrl: './reserves-ratio-stats.component.html',
+  styleUrls: ['./reserves-ratio-stats.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReservesRatioStatsComponent implements OnInit {
+  @Input() fullHistory$: Observable<any>;
+  unbackedMonths$: Observable<any>
+
+  constructor() { }
+
+  ngOnInit(): void {
+    if (!this.fullHistory$) {
+      return;
+    }
+    this.unbackedMonths$ = this.fullHistory$
+      .pipe(
+        map((fullHistory) => {
+          if (fullHistory.liquidPegs.series.length !== fullHistory.liquidReserves.series.length) {
+            return {
+              historyComplete: false, 
+              total: null
+            };
+          }
+          // Only check the last 3 years
+          let ratioSeries = fullHistory.liquidReserves.series.map((value: number, index: number) => value / fullHistory.liquidPegs.series[index]);
+          ratioSeries = ratioSeries.slice(Math.max(ratioSeries.length - 36, 0));          
+          let total = 0;
+          let avg = 0;
+          for (let i = 0; i < ratioSeries.length; i++) {
+            avg += ratioSeries[i];
+            if (ratioSeries[i] < 1) {
+              total++;
+            }
+          }
+          avg = avg / ratioSeries.length;
+          return {
+            historyComplete: true, 
+            total: total,
+            avg: avg,
+          };
+        })
+      );
+
+  }
+
+}
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.html
new file mode 100644
index 000000000..cffb73c06
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.html
@@ -0,0 +1,4 @@
+<div class="echarts" echarts [initOpts]="ratioHistoryChartInitOptions" [options]="ratioHistoryChartOptions" (chartRendered)="rendered()"></div>
+<div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="spinner-border text-light"></div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.scss b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.scss
new file mode 100644
index 000000000..9881148fc
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.scss
@@ -0,0 +1,6 @@
+.loadingGraphs {
+  position: absolute;
+  top: 50%;
+  left: calc(50% - 16px);
+  z-index: 100;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.ts
new file mode 100644
index 000000000..187a059a1
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.ts
@@ -0,0 +1,195 @@
+import { Component, Inject, LOCALE_ID, ChangeDetectionStrategy, Input, OnChanges, OnInit } from '@angular/core';
+import { formatDate, formatNumber } from '@angular/common';
+import { EChartsOption } from '../../../graphs/echarts';
+
+@Component({
+  selector: 'app-reserves-ratio-graph',
+  templateUrl: './reserves-ratio-graph.component.html',
+  styleUrls: ['./reserves-ratio-graph.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReservesRatioGraphComponent implements OnInit, OnChanges {
+  @Input() data: any;
+  ratioHistoryChartOptions: EChartsOption;
+  ratioSeries: number[] = [];
+
+  height: number | string = '200';
+  right: number | string = '10';
+  top: number | string = '20';
+  left: number | string = '50';
+  template: ('widget' | 'advanced') = 'widget';
+  isLoading = true;
+
+  ratioHistoryChartInitOptions = {
+    renderer: 'svg'
+  };
+
+  constructor(
+    @Inject(LOCALE_ID) private locale: string,
+  ) { }
+
+  ngOnInit() {
+    this.isLoading = true;
+  }
+
+  ngOnChanges() {
+    if (!this.data) {
+      return;
+    }
+    // Compute the ratio series: the ratio of the reserves to the pegs
+    this.ratioSeries = this.data.liquidReserves.series.map((value: number, index: number) => value / this.data.liquidPegs.series[index]);
+    // Truncate the ratio series and labels series to last 3 years
+    this.ratioSeries = this.ratioSeries.slice(Math.max(this.ratioSeries.length - 36, 0));
+    this.data.liquidPegs.labels = this.data.liquidPegs.labels.slice(Math.max(this.data.liquidPegs.labels.length - 36, 0));
+    // Cut the values that are too high or too low
+    this.ratioSeries = this.ratioSeries.map((value: number) => Math.min(Math.max(value, 0.995), 1.005));
+    this.ratioHistoryChartOptions = this.createChartOptions(this.ratioSeries, this.data.liquidPegs.labels);
+  }
+
+  rendered() {
+    if (!this.data) {
+      return;
+    }
+    this.isLoading = false;
+  }
+
+  createChartOptions(ratioSeries: number[], labels: string[]): EChartsOption {
+    return {
+      grid: {
+        height: this.height,
+        right: this.right,
+        top: this.top,
+        left: this.left,
+      },
+      animation: false,
+      dataZoom: [{
+        type: 'inside',
+        realtime: true,
+        zoomOnMouseWheel: (this.template === 'advanced') ? true : false,
+        maxSpan: 100,
+        minSpan: 10,
+      }, {
+        show: (this.template === 'advanced') ? true : false,
+        type: 'slider',
+        brushSelect: false,
+        realtime: true,
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#fff',
+            opacity: 0.45,
+          },
+          areaStyle: {
+            opacity: 0,
+          }
+        }
+      }],
+      tooltip: {
+        trigger: 'axis',
+        position: (pos, params, el, elRect, size) => {
+          const obj = { top: -20 };
+          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 80;
+          return obj;
+        },
+        extraCssText: `width: ${(this.template === 'widget') ? '125px' : '135px'};
+                      background: transparent;
+                      border: none;
+                      box-shadow: none;`,
+        axisPointer: {
+          type: 'line',
+        },
+        formatter: (params: any) => {
+          const colorSpan = (color: string) => `<span class="indicator" style="background-color: ${color};"></span>`;
+          let itemFormatted = '<div class="title">' + params[0].axisValue + '</div>';
+          const item = params[0];
+          const formattedValue = formatNumber(item.value, this.locale, '1.5-5');
+          const symbol = (item.value === 1.005) ? '≥ ' : (item.value === 0.995) ? '≤ ' : '';
+          itemFormatted += `<div class="item">
+            <div class="indicator-container">${colorSpan(item.color)}</div>
+            <div style="margin-right: 5px"></div>
+            <div class="value">${symbol}${formattedValue}</div>
+          </div>`;
+          return `<div class="tx-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'tx-wrapper-tooltip-chart-advanced' : ''}">${itemFormatted}</div>`;
+        }
+      },
+      xAxis: {
+        type: 'category',
+        axisLabel: {
+          align: 'center',
+          fontSize: 11,
+          lineHeight: 12
+        },
+        boundaryGap: false,
+        data: labels.map((value: any) => `${formatDate(value, 'MMM\ny', this.locale)}`),
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          fontSize: 11,
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: '#ffffff66',
+            opacity: 0.25,
+          }
+        },
+        min: 0.995,
+        max: 1.005,
+      },
+      series: [
+        {
+          data: ratioSeries,
+          name: '',
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          lineStyle: {
+            width: 3,
+            
+          },
+          markLine: {
+            silent: true,
+            symbol: 'none',
+            lineStyle: {
+              color: '#fff',
+              opacity: 1,
+              width: 1,
+            },
+            data: [{
+              yAxis: 1,
+              label: {
+                show: false,
+                color: '#ffffff',
+              }
+            }],
+          },
+        },
+      ],
+      visualMap: {
+        show: false,
+        top: 50,
+        right: 10,
+        pieces: [{
+          gt: 0,
+          lte: 0.999,
+          color: '#D81B60'
+        },
+        {
+          gt: 0.999,
+          lte: 1.001,
+          color: '#FDD835'
+        },
+        {
+          gt: 1.001,
+          lte: 2,
+          color: '#7CB342'
+        }
+        ],
+        outOfRange: {
+          color: '#999'
+        }
+      },
+    };
+  }
+}
+
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.html
index 561656760..64e68624b 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.html
@@ -1,4 +1,4 @@
-<div class="echarts" echarts [initOpts]="pegsChartInitOption" [options]="pegsChartOptions" (chartRendered)="rendered()"></div>
+<div class="echarts" echarts [initOpts]="ratioChartInitOptions" [options]="ratioChartOptions" (chartRendered)="rendered()"></div>
 <div class="text-center loadingGraphs" *ngIf="isLoading">
   <div class="spinner-border text-light"></div>
 </div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
index 0a6363257..b53172e97 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
@@ -12,7 +12,7 @@ import { CurrentPegs } from '../../../interfaces/node-api.interface';
 export class ReservesRatioComponent implements OnInit, OnChanges {
   @Input() currentPeg: CurrentPegs;
   @Input() currentReserves: CurrentPegs;
-  pegsChartOptions: EChartsOption;
+  ratioChartOptions: EChartsOption;
 
   height: number | string = '200';
   right: number | string = '10';
@@ -21,8 +21,7 @@ export class ReservesRatioComponent implements OnInit, OnChanges {
   template: ('widget' | 'advanced') = 'widget';
   isLoading = true;
 
-  pegsChartOption: EChartsOption = {};
-  pegsChartInitOption = {
+  ratioChartInitOptions = {
     renderer: 'svg'
   };
 
@@ -36,7 +35,7 @@ export class ReservesRatioComponent implements OnInit, OnChanges {
     if (!this.currentPeg || !this.currentReserves || this.currentPeg.amount === '0') {
       return;
     }
-    this.pegsChartOptions = this.createChartOptions(this.currentPeg, this.currentReserves);
+    this.ratioChartOptions = this.createChartOptions(this.currentPeg, this.currentReserves);
   }
 
   rendered() {
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
index d0a624a4f..6d3897093 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="item">
-        <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">BTC Reserves</h5>
+        <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">BTC Reserves<span class="badge badge-pill badge-warning beta" style="margin-left: 4px; font-size: 10px;">beta</span></h5>
         <div class="card-text">
           <div class="fee-text">{{ (+currentReserves.amount) / 100000000 | number: '1.2-2' }} <span style="color: #b86d12;">BTC</span></div>
           <span class="fiat">
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 9603c8d93..b788050dc 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -276,7 +276,7 @@
     </div>
     <div class="item">
       <a class="title-link" [routerLink]="['/audit' | relativeUrl]">
-        <h5 class="card-title" i18n="dashboard.btc-reserves">BTC Reserves <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+        <h5 class="card-title" i18n="dashboard.btc-reserves">BTC Reserves <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon><span class="badge badge-pill badge-warning beta" style="margin-left: 4px; font-size: 10px;">beta</span></h5>
       </a>
       <ng-container *ngIf="(currentReserves$ | async) as currentReserves; else loadingTransactions">
         <p i18n-ngbTooltip="liquid.last-bitcoin-audit-block" [ngbTooltip]="'BTC reserves last updated at Bitcoin block ' + (currentReserves.lastBlockUpdate)" placement="top" class="card-text">{{ +(currentReserves.amount) / 100000000 | number: '1.2-2' }} <span class="bitcoin-color">BTC</span></p>
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index d0f111499..c80b257fc 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -49,6 +49,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   liquidPegsMonth$: Observable<any>;
   currentPeg$: Observable<CurrentPegs>;
   auditStatus$: Observable<AuditStatus>;
+  auditUpdated$: Observable<boolean>;
   liquidReservesMonth$: Observable<any>;
   currentReserves$: Observable<CurrentPegs>;
   fullHistory$: Observable<any>;
@@ -258,7 +259,15 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
           share()
         )
       );
-      
+
+      this.auditUpdated$ = this.auditStatus$.pipe(
+        filter(auditStatus => auditStatus.isAuditSynced === true),
+        map(auditStatus => auditStatus.lastBlockAudit),
+        switchMap((lastBlockAudit) => {
+          return lastBlockAudit > this.lastReservesBlockUpdate ? of(true) : of(false);
+        }),
+      );
+
       this.liquidReservesMonth$ = interval(60 * 60 * 1000).pipe(
         startWith(0),
         mergeMap(() => this.apiService.federationAuditSynced$()),
@@ -276,8 +285,8 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
         share()
       );
 
-      this.currentReserves$ = this.auditStatus$.pipe(
-        filter(auditStatus => auditStatus.isAuditSynced === true),
+      this.currentReserves$ = this.auditUpdated$.pipe(
+        filter(auditUpdated => auditUpdated === true),
         switchMap(_ =>
           this.apiService.liquidReserves$().pipe(
             filter((currentReserves) => currentReserves.lastBlockUpdate > this.lastReservesBlockUpdate),
@@ -298,6 +307,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
               liquidReserves.series[liquidReserves.series.length - 1] = parseFloat(currentReserves?.amount) / 100000000;
             } else if (liquidPegs.series.length === liquidReserves?.series.length + 1) {
               liquidReserves.series.push(parseFloat(currentReserves?.amount) / 100000000);
+              liquidReserves.labels.push(liquidPegs.labels[liquidPegs.labels.length - 1]);
             } else {
               liquidReserves = {
                 series: [],
@@ -309,7 +319,8 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
               liquidPegs,
               liquidReserves
             };
-          })
+          }),
+          share()
         );
     }
 
diff --git a/frontend/src/app/interfaces/node-api.interface.ts b/frontend/src/app/interfaces/node-api.interface.ts
index 5989be7fa..0b93b0d1a 100644
--- a/frontend/src/app/interfaces/node-api.interface.ts
+++ b/frontend/src/app/interfaces/node-api.interface.ts
@@ -83,7 +83,7 @@ export interface CurrentPegs {
 }
 
 export interface FederationAddress { 
-  address: string;
+  bitcoinaddress: string;
   balance: string;
 }
 
diff --git a/frontend/src/app/liquid/liquid-master-page.module.ts b/frontend/src/app/liquid/liquid-master-page.module.ts
index 90c50e0df..c8134cdf9 100644
--- a/frontend/src/app/liquid/liquid-master-page.module.ts
+++ b/frontend/src/app/liquid/liquid-master-page.module.ts
@@ -19,7 +19,11 @@ import { ReservesAuditDashboardComponent } from '../components/liquid-reserves-a
 import { ReservesSupplyStatsComponent } from '../components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component';
 import { FederationUtxosStatsComponent } from '../components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component';
 import { FederationUtxosListComponent } from '../components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component';
+import { FederationAddressesStatsComponent } from '../components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component';
+import { FederationAddressesListComponent } from '../components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component';
 import { ReservesRatioComponent } from '../components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component';
+import { ReservesRatioStatsComponent } from '../components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component';
+import { ReservesRatioGraphComponent } from '../components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component';
 
 const routes: Routes = [
   {
@@ -87,6 +91,10 @@ const routes: Routes = [
         path: 'audit/utxos',
         component: FederationUtxosListComponent,
       },
+      {
+        path: 'audit/addresses',
+        component: FederationAddressesListComponent,
+      },
       {
         path: 'assets',
         data: { networks: ['liquid'] },
@@ -156,7 +164,11 @@ export class LiquidRoutingModule { }
     ReservesSupplyStatsComponent,
     FederationUtxosStatsComponent,
     FederationUtxosListComponent,
+    FederationAddressesStatsComponent,
+    FederationAddressesListComponent,
     ReservesRatioComponent,
+    ReservesRatioStatsComponent,
+    ReservesRatioGraphComponent,
   ]
 })
 export class LiquidMasterPageModule { }
\ No newline at end of file
diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index 42dd6a26e..af4441eae 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -206,11 +206,11 @@ export class ApiService {
     return this.httpClient.get<FederationUtxo[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves/utxos');
   }
 
-  federationAddressesOneMonthAgo$(): Observable<FederationAddress[]> {
+  federationAddressesOneMonthAgo$(): Observable<any> {
     return this.httpClient.get<FederationAddress[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves/addresses/previous-month');
   }
 
-  federationUtxosOneMonthAgo$(): Observable<FederationUtxo[]> {
+  federationUtxosOneMonthAgo$(): Observable<any> {
     return this.httpClient.get<FederationUtxo[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves/utxos/previous-month');
   }
 
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 6a80e9851..36e7e79b8 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
-  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket } from '@fortawesome/free-solid-svg-icons';
+  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced } from '@fortawesome/free-solid-svg-icons';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { MenuComponent } from '../components/menu/menu.component';
 import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
@@ -385,5 +385,6 @@ export class SharedModule {
     library.addIcons(faUserCircle);
     library.addIcons(faCheck);
     library.addIcons(faRocket);
+    library.addIcons(faScaleBalanced);
   }
 }

From 16f0830f2cf4dfbbcedd5b75b5084d435f8da9bf Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Thu, 25 Jan 2024 15:19:46 +0100
Subject: [PATCH 20/92] Fix conflict in database-migration

---
 backend/src/api/database-migration.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/backend/src/api/database-migration.ts b/backend/src/api/database-migration.ts
index 16dca53e3..b84efdd7c 100644
--- a/backend/src/api/database-migration.ts
+++ b/backend/src/api/database-migration.ts
@@ -578,6 +578,8 @@ class DatabaseMigration {
       // Create the federation_txos table that uses the federation_addresses table as a foreign key
       await this.$executeQuery(this.getCreateFederationTxosTableQuery(), await this.$checkIfTableExists('federation_txos'));
       await this.$executeQuery(`INSERT INTO state VALUES('last_bitcoin_block_audit', 0, NULL);`);
+      await this.updateToSchemaVersion(68);
+    }
   }
 
   /**

From d1d8f77b29633b6d37b433d652b5272cf8ab4be7 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Thu, 25 Jan 2024 15:56:25 +0100
Subject: [PATCH 21/92] Fix eslint

---
 .../app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
index 38a944d27..0f6f115ff 100644
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
@@ -113,7 +113,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
                 <div class="value">${formatNumber(item.value, this.locale, '1.2-2')} <span class="symbol">${item.seriesName}</span></div>
               </div>`;
             }
-          };
+          }
           return `<div class="tx-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'tx-wrapper-tooltip-chart-advanced' : ''}">${itemFormatted}</div>`;
         }
       },

From 87e328504f356b1c5f76edbf2bc0232927b46bf4 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Fri, 26 Jan 2024 18:52:07 +0100
Subject: [PATCH 22/92] Liquid: Fix audit updating conditions

---
 .../federation-addresses-list.component.ts    | 45 +++++++++++---
 .../federation-utxos-list.component.ts        | 45 +++++++++++---
 .../reserves-audit-dashboard.component.ts     | 58 ++++++++++++-------
 .../src/app/dashboard/dashboard.component.ts  | 31 +++++++---
 4 files changed, 131 insertions(+), 48 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
index b066f0b65..8796ecf27 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
-import { Observable, concat } from 'rxjs';
+import { Observable, combineLatest, concat, of } from 'rxjs';
 import { delay, filter, map, share, skip, switchMap, tap, throttleTime } from 'rxjs/operators';
 import { ApiService } from '../../../services/api.service';
 import { Env, StateService } from '../../../services/state.service';
-import { AuditStatus, FederationAddress } from '../../../interfaces/node-api.interface';
+import { AuditStatus, CurrentPegs, FederationAddress } from '../../../interfaces/node-api.interface';
 import { WebsocketService } from '../../../services/websocket.service';
 
 @Component({
@@ -25,6 +25,9 @@ export class FederationAddressesListComponent implements OnInit {
   auditStatus$: Observable<AuditStatus>;
   auditUpdated$: Observable<boolean>;
   lastReservesBlockUpdate: number = 0;
+  currentPeg$: Observable<CurrentPegs>;
+  lastPegBlockUpdate: number = 0;
+  lastPegAmount: string = '';
 
   constructor(
     private apiService: ApiService,
@@ -40,7 +43,7 @@ export class FederationAddressesListComponent implements OnInit {
     if (!this.widget) {
       this.websocketService.want(['blocks']);
       this.auditStatus$ = concat(
-        this.apiService.federationAuditSynced$(),
+        this.apiService.federationAuditSynced$().pipe(share()),
         this.stateService.blocks$.pipe(
           skip(1),
           throttleTime(40000),
@@ -50,17 +53,41 @@ export class FederationAddressesListComponent implements OnInit {
         )
       );
 
-      this.auditUpdated$ = this.auditStatus$.pipe(
+      this.currentPeg$ = this.auditStatus$.pipe(
         filter(auditStatus => auditStatus.isAuditSynced === true),
-        map(auditStatus => {
-          const beforeLastBlockAudit = this.lastReservesBlockUpdate;
-          this.lastReservesBlockUpdate = auditStatus.lastBlockAudit;
-          return auditStatus.lastBlockAudit > beforeLastBlockAudit ? true : false;
-        })
+        switchMap(_ =>
+          this.apiService.liquidPegs$().pipe(
+            filter((currentPegs) => currentPegs.lastBlockUpdate >= this.lastPegBlockUpdate),
+            tap((currentPegs) => {
+              this.lastPegBlockUpdate = currentPegs.lastBlockUpdate;
+            })
+          )
+        ),
+        share()
+      );
+
+      this.auditUpdated$ = combineLatest([
+        this.auditStatus$,
+        this.currentPeg$
+      ]).pipe(
+        filter(([auditStatus, _]) => auditStatus.isAuditSynced === true),
+        map(([auditStatus, currentPeg]) => ({
+          lastBlockAudit: auditStatus.lastBlockAudit,
+          currentPegAmount: currentPeg.amount
+        })),
+        switchMap(({ lastBlockAudit, currentPegAmount }) => {
+          const blockAuditCheck = lastBlockAudit > this.lastReservesBlockUpdate;
+          const amountCheck = currentPegAmount !== this.lastPegAmount;
+          this.lastReservesBlockUpdate = lastBlockAudit;
+          this.lastPegAmount = currentPegAmount;
+          return of(blockAuditCheck || amountCheck);
+        }),
+        share()
       );
 
       this.federationAddresses$ = this.auditUpdated$.pipe(
         filter(auditUpdated => auditUpdated === true),
+        throttleTime(40000),
         switchMap(_ => this.apiService.federationAddresses$()),
         tap(_ => this.isLoading = false),
         share()
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
index 0ae371841..cbeae4d49 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
-import { Observable, concat } from 'rxjs';
+import { Observable, combineLatest, concat, of } from 'rxjs';
 import { delay, filter, map, share, skip, switchMap, tap, throttleTime } from 'rxjs/operators';
 import { ApiService } from '../../../services/api.service';
 import { Env, StateService } from '../../../services/state.service';
-import { AuditStatus, FederationUtxo } from '../../../interfaces/node-api.interface';
+import { AuditStatus, CurrentPegs, FederationUtxo } from '../../../interfaces/node-api.interface';
 import { WebsocketService } from '../../../services/websocket.service';
 
 @Component({
@@ -25,6 +25,9 @@ export class FederationUtxosListComponent implements OnInit {
   auditStatus$: Observable<AuditStatus>;
   auditUpdated$: Observable<boolean>;
   lastReservesBlockUpdate: number = 0;
+  currentPeg$: Observable<CurrentPegs>;
+  lastPegBlockUpdate: number = 0;
+  lastPegAmount: string = '';
 
   constructor(
     private apiService: ApiService,
@@ -40,7 +43,7 @@ export class FederationUtxosListComponent implements OnInit {
     if (!this.widget) {
       this.websocketService.want(['blocks']);
       this.auditStatus$ = concat(
-        this.apiService.federationAuditSynced$(),
+        this.apiService.federationAuditSynced$().pipe(share()),
         this.stateService.blocks$.pipe(
           skip(1),
           throttleTime(40000),
@@ -50,17 +53,41 @@ export class FederationUtxosListComponent implements OnInit {
         )
       );
 
-      this.auditUpdated$ = this.auditStatus$.pipe(
+      this.currentPeg$ = this.auditStatus$.pipe(
         filter(auditStatus => auditStatus.isAuditSynced === true),
-        map(auditStatus => {
-          const beforeLastBlockAudit = this.lastReservesBlockUpdate;
-          this.lastReservesBlockUpdate = auditStatus.lastBlockAudit;
-          return auditStatus.lastBlockAudit > beforeLastBlockAudit ? true : false;
-        })
+        switchMap(_ =>
+          this.apiService.liquidPegs$().pipe(
+            filter((currentPegs) => currentPegs.lastBlockUpdate >= this.lastPegBlockUpdate),
+            tap((currentPegs) => {
+              this.lastPegBlockUpdate = currentPegs.lastBlockUpdate;
+            })
+          )
+        ),
+        share()
+      );
+
+      this.auditUpdated$ = combineLatest([
+        this.auditStatus$,
+        this.currentPeg$
+      ]).pipe(
+        filter(([auditStatus, _]) => auditStatus.isAuditSynced === true),
+        map(([auditStatus, currentPeg]) => ({
+          lastBlockAudit: auditStatus.lastBlockAudit,
+          currentPegAmount: currentPeg.amount
+        })),
+        switchMap(({ lastBlockAudit, currentPegAmount }) => {
+          const blockAuditCheck = lastBlockAudit > this.lastReservesBlockUpdate;
+          const amountCheck = currentPegAmount !== this.lastPegAmount;
+          this.lastReservesBlockUpdate = lastBlockAudit;
+          this.lastPegAmount = currentPegAmount;
+          return of(blockAuditCheck || amountCheck);
+        }),
+        share()
       );
 
       this.federationUtxos$ = this.auditUpdated$.pipe(
         filter(auditUpdated => auditUpdated === true),
+        throttleTime(40000),
         switchMap(_ => this.apiService.federationUtxos$()),
         tap(_ => this.isLoading = false),
         share()
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
index c3fa6321d..18735299f 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
@@ -25,6 +25,7 @@ export class ReservesAuditDashboardComponent implements OnInit {
   liquidReservesMonth$: Observable<any>;
   fullHistory$: Observable<any>;
   private lastPegBlockUpdate: number = 0;
+  private lastPegAmount: string = '';
   private lastReservesBlockUpdate: number = 0;
 
 
@@ -51,32 +52,11 @@ export class ReservesAuditDashboardComponent implements OnInit {
       )
     );
 
-    this.auditUpdated$ = this.auditStatus$.pipe(
-      filter(auditStatus => auditStatus.isAuditSynced === true),
-      map(auditStatus => auditStatus.lastBlockAudit),
-      switchMap((lastBlockAudit) => {
-        return lastBlockAudit > this.lastReservesBlockUpdate ? of(true) : of(false);
-      }),
-    );
-
-    this.currentReserves$ = this.auditUpdated$.pipe(
-      filter(auditUpdated => auditUpdated === true),
-      switchMap(_ =>
-        this.apiService.liquidReserves$().pipe(
-          filter((currentReserves) => currentReserves.lastBlockUpdate > this.lastReservesBlockUpdate),
-          tap((currentReserves) => {
-            this.lastReservesBlockUpdate = currentReserves.lastBlockUpdate;
-          })
-        )
-      ),
-      share()
-    );
-
     this.currentPeg$ = this.auditStatus$.pipe(
       filter(auditStatus => auditStatus.isAuditSynced === true),
       switchMap(_ =>
         this.apiService.liquidPegs$().pipe(
-          filter((currentPegs) => currentPegs.lastBlockUpdate > this.lastPegBlockUpdate),
+          filter((currentPegs) => currentPegs.lastBlockUpdate >= this.lastPegBlockUpdate),
           tap((currentPegs) => {
             this.lastPegBlockUpdate = currentPegs.lastBlockUpdate;
           })
@@ -85,14 +65,48 @@ export class ReservesAuditDashboardComponent implements OnInit {
       share()
     );
 
+    this.auditUpdated$ = combineLatest([
+      this.auditStatus$,
+      this.currentPeg$
+    ]).pipe(
+      filter(([auditStatus, _]) => auditStatus.isAuditSynced === true),
+      map(([auditStatus, currentPeg]) => ({
+        lastBlockAudit: auditStatus.lastBlockAudit,
+        currentPegAmount: currentPeg.amount
+      })), 
+      switchMap(({ lastBlockAudit, currentPegAmount }) => {
+        const blockAuditCheck = lastBlockAudit > this.lastReservesBlockUpdate;
+        const amountCheck = currentPegAmount !== this.lastPegAmount;
+        this.lastPegAmount = currentPegAmount;
+        return of(blockAuditCheck || amountCheck);
+      }),
+      share()
+    );
+
+    this.currentReserves$ = this.auditUpdated$.pipe(
+      filter(auditUpdated => auditUpdated === true),
+      throttleTime(40000),
+      switchMap(_ =>
+        this.apiService.liquidReserves$().pipe(
+          filter((currentReserves) => currentReserves.lastBlockUpdate >= this.lastReservesBlockUpdate),
+          tap((currentReserves) => {
+            this.lastReservesBlockUpdate = currentReserves.lastBlockUpdate;
+          })
+        )
+      ),
+      share()
+    );
+
     this.federationUtxos$ = this.auditUpdated$.pipe(
       filter(auditUpdated => auditUpdated === true),
+      throttleTime(40000),
       switchMap(_ => this.apiService.federationUtxos$()),
       share()
     );
 
     this.federationAddresses$ = this.auditUpdated$.pipe(
       filter(auditUpdated => auditUpdated === true),
+      throttleTime(40000),
       switchMap(_ => this.apiService.federationAddresses$()),
       share()
     );
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index c80b257fc..afb172aad 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -56,6 +56,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   currencySubscription: Subscription;
   currency: string;
   private lastPegBlockUpdate: number = 0;
+  private lastPegAmount: string = '';
   private lastReservesBlockUpdate: number = 0;
 
   constructor(
@@ -239,9 +240,11 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
         // Or when we receive a newer block, we wait 2 seconds so that the backend updates and we fetch the current peg
         this.stateService.blocks$
           .pipe(
+            skip(1),
+            throttleTime(40000),
             delay(2000),
             switchMap((_) => this.apiService.liquidPegs$()),
-            filter((currentPeg) => currentPeg.lastBlockUpdate > this.lastPegBlockUpdate),
+            filter((currentPeg) => currentPeg.lastBlockUpdate >= this.lastPegBlockUpdate),
             tap((currentPeg) => this.lastPegBlockUpdate = currentPeg.lastBlockUpdate)
           )
       ).pipe(
@@ -260,12 +263,23 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
         )
       );
 
-      this.auditUpdated$ = this.auditStatus$.pipe(
-        filter(auditStatus => auditStatus.isAuditSynced === true),
-        map(auditStatus => auditStatus.lastBlockAudit),
-        switchMap((lastBlockAudit) => {
-          return lastBlockAudit > this.lastReservesBlockUpdate ? of(true) : of(false);
-        }),
+      this.auditUpdated$ = combineLatest([
+        this.auditStatus$,
+        this.currentPeg$
+      ]).pipe(
+        filter(([auditStatus, _]) => auditStatus.isAuditSynced === true),
+        map(([auditStatus, currentPeg]) => ({
+          lastBlockAudit: auditStatus.lastBlockAudit,
+          currentPegAmount: currentPeg.amount
+        })), 
+        switchMap(({ lastBlockAudit, currentPegAmount }) => {
+          console.log(lastBlockAudit, this.lastReservesBlockUpdate, currentPegAmount, this.lastPegAmount)
+          const blockAuditCheck = lastBlockAudit > this.lastReservesBlockUpdate;
+          const amountCheck = currentPegAmount !== this.lastPegAmount;
+          this.lastPegAmount = currentPegAmount;
+          console.log(blockAuditCheck || amountCheck)
+          return of(blockAuditCheck || amountCheck);
+        })
       );
 
       this.liquidReservesMonth$ = interval(60 * 60 * 1000).pipe(
@@ -287,9 +301,10 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
 
       this.currentReserves$ = this.auditUpdated$.pipe(
         filter(auditUpdated => auditUpdated === true),
+        throttleTime(40000),
         switchMap(_ =>
           this.apiService.liquidReserves$().pipe(
-            filter((currentReserves) => currentReserves.lastBlockUpdate > this.lastReservesBlockUpdate),
+            filter((currentReserves) => currentReserves.lastBlockUpdate >= this.lastReservesBlockUpdate),
             tap((currentReserves) => {
               this.lastReservesBlockUpdate = currentReserves.lastBlockUpdate;
             })

From 7102a72f843d7ccc47725bdb5fc57e329f97fff6 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Fri, 26 Jan 2024 19:11:38 +0100
Subject: [PATCH 23/92] Remove beta tag to Liquid Federation Audit

---
 .../reserves-supply-stats/reserves-supply-stats.component.html  | 2 +-
 frontend/src/app/dashboard/dashboard.component.html             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
index 6d3897093..d0a624a4f 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="item">
-        <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">BTC Reserves<span class="badge badge-pill badge-warning beta" style="margin-left: 4px; font-size: 10px;">beta</span></h5>
+        <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">BTC Reserves</h5>
         <div class="card-text">
           <div class="fee-text">{{ (+currentReserves.amount) / 100000000 | number: '1.2-2' }} <span style="color: #b86d12;">BTC</span></div>
           <span class="fiat">
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index b788050dc..9603c8d93 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -276,7 +276,7 @@
     </div>
     <div class="item">
       <a class="title-link" [routerLink]="['/audit' | relativeUrl]">
-        <h5 class="card-title" i18n="dashboard.btc-reserves">BTC Reserves <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon><span class="badge badge-pill badge-warning beta" style="margin-left: 4px; font-size: 10px;">beta</span></h5>
+        <h5 class="card-title" i18n="dashboard.btc-reserves">BTC Reserves <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
       </a>
       <ng-container *ngIf="(currentReserves$ | async) as currentReserves; else loadingTransactions">
         <p i18n-ngbTooltip="liquid.last-bitcoin-audit-block" [ngbTooltip]="'BTC reserves last updated at Bitcoin block ' + (currentReserves.lastBlockUpdate)" placement="top" class="card-text">{{ +(currentReserves.amount) / 100000000 | number: '1.2-2' }} <span class="bitcoin-color">BTC</span></p>

From 1a2844ffdf7b53237629b8fb21c192744d9a80ec Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Fri, 26 Jan 2024 20:43:34 +0100
Subject: [PATCH 24/92] Liquid dashboard: Fix double api call

---
 .../federation-addresses-list.component.ts    | 20 ++---
 .../federation-utxos-list.component.ts        | 20 ++---
 .../reserves-audit-dashboard.component.ts     | 20 ++---
 .../src/app/dashboard/dashboard.component.ts  | 90 ++++++++-----------
 4 files changed, 65 insertions(+), 85 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
index 8796ecf27..67bb68193 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
-import { Observable, combineLatest, concat, of } from 'rxjs';
-import { delay, filter, map, share, skip, switchMap, tap, throttleTime } from 'rxjs/operators';
+import { Observable, combineLatest, of, timer } from 'rxjs';
+import { delayWhen, filter, map, share, shareReplay, switchMap, tap, throttleTime } from 'rxjs/operators';
 import { ApiService } from '../../../services/api.service';
 import { Env, StateService } from '../../../services/state.service';
 import { AuditStatus, CurrentPegs, FederationAddress } from '../../../interfaces/node-api.interface';
@@ -28,6 +28,7 @@ export class FederationAddressesListComponent implements OnInit {
   currentPeg$: Observable<CurrentPegs>;
   lastPegBlockUpdate: number = 0;
   lastPegAmount: string = '';
+  isLoad: boolean = true;
 
   constructor(
     private apiService: ApiService,
@@ -42,15 +43,12 @@ export class FederationAddressesListComponent implements OnInit {
     this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
     if (!this.widget) {
       this.websocketService.want(['blocks']);
-      this.auditStatus$ = concat(
-        this.apiService.federationAuditSynced$().pipe(share()),
-        this.stateService.blocks$.pipe(
-          skip(1),
-          throttleTime(40000),
-          delay(2000),
-          switchMap(() => this.apiService.federationAuditSynced$()),
-          share()
-        )
+      this.auditStatus$ = this.stateService.blocks$.pipe(
+        throttleTime(40000),
+        delayWhen(_ => this.isLoad ? timer(0) : timer(2000)),
+        tap(() => this.isLoad = false),
+        switchMap(() => this.apiService.federationAuditSynced$()),
+        shareReplay(1)
       );
 
       this.currentPeg$ = this.auditStatus$.pipe(
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
index cbeae4d49..39c2c577e 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
-import { Observable, combineLatest, concat, of } from 'rxjs';
-import { delay, filter, map, share, skip, switchMap, tap, throttleTime } from 'rxjs/operators';
+import { Observable, combineLatest, of, timer } from 'rxjs';
+import { delayWhen, filter, map, share, shareReplay, switchMap, tap, throttleTime } from 'rxjs/operators';
 import { ApiService } from '../../../services/api.service';
 import { Env, StateService } from '../../../services/state.service';
 import { AuditStatus, CurrentPegs, FederationUtxo } from '../../../interfaces/node-api.interface';
@@ -28,6 +28,7 @@ export class FederationUtxosListComponent implements OnInit {
   currentPeg$: Observable<CurrentPegs>;
   lastPegBlockUpdate: number = 0;
   lastPegAmount: string = '';
+  isLoad: boolean = true;
 
   constructor(
     private apiService: ApiService,
@@ -42,15 +43,12 @@ export class FederationUtxosListComponent implements OnInit {
     this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
     if (!this.widget) {
       this.websocketService.want(['blocks']);
-      this.auditStatus$ = concat(
-        this.apiService.federationAuditSynced$().pipe(share()),
-        this.stateService.blocks$.pipe(
-          skip(1),
-          throttleTime(40000),
-          delay(2000),
-          switchMap(() => this.apiService.federationAuditSynced$()),
-          share()
-        )
+      this.auditStatus$ = this.stateService.blocks$.pipe(
+        throttleTime(40000),
+        delayWhen(_ => this.isLoad ? timer(0) : timer(2000)),
+        tap(() => this.isLoad = false),
+        switchMap(() => this.apiService.federationAuditSynced$()),
+        shareReplay(1)
       );
 
       this.currentPeg$ = this.auditStatus$.pipe(
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
index 18735299f..cb5439165 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
@@ -2,9 +2,9 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { SeoService } from '../../../services/seo.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { StateService } from '../../../services/state.service';
-import { Observable, combineLatest, concat, delay, filter, interval, map, mergeMap, of, share, skip, startWith, switchMap, tap, throttleTime } from 'rxjs';
+import { Observable, combineLatest, delayWhen, filter, interval, map, of, share, shareReplay, startWith, switchMap, tap, throttleTime, timer } from 'rxjs';
 import { ApiService } from '../../../services/api.service';
-import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo, LiquidPegs } from '../../../interfaces/node-api.interface';
+import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo } from '../../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-reserves-audit-dashboard',
@@ -24,6 +24,7 @@ export class ReservesAuditDashboardComponent implements OnInit {
   liquidPegsMonth$: Observable<any>;
   liquidReservesMonth$: Observable<any>;
   fullHistory$: Observable<any>;
+  isLoad: boolean = true;
   private lastPegBlockUpdate: number = 0;
   private lastPegAmount: string = '';
   private lastReservesBlockUpdate: number = 0;
@@ -41,15 +42,12 @@ export class ReservesAuditDashboardComponent implements OnInit {
   ngOnInit(): void {
     this.websocketService.want(['blocks', 'mempool-blocks']);
 
-    this.auditStatus$ = concat(
-      this.apiService.federationAuditSynced$().pipe(share()),
-      this.stateService.blocks$.pipe(
-        skip(1),
-        throttleTime(40000),
-        delay(2000),
-        switchMap(() => this.apiService.federationAuditSynced$()),
-        share()
-      )
+    this.auditStatus$ = this.stateService.blocks$.pipe(
+      throttleTime(40000),
+      delayWhen(_ => this.isLoad ? timer(0) : timer(2000)),
+      tap(() => this.isLoad = false),
+      switchMap(() => this.apiService.federationAuditSynced$()),
+      shareReplay(1)
     );
 
     this.currentPeg$ = this.auditStatus$.pipe(
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index afb172aad..4ade4a9b3 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -1,6 +1,6 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
-import { combineLatest, concat, EMPTY, interval, merge, Observable, of, Subscription } from 'rxjs';
-import { catchError, delay, filter, map, mergeMap, scan, share, skip, startWith, switchMap, tap, throttleTime } from 'rxjs/operators';
+import { combineLatest, EMPTY, merge, Observable, of, Subscription, timer } from 'rxjs';
+import { catchError, delayWhen, filter, map, scan, share, shareReplay, startWith, switchMap, tap, throttleTime } from 'rxjs/operators';
 import { AuditStatus, BlockExtended, CurrentPegs, OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { MempoolInfo, TransactionStripped, ReplacementInfo } from '../interfaces/websocket.interface';
 import { ApiService } from '../services/api.service';
@@ -53,6 +53,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   liquidReservesMonth$: Observable<any>;
   currentReserves$: Observable<CurrentPegs>;
   fullHistory$: Observable<any>;
+  isLoad: boolean = true;
   currencySubscription: Subscription;
   currency: string;
   private lastPegBlockUpdate: number = 0;
@@ -213,56 +214,44 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
       );
 
     if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') {
-      ////////// Pegs historical data //////////
-      this.liquidPegsMonth$ = interval(60 * 60 * 1000)
-        .pipe(
-          startWith(0),
-          switchMap(() => this.apiService.listLiquidPegsMonth$()),
-          map((pegs) => {
-            const labels = pegs.map(stats => stats.date);
-            const series = pegs.map(stats => parseFloat(stats.amount) / 100000000);
-            series.reduce((prev, curr, i) => series[i] = prev + curr, 0);
-            return {
-              series,
-              labels
-            };
-          }),
-          share(),
-        );
+      this.auditStatus$ = this.stateService.blocks$.pipe(
+        throttleTime(40000),
+        delayWhen(_ => this.isLoad ? timer(0) : timer(2000)),
+        tap(() => this.isLoad = false),
+        switchMap(() => this.apiService.federationAuditSynced$()),
+        shareReplay(1),
+        share()
+      );
 
-      this.currentPeg$ = concat(
-        // We fetch the current peg when the page load and
-        // wait for the API response before listening to websocket blocks
-        this.apiService.liquidPegs$()
-          .pipe(
-            tap((currentPeg) => this.lastPegBlockUpdate = currentPeg.lastBlockUpdate)
-          ),
-        // Or when we receive a newer block, we wait 2 seconds so that the backend updates and we fetch the current peg
-        this.stateService.blocks$
-          .pipe(
-            skip(1),
-            throttleTime(40000),
-            delay(2000),
-            switchMap((_) => this.apiService.liquidPegs$()),
-            filter((currentPeg) => currentPeg.lastBlockUpdate >= this.lastPegBlockUpdate),
-            tap((currentPeg) => this.lastPegBlockUpdate = currentPeg.lastBlockUpdate)
+      ////////// Pegs historical data //////////
+      this.liquidPegsMonth$ = this.auditStatus$.pipe(
+        throttleTime(60 * 60 * 1000),
+        switchMap(() => this.apiService.listLiquidPegsMonth$()),
+        map((pegs) => {
+          const labels = pegs.map(stats => stats.date);
+          const series = pegs.map(stats => parseFloat(stats.amount) / 100000000);
+          series.reduce((prev, curr, i) => series[i] = prev + curr, 0);
+          return {
+            series,
+            labels
+          };
+        }),
+        share(),
+      );
+
+      this.currentPeg$ = this.auditStatus$.pipe(
+        switchMap(_ =>
+          this.apiService.liquidPegs$().pipe(
+            filter((currentPegs) => currentPegs.lastBlockUpdate >= this.lastPegBlockUpdate),
+            tap((currentPegs) => {
+              this.lastPegBlockUpdate = currentPegs.lastBlockUpdate;
+            })
           )
-      ).pipe(
+        ),
         share()
       );
 
       ////////// BTC Reserves historical data //////////
-      this.auditStatus$ = concat(
-        this.apiService.federationAuditSynced$().pipe(share()),
-        this.stateService.blocks$.pipe(
-          skip(1),
-          throttleTime(40000),
-          delay(2000),
-          switchMap(() => this.apiService.federationAuditSynced$()),
-          share()
-        )
-      );
-
       this.auditUpdated$ = combineLatest([
         this.auditStatus$,
         this.currentPeg$
@@ -271,20 +260,17 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
         map(([auditStatus, currentPeg]) => ({
           lastBlockAudit: auditStatus.lastBlockAudit,
           currentPegAmount: currentPeg.amount
-        })), 
+        })),
         switchMap(({ lastBlockAudit, currentPegAmount }) => {
-          console.log(lastBlockAudit, this.lastReservesBlockUpdate, currentPegAmount, this.lastPegAmount)
           const blockAuditCheck = lastBlockAudit > this.lastReservesBlockUpdate;
           const amountCheck = currentPegAmount !== this.lastPegAmount;
           this.lastPegAmount = currentPegAmount;
-          console.log(blockAuditCheck || amountCheck)
           return of(blockAuditCheck || amountCheck);
         })
       );
 
-      this.liquidReservesMonth$ = interval(60 * 60 * 1000).pipe(
-        startWith(0),
-        mergeMap(() => this.apiService.federationAuditSynced$()),
+      this.liquidReservesMonth$ = this.auditStatus$.pipe(
+        throttleTime(60 * 60 * 1000),
         switchMap((auditStatus) => {
           return auditStatus.isAuditSynced ? this.apiService.listLiquidReservesMonth$() : EMPTY;
         }),

From 057abbb6c1f2e8c9eacb15dde89e9fee6671fa6f Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Sat, 27 Jan 2024 16:16:32 +0100
Subject: [PATCH 25/92] [mining] update halving widget to be more human
 readable

---
 .../components/difficulty-mining/countdown.js | 1358 +++++++++++++++++
 .../difficulty-mining.component.html          |   30 +-
 .../difficulty-mining.component.ts            |   27 +-
 3 files changed, 1403 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/app/components/difficulty-mining/countdown.js

diff --git a/frontend/src/app/components/difficulty-mining/countdown.js b/frontend/src/app/components/difficulty-mining/countdown.js
new file mode 100644
index 000000000..60909abb9
--- /dev/null
+++ b/frontend/src/app/components/difficulty-mining/countdown.js
@@ -0,0 +1,1358 @@
+/*global window module */
+/**
+ * @license countdown.js v2.6.1 http://countdownjs.org
+ * Copyright (c)2006-2014 Stephen M. McKamey.
+ * Licensed under The MIT License.
+ */
+/*jshint bitwise:false */
+
+/**
+ * API entry
+ * @public
+ * @param {function(Object)|Date|number} start the starting date
+ * @param {function(Object)|Date|number} end the ending date
+ * @param {number} units the units to populate
+ * @return {Object|number}
+ */
+var countdown = (
+
+  function() {
+    /*jshint smarttabs:true */
+  
+    'use strict';
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var MILLISECONDS	= 0x001;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var SECONDS			= 0x002;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var MINUTES			= 0x004;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var HOURS			= 0x008;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var DAYS			= 0x010;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var WEEKS			= 0x020;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var MONTHS			= 0x040;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var YEARS			= 0x080;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var DECADES			= 0x100;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var CENTURIES		= 0x200;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var MILLENNIA		= 0x400;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var DEFAULTS		= YEARS|MONTHS|DAYS|HOURS|MINUTES|SECONDS;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var MILLISECONDS_PER_SECOND = 1000;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var SECONDS_PER_MINUTE = 60;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var MINUTES_PER_HOUR = 60;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var HOURS_PER_DAY = 24;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var MILLISECONDS_PER_DAY = HOURS_PER_DAY * MINUTES_PER_HOUR * SECONDS_PER_MINUTE * MILLISECONDS_PER_SECOND;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var DAYS_PER_WEEK = 7;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var MONTHS_PER_YEAR = 12;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var YEARS_PER_DECADE = 10;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var DECADES_PER_CENTURY = 10;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var CENTURIES_PER_MILLENNIUM = 10;
+  
+    /**
+     * @private
+     * @param {number} x number
+     * @return {number}
+     */
+    var ceil = Math.ceil;
+  
+    /**
+     * @private
+     * @param {number} x number
+     * @return {number}
+     */
+    var floor = Math.floor;
+  
+    /**
+     * @private
+     * @param {Date} ref reference date
+     * @param {number} shift number of months to shift
+     * @return {number} number of days shifted
+     */
+    function borrowMonths(ref, shift) {
+      var prevTime = ref.getTime();
+  
+      // increment month by shift
+      ref.setMonth( ref.getMonth() + shift );
+  
+      // this is the trickiest since months vary in length
+      return Math.round( (ref.getTime() - prevTime) / MILLISECONDS_PER_DAY );
+    }
+  
+    /**
+     * @private
+     * @param {Date} ref reference date
+     * @return {number} number of days
+     */
+    function daysPerMonth(ref) {
+      var a = ref.getTime();
+  
+      // increment month by 1
+      var b = new Date(a);
+      b.setMonth( ref.getMonth() + 1 );
+  
+      // this is the trickiest since months vary in length
+      return Math.round( (b.getTime() - a) / MILLISECONDS_PER_DAY );
+    }
+  
+    /**
+     * @private
+     * @param {Date} ref reference date
+     * @return {number} number of days
+     */
+    function daysPerYear(ref) {
+      var a = ref.getTime();
+  
+      // increment year by 1
+      var b = new Date(a);
+      b.setFullYear( ref.getFullYear() + 1 );
+  
+      // this is the trickiest since years (periodically) vary in length
+      return Math.round( (b.getTime() - a) / MILLISECONDS_PER_DAY );
+    }
+  
+    /**
+     * Applies the Timespan to the given date.
+     * 
+     * @private
+     * @param {Timespan} ts
+     * @param {Date=} date
+     * @return {Date}
+     */
+    function addToDate(ts, date) {
+      date = (date instanceof Date) || ((date !== null) && isFinite(date)) ? new Date(+date) : new Date();
+      if (!ts) {
+        return date;
+      }
+  
+      // if there is a value field, use it directly
+      var value = +ts.value || 0;
+      if (value) {
+        date.setTime(date.getTime() + value);
+        return date;
+      }
+  
+      value = +ts.milliseconds || 0;
+      if (value) {
+        date.setMilliseconds(date.getMilliseconds() + value);
+      }
+  
+      value = +ts.seconds || 0;
+      if (value) {
+        date.setSeconds(date.getSeconds() + value);
+      }
+  
+      value = +ts.minutes || 0;
+      if (value) {
+        date.setMinutes(date.getMinutes() + value);
+      }
+  
+      value = +ts.hours || 0;
+      if (value) {
+        date.setHours(date.getHours() + value);
+      }
+  
+      value = +ts.weeks || 0;
+      if (value) {
+        value *= DAYS_PER_WEEK;
+      }
+  
+      value += +ts.days || 0;
+      if (value) {
+        date.setDate(date.getDate() + value);
+      }
+  
+      value = +ts.months || 0;
+      if (value) {
+        date.setMonth(date.getMonth() + value);
+      }
+  
+      value = +ts.millennia || 0;
+      if (value) {
+        value *= CENTURIES_PER_MILLENNIUM;
+      }
+  
+      value += +ts.centuries || 0;
+      if (value) {
+        value *= DECADES_PER_CENTURY;
+      }
+  
+      value += +ts.decades || 0;
+      if (value) {
+        value *= YEARS_PER_DECADE;
+      }
+  
+      value += +ts.years || 0;
+      if (value) {
+        date.setFullYear(date.getFullYear() + value);
+      }
+  
+      return date;
+    }
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var LABEL_MILLISECONDS	= 0;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var LABEL_SECONDS		= 1;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var LABEL_MINUTES		= 2;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var LABEL_HOURS			= 3;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var LABEL_DAYS			= 4;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var LABEL_WEEKS			= 5;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var LABEL_MONTHS		= 6;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var LABEL_YEARS			= 7;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var LABEL_DECADES		= 8;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var LABEL_CENTURIES		= 9;
+  
+    /**
+     * @private
+     * @const
+     * @type {number}
+     */
+    var LABEL_MILLENNIA		= 10;
+  
+    /**
+     * @private
+     * @type {Array}
+     */
+    var LABELS_SINGLUAR;
+  
+    /**
+     * @private
+     * @type {Array}
+     */
+    var LABELS_PLURAL;
+  
+    /**
+     * @private
+     * @type {string}
+     */
+    var LABEL_LAST;
+  
+    /**
+     * @private
+     * @type {string}
+     */
+    var LABEL_DELIM;
+  
+    /**
+     * @private
+     * @type {string}
+     */
+    var LABEL_NOW;
+  
+    /**
+     * Formats a number & unit as a string
+     * 
+     * @param {number} value
+     * @param {number} unit
+     * @return {string}
+     */
+    var formatter;
+  
+    /**
+     * Formats a number as a string
+     * 
+     * @private
+     * @param {number} value
+     * @return {string}
+     */
+    var formatNumber;
+  
+    /**
+     * @private
+     * @param {number} value
+     * @param {number} unit unit index into label list
+     * @return {string}
+     */
+    function plurality(value, unit) {
+      return formatNumber(value)+((value === 1) ? LABELS_SINGLUAR[unit] : LABELS_PLURAL[unit]);
+    }
+  
+    /**
+     * Formats the entries with singular or plural labels
+     * 
+     * @private
+     * @param {Timespan} ts
+     * @return {Array}
+     */
+    var formatList;
+  
+    /**
+     * Timespan representation of a duration of time
+     * 
+     * @private
+     * @this {Timespan}
+     * @constructor
+     */
+    function Timespan() {}
+  
+    /**
+     * Formats the Timespan as a sentence
+     * 
+     * @param {string=} emptyLabel the string to use when no values returned
+     * @return {string}
+     */
+    Timespan.prototype.toString = function(emptyLabel) {
+      var label = formatList(this);
+  
+      var count = label.length;
+      if (!count) {
+        return emptyLabel ? ''+emptyLabel : LABEL_NOW;
+      }
+      if (count === 1) {
+        return label[0];
+      }
+  
+      var last = LABEL_LAST+label.pop();
+      return label.join(LABEL_DELIM)+last;
+    };
+  
+    /**
+     * Formats the Timespan as a sentence in HTML
+     * 
+     * @param {string=} tag HTML tag name to wrap each value
+     * @param {string=} emptyLabel the string to use when no values returned
+     * @return {string}
+     */
+    Timespan.prototype.toHTML = function(tag, emptyLabel) {
+      tag = tag || 'span';
+      var label = formatList(this);
+  
+      var count = label.length;
+      if (!count) {
+        emptyLabel = emptyLabel || LABEL_NOW;
+        return emptyLabel ? '<'+tag+'>'+emptyLabel+'</'+tag+'>' : emptyLabel;
+      }
+      for (var i=0; i<count; i++) {
+        // wrap each unit in tag
+        label[i] = '<'+tag+'>'+label[i]+'</'+tag+'>';
+      }
+      if (count === 1) {
+        return label[0];
+      }
+  
+      var last = LABEL_LAST+label.pop();
+      return label.join(LABEL_DELIM)+last;
+    };
+  
+    /**
+     * Applies the Timespan to the given date
+     * 
+     * @param {Date=} date the date to which the timespan is added.
+     * @return {Date}
+     */
+    Timespan.prototype.addTo = function(date) {
+      return addToDate(this, date);
+    };
+  
+    /**
+     * Formats the entries as English labels
+     * 
+     * @private
+     * @param {Timespan} ts
+     * @return {Array}
+     */
+    formatList = function(ts) {
+      var list = [];
+  
+      var value = ts.millennia;
+      if (value) {
+        list.push(formatter(value, LABEL_MILLENNIA));
+      }
+  
+      value = ts.centuries;
+      if (value) {
+        list.push(formatter(value, LABEL_CENTURIES));
+      }
+  
+      value = ts.decades;
+      if (value) {
+        list.push(formatter(value, LABEL_DECADES));
+      }
+  
+      value = ts.years;
+      if (value) {
+        list.push(formatter(value, LABEL_YEARS));
+      }
+  
+      value = ts.months;
+      if (value) {
+        list.push(formatter(value, LABEL_MONTHS));
+      }
+  
+      value = ts.weeks;
+      if (value) {
+        list.push(formatter(value, LABEL_WEEKS));
+      }
+  
+      value = ts.days;
+      if (value) {
+        list.push(formatter(value, LABEL_DAYS));
+      }
+  
+      value = ts.hours;
+      if (value) {
+        list.push(formatter(value, LABEL_HOURS));
+      }
+  
+      value = ts.minutes;
+      if (value) {
+        list.push(formatter(value, LABEL_MINUTES));
+      }
+  
+      value = ts.seconds;
+      if (value) {
+        list.push(formatter(value, LABEL_SECONDS));
+      }
+  
+      value = ts.milliseconds;
+      if (value) {
+        list.push(formatter(value, LABEL_MILLISECONDS));
+      }
+  
+      return list;
+    };
+  
+    /**
+     * Borrow any underflow units, carry any overflow units
+     * 
+     * @private
+     * @param {Timespan} ts
+     * @param {string} toUnit
+     */
+    function rippleRounded(ts, toUnit) {
+      switch (toUnit) {
+        case 'seconds':
+          if (ts.seconds !== SECONDS_PER_MINUTE || isNaN(ts.minutes)) {
+            return;
+          }
+          // ripple seconds up to minutes
+          ts.minutes++;
+          ts.seconds = 0;
+  
+          /* falls through */
+        case 'minutes':
+          if (ts.minutes !== MINUTES_PER_HOUR || isNaN(ts.hours)) {
+            return;
+          }
+          // ripple minutes up to hours
+          ts.hours++;
+          ts.minutes = 0;
+  
+          /* falls through */
+        case 'hours':
+          if (ts.hours !== HOURS_PER_DAY || isNaN(ts.days)) {
+            return;
+          }
+          // ripple hours up to days
+          ts.days++;
+          ts.hours = 0;
+  
+          /* falls through */
+        case 'days':
+          if (ts.days !== DAYS_PER_WEEK || isNaN(ts.weeks)) {
+            return;
+          }
+          // ripple days up to weeks
+          ts.weeks++;
+          ts.days = 0;
+  
+          /* falls through */
+        case 'weeks':
+          if (ts.weeks !== daysPerMonth(ts.refMonth)/DAYS_PER_WEEK || isNaN(ts.months)) {
+            return;
+          }
+          // ripple weeks up to months
+          ts.months++;
+          ts.weeks = 0;
+  
+          /* falls through */
+        case 'months':
+          if (ts.months !== MONTHS_PER_YEAR || isNaN(ts.years)) {
+            return;
+          }
+          // ripple months up to years
+          ts.years++;
+          ts.months = 0;
+  
+          /* falls through */
+        case 'years':
+          if (ts.years !== YEARS_PER_DECADE || isNaN(ts.decades)) {
+            return;
+          }
+          // ripple years up to decades
+          ts.decades++;
+          ts.years = 0;
+  
+          /* falls through */
+        case 'decades':
+          if (ts.decades !== DECADES_PER_CENTURY || isNaN(ts.centuries)) {
+            return;
+          }
+          // ripple decades up to centuries
+          ts.centuries++;
+          ts.decades = 0;
+  
+          /* falls through */
+        case 'centuries':
+          if (ts.centuries !== CENTURIES_PER_MILLENNIUM || isNaN(ts.millennia)) {
+            return;
+          }
+          // ripple centuries up to millennia
+          ts.millennia++;
+          ts.centuries = 0;
+          /* falls through */
+        }
+    }
+  
+    /**
+     * Ripple up partial units one place
+     * 
+     * @private
+     * @param {Timespan} ts timespan
+     * @param {number} frac accumulated fractional value
+     * @param {string} fromUnit source unit name
+     * @param {string} toUnit target unit name
+     * @param {number} conversion multiplier between units
+     * @param {number} digits max number of decimal digits to output
+     * @return {number} new fractional value
+     */
+    function fraction(ts, frac, fromUnit, toUnit, conversion, digits) {
+      if (ts[fromUnit] >= 0) {
+        frac += ts[fromUnit];
+        delete ts[fromUnit];
+      }
+  
+      frac /= conversion;
+      if (frac + 1 <= 1) {
+        // drop if below machine epsilon
+        return 0;
+      }
+  
+      if (ts[toUnit] >= 0) {
+        // ensure does not have more than specified number of digits
+        ts[toUnit] = +(ts[toUnit] + frac).toFixed(digits);
+        rippleRounded(ts, toUnit);
+        return 0;
+      }
+  
+      return frac;
+    }
+  
+    /**
+     * Ripple up partial units to next existing
+     * 
+     * @private
+     * @param {Timespan} ts
+     * @param {number} digits max number of decimal digits to output
+     */
+    function fractional(ts, digits) {
+      var frac = fraction(ts, 0, 'milliseconds', 'seconds', MILLISECONDS_PER_SECOND, digits);
+      if (!frac) { return; }
+  
+      frac = fraction(ts, frac, 'seconds', 'minutes', SECONDS_PER_MINUTE, digits);
+      if (!frac) { return; }
+  
+      frac = fraction(ts, frac, 'minutes', 'hours', MINUTES_PER_HOUR, digits);
+      if (!frac) { return; }
+  
+      frac = fraction(ts, frac, 'hours', 'days', HOURS_PER_DAY, digits);
+      if (!frac) { return; }
+  
+      frac = fraction(ts, frac, 'days', 'weeks', DAYS_PER_WEEK, digits);
+      if (!frac) { return; }
+  
+      frac = fraction(ts, frac, 'weeks', 'months', daysPerMonth(ts.refMonth)/DAYS_PER_WEEK, digits);
+      if (!frac) { return; }
+  
+      frac = fraction(ts, frac, 'months', 'years', daysPerYear(ts.refMonth)/daysPerMonth(ts.refMonth), digits);
+      if (!frac) { return; }
+  
+      frac = fraction(ts, frac, 'years', 'decades', YEARS_PER_DECADE, digits);
+      if (!frac) { return; }
+  
+      frac = fraction(ts, frac, 'decades', 'centuries', DECADES_PER_CENTURY, digits);
+      if (!frac) { return; }
+  
+      frac = fraction(ts, frac, 'centuries', 'millennia', CENTURIES_PER_MILLENNIUM, digits);
+  
+      // should never reach this with remaining fractional value
+      if (frac) { throw new Error('Fractional unit overflow'); }
+    }
+  
+    /**
+     * Borrow any underflow units, carry any overflow units
+     * 
+     * @private
+     * @param {Timespan} ts
+     */
+    function ripple(ts) {
+      var x;
+  
+      if (ts.milliseconds < 0) {
+        // ripple seconds down to milliseconds
+        x = ceil(-ts.milliseconds / MILLISECONDS_PER_SECOND);
+        ts.seconds -= x;
+        ts.milliseconds += x * MILLISECONDS_PER_SECOND;
+  
+      } else if (ts.milliseconds >= MILLISECONDS_PER_SECOND) {
+        // ripple milliseconds up to seconds
+        ts.seconds += floor(ts.milliseconds / MILLISECONDS_PER_SECOND);
+        ts.milliseconds %= MILLISECONDS_PER_SECOND;
+      }
+  
+      if (ts.seconds < 0) {
+        // ripple minutes down to seconds
+        x = ceil(-ts.seconds / SECONDS_PER_MINUTE);
+        ts.minutes -= x;
+        ts.seconds += x * SECONDS_PER_MINUTE;
+  
+      } else if (ts.seconds >= SECONDS_PER_MINUTE) {
+        // ripple seconds up to minutes
+        ts.minutes += floor(ts.seconds / SECONDS_PER_MINUTE);
+        ts.seconds %= SECONDS_PER_MINUTE;
+      }
+  
+      if (ts.minutes < 0) {
+        // ripple hours down to minutes
+        x = ceil(-ts.minutes / MINUTES_PER_HOUR);
+        ts.hours -= x;
+        ts.minutes += x * MINUTES_PER_HOUR;
+  
+      } else if (ts.minutes >= MINUTES_PER_HOUR) {
+        // ripple minutes up to hours
+        ts.hours += floor(ts.minutes / MINUTES_PER_HOUR);
+        ts.minutes %= MINUTES_PER_HOUR;
+      }
+  
+      if (ts.hours < 0) {
+        // ripple days down to hours
+        x = ceil(-ts.hours / HOURS_PER_DAY);
+        ts.days -= x;
+        ts.hours += x * HOURS_PER_DAY;
+  
+      } else if (ts.hours >= HOURS_PER_DAY) {
+        // ripple hours up to days
+        ts.days += floor(ts.hours / HOURS_PER_DAY);
+        ts.hours %= HOURS_PER_DAY;
+      }
+  
+      while (ts.days < 0) {
+        // NOTE: never actually seen this loop more than once
+  
+        // ripple months down to days
+        ts.months--;
+        ts.days += borrowMonths(ts.refMonth, 1);
+      }
+  
+      // weeks is always zero here
+  
+      if (ts.days >= DAYS_PER_WEEK) {
+        // ripple days up to weeks
+        ts.weeks += floor(ts.days / DAYS_PER_WEEK);
+        ts.days %= DAYS_PER_WEEK;
+      }
+  
+      if (ts.months < 0) {
+        // ripple years down to months
+        x = ceil(-ts.months / MONTHS_PER_YEAR);
+        ts.years -= x;
+        ts.months += x * MONTHS_PER_YEAR;
+  
+      } else if (ts.months >= MONTHS_PER_YEAR) {
+        // ripple months up to years
+        ts.years += floor(ts.months / MONTHS_PER_YEAR);
+        ts.months %= MONTHS_PER_YEAR;
+      }
+  
+      // years is always non-negative here
+      // decades, centuries and millennia are always zero here
+  
+      if (ts.years >= YEARS_PER_DECADE) {
+        // ripple years up to decades
+        ts.decades += floor(ts.years / YEARS_PER_DECADE);
+        ts.years %= YEARS_PER_DECADE;
+  
+        if (ts.decades >= DECADES_PER_CENTURY) {
+          // ripple decades up to centuries
+          ts.centuries += floor(ts.decades / DECADES_PER_CENTURY);
+          ts.decades %= DECADES_PER_CENTURY;
+  
+          if (ts.centuries >= CENTURIES_PER_MILLENNIUM) {
+            // ripple centuries up to millennia
+            ts.millennia += floor(ts.centuries / CENTURIES_PER_MILLENNIUM);
+            ts.centuries %= CENTURIES_PER_MILLENNIUM;
+          }
+        }
+      }
+    }
+  
+    /**
+     * Remove any units not requested
+     * 
+     * @private
+     * @param {Timespan} ts
+     * @param {number} units the units to populate
+     * @param {number} max number of labels to output
+     * @param {number} digits max number of decimal digits to output
+     */
+    function pruneUnits(ts, units, max, digits) {
+      var count = 0;
+  
+      // Calc from largest unit to smallest to prevent underflow
+      if (!(units & MILLENNIA) || (count >= max)) {
+        // ripple millennia down to centuries
+        ts.centuries += ts.millennia * CENTURIES_PER_MILLENNIUM;
+        delete ts.millennia;
+  
+      } else if (ts.millennia) {
+        count++;
+      }
+  
+      if (!(units & CENTURIES) || (count >= max)) {
+        // ripple centuries down to decades
+        ts.decades += ts.centuries * DECADES_PER_CENTURY;
+        delete ts.centuries;
+  
+      } else if (ts.centuries) {
+        count++;
+      }
+  
+      if (!(units & DECADES) || (count >= max)) {
+        // ripple decades down to years
+        ts.years += ts.decades * YEARS_PER_DECADE;
+        delete ts.decades;
+  
+      } else if (ts.decades) {
+        count++;
+      }
+  
+      if (!(units & YEARS) || (count >= max)) {
+        // ripple years down to months
+        ts.months += ts.years * MONTHS_PER_YEAR;
+        delete ts.years;
+  
+      } else if (ts.years) {
+        count++;
+      }
+  
+      if (!(units & MONTHS) || (count >= max)) {
+        // ripple months down to days
+        if (ts.months) {
+          ts.days += borrowMonths(ts.refMonth, ts.months);
+        }
+        delete ts.months;
+  
+        if (ts.days >= DAYS_PER_WEEK) {
+          // ripple day overflow back up to weeks
+          ts.weeks += floor(ts.days / DAYS_PER_WEEK);
+          ts.days %= DAYS_PER_WEEK;
+        }
+  
+      } else if (ts.months) {
+        count++;
+      }
+  
+      if (!(units & WEEKS) || (count >= max)) {
+        // ripple weeks down to days
+        ts.days += ts.weeks * DAYS_PER_WEEK;
+        delete ts.weeks;
+  
+      } else if (ts.weeks) {
+        count++;
+      }
+  
+      if (!(units & DAYS) || (count >= max)) {
+        //ripple days down to hours
+        ts.hours += ts.days * HOURS_PER_DAY;
+        delete ts.days;
+  
+      } else if (ts.days) {
+        count++;
+      }
+  
+      if (!(units & HOURS) || (count >= max)) {
+        // ripple hours down to minutes
+        ts.minutes += ts.hours * MINUTES_PER_HOUR;
+        delete ts.hours;
+  
+      } else if (ts.hours) {
+        count++;
+      }
+  
+      if (!(units & MINUTES) || (count >= max)) {
+        // ripple minutes down to seconds
+        ts.seconds += ts.minutes * SECONDS_PER_MINUTE;
+        delete ts.minutes;
+  
+      } else if (ts.minutes) {
+        count++;
+      }
+  
+      if (!(units & SECONDS) || (count >= max)) {
+        // ripple seconds down to milliseconds
+        ts.milliseconds += ts.seconds * MILLISECONDS_PER_SECOND;
+        delete ts.seconds;
+  
+      } else if (ts.seconds) {
+        count++;
+      }
+  
+      // nothing to ripple milliseconds down to
+      // so ripple back up to smallest existing unit as a fractional value
+      if (!(units & MILLISECONDS) || (count >= max)) {
+        fractional(ts, digits);
+      }
+    }
+  
+    /**
+     * Populates the Timespan object
+     * 
+     * @private
+     * @param {Timespan} ts
+     * @param {?Date} start the starting date
+     * @param {?Date} end the ending date
+     * @param {number} units the units to populate
+     * @param {number} max number of labels to output
+     * @param {number} digits max number of decimal digits to output
+     */
+    function populate(ts, start, end, units, max, digits) {
+      var now = new Date();
+  
+      ts.start = start = start || now;
+      ts.end = end = end || now;
+      ts.units = units;
+  
+      ts.value = end.getTime() - start.getTime();
+      if (ts.value < 0) {
+        // swap if reversed
+        var tmp = end;
+        end = start;
+        start = tmp;
+      }
+  
+      // reference month for determining days in month
+      ts.refMonth = new Date(start.getFullYear(), start.getMonth(), 15, 12, 0, 0);
+      try {
+        // reset to initial deltas
+        ts.millennia = 0;
+        ts.centuries = 0;
+        ts.decades = 0;
+        ts.years = end.getFullYear() - start.getFullYear();
+        ts.months = end.getMonth() - start.getMonth();
+        ts.weeks = 0;
+        ts.days = end.getDate() - start.getDate();
+        ts.hours = end.getHours() - start.getHours();
+        ts.minutes = end.getMinutes() - start.getMinutes();
+        ts.seconds = end.getSeconds() - start.getSeconds();
+        ts.milliseconds = end.getMilliseconds() - start.getMilliseconds();
+  
+        ripple(ts);
+        pruneUnits(ts, units, max, digits);
+  
+      } finally {
+        delete ts.refMonth;
+      }
+  
+      return ts;
+    }
+  
+    /**
+     * Determine an appropriate refresh rate based upon units
+     * 
+     * @private
+     * @param {number} units the units to populate
+     * @return {number} milliseconds to delay
+     */
+    function getDelay(units) {
+      if (units & MILLISECONDS) {
+        // refresh very quickly
+        return MILLISECONDS_PER_SECOND / 30; //30Hz
+      }
+  
+      if (units & SECONDS) {
+        // refresh every second
+        return MILLISECONDS_PER_SECOND; //1Hz
+      }
+  
+      if (units & MINUTES) {
+        // refresh every minute
+        return MILLISECONDS_PER_SECOND * SECONDS_PER_MINUTE;
+      }
+  
+      if (units & HOURS) {
+        // refresh hourly
+        return MILLISECONDS_PER_SECOND * SECONDS_PER_MINUTE * MINUTES_PER_HOUR;
+      }
+      
+      if (units & DAYS) {
+        // refresh daily
+        return MILLISECONDS_PER_SECOND * SECONDS_PER_MINUTE * MINUTES_PER_HOUR * HOURS_PER_DAY;
+      }
+  
+      // refresh the rest weekly
+      return MILLISECONDS_PER_SECOND * SECONDS_PER_MINUTE * MINUTES_PER_HOUR * HOURS_PER_DAY * DAYS_PER_WEEK;
+    }
+  
+    /**
+     * API entry point
+     * 
+     * @public
+     * @param {Date|number|Timespan|null|function(Timespan,number)} start the starting date
+     * @param {Date|number|Timespan|null|function(Timespan,number)} end the ending date
+     * @param {number=} units the units to populate
+     * @param {number=} max number of labels to output
+     * @param {number=} digits max number of decimal digits to output
+     * @return {Timespan|number}
+     */
+    function countdown(start, end, units, max, digits) {
+      var callback;
+  
+      // ensure some units or use defaults
+      units = +units || DEFAULTS;
+      // max must be positive
+      max = (max > 0) ? max : NaN;
+      // clamp digits to an integer between [0, 20]
+      digits = (digits > 0) ? (digits < 20) ? Math.round(digits) : 20 : 0;
+  
+      // ensure start date
+      var startTS = null;
+      if ('function' === typeof start) {
+        callback = start;
+        start = null;
+  
+      } else if (!(start instanceof Date)) {
+        if ((start !== null) && isFinite(start)) {
+          start = new Date(+start);
+        } else {
+          if ('object' === typeof startTS) {
+            startTS = /** @type{Timespan} */(start);
+          }
+          start = null;
+        }
+      }
+  
+      // ensure end date
+      var endTS = null;
+      if ('function' === typeof end) {
+        callback = end;
+        end = null;
+  
+      } else if (!(end instanceof Date)) {
+        if ((end !== null) && isFinite(end)) {
+          end = new Date(+end);
+        } else {
+          if ('object' === typeof end) {
+            endTS = /** @type{Timespan} */(end);
+          }
+          end = null;
+        }
+      }
+  
+      // must wait to interpret timespans until after resolving dates
+      if (startTS) {
+        start = addToDate(startTS, end);
+      }
+      if (endTS) {
+        end = addToDate(endTS, start);
+      }
+  
+      if (!start && !end) {
+        // used for unit testing
+        return new Timespan();
+      }
+  
+      if (!callback) {
+        return populate(new Timespan(), /** @type{Date} */(start), /** @type{Date} */(end), /** @type{number} */(units), /** @type{number} */(max), /** @type{number} */(digits));
+      }
+  
+      // base delay off units
+      var delay = getDelay(units),
+        timerId,
+        fn = function() {
+          callback(
+            populate(new Timespan(), /** @type{Date} */(start), /** @type{Date} */(end), /** @type{number} */(units), /** @type{number} */(max), /** @type{number} */(digits)),
+            timerId
+          );
+        };
+  
+      fn();
+      return (timerId = setInterval(fn, delay));
+    }
+  
+    /**
+     * @public
+     * @const
+     * @type {number}
+     */
+    countdown.MILLISECONDS = MILLISECONDS;
+  
+    /**
+     * @public
+     * @const
+     * @type {number}
+     */
+    countdown.SECONDS = SECONDS;
+  
+    /**
+     * @public
+     * @const
+     * @type {number}
+     */
+    countdown.MINUTES = MINUTES;
+  
+    /**
+     * @public
+     * @const
+     * @type {number}
+     */
+    countdown.HOURS = HOURS;
+  
+    /**
+     * @public
+     * @const
+     * @type {number}
+     */
+    countdown.DAYS = DAYS;
+  
+    /**
+     * @public
+     * @const
+     * @type {number}
+     */
+    countdown.WEEKS = WEEKS;
+  
+    /**
+     * @public
+     * @const
+     * @type {number}
+     */
+    countdown.MONTHS = MONTHS;
+  
+    /**
+     * @public
+     * @const
+     * @type {number}
+     */
+    countdown.YEARS = YEARS;
+  
+    /**
+     * @public
+     * @const
+     * @type {number}
+     */
+    countdown.DECADES = DECADES;
+  
+    /**
+     * @public
+     * @const
+     * @type {number}
+     */
+    countdown.CENTURIES = CENTURIES;
+  
+    /**
+     * @public
+     * @const
+     * @type {number}
+     */
+    countdown.MILLENNIA = MILLENNIA;
+  
+    /**
+     * @public
+     * @const
+     * @type {number}
+     */
+    countdown.DEFAULTS = DEFAULTS;
+  
+    /**
+     * @public
+     * @const
+     * @type {number}
+     */
+    countdown.ALL = MILLENNIA|CENTURIES|DECADES|YEARS|MONTHS|WEEKS|DAYS|HOURS|MINUTES|SECONDS|MILLISECONDS;
+  
+    /**
+     * Customize the format settings.
+     * @public
+     * @param {Object} format settings object
+     */
+    var setFormat = countdown.setFormat = function(format) {
+      if (!format) { return; }
+  
+      if ('singular' in format || 'plural' in format) {
+        var singular = format.singular || [];
+        if (singular.split) {
+          singular = singular.split('|');
+        }
+        var plural = format.plural || [];
+        if (plural.split) {
+          plural = plural.split('|');
+        }
+  
+        for (var i=LABEL_MILLISECONDS; i<=LABEL_MILLENNIA; i++) {
+          // override any specified units
+          LABELS_SINGLUAR[i] = singular[i] || LABELS_SINGLUAR[i];
+          LABELS_PLURAL[i] = plural[i] || LABELS_PLURAL[i];
+        }
+      }
+  
+      if ('string' === typeof format.last) {
+        LABEL_LAST = format.last;
+      }
+      if ('string' === typeof format.delim) {
+        LABEL_DELIM = format.delim;
+      }
+      if ('string' === typeof format.empty) {
+        LABEL_NOW = format.empty;
+      }
+      if ('function' === typeof format.formatNumber) {
+        formatNumber = format.formatNumber;
+      }
+      if ('function' === typeof format.formatter) {
+        formatter = format.formatter;
+      }
+    };
+  
+    /**
+     * Revert to the default formatting.
+     * @public
+     */
+    var resetFormat = countdown.resetFormat = function() {
+      LABELS_SINGLUAR = ' millisecond| second| minute| hour| day| week| month| year| decade| century| millennium'.split('|');
+      LABELS_PLURAL = ' milliseconds| seconds| minutes| hours| days| weeks| months| years| decades| centuries| millennia'.split('|');
+      LABEL_LAST = ' and ';
+      LABEL_DELIM = ', ';
+      LABEL_NOW = '';
+      formatNumber = function(value) { return value; };
+      formatter = plurality;
+    };
+  
+    /**
+     * Override the unit labels.
+     * @public
+     * @param {string|Array=} singular a pipe ('|') delimited list of singular unit name overrides
+     * @param {string|Array=} plural a pipe ('|') delimited list of plural unit name overrides
+     * @param {string=} last a delimiter before the last unit (default: ' and ')
+     * @param {string=} delim a delimiter to use between all other units (default: ', ')
+     * @param {string=} empty a label to use when all units are zero (default: '')
+     * @param {function(number):string=} formatNumber a function which formats numbers as a string
+     * @param {function(number,number):string=} formatter a function which formats a number/unit pair as a string
+     * @deprecated since version 2.6.0
+     */
+    countdown.setLabels = function(singular, plural, last, delim, empty, formatNumber, formatter) {
+      setFormat({
+        singular: singular,
+        plural: plural,
+        last: last,
+        delim: delim,
+        empty: empty,
+        formatNumber: formatNumber,
+        formatter: formatter
+      });
+    };
+  
+    /**
+     * Revert to the default unit labels.
+     * @public
+     * @deprecated since version 2.6.0
+     */
+    countdown.resetLabels = resetFormat;
+  
+    resetFormat();
+  
+    if (typeof module !== 'undefined' && module.exports) {
+      module.exports = countdown;
+  
+    } else if (typeof window !== 'undefined' && typeof window.define === 'function' && typeof window.define.amd !== 'undefined') {
+      window.define('countdown', [], function() {
+        return countdown;
+      });
+    }
+  
+    return countdown;
+  
+  })();
+  
\ No newline at end of file
diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
index 18e4830c7..03286dc12 100644
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
@@ -47,20 +47,34 @@
           </div>
         </div>
         <div class="item" *ngIf="showHalving">
-          <h5 class="card-title" i18n="difficulty-box.next-halving" i18n-ngbTooltip="difficulty-box.next-halving"
-          ngbTooltip="Next Halving" placement="bottom" #averagefee [disableTooltip]="!isEllipsisActive(averagefee)">Next Halving</h5>
-          <div class="card-text">
-            <ng-container *ngTemplateOutlet="epochData.blocksUntilHalving === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.blocksUntilHalving }"></ng-container>
-            <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
-            <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
+          <h5 class="card-title" i18n="difficulty-box.next-halving">Next Halving</h5>
+          <div class="card-text" i18n-ngbTooltip="mining.average-fee" [ngbTooltip]="halvingBlocksLeft" [tooltipContext]="{ epochData: epochData }" placement="bottom">
+            <span>{{ timeUntilHalving | date }}</span>
+            <div class="symbol" *ngIf="!countdownObject; else countdownValid">
+              <app-time kind="until" [time]="epochData.timeAvg + now" [fastRender]="false" [fixedRender]="true" [precision]="1" minUnit="minute"></app-time>
+            </div>
+            <ng-template #countdownValid>
+              <div class="symbol">
+                <span>In </span>
+                <span *ngIf="countdownObject.years">{{ countdownObject.years }} years </span>
+                <span *ngIf="countdownObject.months">{{ countdownObject.months }} months </span>
+                <span *ngIf="countdownObject.days">{{ countdownObject.days }} days </span>
+                <span *ngIf="countdownObject.hours">{{ countdownObject.hours }} hours</span>
+              </div>
+            </ng-template>
+          </div>
           </div>
-          <div class="symbol"><app-time kind="until" [time]="epochData.timeUntilHalving" [fastRender]="true" [precision]="1"></app-time></div>
-        </div>
       </div>
     </div>
   </div>
 </div>
 
+<ng-template #halvingBlocksLeft let-epochData="epochData">
+  <ng-container *ngTemplateOutlet="epochData.blocksUntilHalving === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.blocksUntilHalving }"></ng-container>
+  <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
+  <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
+</ng-template>
+
 <ng-template #loadingDifficulty>
   <div class="difficulty-skeleton loading-container">
     <div class="item">
diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
index c23d7d4b9..543266531 100644
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { combineLatest, Observable, timer } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
+import { combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { StateService } from '../../services/state.service';
+const countdown = require('./countdown');
 
 interface EpochProgress {
   base: string;
@@ -15,6 +16,7 @@ interface EpochProgress {
   previousRetarget: number;
   blocksUntilHalving: number;
   timeUntilHalving: number;
+  timeAvg: number;
 }
 
 @Component({
@@ -26,6 +28,9 @@ interface EpochProgress {
 export class DifficultyMiningComponent implements OnInit {
   isLoadingWebSocket$: Observable<boolean>;
   difficultyEpoch$: Observable<EpochProgress>;
+  countdownObject = null;
+  timeUntilHalving = 0;
+  now = new Date().getTime();
 
   @Input() showProgress = true;
   @Input() showHalving = false;
@@ -65,7 +70,20 @@ export class DifficultyMiningComponent implements OnInit {
         }
 
         const blocksUntilHalving = 210000 - (maxHeight % 210000);
-        const timeUntilHalving = new Date().getTime() + (blocksUntilHalving * 600000);
+        this.timeUntilHalving = new Date().getTime() + (blocksUntilHalving * 600000);
+        this.now = new Date().getTime();
+        
+        if (blocksUntilHalving - 1 === 0) {
+          this.countdownObject = null;
+        } else {
+          this.countdownObject = countdown(this.timeUntilHalving, new Date().getTime(), countdown.YEARS | countdown.MONTHS);
+          if (this.countdownObject.years === 0) {
+            this.countdownObject = countdown(this.timeUntilHalving, new Date().getTime(), countdown.DAYS | countdown.HOURS);
+          }
+          if (this.countdownObject.hours === 0) {
+            this.countdownObject = countdown(this.timeUntilHalving, new Date().getTime(), countdown.MINUTES);
+          }
+        }
 
         const data = {
           base: `${da.progressPercent.toFixed(2)}%`,
@@ -78,7 +96,8 @@ export class DifficultyMiningComponent implements OnInit {
           estimatedRetargetDate: da.estimatedRetargetDate,
           previousRetarget: da.previousRetarget,
           blocksUntilHalving,
-          timeUntilHalving,
+          timeUntilHalving: this.timeUntilHalving,
+          timeAvg: da.timeAvg,
         };
         return data;
       })

From a79e1aec1cd518906f9ee031cdf6c90d4ce46f44 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 27 Jan 2024 16:45:18 +0000
Subject: [PATCH 26/92] Fix acceleration list css, move to /acceleration/list

---
 .../acceleration-fees-graph.component.ts      |   2 +-
 .../accelerations-list.component.scss         | 106 ++++++++++--------
 .../accelerator-dashboard.component.html      |   2 +-
 .../src/app/graphs/graphs.routing.module.ts   |   2 +-
 4 files changed, 64 insertions(+), 48 deletions(-)

diff --git a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
index 59bca27d4..d75cbba2d 100644
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
@@ -66,7 +66,6 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.seoService.setTitle($localize`:@@bcf34abc2d9ed8f45a2f65dd464c46694e9a181e:Acceleration Fees`);
     this.isLoading = true;
     if (this.widget) {
       this.miningWindowPreference = '1m';
@@ -86,6 +85,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
         }),
       );
     } else {
+      this.seoService.setTitle($localize`:@@bcf34abc2d9ed8f45a2f65dd464c46694e9a181e:Acceleration Fees`);
       this.miningWindowPreference = this.miningService.getDefaultTimespan('1w');
       this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
       this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
index 4182abb68..110ff033c 100644
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
@@ -63,66 +63,82 @@ tr, td, th {
 }
 
 .txid {
-  width: 25%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 30%;
-  @media (max-width: 1060px) and (min-width: 768px) {
-    display: none;
-  }
   @media (max-width: 500px) {
     display: none;
   }
 }
 
-.fee-rate {
-  width: 20%;
-  @media (max-width: 1060px) and (min-width: 768px) {
-    text-align: start !important;
-  }
-  @media (max-width: 500px) {
-    text-align: start !important;
-  }
-  @media (max-width: 840px) and (min-width: 768px) {
-    display: none;
-  }
-  @media (max-width: 410px) {
-    display: none;
+.fee, .block, .status {
+  width: 15%;
+
+  @media (max-width: 720px) {
+    width: 20%;
   }
 }
 
-.bid {
-  width: 30%;
-  min-width: 150px;
-  @media (max-width: 840px) and (min-width: 768px) {
-    text-align: start !important;
+.widget {
+  .txid {
+    width: 30%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 30%;
+    @media (max-width: 1060px) and (min-width: 768px) {
+      display: none;
+    }
+    @media (max-width: 500px) {
+      display: none;
+    }
   }
-  @media (max-width: 410px) {
-    text-align: start !important;
+
+  .fee-rate {
+    width: 20%;
+    @media (max-width: 1060px) and (min-width: 768px) {
+      text-align: start !important;
+    }
+    @media (max-width: 500px) {
+      text-align: start !important;
+    }
+    @media (max-width: 840px) and (min-width: 768px) {
+      display: none;
+    }
+    @media (max-width: 410px) {
+      display: none;
+    }
   }
-}
 
-.time {
-  width: 25%;
-}
-
-.fee {
-  width: 35%;
-  @media (max-width: 1060px) and (min-width: 768px) {
-    text-align: start !important;
+  .bid {
+    width: 30%;
+    min-width: 150px;
+    @media (max-width: 840px) and (min-width: 768px) {
+      text-align: start !important;
+    }
+    @media (max-width: 410px) {
+      text-align: start !important;
+    }
   }
-  @media (max-width: 500px) {
-    text-align: start !important;
+
+  .time {
+    width: 25%;
   }
-}
 
-.block {
-  width: 20%;
-}
+  .fee {
+    width: 30%;
+    @media (max-width: 1060px) and (min-width: 768px) {
+      text-align: start !important;
+    }
+    @media (max-width: 500px) {
+      text-align: start !important;
+    }
+  }
 
-.status {
-  width: 20%
+  .block {
+    width: 20%;
+  }
+
+  .status {
+    width: 20%
+  }
 }
 
 /* Tooltip text */
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
index 243a48939..19d01e726 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
@@ -80,7 +80,7 @@
     <div class="col">
       <div class="card list-card">
         <div class="card-body">
-          <a class="title-link" href="" [routerLink]="['/acceleration-list' | relativeUrl]">
+          <a class="title-link" href="" [routerLink]="['/acceleration/list' | relativeUrl]">
             <h5 class="card-title d-inline" i18n="dashboard.recent-accelerations">Recent Accelerations</h5>
             <span>&nbsp;</span>
             <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
diff --git a/frontend/src/app/graphs/graphs.routing.module.ts b/frontend/src/app/graphs/graphs.routing.module.ts
index 0f217eb6e..d3c7a1bce 100644
--- a/frontend/src/app/graphs/graphs.routing.module.ts
+++ b/frontend/src/app/graphs/graphs.routing.module.ts
@@ -52,7 +52,7 @@ const routes: Routes = [
         ]
       },
       {
-        path: 'acceleration-list',
+        path: 'acceleration/list',
         data: { networks: ['bitcoin'] },
         component: AccelerationsListComponent,
       },

From 4e5ebabc540b641db47ed47df802967287c752d3 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 27 Jan 2024 18:03:53 +0000
Subject: [PATCH 27/92] Add beta tag to accelerator dashboard tab

---
 .../components/master-page/master-page.component.html  |  5 ++++-
 .../components/master-page/master-page.component.scss  | 10 +++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index 7d8b37d00..66d8627a8 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -53,7 +53,10 @@
         <a class="nav-link" [routerLink]="['/' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tachometer-alt']" [fixedWidth]="true" i18n-title="master-page.dashboard" title="Dashboard"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" id="btn-home" *ngIf="stateService.env.ACCELERATOR">
-        <a class="nav-link" [routerLink]="['/acceleration' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'rocket']" [fixedWidth]="true" i18n-title="master-page.accelerator-dashboard" title="Accelerator Dashboard"></fa-icon></a>
+        <a class="nav-link" [routerLink]="['/acceleration' | relativeUrl]" (click)="collapse()">
+          <fa-icon [icon]="['fas', 'rocket']" [fixedWidth]="true" i18n-title="master-page.accelerator-dashboard" title="Accelerator Dashboard"></fa-icon>
+          <span class="badge badge-pill badge-warning beta" i18n="beta">beta</span>
+        </a>
       </li>
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" id="btn-pools" *ngIf="stateService.env.MINING_DASHBOARD">
         <a class="nav-link" [routerLink]="['/mining' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'hammer']" [fixedWidth]="true" i18n-title="mining.mining-dashboard" title="Mining Dashboard"></fa-icon></a>
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index e6bfbc9a8..1d437cdaf 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -211,7 +211,15 @@ nav {
   margin: 24px 0px 0px -15px;
   font-size: 8px;
   @media (max-width: 767.98px) {
-    margin: 33px 0px 0px -19px;
+    margin: 30px 0px 0px -19px;
+    font-size: 7px;
+  }
+  @media (max-width: 3429px) {
+    margin: 25px 0px 0px -19px;
+    font-size: 7px;
+  }
+  @media (max-width: 369px) {
+    margin: 20px 0px 0px -19px;
     font-size: 7px;
   }
 }

From 5b93d39d73467c35ef60a05d16697df4c8dc9ef3 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Sat, 27 Jan 2024 19:19:14 +0100
Subject: [PATCH 28/92] Fix duplicate api call to audit status

---
 .../federation-addresses-list.component.ts           | 11 +++++++++--
 .../federation-utxos-list.component.ts               | 11 +++++++++--
 .../reserves-audit-dashboard.component.ts            | 11 +++++++++--
 frontend/src/app/dashboard/dashboard.component.ts    | 12 ++++++++----
 4 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
index 67bb68193..caeac1987 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
-import { Observable, combineLatest, of, timer } from 'rxjs';
-import { delayWhen, filter, map, share, shareReplay, switchMap, tap, throttleTime } from 'rxjs/operators';
+import { 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';
 import { AuditStatus, CurrentPegs, FederationAddress } from '../../../interfaces/node-api.interface';
@@ -30,6 +30,8 @@ export class FederationAddressesListComponent implements OnInit {
   lastPegAmount: string = '';
   isLoad: boolean = true;
 
+  private destroy$ = new Subject();
+
   constructor(
     private apiService: ApiService,
     public stateService: StateService,
@@ -44,6 +46,7 @@ export class FederationAddressesListComponent implements OnInit {
     if (!this.widget) {
       this.websocketService.want(['blocks']);
       this.auditStatus$ = this.stateService.blocks$.pipe(
+        takeUntil(this.destroy$),
         throttleTime(40000),
         delayWhen(_ => this.isLoad ? timer(0) : timer(2000)),
         tap(() => this.isLoad = false),
@@ -92,7 +95,11 @@ export class FederationAddressesListComponent implements OnInit {
       );
     }
 
+  }
 
+  ngOnDestroy(): void {
+    this.destroy$.next(1);
+    this.destroy$.complete();
   }
 
   pageChange(page: number): void {
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
index 39c2c577e..470862c67 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
-import { Observable, combineLatest, of, timer } from 'rxjs';
-import { delayWhen, filter, map, share, shareReplay, switchMap, tap, throttleTime } from 'rxjs/operators';
+import { 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';
 import { AuditStatus, CurrentPegs, FederationUtxo } from '../../../interfaces/node-api.interface';
@@ -30,6 +30,8 @@ export class FederationUtxosListComponent implements OnInit {
   lastPegAmount: string = '';
   isLoad: boolean = true;
 
+  private destroy$ = new Subject();
+
   constructor(
     private apiService: ApiService,
     public stateService: StateService,
@@ -44,6 +46,7 @@ export class FederationUtxosListComponent implements OnInit {
     if (!this.widget) {
       this.websocketService.want(['blocks']);
       this.auditStatus$ = this.stateService.blocks$.pipe(
+        takeUntil(this.destroy$),
         throttleTime(40000),
         delayWhen(_ => this.isLoad ? timer(0) : timer(2000)),
         tap(() => this.isLoad = false),
@@ -92,7 +95,11 @@ export class FederationUtxosListComponent implements OnInit {
       );
     }
 
+  }
 
+  ngOnDestroy(): void {
+    this.destroy$.next(1);
+    this.destroy$.complete();
   }
 
   pageChange(page: number): void {
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
index cb5439165..3009edc46 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { SeoService } from '../../../services/seo.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { StateService } from '../../../services/state.service';
-import { Observable, combineLatest, delayWhen, filter, interval, map, of, share, shareReplay, startWith, switchMap, tap, throttleTime, timer } from 'rxjs';
+import { Observable, Subject, combineLatest, delayWhen, filter, interval, map, of, share, shareReplay, startWith, switchMap, takeUntil, tap, throttleTime, timer } from 'rxjs';
 import { ApiService } from '../../../services/api.service';
 import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo } from '../../../interfaces/node-api.interface';
 
@@ -29,6 +29,7 @@ export class ReservesAuditDashboardComponent implements OnInit {
   private lastPegAmount: string = '';
   private lastReservesBlockUpdate: number = 0;
 
+  private destroy$ = new Subject();
 
   constructor(
     private seoService: SeoService,
@@ -43,11 +44,12 @@ export class ReservesAuditDashboardComponent implements OnInit {
     this.websocketService.want(['blocks', 'mempool-blocks']);
 
     this.auditStatus$ = this.stateService.blocks$.pipe(
+      takeUntil(this.destroy$),
       throttleTime(40000),
       delayWhen(_ => this.isLoad ? timer(0) : timer(2000)),
       tap(() => this.isLoad = false),
       switchMap(() => this.apiService.federationAuditSynced$()),
-      shareReplay(1)
+      shareReplay(1),
     );
 
     this.currentPeg$ = this.auditStatus$.pipe(
@@ -177,4 +179,9 @@ export class ReservesAuditDashboardComponent implements OnInit {
       );
   }
 
+  ngOnDestroy(): void {
+    this.destroy$.next(1);
+    this.destroy$.complete();
+  }
+
 }
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 4ade4a9b3..6e65f2332 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -1,6 +1,6 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
-import { combineLatest, EMPTY, merge, Observable, of, Subscription, timer } from 'rxjs';
-import { catchError, delayWhen, filter, map, scan, share, shareReplay, startWith, switchMap, tap, throttleTime } from 'rxjs/operators';
+import { combineLatest, EMPTY, merge, Observable, of, Subject, Subscription, timer } from 'rxjs';
+import { catchError, delayWhen, filter, map, scan, share, shareReplay, startWith, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
 import { AuditStatus, BlockExtended, CurrentPegs, OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { MempoolInfo, TransactionStripped, ReplacementInfo } from '../interfaces/websocket.interface';
 import { ApiService } from '../services/api.service';
@@ -60,6 +60,8 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   private lastPegAmount: string = '';
   private lastReservesBlockUpdate: number = 0;
 
+  private destroy$ = new Subject();
+
   constructor(
     public stateService: StateService,
     private apiService: ApiService,
@@ -74,6 +76,8 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   ngOnDestroy(): void {
     this.currencySubscription.unsubscribe();
     this.websocketService.stopTrackRbfSummary();
+    this.destroy$.next(1);
+    this.destroy$.complete();
   }
 
   ngOnInit(): void {
@@ -215,12 +219,12 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
 
     if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') {
       this.auditStatus$ = this.stateService.blocks$.pipe(
+        takeUntil(this.destroy$),
         throttleTime(40000),
         delayWhen(_ => this.isLoad ? timer(0) : timer(2000)),
         tap(() => this.isLoad = false),
         switchMap(() => this.apiService.federationAuditSynced$()),
-        shareReplay(1),
-        share()
+        shareReplay(1)
       );
 
       ////////// Pegs historical data //////////

From 09e38ac17754b23b8bc0f601895dfaf8595cd8ba Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 27 Jan 2024 18:22:58 +0000
Subject: [PATCH 29/92] Goggles indexing config & rate limit

---
 backend/mempool-config.sample.json                    | 1 +
 backend/src/__fixtures__/mempool-config.template.json | 1 +
 backend/src/__tests__/config.test.ts                  | 1 +
 backend/src/api/blocks.ts                             | 4 +++-
 backend/src/api/common.ts                             | 7 +++++++
 backend/src/config.ts                                 | 2 ++
 docker/backend/mempool-config.json                    | 1 +
 docker/backend/start.sh                               | 2 ++
 production/mempool-config.mainnet.json                | 1 +
 9 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/backend/mempool-config.sample.json b/backend/mempool-config.sample.json
index 3cb79b909..3c2fccfb7 100644
--- a/backend/mempool-config.sample.json
+++ b/backend/mempool-config.sample.json
@@ -16,6 +16,7 @@
     "MEMPOOL_BLOCKS_AMOUNT": 8,
     "INDEXING_BLOCKS_AMOUNT": 11000,
     "BLOCKS_SUMMARIES_INDEXING": false,
+    "GOGGLES_INDEXING": false,
     "USE_SECOND_NODE_FOR_MINFEE": false,
     "EXTERNAL_ASSETS": [],
     "EXTERNAL_MAX_RETRY": 1,
diff --git a/backend/src/__fixtures__/mempool-config.template.json b/backend/src/__fixtures__/mempool-config.template.json
index 9445fc25d..9ee2bd0bc 100644
--- a/backend/src/__fixtures__/mempool-config.template.json
+++ b/backend/src/__fixtures__/mempool-config.template.json
@@ -4,6 +4,7 @@
     "NETWORK": "__MEMPOOL_NETWORK__",
     "BACKEND": "__MEMPOOL_BACKEND__",
     "BLOCKS_SUMMARIES_INDEXING": true,
+    "GOGGLES_INDEXING": false,
     "HTTP_PORT": 1,
     "SPAWN_CLUSTER_PROCS": 2,
     "API_URL_PREFIX": "__MEMPOOL_API_URL_PREFIX__",
diff --git a/backend/src/__tests__/config.test.ts b/backend/src/__tests__/config.test.ts
index 97c218370..6af0ce32f 100644
--- a/backend/src/__tests__/config.test.ts
+++ b/backend/src/__tests__/config.test.ts
@@ -17,6 +17,7 @@ describe('Mempool Backend Config', () => {
         NETWORK: 'mainnet',
         BACKEND: 'none',
         BLOCKS_SUMMARIES_INDEXING: false,
+        GOGGLES_INDEXING: false,
         HTTP_PORT: 8999,
         SPAWN_CLUSTER_PROCS: 0,
         API_URL_PREFIX: '/api/v1/',
diff --git a/backend/src/api/blocks.ts b/backend/src/api/blocks.ts
index 21818dc62..2cd043fe2 100644
--- a/backend/src/api/blocks.ts
+++ b/backend/src/api/blocks.ts
@@ -566,7 +566,7 @@ class Blocks {
    */
   public async $classifyBlocks(): Promise<void> {
     // classification requires an esplora backend
-    if (!Common.blocksSummariesIndexingEnabled() || config.MEMPOOL.BACKEND !== 'esplora') {
+    if (!Common.gogglesIndexingEnabled() || config.MEMPOOL.BACKEND !== 'esplora') {
       return;
     }
 
@@ -617,6 +617,7 @@ class Blocks {
           // classify
           const { transactions: classifiedTxs } = this.summarizeBlockTransactions(blockHash, cpfpSummary.transactions);
           await BlocksSummariesRepository.$saveTransactions(height, blockHash, classifiedTxs, 1);
+          await Common.sleep$(250);
         }
         if (unclassifiedTemplates[height]) {
           // classify template
@@ -656,6 +657,7 @@ class Blocks {
             });
           }
           await BlocksSummariesRepository.$saveTemplate({ height, template: { id: blockHash, transactions: classifiedTemplate }, version: 1 });
+          await Common.sleep$(250);
         }
       } catch (e) {
         logger.warn(`Failed to classify template or block summary at ${height}`, logger.tags.goggles);
diff --git a/backend/src/api/common.ts b/backend/src/api/common.ts
index 52fa9042b..208c67d70 100644
--- a/backend/src/api/common.ts
+++ b/backend/src/api/common.ts
@@ -508,6 +508,13 @@ export class Common {
     );
   }
 
+  static gogglesIndexingEnabled(): boolean {
+    return (
+      Common.blocksSummariesIndexingEnabled() &&
+      config.MEMPOOL.GOGGLES_INDEXING === true
+    );
+  }
+
   static cpfpIndexingEnabled(): boolean {
     return (
       Common.indexingEnabled() &&
diff --git a/backend/src/config.ts b/backend/src/config.ts
index df1022a67..32a7af3df 100644
--- a/backend/src/config.ts
+++ b/backend/src/config.ts
@@ -20,6 +20,7 @@ interface IConfig {
     MEMPOOL_BLOCKS_AMOUNT: number;
     INDEXING_BLOCKS_AMOUNT: number;
     BLOCKS_SUMMARIES_INDEXING: boolean;
+    GOGGLES_INDEXING: boolean;
     USE_SECOND_NODE_FOR_MINFEE: boolean;
     EXTERNAL_ASSETS: string[];
     EXTERNAL_MAX_RETRY: number;
@@ -175,6 +176,7 @@ const defaults: IConfig = {
     'MEMPOOL_BLOCKS_AMOUNT': 8,
     'INDEXING_BLOCKS_AMOUNT': 11000, // 0 = disable indexing, -1 = index all blocks
     'BLOCKS_SUMMARIES_INDEXING': false,
+    'GOGGLES_INDEXING': false,
     'USE_SECOND_NODE_FOR_MINFEE': false,
     'EXTERNAL_ASSETS': [],
     'EXTERNAL_MAX_RETRY': 1,
diff --git a/docker/backend/mempool-config.json b/docker/backend/mempool-config.json
index c68e37baa..aefb095cf 100644
--- a/docker/backend/mempool-config.json
+++ b/docker/backend/mempool-config.json
@@ -22,6 +22,7 @@
     "STDOUT_LOG_MIN_PRIORITY": "__MEMPOOL_STDOUT_LOG_MIN_PRIORITY__",
     "INDEXING_BLOCKS_AMOUNT": __MEMPOOL_INDEXING_BLOCKS_AMOUNT__,
     "BLOCKS_SUMMARIES_INDEXING": __MEMPOOL_BLOCKS_SUMMARIES_INDEXING__,
+    "GOGGLES_INDEXING": __MEMPOOL_GOGGLES_INDEXING__,
     "AUTOMATIC_BLOCK_REINDEXING": __MEMPOOL_AUTOMATIC_BLOCK_REINDEXING__,
     "AUDIT": __MEMPOOL_AUDIT__,
     "ADVANCED_GBT_AUDIT": __MEMPOOL_ADVANCED_GBT_AUDIT__,
diff --git a/docker/backend/start.sh b/docker/backend/start.sh
index d73ea83fb..ce8f72368 100755
--- a/docker/backend/start.sh
+++ b/docker/backend/start.sh
@@ -17,6 +17,7 @@ __MEMPOOL_INITIAL_BLOCKS_AMOUNT__=${MEMPOOL_INITIAL_BLOCKS_AMOUNT:=8}
 __MEMPOOL_MEMPOOL_BLOCKS_AMOUNT__=${MEMPOOL_MEMPOOL_BLOCKS_AMOUNT:=8}
 __MEMPOOL_INDEXING_BLOCKS_AMOUNT__=${MEMPOOL_INDEXING_BLOCKS_AMOUNT:=11000}
 __MEMPOOL_BLOCKS_SUMMARIES_INDEXING__=${MEMPOOL_BLOCKS_SUMMARIES_INDEXING:=false}
+__MEMPOOL_GOGGLES_INDEXING__=${MEMPOOL_GOGGLES_INDEXING:=false}
 __MEMPOOL_USE_SECOND_NODE_FOR_MINFEE__=${MEMPOOL_USE_SECOND_NODE_FOR_MINFEE:=false}
 __MEMPOOL_EXTERNAL_ASSETS__=${MEMPOOL_EXTERNAL_ASSETS:=[]}
 __MEMPOOL_EXTERNAL_MAX_RETRY__=${MEMPOOL_EXTERNAL_MAX_RETRY:=1}
@@ -170,6 +171,7 @@ sed -i "s!__MEMPOOL_INITIAL_BLOCKS_AMOUNT__!${__MEMPOOL_INITIAL_BLOCKS_AMOUNT__}
 sed -i "s!__MEMPOOL_MEMPOOL_BLOCKS_AMOUNT__!${__MEMPOOL_MEMPOOL_BLOCKS_AMOUNT__}!g" mempool-config.json
 sed -i "s!__MEMPOOL_INDEXING_BLOCKS_AMOUNT__!${__MEMPOOL_INDEXING_BLOCKS_AMOUNT__}!g" mempool-config.json
 sed -i "s!__MEMPOOL_BLOCKS_SUMMARIES_INDEXING__!${__MEMPOOL_BLOCKS_SUMMARIES_INDEXING__}!g" mempool-config.json
+sed -i "s!__MEMPOOL_GOGGLES_INDEXING__!${__MEMPOOL_GOGGLES_INDEXING__}!g" mempool-config.json
 sed -i "s!__MEMPOOL_USE_SECOND_NODE_FOR_MINFEE__!${__MEMPOOL_USE_SECOND_NODE_FOR_MINFEE__}!g" mempool-config.json
 sed -i "s!__MEMPOOL_EXTERNAL_ASSETS__!${__MEMPOOL_EXTERNAL_ASSETS__}!g" mempool-config.json
 sed -i "s!__MEMPOOL_EXTERNAL_MAX_RETRY__!${__MEMPOOL_EXTERNAL_MAX_RETRY__}!g" mempool-config.json
diff --git a/production/mempool-config.mainnet.json b/production/mempool-config.mainnet.json
index e3ce58ceb..100d185b9 100644
--- a/production/mempool-config.mainnet.json
+++ b/production/mempool-config.mainnet.json
@@ -11,6 +11,7 @@
     "POLL_RATE_MS": 1000,
     "INDEXING_BLOCKS_AMOUNT": -1,
     "BLOCKS_SUMMARIES_INDEXING": true,
+    "GOGGLES_INDEXING": true,
     "AUDIT": true,
     "CPFP_INDEXING": true,
     "ADVANCED_GBT_AUDIT": true,

From 87910a6eb78e028d36a6a5989a51bfdac866747e Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 27 Jan 2024 19:11:43 +0000
Subject: [PATCH 30/92] Display halving countdown with double units

---
 .../components/difficulty-mining/countdown.js | 1358 -----------------
 .../difficulty-mining.component.html          |   10 +-
 .../difficulty-mining.component.ts            |   21 +-
 .../src/app/components/time/time.component.ts |  216 +--
 4 files changed, 126 insertions(+), 1479 deletions(-)
 delete mode 100644 frontend/src/app/components/difficulty-mining/countdown.js

diff --git a/frontend/src/app/components/difficulty-mining/countdown.js b/frontend/src/app/components/difficulty-mining/countdown.js
deleted file mode 100644
index 60909abb9..000000000
--- a/frontend/src/app/components/difficulty-mining/countdown.js
+++ /dev/null
@@ -1,1358 +0,0 @@
-/*global window module */
-/**
- * @license countdown.js v2.6.1 http://countdownjs.org
- * Copyright (c)2006-2014 Stephen M. McKamey.
- * Licensed under The MIT License.
- */
-/*jshint bitwise:false */
-
-/**
- * API entry
- * @public
- * @param {function(Object)|Date|number} start the starting date
- * @param {function(Object)|Date|number} end the ending date
- * @param {number} units the units to populate
- * @return {Object|number}
- */
-var countdown = (
-
-  function() {
-    /*jshint smarttabs:true */
-  
-    'use strict';
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var MILLISECONDS	= 0x001;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var SECONDS			= 0x002;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var MINUTES			= 0x004;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var HOURS			= 0x008;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var DAYS			= 0x010;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var WEEKS			= 0x020;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var MONTHS			= 0x040;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var YEARS			= 0x080;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var DECADES			= 0x100;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var CENTURIES		= 0x200;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var MILLENNIA		= 0x400;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var DEFAULTS		= YEARS|MONTHS|DAYS|HOURS|MINUTES|SECONDS;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var MILLISECONDS_PER_SECOND = 1000;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var SECONDS_PER_MINUTE = 60;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var MINUTES_PER_HOUR = 60;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var HOURS_PER_DAY = 24;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var MILLISECONDS_PER_DAY = HOURS_PER_DAY * MINUTES_PER_HOUR * SECONDS_PER_MINUTE * MILLISECONDS_PER_SECOND;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var DAYS_PER_WEEK = 7;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var MONTHS_PER_YEAR = 12;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var YEARS_PER_DECADE = 10;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var DECADES_PER_CENTURY = 10;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var CENTURIES_PER_MILLENNIUM = 10;
-  
-    /**
-     * @private
-     * @param {number} x number
-     * @return {number}
-     */
-    var ceil = Math.ceil;
-  
-    /**
-     * @private
-     * @param {number} x number
-     * @return {number}
-     */
-    var floor = Math.floor;
-  
-    /**
-     * @private
-     * @param {Date} ref reference date
-     * @param {number} shift number of months to shift
-     * @return {number} number of days shifted
-     */
-    function borrowMonths(ref, shift) {
-      var prevTime = ref.getTime();
-  
-      // increment month by shift
-      ref.setMonth( ref.getMonth() + shift );
-  
-      // this is the trickiest since months vary in length
-      return Math.round( (ref.getTime() - prevTime) / MILLISECONDS_PER_DAY );
-    }
-  
-    /**
-     * @private
-     * @param {Date} ref reference date
-     * @return {number} number of days
-     */
-    function daysPerMonth(ref) {
-      var a = ref.getTime();
-  
-      // increment month by 1
-      var b = new Date(a);
-      b.setMonth( ref.getMonth() + 1 );
-  
-      // this is the trickiest since months vary in length
-      return Math.round( (b.getTime() - a) / MILLISECONDS_PER_DAY );
-    }
-  
-    /**
-     * @private
-     * @param {Date} ref reference date
-     * @return {number} number of days
-     */
-    function daysPerYear(ref) {
-      var a = ref.getTime();
-  
-      // increment year by 1
-      var b = new Date(a);
-      b.setFullYear( ref.getFullYear() + 1 );
-  
-      // this is the trickiest since years (periodically) vary in length
-      return Math.round( (b.getTime() - a) / MILLISECONDS_PER_DAY );
-    }
-  
-    /**
-     * Applies the Timespan to the given date.
-     * 
-     * @private
-     * @param {Timespan} ts
-     * @param {Date=} date
-     * @return {Date}
-     */
-    function addToDate(ts, date) {
-      date = (date instanceof Date) || ((date !== null) && isFinite(date)) ? new Date(+date) : new Date();
-      if (!ts) {
-        return date;
-      }
-  
-      // if there is a value field, use it directly
-      var value = +ts.value || 0;
-      if (value) {
-        date.setTime(date.getTime() + value);
-        return date;
-      }
-  
-      value = +ts.milliseconds || 0;
-      if (value) {
-        date.setMilliseconds(date.getMilliseconds() + value);
-      }
-  
-      value = +ts.seconds || 0;
-      if (value) {
-        date.setSeconds(date.getSeconds() + value);
-      }
-  
-      value = +ts.minutes || 0;
-      if (value) {
-        date.setMinutes(date.getMinutes() + value);
-      }
-  
-      value = +ts.hours || 0;
-      if (value) {
-        date.setHours(date.getHours() + value);
-      }
-  
-      value = +ts.weeks || 0;
-      if (value) {
-        value *= DAYS_PER_WEEK;
-      }
-  
-      value += +ts.days || 0;
-      if (value) {
-        date.setDate(date.getDate() + value);
-      }
-  
-      value = +ts.months || 0;
-      if (value) {
-        date.setMonth(date.getMonth() + value);
-      }
-  
-      value = +ts.millennia || 0;
-      if (value) {
-        value *= CENTURIES_PER_MILLENNIUM;
-      }
-  
-      value += +ts.centuries || 0;
-      if (value) {
-        value *= DECADES_PER_CENTURY;
-      }
-  
-      value += +ts.decades || 0;
-      if (value) {
-        value *= YEARS_PER_DECADE;
-      }
-  
-      value += +ts.years || 0;
-      if (value) {
-        date.setFullYear(date.getFullYear() + value);
-      }
-  
-      return date;
-    }
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var LABEL_MILLISECONDS	= 0;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var LABEL_SECONDS		= 1;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var LABEL_MINUTES		= 2;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var LABEL_HOURS			= 3;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var LABEL_DAYS			= 4;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var LABEL_WEEKS			= 5;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var LABEL_MONTHS		= 6;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var LABEL_YEARS			= 7;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var LABEL_DECADES		= 8;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var LABEL_CENTURIES		= 9;
-  
-    /**
-     * @private
-     * @const
-     * @type {number}
-     */
-    var LABEL_MILLENNIA		= 10;
-  
-    /**
-     * @private
-     * @type {Array}
-     */
-    var LABELS_SINGLUAR;
-  
-    /**
-     * @private
-     * @type {Array}
-     */
-    var LABELS_PLURAL;
-  
-    /**
-     * @private
-     * @type {string}
-     */
-    var LABEL_LAST;
-  
-    /**
-     * @private
-     * @type {string}
-     */
-    var LABEL_DELIM;
-  
-    /**
-     * @private
-     * @type {string}
-     */
-    var LABEL_NOW;
-  
-    /**
-     * Formats a number & unit as a string
-     * 
-     * @param {number} value
-     * @param {number} unit
-     * @return {string}
-     */
-    var formatter;
-  
-    /**
-     * Formats a number as a string
-     * 
-     * @private
-     * @param {number} value
-     * @return {string}
-     */
-    var formatNumber;
-  
-    /**
-     * @private
-     * @param {number} value
-     * @param {number} unit unit index into label list
-     * @return {string}
-     */
-    function plurality(value, unit) {
-      return formatNumber(value)+((value === 1) ? LABELS_SINGLUAR[unit] : LABELS_PLURAL[unit]);
-    }
-  
-    /**
-     * Formats the entries with singular or plural labels
-     * 
-     * @private
-     * @param {Timespan} ts
-     * @return {Array}
-     */
-    var formatList;
-  
-    /**
-     * Timespan representation of a duration of time
-     * 
-     * @private
-     * @this {Timespan}
-     * @constructor
-     */
-    function Timespan() {}
-  
-    /**
-     * Formats the Timespan as a sentence
-     * 
-     * @param {string=} emptyLabel the string to use when no values returned
-     * @return {string}
-     */
-    Timespan.prototype.toString = function(emptyLabel) {
-      var label = formatList(this);
-  
-      var count = label.length;
-      if (!count) {
-        return emptyLabel ? ''+emptyLabel : LABEL_NOW;
-      }
-      if (count === 1) {
-        return label[0];
-      }
-  
-      var last = LABEL_LAST+label.pop();
-      return label.join(LABEL_DELIM)+last;
-    };
-  
-    /**
-     * Formats the Timespan as a sentence in HTML
-     * 
-     * @param {string=} tag HTML tag name to wrap each value
-     * @param {string=} emptyLabel the string to use when no values returned
-     * @return {string}
-     */
-    Timespan.prototype.toHTML = function(tag, emptyLabel) {
-      tag = tag || 'span';
-      var label = formatList(this);
-  
-      var count = label.length;
-      if (!count) {
-        emptyLabel = emptyLabel || LABEL_NOW;
-        return emptyLabel ? '<'+tag+'>'+emptyLabel+'</'+tag+'>' : emptyLabel;
-      }
-      for (var i=0; i<count; i++) {
-        // wrap each unit in tag
-        label[i] = '<'+tag+'>'+label[i]+'</'+tag+'>';
-      }
-      if (count === 1) {
-        return label[0];
-      }
-  
-      var last = LABEL_LAST+label.pop();
-      return label.join(LABEL_DELIM)+last;
-    };
-  
-    /**
-     * Applies the Timespan to the given date
-     * 
-     * @param {Date=} date the date to which the timespan is added.
-     * @return {Date}
-     */
-    Timespan.prototype.addTo = function(date) {
-      return addToDate(this, date);
-    };
-  
-    /**
-     * Formats the entries as English labels
-     * 
-     * @private
-     * @param {Timespan} ts
-     * @return {Array}
-     */
-    formatList = function(ts) {
-      var list = [];
-  
-      var value = ts.millennia;
-      if (value) {
-        list.push(formatter(value, LABEL_MILLENNIA));
-      }
-  
-      value = ts.centuries;
-      if (value) {
-        list.push(formatter(value, LABEL_CENTURIES));
-      }
-  
-      value = ts.decades;
-      if (value) {
-        list.push(formatter(value, LABEL_DECADES));
-      }
-  
-      value = ts.years;
-      if (value) {
-        list.push(formatter(value, LABEL_YEARS));
-      }
-  
-      value = ts.months;
-      if (value) {
-        list.push(formatter(value, LABEL_MONTHS));
-      }
-  
-      value = ts.weeks;
-      if (value) {
-        list.push(formatter(value, LABEL_WEEKS));
-      }
-  
-      value = ts.days;
-      if (value) {
-        list.push(formatter(value, LABEL_DAYS));
-      }
-  
-      value = ts.hours;
-      if (value) {
-        list.push(formatter(value, LABEL_HOURS));
-      }
-  
-      value = ts.minutes;
-      if (value) {
-        list.push(formatter(value, LABEL_MINUTES));
-      }
-  
-      value = ts.seconds;
-      if (value) {
-        list.push(formatter(value, LABEL_SECONDS));
-      }
-  
-      value = ts.milliseconds;
-      if (value) {
-        list.push(formatter(value, LABEL_MILLISECONDS));
-      }
-  
-      return list;
-    };
-  
-    /**
-     * Borrow any underflow units, carry any overflow units
-     * 
-     * @private
-     * @param {Timespan} ts
-     * @param {string} toUnit
-     */
-    function rippleRounded(ts, toUnit) {
-      switch (toUnit) {
-        case 'seconds':
-          if (ts.seconds !== SECONDS_PER_MINUTE || isNaN(ts.minutes)) {
-            return;
-          }
-          // ripple seconds up to minutes
-          ts.minutes++;
-          ts.seconds = 0;
-  
-          /* falls through */
-        case 'minutes':
-          if (ts.minutes !== MINUTES_PER_HOUR || isNaN(ts.hours)) {
-            return;
-          }
-          // ripple minutes up to hours
-          ts.hours++;
-          ts.minutes = 0;
-  
-          /* falls through */
-        case 'hours':
-          if (ts.hours !== HOURS_PER_DAY || isNaN(ts.days)) {
-            return;
-          }
-          // ripple hours up to days
-          ts.days++;
-          ts.hours = 0;
-  
-          /* falls through */
-        case 'days':
-          if (ts.days !== DAYS_PER_WEEK || isNaN(ts.weeks)) {
-            return;
-          }
-          // ripple days up to weeks
-          ts.weeks++;
-          ts.days = 0;
-  
-          /* falls through */
-        case 'weeks':
-          if (ts.weeks !== daysPerMonth(ts.refMonth)/DAYS_PER_WEEK || isNaN(ts.months)) {
-            return;
-          }
-          // ripple weeks up to months
-          ts.months++;
-          ts.weeks = 0;
-  
-          /* falls through */
-        case 'months':
-          if (ts.months !== MONTHS_PER_YEAR || isNaN(ts.years)) {
-            return;
-          }
-          // ripple months up to years
-          ts.years++;
-          ts.months = 0;
-  
-          /* falls through */
-        case 'years':
-          if (ts.years !== YEARS_PER_DECADE || isNaN(ts.decades)) {
-            return;
-          }
-          // ripple years up to decades
-          ts.decades++;
-          ts.years = 0;
-  
-          /* falls through */
-        case 'decades':
-          if (ts.decades !== DECADES_PER_CENTURY || isNaN(ts.centuries)) {
-            return;
-          }
-          // ripple decades up to centuries
-          ts.centuries++;
-          ts.decades = 0;
-  
-          /* falls through */
-        case 'centuries':
-          if (ts.centuries !== CENTURIES_PER_MILLENNIUM || isNaN(ts.millennia)) {
-            return;
-          }
-          // ripple centuries up to millennia
-          ts.millennia++;
-          ts.centuries = 0;
-          /* falls through */
-        }
-    }
-  
-    /**
-     * Ripple up partial units one place
-     * 
-     * @private
-     * @param {Timespan} ts timespan
-     * @param {number} frac accumulated fractional value
-     * @param {string} fromUnit source unit name
-     * @param {string} toUnit target unit name
-     * @param {number} conversion multiplier between units
-     * @param {number} digits max number of decimal digits to output
-     * @return {number} new fractional value
-     */
-    function fraction(ts, frac, fromUnit, toUnit, conversion, digits) {
-      if (ts[fromUnit] >= 0) {
-        frac += ts[fromUnit];
-        delete ts[fromUnit];
-      }
-  
-      frac /= conversion;
-      if (frac + 1 <= 1) {
-        // drop if below machine epsilon
-        return 0;
-      }
-  
-      if (ts[toUnit] >= 0) {
-        // ensure does not have more than specified number of digits
-        ts[toUnit] = +(ts[toUnit] + frac).toFixed(digits);
-        rippleRounded(ts, toUnit);
-        return 0;
-      }
-  
-      return frac;
-    }
-  
-    /**
-     * Ripple up partial units to next existing
-     * 
-     * @private
-     * @param {Timespan} ts
-     * @param {number} digits max number of decimal digits to output
-     */
-    function fractional(ts, digits) {
-      var frac = fraction(ts, 0, 'milliseconds', 'seconds', MILLISECONDS_PER_SECOND, digits);
-      if (!frac) { return; }
-  
-      frac = fraction(ts, frac, 'seconds', 'minutes', SECONDS_PER_MINUTE, digits);
-      if (!frac) { return; }
-  
-      frac = fraction(ts, frac, 'minutes', 'hours', MINUTES_PER_HOUR, digits);
-      if (!frac) { return; }
-  
-      frac = fraction(ts, frac, 'hours', 'days', HOURS_PER_DAY, digits);
-      if (!frac) { return; }
-  
-      frac = fraction(ts, frac, 'days', 'weeks', DAYS_PER_WEEK, digits);
-      if (!frac) { return; }
-  
-      frac = fraction(ts, frac, 'weeks', 'months', daysPerMonth(ts.refMonth)/DAYS_PER_WEEK, digits);
-      if (!frac) { return; }
-  
-      frac = fraction(ts, frac, 'months', 'years', daysPerYear(ts.refMonth)/daysPerMonth(ts.refMonth), digits);
-      if (!frac) { return; }
-  
-      frac = fraction(ts, frac, 'years', 'decades', YEARS_PER_DECADE, digits);
-      if (!frac) { return; }
-  
-      frac = fraction(ts, frac, 'decades', 'centuries', DECADES_PER_CENTURY, digits);
-      if (!frac) { return; }
-  
-      frac = fraction(ts, frac, 'centuries', 'millennia', CENTURIES_PER_MILLENNIUM, digits);
-  
-      // should never reach this with remaining fractional value
-      if (frac) { throw new Error('Fractional unit overflow'); }
-    }
-  
-    /**
-     * Borrow any underflow units, carry any overflow units
-     * 
-     * @private
-     * @param {Timespan} ts
-     */
-    function ripple(ts) {
-      var x;
-  
-      if (ts.milliseconds < 0) {
-        // ripple seconds down to milliseconds
-        x = ceil(-ts.milliseconds / MILLISECONDS_PER_SECOND);
-        ts.seconds -= x;
-        ts.milliseconds += x * MILLISECONDS_PER_SECOND;
-  
-      } else if (ts.milliseconds >= MILLISECONDS_PER_SECOND) {
-        // ripple milliseconds up to seconds
-        ts.seconds += floor(ts.milliseconds / MILLISECONDS_PER_SECOND);
-        ts.milliseconds %= MILLISECONDS_PER_SECOND;
-      }
-  
-      if (ts.seconds < 0) {
-        // ripple minutes down to seconds
-        x = ceil(-ts.seconds / SECONDS_PER_MINUTE);
-        ts.minutes -= x;
-        ts.seconds += x * SECONDS_PER_MINUTE;
-  
-      } else if (ts.seconds >= SECONDS_PER_MINUTE) {
-        // ripple seconds up to minutes
-        ts.minutes += floor(ts.seconds / SECONDS_PER_MINUTE);
-        ts.seconds %= SECONDS_PER_MINUTE;
-      }
-  
-      if (ts.minutes < 0) {
-        // ripple hours down to minutes
-        x = ceil(-ts.minutes / MINUTES_PER_HOUR);
-        ts.hours -= x;
-        ts.minutes += x * MINUTES_PER_HOUR;
-  
-      } else if (ts.minutes >= MINUTES_PER_HOUR) {
-        // ripple minutes up to hours
-        ts.hours += floor(ts.minutes / MINUTES_PER_HOUR);
-        ts.minutes %= MINUTES_PER_HOUR;
-      }
-  
-      if (ts.hours < 0) {
-        // ripple days down to hours
-        x = ceil(-ts.hours / HOURS_PER_DAY);
-        ts.days -= x;
-        ts.hours += x * HOURS_PER_DAY;
-  
-      } else if (ts.hours >= HOURS_PER_DAY) {
-        // ripple hours up to days
-        ts.days += floor(ts.hours / HOURS_PER_DAY);
-        ts.hours %= HOURS_PER_DAY;
-      }
-  
-      while (ts.days < 0) {
-        // NOTE: never actually seen this loop more than once
-  
-        // ripple months down to days
-        ts.months--;
-        ts.days += borrowMonths(ts.refMonth, 1);
-      }
-  
-      // weeks is always zero here
-  
-      if (ts.days >= DAYS_PER_WEEK) {
-        // ripple days up to weeks
-        ts.weeks += floor(ts.days / DAYS_PER_WEEK);
-        ts.days %= DAYS_PER_WEEK;
-      }
-  
-      if (ts.months < 0) {
-        // ripple years down to months
-        x = ceil(-ts.months / MONTHS_PER_YEAR);
-        ts.years -= x;
-        ts.months += x * MONTHS_PER_YEAR;
-  
-      } else if (ts.months >= MONTHS_PER_YEAR) {
-        // ripple months up to years
-        ts.years += floor(ts.months / MONTHS_PER_YEAR);
-        ts.months %= MONTHS_PER_YEAR;
-      }
-  
-      // years is always non-negative here
-      // decades, centuries and millennia are always zero here
-  
-      if (ts.years >= YEARS_PER_DECADE) {
-        // ripple years up to decades
-        ts.decades += floor(ts.years / YEARS_PER_DECADE);
-        ts.years %= YEARS_PER_DECADE;
-  
-        if (ts.decades >= DECADES_PER_CENTURY) {
-          // ripple decades up to centuries
-          ts.centuries += floor(ts.decades / DECADES_PER_CENTURY);
-          ts.decades %= DECADES_PER_CENTURY;
-  
-          if (ts.centuries >= CENTURIES_PER_MILLENNIUM) {
-            // ripple centuries up to millennia
-            ts.millennia += floor(ts.centuries / CENTURIES_PER_MILLENNIUM);
-            ts.centuries %= CENTURIES_PER_MILLENNIUM;
-          }
-        }
-      }
-    }
-  
-    /**
-     * Remove any units not requested
-     * 
-     * @private
-     * @param {Timespan} ts
-     * @param {number} units the units to populate
-     * @param {number} max number of labels to output
-     * @param {number} digits max number of decimal digits to output
-     */
-    function pruneUnits(ts, units, max, digits) {
-      var count = 0;
-  
-      // Calc from largest unit to smallest to prevent underflow
-      if (!(units & MILLENNIA) || (count >= max)) {
-        // ripple millennia down to centuries
-        ts.centuries += ts.millennia * CENTURIES_PER_MILLENNIUM;
-        delete ts.millennia;
-  
-      } else if (ts.millennia) {
-        count++;
-      }
-  
-      if (!(units & CENTURIES) || (count >= max)) {
-        // ripple centuries down to decades
-        ts.decades += ts.centuries * DECADES_PER_CENTURY;
-        delete ts.centuries;
-  
-      } else if (ts.centuries) {
-        count++;
-      }
-  
-      if (!(units & DECADES) || (count >= max)) {
-        // ripple decades down to years
-        ts.years += ts.decades * YEARS_PER_DECADE;
-        delete ts.decades;
-  
-      } else if (ts.decades) {
-        count++;
-      }
-  
-      if (!(units & YEARS) || (count >= max)) {
-        // ripple years down to months
-        ts.months += ts.years * MONTHS_PER_YEAR;
-        delete ts.years;
-  
-      } else if (ts.years) {
-        count++;
-      }
-  
-      if (!(units & MONTHS) || (count >= max)) {
-        // ripple months down to days
-        if (ts.months) {
-          ts.days += borrowMonths(ts.refMonth, ts.months);
-        }
-        delete ts.months;
-  
-        if (ts.days >= DAYS_PER_WEEK) {
-          // ripple day overflow back up to weeks
-          ts.weeks += floor(ts.days / DAYS_PER_WEEK);
-          ts.days %= DAYS_PER_WEEK;
-        }
-  
-      } else if (ts.months) {
-        count++;
-      }
-  
-      if (!(units & WEEKS) || (count >= max)) {
-        // ripple weeks down to days
-        ts.days += ts.weeks * DAYS_PER_WEEK;
-        delete ts.weeks;
-  
-      } else if (ts.weeks) {
-        count++;
-      }
-  
-      if (!(units & DAYS) || (count >= max)) {
-        //ripple days down to hours
-        ts.hours += ts.days * HOURS_PER_DAY;
-        delete ts.days;
-  
-      } else if (ts.days) {
-        count++;
-      }
-  
-      if (!(units & HOURS) || (count >= max)) {
-        // ripple hours down to minutes
-        ts.minutes += ts.hours * MINUTES_PER_HOUR;
-        delete ts.hours;
-  
-      } else if (ts.hours) {
-        count++;
-      }
-  
-      if (!(units & MINUTES) || (count >= max)) {
-        // ripple minutes down to seconds
-        ts.seconds += ts.minutes * SECONDS_PER_MINUTE;
-        delete ts.minutes;
-  
-      } else if (ts.minutes) {
-        count++;
-      }
-  
-      if (!(units & SECONDS) || (count >= max)) {
-        // ripple seconds down to milliseconds
-        ts.milliseconds += ts.seconds * MILLISECONDS_PER_SECOND;
-        delete ts.seconds;
-  
-      } else if (ts.seconds) {
-        count++;
-      }
-  
-      // nothing to ripple milliseconds down to
-      // so ripple back up to smallest existing unit as a fractional value
-      if (!(units & MILLISECONDS) || (count >= max)) {
-        fractional(ts, digits);
-      }
-    }
-  
-    /**
-     * Populates the Timespan object
-     * 
-     * @private
-     * @param {Timespan} ts
-     * @param {?Date} start the starting date
-     * @param {?Date} end the ending date
-     * @param {number} units the units to populate
-     * @param {number} max number of labels to output
-     * @param {number} digits max number of decimal digits to output
-     */
-    function populate(ts, start, end, units, max, digits) {
-      var now = new Date();
-  
-      ts.start = start = start || now;
-      ts.end = end = end || now;
-      ts.units = units;
-  
-      ts.value = end.getTime() - start.getTime();
-      if (ts.value < 0) {
-        // swap if reversed
-        var tmp = end;
-        end = start;
-        start = tmp;
-      }
-  
-      // reference month for determining days in month
-      ts.refMonth = new Date(start.getFullYear(), start.getMonth(), 15, 12, 0, 0);
-      try {
-        // reset to initial deltas
-        ts.millennia = 0;
-        ts.centuries = 0;
-        ts.decades = 0;
-        ts.years = end.getFullYear() - start.getFullYear();
-        ts.months = end.getMonth() - start.getMonth();
-        ts.weeks = 0;
-        ts.days = end.getDate() - start.getDate();
-        ts.hours = end.getHours() - start.getHours();
-        ts.minutes = end.getMinutes() - start.getMinutes();
-        ts.seconds = end.getSeconds() - start.getSeconds();
-        ts.milliseconds = end.getMilliseconds() - start.getMilliseconds();
-  
-        ripple(ts);
-        pruneUnits(ts, units, max, digits);
-  
-      } finally {
-        delete ts.refMonth;
-      }
-  
-      return ts;
-    }
-  
-    /**
-     * Determine an appropriate refresh rate based upon units
-     * 
-     * @private
-     * @param {number} units the units to populate
-     * @return {number} milliseconds to delay
-     */
-    function getDelay(units) {
-      if (units & MILLISECONDS) {
-        // refresh very quickly
-        return MILLISECONDS_PER_SECOND / 30; //30Hz
-      }
-  
-      if (units & SECONDS) {
-        // refresh every second
-        return MILLISECONDS_PER_SECOND; //1Hz
-      }
-  
-      if (units & MINUTES) {
-        // refresh every minute
-        return MILLISECONDS_PER_SECOND * SECONDS_PER_MINUTE;
-      }
-  
-      if (units & HOURS) {
-        // refresh hourly
-        return MILLISECONDS_PER_SECOND * SECONDS_PER_MINUTE * MINUTES_PER_HOUR;
-      }
-      
-      if (units & DAYS) {
-        // refresh daily
-        return MILLISECONDS_PER_SECOND * SECONDS_PER_MINUTE * MINUTES_PER_HOUR * HOURS_PER_DAY;
-      }
-  
-      // refresh the rest weekly
-      return MILLISECONDS_PER_SECOND * SECONDS_PER_MINUTE * MINUTES_PER_HOUR * HOURS_PER_DAY * DAYS_PER_WEEK;
-    }
-  
-    /**
-     * API entry point
-     * 
-     * @public
-     * @param {Date|number|Timespan|null|function(Timespan,number)} start the starting date
-     * @param {Date|number|Timespan|null|function(Timespan,number)} end the ending date
-     * @param {number=} units the units to populate
-     * @param {number=} max number of labels to output
-     * @param {number=} digits max number of decimal digits to output
-     * @return {Timespan|number}
-     */
-    function countdown(start, end, units, max, digits) {
-      var callback;
-  
-      // ensure some units or use defaults
-      units = +units || DEFAULTS;
-      // max must be positive
-      max = (max > 0) ? max : NaN;
-      // clamp digits to an integer between [0, 20]
-      digits = (digits > 0) ? (digits < 20) ? Math.round(digits) : 20 : 0;
-  
-      // ensure start date
-      var startTS = null;
-      if ('function' === typeof start) {
-        callback = start;
-        start = null;
-  
-      } else if (!(start instanceof Date)) {
-        if ((start !== null) && isFinite(start)) {
-          start = new Date(+start);
-        } else {
-          if ('object' === typeof startTS) {
-            startTS = /** @type{Timespan} */(start);
-          }
-          start = null;
-        }
-      }
-  
-      // ensure end date
-      var endTS = null;
-      if ('function' === typeof end) {
-        callback = end;
-        end = null;
-  
-      } else if (!(end instanceof Date)) {
-        if ((end !== null) && isFinite(end)) {
-          end = new Date(+end);
-        } else {
-          if ('object' === typeof end) {
-            endTS = /** @type{Timespan} */(end);
-          }
-          end = null;
-        }
-      }
-  
-      // must wait to interpret timespans until after resolving dates
-      if (startTS) {
-        start = addToDate(startTS, end);
-      }
-      if (endTS) {
-        end = addToDate(endTS, start);
-      }
-  
-      if (!start && !end) {
-        // used for unit testing
-        return new Timespan();
-      }
-  
-      if (!callback) {
-        return populate(new Timespan(), /** @type{Date} */(start), /** @type{Date} */(end), /** @type{number} */(units), /** @type{number} */(max), /** @type{number} */(digits));
-      }
-  
-      // base delay off units
-      var delay = getDelay(units),
-        timerId,
-        fn = function() {
-          callback(
-            populate(new Timespan(), /** @type{Date} */(start), /** @type{Date} */(end), /** @type{number} */(units), /** @type{number} */(max), /** @type{number} */(digits)),
-            timerId
-          );
-        };
-  
-      fn();
-      return (timerId = setInterval(fn, delay));
-    }
-  
-    /**
-     * @public
-     * @const
-     * @type {number}
-     */
-    countdown.MILLISECONDS = MILLISECONDS;
-  
-    /**
-     * @public
-     * @const
-     * @type {number}
-     */
-    countdown.SECONDS = SECONDS;
-  
-    /**
-     * @public
-     * @const
-     * @type {number}
-     */
-    countdown.MINUTES = MINUTES;
-  
-    /**
-     * @public
-     * @const
-     * @type {number}
-     */
-    countdown.HOURS = HOURS;
-  
-    /**
-     * @public
-     * @const
-     * @type {number}
-     */
-    countdown.DAYS = DAYS;
-  
-    /**
-     * @public
-     * @const
-     * @type {number}
-     */
-    countdown.WEEKS = WEEKS;
-  
-    /**
-     * @public
-     * @const
-     * @type {number}
-     */
-    countdown.MONTHS = MONTHS;
-  
-    /**
-     * @public
-     * @const
-     * @type {number}
-     */
-    countdown.YEARS = YEARS;
-  
-    /**
-     * @public
-     * @const
-     * @type {number}
-     */
-    countdown.DECADES = DECADES;
-  
-    /**
-     * @public
-     * @const
-     * @type {number}
-     */
-    countdown.CENTURIES = CENTURIES;
-  
-    /**
-     * @public
-     * @const
-     * @type {number}
-     */
-    countdown.MILLENNIA = MILLENNIA;
-  
-    /**
-     * @public
-     * @const
-     * @type {number}
-     */
-    countdown.DEFAULTS = DEFAULTS;
-  
-    /**
-     * @public
-     * @const
-     * @type {number}
-     */
-    countdown.ALL = MILLENNIA|CENTURIES|DECADES|YEARS|MONTHS|WEEKS|DAYS|HOURS|MINUTES|SECONDS|MILLISECONDS;
-  
-    /**
-     * Customize the format settings.
-     * @public
-     * @param {Object} format settings object
-     */
-    var setFormat = countdown.setFormat = function(format) {
-      if (!format) { return; }
-  
-      if ('singular' in format || 'plural' in format) {
-        var singular = format.singular || [];
-        if (singular.split) {
-          singular = singular.split('|');
-        }
-        var plural = format.plural || [];
-        if (plural.split) {
-          plural = plural.split('|');
-        }
-  
-        for (var i=LABEL_MILLISECONDS; i<=LABEL_MILLENNIA; i++) {
-          // override any specified units
-          LABELS_SINGLUAR[i] = singular[i] || LABELS_SINGLUAR[i];
-          LABELS_PLURAL[i] = plural[i] || LABELS_PLURAL[i];
-        }
-      }
-  
-      if ('string' === typeof format.last) {
-        LABEL_LAST = format.last;
-      }
-      if ('string' === typeof format.delim) {
-        LABEL_DELIM = format.delim;
-      }
-      if ('string' === typeof format.empty) {
-        LABEL_NOW = format.empty;
-      }
-      if ('function' === typeof format.formatNumber) {
-        formatNumber = format.formatNumber;
-      }
-      if ('function' === typeof format.formatter) {
-        formatter = format.formatter;
-      }
-    };
-  
-    /**
-     * Revert to the default formatting.
-     * @public
-     */
-    var resetFormat = countdown.resetFormat = function() {
-      LABELS_SINGLUAR = ' millisecond| second| minute| hour| day| week| month| year| decade| century| millennium'.split('|');
-      LABELS_PLURAL = ' milliseconds| seconds| minutes| hours| days| weeks| months| years| decades| centuries| millennia'.split('|');
-      LABEL_LAST = ' and ';
-      LABEL_DELIM = ', ';
-      LABEL_NOW = '';
-      formatNumber = function(value) { return value; };
-      formatter = plurality;
-    };
-  
-    /**
-     * Override the unit labels.
-     * @public
-     * @param {string|Array=} singular a pipe ('|') delimited list of singular unit name overrides
-     * @param {string|Array=} plural a pipe ('|') delimited list of plural unit name overrides
-     * @param {string=} last a delimiter before the last unit (default: ' and ')
-     * @param {string=} delim a delimiter to use between all other units (default: ', ')
-     * @param {string=} empty a label to use when all units are zero (default: '')
-     * @param {function(number):string=} formatNumber a function which formats numbers as a string
-     * @param {function(number,number):string=} formatter a function which formats a number/unit pair as a string
-     * @deprecated since version 2.6.0
-     */
-    countdown.setLabels = function(singular, plural, last, delim, empty, formatNumber, formatter) {
-      setFormat({
-        singular: singular,
-        plural: plural,
-        last: last,
-        delim: delim,
-        empty: empty,
-        formatNumber: formatNumber,
-        formatter: formatter
-      });
-    };
-  
-    /**
-     * Revert to the default unit labels.
-     * @public
-     * @deprecated since version 2.6.0
-     */
-    countdown.resetLabels = resetFormat;
-  
-    resetFormat();
-  
-    if (typeof module !== 'undefined' && module.exports) {
-      module.exports = countdown;
-  
-    } else if (typeof window !== 'undefined' && typeof window.define === 'function' && typeof window.define.amd !== 'undefined') {
-      window.define('countdown', [], function() {
-        return countdown;
-      });
-    }
-  
-    return countdown;
-  
-  })();
-  
\ No newline at end of file
diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
index 03286dc12..9f3706916 100644
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
@@ -50,16 +50,12 @@
           <h5 class="card-title" i18n="difficulty-box.next-halving">Next Halving</h5>
           <div class="card-text" i18n-ngbTooltip="mining.average-fee" [ngbTooltip]="halvingBlocksLeft" [tooltipContext]="{ epochData: epochData }" placement="bottom">
             <span>{{ timeUntilHalving | date }}</span>
-            <div class="symbol" *ngIf="!countdownObject; else countdownValid">
+            <div class="symbol" *ngIf="blocksUntilHalving === 1; else approxTime">
               <app-time kind="until" [time]="epochData.timeAvg + now" [fastRender]="false" [fixedRender]="true" [precision]="1" minUnit="minute"></app-time>
             </div>
-            <ng-template #countdownValid>
+            <ng-template #approxTime>
               <div class="symbol">
-                <span>In </span>
-                <span *ngIf="countdownObject.years">{{ countdownObject.years }} years </span>
-                <span *ngIf="countdownObject.months">{{ countdownObject.months }} months </span>
-                <span *ngIf="countdownObject.days">{{ countdownObject.days }} days </span>
-                <span *ngIf="countdownObject.hours">{{ countdownObject.hours }} hours</span>
+                <app-time kind="until" [time]="timeUntilHalving" [fastRender]="false" [fixedRender]="true" [precision]="0" [numUnits]="2" [units]="['year', 'day', 'hour', 'minute']"></app-time>
               </div>
             </ng-template>
           </div>
diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
index 543266531..c1283b8b1 100644
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { StateService } from '../../services/state.service';
-const countdown = require('./countdown');
 
 interface EpochProgress {
   base: string;
@@ -28,7 +27,7 @@ interface EpochProgress {
 export class DifficultyMiningComponent implements OnInit {
   isLoadingWebSocket$: Observable<boolean>;
   difficultyEpoch$: Observable<EpochProgress>;
-  countdownObject = null;
+  blocksUntilHalving: number | null = null;
   timeUntilHalving = 0;
   now = new Date().getTime();
 
@@ -69,21 +68,9 @@ export class DifficultyMiningComponent implements OnInit {
           colorPreviousAdjustments = '#ffffff66';
         }
 
-        const blocksUntilHalving = 210000 - (maxHeight % 210000);
-        this.timeUntilHalving = new Date().getTime() + (blocksUntilHalving * 600000);
+        this.blocksUntilHalving = 210000 - (maxHeight % 210000);
+        this.timeUntilHalving = new Date().getTime() + (this.blocksUntilHalving * 600000);
         this.now = new Date().getTime();
-        
-        if (blocksUntilHalving - 1 === 0) {
-          this.countdownObject = null;
-        } else {
-          this.countdownObject = countdown(this.timeUntilHalving, new Date().getTime(), countdown.YEARS | countdown.MONTHS);
-          if (this.countdownObject.years === 0) {
-            this.countdownObject = countdown(this.timeUntilHalving, new Date().getTime(), countdown.DAYS | countdown.HOURS);
-          }
-          if (this.countdownObject.hours === 0) {
-            this.countdownObject = countdown(this.timeUntilHalving, new Date().getTime(), countdown.MINUTES);
-          }
-        }
 
         const data = {
           base: `${da.progressPercent.toFixed(2)}%`,
@@ -95,7 +82,7 @@ export class DifficultyMiningComponent implements OnInit {
           newDifficultyHeight: da.nextRetargetHeight,
           estimatedRetargetDate: da.estimatedRetargetDate,
           previousRetarget: da.previousRetarget,
-          blocksUntilHalving,
+          blocksUntilHalving: this.blocksUntilHalving,
           timeUntilHalving: this.timeUntilHalving,
           timeAvg: da.timeAvg,
         };
diff --git a/frontend/src/app/components/time/time.component.ts b/frontend/src/app/components/time/time.component.ts
index 2febf6238..679604ff5 100644
--- a/frontend/src/app/components/time/time.component.ts
+++ b/frontend/src/app/components/time/time.component.ts
@@ -10,7 +10,6 @@ import { dates } from '../../shared/i18n/dates';
 export class TimeComponent implements OnInit, OnChanges, OnDestroy {
   interval: number;
   text: string;
-  units: string[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
   precisionThresholds = {
     year: 100,
     month: 18,
@@ -29,6 +28,8 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
   @Input() fixedRender = false;
   @Input() relative = false;
   @Input() precision: number = 0;
+  @Input() numUnits: number = 1;
+  @Input() units: string[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
   @Input() minUnit: 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second' = 'second';
   @Input() fractionDigits: number = 0;
 
@@ -94,6 +95,8 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     let counter: number;
+    const result = [];
+    let usedUnits = 0;
     for (const [index, unit] of this.units.entries()) {
       let precisionUnit = this.units[Math.min(this.units.length - 1, index + this.precision)];
       counter = Math.floor(seconds / this.intervals[unit]);
@@ -105,107 +108,126 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
         counter = Math.max(1, counter);
       }
       if (counter > 0) {
-        let rounded = Math.round(seconds / this.intervals[precisionUnit]);
-        if (this.fractionDigits) {
-          const roundFactor = Math.pow(10,this.fractionDigits);
+        let rounded;
+        const roundFactor = Math.pow(10,this.fractionDigits || 0);
+        if (this.kind === 'until' && usedUnits < this.numUnits) {
+          rounded = Math.floor((seconds / this.intervals[precisionUnit]) * roundFactor) / roundFactor;
+        } else {
           rounded = Math.round((seconds / this.intervals[precisionUnit]) * roundFactor) / roundFactor;
         }
-        const dateStrings = dates(rounded);
-        switch (this.kind) {
-          case 'since':
-            if (rounded === 1) {
-              switch (precisionUnit) { // singular (1 day)
-                case 'year': return $localize`:@@time-since:${dateStrings.i18nYear}:DATE: ago`; break;
-                case 'month': return $localize`:@@time-since:${dateStrings.i18nMonth}:DATE: ago`; break;
-                case 'week': return $localize`:@@time-since:${dateStrings.i18nWeek}:DATE: ago`; break;
-                case 'day': return $localize`:@@time-since:${dateStrings.i18nDay}:DATE: ago`; break;
-                case 'hour': return $localize`:@@time-since:${dateStrings.i18nHour}:DATE: ago`; break;
-                case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinute}:DATE: ago`; break;
-                case 'second': return $localize`:@@time-since:${dateStrings.i18nSecond}:DATE: ago`; break;
-              }
-            } else {
-              switch (precisionUnit) { // plural (2 days)
-                case 'year': return $localize`:@@time-since:${dateStrings.i18nYears}:DATE: ago`; break;
-                case 'month': return $localize`:@@time-since:${dateStrings.i18nMonths}:DATE: ago`; break;
-                case 'week': return $localize`:@@time-since:${dateStrings.i18nWeeks}:DATE: ago`; break;
-                case 'day': return $localize`:@@time-since:${dateStrings.i18nDays}:DATE: ago`; break;
-                case 'hour': return $localize`:@@time-since:${dateStrings.i18nHours}:DATE: ago`; break;
-                case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinutes}:DATE: ago`; break;
-                case 'second': return $localize`:@@time-since:${dateStrings.i18nSeconds}:DATE: ago`; break;
-              }
-            }
-            break;
-          case 'until':
-            if (rounded === 1) {
-              switch (precisionUnit) { // singular (In ~1 day)
-                case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYear}:DATE:`; break;
-                case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonth}:DATE:`; break;
-                case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeek}:DATE:`; break;
-                case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDay}:DATE:`; break;
-                case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHour}:DATE:`; break;
-                case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`;
-                case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSecond}:DATE:`;
-              }
-            } else {
-              switch (precisionUnit) { // plural (In ~2 days)
-                case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYears}:DATE:`; break;
-                case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonths}:DATE:`; break;
-                case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeeks}:DATE:`; break;
-                case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDays}:DATE:`; break;
-                case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHours}:DATE:`; break;
-                case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinutes}:DATE:`; break;
-                case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSeconds}:DATE:`; break;
-              }
-            }
-            break;
-          case 'span':
-            if (rounded === 1) {
-              switch (precisionUnit) { // singular (1 day)
-                case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYear}:DATE:`; break;
-                case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonth}:DATE:`; break;
-                case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeek}:DATE:`; break;
-                case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDay}:DATE:`; break;
-                case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHour}:DATE:`; break;
-                case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinute}:DATE:`; break;
-                case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSecond}:DATE:`; break;
-              }
-            } else {
-              switch (precisionUnit) { // plural (2 days)
-                case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYears}:DATE:`; break;
-                case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonths}:DATE:`; break;
-                case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeeks}:DATE:`; break;
-                case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDays}:DATE:`; break;
-                case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHours}:DATE:`; break;
-                case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinutes}:DATE:`; break;
-                case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSeconds}:DATE:`; break;
-              }
-            }
-            break;
-          default:
-            if (rounded === 1) {
-              switch (precisionUnit) { // singular (1 day)
-                case 'year': return dateStrings.i18nYear; break;
-                case 'month': return dateStrings.i18nMonth; break;
-                case 'week': return dateStrings.i18nWeek; break;
-                case 'day': return dateStrings.i18nDay; break;
-                case 'hour': return dateStrings.i18nHour; break;
-                case 'minute': return dateStrings.i18nMinute; break;
-                case 'second': return dateStrings.i18nSecond; break;
-              }
-            } else {
-              switch (precisionUnit) { // plural (2 days)
-                case 'year': return dateStrings.i18nYears; break;
-                case 'month': return dateStrings.i18nMonths; break;
-                case 'week': return dateStrings.i18nWeeks; break;
-                case 'day': return dateStrings.i18nDays; break;
-                case 'hour': return dateStrings.i18nHours; break;
-                case 'minute': return dateStrings.i18nMinutes; break;
-                case 'second': return dateStrings.i18nSeconds; break;
-              }
-            }
+        if (this.kind !== 'until' || this.numUnits === 1) {
+          return this.formatTime(this.kind, precisionUnit, rounded);
+        } else {
+          if (!usedUnits) {
+            result.push(this.formatTime(this.kind, precisionUnit, rounded));
+          } else {
+            result.push(this.formatTime('', precisionUnit, rounded));
+          }
+          seconds -= (rounded * this.intervals[precisionUnit]);
+          usedUnits++;
+          if (usedUnits >= this.numUnits) {
+            return result.join(', ');
+          }
         }
       }
     }
+    return result.join(', ');
   }
 
+  private formatTime(kind, unit, number): string {
+    const dateStrings = dates(number);
+    switch (kind) {
+      case 'since':
+        if (number === 1) {
+          switch (unit) { // singular (1 day)
+            case 'year': return $localize`:@@time-since:${dateStrings.i18nYear}:DATE: ago`; break;
+            case 'month': return $localize`:@@time-since:${dateStrings.i18nMonth}:DATE: ago`; break;
+            case 'week': return $localize`:@@time-since:${dateStrings.i18nWeek}:DATE: ago`; break;
+            case 'day': return $localize`:@@time-since:${dateStrings.i18nDay}:DATE: ago`; break;
+            case 'hour': return $localize`:@@time-since:${dateStrings.i18nHour}:DATE: ago`; break;
+            case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinute}:DATE: ago`; break;
+            case 'second': return $localize`:@@time-since:${dateStrings.i18nSecond}:DATE: ago`; break;
+          }
+        } else {
+          switch (unit) { // plural (2 days)
+            case 'year': return $localize`:@@time-since:${dateStrings.i18nYears}:DATE: ago`; break;
+            case 'month': return $localize`:@@time-since:${dateStrings.i18nMonths}:DATE: ago`; break;
+            case 'week': return $localize`:@@time-since:${dateStrings.i18nWeeks}:DATE: ago`; break;
+            case 'day': return $localize`:@@time-since:${dateStrings.i18nDays}:DATE: ago`; break;
+            case 'hour': return $localize`:@@time-since:${dateStrings.i18nHours}:DATE: ago`; break;
+            case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinutes}:DATE: ago`; break;
+            case 'second': return $localize`:@@time-since:${dateStrings.i18nSeconds}:DATE: ago`; break;
+          }
+        }
+        break;
+      case 'until':
+        if (number === 1) {
+          switch (unit) { // singular (In ~1 day)
+            case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYear}:DATE:`; break;
+            case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonth}:DATE:`; break;
+            case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeek}:DATE:`; break;
+            case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDay}:DATE:`; break;
+            case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHour}:DATE:`; break;
+            case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`;
+            case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSecond}:DATE:`;
+          }
+        } else {
+          switch (unit) { // plural (In ~2 days)
+            case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYears}:DATE:`; break;
+            case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonths}:DATE:`; break;
+            case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeeks}:DATE:`; break;
+            case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDays}:DATE:`; break;
+            case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHours}:DATE:`; break;
+            case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinutes}:DATE:`; break;
+            case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSeconds}:DATE:`; break;
+          }
+        }
+        break;
+      case 'span':
+        if (number === 1) {
+          switch (unit) { // singular (1 day)
+            case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYear}:DATE:`; break;
+            case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonth}:DATE:`; break;
+            case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeek}:DATE:`; break;
+            case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDay}:DATE:`; break;
+            case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHour}:DATE:`; break;
+            case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinute}:DATE:`; break;
+            case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSecond}:DATE:`; break;
+          }
+        } else {
+          switch (unit) { // plural (2 days)
+            case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYears}:DATE:`; break;
+            case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonths}:DATE:`; break;
+            case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeeks}:DATE:`; break;
+            case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDays}:DATE:`; break;
+            case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHours}:DATE:`; break;
+            case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinutes}:DATE:`; break;
+            case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSeconds}:DATE:`; break;
+          }
+        }
+        break;
+      default:
+        if (number === 1) {
+          switch (unit) { // singular (1 day)
+            case 'year': return dateStrings.i18nYear; break;
+            case 'month': return dateStrings.i18nMonth; break;
+            case 'week': return dateStrings.i18nWeek; break;
+            case 'day': return dateStrings.i18nDay; break;
+            case 'hour': return dateStrings.i18nHour; break;
+            case 'minute': return dateStrings.i18nMinute; break;
+            case 'second': return dateStrings.i18nSecond; break;
+          }
+        } else {
+          switch (unit) { // plural (2 days)
+            case 'year': return dateStrings.i18nYears; break;
+            case 'month': return dateStrings.i18nMonths; break;
+            case 'week': return dateStrings.i18nWeeks; break;
+            case 'day': return dateStrings.i18nDays; break;
+            case 'hour': return dateStrings.i18nHours; break;
+            case 'minute': return dateStrings.i18nMinutes; break;
+            case 'second': return dateStrings.i18nSeconds; break;
+          }
+        }
+    }
+  }
 }

From bbb0aea0d11a6c4a1021a2809b97dd42f8f83f19 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 27 Jan 2024 22:10:18 +0000
Subject: [PATCH 31/92] Fix pools dominance chart

---
 .../hashrate-chart-pools.component.ts         | 123 +++++++++++-------
 1 file changed, 74 insertions(+), 49 deletions(-)

diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
index b0557ca7c..38b15e5cc 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
@@ -11,6 +11,13 @@ import { MiningService } from '../../services/mining.service';
 import { download } from '../../shared/graphs.utils';
 import { ActivatedRoute } from '@angular/router';
 
+interface Hashrate {
+  timestamp: number;
+  avgHashRate: number;
+  share: number;
+  poolName: string;
+}
+
 @Component({
   selector: 'app-hashrate-chart-pools',
   templateUrl: './hashrate-chart-pools.component.html',
@@ -32,6 +39,7 @@ export class HashrateChartPoolsComponent implements OnInit {
   miningWindowPreference: string;
   radioGroupForm: UntypedFormGroup;
 
+  hashrates: Hashrate[];
   chartOptions: EChartsOption = {};
   chartInitOptions = {
     renderer: 'svg',
@@ -87,56 +95,9 @@ export class HashrateChartPoolsComponent implements OnInit {
           return this.apiService.getHistoricalPoolsHashrate$(timespan)
             .pipe(
               tap((response) => {
-                const hashrates = response.body;
+                this.hashrates = response.body;
                 // Prepare series (group all hashrates data point by pool)
-                const grouped = {};
-                for (const hashrate of hashrates) {
-                  if (!grouped.hasOwnProperty(hashrate.poolName)) {
-                    grouped[hashrate.poolName] = [];
-                  }
-                  grouped[hashrate.poolName].push(hashrate);
-                }
-
-                const series = [];
-                const legends = [];
-                for (const name in grouped) {
-                  series.push({
-                    zlevel: 0,
-                    stack: 'Total',
-                    name: name,
-                    showSymbol: false,
-                    symbol: 'none',
-                    data: grouped[name].map((val) => [val.timestamp * 1000, val.share * 100]),
-                    type: 'line',
-                    lineStyle: { width: 0 },
-                    areaStyle: { opacity: 1 },
-                    smooth: true,
-                    color: poolsColor[name.replace(/[^a-zA-Z0-9]/g, '').toLowerCase()],
-                    emphasis: {
-                      disabled: true,
-                      scale: false,
-                    },
-                  });
-
-                  legends.push({
-                    name: name,
-                    inactiveColor: 'rgb(110, 112, 121)',
-                    textStyle: {
-                      color: 'white',
-                    },
-                    icon: 'roundRect',
-                    itemStyle: {
-                      color: poolsColor[name.replace(/[^a-zA-Z0-9]/g, "").toLowerCase()],
-                    },
-                  });
-                }
-
-                this.prepareChartOptions({
-                  legends: legends,
-                  series: series,
-                });
-                this.isLoading = false;
-
+                const series = this.applyHashrates();
                 if (series.length === 0) {
                   this.cd.markForCheck();
                   throw new Error();
@@ -156,6 +117,69 @@ export class HashrateChartPoolsComponent implements OnInit {
       );
   }
 
+  applyHashrates(): any[] {
+    const times: { [time: number]: { hashrates: { [pool: string]: Hashrate } } } = {};
+    const pools = {};
+    for (const hashrate of this.hashrates) {
+      if (!times[hashrate.timestamp]) {
+        times[hashrate.timestamp] = { hashrates: {} };
+      }
+      times[hashrate.timestamp].hashrates[hashrate.poolName] = hashrate;
+      if (!pools[hashrate.poolName]) {
+        pools[hashrate.poolName] = 0;
+      }
+      pools[hashrate.poolName] += hashrate.share;
+    }
+
+    const sortedTimes = Object.keys(times).sort((a,b) => parseInt(a) - parseInt(b)).map(time => ({ time: parseInt(time), hashrates: times[time].hashrates }));
+    const sortedPools = Object.keys(pools).sort((a,b) => pools[b] - pools[a]);
+
+    const series = [];
+    const legends = [];
+    for (const name of sortedPools) {
+      const data = sortedTimes.map(({ time, hashrates }) => {
+        return [time * 1000, (hashrates[name]?.share || 0) * 100];
+      });
+      series.push({
+        zlevel: 0,
+        stack: 'Total',
+        name: name,
+        showSymbol: false,
+        symbol: 'none',
+        data,
+        type: 'line',
+        lineStyle: { width: 0 },
+        areaStyle: { opacity: 1 },
+        smooth: true,
+        color: poolsColor[name.replace(/[^a-zA-Z0-9]/g, '').toLowerCase()],
+        emphasis: {
+          disabled: true,
+          scale: false,
+        },
+      });
+
+      legends.push({
+        name: name,
+        inactiveColor: 'rgb(110, 112, 121)',
+        textStyle: {
+          color: 'white',
+        },
+        icon: 'roundRect',
+        itemStyle: {
+          color: poolsColor[name.replace(/[^a-zA-Z0-9]/g, "").toLowerCase()],
+        },
+      });
+    }
+
+    this.prepareChartOptions({
+      legends: legends,
+      series: series,
+    });
+    this.isLoading = false;
+
+    return series;
+  }
+
   prepareChartOptions(data) {
     let title: object;
     if (data.series.length === 0) {
@@ -256,6 +280,7 @@ export class HashrateChartPoolsComponent implements OnInit {
         },
       }],
     };
+    this.cd.markForCheck();
   }
 
   onChartInit(ec) {

From 36d3734d5537a4e3ee86237f5dd8ad313a721c2a Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Sun, 28 Jan 2024 18:26:00 +0100
Subject: [PATCH 32/92] Liquid Federation dashboard: minor changes

---
 .../liquid-master-page/liquid-master-page.component.html      | 2 +-
 .../federation-utxos-list.component.html                      | 2 +-
 .../reserves-supply-stats.component.html                      | 4 ++--
 frontend/src/app/dashboard/dashboard.component.html           | 2 +-
 frontend/src/app/dashboard/dashboard.component.scss           | 3 ---
 5 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
index 2137d7a7d..dce0829aa 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
@@ -78,7 +78,7 @@
       <li class="nav-item" routerLinkActive="active" id="btn-assets">
         <a class="nav-link" [routerLink]="['/assets' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" i18n-title="master-page.assets" title="Assets"></fa-icon></a>
       </li>
-      <li class="nav-item" routerLinkActive="active" id="btn-audit">
+      <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" id="btn-audit">
         <a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'scale-balanced']" [fixedWidth]="true" i18n-title="master-page.audit" title="BTC Reserves Audit"></fa-icon></a>
       </li>
       <li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active" id="btn-docs">
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index cb9aa1317..80641c2b2 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -46,7 +46,7 @@
             </td>
             <td class="pegin text-left">
               <ng-container *ngIf="utxo.pegtxid; else noPeginMessage">
-                <a [routerLink]="['/tx', utxo.pegtxid + ':' + utxo.pegindex]" target="_blank" style="color:#116761">
+                <a [routerLink]="['/tx' | relativeUrl, utxo.pegtxid + ':' + utxo.pegindex]">
                   <app-truncate [text]="utxo.pegtxid + ':' + utxo.pegindex" [lastChars]="6"></app-truncate>
                 </a>
               </ng-container>
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
index d0a624a4f..8deeba839 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
@@ -4,9 +4,9 @@
       <div class="item">
         <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">L-BTC in circulation</h5>
         <div class="card-text">
-          <div class="fee-text">{{ (+currentPeg.amount) / 100000000 | number: '1.2-2' }} <span style="color: #116761;">L-BTC</span></div>
+          <div class="fee-text">{{ (+currentPeg.amount) / 100000000 | number: '1.2-2' }} <span>L-BTC</span></div>
           <span class="fiat">
-            <span>As of block&nbsp;<a [routerLink]="['/block', currentPeg.hash]" target="_blank" style="color:#116761">{{ currentPeg.lastBlockUpdate }}</a></span>
+            <span>As of block&nbsp;<a [routerLink]="['/block', currentPeg.hash]" target="_blank">{{ currentPeg.lastBlockUpdate }}</a></span>
           </span>
         </div>
       </div>
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 9603c8d93..b7e5e01d2 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -271,7 +271,7 @@
     <div class="item">
       <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">L-BTC in circulation</h5>
       <ng-container *ngIf="(currentPeg$ | async) as currentPeg; else loadingTransactions">
-        <p i18n-ngbTooltip="liquid.last-elements-audit-block" [ngbTooltip]="'L-BTC supply last updated at Liquid block ' + (currentPeg.lastBlockUpdate)" placement="top" class="card-text">{{ (+currentPeg.amount) / 100000000 | number: '1.2-2' }} <span class="liquid-color">L-BTC</span></p>
+        <p i18n-ngbTooltip="liquid.last-elements-audit-block" [ngbTooltip]="'L-BTC supply last updated at Liquid block ' + (currentPeg.lastBlockUpdate)" placement="top" class="card-text">{{ (+currentPeg.amount) / 100000000 | number: '1.2-2' }} <span>L-BTC</span></p>
       </ng-container>
     </div>
     <div class="item">
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index f10c4957f..2b319c425 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -97,9 +97,6 @@
         color: #ffffff66;
         font-size: 12px;
       }
-      .liquid-color {
-        color: #116761;
-      }
       .bitcoin-color {
         color: #b86d12;
       }

From 59128c8ca08a7225a37a354d482d16952305f42c Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Sun, 28 Jan 2024 19:43:50 +0100
Subject: [PATCH 33/92] Audit dashboard: merge utxos and addresses tables in
 same page

---
 .../federation-addresses-list.component.html  |  3 +--
 .../federation-addresses-list.component.scss  | 16 +++++------
 .../federation-addresses-stats.component.html |  4 +--
 .../federation-utxos-list.component.html      |  3 +--
 .../federation-utxos-list.component.scss      |  9 -------
 .../federation-utxos-stats.component.html     |  4 +--
 .../federation-wallet.component.html          | 24 +++++++++++++++++
 .../federation-wallet.component.scss          | 13 +++++++++
 .../federation-wallet.component.ts            | 15 +++++++++++
 .../app/liquid/liquid-master-page.module.ts   | 27 ++++++++++++++-----
 10 files changed, 86 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.html
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.scss
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.ts

diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
index 11b668030..eb4348492 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
@@ -1,5 +1,4 @@
-<div class="container-xl" [ngClass]="{'widget': widget, 'full-height': !widget}">
-  <h1 *ngIf="!widget" class="float-left" i18n="liquid.federation-addresses">Liquid Federation Addresses</h1>
+<div [ngClass]="{'widget': widget, 'address-container': !widget}">
   <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
 
   <div class="clearfix"></div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
index bb20745e7..c13193d37 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
@@ -1,18 +1,16 @@
+.address-container {
+  @media (min-width: 1100px) {
+    margin-left: 80px;
+    margin-right: 80px;  
+  }
+}
+
 .spinner-border {
   height: 25px;
   width: 25px;
   margin-top: 13px;
 }
 
-.container-xl {
-  max-width: 1000px;
-}
-.container-xl.widget {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-bottom: 0px;
-}
-
 tr, td, th {
   border: 0px;
   padding-top: 0.65rem !important;
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
index a97c36bf6..1e6fa1107 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
@@ -2,7 +2,7 @@
   
     <div class="fee-estimation-container">
       <div class="item">
-        <a class="title-link" [routerLink]="['/audit/addresses' | relativeUrl]">
+        <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
           <h5 class="card-title" i18n="liquid.federation-addresses">Liquid Federation Addresses <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
         </a>
         <div class="card-text">
@@ -18,7 +18,7 @@
 <ng-template #loadingData>
   <div class="fee-estimation-container loading-container">
     <div class="item">
-      <a class="title-link" [routerLink]="['/audit/addresses' | relativeUrl]">
+      <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
         <h5 class="card-title" i18n="liquid.federation-addresses">Liquid Federation Addresses <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
       </a>
       <div class="card-text">
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index 80641c2b2..cfeb8e245 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -1,5 +1,4 @@
-<div class="container-xl" [ngClass]="{'widget': widget, 'full-height': !widget}">
-  <h1 *ngIf="!widget" class="float-left" i18n="liquid.federation-utxos">Liquid Federation UTXOs</h1>
+<div [ngClass]="{'widget': widget}">
   <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
 
   <div class="clearfix"></div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
index f326350a8..617edc869 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
@@ -4,15 +4,6 @@
   margin-top: 13px;
 }
 
-.container-xl {
-  max-width: 1400px;
-}
-.container-xl.widget {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-bottom: 0px;
-}
-
 tr, td, th {
   border: 0px;
   padding-top: 0.65rem !important;
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
index 0bae55a67..401b3f6a1 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
@@ -2,7 +2,7 @@
   
     <div class="fee-estimation-container">
       <div class="item">
-        <a class="title-link" [routerLink]="['/audit/utxos' | relativeUrl]">
+        <a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]">
           <h5 class="card-title" i18n="liquid.federation-utxos">Liquid Federation UTXOs <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
         </a>
         <div class="card-text">
@@ -18,7 +18,7 @@
 <ng-template #loadingData>
   <div class="fee-estimation-container loading-container">
     <div class="item">
-      <a class="title-link" [routerLink]="['/audit/utxos' | relativeUrl]">
+      <a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]">
         <h5 class="card-title" i18n="liquid.federation-utxos">Liquid Federation UTXOs <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
       </a>
       <div class="card-text">
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.html
new file mode 100644
index 000000000..1e04e1ee9
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.html
@@ -0,0 +1,24 @@
+<div class="container-xl">
+  <div>
+    <h1 i18n="liquid.federation-wallet">Liquid Federation Wallet</h1>
+  </div>
+
+  <div class="nav-container">
+    <ul class="nav nav-pills">
+      <li class="nav-item">
+        <a class="nav-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]" routerLinkActive="active">UTXOs</a>
+        
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]" routerLinkActive="active">Addresses</a>
+      </li>
+    </ul>
+  </div>
+
+  <div class="clearfix"></div>
+
+  <router-outlet></router-outlet>
+
+</div>
+
+<br>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.scss
new file mode 100644
index 000000000..4b07e45e3
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.scss
@@ -0,0 +1,13 @@
+ul {
+  margin-bottom: 20px;
+}
+
+@media (max-width: 767.98px) {
+  .nav-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.ts
new file mode 100644
index 000000000..bfb7c4c1d
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-federation-wallet',
+  templateUrl: './federation-wallet.component.html',
+  styleUrls: ['./federation-wallet.component.scss']
+})
+export class FederationWalletComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/liquid/liquid-master-page.module.ts b/frontend/src/app/liquid/liquid-master-page.module.ts
index c8134cdf9..94a1fb943 100644
--- a/frontend/src/app/liquid/liquid-master-page.module.ts
+++ b/frontend/src/app/liquid/liquid-master-page.module.ts
@@ -18,6 +18,7 @@ import { AssetsNavComponent } from '../components/assets/assets-nav/assets-nav.c
 import { ReservesAuditDashboardComponent } from '../components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component';
 import { ReservesSupplyStatsComponent } from '../components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component';
 import { FederationUtxosStatsComponent } from '../components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component';
+import { FederationWalletComponent } from '../components/liquid-reserves-audit/federation-wallet/federation-wallet.component';
 import { FederationUtxosListComponent } from '../components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component';
 import { FederationAddressesStatsComponent } from '../components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component';
 import { FederationAddressesListComponent } from '../components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component';
@@ -88,12 +89,25 @@ const routes: Routes = [
         ]
       },
       {
-        path: 'audit/utxos',
-        component: FederationUtxosListComponent,
-      },
-      {
-        path: 'audit/addresses',
-        component: FederationAddressesListComponent,
+        path: 'audit/wallet',
+        data: { networks: ['liquid'] },
+        component: FederationWalletComponent,
+        children: [
+          {
+            path: 'utxos',
+            data: { networks: ['liquid'] },
+            component: FederationUtxosListComponent,
+          },
+          {
+            path: 'addresses',
+            data: { networks: ['liquid'] },
+            component: FederationAddressesListComponent,
+          },
+          {
+            path: '**',
+            redirectTo: 'utxos'
+          }
+        ]
       },
       {
         path: 'assets',
@@ -163,6 +177,7 @@ export class LiquidRoutingModule { }
     ReservesAuditDashboardComponent,
     ReservesSupplyStatsComponent,
     FederationUtxosStatsComponent,
+    FederationWalletComponent,
     FederationUtxosListComponent,
     FederationAddressesStatsComponent,
     FederationAddressesListComponent,

From 71f73835da09b96dd5b170b0e2eb07e5ef711dfa Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Sun, 28 Jan 2024 21:46:31 +0100
Subject: [PATCH 34/92] Liquid Federation: filter out change UTXOs from table

---
 .../federation-utxos-list.component.html      | 16 +++++++++++---
 .../federation-utxos-list.component.ts        | 22 +++++++++++++++++--
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index cfeb8e245..a7f548ffd 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/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>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
index 470862c67..92b09175c 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
+++ b/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);
+  }
 }

From 3ac70b38605a4c5c1d58d00a111bdb170885d3de Mon Sep 17 00:00:00 2001
From: wiz <j@wiz.biz>
Date: Mon, 29 Jan 2024 00:05:16 -0500
Subject: [PATCH 35/92] ops: Add new prod servers for fallback/replication

---
 production/mempool-config.liquid.json         | 38 ++++++++--
 production/mempool-config.liquidtestnet.json  | 38 ++++++++--
 .../mempool-config.mainnet-lightning.json     | 38 ++++++++--
 production/mempool-config.mainnet.json        | 76 +++++++++++++++----
 .../mempool-config.signet-lightning.json      | 38 ++++++++--
 production/mempool-config.signet.json         | 38 ++++++++--
 .../mempool-config.testnet-lightning.json     | 38 ++++++++--
 production/mempool-config.testnet.json        | 38 ++++++++--
 8 files changed, 279 insertions(+), 63 deletions(-)

diff --git a/production/mempool-config.liquid.json b/production/mempool-config.liquid.json
index 3d25a7a28..459476688 100644
--- a/production/mempool-config.liquid.json
+++ b/production/mempool-config.liquid.json
@@ -25,30 +25,54 @@
   "ESPLORA": {
     "UNIX_SOCKET_PATH": "/elements/socket/esplora-elements-liquid",
     "FALLBACK": [
-      "http://node201.va1.mempool.space:3001",
-      "http://node202.va1.mempool.space:3001",
-      "http://node203.va1.mempool.space:3001",
-      "http://node204.va1.mempool.space:3001",
-      "http://node205.va1.mempool.space:3001",
-      "http://node206.va1.mempool.space:3001",
       "http://node201.fmt.mempool.space:3001",
       "http://node202.fmt.mempool.space:3001",
       "http://node203.fmt.mempool.space:3001",
       "http://node204.fmt.mempool.space:3001",
       "http://node205.fmt.mempool.space:3001",
       "http://node206.fmt.mempool.space:3001",
+      "http://node201.va1.mempool.space:3001",
+      "http://node202.va1.mempool.space:3001",
+      "http://node203.va1.mempool.space:3001",
+      "http://node204.va1.mempool.space:3001",
+      "http://node205.va1.mempool.space:3001",
+      "http://node206.va1.mempool.space:3001",
+      "http://node207.va1.mempool.space:3001",
+      "http://node208.va1.mempool.space:3001",
+      "http://node209.va1.mempool.space:3001",
+      "http://node210.va1.mempool.space:3001",
+      "http://node211.va1.mempool.space:3001",
+      "http://node212.va1.mempool.space:3001",
+      "http://node213.va1.mempool.space:3001",
+      "http://node214.va1.mempool.space:3001",
       "http://node201.fra.mempool.space:3001",
       "http://node202.fra.mempool.space:3001",
       "http://node203.fra.mempool.space:3001",
       "http://node204.fra.mempool.space:3001",
       "http://node205.fra.mempool.space:3001",
       "http://node206.fra.mempool.space:3001",
+      "http://node207.fra.mempool.space:3001",
+      "http://node208.fra.mempool.space:3001",
+      "http://node209.fra.mempool.space:3001",
+      "http://node210.fra.mempool.space:3001",
+      "http://node211.fra.mempool.space:3001",
+      "http://node212.fra.mempool.space:3001",
+      "http://node213.fra.mempool.space:3001",
+      "http://node214.fra.mempool.space:3001",
       "http://node201.tk7.mempool.space:3001",
       "http://node202.tk7.mempool.space:3001",
       "http://node203.tk7.mempool.space:3001",
       "http://node204.tk7.mempool.space:3001",
       "http://node205.tk7.mempool.space:3001",
-      "http://node206.tk7.mempool.space:3001"
+      "http://node206.tk7.mempool.space:3001",
+      "http://node207.tk7.mempool.space:3001",
+      "http://node208.tk7.mempool.space:3001",
+      "http://node209.tk7.mempool.space:3001",
+      "http://node210.tk7.mempool.space:3001",
+      "http://node211.tk7.mempool.space:3001",
+      "http://node212.tk7.mempool.space:3001",
+      "http://node213.tk7.mempool.space:3001",
+      "http://node214.tk7.mempool.space:3001"
     ]
   },
   "DATABASE": {
diff --git a/production/mempool-config.liquidtestnet.json b/production/mempool-config.liquidtestnet.json
index 47c2f5fef..d77148341 100644
--- a/production/mempool-config.liquidtestnet.json
+++ b/production/mempool-config.liquidtestnet.json
@@ -25,30 +25,54 @@
   "ESPLORA": {
     "UNIX_SOCKET_PATH": "/elements/socket/esplora-elements-liquidtestnet",
     "FALLBACK": [
-      "http://node201.va1.mempool.space:3004",
-      "http://node202.va1.mempool.space:3004",
-      "http://node203.va1.mempool.space:3004",
-      "http://node204.va1.mempool.space:3004",
-      "http://node205.va1.mempool.space:3004",
-      "http://node206.va1.mempool.space:3004",
       "http://node201.fmt.mempool.space:3004",
       "http://node202.fmt.mempool.space:3004",
       "http://node203.fmt.mempool.space:3004",
       "http://node204.fmt.mempool.space:3004",
       "http://node205.fmt.mempool.space:3004",
       "http://node206.fmt.mempool.space:3004",
+      "http://node201.va1.mempool.space:3004",
+      "http://node202.va1.mempool.space:3004",
+      "http://node203.va1.mempool.space:3004",
+      "http://node204.va1.mempool.space:3004",
+      "http://node205.va1.mempool.space:3004",
+      "http://node206.va1.mempool.space:3004",
+      "http://node207.va1.mempool.space:3004",
+      "http://node208.va1.mempool.space:3004",
+      "http://node209.va1.mempool.space:3004",
+      "http://node210.va1.mempool.space:3004",
+      "http://node211.va1.mempool.space:3004",
+      "http://node212.va1.mempool.space:3004",
+      "http://node213.va1.mempool.space:3004",
+      "http://node214.va1.mempool.space:3004",
       "http://node201.fra.mempool.space:3004",
       "http://node202.fra.mempool.space:3004",
       "http://node203.fra.mempool.space:3004",
       "http://node204.fra.mempool.space:3004",
       "http://node205.fra.mempool.space:3004",
       "http://node206.fra.mempool.space:3004",
+      "http://node207.fra.mempool.space:3004",
+      "http://node208.fra.mempool.space:3004",
+      "http://node209.fra.mempool.space:3004",
+      "http://node210.fra.mempool.space:3004",
+      "http://node211.fra.mempool.space:3004",
+      "http://node212.fra.mempool.space:3004",
+      "http://node213.fra.mempool.space:3004",
+      "http://node214.fra.mempool.space:3004",
       "http://node201.tk7.mempool.space:3004",
       "http://node202.tk7.mempool.space:3004",
       "http://node203.tk7.mempool.space:3004",
       "http://node204.tk7.mempool.space:3004",
       "http://node205.tk7.mempool.space:3004",
-      "http://node206.tk7.mempool.space:3004"
+      "http://node206.tk7.mempool.space:3004",
+      "http://node207.tk7.mempool.space:3004",
+      "http://node208.tk7.mempool.space:3004",
+      "http://node209.tk7.mempool.space:3004",
+      "http://node210.tk7.mempool.space:3004",
+      "http://node211.tk7.mempool.space:3004",
+      "http://node212.tk7.mempool.space:3004",
+      "http://node213.tk7.mempool.space:3004",
+      "http://node214.tk7.mempool.space:3004"
     ]
   },
   "DATABASE": {
diff --git a/production/mempool-config.mainnet-lightning.json b/production/mempool-config.mainnet-lightning.json
index 6bd326bfa..48454ef9f 100644
--- a/production/mempool-config.mainnet-lightning.json
+++ b/production/mempool-config.mainnet-lightning.json
@@ -18,30 +18,54 @@
   "ESPLORA": {
     "UNIX_SOCKET_PATH": "/bitcoin/socket/esplora-bitcoin-mainnet",
     "FALLBACK": [
-      "http://node201.va1.mempool.space:3000",
-      "http://node202.va1.mempool.space:3000",
-      "http://node203.va1.mempool.space:3000",
-      "http://node204.va1.mempool.space:3000",
-      "http://node205.va1.mempool.space:3000",
-      "http://node206.va1.mempool.space:3000",
       "http://node201.fmt.mempool.space:3000",
       "http://node202.fmt.mempool.space:3000",
       "http://node203.fmt.mempool.space:3000",
       "http://node204.fmt.mempool.space:3000",
       "http://node205.fmt.mempool.space:3000",
       "http://node206.fmt.mempool.space:3000",
+      "http://node201.va1.mempool.space:3000",
+      "http://node202.va1.mempool.space:3000",
+      "http://node203.va1.mempool.space:3000",
+      "http://node204.va1.mempool.space:3000",
+      "http://node205.va1.mempool.space:3000",
+      "http://node206.va1.mempool.space:3000",
+      "http://node207.va1.mempool.space:3000",
+      "http://node208.va1.mempool.space:3000",
+      "http://node209.va1.mempool.space:3000",
+      "http://node210.va1.mempool.space:3000",
+      "http://node211.va1.mempool.space:3000",
+      "http://node212.va1.mempool.space:3000",
+      "http://node213.va1.mempool.space:3000",
+      "http://node214.va1.mempool.space:3000",
       "http://node201.fra.mempool.space:3000",
       "http://node202.fra.mempool.space:3000",
       "http://node203.fra.mempool.space:3000",
       "http://node204.fra.mempool.space:3000",
       "http://node205.fra.mempool.space:3000",
       "http://node206.fra.mempool.space:3000",
+      "http://node207.fra.mempool.space:3000",
+      "http://node208.fra.mempool.space:3000",
+      "http://node209.fra.mempool.space:3000",
+      "http://node210.fra.mempool.space:3000",
+      "http://node211.fra.mempool.space:3000",
+      "http://node212.fra.mempool.space:3000",
+      "http://node213.fra.mempool.space:3000",
+      "http://node214.fra.mempool.space:3000",
       "http://node201.tk7.mempool.space:3000",
       "http://node202.tk7.mempool.space:3000",
       "http://node203.tk7.mempool.space:3000",
       "http://node204.tk7.mempool.space:3000",
       "http://node205.tk7.mempool.space:3000",
-      "http://node206.tk7.mempool.space:3000"
+      "http://node206.tk7.mempool.space:3000",
+      "http://node207.tk7.mempool.space:3000",
+      "http://node208.tk7.mempool.space:3000",
+      "http://node209.tk7.mempool.space:3000",
+      "http://node210.tk7.mempool.space:3000",
+      "http://node211.tk7.mempool.space:3000",
+      "http://node212.tk7.mempool.space:3000",
+      "http://node213.tk7.mempool.space:3000",
+      "http://node214.tk7.mempool.space:3000"
     ]
   },
   "LIGHTNING": {
diff --git a/production/mempool-config.mainnet.json b/production/mempool-config.mainnet.json
index 100d185b9..37adae32f 100644
--- a/production/mempool-config.mainnet.json
+++ b/production/mempool-config.mainnet.json
@@ -39,30 +39,54 @@
   "ESPLORA": {
     "UNIX_SOCKET_PATH": "/bitcoin/socket/esplora-bitcoin-mainnet",
     "FALLBACK": [
-      "http://node201.va1.mempool.space:3000",
-      "http://node202.va1.mempool.space:3000",
-      "http://node203.va1.mempool.space:3000",
-      "http://node204.va1.mempool.space:3000",
-      "http://node205.va1.mempool.space:3000",
-      "http://node206.va1.mempool.space:3000",
       "http://node201.fmt.mempool.space:3000",
       "http://node202.fmt.mempool.space:3000",
       "http://node203.fmt.mempool.space:3000",
       "http://node204.fmt.mempool.space:3000",
       "http://node205.fmt.mempool.space:3000",
       "http://node206.fmt.mempool.space:3000",
+      "http://node201.va1.mempool.space:3000",
+      "http://node202.va1.mempool.space:3000",
+      "http://node203.va1.mempool.space:3000",
+      "http://node204.va1.mempool.space:3000",
+      "http://node205.va1.mempool.space:3000",
+      "http://node206.va1.mempool.space:3000",
+      "http://node207.va1.mempool.space:3000",
+      "http://node208.va1.mempool.space:3000",
+      "http://node209.va1.mempool.space:3000",
+      "http://node210.va1.mempool.space:3000",
+      "http://node211.va1.mempool.space:3000",
+      "http://node212.va1.mempool.space:3000",
+      "http://node213.va1.mempool.space:3000",
+      "http://node214.va1.mempool.space:3000",
       "http://node201.fra.mempool.space:3000",
       "http://node202.fra.mempool.space:3000",
       "http://node203.fra.mempool.space:3000",
       "http://node204.fra.mempool.space:3000",
       "http://node205.fra.mempool.space:3000",
       "http://node206.fra.mempool.space:3000",
+      "http://node207.fra.mempool.space:3000",
+      "http://node208.fra.mempool.space:3000",
+      "http://node209.fra.mempool.space:3000",
+      "http://node210.fra.mempool.space:3000",
+      "http://node211.fra.mempool.space:3000",
+      "http://node212.fra.mempool.space:3000",
+      "http://node213.fra.mempool.space:3000",
+      "http://node214.fra.mempool.space:3000",
       "http://node201.tk7.mempool.space:3000",
       "http://node202.tk7.mempool.space:3000",
       "http://node203.tk7.mempool.space:3000",
       "http://node204.tk7.mempool.space:3000",
       "http://node205.tk7.mempool.space:3000",
-      "http://node206.tk7.mempool.space:3000"
+      "http://node206.tk7.mempool.space:3000",
+      "http://node207.tk7.mempool.space:3000",
+      "http://node208.tk7.mempool.space:3000",
+      "http://node209.tk7.mempool.space:3000",
+      "http://node210.tk7.mempool.space:3000",
+      "http://node211.tk7.mempool.space:3000",
+      "http://node212.tk7.mempool.space:3000",
+      "http://node213.tk7.mempool.space:3000",
+      "http://node214.tk7.mempool.space:3000"
     ]
   },
   "DATABASE": {
@@ -82,30 +106,54 @@
     "AUDIT": true,
     "AUDIT_START_HEIGHT": 774000,
     "SERVERS": [
-      "node201.va1.mempool.space",
-      "node202.va1.mempool.space",
-      "node203.va1.mempool.space",
-      "node204.va1.mempool.space",
-      "node205.va1.mempool.space",
-      "node206.va1.mempool.space",
       "node201.fmt.mempool.space",
       "node202.fmt.mempool.space",
       "node203.fmt.mempool.space",
       "node204.fmt.mempool.space",
       "node205.fmt.mempool.space",
       "node206.fmt.mempool.space",
+      "node201.va1.mempool.space",
+      "node202.va1.mempool.space",
+      "node203.va1.mempool.space",
+      "node204.va1.mempool.space",
+      "node205.va1.mempool.space",
+      "node206.va1.mempool.space",
+      "node207.va1.mempool.space",
+      "node208.va1.mempool.space",
+      "node209.va1.mempool.space",
+      "node210.va1.mempool.space",
+      "node211.va1.mempool.space",
+      "node212.va1.mempool.space",
+      "node213.va1.mempool.space",
+      "node214.va1.mempool.space",
       "node201.fra.mempool.space",
       "node202.fra.mempool.space",
       "node203.fra.mempool.space",
       "node204.fra.mempool.space",
       "node205.fra.mempool.space",
       "node206.fra.mempool.space",
+      "node207.fra.mempool.space",
+      "node208.fra.mempool.space",
+      "node209.fra.mempool.space",
+      "node210.fra.mempool.space",
+      "node211.fra.mempool.space",
+      "node212.fra.mempool.space",
+      "node213.fra.mempool.space",
+      "node214.fra.mempool.space",
       "node201.tk7.mempool.space",
       "node202.tk7.mempool.space",
       "node203.tk7.mempool.space",
       "node204.tk7.mempool.space",
       "node205.tk7.mempool.space",
-      "node206.tk7.mempool.space"
+      "node206.tk7.mempool.space",
+      "node207.tk7.mempool.space",
+      "node208.tk7.mempool.space",
+      "node209.tk7.mempool.space",
+      "node210.tk7.mempool.space",
+      "node211.tk7.mempool.space",
+      "node212.tk7.mempool.space",
+      "node213.tk7.mempool.space",
+      "node214.tk7.mempool.space"
     ]
   },
   "REDIS": {
diff --git a/production/mempool-config.signet-lightning.json b/production/mempool-config.signet-lightning.json
index 229b226be..fdc96d256 100644
--- a/production/mempool-config.signet-lightning.json
+++ b/production/mempool-config.signet-lightning.json
@@ -18,30 +18,54 @@
   "ESPLORA": {
     "UNIX_SOCKET_PATH": "/bitcoin/socket/esplora-bitcoin-signet",
     "FALLBACK": [
-      "http://node201.va1.mempool.space:3003",
-      "http://node202.va1.mempool.space:3003",
-      "http://node203.va1.mempool.space:3003",
-      "http://node204.va1.mempool.space:3003",
-      "http://node205.va1.mempool.space:3003",
-      "http://node206.va1.mempool.space:3003",
       "http://node201.fmt.mempool.space:3003",
       "http://node202.fmt.mempool.space:3003",
       "http://node203.fmt.mempool.space:3003",
       "http://node204.fmt.mempool.space:3003",
       "http://node205.fmt.mempool.space:3003",
       "http://node206.fmt.mempool.space:3003",
+      "http://node201.va1.mempool.space:3003",
+      "http://node202.va1.mempool.space:3003",
+      "http://node203.va1.mempool.space:3003",
+      "http://node204.va1.mempool.space:3003",
+      "http://node205.va1.mempool.space:3003",
+      "http://node206.va1.mempool.space:3003",
+      "http://node207.va1.mempool.space:3003",
+      "http://node208.va1.mempool.space:3003",
+      "http://node209.va1.mempool.space:3003",
+      "http://node210.va1.mempool.space:3003",
+      "http://node211.va1.mempool.space:3003",
+      "http://node212.va1.mempool.space:3003",
+      "http://node213.va1.mempool.space:3003",
+      "http://node214.va1.mempool.space:3003",
       "http://node201.fra.mempool.space:3003",
       "http://node202.fra.mempool.space:3003",
       "http://node203.fra.mempool.space:3003",
       "http://node204.fra.mempool.space:3003",
       "http://node205.fra.mempool.space:3003",
       "http://node206.fra.mempool.space:3003",
+      "http://node207.fra.mempool.space:3003",
+      "http://node208.fra.mempool.space:3003",
+      "http://node209.fra.mempool.space:3003",
+      "http://node210.fra.mempool.space:3003",
+      "http://node211.fra.mempool.space:3003",
+      "http://node212.fra.mempool.space:3003",
+      "http://node213.fra.mempool.space:3003",
+      "http://node214.fra.mempool.space:3003",
       "http://node201.tk7.mempool.space:3003",
       "http://node202.tk7.mempool.space:3003",
       "http://node203.tk7.mempool.space:3003",
       "http://node204.tk7.mempool.space:3003",
       "http://node205.tk7.mempool.space:3003",
-      "http://node206.tk7.mempool.space:3003"
+      "http://node206.tk7.mempool.space:3003",
+      "http://node207.tk7.mempool.space:3003",
+      "http://node208.tk7.mempool.space:3003",
+      "http://node209.tk7.mempool.space:3003",
+      "http://node210.tk7.mempool.space:3003",
+      "http://node211.tk7.mempool.space:3003",
+      "http://node212.tk7.mempool.space:3003",
+      "http://node213.tk7.mempool.space:3003",
+      "http://node214.tk7.mempool.space:3003"
     ]
   },
   "LIGHTNING": {
diff --git a/production/mempool-config.signet.json b/production/mempool-config.signet.json
index c4b84f11b..9151679bd 100644
--- a/production/mempool-config.signet.json
+++ b/production/mempool-config.signet.json
@@ -27,30 +27,54 @@
   "ESPLORA": {
     "UNIX_SOCKET_PATH": "/bitcoin/socket/esplora-bitcoin-signet",
     "FALLBACK": [
-      "http://node201.va1.mempool.space:3003",
-      "http://node202.va1.mempool.space:3003",
-      "http://node203.va1.mempool.space:3003",
-      "http://node204.va1.mempool.space:3003",
-      "http://node205.va1.mempool.space:3003",
-      "http://node206.va1.mempool.space:3003",
       "http://node201.fmt.mempool.space:3003",
       "http://node202.fmt.mempool.space:3003",
       "http://node203.fmt.mempool.space:3003",
       "http://node204.fmt.mempool.space:3003",
       "http://node205.fmt.mempool.space:3003",
       "http://node206.fmt.mempool.space:3003",
+      "http://node201.va1.mempool.space:3003",
+      "http://node202.va1.mempool.space:3003",
+      "http://node203.va1.mempool.space:3003",
+      "http://node204.va1.mempool.space:3003",
+      "http://node205.va1.mempool.space:3003",
+      "http://node206.va1.mempool.space:3003",
+      "http://node207.va1.mempool.space:3003",
+      "http://node208.va1.mempool.space:3003",
+      "http://node209.va1.mempool.space:3003",
+      "http://node210.va1.mempool.space:3003",
+      "http://node211.va1.mempool.space:3003",
+      "http://node212.va1.mempool.space:3003",
+      "http://node213.va1.mempool.space:3003",
+      "http://node214.va1.mempool.space:3003",
       "http://node201.fra.mempool.space:3003",
       "http://node202.fra.mempool.space:3003",
       "http://node203.fra.mempool.space:3003",
       "http://node204.fra.mempool.space:3003",
       "http://node205.fra.mempool.space:3003",
       "http://node206.fra.mempool.space:3003",
+      "http://node207.fra.mempool.space:3003",
+      "http://node208.fra.mempool.space:3003",
+      "http://node209.fra.mempool.space:3003",
+      "http://node210.fra.mempool.space:3003",
+      "http://node211.fra.mempool.space:3003",
+      "http://node212.fra.mempool.space:3003",
+      "http://node213.fra.mempool.space:3003",
+      "http://node214.fra.mempool.space:3003",
       "http://node201.tk7.mempool.space:3003",
       "http://node202.tk7.mempool.space:3003",
       "http://node203.tk7.mempool.space:3003",
       "http://node204.tk7.mempool.space:3003",
       "http://node205.tk7.mempool.space:3003",
-      "http://node206.tk7.mempool.space:3003"
+      "http://node206.tk7.mempool.space:3003",
+      "http://node207.tk7.mempool.space:3003",
+      "http://node208.tk7.mempool.space:3003",
+      "http://node209.tk7.mempool.space:3003",
+      "http://node210.tk7.mempool.space:3003",
+      "http://node211.tk7.mempool.space:3003",
+      "http://node212.tk7.mempool.space:3003",
+      "http://node213.tk7.mempool.space:3003",
+      "http://node214.tk7.mempool.space:3003"
     ]
   },
   "DATABASE": {
diff --git a/production/mempool-config.testnet-lightning.json b/production/mempool-config.testnet-lightning.json
index 60ee128a2..2ab3c6f19 100644
--- a/production/mempool-config.testnet-lightning.json
+++ b/production/mempool-config.testnet-lightning.json
@@ -18,30 +18,54 @@
   "ESPLORA": {
     "UNIX_SOCKET_PATH": "/bitcoin/socket/esplora-bitcoin-testnet",
     "FALLBACK": [
-      "http://node201.va1.mempool.space:3002",
-      "http://node202.va1.mempool.space:3002",
-      "http://node203.va1.mempool.space:3002",
-      "http://node204.va1.mempool.space:3002",
-      "http://node205.va1.mempool.space:3002",
-      "http://node206.va1.mempool.space:3002",
       "http://node201.fmt.mempool.space:3002",
       "http://node202.fmt.mempool.space:3002",
       "http://node203.fmt.mempool.space:3002",
       "http://node204.fmt.mempool.space:3002",
       "http://node205.fmt.mempool.space:3002",
       "http://node206.fmt.mempool.space:3002",
+      "http://node201.va1.mempool.space:3002",
+      "http://node202.va1.mempool.space:3002",
+      "http://node203.va1.mempool.space:3002",
+      "http://node204.va1.mempool.space:3002",
+      "http://node205.va1.mempool.space:3002",
+      "http://node206.va1.mempool.space:3002",
+      "http://node207.va1.mempool.space:3002",
+      "http://node208.va1.mempool.space:3002",
+      "http://node209.va1.mempool.space:3002",
+      "http://node210.va1.mempool.space:3002",
+      "http://node211.va1.mempool.space:3002",
+      "http://node212.va1.mempool.space:3002",
+      "http://node213.va1.mempool.space:3002",
+      "http://node214.va1.mempool.space:3002",
       "http://node201.fra.mempool.space:3002",
       "http://node202.fra.mempool.space:3002",
       "http://node203.fra.mempool.space:3002",
       "http://node204.fra.mempool.space:3002",
       "http://node205.fra.mempool.space:3002",
       "http://node206.fra.mempool.space:3002",
+      "http://node207.fra.mempool.space:3002",
+      "http://node208.fra.mempool.space:3002",
+      "http://node209.fra.mempool.space:3002",
+      "http://node210.fra.mempool.space:3002",
+      "http://node211.fra.mempool.space:3002",
+      "http://node212.fra.mempool.space:3002",
+      "http://node213.fra.mempool.space:3002",
+      "http://node214.fra.mempool.space:3002",
       "http://node201.tk7.mempool.space:3002",
       "http://node202.tk7.mempool.space:3002",
       "http://node203.tk7.mempool.space:3002",
       "http://node204.tk7.mempool.space:3002",
       "http://node205.tk7.mempool.space:3002",
-      "http://node206.tk7.mempool.space:3002"
+      "http://node206.tk7.mempool.space:3002",
+      "http://node207.tk7.mempool.space:3002",
+      "http://node208.tk7.mempool.space:3002",
+      "http://node209.tk7.mempool.space:3002",
+      "http://node210.tk7.mempool.space:3002",
+      "http://node211.tk7.mempool.space:3002",
+      "http://node212.tk7.mempool.space:3002",
+      "http://node213.tk7.mempool.space:3002",
+      "http://node214.tk7.mempool.space:3002"
     ]
   },
   "LIGHTNING": {
diff --git a/production/mempool-config.testnet.json b/production/mempool-config.testnet.json
index b3d7cfadd..4a4b550c1 100644
--- a/production/mempool-config.testnet.json
+++ b/production/mempool-config.testnet.json
@@ -27,30 +27,54 @@
   "ESPLORA": {
     "UNIX_SOCKET_PATH": "/bitcoin/socket/esplora-bitcoin-testnet",
     "FALLBACK": [
-      "http://node201.va1.mempool.space:3002",
-      "http://node202.va1.mempool.space:3002",
-      "http://node203.va1.mempool.space:3002",
-      "http://node204.va1.mempool.space:3002",
-      "http://node205.va1.mempool.space:3002",
-      "http://node206.va1.mempool.space:3002",
       "http://node201.fmt.mempool.space:3002",
       "http://node202.fmt.mempool.space:3002",
       "http://node203.fmt.mempool.space:3002",
       "http://node204.fmt.mempool.space:3002",
       "http://node205.fmt.mempool.space:3002",
       "http://node206.fmt.mempool.space:3002",
+      "http://node201.va1.mempool.space:3002",
+      "http://node202.va1.mempool.space:3002",
+      "http://node203.va1.mempool.space:3002",
+      "http://node204.va1.mempool.space:3002",
+      "http://node205.va1.mempool.space:3002",
+      "http://node206.va1.mempool.space:3002",
+      "http://node207.va1.mempool.space:3002",
+      "http://node208.va1.mempool.space:3002",
+      "http://node209.va1.mempool.space:3002",
+      "http://node210.va1.mempool.space:3002",
+      "http://node211.va1.mempool.space:3002",
+      "http://node212.va1.mempool.space:3002",
+      "http://node213.va1.mempool.space:3002",
+      "http://node214.va1.mempool.space:3002",
       "http://node201.fra.mempool.space:3002",
       "http://node202.fra.mempool.space:3002",
       "http://node203.fra.mempool.space:3002",
       "http://node204.fra.mempool.space:3002",
       "http://node205.fra.mempool.space:3002",
       "http://node206.fra.mempool.space:3002",
+      "http://node207.fra.mempool.space:3002",
+      "http://node208.fra.mempool.space:3002",
+      "http://node209.fra.mempool.space:3002",
+      "http://node210.fra.mempool.space:3002",
+      "http://node211.fra.mempool.space:3002",
+      "http://node212.fra.mempool.space:3002",
+      "http://node213.fra.mempool.space:3002",
+      "http://node214.fra.mempool.space:3002",
       "http://node201.tk7.mempool.space:3002",
       "http://node202.tk7.mempool.space:3002",
       "http://node203.tk7.mempool.space:3002",
       "http://node204.tk7.mempool.space:3002",
       "http://node205.tk7.mempool.space:3002",
-      "http://node206.tk7.mempool.space:3002"
+      "http://node206.tk7.mempool.space:3002",
+      "http://node207.tk7.mempool.space:3002",
+      "http://node208.tk7.mempool.space:3002",
+      "http://node209.tk7.mempool.space:3002",
+      "http://node210.tk7.mempool.space:3002",
+      "http://node211.tk7.mempool.space:3002",
+      "http://node212.tk7.mempool.space:3002",
+      "http://node213.tk7.mempool.space:3002",
+      "http://node214.tk7.mempool.space:3002"
     ]
   },
   "DATABASE": {

From b6e5a059c97c2a5a2fedbfaddc96944ae6f5a6fa Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Mon, 29 Jan 2024 11:06:51 +0100
Subject: [PATCH 36/92] Liquid: minor changes on audit display

---
 .../federation-utxos-list/federation-utxos-list.component.html | 2 +-
 .../federation-utxos-list/federation-utxos-list.component.ts   | 3 +--
 .../reserves-audit-dashboard.component.html                    | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index a7f548ffd..6d21d9826 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -19,7 +19,7 @@
         <th class="txid text-left" [ngClass]="{'widget': widget}" i18n="liquid.output">Output</th>
         <th class="address text-left" *ngIf="!widget" i18n="liquid.address">Address</th>
         <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="liquid.amount">Amount</th>
-        <th class="pegin text-left" *ngIf="!widget" i18n="liquid.peg-in">Liquid Peg-in</th>
+        <th class="pegin text-left" *ngIf="!widget" i18n="liquid.related-peg-in">Related Peg-In</th>
         <th class="timestamp text-right" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
       </thead>
       <tbody *ngIf="filteredFederationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
index 92b09175c..f700a0664 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
@@ -22,7 +22,6 @@ 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);
@@ -105,7 +104,7 @@ export class FederationUtxosListComponent implements OnInit {
         this.federationUtxos$,
         this.showChangeUtxosToggle$
       ]).pipe(
-        switchMap(([federationUtxos, showChangeUtxosToggle]) => showChangeUtxosToggle ? of(federationUtxos) : of(federationUtxos.filter(utxo => utxo.bitcoinaddress !== this.changeAddress))),
+        switchMap(([federationUtxos, showChangeUtxosToggle]) => showChangeUtxosToggle ? of(federationUtxos) : of(federationUtxos.filter(utxo => utxo.pegtxid))),
         share()
       );
     }
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
index e2aa96816..d27bc1f48 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
@@ -92,7 +92,7 @@
 <ng-template #auditInProgress>
   <ng-container *ngIf="(auditStatus$ | async) as auditStatus; else loadingSkeleton">
     <div class="in-progress-message" *ngIf="auditStatus.lastBlockAudit && auditStatus.bitcoinHeaders; else loadingSkeleton">
-      <span i18n="liquid.audit-in-progress">Audit in progress: block {{ auditStatus.lastBlockAudit }} / {{ auditStatus.bitcoinHeaders }}</span>
+      <span i18n="liquid.audit-in-progress">Audit in progress: Bitcoin block height #{{ auditStatus.lastBlockAudit }} / #{{ auditStatus.bitcoinHeaders }}</span>
     </div>
   </ng-container>
 </ng-template>
\ No newline at end of file

From c39ca0270ec28672192241020ea665164a8eb16c Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Mon, 29 Jan 2024 11:36:58 +0100
Subject: [PATCH 37/92] Fix elements_pegs bitcoinaddress field

---
 backend/src/api/bitcoin/bitcoin-api.interface.ts | 1 +
 backend/src/api/liquid/elements-parser.ts        | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/backend/src/api/bitcoin/bitcoin-api.interface.ts b/backend/src/api/bitcoin/bitcoin-api.interface.ts
index 3afc22897..e176566d7 100644
--- a/backend/src/api/bitcoin/bitcoin-api.interface.ts
+++ b/backend/src/api/bitcoin/bitcoin-api.interface.ts
@@ -106,6 +106,7 @@ export namespace IBitcoinApi {
       address?: string;              //  (string) bitcoin address
       addresses?: string[];           //  (string) bitcoin addresses
       pegout_chain?: string;         //  (string) Elements peg-out chain
+      pegout_address?: string;       //  (string) Elements peg-out address
       pegout_addresses?: string[];   //  (string) Elements peg-out addresses
     };
   }
diff --git a/backend/src/api/liquid/elements-parser.ts b/backend/src/api/liquid/elements-parser.ts
index 0b6840b7b..4ee2187b4 100644
--- a/backend/src/api/liquid/elements-parser.ts
+++ b/backend/src/api/liquid/elements-parser.ts
@@ -67,12 +67,12 @@ class ElementsParser {
     for (const output of tx.vout) {
       if (output.scriptPubKey.pegout_chain) {
         await this.$savePegToDatabase(block.height, block.time, 0 - output.value * 100000000, tx.txid, output.n,
-          (output.scriptPubKey.pegout_addresses && output.scriptPubKey.pegout_addresses[0] || ''), '', 0, 0, 0, 0);
+          (output.scriptPubKey.pegout_address || ''), '', 0, 0, 0, 0);
       }
       if (!output.scriptPubKey.pegout_chain && output.scriptPubKey.type === 'nulldata'
         && output.value && output.value > 0 && output.asset && output.asset === Common.nativeAssetId) {
         await this.$savePegToDatabase(block.height, block.time, 0 - output.value * 100000000, tx.txid, output.n,
-          (output.scriptPubKey.pegout_addresses && output.scriptPubKey.pegout_addresses[0] || ''), '', 0, 0, 0, 1);
+          (output.scriptPubKey.pegout_address || ''), '', 0, 0, 0, 1);
       }
     }
   }

From 451a61e5fcbb92b60704d04f4f4d2ddcbeffc92e Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Mon, 29 Jan 2024 12:22:47 +0100
Subject: [PATCH 38/92] Reformat UTXOs widget to Peg Ins widget

---
 .../federation-utxos-list.component.html      |  2 +-
 .../federation-utxos-list.component.ts        |  5 ++-
 .../federation-utxos-stats.component.html     | 39 +++----------------
 .../federation-utxos-stats.component.scss     |  6 +--
 .../federation-utxos-stats.component.ts       |  9 +----
 .../reserves-audit-dashboard.component.html   |  2 +-
 .../reserves-audit-dashboard.component.ts     |  7 ----
 7 files changed, 14 insertions(+), 56 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index 6d21d9826..72f9fda50 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -24,7 +24,7 @@
       </thead>
       <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">
+          <tr *ngFor="let utxo of utxos | slice:0:6">
             <td class="txid text-left widget">
               <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:#b86d12">
                 <app-truncate [text]="utxo.txid + ':' + utxo.txindex" [lastChars]="6"></app-truncate>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
index f700a0664..479daf78f 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
@@ -22,6 +22,7 @@ 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);
@@ -45,7 +46,7 @@ export class FederationUtxosListComponent implements OnInit {
   ngOnInit(): void {
     this.isLoading = !this.widget;
     this.env = this.stateService.env;
-    this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
+    this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
 
     if (!this.widget) {
       this.websocketService.want(['blocks']);
@@ -104,7 +105,7 @@ export class FederationUtxosListComponent implements OnInit {
         this.federationUtxos$,
         this.showChangeUtxosToggle$
       ]).pipe(
-        switchMap(([federationUtxos, showChangeUtxosToggle]) => showChangeUtxosToggle ? of(federationUtxos) : of(federationUtxos.filter(utxo => utxo.pegtxid))),
+        switchMap(([federationUtxos, showChangeUtxosToggle]) => showChangeUtxosToggle ? of(federationUtxos) : of(federationUtxos.filter(utxo => utxo.bitcoinaddress !== this.changeAddress))),
         share()
       );
     }
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
index 401b3f6a1..7f84cfe4b 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
@@ -1,34 +1,7 @@
-<div *ngIf="(federationUtxos$ | async) as federationUtxos; else loadingData">
-  
-    <div class="fee-estimation-container">
-      <div class="item">
-        <a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]">
-          <h5 class="card-title" i18n="liquid.federation-utxos">Liquid Federation UTXOs <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
-        </a>
-        <div class="card-text">
-          <div class="fee-text">{{ federationUtxos.length }} <span>UTXOs</span></div>
-          <span class="fiat" *ngIf="(federationUtxosOneMonthAgo$ | async) as federationUtxosOneMonthAgo; else loadingSkeleton" i18n-ngbTooltip="liquid.percentage-change-last-month" ngbTooltip="Percentage change past month" placement="bottom">
-            <app-change [current]="federationUtxos.length" [previous]="federationUtxosOneMonthAgo.utxos_count_one_month"></app-change>
-          </span>
-        </div>
-      </div>
-    </div>
-</div>
-
-<ng-template #loadingData>
-  <div class="fee-estimation-container loading-container">
-    <div class="item">
-      <a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]">
-        <h5 class="card-title" i18n="liquid.federation-utxos">Liquid Federation UTXOs <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
-      </a>
-      <div class="card-text">
-        <div class="skeleton-loader"></div>
-        <div class="skeleton-loader"></div>
-      </div>
-    </div>
+<div class="fee-estimation-container">
+  <div class="item">
+    <a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]">
+      <h5 class="card-title" i18n="liquid.recent-peg-ins">Recent Peg-Ins <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+    </a>
   </div>
-</ng-template>
-
-<ng-template #loadingSkeleton>
-  <div class="skeleton-loader skeleton-loader-transactions" style="margin-top: 2px; margin-bottom: 5px;"></div>
-</ng-template>
+</div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss
index f7c2f104c..0534c9b5d 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss
@@ -1,6 +1,7 @@
 .fee-estimation-container {
   display: flex;
   justify-content: space-between;
+  padding-bottom: 1rem;
   @media (min-width: 376px) {
     flex-direction: row;
   }  
@@ -35,7 +36,6 @@
       top: 0px;
     }
     .fee-text{
-      border-bottom: 1px solid #ffffff1c;
       width: fit-content;
       margin: auto;
       line-height: 1.45;
@@ -48,10 +48,6 @@
   }
 }
 
-.loading-container{
-  min-height: 76px;
-}
-
 .card-text {
   .skeleton-loader {
     width: 100%;
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts
index 0064de89c..6c114ed32 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts
@@ -1,7 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { FederationUtxo } from '../../../interfaces/node-api.interface';
-
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-federation-utxos-stats',
   templateUrl: './federation-utxos-stats.component.html',
@@ -9,12 +6,10 @@ import { FederationUtxo } from '../../../interfaces/node-api.interface';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FederationUtxosStatsComponent implements OnInit {
-  @Input() federationUtxos$: Observable<FederationUtxo[]>;
-  @Input() federationUtxosOneMonthAgo$: Observable<any>;
-
   constructor() { }
 
   ngOnInit(): void {
+    
   }
 
 }
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
index d27bc1f48..d42300511 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
@@ -25,7 +25,7 @@
     <div class="col">
       <div class="card">
         <div class="card-body">
-          <app-federation-utxos-stats [federationUtxos$]="federationUtxos$" [federationUtxosOneMonthAgo$]="federationUtxosOneMonthAgo$"></app-federation-utxos-stats>
+          <app-federation-utxos-stats></app-federation-utxos-stats>
           <app-federation-utxos-list [federationUtxos$]="federationUtxos$" [widget]="true"></app-federation-utxos-list>
         </div>
       </div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
index 3009edc46..86dda7ebc 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
@@ -18,7 +18,6 @@ export class ReservesAuditDashboardComponent implements OnInit {
   currentPeg$: Observable<CurrentPegs>;
   currentReserves$: Observable<CurrentPegs>;
   federationUtxos$: Observable<FederationUtxo[]>;
-  federationUtxosOneMonthAgo$: Observable<any>;
   federationAddresses$: Observable<FederationAddress[]>;
   federationAddressesOneMonthAgo$: Observable<any>;
   liquidPegsMonth$: Observable<any>;
@@ -111,12 +110,6 @@ export class ReservesAuditDashboardComponent implements OnInit {
       share()
     );
 
-    this.federationUtxosOneMonthAgo$ = interval(60 * 60 * 1000)
-      .pipe(
-        startWith(0),
-        switchMap(() => this.apiService.federationUtxosOneMonthAgo$())
-      );
-
     this.federationAddressesOneMonthAgo$ = interval(60 * 60 * 1000)
       .pipe(
         startWith(0),

From 639fc3dd5f6035d295e3f414e18786a331cc1b17 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Mon, 29 Jan 2024 17:06:25 +0100
Subject: [PATCH 39/92] Liquid audit: Add recent pegs widget and table

---
 backend/src/api/database-migration.ts         |   1 +
 backend/src/api/liquid/elements-parser.ts     |  12 +-
 .../federation-addresses-stats.component.html |   4 +-
 .../federation-utxos-list.component.html      |  15 +--
 .../federation-utxos-list.component.ts        |  20 +--
 .../federation-utxos-stats.component.html     |   7 -
 .../federation-utxos-stats.component.ts       |  15 ---
 .../recent-pegs-list.component.html           | 125 +++++++++++++++++
 .../recent-pegs-list.component.scss           | 101 ++++++++++++++
 .../recent-pegs-list.component.ts             | 127 ++++++++++++++++++
 .../recent-pegs-stats.component.html          |   7 +
 .../recent-pegs-stats.component.scss}         |   0
 .../recent-pegs-stats.component.ts            |  15 +++
 .../reserves-audit-dashboard.component.html   |   8 +-
 .../reserves-audit-dashboard.component.ts     |  19 ++-
 .../src/app/interfaces/node-api.interface.ts  |  10 ++
 .../app/liquid/liquid-master-page.module.ts   |  11 +-
 17 files changed, 428 insertions(+), 69 deletions(-)
 delete mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
 delete mode 100644 frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
 rename frontend/src/app/components/liquid-reserves-audit/{federation-utxos-stats/federation-utxos-stats.component.scss => recent-pegs-stats/recent-pegs-stats.component.scss} (100%)
 create mode 100644 frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.ts

diff --git a/backend/src/api/database-migration.ts b/backend/src/api/database-migration.ts
index b84efdd7c..9a5eb310a 100644
--- a/backend/src/api/database-migration.ts
+++ b/backend/src/api/database-migration.ts
@@ -847,6 +847,7 @@ class DatabaseMigration {
       lasttimeupdate int(11) unsigned NOT NULL,
       pegtxid varchar(65) NOT NULL,
       pegindex int(11) NOT NULL,
+      pegblocktime int(11) unsigned NOT NULL,
       PRIMARY KEY (txid, txindex), 
       FOREIGN KEY (bitcoinaddress) REFERENCES federation_addresses (bitcoinaddress)
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`;
diff --git a/backend/src/api/liquid/elements-parser.ts b/backend/src/api/liquid/elements-parser.ts
index 4ee2187b4..37006c6bf 100644
--- a/backend/src/api/liquid/elements-parser.ts
+++ b/backend/src/api/liquid/elements-parser.ts
@@ -96,8 +96,8 @@ class ElementsParser {
       logger.debug(`Saved new Federation address ${bitcoinaddress} to federation addresses.`);
 
       // Add the UTXO to the federation txos table
-      const query_utxos = `INSERT IGNORE INTO federation_txos (txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, unspent, lastblockupdate, lasttimeupdate, pegtxid, pegindex) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
-      const params_utxos: (string | number)[] = [bitcointxid, bitcoinindex, bitcoinaddress, amount, bitcoinblock, bitcoinBlockTime, 1, bitcoinblock - 1, 0, txid, txindex];
+      const query_utxos = `INSERT IGNORE INTO federation_txos (txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, unspent, lastblockupdate, lasttimeupdate, pegtxid, pegindex, pegblocktime) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+      const params_utxos: (string | number)[] = [bitcointxid, bitcoinindex, bitcoinaddress, amount, bitcoinblock, bitcoinBlockTime, 1, bitcoinblock - 1, 0, txid, txindex, blockTime];
       await DB.query(query_utxos, params_utxos);
       const [minBlockUpdate] = await DB.query(`SELECT MIN(lastblockupdate) AS lastblockupdate FROM federation_txos WHERE unspent = 1`)
       await this.$saveLastBlockAuditToDatabase(minBlockUpdate[0]['lastblockupdate']);
@@ -148,7 +148,7 @@ class ElementsParser {
       while (auditProgress.lastBlockAudit <= auditProgress.confirmedTip) {
         // First, get the current UTXOs that need to be scanned in the block
         const utxos = await this.$getFederationUtxosToScan(auditProgress.lastBlockAudit);
-        logger.debug(`Found ${utxos.length} Federation UTXOs to scan in block ${auditProgress.lastBlockAudit} / ${auditProgress.confirmedTip}`);
+        logger.debug(`Found ${utxos.length} Federation UTXOs to scan in Bitcoin block height #${auditProgress.lastBlockAudit} / #${auditProgress.confirmedTip}`);
 
         // The fast way: check if these UTXOs are still unspent as of the current block with gettxout
         let spentAsTip: any[];
@@ -228,8 +228,8 @@ class ElementsParser {
           // Check that the UTXO was not already added in the DB by previous scans
           const [rows_check] = await DB.query(`SELECT txid FROM federation_txos WHERE txid = ? AND txindex = ?`, [tx.txid, output.n]) as any[];
           if (rows_check.length === 0) {
-            const query_utxos = `INSERT INTO federation_txos (txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, unspent, lastblockupdate, lasttimeupdate, pegtxid, pegindex) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
-            const params_utxos: (string | number)[] = [tx.txid, output.n, output.scriptPubKey.address, output.value * 100000000, block.height, block.time, 1, block.height, 0, '', 0];
+            const query_utxos = `INSERT INTO federation_txos (txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, unspent, lastblockupdate, lasttimeupdate, pegtxid, pegindex, pegblocktime) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+            const params_utxos: (string | number)[] = [tx.txid, output.n, output.scriptPubKey.address, output.value * 100000000, block.height, block.time, 1, block.height, 0, '', 0, 0];
             await DB.query(query_utxos, params_utxos);
             // Add the UTXO to the utxo array
             spentAsTip.push({
@@ -348,7 +348,7 @@ class ElementsParser {
 
   // Get all of the UTXOs held by the federation, most recent first
   public async $getFederationUtxos(): Promise<any> {
-    const query = `SELECT txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, pegtxid, pegindex FROM federation_txos WHERE unspent = 1 ORDER BY blocktime DESC;`;
+    const query = `SELECT txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, pegtxid, pegindex, pegblocktime FROM federation_txos WHERE unspent = 1 ORDER BY blocktime DESC;`;
     const [rows] = await DB.query(query);
     return rows;
   }
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
index 1e6fa1107..cf7bf5e27 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
@@ -3,7 +3,7 @@
     <div class="fee-estimation-container">
       <div class="item">
         <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
-          <h5 class="card-title" i18n="liquid.federation-addresses">Liquid Federation Addresses <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+          <h5 class="card-title" i18n="liquid.federation-wallet">Liquid Federation Wallet <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
         </a>
         <div class="card-text">
           <div class="fee-text">{{ federationAddresses.length }} <span i18n="liquid.addresses">addresses</span></div>
@@ -19,7 +19,7 @@
   <div class="fee-estimation-container loading-container">
     <div class="item">
       <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
-        <h5 class="card-title" i18n="liquid.federation-addresses">Liquid Federation Addresses <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+        <h5 class="card-title" i18n="liquid.federation-wallet">Liquid Federation Wallet <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
       </a>
       <div class="card-text">
         <div class="skeleton-loader"></div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index 72f9fda50..30d8e3a82 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -1,13 +1,4 @@
 <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>
 
@@ -22,7 +13,7 @@
         <th class="pegin text-left" *ngIf="!widget" i18n="liquid.related-peg-in">Related Peg-In</th>
         <th class="timestamp text-right" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
       </thead>
-      <tbody *ngIf="filteredFederationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
+      <tbody *ngIf="federationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
         <ng-container *ngIf="widget; else regularRows">
           <tr *ngFor="let utxo of utxos | slice:0:6">
             <td class="txid text-left widget">
@@ -55,7 +46,7 @@
             </td>
             <td class="pegin text-left">
               <ng-container *ngIf="utxo.pegtxid; else noPeginMessage">
-                <a [routerLink]="['/tx' | relativeUrl, utxo.pegtxid + ':' + utxo.pegindex]">
+                <a [routerLink]="['/tx' | relativeUrl, utxo.pegtxid]" [fragment]="'vin=' + utxo.pegindex">
                   <app-truncate [text]="utxo.pegtxid + ':' + utxo.pegindex" [lastChars]="6"></app-truncate>
                 </a>
               </ng-container>
@@ -106,7 +97,7 @@
       </ng-template>
     </table>
 
-    <ngb-pagination *ngIf="!widget && filteredFederationUtxos$ | async as utxos" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
+    <ngb-pagination *ngIf="!widget && federationUtxos$ | 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>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
index 479daf78f..30f401abf 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.ts
+++ b/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 { BehaviorSubject, Observable, Subject, combineLatest, of, timer } from 'rxjs';
+import { 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,12 +22,8 @@ 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;
@@ -99,17 +95,6 @@ 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()
-      );
-    }
-
   }
 
   ngOnDestroy(): void {
@@ -121,7 +106,4 @@ export class FederationUtxosListComponent implements OnInit {
     this.page = page;
   }
 
-  onShowChangeUtxosToggleChange(e): void {
-    this.showChangeUtxosToggleSubject.next(e.target.checked);
-  }
 }
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
deleted file mode 100644
index 7f84cfe4b..000000000
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="fee-estimation-container">
-  <div class="item">
-    <a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]">
-      <h5 class="card-title" i18n="liquid.recent-peg-ins">Recent Peg-Ins <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
-    </a>
-  </div>
-</div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts
deleted file mode 100644
index 6c114ed32..000000000
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-@Component({
-  selector: 'app-federation-utxos-stats',
-  templateUrl: './federation-utxos-stats.component.html',
-  styleUrls: ['./federation-utxos-stats.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class FederationUtxosStatsComponent implements OnInit {
-  constructor() { }
-
-  ngOnInit(): void {
-    
-  }
-
-}
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
new file mode 100644
index 000000000..0343d74c4
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
@@ -0,0 +1,125 @@
+<div class="container-xl">
+  <div [ngClass]="{'widget': widget}">
+
+    <div *ngIf="!widget">
+      <h1 i18n="liquid.recent-pegs">Recent Peg-In / Out's</h1>
+    </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;">
+          <th class="transaction text-left" [ngClass]="{'widget': widget}" i18n="shared.transaction">Transaction</th>
+          <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="liquid.amount">Amount</th>
+          <th class="output text-left" *ngIf="!widget" i18n="liquid.bitcoin-funding-redeem">BTC Funding / Redeem</th>
+          <th class="timestamp text-right" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
+        </thead>
+        <tbody *ngIf="recentPegs$ | async as pegs; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
+          <ng-container *ngIf="widget; else regularRows">
+            <tr *ngFor="let peg of pegs | slice:0:6">
+              <td class="transaction text-left widget">
+                <ng-container *ngIf="peg.amount > 0">
+                  <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vin=' + peg.txindex">
+                    <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
+                  </a>
+                </ng-container>
+                <ng-container *ngIf="peg.amount < 0">
+                  <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vout=' + peg.txindex">
+                    <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
+                  </a>
+                </ng-container>
+              </td>
+              <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
+                {{ peg.amount > 0 ? '+' : '-' }}<app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
+              </td>
+              <td class="timestamp text-right widget">
+                <app-time kind="since" [time]="peg.blocktime"></app-time>
+              </td>
+            </tr>
+          </ng-container>
+          <ng-template #regularRows>
+            <tr *ngFor="let peg of pegs | slice:(page - 1) * pageSize:page * pageSize">
+              <td class="transaction text-left">
+                <ng-container *ngIf="peg.amount > 0">
+                  <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vin=' + peg.txindex">
+                    <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
+                  </a>
+                </ng-container>
+                <ng-container *ngIf="peg.amount < 0">
+                  <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vout=' + peg.txindex">
+                    <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
+                  </a>
+                </ng-container>
+              </td>
+              <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
+                {{ peg.amount > 0 ? '+' : '-' }}<app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
+              </td>
+              <td class="output text-left">
+                <ng-container *ngIf="peg.bitcointxid; else noPeginMessage">
+                  <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + peg.bitcointxid + ':' + peg.bitcoinindex }}" target="_blank" style="color:#b86d12">
+                    <app-truncate [text]="peg.bitcointxid + ':' + peg.bitcoinindex" [lastChars]="6"></app-truncate>
+                  </a>
+                </ng-container>
+              </td>
+              <td class="timestamp text-right">
+                &lrm;{{ peg.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
+                <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="peg.blocktime"></app-time>)</i></div>
+              </td>
+            </tr>
+          </ng-template>
+        </tbody>
+        <ng-template #skeleton>
+          <tbody *ngIf="widget; else regularRowsSkeleton">
+            <tr *ngFor="let item of skeletonLines">
+              <td class="transaction text-left widget">
+                <span class="skeleton-loader" style="max-width: 400px"></span>
+              </td>
+              <td class="amount text-right widget">
+                <span class="skeleton-loader" style="max-width: 300px"></span>
+              </td>
+              <td class="timestamp text-right widget">
+                <span class="skeleton-loader" style="max-width: 300px"></span>
+              </td>
+            </tr>
+          </tbody>
+          <ng-template #regularRowsSkeleton>
+            <tr *ngFor="let item of skeletonLines">
+              <td class="transaction text-left">
+                <span class="skeleton-loader" style="max-width: 300px"></span>
+              </td>
+              <td class="amount text-right">
+                <span class="skeleton-loader" style="max-width: 140px"></span>
+              </td>
+              <td class="output text-left">
+                <span class="skeleton-loader" style="max-width: 300px"></span>
+              </td>
+              <td class="timestamp text-right">
+                <span class="skeleton-loader" style="max-width: 140px"></span>
+              </td>
+            </tr>
+          </ng-template>
+        </ng-template>
+      </table>
+
+      <ngb-pagination *ngIf="!widget && recentPegs$ | async as pegs" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
+        [collectionSize]="pegs.length" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
+        (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
+      </ngb-pagination>
+
+      <ng-template [ngIf]="!widget">
+        <div class="clearfix"></div>
+        <br>
+      </ng-template>
+    </div>
+    
+  </div>
+</div>
+
+<br>
+
+<ng-template #noPeginMessage>
+  <span class="text-muted">BTC Redeem in progress...</span>
+</ng-template>
\ No newline at end of file
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
new file mode 100644
index 000000000..eccc42957
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
@@ -0,0 +1,101 @@
+.spinner-border {
+  height: 25px;
+  width: 25px;
+  margin-top: 13px;
+}
+
+tr, td, th {
+  border: 0px;
+  padding-top: 0.65rem !important;
+  padding-bottom: 0.6rem !important;
+  padding-right: 2rem !important;
+  .widget {
+    padding-right: 1rem !important;
+  }
+}
+
+.clear-link {
+  color: white;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.progress {
+  background-color: #2d3348;
+}
+
+.transaction {
+  width: 25%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+}
+.transaction.widget {
+  width: 40%;
+  
+}
+
+.address {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+  @media (max-width: 527px) {
+    display: none;
+  }
+}
+
+.amount {
+  width: 12%;
+}
+.amount.widget {
+  width: 30%;
+}
+
+.output {
+  width: 25%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+  @media (max-width: 840px) {
+    display: none;
+  }
+}
+
+.timestamp {
+  width: 18%;
+  @media (max-width: 650px) {
+    display: none;
+  }
+  @media (max-width: 1000px) {
+    .relative-time {
+      display: none;
+    }
+  }
+}
+.timestamp.widget {
+  width: 100%;
+  @media (min-width: 768px) AND (max-width: 1050px) {
+    display: none;
+  }
+  @media (max-width: 767px) {
+    display: block;
+  }
+
+  @media (max-width: 500px) {
+    display: none;
+  }
+}
+
+.credit {
+  color: #7CB342;
+}
+
+.debit {
+  color: #D81B60;
+}
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
new file mode 100644
index 000000000..0c42477a9
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
@@ -0,0 +1,127 @@
+import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import { 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';
+import { AuditStatus, CurrentPegs, FederationUtxo, RecentPeg } from '../../../interfaces/node-api.interface';
+import { WebsocketService } from '../../../services/websocket.service';
+
+@Component({
+  selector: 'app-recent-pegs-list',
+  templateUrl: './recent-pegs-list.component.html',
+  styleUrls: ['./recent-pegs-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecentPegsListComponent implements OnInit {
+  @Input() widget: boolean = false;
+  @Input() recentPegIns$: Observable<RecentPeg[]>;
+
+  env: Env;
+  isLoading = true;
+  page = 1;
+  pageSize = 15;
+  maxSize = window.innerWidth <= 767.98 ? 3 : 5;
+  skeletonLines: number[] = [];
+  auditStatus$: Observable<AuditStatus>;
+  auditUpdated$: Observable<boolean>;
+  federationUtxos$: Observable<FederationUtxo[]>;
+  recentPegs$: Observable<RecentPeg[]>;
+  lastReservesBlockUpdate: number = 0;
+  currentPeg$: Observable<CurrentPegs>;
+  lastPegBlockUpdate: number = 0;
+  lastPegAmount: string = '';
+  isLoad: boolean = true;
+
+  private destroy$ = new Subject();
+  
+  constructor(
+    private apiService: ApiService,
+    public stateService: StateService,
+    private websocketService: WebsocketService,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.isLoading = !this.widget;
+    this.env = this.stateService.env;
+    this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
+
+    if (!this.widget) {
+      this.websocketService.want(['blocks']);
+      this.auditStatus$ = this.stateService.blocks$.pipe(
+        takeUntil(this.destroy$),
+        throttleTime(40000),
+        delayWhen(_ => this.isLoad ? timer(0) : timer(2000)),
+        tap(() => this.isLoad = false),
+        switchMap(() => this.apiService.federationAuditSynced$()),
+        shareReplay(1)
+      );
+
+      this.currentPeg$ = this.auditStatus$.pipe(
+        filter(auditStatus => auditStatus.isAuditSynced === true),
+        switchMap(_ =>
+          this.apiService.liquidPegs$().pipe(
+            filter((currentPegs) => currentPegs.lastBlockUpdate >= this.lastPegBlockUpdate),
+            tap((currentPegs) => {
+              this.lastPegBlockUpdate = currentPegs.lastBlockUpdate;
+            })
+          )
+        ),
+        share()
+      );
+
+      this.auditUpdated$ = combineLatest([
+        this.auditStatus$,
+        this.currentPeg$
+      ]).pipe(
+        filter(([auditStatus, _]) => auditStatus.isAuditSynced === true),
+        map(([auditStatus, currentPeg]) => ({
+          lastBlockAudit: auditStatus.lastBlockAudit,
+          currentPegAmount: currentPeg.amount
+        })),
+        switchMap(({ lastBlockAudit, currentPegAmount }) => {
+          const blockAuditCheck = lastBlockAudit > this.lastReservesBlockUpdate;
+          const amountCheck = currentPegAmount !== this.lastPegAmount;
+          this.lastReservesBlockUpdate = lastBlockAudit;
+          this.lastPegAmount = currentPegAmount;
+          return of(blockAuditCheck || amountCheck);
+        }),
+        share()
+      );
+
+      this.federationUtxos$ = this.auditUpdated$.pipe(
+        filter(auditUpdated => auditUpdated === true),
+        throttleTime(40000),
+        switchMap(_ => this.apiService.federationUtxos$()),
+        tap(_ => this.isLoading = false),
+        share()
+      );
+
+      this.recentPegIns$ = this.federationUtxos$.pipe(
+        map(federationUtxos => federationUtxos.filter(utxo => utxo.pegtxid).map(utxo => {
+          return {
+            txid: utxo.pegtxid,
+            txindex: utxo.pegindex,
+            amount: utxo.amount,
+            bitcointxid: utxo.txid,
+            bitcoinindex: utxo.txindex,
+            blocktime: utxo.pegblocktime,
+          }
+        })),
+        share()
+      );
+    }
+
+    this.recentPegs$ = this.recentPegIns$;
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(1);
+    this.destroy$.complete();
+  }
+
+  pageChange(page: number): void {
+    this.page = page;
+  }
+
+}
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
new file mode 100644
index 000000000..ddf51f9f6
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
@@ -0,0 +1,7 @@
+<div class="fee-estimation-container">
+  <div class="item">
+    <a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]">
+      <h5 class="card-title" i18n="liquid.recent-peg-in-out">Recent Peg-In / Out's <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+    </a>
+  </div>
+</div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
similarity index 100%
rename from frontend/src/app/components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component.scss
rename to frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.ts b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.ts
new file mode 100644
index 000000000..3fbebf715
--- /dev/null
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.ts
@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+@Component({
+  selector: 'app-recent-pegs-stats',
+  templateUrl: './recent-pegs-stats.component.html',
+  styleUrls: ['./recent-pegs-stats.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecentPegsStatsComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit(): void {
+    
+  }
+
+}
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
index d42300511..f7858a713 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
@@ -25,8 +25,8 @@
     <div class="col">
       <div class="card">
         <div class="card-body">
-          <app-federation-utxos-stats></app-federation-utxos-stats>
-          <app-federation-utxos-list [federationUtxos$]="federationUtxos$" [widget]="true"></app-federation-utxos-list>
+          <app-recent-pegs-stats></app-recent-pegs-stats>
+          <app-recent-pegs-list [recentPegIns$]="recentPegIns$" [widget]="true"></app-recent-pegs-list>
         </div>
       </div>
     </div>
@@ -71,8 +71,8 @@
       <div class="col">
         <div class="card">
           <div class="card-body">
-            <app-federation-utxos-stats></app-federation-utxos-stats>
-            <app-federation-utxos-list [widget]="true"></app-federation-utxos-list>
+            <app-recent-pegs-stats></app-recent-pegs-stats>
+            <app-recent-pegs-list [widget]="true"></app-recent-pegs-list>
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
index 86dda7ebc..faa00b3d0 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
@@ -4,7 +4,7 @@ import { WebsocketService } from '../../../services/websocket.service';
 import { StateService } from '../../../services/state.service';
 import { Observable, Subject, combineLatest, delayWhen, filter, interval, map, of, share, shareReplay, startWith, switchMap, takeUntil, tap, throttleTime, timer } from 'rxjs';
 import { ApiService } from '../../../services/api.service';
-import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo } from '../../../interfaces/node-api.interface';
+import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo, RecentPeg } from '../../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-reserves-audit-dashboard',
@@ -18,6 +18,7 @@ export class ReservesAuditDashboardComponent implements OnInit {
   currentPeg$: Observable<CurrentPegs>;
   currentReserves$: Observable<CurrentPegs>;
   federationUtxos$: Observable<FederationUtxo[]>;
+  recentPegIns$: Observable<RecentPeg[]>;
   federationAddresses$: Observable<FederationAddress[]>;
   federationAddressesOneMonthAgo$: Observable<any>;
   liquidPegsMonth$: Observable<any>;
@@ -72,7 +73,7 @@ export class ReservesAuditDashboardComponent implements OnInit {
       map(([auditStatus, currentPeg]) => ({
         lastBlockAudit: auditStatus.lastBlockAudit,
         currentPegAmount: currentPeg.amount
-      })), 
+      })),
       switchMap(({ lastBlockAudit, currentPegAmount }) => {
         const blockAuditCheck = lastBlockAudit > this.lastReservesBlockUpdate;
         const amountCheck = currentPegAmount !== this.lastPegAmount;
@@ -103,6 +104,20 @@ export class ReservesAuditDashboardComponent implements OnInit {
       share()
     );
 
+    this.recentPegIns$ = this.federationUtxos$.pipe(
+      map(federationUtxos => federationUtxos.filter(utxo => utxo.pegtxid).map(utxo => {
+        return {
+          txid: utxo.pegtxid,
+          txindex: utxo.pegindex,
+          amount: utxo.amount,
+          bitcointxid: utxo.txid,
+          bitcoinindex: utxo.txindex,
+          blocktime: utxo.pegblocktime,
+        }
+      })),
+      share()
+    );
+
     this.federationAddresses$ = this.auditUpdated$.pipe(
       filter(auditUpdated => auditUpdated === true),
       throttleTime(40000),
diff --git a/frontend/src/app/interfaces/node-api.interface.ts b/frontend/src/app/interfaces/node-api.interface.ts
index 0b93b0d1a..6606cae4c 100644
--- a/frontend/src/app/interfaces/node-api.interface.ts
+++ b/frontend/src/app/interfaces/node-api.interface.ts
@@ -96,6 +96,16 @@ export interface FederationUtxo {
   blocktime: number;
   pegtxid: string;
   pegindex: number;
+  pegblocktime: number;
+}
+
+export interface RecentPeg {
+  txid: string;
+  txindex: number; // input #0 for peg-ins
+  amount: number;
+  bitcointxid: string;
+  bitcoinindex: number;
+  blocktime: number;
 }
 
 export interface AuditStatus {
diff --git a/frontend/src/app/liquid/liquid-master-page.module.ts b/frontend/src/app/liquid/liquid-master-page.module.ts
index 94a1fb943..0134365bc 100644
--- a/frontend/src/app/liquid/liquid-master-page.module.ts
+++ b/frontend/src/app/liquid/liquid-master-page.module.ts
@@ -17,7 +17,8 @@ import { AssetComponent } from '../components/asset/asset.component';
 import { AssetsNavComponent } from '../components/assets/assets-nav/assets-nav.component';
 import { ReservesAuditDashboardComponent } from '../components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component';
 import { ReservesSupplyStatsComponent } from '../components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component';
-import { FederationUtxosStatsComponent } from '../components/liquid-reserves-audit/federation-utxos-stats/federation-utxos-stats.component';
+import { RecentPegsStatsComponent } from '../components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component';
+import { RecentPegsListComponent } from '../components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component';
 import { FederationWalletComponent } from '../components/liquid-reserves-audit/federation-wallet/federation-wallet.component';
 import { FederationUtxosListComponent } from '../components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component';
 import { FederationAddressesStatsComponent } from '../components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component';
@@ -109,6 +110,11 @@ const routes: Routes = [
           }
         ]
       },
+      {
+        path: 'audit/pegs',
+        data: { networks: ['liquid'] },
+        component: RecentPegsListComponent,
+      },
       {
         path: 'assets',
         data: { networks: ['liquid'] },
@@ -176,7 +182,8 @@ export class LiquidRoutingModule { }
     LiquidMasterPageComponent,
     ReservesAuditDashboardComponent,
     ReservesSupplyStatsComponent,
-    FederationUtxosStatsComponent,
+    RecentPegsStatsComponent,
+    RecentPegsListComponent,
     FederationWalletComponent,
     FederationUtxosListComponent,
     FederationAddressesStatsComponent,

From 2637636f27306e5a1d55d0600cb54a72bfbcec18 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Mon, 29 Jan 2024 16:59:13 +0000
Subject: [PATCH 40/92] Fix pool dominance sorting

---
 .../hashrate-chart-pools.component.ts              | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
index 38b15e5cc..3f0e9258f 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
@@ -126,13 +126,21 @@ export class HashrateChartPoolsComponent implements OnInit {
       }
       times[hashrate.timestamp].hashrates[hashrate.poolName] = hashrate;
       if (!pools[hashrate.poolName]) {
-        pools[hashrate.poolName] = 0;
+        pools[hashrate.poolName] = true;
       }
-      pools[hashrate.poolName] += hashrate.share;
     }
 
     const sortedTimes = Object.keys(times).sort((a,b) => parseInt(a) - parseInt(b)).map(time => ({ time: parseInt(time), hashrates: times[time].hashrates }));
-    const sortedPools = Object.keys(pools).sort((a,b) => pools[b] - pools[a]);
+    const lastHashrates = sortedTimes[sortedTimes.length - 1].hashrates;
+    const sortedPools = Object.keys(pools).sort((a,b) => {
+      if (lastHashrates[b]?.share ?? lastHashrates[a]?.share ?? false) {
+        // sort by descending share of hashrate in latest period
+        return (lastHashrates[b]?.share || 0) - (lastHashrates[a]?.share || 0);
+      } else {
+        // tiebreak by pool name
+        b < a;
+      }
+    });
 
     const series = [];
     const legends = [];

From e458196bff8db8d6a2c564eb04e6cccf4ce8b43f Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Mon, 29 Jan 2024 23:15:21 +0000
Subject: [PATCH 41/92] Fix missing optional chain on bestDescendant access

---
 .../src/app/components/transaction/transaction.component.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index b283e0d23..c135fb909 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -540,7 +540,7 @@
               </ng-container>
             </ng-template>
           </div>
-          <button *ngIf="cpfpInfo.bestDescendant || cpfpInfo.descendants?.length || cpfpInfo.ancestors?.length" type="button" class="btn btn-outline-info btn-sm btn-small-height float-right" (click)="showCpfpDetails = !showCpfpDetails">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
+          <button *ngIf="cpfpInfo?.bestDescendant || cpfpInfo?.descendants?.length || cpfpInfo?.ancestors?.length" type="button" class="btn btn-outline-info btn-sm btn-small-height float-right" (click)="showCpfpDetails = !showCpfpDetails">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
         </td>
       </tr>
     </tbody>

From 5f3f48354622901e13269ba639cce083922a2880 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 30 Jan 2024 02:07:07 +0000
Subject: [PATCH 42/92] Bump mysql2 from 3.7.0 to 3.9.1 in /backend

Bumps [mysql2](https://github.com/sidorares/node-mysql2) from 3.7.0 to 3.9.1.
- [Release notes](https://github.com/sidorares/node-mysql2/releases)
- [Changelog](https://github.com/sidorares/node-mysql2/blob/master/Changelog.md)
- [Commits](https://github.com/sidorares/node-mysql2/compare/v3.7.0...v3.9.1)

---
updated-dependencies:
- dependency-name: mysql2
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 backend/package-lock.json | 14 +++++++-------
 backend/package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/backend/package-lock.json b/backend/package-lock.json
index 4d16fa012..1794934d2 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -17,7 +17,7 @@
         "crypto-js": "~4.2.0",
         "express": "~4.18.2",
         "maxmind": "~4.3.11",
-        "mysql2": "~3.7.0",
+        "mysql2": "~3.9.1",
         "redis": "^4.6.6",
         "rust-gbt": "file:./rust-gbt",
         "socks-proxy-agent": "~7.0.0",
@@ -6110,9 +6110,9 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/mysql2": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.7.0.tgz",
-      "integrity": "sha512-c45jA3Jc1X8yJKzrWu1GpplBKGwv/wIV6ITZTlCSY7npF2YfJR+6nMP5e+NTQhUeJPSyOQAbGDCGEHbAl8HN9w==",
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.9.1.tgz",
+      "integrity": "sha512-3njoWAAhGBYy0tWBabqUQcLtczZUxrmmtc2vszQUekg3kTJyZ5/IeLC3Fo04u6y6Iy5Sba7pIIa2P/gs8D3ZeQ==",
       "dependencies": {
         "denque": "^2.1.0",
         "generate-function": "^2.3.1",
@@ -12230,9 +12230,9 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "mysql2": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.7.0.tgz",
-      "integrity": "sha512-c45jA3Jc1X8yJKzrWu1GpplBKGwv/wIV6ITZTlCSY7npF2YfJR+6nMP5e+NTQhUeJPSyOQAbGDCGEHbAl8HN9w==",
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.9.1.tgz",
+      "integrity": "sha512-3njoWAAhGBYy0tWBabqUQcLtczZUxrmmtc2vszQUekg3kTJyZ5/IeLC3Fo04u6y6Iy5Sba7pIIa2P/gs8D3ZeQ==",
       "requires": {
         "denque": "^2.1.0",
         "generate-function": "^2.3.1",
diff --git a/backend/package.json b/backend/package.json
index cd1255392..c42f455e5 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -47,7 +47,7 @@
     "crypto-js": "~4.2.0",
     "express": "~4.18.2",
     "maxmind": "~4.3.11",
-    "mysql2": "~3.7.0",
+    "mysql2": "~3.9.1",
     "rust-gbt": "file:./rust-gbt",
     "redis": "^4.6.6",
     "socks-proxy-agent": "~7.0.0",

From 73e6045549f930a76102c5b546b75d3fd69edee8 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Tue, 30 Jan 2024 11:11:30 +0100
Subject: [PATCH 43/92] Liquid: Add support for peg outs display

---
 backend/src/api/liquid/elements-parser.ts     | 33 ++++++++++++++++---
 backend/src/api/liquid/liquid.routes.ts       | 13 ++++++++
 .../recent-pegs-list.component.ts             | 25 +++++++++++++-
 .../reserves-audit-dashboard.component.html   |  2 +-
 .../reserves-audit-dashboard.component.ts     |  9 +++++
 .../src/app/interfaces/node-api.interface.ts  |  3 +-
 frontend/src/app/services/api.service.ts      |  6 +++-
 7 files changed, 83 insertions(+), 8 deletions(-)

diff --git a/backend/src/api/liquid/elements-parser.ts b/backend/src/api/liquid/elements-parser.ts
index 37006c6bf..753d33b0b 100644
--- a/backend/src/api/liquid/elements-parser.ts
+++ b/backend/src/api/liquid/elements-parser.ts
@@ -163,6 +163,10 @@ class ElementsParser {
           unspentAsTip = [];
         }
 
+        // Get the peg-out addresses that need to be scanned
+        const redeemAddresses = await this.$getRedeemAddressesToScan();
+        if (redeemAddresses.length > 0) logger.debug(`Found ${redeemAddresses.length} peg-out addresses to scan`);
+
         // The slow way: parse the block to look for the spending tx
         logger.debug(`${spentAsTip.length} / ${utxos.length} Federation UTXOs are spent as of tip`);
 
@@ -170,7 +174,7 @@ class ElementsParser {
         const block: IBitcoinApi.Block = await bitcoinSecondClient.getBlock(blockHash, 2);
         const nbUtxos = spentAsTip.length;
         await DB.query('START TRANSACTION;');
-        await this.$parseBitcoinBlock(block, spentAsTip, unspentAsTip, auditProgress.confirmedTip);
+        await this.$parseBitcoinBlock(block, spentAsTip, unspentAsTip, auditProgress.confirmedTip, redeemAddresses);
         await DB.query(`COMMIT;`);
         logger.debug(`Watched for spending of ${nbUtxos} Federation UTXOs in block ${auditProgress.lastBlockAudit} / ${auditProgress.confirmedTip}`);
 
@@ -210,12 +214,14 @@ class ElementsParser {
     return {spentAsTip, unspentAsTip};
   }
 
-  protected async $parseBitcoinBlock(block: IBitcoinApi.Block, spentAsTip: any[], unspentAsTip: any[], confirmedTip: number) {
+  protected async $parseBitcoinBlock(block: IBitcoinApi.Block, spentAsTip: any[], unspentAsTip: any[], confirmedTip: number, redeemAddresses: string[] = []) {
+    let mightRedeemInThisBlock = false; // If a Federation UTXO is spent in this block, we might find a peg-out address in the outputs...
     for (const tx of block.tx) {
       // Check if the Federation UTXOs that was spent as of tip are spent in this block
       for (const input of tx.vin) {
         const txo = spentAsTip.find(txo => txo.txid === input.txid && txo.txindex === input.vout);
         if (txo) {
+          mightRedeemInThisBlock = true;
           await DB.query(`UPDATE federation_txos SET unspent = 0, lastblockupdate = ?, lasttimeupdate = ? WHERE txid = ? AND txindex = ?`, [block.height, block.time, txo.txid, txo.txindex]);
           // Remove the TXO from the utxo array
           spentAsTip.splice(spentAsTip.indexOf(txo), 1);
@@ -241,6 +247,13 @@ class ElementsParser {
             logger.debug(`Added new Federation UTXO ${tx.txid}:${output.n} of ${output.value * 100000000} sats belonging to ${output.scriptPubKey.address} (Federation change address).`);
           }
         }
+        if (mightRedeemInThisBlock && output.scriptPubKey.address && redeemAddresses.includes(output.scriptPubKey.address)) {
+          const query_add_redeem = `UPDATE elements_pegs SET bitcointxid = ?, bitcoinindex = ? WHERE bitcoinaddress = ?`;
+          const params_add_redeem: (string | number)[] = [tx.txid, output.n, output.scriptPubKey.address];
+          await DB.query(query_add_redeem, params_add_redeem);
+          redeemAddresses.splice(redeemAddresses.indexOf(output.scriptPubKey.address), 1);
+          logger.debug(`Added redeem txid ${tx.txid}:${output.n} to peg-out address ${output.scriptPubKey.address}`);
+        }
       }
     }
 
@@ -283,9 +296,15 @@ class ElementsParser {
     return rows[0]['number'];
   }
 
-    ///////////// DATA QUERY //////////////
+  protected async $getRedeemAddressesToScan(): Promise<string[]> {
+    const query = `SELECT bitcoinaddress FROM elements_pegs where amount < 0 AND bitcoinaddress != '' AND bitcointxid = '';`;
+    const [rows]: any[] = await DB.query(query);
+    return rows.map((row: any) => row.bitcoinaddress);
+  }
 
-    public async $getAuditStatus(): Promise<any> {
+  ///////////// DATA QUERY //////////////
+
+  public async $getAuditStatus(): Promise<any> {
     const lastBlockAudit = await this.$getLastBlockAudit();
     const bitcoinBlocksToSync = await this.$getBitcoinBlockchainState();
     return {
@@ -382,6 +401,12 @@ class ElementsParser {
     return rows[0];
   }
 
+  // Get the 300 most recent pegouts from the federation
+  public async $getRecentPegouts(): Promise<any> {
+    const query = `SELECT txid, txindex, amount, bitcoinaddress, bitcointxid, bitcoinindex, datetime AS blocktime FROM elements_pegs WHERE amount < 0 ORDER BY blocktime DESC LIMIT 300;`;
+    const [rows] = await DB.query(query);
+    return rows;
+  }
 }
 
 export default new ElementsParser();
diff --git a/backend/src/api/liquid/liquid.routes.ts b/backend/src/api/liquid/liquid.routes.ts
index 582b139af..64d631a05 100644
--- a/backend/src/api/liquid/liquid.routes.ts
+++ b/backend/src/api/liquid/liquid.routes.ts
@@ -19,6 +19,7 @@ class LiquidRoutes {
         .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/pegs/month', this.$getElementsPegsByMonth)
         .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves', this.$getFederationReserves)
         .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves/month', this.$getFederationReservesByMonth)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/pegouts', this.$getPegOuts)
         .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves/addresses', this.$getFederationAddresses)
         .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves/addresses/previous-month', this.$getFederationAddressesOneMonthAgo)
         .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves/utxos', this.$getFederationUtxos)
@@ -176,6 +177,18 @@ class LiquidRoutes {
     }
   }
 
+  private async $getPegOuts(req: Request, res: Response) {
+    try {
+      const recentPegOuts = await elementsParser.$getRecentPegouts();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
+      res.json(recentPegOuts);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
 }
 
 export default new LiquidRoutes();
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
index 0c42477a9..2ff103301 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
+++ b/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 {
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
index f7858a713..e9f6b4ccd 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
+++ b/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>
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
index faa00b3d0..9b23eb7cb 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
+++ b/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),
diff --git a/frontend/src/app/interfaces/node-api.interface.ts b/frontend/src/app/interfaces/node-api.interface.ts
index 6606cae4c..cebb23f27 100644
--- a/frontend/src/app/interfaces/node-api.interface.ts
+++ b/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;
diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index af4441eae..38060d47d 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/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');
   }

From e69ba7e884d011844ca40f8756fd5d62c7067eb7 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Tue, 30 Jan 2024 11:49:29 +0100
Subject: [PATCH 44/92] Liquid Federation indexing: clean up logging

---
 backend/src/api/liquid/elements-parser.ts | 44 +++++++++++++++++------
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/backend/src/api/liquid/elements-parser.ts b/backend/src/api/liquid/elements-parser.ts
index 753d33b0b..b921dd499 100644
--- a/backend/src/api/liquid/elements-parser.ts
+++ b/backend/src/api/liquid/elements-parser.ts
@@ -93,7 +93,6 @@ class ElementsParser {
   
       // Add the address to the federation addresses table
       await DB.query(`INSERT IGNORE INTO federation_addresses (bitcoinaddress) VALUES (?)`, [bitcoinaddress]);
-      logger.debug(`Saved new Federation address ${bitcoinaddress} to federation addresses.`);
 
       // Add the UTXO to the federation txos table
       const query_utxos = `INSERT IGNORE INTO federation_txos (txid, txindex, bitcoinaddress, amount, blocknumber, blocktime, unspent, lastblockupdate, lasttimeupdate, pegtxid, pegindex, pegblocktime) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
@@ -101,7 +100,7 @@ class ElementsParser {
       await DB.query(query_utxos, params_utxos);
       const [minBlockUpdate] = await DB.query(`SELECT MIN(lastblockupdate) AS lastblockupdate FROM federation_txos WHERE unspent = 1`)
       await this.$saveLastBlockAuditToDatabase(minBlockUpdate[0]['lastblockupdate']);
-      logger.debug(`Saved new Federation UTXO ${bitcointxid}:${bitcoinindex} belonging to ${bitcoinaddress} to federation txos.`);
+      logger.debug(`Saved new Federation UTXO ${bitcointxid}:${bitcoinindex} belonging to ${bitcoinaddress} to federation txos`);
 
     }
   }
@@ -130,7 +129,7 @@ class ElementsParser {
       let auditProgress = await this.$getAuditProgress();
       // If no peg in transaction was found in the database, return
       if (!auditProgress.lastBlockAudit) {
-        logger.debug(`No Federation UTXOs found in the database. Waiting for some to be confirmed before starting the Federation UTXOs audit.`);
+        logger.debug(`No Federation UTXOs found in the database. Waiting for some to be confirmed before starting the Federation UTXOs audit`);
         this.isUtxosUpdatingRunning = false;
         return;
       }
@@ -138,17 +137,24 @@ class ElementsParser {
       const bitcoinBlocksToSync = await this.$getBitcoinBlockchainState();
       // If the bitcoin blockchain is not synced yet, return
       if (bitcoinBlocksToSync.bitcoinHeaders > bitcoinBlocksToSync.bitcoinBlocks + 1) {
-        logger.debug(`Bitcoin client is not synced yet. ${bitcoinBlocksToSync.bitcoinHeaders - bitcoinBlocksToSync.bitcoinBlocks} blocks remaining to sync before the Federation audit process can start.`);
+        logger.debug(`Bitcoin client is not synced yet. ${bitcoinBlocksToSync.bitcoinHeaders - bitcoinBlocksToSync.bitcoinBlocks} blocks remaining to sync before the Federation audit process can start`);
         this.isUtxosUpdatingRunning = false;
         return;
       }
 
       auditProgress.lastBlockAudit++;
 
+      // Logging
+      let indexedThisRun = 0;
+      let timer = Date.now() / 1000;
+      const startedAt = Date.now() / 1000;
+      const indexingSpeeds: number[] = [];
+
       while (auditProgress.lastBlockAudit <= auditProgress.confirmedTip) {
+
         // First, get the current UTXOs that need to be scanned in the block
         const utxos = await this.$getFederationUtxosToScan(auditProgress.lastBlockAudit);
-        logger.debug(`Found ${utxos.length} Federation UTXOs to scan in Bitcoin block height #${auditProgress.lastBlockAudit} / #${auditProgress.confirmedTip}`);
+        // logger.debug(`Found ${utxos.length} Federation UTXOs to scan in Bitcoin block height #${auditProgress.lastBlockAudit} / #${auditProgress.confirmedTip}`);
 
         // The fast way: check if these UTXOs are still unspent as of the current block with gettxout
         let spentAsTip: any[];
@@ -157,7 +163,7 @@ class ElementsParser {
           const utxosToParse = await this.$getFederationUtxosToParse(utxos);
           spentAsTip = utxosToParse.spentAsTip;
           unspentAsTip = utxosToParse.unspentAsTip;
-          logger.debug(`${unspentAsTip.length} / ${utxos.length} Federation UTXOs are unspent as of tip`);
+          // logger.debug(`${unspentAsTip.length} / ${utxos.length} Federation UTXOs are unspent as of tip`);
         } else { // If the audit status is too far in the past, it is useless to look for still unspent txos since they will all be spent as of the tip
           spentAsTip = utxos;
           unspentAsTip = [];
@@ -165,10 +171,25 @@ class ElementsParser {
 
         // Get the peg-out addresses that need to be scanned
         const redeemAddresses = await this.$getRedeemAddressesToScan();
-        if (redeemAddresses.length > 0) logger.debug(`Found ${redeemAddresses.length} peg-out addresses to scan`);
+        // if (redeemAddresses.length > 0) logger.debug(`Found ${redeemAddresses.length} peg-out addresses to scan`);
+
+        // Logging during initial indexing
+        if (auditProgress.confirmedTip - auditProgress.lastBlockAudit > 150) {
+          const elapsedSeconds = (Date.now() / 1000) - timer;
+          if (elapsedSeconds > 5) {
+            const runningFor = (Date.now() / 1000) - startedAt;
+            const blockPerSeconds = indexedThisRun / elapsedSeconds;
+            indexingSpeeds.push(blockPerSeconds);
+            if (indexingSpeeds.length > 100) indexingSpeeds.shift(); // Keep the length of the up to 100 last indexing speeds
+            const eta = (auditProgress.confirmedTip - auditProgress.lastBlockAudit) / (indexingSpeeds.reduce((a, b) => a + b, 0) / indexingSpeeds.length);
+            logger.debug(`Scanning ${utxos.length} Federation UTXOs and ${redeemAddresses.length} Peg-Out Addresses at height #${auditProgress.lastBlockAudit} / #${auditProgress.confirmedTip} | ~${blockPerSeconds.toFixed(2)} blocks/sec | elapsed: ${(runningFor / 60).toFixed(2)} minutes | ETA: ${(eta / 60).toFixed(2)} minutes`);
+            timer = Date.now() / 1000;
+            indexedThisRun = 0;
+          }
+        }
 
         // The slow way: parse the block to look for the spending tx
-        logger.debug(`${spentAsTip.length} / ${utxos.length} Federation UTXOs are spent as of tip`);
+        // logger.debug(`${spentAsTip.length} / ${utxos.length} Federation UTXOs are spent as of tip`);
 
         const blockHash: IBitcoinApi.ChainTips = await bitcoinSecondClient.getBlockHash(auditProgress.lastBlockAudit);
         const block: IBitcoinApi.Block = await bitcoinSecondClient.getBlock(blockHash, 2);
@@ -176,7 +197,7 @@ class ElementsParser {
         await DB.query('START TRANSACTION;');
         await this.$parseBitcoinBlock(block, spentAsTip, unspentAsTip, auditProgress.confirmedTip, redeemAddresses);
         await DB.query(`COMMIT;`);
-        logger.debug(`Watched for spending of ${nbUtxos} Federation UTXOs in block ${auditProgress.lastBlockAudit} / ${auditProgress.confirmedTip}`);
+        // logger.debug(`Watched for spending of ${nbUtxos} Federation UTXOs in block ${auditProgress.lastBlockAudit} / ${auditProgress.confirmedTip}`);
 
         // Finally, update the lastblockupdate of the remaining UTXOs and save to the database
         const [minBlockUpdate] = await DB.query(`SELECT MIN(lastblockupdate) AS lastblockupdate FROM federation_txos WHERE unspent = 1`)
@@ -184,6 +205,7 @@ class ElementsParser {
 
         auditProgress = await this.$getAuditProgress();
         auditProgress.lastBlockAudit++;
+        indexedThisRun++;
       }
 
       this.isUtxosUpdatingRunning = false;
@@ -225,7 +247,7 @@ class ElementsParser {
           await DB.query(`UPDATE federation_txos SET unspent = 0, lastblockupdate = ?, lasttimeupdate = ? WHERE txid = ? AND txindex = ?`, [block.height, block.time, txo.txid, txo.txindex]);
           // Remove the TXO from the utxo array
           spentAsTip.splice(spentAsTip.indexOf(txo), 1);
-          logger.debug(`Federation UTXO ${txo.txid}:${txo.txindex} (${txo.amount} sats) was spent in block ${block.height}.`);
+          logger.debug(`Federation UTXO ${txo.txid}:${txo.txindex} (${txo.amount} sats) was spent in block ${block.height}`);
         }
       }
       // Check if an output is sent to a change address of the federation
@@ -244,7 +266,7 @@ class ElementsParser {
               bitcoinaddress: output.scriptPubKey.address,
               amount: output.value * 100000000
             });
-            logger.debug(`Added new Federation UTXO ${tx.txid}:${output.n} of ${output.value * 100000000} sats belonging to ${output.scriptPubKey.address} (Federation change address).`);
+            logger.debug(`Added new Federation UTXO ${tx.txid}:${output.n} (${output.value * 100000000} sats), change address: ${output.scriptPubKey.address}`);
           }
         }
         if (mightRedeemInThisBlock && output.scriptPubKey.address && redeemAddresses.includes(output.scriptPubKey.address)) {

From f4de3a44e07b8f8f855e8789fbd3463318610934 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Tue, 30 Jan 2024 14:25:08 +0100
Subject: [PATCH 45/92] Liquid: Add address column in recent pegs table

---
 .../recent-pegs-list.component.html           | 21 ++++++++++++++++---
 .../recent-pegs-list.component.scss           | 10 +++++++++
 .../recent-pegs-list.component.ts             |  2 +-
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
index 0343d74c4..b42689ef2 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
@@ -58,11 +58,23 @@
                 {{ peg.amount > 0 ? '+' : '-' }}<app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
               </td>
               <td class="output text-left">
-                <ng-container *ngIf="peg.bitcointxid; else noPeginMessage">
+                <ng-container *ngIf="peg.bitcointxid; else redeemInProgress">
                   <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + peg.bitcointxid + ':' + peg.bitcoinindex }}" target="_blank" style="color:#b86d12">
                     <app-truncate [text]="peg.bitcointxid + ':' + peg.bitcoinindex" [lastChars]="6"></app-truncate>
                   </a>
                 </ng-container>
+                <ng-template #redeemInProgress>
+                  <ng-container *ngIf="peg.bitcoinaddress; else noRedeem">
+                    <span class="text-muted">BTC Redemption in progress...</span>
+                  </ng-container>
+                </ng-template>
+              </td>
+              <td class="address text-left">
+                <ng-container *ngIf="peg.bitcoinaddress; else noRedeem">
+                  <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + peg.bitcoinaddress }}" target="_blank" style="color:#b86d12">
+                    <app-truncate [text]="peg.bitcoinaddress" [lastChars]="6"></app-truncate>
+                  </a>
+                </ng-container>
               </td>
               <td class="timestamp text-right">
                 &lrm;{{ peg.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
@@ -96,6 +108,9 @@
               <td class="output text-left">
                 <span class="skeleton-loader" style="max-width: 300px"></span>
               </td>
+              <td class="address text-left">
+                <span class="skeleton-loader" style="max-width: 140px"></span>
+              </td>
               <td class="timestamp text-right">
                 <span class="skeleton-loader" style="max-width: 140px"></span>
               </td>
@@ -120,6 +135,6 @@
 
 <br>
 
-<ng-template #noPeginMessage>
-  <span class="text-muted">BTC Redeem in progress...</span>
+<ng-template #noRedeem>
+  <span class="text-muted">-</span>
 </ng-template>
\ No newline at end of file
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
index eccc42957..94a3de637 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
@@ -67,6 +67,16 @@ tr, td, th {
   }
 }
 
+.address {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+  @media (max-width: 527px) {
+    display: none;
+  }
+}
+
 .timestamp {
   width: 18%;
   @media (max-width: 650px) {
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
index 2ff103301..01a41dca7 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
@@ -94,7 +94,6 @@ export class RecentPegsListComponent implements OnInit {
         filter(auditUpdated => auditUpdated === true),
         throttleTime(40000),
         switchMap(_ => this.apiService.federationUtxos$()),
-        tap(_ => this.isLoading = false),
         share()
       );
 
@@ -134,6 +133,7 @@ export class RecentPegsListComponent implements OnInit {
           return b.blocktime - a.blocktime;
         });
       }),
+      tap(_ => this.isLoading = false),
       share()
     );
   }

From 1e15428a63a0e53a7b061cd7df12a72989e3773c Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Tue, 30 Jan 2024 15:11:51 +0100
Subject: [PATCH 46/92] Liquid Audit: fix i18n

---
 .../liquid-master-page/liquid-master-page.component.html  | 2 +-
 .../federation-addresses-list.component.html              | 4 ++--
 .../federation-addresses-stats.component.html             | 6 +++---
 .../federation-utxos-list.component.html                  | 8 ++++----
 .../federation-wallet/federation-wallet.component.html    | 2 +-
 .../recent-pegs-list/recent-pegs-list.component.html      | 6 +++---
 .../recent-pegs-stats/recent-pegs-stats.component.html    | 2 +-
 .../reserves-ratio-stats.component.html                   | 6 +++---
 .../reserves-supply-stats.component.html                  | 2 +-
 frontend/src/app/dashboard/dashboard.component.html       | 2 +-
 10 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
index dce0829aa..760cadda4 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
@@ -79,7 +79,7 @@
         <a class="nav-link" [routerLink]="['/assets' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" i18n-title="master-page.assets" title="Assets"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" id="btn-audit">
-        <a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'scale-balanced']" [fixedWidth]="true" i18n-title="master-page.audit" title="BTC Reserves Audit"></fa-icon></a>
+        <a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'scale-balanced']" [fixedWidth]="true" i18n-title="master-page.btc-reserves-audit" title="BTC Reserves Audit"></fa-icon></a>
       </li>
       <li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active" id="btn-docs">
         <a class="nav-link" [routerLink]="['/docs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="master-page.docs" title="Docs"></fa-icon></a>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
index eb4348492..9b227be18 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
@@ -6,8 +6,8 @@
   <div style="min-height: 295px">
     <table class="table table-borderless">
       <thead style="vertical-align: middle;">
-        <th class="address text-left" [ngClass]="{'widget': widget}" i18n="liquid.address">Address</th>
-        <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="liquid.balance">Balance</th>
+        <th class="address text-left" [ngClass]="{'widget': widget}" i18n="shared.address">Address</th>
+        <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="address.balance">Balance</th>
       </thead>
       <tbody *ngIf="federationAddresses$ | async as addresses; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
         <ng-container *ngIf="widget; else regularRows">
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
index cf7bf5e27..8a1c258b5 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
@@ -3,10 +3,10 @@
     <div class="fee-estimation-container">
       <div class="item">
         <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
-          <h5 class="card-title" i18n="liquid.federation-wallet">Liquid Federation Wallet <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+          <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
         </a>
         <div class="card-text">
-          <div class="fee-text">{{ federationAddresses.length }} <span i18n="liquid.addresses">addresses</span></div>
+          <div class="fee-text">{{ federationAddresses.length }} <span i18n="shared.addresses">addresses</span></div>
           <span class="fiat" *ngIf="(federationAddressesOneMonthAgo$ | async) as federationAddressesOneMonthAgo; else loadingSkeleton" i18n-ngbTooltip="liquid.percentage-change-last-month" ngbTooltip="Percentage change past month" placement="bottom">
             <app-change [current]="federationAddresses.length" [previous]="federationAddressesOneMonthAgo.addresses_count_one_month"></app-change>
           </span>
@@ -19,7 +19,7 @@
   <div class="fee-estimation-container loading-container">
     <div class="item">
       <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
-        <h5 class="card-title" i18n="liquid.federation-wallet">Liquid Federation Wallet <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+        <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
       </a>
       <div class="card-text">
         <div class="skeleton-loader"></div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index 30d8e3a82..2417a546a 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -7,11 +7,11 @@
   <div style="min-height: 295px">
     <table class="table table-borderless">
       <thead style="vertical-align: middle;">
-        <th class="txid text-left" [ngClass]="{'widget': widget}" i18n="liquid.output">Output</th>
-        <th class="address text-left" *ngIf="!widget" i18n="liquid.address">Address</th>
-        <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="liquid.amount">Amount</th>
+        <th class="txid text-left" [ngClass]="{'widget': widget}" i18n="transaction.output">Output</th>
+        <th class="address text-left" *ngIf="!widget" i18n="shared.address">Address</th>
+        <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="shared.amount">Amount</th>
         <th class="pegin text-left" *ngIf="!widget" i18n="liquid.related-peg-in">Related Peg-In</th>
-        <th class="timestamp text-right" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
+        <th class="timestamp text-right" i18n="shared.date" [ngClass]="{'widget': widget}">Date</th>
       </thead>
       <tbody *ngIf="federationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
         <ng-container *ngIf="widget; else regularRows">
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.html
index 1e04e1ee9..1bb397533 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.html
@@ -10,7 +10,7 @@
         
       </li>
       <li class="nav-item">
-        <a class="nav-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]" routerLinkActive="active">Addresses</a>
+        <a class="nav-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]" routerLinkActive="active"><ng-container i18n="mining.addresses">Addresses</ng-container></a>
       </li>
     </ul>
   </div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
index b42689ef2..9613caa33 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
@@ -13,9 +13,9 @@
       <table class="table table-borderless">
         <thead style="vertical-align: middle;">
           <th class="transaction text-left" [ngClass]="{'widget': widget}" i18n="shared.transaction">Transaction</th>
-          <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="liquid.amount">Amount</th>
+          <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="shared.amount">Amount</th>
           <th class="output text-left" *ngIf="!widget" i18n="liquid.bitcoin-funding-redeem">BTC Funding / Redeem</th>
-          <th class="timestamp text-right" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
+          <th class="timestamp text-right" i18n="shared.date" [ngClass]="{'widget': widget}">Date</th>
         </thead>
         <tbody *ngIf="recentPegs$ | async as pegs; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
           <ng-container *ngIf="widget; else regularRows">
@@ -65,7 +65,7 @@
                 </ng-container>
                 <ng-template #redeemInProgress>
                   <ng-container *ngIf="peg.bitcoinaddress; else noRedeem">
-                    <span class="text-muted">BTC Redemption in progress...</span>
+                    <span class="text-muted" i18n="liquid.redemption-in-progress">BTC Redemption in progress...</span>
                   </ng-container>
                 </ng-template>
               </td>
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
index ddf51f9f6..eb5a57e69 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
@@ -1,7 +1,7 @@
 <div class="fee-estimation-container">
   <div class="item">
     <a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]">
-      <h5 class="card-title" i18n="liquid.recent-peg-in-out">Recent Peg-In / Out's <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+      <h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
     </a>
   </div>
 </div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
index 04d82f37b..dfaefd534 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
@@ -11,7 +11,7 @@
       </div>
 
       <div class="item"> 
-        <h5 class="card-title" i18n="liquid.peg-ratio-history">Avg Peg Ratio</h5> 
+        <h5 class="card-title" i18n="liquid.avg-peg-ratio">Avg Peg Ratio</h5> 
         <div class="card-text">
           <div class="fee-text" [ngClass]="{'danger' : unbackedMonths.avg < 1, 'correct': unbackedMonths.avg >= 1}">
             {{ unbackedMonths.avg.toFixed(5) }}
@@ -25,14 +25,14 @@
 <ng-template #loadingData>
   <div class="fee-estimation-container loading-container">
     <div class="item">
-      <h5 class="card-title" i18n="liquid.peg-ratio-history">Peg Ratio History</h5>
+      <h5 class="card-title" i18n="liquid.unpeg">Unpeg</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>
       </div>
     </div>
 
     <div class="item"> 
-      <h5 class="card-title" i18n="liquid.peg-ratio-history">Avg Peg Ratio</h5> 
+      <h5 class="card-title" i18n="liquid.avg-peg-ratio">Avg Peg Ratio</h5> 
       <div class="card-text">
         <div class="skeleton-loader"></div>
       </div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
index 8deeba839..e8a369846 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="item">
-        <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">BTC Reserves</h5>
+        <h5 class="card-title" i18n="dashboard.btc-reserves">BTC Reserves</h5>
         <div class="card-text">
           <div class="fee-text">{{ (+currentReserves.amount) / 100000000 | number: '1.2-2' }} <span style="color: #b86d12;">BTC</span></div>
           <span class="fiat">
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index b7e5e01d2..1f4054f34 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -276,7 +276,7 @@
     </div>
     <div class="item">
       <a class="title-link" [routerLink]="['/audit' | relativeUrl]">
-        <h5 class="card-title" i18n="dashboard.btc-reserves">BTC Reserves <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+        <h5 class="card-title"><ng-container i18n="dashboard.btc-reserves">BTC Reserves</ng-container> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
       </a>
       <ng-container *ngIf="(currentReserves$ | async) as currentReserves; else loadingTransactions">
         <p i18n-ngbTooltip="liquid.last-bitcoin-audit-block" [ngbTooltip]="'BTC reserves last updated at Bitcoin block ' + (currentReserves.lastBlockUpdate)" placement="top" class="card-text">{{ +(currentReserves.amount) / 100000000 | number: '1.2-2' }} <span class="bitcoin-color">BTC</span></p>

From db8ba7c938ff3118b54f847ba2da2a905e406c66 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 30 Jan 2024 16:41:35 +0000
Subject: [PATCH 47/92] More robust error handling and logging during summaries
 indexing

---
 backend/src/api/blocks.ts                     | 37 +++++++++++++------
 backend/src/api/common.ts                     | 13 ++++++-
 .../repositories/BlocksAuditsRepository.ts    |  2 +-
 backend/src/repositories/BlocksRepository.ts  | 14 +++----
 .../repositories/BlocksSummariesRepository.ts |  3 +-
 backend/src/utils/secp256k1.ts                |  3 ++
 6 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/backend/src/api/blocks.ts b/backend/src/api/blocks.ts
index 2cd043fe2..837bc0ee9 100644
--- a/backend/src/api/blocks.ts
+++ b/backend/src/api/blocks.ts
@@ -2,7 +2,7 @@ import config from '../config';
 import bitcoinApi, { bitcoinCoreApi } from './bitcoin/bitcoin-api-factory';
 import logger from '../logger';
 import memPool from './mempool';
-import { BlockExtended, BlockExtension, BlockSummary, PoolTag, TransactionExtended, TransactionMinerInfo, CpfpSummary, MempoolTransactionExtended, TransactionClassified } from '../mempool.interfaces';
+import { BlockExtended, BlockExtension, BlockSummary, PoolTag, TransactionExtended, TransactionMinerInfo, CpfpSummary, MempoolTransactionExtended, TransactionClassified, BlockAudit } from '../mempool.interfaces';
 import { Common } from './common';
 import diskCache from './disk-cache';
 import transactionUtils from './transaction-utils';
@@ -451,7 +451,9 @@ class Blocks {
         if (config.MEMPOOL.BACKEND === 'esplora') {
           const txs = (await bitcoinApi.$getTxsForBlock(block.hash)).map(tx => transactionUtils.extendTransaction(tx));
           const cpfpSummary = await this.$indexCPFP(block.hash, block.height, txs);
-          await this.$getStrippedBlockTransactions(block.hash, true, true, cpfpSummary, block.height); // This will index the block summary
+          if (cpfpSummary) {
+            await this.$getStrippedBlockTransactions(block.hash, true, true, cpfpSummary, block.height); // This will index the block summary
+          }
         } else {
           await this.$getStrippedBlockTransactions(block.hash, true, true); // This will index the block summary
         }
@@ -995,11 +997,11 @@ class Blocks {
     return state;
   }
 
-  private updateTimerProgress(state, msg) {
+  private updateTimerProgress(state, msg): void {
     state.progress = msg;
   }
 
-  private clearTimer(state) {
+  private clearTimer(state): void {
     if (state.timer) {
       clearTimeout(state.timer);
     }
@@ -1088,13 +1090,19 @@ class Blocks {
       summary = {
         id: hash,
         transactions: cpfpSummary.transactions.map(tx => {
+          let flags: number = 0;
+          try {
+            flags = tx.flags || Common.getTransactionFlags(tx);
+          } catch (e) {
+            logger.warn('Failed to classify transaction: ' + (e instanceof Error ? e.message : e));
+          }
           return {
             txid: tx.txid,
             fee: tx.fee || 0,
             vsize: tx.vsize,
             value: Math.round(tx.vout.reduce((acc, vout) => acc + (vout.value ? vout.value : 0), 0)),
             rate: tx.effectiveFeePerVsize,
-            flags: tx.flags || Common.getTransactionFlags(tx),
+            flags: flags,
           };
         }),
       };
@@ -1284,7 +1292,7 @@ class Blocks {
     return blocks;
   }
 
-  public async $getBlockAuditSummary(hash: string): Promise<any> {
+  public async $getBlockAuditSummary(hash: string): Promise<BlockAudit | null> {
     if (['mainnet', 'testnet', 'signet'].includes(config.MEMPOOL.NETWORK)) {
       return BlocksAuditsRepository.$getBlockAudit(hash);
     } else {
@@ -1304,7 +1312,7 @@ class Blocks {
     return this.currentBlockHeight;
   }
 
-  public async $indexCPFP(hash: string, height: number, txs?: TransactionExtended[]): Promise<CpfpSummary> {
+  public async $indexCPFP(hash: string, height: number, txs?: TransactionExtended[]): Promise<CpfpSummary | null> {
     let transactions = txs;
     if (!transactions) {
       if (config.MEMPOOL.BACKEND === 'esplora') {
@@ -1319,14 +1327,19 @@ class Blocks {
       }
     }
 
-    const summary = Common.calculateCpfp(height, transactions as TransactionExtended[]);
+    if (transactions?.length != null) {
+      const summary = Common.calculateCpfp(height, transactions as TransactionExtended[]);
 
-    await this.$saveCpfp(hash, height, summary);
+      await this.$saveCpfp(hash, height, summary);
 
-    const effectiveFeeStats = Common.calcEffectiveFeeStatistics(summary.transactions);
-    await blocksRepository.$saveEffectiveFeeStats(hash, effectiveFeeStats);
+      const effectiveFeeStats = Common.calcEffectiveFeeStatistics(summary.transactions);
+      await blocksRepository.$saveEffectiveFeeStats(hash, effectiveFeeStats);
 
-    return summary;
+      return summary;
+    } else {
+      logger.err(`Cannot index CPFP for block ${height} - missing transaction data`);
+      return null;
+    }
   }
 
   public async $saveCpfp(hash: string, height: number, cpfpSummary: CpfpSummary): Promise<void> {
diff --git a/backend/src/api/common.ts b/backend/src/api/common.ts
index 208c67d70..63c215a8f 100644
--- a/backend/src/api/common.ts
+++ b/backend/src/api/common.ts
@@ -6,6 +6,7 @@ import { NodeSocket } from '../repositories/NodesSocketsRepository';
 import { isIP } from 'net';
 import transactionUtils from './transaction-utils';
 import { isPoint } from '../utils/secp256k1';
+import logger from '../logger';
 export class Common {
   static nativeAssetId = config.MEMPOOL.NETWORK === 'liquidtestnet' ?
     '144c654344aa716d6f3abcc1ca90e5641e4e2a7f633bc09fe3baf64585819a49'
@@ -261,6 +262,9 @@ export class Common {
         case 'v0_p2wpkh': flags |= TransactionFlags.p2wpkh; break;
         case 'v0_p2wsh': flags |= TransactionFlags.p2wsh; break;
         case 'v1_p2tr': {
+          if (!vin.witness?.length) {
+            throw new Error('Taproot input missing witness data');
+          }
           flags |= TransactionFlags.p2tr;
           // in taproot, if the last witness item begins with 0x50, it's an annex
           const hasAnnex = vin.witness?.[vin.witness.length - 1].startsWith('50');
@@ -301,7 +305,7 @@ export class Common {
         case 'p2pk': {
           flags |= TransactionFlags.p2pk;
           // detect fake pubkey (i.e. not a valid DER point on the secp256k1 curve)
-          hasFakePubkey = hasFakePubkey || !isPoint(vout.scriptpubkey.slice(2, -2));
+          hasFakePubkey = hasFakePubkey || !isPoint(vout.scriptpubkey?.slice(2, -2));
         } break;
         case 'multisig': {
           flags |= TransactionFlags.p2ms;
@@ -348,7 +352,12 @@ export class Common {
   }
 
   static classifyTransaction(tx: TransactionExtended): TransactionClassified {
-    const flags = Common.getTransactionFlags(tx);
+    let flags = 0;
+    try {
+      flags = Common.getTransactionFlags(tx);
+    } catch (e) {
+      logger.warn('Failed to add classification flags to transaction: ' + (e instanceof Error ? e.message : e));
+    }
     tx.flags = flags;
     return {
       ...Common.stripTransaction(tx),
diff --git a/backend/src/repositories/BlocksAuditsRepository.ts b/backend/src/repositories/BlocksAuditsRepository.ts
index c17958d2b..585abdedf 100644
--- a/backend/src/repositories/BlocksAuditsRepository.ts
+++ b/backend/src/repositories/BlocksAuditsRepository.ts
@@ -59,7 +59,7 @@ class BlocksAuditRepositories {
     }
   }
 
-  public async $getBlockAudit(hash: string): Promise<any> {
+  public async $getBlockAudit(hash: string): Promise<BlockAudit | null> {
     try {
       const [rows]: any[] = await DB.query(
         `SELECT blocks_audits.height, blocks_audits.hash as id, UNIX_TIMESTAMP(blocks_audits.time) as timestamp,
diff --git a/backend/src/repositories/BlocksRepository.ts b/backend/src/repositories/BlocksRepository.ts
index a2a084265..18346740b 100644
--- a/backend/src/repositories/BlocksRepository.ts
+++ b/backend/src/repositories/BlocksRepository.ts
@@ -5,7 +5,7 @@ import logger from '../logger';
 import { Common } from '../api/common';
 import PoolsRepository from './PoolsRepository';
 import HashratesRepository from './HashratesRepository';
-import { escape } from 'mysql2';
+import { RowDataPacket, escape } from 'mysql2';
 import BlocksSummariesRepository from './BlocksSummariesRepository';
 import DifficultyAdjustmentsRepository from './DifficultyAdjustmentsRepository';
 import bitcoinClient from '../api/bitcoin/bitcoin-client';
@@ -802,10 +802,10 @@ class BlocksRepository {
   /**
    * Get a list of blocks that have been indexed
    */
-  public async $getIndexedBlocks(): Promise<any[]> {
+  public async $getIndexedBlocks(): Promise<{ height: number, hash: string }[]> {
     try {
-      const [rows]: any = await DB.query(`SELECT height, hash FROM blocks ORDER BY height DESC`);
-      return rows;
+      const [rows] = await DB.query(`SELECT height, hash FROM blocks ORDER BY height DESC`) as RowDataPacket[][];
+      return rows as { height: number, hash: string }[];
     } catch (e) {
       logger.err('Cannot generate block size and weight history. Reason: ' + (e instanceof Error ? e.message : e));
       throw e;
@@ -815,7 +815,7 @@ class BlocksRepository {
   /**
    * Get a list of blocks that have not had CPFP data indexed
    */
-   public async $getCPFPUnindexedBlocks(): Promise<any[]> {
+   public async $getCPFPUnindexedBlocks(): Promise<number[]> {
     try {
       const blockchainInfo = await bitcoinClient.getBlockchainInfo();
       const currentBlockHeight = blockchainInfo.blocks;
@@ -825,13 +825,13 @@ class BlocksRepository {
       }
       const minHeight = Math.max(0, currentBlockHeight - indexingBlockAmount + 1);
 
-      const [rows]: any[] = await DB.query(`
+      const [rows] = await DB.query(`
         SELECT height
         FROM compact_cpfp_clusters
         WHERE height <= ? AND height >= ?
         GROUP BY height
         ORDER BY height DESC;
-      `, [currentBlockHeight, minHeight]);
+      `, [currentBlockHeight, minHeight]) as RowDataPacket[][];
 
       const indexedHeights = {};
       rows.forEach((row) => { indexedHeights[row.height] = true; });
diff --git a/backend/src/repositories/BlocksSummariesRepository.ts b/backend/src/repositories/BlocksSummariesRepository.ts
index f85914e31..63ad5ddf2 100644
--- a/backend/src/repositories/BlocksSummariesRepository.ts
+++ b/backend/src/repositories/BlocksSummariesRepository.ts
@@ -1,3 +1,4 @@
+import { RowDataPacket } from 'mysql2';
 import DB from '../database';
 import logger from '../logger';
 import { BlockSummary, TransactionClassified } from '../mempool.interfaces';
@@ -69,7 +70,7 @@ class BlocksSummariesRepository {
 
   public async $getIndexedSummariesId(): Promise<string[]> {
     try {
-      const [rows]: any[] = await DB.query(`SELECT id from blocks_summaries`);
+      const [rows] = await DB.query(`SELECT id from blocks_summaries`) as RowDataPacket[][];
       return rows.map(row => row.id);
     } catch (e) {
       logger.err(`Cannot get block summaries id list. Reason: ` + (e instanceof Error ? e.message : e));
diff --git a/backend/src/utils/secp256k1.ts b/backend/src/utils/secp256k1.ts
index cc731f17d..9e0f6dc3b 100644
--- a/backend/src/utils/secp256k1.ts
+++ b/backend/src/utils/secp256k1.ts
@@ -31,6 +31,9 @@ const curveP = BigInt(`0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
  * @returns {boolean} true if the point is on the SECP256K1 curve
  */
 export function isPoint(pointHex: string): boolean {
+  if (!pointHex?.length) {
+    return false;
+  }
   if (
     !(
       // is uncompressed

From 7ab5b2a2b7455299b40fa1ef459bc2269f470356 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Thu, 1 Feb 2024 12:13:34 +0100
Subject: [PATCH 48/92] Add check for mempoolBlocks length in mempool
 subscription

---
 .../src/app/components/transaction/transaction.component.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index ace4ded37..9f72931ca 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -507,7 +507,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
           }
         }
       }
-      if (!found && txFeePerVSize < mempoolBlocks[mempoolBlocks.length - 1].feeRange[0]) {
+      if (!found && mempoolBlocks.length && txFeePerVSize < mempoolBlocks[mempoolBlocks.length - 1].feeRange[0]) {
         this.txInBlockIndex = 7;
       }
     });

From 163c0b6d78be5485d4f46e8aa85d25031a01a111 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Tue, 30 Jan 2024 20:01:17 +0100
Subject: [PATCH 49/92] Liquid peg outs address indexing: support for
 duplicates and minor fixes

---
 backend/src/api/liquid/elements-parser.ts     | 70 +++++++++++--------
 .../federation-addresses-list.component.html  |  3 +-
 .../federation-addresses-list.component.scss  |  7 --
 .../federation-addresses-stats.component.html |  4 +-
 .../federation-utxos-list.component.html      |  2 -
 .../recent-pegs-list.component.html           | 17 +++--
 .../recent-pegs-list.component.scss           |  6 +-
 .../recent-pegs-list.component.ts             |  5 +-
 .../recent-pegs-stats.component.html          |  2 +-
 .../reserves-supply-stats.component.html      |  2 +-
 .../app/dashboard/dashboard.component.html    |  2 +-
 11 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/backend/src/api/liquid/elements-parser.ts b/backend/src/api/liquid/elements-parser.ts
index b921dd499..4a417cbbe 100644
--- a/backend/src/api/liquid/elements-parser.ts
+++ b/backend/src/api/liquid/elements-parser.ts
@@ -154,7 +154,9 @@ class ElementsParser {
 
         // First, get the current UTXOs that need to be scanned in the block
         const utxos = await this.$getFederationUtxosToScan(auditProgress.lastBlockAudit);
-        // logger.debug(`Found ${utxos.length} Federation UTXOs to scan in Bitcoin block height #${auditProgress.lastBlockAudit} / #${auditProgress.confirmedTip}`);
+
+        // Get the peg-out addresses that need to be scanned
+        const redeemAddresses = await this.$getRedeemAddressesToScan();
 
         // The fast way: check if these UTXOs are still unspent as of the current block with gettxout
         let spentAsTip: any[];
@@ -163,41 +165,33 @@ class ElementsParser {
           const utxosToParse = await this.$getFederationUtxosToParse(utxos);
           spentAsTip = utxosToParse.spentAsTip;
           unspentAsTip = utxosToParse.unspentAsTip;
-          // logger.debug(`${unspentAsTip.length} / ${utxos.length} Federation UTXOs are unspent as of tip`);
-        } else { // If the audit status is too far in the past, it is useless to look for still unspent txos since they will all be spent as of the tip
+          logger.debug(`Found ${utxos.length} Federation UTXOs and ${redeemAddresses.length} Peg-Out Addresses to scan in Bitcoin block height #${auditProgress.lastBlockAudit} / #${auditProgress.confirmedTip}`);
+          logger.debug(`${unspentAsTip.length} / ${utxos.length} Federation UTXOs are unspent as of tip`);
+        } else { // If the audit status is too far in the past, it is useless and wasteful to look for still unspent txos since they will all be spent as of the tip
           spentAsTip = utxos;
           unspentAsTip = [];
-        }
 
-        // Get the peg-out addresses that need to be scanned
-        const redeemAddresses = await this.$getRedeemAddressesToScan();
-        // if (redeemAddresses.length > 0) logger.debug(`Found ${redeemAddresses.length} peg-out addresses to scan`);
-
-        // Logging during initial indexing
-        if (auditProgress.confirmedTip - auditProgress.lastBlockAudit > 150) {
+          // Logging
           const elapsedSeconds = (Date.now() / 1000) - timer;
           if (elapsedSeconds > 5) {
             const runningFor = (Date.now() / 1000) - startedAt;
             const blockPerSeconds = indexedThisRun / elapsedSeconds;
             indexingSpeeds.push(blockPerSeconds);
             if (indexingSpeeds.length > 100) indexingSpeeds.shift(); // Keep the length of the up to 100 last indexing speeds
-            const eta = (auditProgress.confirmedTip - auditProgress.lastBlockAudit) / (indexingSpeeds.reduce((a, b) => a + b, 0) / indexingSpeeds.length);
-            logger.debug(`Scanning ${utxos.length} Federation UTXOs and ${redeemAddresses.length} Peg-Out Addresses at height #${auditProgress.lastBlockAudit} / #${auditProgress.confirmedTip} | ~${blockPerSeconds.toFixed(2)} blocks/sec | elapsed: ${(runningFor / 60).toFixed(2)} minutes | ETA: ${(eta / 60).toFixed(2)} minutes`);
+            const meanIndexingSpeed = indexingSpeeds.reduce((a, b) => a + b, 0) / indexingSpeeds.length;
+            const eta = (auditProgress.confirmedTip - auditProgress.lastBlockAudit) / meanIndexingSpeed;
+            logger.debug(`Scanning ${utxos.length} Federation UTXOs and ${redeemAddresses.length} Peg-Out Addresses at Bitcoin block height #${auditProgress.lastBlockAudit} / #${auditProgress.confirmedTip} | ~${meanIndexingSpeed.toFixed(2)} blocks/sec | elapsed: ${(runningFor / 60).toFixed(0)} minutes | ETA: ${(eta / 60).toFixed(0)} minutes`);
             timer = Date.now() / 1000;
             indexedThisRun = 0;
           }
         }
 
         // The slow way: parse the block to look for the spending tx
-        // logger.debug(`${spentAsTip.length} / ${utxos.length} Federation UTXOs are spent as of tip`);
-
         const blockHash: IBitcoinApi.ChainTips = await bitcoinSecondClient.getBlockHash(auditProgress.lastBlockAudit);
         const block: IBitcoinApi.Block = await bitcoinSecondClient.getBlock(blockHash, 2);
-        const nbUtxos = spentAsTip.length;
         await DB.query('START TRANSACTION;');
         await this.$parseBitcoinBlock(block, spentAsTip, unspentAsTip, auditProgress.confirmedTip, redeemAddresses);
         await DB.query(`COMMIT;`);
-        // logger.debug(`Watched for spending of ${nbUtxos} Federation UTXOs in block ${auditProgress.lastBlockAudit} / ${auditProgress.confirmedTip}`);
 
         // Finally, update the lastblockupdate of the remaining UTXOs and save to the database
         const [minBlockUpdate] = await DB.query(`SELECT MIN(lastblockupdate) AS lastblockupdate FROM federation_txos WHERE unspent = 1`)
@@ -236,14 +230,15 @@ class ElementsParser {
     return {spentAsTip, unspentAsTip};
   }
 
-  protected async $parseBitcoinBlock(block: IBitcoinApi.Block, spentAsTip: any[], unspentAsTip: any[], confirmedTip: number, redeemAddresses: string[] = []) {
-    let mightRedeemInThisBlock = false; // If a Federation UTXO is spent in this block, we might find a peg-out address in the outputs...
+  protected async $parseBitcoinBlock(block: IBitcoinApi.Block, spentAsTip: any[], unspentAsTip: any[], confirmedTip: number, redeemAddressesData: any[] = []) {
+    const redeemAddresses: string[] = redeemAddressesData.map(redeemAddress => redeemAddress.bitcoinaddress);
     for (const tx of block.tx) {
+      let mightRedeemInThisTx = false; // If a Federation UTXO is spent in this block, we might find a peg-out address in the outputs...
       // Check if the Federation UTXOs that was spent as of tip are spent in this block
       for (const input of tx.vin) {
         const txo = spentAsTip.find(txo => txo.txid === input.txid && txo.txindex === input.vout);
         if (txo) {
-          mightRedeemInThisBlock = true;
+          mightRedeemInThisTx = true;
           await DB.query(`UPDATE federation_txos SET unspent = 0, lastblockupdate = ?, lasttimeupdate = ? WHERE txid = ? AND txindex = ?`, [block.height, block.time, txo.txid, txo.txindex]);
           // Remove the TXO from the utxo array
           spentAsTip.splice(spentAsTip.indexOf(txo), 1);
@@ -269,16 +264,31 @@ class ElementsParser {
             logger.debug(`Added new Federation UTXO ${tx.txid}:${output.n} (${output.value * 100000000} sats), change address: ${output.scriptPubKey.address}`);
           }
         }
-        if (mightRedeemInThisBlock && output.scriptPubKey.address && redeemAddresses.includes(output.scriptPubKey.address)) {
-          const query_add_redeem = `UPDATE elements_pegs SET bitcointxid = ?, bitcoinindex = ? WHERE bitcoinaddress = ?`;
-          const params_add_redeem: (string | number)[] = [tx.txid, output.n, output.scriptPubKey.address];
-          await DB.query(query_add_redeem, params_add_redeem);
-          redeemAddresses.splice(redeemAddresses.indexOf(output.scriptPubKey.address), 1);
-          logger.debug(`Added redeem txid ${tx.txid}:${output.n} to peg-out address ${output.scriptPubKey.address}`);
+        if (mightRedeemInThisTx && output.scriptPubKey.address && redeemAddresses.includes(output.scriptPubKey.address)) {
+          // Find the number of times output.scriptPubKey.address appears in redeemAddresses. There can be address reuse for peg-outs...
+          const matchingAddress: any[] = redeemAddressesData.filter(redeemAddress => redeemAddress.bitcoinaddress === output.scriptPubKey.address && -redeemAddress.amount === Math.round(output.value * 100000000));
+          if (matchingAddress.length > 0) {
+            if (matchingAddress.length > 1) {
+              // If there are more than one peg out address with the same amount, we can't know which one redeemed the UTXO: we take the oldest one
+              matchingAddress.sort((a, b) => a.datetime - b.datetime);
+              logger.debug(`Found redeem txid ${tx.txid}:${output.n} to peg-out address ${matchingAddress[0].bitcoinaddress}, amount ${matchingAddress[0].amount}, datetime ${matchingAddress[0].datetime}`);
+            } else {
+              logger.debug(`Found redeem txid ${tx.txid}:${output.n} to peg-out address ${matchingAddress[0].bitcoinaddress}, amount ${matchingAddress[0].amount}`);
+            }
+            const query_add_redeem = `UPDATE elements_pegs SET bitcointxid = ?, bitcoinindex = ? WHERE bitcoinaddress = ? AND amount = ? AND datetime = ?`;
+            const params_add_redeem: (string | number)[] = [tx.txid, output.n, matchingAddress[0].bitcoinaddress, matchingAddress[0].amount, matchingAddress[0].datetime];
+            await DB.query(query_add_redeem, params_add_redeem);
+            const index = redeemAddressesData.indexOf(matchingAddress[0]);
+            redeemAddressesData.splice(index, 1);
+            redeemAddresses.splice(index, 1);
+          } else { // The output amount does not match the peg-out amount... log it
+            logger.debug(`Found redeem txid ${tx.txid}:${output.n} to peg-out address ${output.scriptPubKey.address} but output amount ${Math.round(output.value * 100000000)} does not match the peg-out amount!`);
+          }
         }
       }
     }
 
+
     for (const utxo of spentAsTip) {
       await DB.query(`UPDATE federation_txos SET lastblockupdate = ? WHERE txid = ? AND txindex = ?`, [block.height, utxo.txid, utxo.txindex]);    
     }
@@ -318,10 +328,10 @@ class ElementsParser {
     return rows[0]['number'];
   }
 
-  protected async $getRedeemAddressesToScan(): Promise<string[]> {
-    const query = `SELECT bitcoinaddress FROM elements_pegs where amount < 0 AND bitcoinaddress != '' AND bitcointxid = '';`;
+  protected async $getRedeemAddressesToScan(): Promise<any[]> {
+    const query = `SELECT datetime, amount, bitcoinaddress FROM elements_pegs where amount < 0 AND bitcoinaddress != '' AND bitcointxid = '';`;
     const [rows]: any[] = await DB.query(query);
-    return rows.map((row: any) => row.bitcoinaddress);
+    return rows;
   }
 
   ///////////// DATA QUERY //////////////
@@ -423,9 +433,9 @@ class ElementsParser {
     return rows[0];
   }
 
-  // Get the 300 most recent pegouts from the federation
+  // Get recent pegouts from the federation (3 months old)
   public async $getRecentPegouts(): Promise<any> {
-    const query = `SELECT txid, txindex, amount, bitcoinaddress, bitcointxid, bitcoinindex, datetime AS blocktime FROM elements_pegs WHERE amount < 0 ORDER BY blocktime DESC LIMIT 300;`;
+    const query = `SELECT txid, txindex, amount, bitcoinaddress, bitcointxid, bitcoinindex, datetime AS blocktime FROM elements_pegs WHERE amount < 0 AND datetime > UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -90, CURRENT_TIMESTAMP())) ORDER BY blocktime;`;
     const [rows] = await DB.query(query);
     return rows;
   }
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
index 9b227be18..0a37b1d13 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.html
@@ -1,5 +1,4 @@
-<div [ngClass]="{'widget': widget, 'address-container': !widget}">
-  <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
+<div [ngClass]="{'widget': widget}">
 
   <div class="clearfix"></div>
 
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
index c13193d37..fb0232064 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
@@ -1,10 +1,3 @@
-.address-container {
-  @media (min-width: 1100px) {
-    margin-left: 80px;
-    margin-right: 80px;  
-  }
-}
-
 .spinner-border {
   height: 25px;
   width: 25px;
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
index 8a1c258b5..dace541b7 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
@@ -3,7 +3,7 @@
     <div class="fee-estimation-container">
       <div class="item">
         <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
-          <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+          <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
         </a>
         <div class="card-text">
           <div class="fee-text">{{ federationAddresses.length }} <span i18n="shared.addresses">addresses</span></div>
@@ -19,7 +19,7 @@
   <div class="fee-estimation-container loading-container">
     <div class="item">
       <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
-        <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+        <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
       </a>
       <div class="card-text">
         <div class="skeleton-loader"></div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index 2417a546a..7e8ca6e95 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -1,7 +1,5 @@
 <div [ngClass]="{'widget': widget}">
 
-  <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
-
   <div class="clearfix"></div>
   
   <div style="min-height: 295px">
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
index 9613caa33..b4ae3b774 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
@@ -5,8 +5,6 @@
       <h1 i18n="liquid.recent-pegs">Recent Peg-In / Out's</h1>
     </div>
 
-    <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
-
     <div class="clearfix"></div>
     
     <div style="min-height: 295px">
@@ -14,7 +12,8 @@
         <thead style="vertical-align: middle;">
           <th class="transaction text-left" [ngClass]="{'widget': widget}" i18n="shared.transaction">Transaction</th>
           <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="shared.amount">Amount</th>
-          <th class="output text-left" *ngIf="!widget" i18n="liquid.bitcoin-funding-redeem">BTC Funding / Redeem</th>
+          <th class="output text-left" *ngIf="!widget" i18n="liquid.fund-redemption-tx">Fund / Redemption Tx</th>
+          <th class="address text-left" *ngIf="!widget" i18n="liquid.bitcoin-address">BTC Address</th>
           <th class="timestamp text-right" i18n="shared.date" [ngClass]="{'widget': widget}">Date</th>
         </thead>
         <tbody *ngIf="recentPegs$ | async as pegs; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
@@ -23,17 +22,17 @@
               <td class="transaction text-left widget">
                 <ng-container *ngIf="peg.amount > 0">
                   <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vin=' + peg.txindex">
-                    <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
+                    <app-truncate [text]="peg.txid"></app-truncate>
                   </a>
                 </ng-container>
                 <ng-container *ngIf="peg.amount < 0">
                   <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vout=' + peg.txindex">
-                    <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
+                    <app-truncate [text]="peg.txid"></app-truncate>
                   </a>
                 </ng-container>
               </td>
-              <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
-                {{ peg.amount > 0 ? '+' : '-' }}<app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
+              <td class="amount text-right widget" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
+                <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
               </td>
               <td class="timestamp text-right widget">
                 <app-time kind="since" [time]="peg.blocktime"></app-time>
@@ -55,7 +54,7 @@
                 </ng-container>
               </td>
               <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
-                {{ peg.amount > 0 ? '+' : '-' }}<app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
+                <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
               </td>
               <td class="output text-left">
                 <ng-container *ngIf="peg.bitcointxid; else redeemInProgress">
@@ -65,7 +64,7 @@
                 </ng-container>
                 <ng-template #redeemInProgress>
                   <ng-container *ngIf="peg.bitcoinaddress; else noRedeem">
-                    <span class="text-muted" i18n="liquid.redemption-in-progress">BTC Redemption in progress...</span>
+                    <i><span class="text-muted" i18n="liquid.redemption-in-progress">Peg out in progress...</span></i>
                   </ng-container>
                 </ng-template>
               </td>
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
index 94a3de637..6efdaaf5c 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
@@ -32,7 +32,7 @@ tr, td, th {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 160px;
+  max-width: 120px;
 }
 .transaction.widget {
   width: 40%;
@@ -62,7 +62,7 @@ tr, td, th {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 160px;
-  @media (max-width: 840px) {
+  @media (max-width: 825px) {
     display: none;
   }
 }
@@ -72,7 +72,7 @@ tr, td, th {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 160px;
-  @media (max-width: 527px) {
+  @media (max-width: 840px) {
     display: none;
   }
 }
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
index 01a41dca7..bafaf73f0 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
@@ -14,8 +14,8 @@ import { WebsocketService } from '../../../services/websocket.service';
 })
 export class RecentPegsListComponent implements OnInit {
   @Input() widget: boolean = false;
-  @Input() recentPegIns$: Observable<RecentPeg[]>;
-  @Input() recentPegOuts$: Observable<RecentPeg[]>;
+  @Input() recentPegIns$: Observable<RecentPeg[]> = of([]);
+  @Input() recentPegOuts$: Observable<RecentPeg[]> = of([]);
 
   env: Env;
   isLoading = true;
@@ -133,6 +133,7 @@ export class RecentPegsListComponent implements OnInit {
           return b.blocktime - a.blocktime;
         });
       }),
+      filter(recentPegs => recentPegs.length > 0),
       tap(_ => this.isLoading = false),
       share()
     );
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
index eb5a57e69..fca78b881 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
@@ -1,7 +1,7 @@
 <div class="fee-estimation-container">
   <div class="item">
     <a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]">
-      <h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+      <h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
     </a>
   </div>
 </div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
index e8a369846..2856cc210 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html
@@ -6,7 +6,7 @@
         <div class="card-text">
           <div class="fee-text">{{ (+currentPeg.amount) / 100000000 | number: '1.2-2' }} <span>L-BTC</span></div>
           <span class="fiat">
-            <span>As of block&nbsp;<a [routerLink]="['/block', currentPeg.hash]" target="_blank">{{ currentPeg.lastBlockUpdate }}</a></span>
+            <span>As of block&nbsp;<a [routerLink]="['/block', currentPeg.hash]">{{ currentPeg.lastBlockUpdate }}</a></span>
           </span>
         </div>
       </div>
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 1f4054f34..92b64fe5e 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -276,7 +276,7 @@
     </div>
     <div class="item">
       <a class="title-link" [routerLink]="['/audit' | relativeUrl]">
-        <h5 class="card-title"><ng-container i18n="dashboard.btc-reserves">BTC Reserves</ng-container> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+        <h5 class="card-title"><ng-container i18n="dashboard.btc-reserves">BTC Reserves</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
       </a>
       <ng-container *ngIf="(currentReserves$ | async) as currentReserves; else loadingTransactions">
         <p i18n-ngbTooltip="liquid.last-bitcoin-audit-block" [ngbTooltip]="'BTC reserves last updated at Bitcoin block ' + (currentReserves.lastBlockUpdate)" placement="top" class="card-text">{{ +(currentReserves.amount) / 100000000 | number: '1.2-2' }} <span class="bitcoin-color">BTC</span></p>

From 0bf0d79ee4fec7e54e7e55642c65121a858ca4dc Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 31 Jan 2024 18:38:56 +0000
Subject: [PATCH 50/92] Fix error handling in acceleration data polling

---
 backend/src/api/bisq/markets-api.ts           |  2 +-
 backend/src/api/mining/mining.ts              |  2 +-
 .../repositories/BlocksAuditsRepository.ts    |  8 +++----
 backend/src/repositories/BlocksRepository.ts  |  2 +-
 .../src/repositories/HashratesRepository.ts   |  2 +-
 .../accelerator-dashboard.component.ts        | 22 ++++++++++---------
 6 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/backend/src/api/bisq/markets-api.ts b/backend/src/api/bisq/markets-api.ts
index 54e0297b7..1b5b93059 100644
--- a/backend/src/api/bisq/markets-api.ts
+++ b/backend/src/api/bisq/markets-api.ts
@@ -646,7 +646,7 @@ class BisqMarketsApi {
         case 'year':
             return strtotime('midnight first day of january', ts);
         default:
-            throw new Error('Unsupported interval: ' + interval);
+            throw new Error('Unsupported interval');
     }
 }
 
diff --git a/backend/src/api/mining/mining.ts b/backend/src/api/mining/mining.ts
index b23ad04c5..85554db2d 100644
--- a/backend/src/api/mining/mining.ts
+++ b/backend/src/api/mining/mining.ts
@@ -142,7 +142,7 @@ class Mining {
   public async $getPoolStat(slug: string): Promise<object> {
     const pool = await PoolsRepository.$getPool(slug);
     if (!pool) {
-      throw new Error('This mining pool does not exist ' + escape(slug));
+      throw new Error('This mining pool does not exist');
     }
 
     const blockCount: number = await BlocksRepository.$blockCount(pool.id);
diff --git a/backend/src/repositories/BlocksAuditsRepository.ts b/backend/src/repositories/BlocksAuditsRepository.ts
index c17958d2b..ea1162e72 100644
--- a/backend/src/repositories/BlocksAuditsRepository.ts
+++ b/backend/src/repositories/BlocksAuditsRepository.ts
@@ -75,8 +75,8 @@ class BlocksAuditRepositories {
         expected_weight as expectedWeight
         FROM blocks_audits
         JOIN blocks_templates ON blocks_templates.id = blocks_audits.hash
-        WHERE blocks_audits.hash = "${hash}"
-      `);
+        WHERE blocks_audits.hash = ?
+      `, [hash]);
       
       if (rows.length) {
         rows[0].missingTxs = JSON.parse(rows[0].missingTxs);
@@ -101,8 +101,8 @@ class BlocksAuditRepositories {
       const [rows]: any[] = await DB.query(
         `SELECT hash, match_rate as matchRate, expected_fees as expectedFees, expected_weight as expectedWeight
         FROM blocks_audits
-        WHERE blocks_audits.hash = "${hash}"
-      `);
+        WHERE blocks_audits.hash = ?
+      `, [hash]);
       return rows[0];
     } catch (e: any) {
       logger.err(`Cannot fetch block audit from db. Reason: ` + (e instanceof Error ? e.message : e));
diff --git a/backend/src/repositories/BlocksRepository.ts b/backend/src/repositories/BlocksRepository.ts
index a2a084265..52d85dc8c 100644
--- a/backend/src/repositories/BlocksRepository.ts
+++ b/backend/src/repositories/BlocksRepository.ts
@@ -478,7 +478,7 @@ class BlocksRepository {
   public async $getBlocksByPool(slug: string, startHeight?: number): Promise<BlockExtended[]> {
     const pool = await PoolsRepository.$getPool(slug);
     if (!pool) {
-      throw new Error('This mining pool does not exist ' + escape(slug));
+      throw new Error('This mining pool does not exist');
     }
 
     const params: any[] = [];
diff --git a/backend/src/repositories/HashratesRepository.ts b/backend/src/repositories/HashratesRepository.ts
index 96cbf6f75..ec44afebe 100644
--- a/backend/src/repositories/HashratesRepository.ts
+++ b/backend/src/repositories/HashratesRepository.ts
@@ -139,7 +139,7 @@ class HashratesRepository {
   public async $getPoolWeeklyHashrate(slug: string): Promise<any[]> {
     const pool = await PoolsRepository.$getPool(slug);
     if (!pool) {
-      throw new Error('This mining pool does not exist ' + escape(slug));
+      throw new Error('This mining pool does not exist');
     }
 
     // Find hashrate boundaries
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
index 79a77a600..c39dbd253 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -45,28 +45,30 @@ export class AcceleratorDashboardComponent implements OnInit {
     this.pendingAccelerations$ = interval(30000).pipe(
       startWith(true),
       switchMap(() => {
-        return this.apiService.getAccelerations$();
-      }),
-      catchError((e) => {
-        return of([]);
+        return this.apiService.getAccelerations$().pipe(
+          catchError(() => {
+            return of([]);
+          }),
+        );
       }),
       share(),
     );
 
     this.accelerations$ = this.stateService.chainTip$.pipe(
       distinctUntilChanged(),
-      switchMap((chainTip) => {
-        return this.apiService.getAccelerationHistory$({ timeframe: '1m' });
-      }),
-      catchError((e) => {
-        return of([]);
+      switchMap(() => {
+        return this.apiService.getAccelerationHistory$({ timeframe: '1m' }).pipe(
+          catchError(() => {
+            return of([]);
+          }),
+        );
       }),
       share(),
     );
 
     this.minedAccelerations$ = this.accelerations$.pipe(
       map(accelerations => {
-        return accelerations.filter(acc => ['mined', 'completed'].includes(acc.status))
+        return accelerations.filter(acc => ['mined', 'completed'].includes(acc.status));
       })
     );
 

From 7bfc6490429676369c60b974350c12d8edab5e70 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Sun, 4 Feb 2024 12:34:40 +0100
Subject: [PATCH 51/92] Add seo title to pegs and utxos tables

---
 .../federation-wallet/federation-wallet.component.ts       | 7 ++++++-
 .../recent-pegs-list/recent-pegs-list.component.ts         | 3 +++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.ts b/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.ts
index bfb7c4c1d..cbf931e28 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-wallet/federation-wallet.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { SeoService } from '../../../services/seo.service';
 
 @Component({
   selector: 'app-federation-wallet',
@@ -7,7 +8,11 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FederationWalletComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private seoService: SeoService
+  ) {
+    this.seoService.setTitle($localize`:@@993e5bc509c26db81d93018e24a6afe6e50cae52:Liquid Federation Wallet`);
+  }
 
   ngOnInit(): void {
   }
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
index bafaf73f0..e921e1250 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
@@ -5,6 +5,7 @@ import { ApiService } from '../../../services/api.service';
 import { Env, StateService } from '../../../services/state.service';
 import { AuditStatus, CurrentPegs, FederationUtxo, RecentPeg } from '../../../interfaces/node-api.interface';
 import { WebsocketService } from '../../../services/websocket.service';
+import { SeoService } from '../../../services/seo.service';
 
 @Component({
   selector: 'app-recent-pegs-list',
@@ -39,6 +40,7 @@ export class RecentPegsListComponent implements OnInit {
     private apiService: ApiService,
     public stateService: StateService,
     private websocketService: WebsocketService,
+    private seoService: SeoService
   ) {
   }
 
@@ -48,6 +50,7 @@ export class RecentPegsListComponent implements OnInit {
     this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
 
     if (!this.widget) {
+      this.seoService.setTitle($localize`:@@a8b0889ea1b41888f1e247f2731cc9322198ca04:Recent Peg-In / Out's`);
       this.websocketService.want(['blocks']);
       this.auditStatus$ = this.stateService.blocks$.pipe(
         takeUntil(this.destroy$),

From 03e4a21bcea3a2ccc09acbbf4ee73d1cad22e646 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Sun, 4 Feb 2024 13:01:07 +0100
Subject: [PATCH 52/92] Fix styling issue in peg and utxo widgets

---
 .../federation-utxos-list.component.html      |  2 +-
 .../recent-pegs-list.component.html           | 26 +++++++++----------
 .../recent-pegs-list.component.scss           | 18 +++++--------
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index 7e8ca6e95..1fdf1677e 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -49,7 +49,7 @@
                 </a>
               </ng-container>
               <ng-template #noPeginMessage>
-                <span class="text-muted">-</span>
+                <i><span class="text-muted" i18n="liquid.change-output">Change output</span></i>
               </ng-template>
             </td>
             <td class="timestamp text-right">
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
index b4ae3b774..d562328a5 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
@@ -11,10 +11,10 @@
       <table class="table table-borderless">
         <thead style="vertical-align: middle;">
           <th class="transaction text-left" [ngClass]="{'widget': widget}" i18n="shared.transaction">Transaction</th>
+          <th class="timestamp text-left" i18n="shared.date" [ngClass]="{'widget': widget}">Date</th>
           <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="shared.amount">Amount</th>
           <th class="output text-left" *ngIf="!widget" i18n="liquid.fund-redemption-tx">Fund / Redemption Tx</th>
           <th class="address text-left" *ngIf="!widget" i18n="liquid.bitcoin-address">BTC Address</th>
-          <th class="timestamp text-right" i18n="shared.date" [ngClass]="{'widget': widget}">Date</th>
         </thead>
         <tbody *ngIf="recentPegs$ | async as pegs; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
           <ng-container *ngIf="widget; else regularRows">
@@ -31,12 +31,12 @@
                   </a>
                 </ng-container>
               </td>
+              <td class="timestamp text-left widget">
+                <app-time kind="since" [time]="peg.blocktime"></app-time>
+              </td>
               <td class="amount text-right widget" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
                 <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
               </td>
-              <td class="timestamp text-right widget">
-                <app-time kind="since" [time]="peg.blocktime"></app-time>
-              </td>
             </tr>
           </ng-container>
           <ng-template #regularRows>
@@ -53,6 +53,10 @@
                   </a>
                 </ng-container>
               </td>
+              <td class="timestamp text-left">
+                &lrm;{{ peg.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
+                <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="peg.blocktime"></app-time>)</i></div>
+              </td>
               <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
                 <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
               </td>
@@ -75,10 +79,6 @@
                   </a>
                 </ng-container>
               </td>
-              <td class="timestamp text-right">
-                &lrm;{{ peg.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
-                <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="peg.blocktime"></app-time>)</i></div>
-              </td>
             </tr>
           </ng-template>
         </tbody>
@@ -88,10 +88,10 @@
               <td class="transaction text-left widget">
                 <span class="skeleton-loader" style="max-width: 400px"></span>
               </td>
-              <td class="amount text-right widget">
+              <td class="timestamp text-left widget">
                 <span class="skeleton-loader" style="max-width: 300px"></span>
               </td>
-              <td class="timestamp text-right widget">
+              <td class="amount text-right widget">
                 <span class="skeleton-loader" style="max-width: 300px"></span>
               </td>
             </tr>
@@ -101,6 +101,9 @@
               <td class="transaction text-left">
                 <span class="skeleton-loader" style="max-width: 300px"></span>
               </td>
+              <td class="timestamp text-left">
+                <span class="skeleton-loader" style="max-width: 140px"></span>
+              </td>
               <td class="amount text-right">
                 <span class="skeleton-loader" style="max-width: 140px"></span>
               </td>
@@ -110,9 +113,6 @@
               <td class="address text-left">
                 <span class="skeleton-loader" style="max-width: 140px"></span>
               </td>
-              <td class="timestamp text-right">
-                <span class="skeleton-loader" style="max-width: 140px"></span>
-              </td>
             </tr>
           </ng-template>
         </ng-template>
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
index 6efdaaf5c..92f5bc64f 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
@@ -28,14 +28,14 @@ tr, td, th {
 }
 
 .transaction {
-  width: 25%;
+  width: 20%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 120px;
 }
 .transaction.widget {
-  width: 40%;
+  width: 100%;
   
 }
 
@@ -50,19 +50,16 @@ tr, td, th {
 }
 
 .amount {
-  width: 12%;
-}
-.amount.widget {
-  width: 30%;
+  width: 0%;
 }
 
 .output {
-  width: 25%;
+  width: 20%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 160px;
-  @media (max-width: 825px) {
+  @media (max-width: 800px) {
     display: none;
   }
 }
@@ -72,13 +69,13 @@ tr, td, th {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 160px;
-  @media (max-width: 840px) {
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .timestamp {
-  width: 18%;
+  width: 0%;
   @media (max-width: 650px) {
     display: none;
   }
@@ -89,7 +86,6 @@ tr, td, th {
   }
 }
 .timestamp.widget {
-  width: 100%;
   @media (min-width: 768px) AND (max-width: 1050px) {
     display: none;
   }

From 575c4070984fbe15a5ba5aa9857b1b81872de31e Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Sun, 4 Feb 2024 13:03:41 +0100
Subject: [PATCH 53/92] Remove SQL transactions in federation utxos indexing

---
 backend/src/api/liquid/elements-parser.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/backend/src/api/liquid/elements-parser.ts b/backend/src/api/liquid/elements-parser.ts
index 4a417cbbe..05f35c085 100644
--- a/backend/src/api/liquid/elements-parser.ts
+++ b/backend/src/api/liquid/elements-parser.ts
@@ -26,14 +26,11 @@ class ElementsParser {
       for (let height = latestBlockHeight + 1; height <= tip; height++) {
         const blockHash: IBitcoinApi.ChainTips = await bitcoinClient.getBlockHash(height);
         const block: IBitcoinApi.Block = await bitcoinClient.getBlock(blockHash, 2);
-        await DB.query('START TRANSACTION;');
         await this.$parseBlock(block);
         await this.$saveLatestBlockToDatabase(block.height);
-        await DB.query('COMMIT;');
       }
       this.isRunning = false;
     } catch (e) {
-      await DB.query('ROLLBACK;');
       this.isRunning = false;
       throw new Error(e instanceof Error ? e.message : 'Error');
     }
@@ -189,9 +186,7 @@ class ElementsParser {
         // The slow way: parse the block to look for the spending tx
         const blockHash: IBitcoinApi.ChainTips = await bitcoinSecondClient.getBlockHash(auditProgress.lastBlockAudit);
         const block: IBitcoinApi.Block = await bitcoinSecondClient.getBlock(blockHash, 2);
-        await DB.query('START TRANSACTION;');
         await this.$parseBitcoinBlock(block, spentAsTip, unspentAsTip, auditProgress.confirmedTip, redeemAddresses);
-        await DB.query(`COMMIT;`);
 
         // Finally, update the lastblockupdate of the remaining UTXOs and save to the database
         const [minBlockUpdate] = await DB.query(`SELECT MIN(lastblockupdate) AS lastblockupdate FROM federation_txos WHERE unspent = 1`)
@@ -204,7 +199,6 @@ class ElementsParser {
 
       this.isUtxosUpdatingRunning = false;
     } catch (e) {
-      await DB.query('ROLLBACK;');
       this.isUtxosUpdatingRunning = false;
       throw new Error(e instanceof Error ? e.message : 'Error');
     } 

From ae38c3bf81efbbbb486da70d8ab1d780d1a84f31 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Sun, 4 Feb 2024 13:06:49 +0100
Subject: [PATCH 54/92] Update CLA for natsoni

---
 contributors/{natsee.txt => natsoni.txt} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename contributors/{natsee.txt => natsoni.txt} (90%)

diff --git a/contributors/natsee.txt b/contributors/natsoni.txt
similarity index 90%
rename from contributors/natsee.txt
rename to contributors/natsoni.txt
index c391ce823..ac1007ecf 100644
--- a/contributors/natsee.txt
+++ b/contributors/natsoni.txt
@@ -1,3 +1,3 @@
 I hereby accept the terms of the Contributor License Agreement in the CONTRIBUTING.md file of the mempool/mempool git repository as of November 16, 2023.
 
-Signed: natsee
+Signed: natsoni

From 19a4c10860479a2ef398e73916729c8913a46d1d Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Sun, 4 Feb 2024 14:57:04 +0100
Subject: [PATCH 55/92] Fix date alignment in utxos table

---
 .../federation-utxos-list.component.html               | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
index 1fdf1677e..ea52cd8d7 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html
@@ -9,7 +9,7 @@
         <th class="address text-left" *ngIf="!widget" i18n="shared.address">Address</th>
         <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="shared.amount">Amount</th>
         <th class="pegin text-left" *ngIf="!widget" i18n="liquid.related-peg-in">Related Peg-In</th>
-        <th class="timestamp text-right" i18n="shared.date" [ngClass]="{'widget': widget}">Date</th>
+        <th class="timestamp text-left" i18n="shared.date" [ngClass]="{'widget': widget}">Date</th>
       </thead>
       <tbody *ngIf="federationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
         <ng-container *ngIf="widget; else regularRows">
@@ -22,7 +22,7 @@
             <td class="amount text-right widget">
               <app-amount [satoshis]="utxo.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
             </td>
-            <td class="timestamp text-right widget">
+            <td class="timestamp text-left widget">
               <app-time kind="since" [time]="utxo.blocktime"></app-time>
             </td>
           </tr>
@@ -52,7 +52,7 @@
                 <i><span class="text-muted" i18n="liquid.change-output">Change output</span></i>
               </ng-template>
             </td>
-            <td class="timestamp text-right">
+            <td class="timestamp text-left">
               &lrm;{{ utxo.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
               <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="utxo.blocktime"></app-time>)</i></div>
             </td>
@@ -68,7 +68,7 @@
             <td class="amount text-right widget">
               <span class="skeleton-loader" style="max-width: 300px"></span>
             </td>
-            <td class="timestamp text-right widget">
+            <td class="timestamp text-left widget">
               <span class="skeleton-loader" style="max-width: 300px"></span>
             </td>
           </tr>
@@ -87,7 +87,7 @@
             <td class="pegin text-left">
               <span class="skeleton-loader" style="max-width: 300px"></span>
             </td>
-            <td class="timestamp text-right">
+            <td class="timestamp text-left">
               <span class="skeleton-loader" style="max-width: 140px"></span>
             </td>
           </tr>

From 933bc47b445688977de709b1d8f5a6473a28db30 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <git@knorrium.info>
Date: Sun, 4 Feb 2024 09:17:42 -0800
Subject: [PATCH 56/92] Add DRY_RUN and MEMPOOL_CDN options

---
 frontend/sync-assets.js | 147 +++++++++++++++++++++++++++++++---------
 1 file changed, 116 insertions(+), 31 deletions(-)

diff --git a/frontend/sync-assets.js b/frontend/sync-assets.js
index b15b5e315..2ff642e27 100644
--- a/frontend/sync-assets.js
+++ b/frontend/sync-assets.js
@@ -4,6 +4,8 @@ var crypto = require('crypto');
 var path = require('node:path');
 const LOG_TAG = '[sync-assets]';
 let verbose = false;
+let MEMPOOL_CDN = false;
+let DRY_RUN = false;
 
 if (parseInt(process.env.SKIP_SYNC) === 1) {
   console.log(`${LOG_TAG} SKIP_SYNC is set, not checking any assets`);
@@ -15,6 +17,18 @@ if (parseInt(process.env.VERBOSE) === 1) {
   verbose = true;
 }
 
+if (parseInt(process.env.MEMPOOL_CDN) === 1) {
+  console.log(`${LOG_TAG} MEMPOOL_CDN is set, assets will be downloaded from mempool.space`);
+  MEMPOOL_CDN = true;
+}
+
+if (parseInt(process.env.DRY_RUN) === 1) {
+  console.log(`${LOG_TAG} DRY_RUN is set, not downloading any assets`);
+  DRY_RUN = true;
+}
+
+const githubSecret = process.env.GITHUB_TOKEN;
+
 const CONFIG_FILE_NAME = 'mempool-frontend-config.json';
 let configContent = {};
 
@@ -46,8 +60,6 @@ try {
   }
 }
 
-const githubSecret = process.env.GITHUB_TOKEN;
-
 function download(filename, url) {
   https.get(url, (response) => {
     if (response.statusCode < 200 || response.statusCode > 299) {
@@ -60,7 +72,7 @@ function download(filename, url) {
   })
   .on('finish', () => {
     if (verbose) {
-      console.log(`${LOG_TAG} Finished downloading ${url} to ${filename}`);
+      console.log(`${LOG_TAG} \tFinished downloading ${url} to ${filename}`);
     }
   });
 }
@@ -72,7 +84,7 @@ function getLocalHash(filePath) {
   const hash = crypto.createHash('sha1').update(bufferWithHeader).digest('hex');
 
   if (verbose) {
-    console.log(`${LOG_TAG} \tgetLocalHash ${filePath} ${hash}`);
+    console.log(`${LOG_TAG} \t\tgetLocalHash ${filePath} ${hash}`);
   }
 
   return hash;
@@ -80,7 +92,7 @@ function getLocalHash(filePath) {
 
 function downloadMiningPoolLogos$() {
   return new Promise((resolve, reject) => {
-    console.log(`${LOG_TAG} Checking if mining pool logos needs downloading or updating...`);
+    console.log(`${LOG_TAG} \tChecking if mining pool logos needs downloading or updating...`);
     const options = {
       host: 'api.github.com',
       path: '/repos/mempool/mining-pool-logos/contents/',
@@ -110,29 +122,54 @@ function downloadMiningPoolLogos$() {
           }
           let downloadedCount = 0;
           for (const poolLogo of poolLogos) {
+            if (verbose) {
+              console.log(`${LOG_TAG} Processing ${poolLogo.name}`);
+            }
             const filePath = `${PATH}/mining-pools/${poolLogo.name}`;
             if (fs.existsSync(filePath)) {
               const localHash = getLocalHash(filePath);
               if (verbose) {
-                console.log(`${LOG_TAG} Remote ${poolLogo.name} logo hash ${poolLogo.sha}`);
-                console.log(`${LOG_TAG} \tchecking if ${filePath} exists: ${fs.existsSync(filePath)}`);
+                console.log(`${LOG_TAG} \t\tremote ${poolLogo.name} logo hash ${poolLogo.sha}`);
+                console.log(`${LOG_TAG} \t\t\tchecking if ${filePath} exists: ${fs.existsSync(filePath)}`);
               }
               if (localHash !== poolLogo.sha) {
-                console.log(`${LOG_TAG} \t\t${poolLogo.name} is different on the remote, downloading...`);
-                download(filePath, poolLogo.download_url);
-                downloadedCount++;
+                console.log(`${LOG_TAG} \t\t\t\t${poolLogo.name} is different on the remote, downloading...`);
+                let download_url = poolLogo.download_url;
+                if (MEMPOOL_CDN) {
+                  download_url = download_url.replace("raw.githubusercontent.com/mempool/mining-pool-logos/master", "mempool.space/resources/mining-pools");
+                }
+                if (DRY_RUN) {
+                  console.log(`${LOG_TAG} \t\tDRY_RUN is set, not downloading ${poolLogo.name} but we should`);
+                } else {
+                  if (verbose) {
+                    console.log(`${LOG_TAG} \t\tDownloading ${download_url} to ${filePath}`);
+                  }
+                  download(filePath, download_url);
+                  downloadedCount++;
+                }
+              } else {
+                console.log(`${LOG_TAG} \t\t${poolLogo.name} is already up to date. Skipping.`);
               }
             } else {
-              console.log(`${LOG_TAG} ${poolLogo.name} is missing, downloading...`);
+              console.log(`${LOG_TAG} \t\t${poolLogo.name} is missing, downloading...`);
               const miningPoolsDir = `${PATH}/mining-pools/`;
               if (!fs.existsSync(miningPoolsDir)){
                 fs.mkdirSync(miningPoolsDir, { recursive: true });
               }
-              download(filePath, poolLogo.download_url);
-              downloadedCount++;
+              let download_url = poolLogo.download_url;
+              if (MEMPOOL_CDN) {
+                download_url = download_url.replace("raw.githubusercontent.com/mempool/mining-pool-logos/master", "mempool.space/resources/mining-pools");
+              }
+              if (DRY_RUN) {
+                console.log(`${LOG_TAG} DRY_RUN is set, not downloading ${poolLogo.name} but it should`);
+              } else {
+                console.log(`${LOG_TAG} \tDownloading ${download_url} to ${filePath}`);
+                download(filePath, download_url);
+                downloadedCount++;
+              }
             }
           }
-          console.log(`${LOG_TAG} Downloaded ${downloadedCount} and skipped ${poolLogos.length - downloadedCount} existing mining pool logos`);
+          console.log(`${LOG_TAG} \t\tDownloaded ${downloadedCount} and skipped ${poolLogos.length - downloadedCount} existing mining pool logos`);
           resolve();
         } catch (e) {
           reject(`Unable to download mining pool logos. Trying again at next restart. Reason: ${e instanceof Error ? e.message : e}`);
@@ -148,7 +185,7 @@ function downloadMiningPoolLogos$() {
 
 function downloadPromoVideoSubtiles$() {
   return new Promise((resolve, reject) => {
-    console.log(`${LOG_TAG} Checking if promo video subtitles needs downloading or updating...`);
+    console.log(`${LOG_TAG} \tChecking if promo video subtitles needs downloading or updating...`);
     const options = {
       host: 'api.github.com',
       path: '/repos/mempool/mempool-promo/contents/subtitles',
@@ -157,7 +194,7 @@ function downloadPromoVideoSubtiles$() {
     };
 
     if (githubSecret) {
-      console.log(`${LOG_TAG} Downloading the promo video subtitles with authentication`);
+      console.log(`${LOG_TAG} \tDownloading the promo video subtitles with authentication`);
       options.headers['authorization'] = `Bearer ${githubSecret}`;
       options.headers['X-GitHub-Api-Version'] = '2022-11-28';
     }
@@ -179,27 +216,53 @@ function downloadPromoVideoSubtiles$() {
           }
           let downloadedCount = 0;
           for (const language of videoLanguages) {
+            if (verbose) {
+              console.log(`${LOG_TAG} Processing ${language.name}`);
+            }
             const filePath = `${PATH}/promo-video/${language.name}`;
             if (fs.existsSync(filePath)) {
               if (verbose) {
-                console.log(`${LOG_TAG} ${language.name} remote promo video hash ${language.sha}`);
+                console.log(`${LOG_TAG} \t${language.name} remote promo video hash ${language.sha}`);
               }
               const localHash = getLocalHash(filePath);
-
               if (localHash !== language.sha) {
-                console.log(`${LOG_TAG} ${language.name} is different on the remote, updating`);
-                download(filePath, language.download_url);
-                downloadedCount++;
+                console.log(`${LOG_TAG} \t\t${language.name} is different on the remote, updating`);
+                let download_url = language.download_url;
+                if (MEMPOOL_CDN) {
+                  download_url = download_url.replace("raw.githubusercontent.com/mempool/mempool-promo/master/subtitles", "mempool.space/resources/promo-video");
+                }
+                if (DRY_RUN) {
+                  console.log(`${LOG_TAG} \t\tDRY_RUN is set, not downloading ${language.name} but we should`);
+                } else {
+                  if (verbose) {
+                    console.log(`${LOG_TAG} \t\tdownloading ${download_url} to ${filePath}`);
+                  }
+                  download(filePath, download_url);
+                  downloadedCount++;
+                }
+              } else {
+                console.log(`${LOG_TAG} \t\t${language.name} is already up to date. Skipping.`);
               }
             } else {
-              console.log(`${LOG_TAG} ${language.name} is missing, downloading`);
+              console.log(`${LOG_TAG} \t\t${language.name} is missing, downloading`);
               const promoVideosDir = `${PATH}/promo-video/`;
               if (!fs.existsSync(promoVideosDir)){
                 fs.mkdirSync(promoVideosDir, { recursive: true });
               }
 
-              download(filePath, language.download_url);
-              downloadedCount++;
+              let download_url = language.download_url;
+              if (MEMPOOL_CDN) {
+                download_url = downloadownload_url = download_url.replace("raw.githubusercontent.com/mempool/mempool-promo/master/subtitles", "mempool.space/resources/promo-video");
+              }
+              if (DRY_RUN) {
+                console.log(`${LOG_TAG} \tDRY_RUN is set, not downloading ${language.name} but we should`);
+              } else {
+                if (verbose) {
+                  console.log(`${LOG_TAG} downloading ${download_url} to ${filePath}`);
+                }
+                download(filePath, download_url);
+                downloadedCount++;
+              }
             }
           }
           console.log(`${LOG_TAG} Downloaded ${downloadedCount} and skipped ${videoLanguages.length - downloadedCount} existing video subtitles`);
@@ -218,7 +281,7 @@ function downloadPromoVideoSubtiles$() {
 
 function downloadPromoVideo$() {
   return new Promise((resolve, reject) => {
-    console.log(`${LOG_TAG} Checking if promo video needs downloading or updating...`);
+    console.log(`${LOG_TAG} \tChecking if promo video needs downloading or updating...`);
     const options = {
       host: 'api.github.com',
       path: '/repos/mempool/mempool-promo/contents',
@@ -227,7 +290,7 @@ function downloadPromoVideo$() {
     };
 
     if (githubSecret) {
-      console.log(`${LOG_TAG} Downloading the promo video with authentication`);
+      console.log(`${LOG_TAG} \tDownloading the promo video with authentication`);
       options.headers['authorization'] = `Bearer ${githubSecret}`;
       options.headers['X-GitHub-Api-Version'] = '2022-11-28';
     }
@@ -256,14 +319,36 @@ function downloadPromoVideo$() {
 
               if (localHash !== item.sha) {
                 console.log(`${LOG_TAG} \tmempool-promo.mp4 is different on the remote, updating`);
-                download(filePath, item.download_url);
-                console.log(`${LOG_TAG} \tmempool-promo.mp4 downloaded.`);
+                let download_url = item.download_url;
+                if (MEMPOOL_CDN) {
+                  download_url = download_url.replace("raw.githubusercontent.com/mempool/mempool-promo/master/promo.mp4", "mempool.space/resources/promo-video/mempool-promo.mp4");
+                }
+                if (DRY_RUN) {
+                  console.log(`${LOG_TAG} DRY_RUN is set, not downloading mempool-promo.mp4 but we should`);
+                } else {
+                  if (verbose) {
+                    console.log(`${LOG_TAG} downloading ${download_url} to ${filePath}`);
+                  }
+                  download(filePath, download_url);
+                  console.log(`${LOG_TAG} \tmempool-promo.mp4 downloaded.`);
+                }
               } else {
-                console.log(`${LOG_TAG} \tmempool-promo.mp4 is already up to date. Skipping.`);
+                console.log(`${LOG_TAG} \t\tmempool-promo.mp4 is already up to date. Skipping.`);
               }
             } else {
               console.log(`${LOG_TAG} \tmempool-promo.mp4 is missing, downloading`);
-              download(filePath, item.download_url);
+              let download_url = item.download_url;
+              if (MEMPOOL_CDN) {
+                download_url = download_url.replace("raw.githubusercontent.com/mempool/mempool-promo/master/promo.mp4", "mempool.space/resources/promo-video/mempool-promo.mp4");
+              }
+              if (DRY_RUN) {
+                console.log(`${LOG_TAG} DRY_RUN is set, not downloading mempool-promo.mp4 but we should`);
+              } else {
+                if (verbose) {
+                  console.log(`${LOG_TAG} downloading ${download_url} to ${filePath}`);
+                }
+                download(filePath, download_url);
+              }
             }
           }
           resolve();
@@ -300,7 +385,7 @@ if (configContent.BASE_MODULE && configContent.BASE_MODULE === 'liquid') {
   download(`${PATH}/assets-testnet.minimal.json`, testnetAssetsMinimalJsonUrl);
 } else {
   if (verbose) {
-    console.log(`${LOG_TAG} BASE_MODULE is not set to Liquid (${configContent.BASE_MODULE}), skipping downloading assets`);
+    console.log(`${LOG_TAG} BASE_MODULE is not set to Liquid (currently ${configContent.BASE_MODULE}), skipping downloading assets`);
   }
 }
 

From 9c72d1df3b1e5463c45360a43c97cd5de5d5d822 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <git@knorrium.info>
Date: Sun, 4 Feb 2024 09:18:50 -0800
Subject: [PATCH 57/92] Sync assets from the mempool CDN

---
 .github/workflows/ci.yml | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c435d6ea5..82fe307b2 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -115,6 +115,10 @@ jobs:
 
       - name: Sync-assets
         run: npm run sync-assets-dev
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          MEMPOOL_CDN: 1
+          VERBOSE: 1
         working-directory: assets/frontend
 
       - name: Zip mining-pool assets
@@ -237,6 +241,8 @@ jobs:
         working-directory: ${{ matrix.node }}/${{ matrix.flavor }}/frontend
         env: 
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          MEMPOOL_CDN: 1
+          VERBOSE: 1
   
   e2e:
     if: "!contains(github.event.pull_request.labels.*.name, 'ops') && !contains(github.head_ref, 'ops/')"

From 7e5e85c8b984b05bf01eaedeb85cf91662670a78 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sun, 4 Feb 2024 21:47:31 +0000
Subject: [PATCH 58/92] Improve Goggles coinjoin detection

---
 backend/src/api/common.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/backend/src/api/common.ts b/backend/src/api/common.ts
index 63c215a8f..4ca0e50d1 100644
--- a/backend/src/api/common.ts
+++ b/backend/src/api/common.ts
@@ -246,7 +246,8 @@ export class Common {
     } else if (tx.version === 2) {
       flags |= TransactionFlags.v2;
     }
-    const reusedAddresses: { [address: string ]: number } = {};
+    const reusedInputAddresses: { [address: string ]: number } = {};
+    const reusedOutputAddresses: { [address: string ]: number } = {};
     const inValues = {};
     const outValues = {};
     let rbf = false;
@@ -290,7 +291,7 @@ export class Common {
       }
 
       if (vin.prevout?.scriptpubkey_address) {
-        reusedAddresses[vin.prevout?.scriptpubkey_address] = (reusedAddresses[vin.prevout?.scriptpubkey_address] || 0) + 1;
+        reusedInputAddresses[vin.prevout?.scriptpubkey_address] = (reusedInputAddresses[vin.prevout?.scriptpubkey_address] || 0) + 1;
       }
       inValues[vin.prevout?.value || Math.random()] = (inValues[vin.prevout?.value || Math.random()] || 0) + 1;
     }
@@ -325,7 +326,7 @@ export class Common {
         case 'op_return': flags |= TransactionFlags.op_return; break;
       }
       if (vout.scriptpubkey_address) {
-        reusedAddresses[vout.scriptpubkey_address] = (reusedAddresses[vout.scriptpubkey_address] || 0) + 1;
+        reusedOutputAddresses[vout.scriptpubkey_address] = (reusedOutputAddresses[vout.scriptpubkey_address] || 0) + 1;
       }
       outValues[vout.value || Math.random()] = (outValues[vout.value || Math.random()] || 0) + 1;
     }
@@ -335,7 +336,7 @@ export class Common {
     
     // fast but bad heuristic to detect possible coinjoins
     // (at least 5 inputs and 5 outputs, less than half of which are unique amounts, with no address reuse)
-    const addressReuse = Object.values(reusedAddresses).reduce((acc, count) => Math.max(acc, count), 0) > 1;
+    const addressReuse = Object.keys(reusedOutputAddresses).reduce((acc, key) => Math.max(acc, (reusedInputAddresses[key] || 0) + (reusedOutputAddresses[key] || 0)), 0) > 1;
     if (!addressReuse && tx.vin.length >= 5 && tx.vout.length >= 5 && (Object.keys(inValues).length + Object.keys(outValues).length) <= (tx.vin.length + tx.vout.length) / 2 ) {
       flags |= TransactionFlags.coinjoin;
     }

From fc415372bf31e9680c0763eb2d1bd44f88812e96 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Mon, 5 Feb 2024 11:22:14 +0100
Subject: [PATCH 59/92] Fix P2SH / P2PKH detection on Liquid address page

---
 frontend/src/app/components/address/address.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts
index 0e10b207f..060ec6772 100644
--- a/frontend/src/app/components/address/address.component.ts
+++ b/frontend/src/app/components/address/address.component.ts
@@ -105,7 +105,7 @@ export class AddressComponent implements OnInit, OnDestroy {
       .pipe(
         filter((address) => !!address),
         tap((address: Address) => {
-          if ((this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') && /^([m-zA-HJ-NP-Z1-9]{26,35}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,100}|[a-km-zA-HJ-NP-Z1-9]{80})$/.test(address.address)) {
+          if ((this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') && /^([a-zA-HJ-NP-Z1-9]{26,35}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,100}|[a-km-zA-HJ-NP-Z1-9]{80})$/.test(address.address)) {
             this.apiService.validateAddress$(address.address)
               .subscribe((addressInfo) => {
                 this.addressInfo = addressInfo;

From c58115a96c2cbcc89c8de4c9482d0d28e0e23645 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Mon, 5 Feb 2024 11:53:05 +0100
Subject: [PATCH 60/92] Add confidential addresses in liquid address regex

---
 frontend/src/app/shared/regex.utils.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/shared/regex.utils.ts b/frontend/src/app/shared/regex.utils.ts
index 128f7566e..93f4b9275 100644
--- a/frontend/src/app/shared/regex.utils.ts
+++ b/frontend/src/app/shared/regex.utils.ts
@@ -77,11 +77,15 @@ const ADDRESS_CHARS: {
       + `)`,
   },
   liquid: {
-    base58: `[GHPQ]` // G|H is P2PKH, P|Q is P2SH
-      + BASE58_CHARS
-      + `{33}`, // All min-max lengths are 34
+    base58: `[GHPQ]` // PQ is P2PKH, GH is P2SH
+        + BASE58_CHARS
+        + `{33}` // All min-max lengths are 34
+      + `|`
+        + `[V][TJ]` // Confidential P2PKH or P2SH starts with VT or VJ
+        + BASE58_CHARS
+        + `{78}`, 
     bech32: `(?:`
-        + `(?:` // bech32 liquid starts with ex1 or lq1
+        + `(?:` // bech32 liquid starts with ex1 (unconfidential) or lq1 (confidential)
           + `ex1`
           + `|`
           + `lq1`

From 517d36783fb3c7bd3e4d2a96c1eb434cb8b62cd6 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Tue, 6 Feb 2024 11:37:51 +0100
Subject: [PATCH 61/92] Add P2WSH Liquid peg out to input label

---
 .../app/components/address-labels/address-labels.component.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/components/address-labels/address-labels.component.ts b/frontend/src/app/components/address-labels/address-labels.component.ts
index f4b3d0ca5..2365c167f 100644
--- a/frontend/src/app/components/address-labels/address-labels.component.ts
+++ b/frontend/src/app/components/address-labels/address-labels.component.ts
@@ -43,7 +43,7 @@ export class AddressLabelsComponent implements OnChanges {
 
   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) {
+      if (this.vin.inner_witnessscript_asm.indexOf('OP_DEPTH OP_PUSHNUM_12 OP_EQUAL OP_IF OP_PUSHNUM_11') === 0 || this.vin.inner_witnessscript_asm.indexOf('OP_PUSHNUM_15 OP_CHECKMULTISIG OP_IFDUP OP_NOTIF OP_PUSHBYTES_2') === 1259) {
         if (this.vin.witness.length > 11) {
           this.label = 'Liquid Peg Out';
         } else {

From b453898b1d565f997e285c3f20d01e9942ea827c Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Tue, 6 Feb 2024 13:42:23 +0100
Subject: [PATCH 62/92] Add glow effect to peg outs in progress

---
 .../recent-pegs-list.component.html                 |  4 ++--
 .../recent-pegs-list.component.scss                 | 13 +++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
index d562328a5..b8e172eb2 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
@@ -34,7 +34,7 @@
               <td class="timestamp text-left widget">
                 <app-time kind="since" [time]="peg.blocktime"></app-time>
               </td>
-              <td class="amount text-right widget" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
+              <td class="amount text-right widget" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0, 'glow-effect': peg.amount < 0 && peg.bitcoinaddress && !peg.bitcointxid}">
                 <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
               </td>
             </tr>
@@ -57,7 +57,7 @@
                 &lrm;{{ peg.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
                 <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="peg.blocktime"></app-time>)</i></div>
               </td>
-              <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
+              <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0, 'glow-effect': peg.amount < 0 && peg.bitcoinaddress && !peg.bitcointxid}">
                 <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
               </td>
               <td class="output text-left">
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
index 92f5bc64f..4bb89d781 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
@@ -105,3 +105,16 @@ tr, td, th {
 .debit {
   color: #D81B60;
 }
+
+.glow-effect {
+  animation: color-oscillation 1s ease-in-out infinite alternate;
+}
+
+@keyframes color-oscillation {
+  0% {
+      color: #777983;
+  }
+  100% {
+      color: #D81B60;
+  }
+}

From 602c87bea07aeda3caf8a2e8f92280f3b9532f87 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Tue, 6 Feb 2024 15:53:54 +0100
Subject: [PATCH 63/92] Update peg-in/out links to open new page on click

---
 .../transactions-list/transactions-list.component.html        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index 24d34d6ec..625a7c70e 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -33,7 +33,7 @@
                   </ng-template>
                   <ng-template #hasPrevout>
                     <ng-template [ngIf]="vin.is_pegin" [ngIfElse]="defaultPrevout">
-                      <a *ngIf="stateService.env.BASE_MODULE === 'liquid'; else localPegInLink" [attr.href]="'https://mempool.space/tx/' + vin.txid" class="red">
+                      <a target="_blank" *ngIf="stateService.env.BASE_MODULE === 'liquid'; else localPegInLink" [attr.href]="'https://mempool.space/tx/' + vin.txid + ':' + vin.vout" class="red">
                         <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                       </a>
                       <ng-template #localPegInLink>
@@ -204,7 +204,7 @@
                     <ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">
                       <ng-container i18n="transactions-list.peg-out-to">Peg-out to <ng-container *ngTemplateOutlet="pegOutLink"></ng-container></ng-container>
                       <ng-template #pegOutLink>
-                        <a *ngIf="stateService.env.BASE_MODULE === 'liquid'; else localPegoutLink" [attr.href]="'https://mempool.space/address/' + vout.pegout.scriptpubkey_address" title="{{ vout.pegout.scriptpubkey_address }}">
+                        <a *ngIf="stateService.env.BASE_MODULE === 'liquid'; else localPegoutLink" target="_blank" style="color:#b86d12" [attr.href]="'https://mempool.space/address/' + vout.pegout.scriptpubkey_address" title="{{ vout.pegout.scriptpubkey_address }}">
                           <app-truncate [text]="vout.pegout.scriptpubkey_address"></app-truncate>
                         </a>
                         <ng-template #localPegoutLink>

From b561648082c32d5652cb99b16d3c36cb923a209e Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Tue, 6 Feb 2024 17:35:02 +0100
Subject: [PATCH 64/92] Add peg ins/out volume to stats components

---
 backend/src/api/liquid/elements-parser.ts     | 10 ++++
 backend/src/api/liquid/liquid.routes.ts       | 13 +++++
 .../recent-pegs-list.component.html           |  2 +-
 .../recent-pegs-list.component.ts             |  2 +-
 .../recent-pegs-stats.component.html          | 50 +++++++++++++++++--
 .../recent-pegs-stats.component.scss          | 10 +++-
 .../recent-pegs-stats.component.ts            |  8 ++-
 .../reserves-audit-dashboard.component.html   |  2 +-
 .../reserves-audit-dashboard.component.ts     | 10 +++-
 .../src/app/interfaces/node-api.interface.ts  |  5 ++
 frontend/src/app/services/api.service.ts      |  6 ++-
 11 files changed, 105 insertions(+), 13 deletions(-)

diff --git a/backend/src/api/liquid/elements-parser.ts b/backend/src/api/liquid/elements-parser.ts
index 05f35c085..8c3d519ab 100644
--- a/backend/src/api/liquid/elements-parser.ts
+++ b/backend/src/api/liquid/elements-parser.ts
@@ -433,6 +433,16 @@ class ElementsParser {
     const [rows] = await DB.query(query);
     return rows;
   }
+
+  // Get all peg in / out from the last month
+  public async $getPegsVolumeDaily(): Promise<any> {
+    const pegInQuery = await DB.query(`SELECT SUM(amount) AS volume, COUNT(*) AS number FROM elements_pegs WHERE amount > 0 and datetime > UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -1, CURRENT_TIMESTAMP()));`);
+    const pegOutQuery = await DB.query(`SELECT SUM(amount) AS volume, COUNT(*) AS number FROM elements_pegs WHERE amount < 0 and datetime > UNIX_TIMESTAMP(TIMESTAMPADD(DAY, -1, CURRENT_TIMESTAMP()));`);
+    return [
+      pegInQuery[0][0],
+      pegOutQuery[0][0]
+    ];
+  }
 }
 
 export default new ElementsParser();
diff --git a/backend/src/api/liquid/liquid.routes.ts b/backend/src/api/liquid/liquid.routes.ts
index 64d631a05..b87348d1b 100644
--- a/backend/src/api/liquid/liquid.routes.ts
+++ b/backend/src/api/liquid/liquid.routes.ts
@@ -17,6 +17,7 @@ class LiquidRoutes {
       app
         .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/pegs', this.$getElementsPegs)
         .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/pegs/month', this.$getElementsPegsByMonth)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/pegs/volume', this.$getPegsVolumeDaily)
         .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves', this.$getFederationReserves)
         .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/reserves/month', this.$getFederationReservesByMonth)
         .get(config.MEMPOOL.API_URL_PREFIX + 'liquid/pegouts', this.$getPegOuts)
@@ -189,6 +190,18 @@ class LiquidRoutes {
     }
   }
 
+  private async $getPegsVolumeDaily(req: Request, res: Response) {
+    try {
+      const pegsVolume = await elementsParser.$getPegsVolumeDaily();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 30).toUTCString());
+      res.json(pegsVolume);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
 }
 
 export default new LiquidRoutes();
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
index b8e172eb2..b0683389e 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
@@ -18,7 +18,7 @@
         </thead>
         <tbody *ngIf="recentPegs$ | async as pegs; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
           <ng-container *ngIf="widget; else regularRows">
-            <tr *ngFor="let peg of pegs | slice:0:6">
+            <tr *ngFor="let peg of pegs | slice:0:5">
               <td class="transaction text-left widget">
                 <ng-container *ngIf="peg.amount > 0">
                   <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vin=' + peg.txindex">
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
index e921e1250..d839d891f 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
@@ -47,7 +47,7 @@ export class RecentPegsListComponent implements OnInit {
   ngOnInit(): void {
     this.isLoading = !this.widget;
     this.env = this.stateService.env;
-    this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
+    this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
 
     if (!this.widget) {
       this.seoService.setTitle($localize`:@@a8b0889ea1b41888f1e247f2731cc9322198ca04:Recent Peg-In / Out's`);
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
index fca78b881..2a853ff5d 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
@@ -1,7 +1,47 @@
-<div class="fee-estimation-container">
-  <div class="item">
-    <a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]">
-      <h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
-    </a>
+<div *ngIf="(pegsVolume$ | async) as pegsVolume; else loadingData">
+  <div class="fee-estimation-container">
+    <div class="item">
+      <a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]">
+        <h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+      </a>
+    </div>
+  </div>
+  <div class="fee-estimation-container">
+    <div class="item">
+      <div class="card-text">
+        <div class="fee-text credit" i18n-ngbTooltip="liquid.peg-ins-volume-day" ngbTooltip="24h Peg-In Volume" placement="top">+{{ (+pegsVolume[0].volume) / 100000000 | number: '1.2-2' }} <span i18n="shared.addresses">BTC</span></div>
+        <div class="fiat">{{ (+pegsVolume[0].number) }} <span i18n="liquid.peg-ins">Peg-Ins</span></div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="card-text">
+        <div class="fee-text debit" i18n-ngbTooltip="liquid.peg-out-volume-day" ngbTooltip="24h Peg-Out Volume" placement="top">{{ (+pegsVolume[1].volume) / 100000000 | number: '1.2-2' }} <span i18n="shared.addresses">BTC</span></div>
+        <div class="fiat">{{ (+pegsVolume[1].number) }} <span i18n="liquid.peg-outs">Peg-Outs</span></div>
+      </div>
+    </div>
   </div>
 </div>
+
+<ng-template #loadingData>
+  <div class="fee-estimation-container loading-container">
+    <div class="item">
+      <a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]">
+        <h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+      </a>
+    </div>
+  </div>
+  <div class="fee-estimation-container">
+    <div class="item">
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+  </div>
+</ng-template>
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
index 0534c9b5d..658094609 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
@@ -1,7 +1,6 @@
 .fee-estimation-container {
   display: flex;
   justify-content: space-between;
-  padding-bottom: 1rem;
   @media (min-width: 376px) {
     flex-direction: row;
   }  
@@ -36,6 +35,7 @@
       top: 0px;
     }
     .fee-text{
+      border-bottom: 1px solid #ffffff1c;
       width: fit-content;
       margin: auto;
       line-height: 1.45;
@@ -69,3 +69,11 @@
   text-decoration: none;
   color: inherit;
 }
+
+.credit {
+  color: #7CB342;
+}
+
+.debit {
+  color: #D81B60;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.ts b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.ts
index 3fbebf715..7bf8e6910 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.ts
@@ -1,4 +1,7 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { PegsVolume } from '../../../interfaces/node-api.interface';
+
 @Component({
   selector: 'app-recent-pegs-stats',
   templateUrl: './recent-pegs-stats.component.html',
@@ -6,10 +9,11 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RecentPegsStatsComponent implements OnInit {
+  @Input() pegsVolume$: Observable<PegsVolume[]>;
+
   constructor() { }
 
   ngOnInit(): void {
-    
   }
 
 }
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
index e9f6b4ccd..47d6e7aed 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html
@@ -25,7 +25,7 @@
     <div class="col">
       <div class="card">
         <div class="card-body">
-          <app-recent-pegs-stats></app-recent-pegs-stats>
+          <app-recent-pegs-stats [pegsVolume$]="pegsVolume$"></app-recent-pegs-stats>
           <app-recent-pegs-list [recentPegIns$]="recentPegIns$" [recentPegOuts$]="recentPegOuts$"[widget]="true"></app-recent-pegs-list>
         </div>
       </div>
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
index 9b23eb7cb..2133f0fe2 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts
@@ -4,7 +4,7 @@ import { WebsocketService } from '../../../services/websocket.service';
 import { StateService } from '../../../services/state.service';
 import { Observable, Subject, combineLatest, delayWhen, filter, interval, map, of, share, shareReplay, startWith, switchMap, takeUntil, tap, throttleTime, timer } from 'rxjs';
 import { ApiService } from '../../../services/api.service';
-import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo, RecentPeg } from '../../../interfaces/node-api.interface';
+import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo, PegsVolume, RecentPeg } from '../../../interfaces/node-api.interface';
 
 @Component({
   selector: 'app-reserves-audit-dashboard',
@@ -20,6 +20,7 @@ export class ReservesAuditDashboardComponent implements OnInit {
   federationUtxos$: Observable<FederationUtxo[]>;
   recentPegIns$: Observable<RecentPeg[]>;
   recentPegOuts$: Observable<RecentPeg[]>;
+  pegsVolume$: Observable<PegsVolume[]>;
   federationAddresses$: Observable<FederationAddress[]>;
   federationAddressesOneMonthAgo$: Observable<any>;
   liquidPegsMonth$: Observable<any>;
@@ -127,6 +128,13 @@ export class ReservesAuditDashboardComponent implements OnInit {
       share()
     );
 
+    this.pegsVolume$ = this.auditUpdated$.pipe(
+      filter(auditUpdated => auditUpdated === true),
+      throttleTime(40000),
+      switchMap(_ => this.apiService.pegsVolume$()),
+      share()
+    );
+
     this.federationAddresses$ = this.auditUpdated$.pipe(
       filter(auditUpdated => auditUpdated === true),
       throttleTime(40000),
diff --git a/frontend/src/app/interfaces/node-api.interface.ts b/frontend/src/app/interfaces/node-api.interface.ts
index cebb23f27..eaeeca94c 100644
--- a/frontend/src/app/interfaces/node-api.interface.ts
+++ b/frontend/src/app/interfaces/node-api.interface.ts
@@ -82,6 +82,11 @@ export interface CurrentPegs {
   hash: string;
 }
 
+export interface PegsVolume {
+  volume: string;
+  number: number;
+}
+
 export interface FederationAddress { 
   bitcoinaddress: string;
   balance: string;
diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index 38060d47d..bd20ec36e 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/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, RecentPeg } from '../interfaces/node-api.interface';
+  PoolStat, BlockExtended, TransactionStripped, RewardStats, AuditScore, BlockSizesAndWeights, RbfTree, BlockAudit, Acceleration, AccelerationHistoryParams, CurrentPegs, AuditStatus, FederationAddress, FederationUtxo, RecentPeg, PegsVolume } 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';
@@ -182,6 +182,10 @@ export class ApiService {
     return this.httpClient.get<CurrentPegs>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/pegs');
   }
 
+  pegsVolume$(): Observable<PegsVolume[]> {
+    return this.httpClient.get<PegsVolume[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/pegs/volume');
+  }
+
   listLiquidPegsMonth$(): Observable<LiquidPegs[]> {
     return this.httpClient.get<LiquidPegs[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/pegs/month');
   }

From 87a613e4dc6344106d441b3d8130303721aaaae0 Mon Sep 17 00:00:00 2001
From: wiz <j@wiz.biz>
Date: Tue, 6 Feb 2024 13:53:03 -0500
Subject: [PATCH 65/92] ops: Fix broken nginx cache configuration

---
 production/nginx/http-proxy-cache.conf             | 14 +++++++++-----
 production/nginx/location-api-v1-lightning.conf    |  2 +-
 production/nginx/location-api.conf                 | 10 +++++-----
 production/nginx/location-liquid-api.conf          |  8 ++++----
 production/nginx/location-liquidtestnet-api.conf   |  8 ++++----
 .../nginx/location-signet-api-v1-lightning.conf    |  2 +-
 production/nginx/location-signet-api.conf          |  8 ++++----
 .../nginx/location-testnet-api-v1-lightning.conf   |  2 +-
 production/nginx/location-testnet-api.conf         |  8 ++++----
 9 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/production/nginx/http-proxy-cache.conf b/production/nginx/http-proxy-cache.conf
index 5505b094b..0024a3b30 100644
--- a/production/nginx/http-proxy-cache.conf
+++ b/production/nginx/http-proxy-cache.conf
@@ -1,8 +1,12 @@
 # proxy cache
-proxy_cache_path /var/cache/nginx/api keys_zone=api:20m levels=1:2 inactive=365d max_size=2000m;
-proxy_cache_path /var/cache/nginx/unfurler keys_zone=unfurler:20m levels=1:2 inactive=365d max_size=2000m;
-proxy_cache_path /var/cache/nginx/slurper keys_zone=slurper:20m levels=1:2 inactive=365d max_size=5000m;
-proxy_cache_path /var/cache/nginx/services keys_zone=services:20m levels=1:2 inactive=365d max_size=100m;
+proxy_cache_path /var/cache/nginx/services keys_zone=services:20m levels=1:2 inactive=30d max_size=200m;
+proxy_cache_path /var/cache/nginx/apihot keys_zone=apihot:20m levels=1:2 inactive=60m max_size=20m;
+proxy_cache_path /var/cache/nginx/apiwarm keys_zone=apiwarm:20m levels=1:2 inactive=24h max_size=200m;
+proxy_cache_path /var/cache/nginx/apinormal keys_zone=apinormal:200m levels=1:2 inactive=30d max_size=2000m;
+proxy_cache_path /var/cache/nginx/apicold keys_zone=apicold:200m levels=1:2 inactive=365d max_size=2000m;
+
+proxy_cache_path /var/cache/nginx/unfurler keys_zone=unfurler:200m levels=1:2 inactive=30d max_size=2000m;
+proxy_cache_path /var/cache/nginx/slurper keys_zone=slurper:500m levels=1:2 inactive=365d max_size=5000m;
 proxy_cache_path /var/cache/nginx/markets keys_zone=markets:20m levels=1:2 inactive=365d max_size=100m;
 types_hash_max_size 4096;
-proxy_buffer_size 8k;
\ No newline at end of file
+proxy_buffer_size 8k;
diff --git a/production/nginx/location-api-v1-lightning.conf b/production/nginx/location-api-v1-lightning.conf
index f90fd529a..625bebade 100644
--- a/production/nginx/location-api-v1-lightning.conf
+++ b/production/nginx/location-api-v1-lightning.conf
@@ -12,7 +12,7 @@ location @mempool-api-v1-lightning {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apiwarm;
 	proxy_cache_valid 200 10s;
 	proxy_redirect off;
 
diff --git a/production/nginx/location-api.conf b/production/nginx/location-api.conf
index f245154a0..fccdde532 100644
--- a/production/nginx/location-api.conf
+++ b/production/nginx/location-api.conf
@@ -77,7 +77,7 @@ location @mempool-api-v1-cache-forever {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apicold;
 	proxy_cache_valid 200 30d;
 	proxy_redirect off;
 
@@ -94,7 +94,7 @@ location @mempool-api-v1-cache-hot {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apihot;
 	proxy_cache_valid 200 1s;
 	proxy_redirect off;
 }
@@ -109,7 +109,7 @@ location @mempool-api-v1-cache-warm {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apiwarm;
 	proxy_cache_valid 200 10s;
 	proxy_redirect off;
 }
@@ -122,7 +122,7 @@ location @mempool-api-v1-cache-normal {
 	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 	proxy_set_header X-Forwarded-Proto $scheme;
 
-	proxy_cache api;
+	proxy_cache apinormal;
 	proxy_cache_valid 200 2s;
 	proxy_redirect off;
 
@@ -167,7 +167,7 @@ location @esplora-api-cache-forever {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apicold;
 	proxy_cache_valid 200 30d;
 	proxy_redirect off;
 
diff --git a/production/nginx/location-liquid-api.conf b/production/nginx/location-liquid-api.conf
index 6c222c469..5286c1a72 100644
--- a/production/nginx/location-liquid-api.conf
+++ b/production/nginx/location-liquid-api.conf
@@ -75,7 +75,7 @@ location @mempool-liquid-api-v1-cache-forever {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apicold;
 	proxy_cache_valid 200 30d;
 	proxy_redirect off;
 
@@ -92,7 +92,7 @@ location @mempool-liquid-api-v1-cache-warm {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apiwarm;
 	proxy_cache_valid 200 10s;
 	proxy_redirect off;
 }
@@ -105,7 +105,7 @@ location @mempool-liquid-api-v1-cache-normal {
 	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 	proxy_set_header X-Forwarded-Proto $scheme;
 
-	proxy_cache api;
+	proxy_cache apinormal;
 	proxy_cache_valid 200 10s;
 	proxy_redirect off;
 
@@ -150,7 +150,7 @@ location @esplora-liquid-api-cache-forever {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apicold;
 	proxy_cache_valid 200 30d;
 	proxy_redirect off;
 
diff --git a/production/nginx/location-liquidtestnet-api.conf b/production/nginx/location-liquidtestnet-api.conf
index 5d5be5d43..4f6615b40 100644
--- a/production/nginx/location-liquidtestnet-api.conf
+++ b/production/nginx/location-liquidtestnet-api.conf
@@ -79,7 +79,7 @@ location @mempool-liquidtestnet-api-v1-cache-forever {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apicold;
 	proxy_cache_valid 200 30d;
 	proxy_redirect off;
 
@@ -96,7 +96,7 @@ location @mempool-liquidtestnet-api-v1-cache-warm {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apiwarm;
 	proxy_cache_valid 200 10s;
 	proxy_redirect off;
 }
@@ -109,7 +109,7 @@ location @mempool-liquidtestnet-api-v1-cache-normal {
 	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 	proxy_set_header X-Forwarded-Proto $scheme;
 
-	proxy_cache api;
+	proxy_cache apinormal;
 	proxy_cache_valid 200 10s;
 	proxy_redirect off;
 
@@ -154,7 +154,7 @@ location @esplora-liquidtestnet-api-cache-forever {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apicold;
 	proxy_cache_valid 200 30d;
 	proxy_redirect off;
 
diff --git a/production/nginx/location-signet-api-v1-lightning.conf b/production/nginx/location-signet-api-v1-lightning.conf
index ab14a170b..4fe0b6ddd 100644
--- a/production/nginx/location-signet-api-v1-lightning.conf
+++ b/production/nginx/location-signet-api-v1-lightning.conf
@@ -13,7 +13,7 @@ location @mempool-signet-api-v1-lightning {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apiwarm;
 	proxy_cache_valid 200 10s;
 	proxy_redirect off;
 
diff --git a/production/nginx/location-signet-api.conf b/production/nginx/location-signet-api.conf
index 8469043a8..eb8cbeb6a 100644
--- a/production/nginx/location-signet-api.conf
+++ b/production/nginx/location-signet-api.conf
@@ -79,7 +79,7 @@ location @mempool-signet-api-v1-cache-forever {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apicold;
 	proxy_cache_valid 200 30d;
 	proxy_redirect off;
 
@@ -96,7 +96,7 @@ location @mempool-signet-api-v1-cache-warm {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apiwarm;
 	proxy_cache_valid 200 10s;
 	proxy_redirect off;
 }
@@ -109,7 +109,7 @@ location @mempool-signet-api-v1-cache-normal {
 	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 	proxy_set_header X-Forwarded-Proto $scheme;
 
-	proxy_cache api;
+	proxy_cache apinormal;
 	proxy_cache_valid 200 10s;
 	proxy_redirect off;
 
@@ -154,7 +154,7 @@ location @esplora-signet-api-cache-forever {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apicold;
 	proxy_cache_valid 200 30d;
 	proxy_redirect off;
 
diff --git a/production/nginx/location-testnet-api-v1-lightning.conf b/production/nginx/location-testnet-api-v1-lightning.conf
index cc7c617a6..316b37cc3 100644
--- a/production/nginx/location-testnet-api-v1-lightning.conf
+++ b/production/nginx/location-testnet-api-v1-lightning.conf
@@ -13,7 +13,7 @@ location @mempool-testnet-api-v1-lightning {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apiwarm;
 	proxy_cache_valid 200 10s;
 	proxy_redirect off;
 
diff --git a/production/nginx/location-testnet-api.conf b/production/nginx/location-testnet-api.conf
index 9f0c41147..cce3e585c 100644
--- a/production/nginx/location-testnet-api.conf
+++ b/production/nginx/location-testnet-api.conf
@@ -79,7 +79,7 @@ location @mempool-testnet-api-v1-cache-forever {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apicold;
 	proxy_cache_valid 200 30d;
 	proxy_redirect off;
 
@@ -96,7 +96,7 @@ location @mempool-testnet-api-v1-cache-warm {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apiwarm;
 	proxy_cache_valid 200 10s;
 	proxy_redirect off;
 }
@@ -109,7 +109,7 @@ location @mempool-testnet-api-v1-cache-normal {
 	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 	proxy_set_header X-Forwarded-Proto $scheme;
 
-	proxy_cache api;
+	proxy_cache apinormal;
 	proxy_cache_valid 200 10s;
 	proxy_redirect off;
 
@@ -154,7 +154,7 @@ location @esplora-testnet-api-cache-forever {
 
 	proxy_cache_background_update on;
 	proxy_cache_use_stale updating;
-	proxy_cache api;
+	proxy_cache apicold;
 	proxy_cache_valid 200 30d;
 	proxy_redirect off;
 

From f00470589695811435405afc3690c9cd45ae0531 Mon Sep 17 00:00:00 2001
From: wiz <j@wiz.biz>
Date: Tue, 6 Feb 2024 13:55:44 -0500
Subject: [PATCH 66/92] ops: Add missing HTTP Expires header for fees API

---
 production/nginx/location-api.conf | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/production/nginx/location-api.conf b/production/nginx/location-api.conf
index fccdde532..bee4ce50d 100644
--- a/production/nginx/location-api.conf
+++ b/production/nginx/location-api.conf
@@ -97,6 +97,8 @@ location @mempool-api-v1-cache-hot {
 	proxy_cache apihot;
 	proxy_cache_valid 200 1s;
 	proxy_redirect off;
+
+	expires 1s;
 }
 
 location @mempool-api-v1-cache-warm {

From fea115bcbca69980b4688da12256115130e3216f Mon Sep 17 00:00:00 2001
From: wiz <j@wiz.biz>
Date: Tue, 6 Feb 2024 14:03:44 -0500
Subject: [PATCH 67/92] ops: Fix obvious bug in cache heater script

---
 production/nginx-cache-heater | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/production/nginx-cache-heater b/production/nginx-cache-heater
index 00fc6ea7a..4bbe8ee15 100755
--- a/production/nginx-cache-heater
+++ b/production/nginx-cache-heater
@@ -1,5 +1,5 @@
 #!/usr/bin/env zsh
-hostname=mempool.space
+hostname=$(hostname)
 
 heat()
 {

From dfdd286f7547dc1fbc6f2c45f336adbca9138381 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 6 Feb 2024 21:39:29 +0000
Subject: [PATCH 68/92] Fix infinite address scroll

---
 .../components/address/address.component.ts   | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts
index 0e10b207f..ed28fa1d2 100644
--- a/frontend/src/app/components/address/address.component.ts
+++ b/frontend/src/app/components/address/address.component.ts
@@ -31,8 +31,7 @@ export class AddressComponent implements OnInit, OnDestroy {
   addressLoadingStatus$: Observable<number>;
   addressInfo: null | AddressInformation = null;
 
-  totalConfirmedTxCount = 0;
-  loadedConfirmedTxCount = 0;
+  fullyLoaded = false;
   txCount = 0;
   received = 0;
   sent = 0;
@@ -66,7 +65,7 @@ export class AddressComponent implements OnInit, OnDestroy {
         switchMap((params: ParamMap) => {
           this.error = undefined;
           this.isLoadingAddress = true;
-          this.loadedConfirmedTxCount = 0;
+          this.fullyLoaded = false;
           this.address = null;
           this.isLoadingTransactions = true;
           this.transactions = null;
@@ -128,7 +127,6 @@ export class AddressComponent implements OnInit, OnDestroy {
           this.tempTransactions = transactions;
           if (transactions.length) {
             this.lastTransactionTxId = transactions[transactions.length - 1].txid;
-            this.loadedConfirmedTxCount += transactions.filter((tx) => tx.status.confirmed).length;
           }
 
           const fetchTxs: string[] = [];
@@ -191,8 +189,6 @@ export class AddressComponent implements OnInit, OnDestroy {
             this.audioService.playSound('magic');
           }
         }
-        this.totalConfirmedTxCount++;
-        this.loadedConfirmedTxCount++;
       });
   }
 
@@ -252,16 +248,20 @@ export class AddressComponent implements OnInit, OnDestroy {
   }
 
   loadMore() {
-    if (this.isLoadingTransactions || !this.totalConfirmedTxCount || this.loadedConfirmedTxCount >= this.totalConfirmedTxCount) {
+    if (this.isLoadingTransactions || this.fullyLoaded) {
       return;
     }
     this.isLoadingTransactions = true;
     this.retryLoadMore = false;
     this.electrsApiService.getAddressTransactions$(this.address.address, this.lastTransactionTxId)
       .subscribe((transactions: Transaction[]) => {
-        this.lastTransactionTxId = transactions[transactions.length - 1].txid;
-        this.loadedConfirmedTxCount += transactions.length;
-        this.transactions = this.transactions.concat(transactions);
+        if (transactions && transactions.length) {
+          this.lastTransactionTxId = transactions[transactions.length - 1].txid;
+          this.transactions = this.transactions.concat(transactions);
+        }
+        if (transactions?.length == null || transactions.length < 50) {
+          this.fullyLoaded = true;
+        }
         this.isLoadingTransactions = false;
       },
       (error) => {
@@ -278,7 +278,6 @@ export class AddressComponent implements OnInit, OnDestroy {
     this.received = this.address.chain_stats.funded_txo_sum + this.address.mempool_stats.funded_txo_sum;
     this.sent = this.address.chain_stats.spent_txo_sum + this.address.mempool_stats.spent_txo_sum;
     this.txCount = this.address.chain_stats.tx_count + this.address.mempool_stats.tx_count;
-    this.totalConfirmedTxCount = this.address.chain_stats.tx_count;
   }
 
   ngOnDestroy() {

From 3959f52d19d55d612616102e0d1d12cfa58f428f Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 6 Feb 2024 23:42:14 +0000
Subject: [PATCH 69/92] Staggered esplora fallback health checks

---
 backend/src/api/bitcoin/esplora-api.ts | 119 +++++++++++++++----------
 1 file changed, 70 insertions(+), 49 deletions(-)

diff --git a/backend/src/api/bitcoin/esplora-api.ts b/backend/src/api/bitcoin/esplora-api.ts
index c0b548b9a..2f4bcee85 100644
--- a/backend/src/api/bitcoin/esplora-api.ts
+++ b/backend/src/api/bitcoin/esplora-api.ts
@@ -4,6 +4,7 @@ import http from 'http';
 import { AbstractBitcoinApi } from './bitcoin-api-abstract-factory';
 import { IEsploraApi } from './esplora-api.interface';
 import logger from '../../logger';
+import { Common } from '../common';
 
 interface FailoverHost {
   host: string,
@@ -15,11 +16,13 @@ interface FailoverHost {
   outOfSync?: boolean,
   unreachable?: boolean,
   preferred?: boolean,
+  checked: boolean,
 }
 
 class FailoverRouter {
   activeHost: FailoverHost;
   fallbackHost: FailoverHost;
+  maxHeight: number = 0;
   hosts: FailoverHost[];
   multihost: boolean;
   pollInterval: number = 60000;
@@ -34,6 +37,7 @@ class FailoverRouter {
     this.hosts = (config.ESPLORA.FALLBACK || []).map(domain => {
       return {
         host: domain,
+        checked: false,
         rtts: [],
         rtt: Infinity,
         failures: 0,
@@ -46,6 +50,7 @@ class FailoverRouter {
       failures: 0,
       socket: !!config.ESPLORA.UNIX_SOCKET_PATH,
       preferred: true,
+      checked: false,
     };
     this.fallbackHost = this.activeHost;
     this.hosts.unshift(this.activeHost);
@@ -74,66 +79,87 @@ class FailoverRouter {
       clearTimeout(this.pollTimer);
     }
 
-    const results = await Promise.allSettled(this.hosts.map(async (host) => {
-      if (host.socket) {
-        return this.pollConnection.get<number>('/blocks/tip/height', { socketPath: host.host, timeout: config.ESPLORA.FALLBACK_TIMEOUT });
-      } else {
-        return this.pollConnection.get<number>(host.host + '/blocks/tip/height', { timeout: config.ESPLORA.FALLBACK_TIMEOUT });
-      }
-    }));
-    const maxHeight = results.reduce((max, result) => Math.max(max, result.status === 'fulfilled' ? result.value?.data || 0 : 0), 0);
+    const start = Date.now();
 
     // update rtts & sync status
-    for (let i = 0; i < results.length; i++) {
-      const host = this.hosts[i];
-      const result = results[i].status === 'fulfilled' ? (results[i] as PromiseFulfilledResult<AxiosResponse<number, any>>).value : null;
-      if (result) {
-        const height = result.data;
-        const rtt = result.config['meta'].rtt;
-        host.rtts.unshift(rtt);
-        host.rtts.slice(0, 5);
-        host.rtt = host.rtts.reduce((acc, l) => acc + l, 0) / host.rtts.length;
-        host.latestHeight = height;
-        if (height == null || isNaN(height) || (maxHeight - height > 2)) {
-          host.outOfSync = true;
+    for (const host of this.hosts) {
+      try {
+        const result = await (host.socket
+          ? this.pollConnection.get<number>('/blocks/tip/height', { socketPath: host.host, timeout: config.ESPLORA.FALLBACK_TIMEOUT })
+          : this.pollConnection.get<number>(host.host + '/blocks/tip/height', { timeout: config.ESPLORA.FALLBACK_TIMEOUT })
+        );
+        if (result) {
+          const height = result.data;
+          this.maxHeight = Math.max(height, this.maxHeight);
+          const rtt = result.config['meta'].rtt;
+          host.rtts.unshift(rtt);
+          host.rtts.slice(0, 5);
+          host.rtt = host.rtts.reduce((acc, l) => acc + l, 0) / host.rtts.length;
+          host.latestHeight = height;
+          if (height == null || isNaN(height) || (this.maxHeight - height > 2)) {
+            host.outOfSync = true;
+          } else {
+            host.outOfSync = false;
+          }
+          host.unreachable = false;
         } else {
-          host.outOfSync = false;
+          host.outOfSync = true;
+          host.unreachable = true;
+          host.rtts = [];
+          host.rtt = Infinity;
         }
-        host.unreachable = false;
-      } else {
+      } catch (e) {
         host.outOfSync = true;
         host.unreachable = true;
+        host.rtts = [];
+        host.rtt = Infinity;
       }
+      host.checked = true;
+      
+
+      // switch if the current host is out of sync or significantly slower than the next best alternative
+      const rankOrder = this.sortHosts();
+      // switch if the current host is out of sync or significantly slower than the next best alternative
+      if (this.activeHost.outOfSync || this.activeHost.unreachable || (this.activeHost !== rankOrder[0] && rankOrder[0].preferred) || (!this.activeHost.preferred && this.activeHost.rtt > (rankOrder[0].rtt * 2) + 50)) {
+        if (this.activeHost.unreachable) {
+          logger.warn(`🚨🚨🚨 Unable to reach ${this.activeHost.host}, failing over to next best alternative 🚨🚨🚨`);
+        } else if (this.activeHost.outOfSync) {
+          logger.warn(`🚨🚨🚨 ${this.activeHost.host} has fallen behind, failing over to next best alternative 🚨🚨🚨`);
+        } else {
+          logger.debug(`🛠️ ${this.activeHost.host} is no longer the best esplora host 🛠️`);
+        }
+        this.electHost();
+      }
+      await Common.sleep$(50);
     }
 
-    this.sortHosts();
+    const rankOrder = this.updateFallback();
+    logger.debug(`Tomahawk ranking:\n${rankOrder.map((host, index) => this.formatRanking(index, host, this.activeHost, this.maxHeight)).join('\n')}`);
 
-    logger.debug(`Tomahawk ranking:\n${this.hosts.map((host, index) => this.formatRanking(index, host, this.activeHost, maxHeight)).join('\n')}`);
+    const elapsed = Date.now() - start;
 
-    // switch if the current host is out of sync or significantly slower than the next best alternative
-    if (this.activeHost.outOfSync || this.activeHost.unreachable || (this.activeHost !== this.hosts[0] && this.hosts[0].preferred) || (!this.activeHost.preferred && this.activeHost.rtt > (this.hosts[0].rtt * 2) + 50)) {
-      if (this.activeHost.unreachable) {
-        logger.warn(`🚨🚨🚨 Unable to reach ${this.activeHost.host}, failing over to next best alternative 🚨🚨🚨`);
-      } else if (this.activeHost.outOfSync) {
-        logger.warn(`🚨🚨🚨 ${this.activeHost.host} has fallen behind, failing over to next best alternative 🚨🚨🚨`);
-      } else {
-        logger.debug(`🛠️ ${this.activeHost.host} is no longer the best esplora host 🛠️`);
-      }
-      this.electHost();
-    }
-
-    this.pollTimer = setTimeout(() => { this.pollHosts(); }, this.pollInterval);
+    this.pollTimer = setTimeout(() => { this.pollHosts(); }, Math.max(1, this.pollInterval - elapsed));
   }
 
   private formatRanking(index: number, host: FailoverHost, active: FailoverHost, maxHeight: number): string {
-    const heightStatus = host.outOfSync ? '🚫' : (host.latestHeight && host.latestHeight < maxHeight ? '🟧' : '✅');
-    return `${host === active ? '⭐️' : '  '} ${host.rtt < Infinity ? Math.round(host.rtt).toString().padStart(5, ' ') + 'ms' : '    -  '} ${host.unreachable ? '🔥' : '✅'} | block: ${host.latestHeight || '??????'} ${heightStatus} | ${host.host} ${host === active ? '⭐️' : '  '}`;
+    const heightStatus = !host.checked ? '⏳' : (host.outOfSync ? '🚫' : (host.latestHeight && host.latestHeight < maxHeight ? '🟧' : '✅'));
+    return `${host === active ? '⭐️' : '  '} ${host.rtt < Infinity ? Math.round(host.rtt).toString().padStart(5, ' ') + 'ms' : '    -  '} ${!host.checked ? '⏳' : (host.unreachable ? '🔥' : '✅')} | block: ${host.latestHeight || '??????'} ${heightStatus} | ${host.host} ${host === active ? '⭐️' : '  '}`;
+  }
+
+  private updateFallback(): FailoverHost[] {
+    const rankOrder = this.sortHosts();
+    if (rankOrder.length > 1 && rankOrder[0] === this.activeHost) {
+      this.fallbackHost = rankOrder[1];
+    } else {
+      this.fallbackHost = rankOrder[0];
+    }
+    return rankOrder;
   }
 
   // sort hosts by connection quality, and update default fallback
-  private sortHosts(): void {
+  private sortHosts(): FailoverHost[] {
     // sort by connection quality
-    this.hosts.sort((a, b) => {
+    return this.hosts.slice().sort((a, b) => {
       if ((a.unreachable || a.outOfSync) === (b.unreachable || b.outOfSync)) {
         if  (a.preferred === b.preferred) {
           // lower rtt is best
@@ -145,19 +171,14 @@ class FailoverRouter {
         return (a.unreachable || a.outOfSync) ? 1 : -1;
       }
     });
-    if (this.hosts.length > 1 && this.hosts[0] === this.activeHost) {
-      this.fallbackHost = this.hosts[1];
-    } else {
-      this.fallbackHost = this.hosts[0];
-    }
   }
 
   // depose the active host and choose the next best replacement
   private electHost(): void {
     this.activeHost.outOfSync = true;
     this.activeHost.failures = 0;
-    this.sortHosts();
-    this.activeHost = this.hosts[0];
+    const rankOrder = this.sortHosts();
+    this.activeHost = rankOrder[0];
     logger.warn(`Switching esplora host to ${this.activeHost.host}`);
   }
 

From 1547c2c4775330b639a8ad072e87df6e6db615b0 Mon Sep 17 00:00:00 2001
From: James Blacklock <public@jamesblacklock.net>
Date: Tue, 6 Feb 2024 22:13:10 -0500
Subject: [PATCH 70/92] fix syntax error in mempool-config.json

---
 docker/backend/mempool-config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker/backend/mempool-config.json b/docker/backend/mempool-config.json
index aefb095cf..8f69fd0c1 100644
--- a/docker/backend/mempool-config.json
+++ b/docker/backend/mempool-config.json
@@ -35,7 +35,7 @@
     "ALLOW_UNREACHABLE": __MEMPOOL_ALLOW_UNREACHABLE__,
     "POOLS_JSON_TREE_URL": "__MEMPOOL_POOLS_JSON_TREE_URL__",
     "POOLS_JSON_URL": "__MEMPOOL_POOLS_JSON_URL__",
-    "PRICE_UPDATES_PER_HOUR": __MEMPOOL_PRICE_UPDATES_PER_HOUR__
+    "PRICE_UPDATES_PER_HOUR": __MEMPOOL_PRICE_UPDATES_PER_HOUR__,
     "MAX_TRACKED_ADDRESSES": __MEMPOOL_MAX_TRACKED_ADDRESSES__
   },
   "CORE_RPC": {

From 624cbf05c02036fa79ae0b4a5dd7769b08633ef6 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <git@knorrium.info>
Date: Tue, 6 Feb 2024 19:47:09 -0800
Subject: [PATCH 71/92] Add a step to validate the JSON config generated for
 Docker

---
 .github/workflows/ci.yml | 30 +++++++++++++++++++++++++++++-
 .gitignore               |  1 +
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c435d6ea5..0961f1c88 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -329,4 +329,32 @@ jobs:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
-        
\ No newline at end of file
+
+  validate_docker_json:
+    if: "!contains(github.event.pull_request.labels.*.name, 'ops') && !contains(github.head_ref, 'ops/')"
+    runs-on: "ubuntu-latest"
+    name: Validate generated backend Docker JSON
+
+    steps: 
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          path: docker
+      
+      - name: Install jq
+        run: sudo apt-get install jq -y
+
+      - name: Create new start script to run on CI
+        run: |
+          sed '$d' start.sh > start_ci.sh
+        working-directory: docker/docker/backend
+
+      - name: Run the script to generate the sample JSON
+        run: |
+          sh start_ci.sh
+        working-directory: docker/docker/backend
+
+      - name: Validate JSON syntax
+        run: |
+          cat mempool-config.json | jq
+        working-directory: docker/docker/backend
diff --git a/.gitignore b/.gitignore
index 4f19f2522..381f2187c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ backend/mempool-config.json
 frontend/src/resources/config.template.js
 frontend/src/resources/config.js
 target
+docker/backend/start_ci.sh
\ No newline at end of file

From df7f1cc86b98dd24d1d67e674f7bd16346276424 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Wed, 7 Feb 2024 11:31:22 +0100
Subject: [PATCH 72/92] Blockchain component: display dash when feerate is
 undefined

---
 .../blockchain-blocks/blockchain-blocks.component.html |  4 ++--
 .../shared/components/fee-rate/fee-rate.component.html | 10 ++++++++--
 .../shared/components/fee-rate/fee-rate.component.ts   |  2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
index 680beb006..443fc1946 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
@@ -26,7 +26,7 @@
             </div>
             <ng-template #emptyfees>
               <div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
-                &nbsp;
+                <app-fee-rate unitClass=""></app-fee-rate>
               </div>
             </ng-template>
             <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-fee-span'" class="fee-span"
@@ -37,7 +37,7 @@
             </div>
             <ng-template #emptyfeespan>
               <div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fee-span">
-                &nbsp;
+                <app-fee-rate unitClass=""></app-fee-rate>
               </div>
             </ng-template>
             <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-total-fees'" *ngIf="showMiningInfo"
diff --git a/frontend/src/app/shared/components/fee-rate/fee-rate.component.html b/frontend/src/app/shared/components/fee-rate/fee-rate.component.html
index c3e1615ff..f9e86cc2b 100644
--- a/frontend/src/app/shared/components/fee-rate/fee-rate.component.html
+++ b/frontend/src/app/shared/components/fee-rate/fee-rate.component.html
@@ -1,4 +1,10 @@
 <ng-container *ngIf="rateUnits$ | async as units">
-  <ng-container *ngIf="units !== 'wu'">{{ fee / (weight / 4) | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></ng-container>
-  <ng-container *ngIf="units === 'wu'">{{ fee / weight | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-weight-units|sat/WU">sat/WU</span></ng-container>
+  <ng-container *ngIf="fee !== undefined; else noFee">
+    <ng-container *ngIf="units !== 'wu'">{{ fee / (weight / 4) | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></ng-container>
+    <ng-container *ngIf="units === 'wu'">{{ fee / weight | feeRounding:rounding }} <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-weight-units|sat/WU">sat/WU</span></ng-container>
+  </ng-container>
+  <ng-template #noFee>
+      <ng-container *ngIf="units !== 'wu'">- <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></ng-container>
+      <ng-container *ngIf="units === 'wu'">- <span *ngIf="showUnit" [class]="unitClass" [style]="unitStyle" i18n="shared.sat-weight-units|sat/WU">sat/WU</span></ng-container>
+  </ng-template>
 </ng-container>
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts b/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts
index 4d65ef0c2..b1d143e7f 100644
--- a/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts
+++ b/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts
@@ -8,7 +8,7 @@ import { StateService } from '../../../services/state.service';
   styleUrls: ['./fee-rate.component.scss']
 })
 export class FeeRateComponent implements OnInit {
-  @Input() fee: number;
+  @Input() fee: number | undefined;
   @Input() weight: number = 4;
   @Input() rounding: string = null;
   @Input() showUnit: boolean = true;

From 20614213a7d07c1671b74e128157a38d8f82378e Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Wed, 7 Feb 2024 12:41:56 +0100
Subject: [PATCH 73/92] Add skeleton to recent blocks on Liquid dashboard

---
 .../app/dashboard/dashboard.component.html    | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 92b64fe5e..1cb2fadd1 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -117,22 +117,14 @@
             <table class="table lastest-blocks-table">
               <thead>
                 <th class="table-cell-height" i18n="dashboard.latest-blocks.height">Height</th>
-                <th *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" i18n="dashboard.latest-blocks.mined">Mined</th>
-                <th *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4" i18n="mining.pool-name">Pool</th>
+                <th class="table-cell-mined" i18n="dashboard.latest-blocks.mined">Mined</th>
                 <th class="table-cell-transaction-count" i18n="dashboard.latest-blocks.transaction-count">TXs</th>
                 <th class="table-cell-size" i18n="dashboard.latest-blocks.size">Size</th>
               </thead>
-              <tbody>
-                <tr *ngFor="let block of blocks$ | async; let i = index; trackBy: trackByBlock">
+              <tbody *ngIf="blocks$ | async as blocks; else blocksSkeleton">
+                <tr *ngFor="let block of blocks; let i = index; trackBy: trackByBlock">
                   <td class="table-cell-height" ><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
-                  <td *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" ><app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time></td>
-                  <td *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4">
-                    <a class="clear-link" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
-                      <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
-                        onError="this.src = '/resources/mining-pools/default.svg'">
-                      <span class="pool-name">{{ block.extras.pool.name }}</span>
-                    </a>
-                  </td>
+                  <td class="table-cell-mined" ><app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time></td>
                   <td class="table-cell-transaction-count">{{ block.tx_count | number }}</td>
                   <td class="table-cell-size">
                     <div class="progress">
@@ -221,6 +213,17 @@
   </tbody>
 </ng-template>
 
+<ng-template #blocksSkeleton>
+  <tbody>
+    <tr *ngFor="let i of [1,2,3,4,5,6]">
+      <td class="table-cell-height"><div class="skeleton-loader skeleton-loader-transactions"></div> </td>
+      <td class="table-cell-mined"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-transaction-count"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+      <td class="table-cell-size"><div class="skeleton-loader skeleton-loader-transactions"></div></td>
+    </tr>
+  </tbody>
+</ng-template>
+
 <ng-template #loadingTransactions>
   <div class="skeleton-loader skeleton-loader-transactions"></div>
 </ng-template>

From 1e568e5b4c4308e8e830a9fe1ad21165ad938c62 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 7 Feb 2024 11:53:08 +0000
Subject: [PATCH 74/92] Bump follow-redirects from 1.15.2 to 1.15.5 in /backend

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.2 to 1.15.5.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.2...v1.15.5)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 backend/package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/backend/package-lock.json b/backend/package-lock.json
index 1794934d2..db71881cc 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -3673,9 +3673,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "funding": [
         {
           "type": "individual",
@@ -10440,9 +10440,9 @@
       "dev": true
     },
     "follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw=="
     },
     "form-data": {
       "version": "4.0.0",

From 03d4375b17a63dd1e9eb950ad726fd0338848841 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Wed, 7 Feb 2024 14:51:23 +0100
Subject: [PATCH 75/92] Clean up blocks-list skeleton

---
 .../app/components/blocks-list/blocks-list.component.html  | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html
index 838c7cb4e..fd171720f 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -92,21 +92,18 @@
               <span class="skeleton-loader" style="max-width: 75px"></span>
             </td>
             <td *ngIf="isMempoolModule" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !isMempoolModule}">
-              <span class="skeleton-loader" style="max-width: 125px"></span>
+              <span class="skeleton-loader" style="max-width: 150px"></span>
             </td>
             <td class="timestamp" *ngIf="!widget" [class]="isMempoolModule ? '' : 'legacy'">
               <span class="skeleton-loader" style="max-width: 150px"></span>
             </td>
-            <td class="mined" *ngIf="!widget" [class]="isMempoolModule ? '' : 'legacy'">
-              <span class="skeleton-loader" style="max-width: 125px"></span>
-            </td>
             <td *ngIf="auditAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !isMempoolModule}">
               <span class="skeleton-loader" style="max-width: 75px"></span>
             </td>
             <td *ngIf="isMempoolModule" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !isMempoolModule}">
               <span class="skeleton-loader" style="max-width: 75px"></span>
             </td>
-            <td *ngIf="isMempoolModule && !widget" class="fees text-right" [class]="isMempoolModule ? '' : 'legacy'">
+            <td *ngIf="isMempoolModule && !auditAvailable || isMempoolModule && !widget" class="fees text-right" [class]="isMempoolModule ? '' : 'legacy'">
               <span class="skeleton-loader" style="max-width: 75px"></span>
             </td>
             <td *ngIf="auditAvailable && !widget" class="fee-delta" [class]="isMempoolModule ? '' : 'legacy'">

From 4f98a413d19d6c2914a8272c06e0c0e357c720e5 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 7 Feb 2024 20:23:35 +0000
Subject: [PATCH 76/92] address scroll handle different page sizes

---
 frontend/src/app/components/address/address.component.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts
index ed28fa1d2..33cf3abf7 100644
--- a/frontend/src/app/components/address/address.component.ts
+++ b/frontend/src/app/components/address/address.component.ts
@@ -258,8 +258,7 @@ export class AddressComponent implements OnInit, OnDestroy {
         if (transactions && transactions.length) {
           this.lastTransactionTxId = transactions[transactions.length - 1].txid;
           this.transactions = this.transactions.concat(transactions);
-        }
-        if (transactions?.length == null || transactions.length < 50) {
+        } else {
           this.fullyLoaded = true;
         }
         this.isLoadingTransactions = false;

From 29e4a581e7bbd7b856d00b297d2a3e649b916bf9 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 7 Feb 2024 21:39:39 +0000
Subject: [PATCH 77/92] Add next block visualization to main dashboard, expand
 widgets

---
 .../app/dashboard/dashboard.component.html    | 70 ++++++++----------
 .../app/dashboard/dashboard.component.scss    | 26 ++++++-
 .../src/app/dashboard/dashboard.component.ts  | 72 +++++++++++--------
 3 files changed, 97 insertions(+), 71 deletions(-)

diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 92b64fe5e..08d4a130a 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -16,23 +16,22 @@
     </ng-container>
     <div class="col">
       <div class="card graph-card">
-        <div class="card-body pl-0">
-          <div style="padding-left: 1.25rem;">
-            <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
-            <hr>
-          </div>
+        <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
           <ng-template [ngIf]="(network$ | async) !== 'liquid'" [ngIfElse]="liquidPegs">
-            <ng-container *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
-              <div class="mempool-graph">
-                <app-mempool-graph
-                [template]="'widget'"
-                [data]="mempoolStats.value?.mempool"
-                [windowPreferenceOverride]="'2h'"
-                ></app-mempool-graph>
-              </div>
-            </ng-container>
+            <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
+              <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles">Mempool Goggles</h5>
+              <span>&nbsp;</span>
+              <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            </a>
+            <div class="mempool-block-wrapper">
+              <app-mempool-block-overview [index]="0"></app-mempool-block-overview>
+            </div>
           </ng-template>
           <ng-template #liquidPegs>
+            <div style="padding-left: 1.25rem;">
+              <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
+              <hr>
+            </div>
             <app-lbtc-pegs-graph [data]="fullHistory$ | async"></app-lbtc-pegs-graph>
           </ng-template>
         </div>
@@ -41,9 +40,21 @@
     <div class="col">
       <div class="card graph-card">
         <div class="card-body">
-          <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? mempoolTable : txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
-          <hr>
-          <div class="mempool-graph" *ngIf="stateService.network === 'liquid'; else mempoolGraph">
+          <ng-container *ngIf="stateService.network !== 'liquid'">
+            <h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming Transactions</h5>
+            <div class="mempool-graph" *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
+              <app-incoming-transactions-graph
+                [height]="incomingGraphHeight"
+                [left]="50"
+                [right]="20"
+                [data]="mempoolStats.value?.weightPerSecond"
+                [windowPreferenceOverride]="'2h'"
+                ></app-incoming-transactions-graph>
+            </div>
+          </ng-container>
+          <ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
+          <div class="mempool-graph" *ngIf="stateService.network === 'liquid'">
+            <hr>
             <table class="table table-borderless table-striped" *ngIf="(featuredAssets$ | async) as featuredAssets else loadingAssetsTable">
               <tbody>
                 <tr *ngFor="let group of featuredAssets">
@@ -60,15 +71,6 @@
               </tbody>
             </table>
           </div>
-          <ng-template #mempoolGraph>
-            <div class="mempool-graph" *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
-              <app-incoming-transactions-graph
-                [left]="50"
-                [data]="mempoolStats.value?.weightPerSecond"
-                [windowPreferenceOverride]="'2h'"
-                ></app-incoming-transactions-graph>
-            </div>
-          </ng-template>
         </div>
       </div>
     </div>
@@ -284,19 +286,3 @@
     </div>
   </div>
 </ng-template>
-
-<ng-template #txPerSecond let-mempoolInfoData>
-  <h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming Transactions</h5>
-  <ng-template [ngIf]="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value" [ngIfElse]="loadingTransactions">
-    <span *ngIf="(mempoolLoadingStatus$ | async) !== 100; else inSync">
-      &nbsp;<span class="badge badge-pill badge-warning"><ng-container i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</ng-container> ({{ mempoolLoadingStatus$ | async }}%)</span>
-    </span>
-    <ng-template #inSync>
-      <div class="progress inc-tx-progress-bar">
-        <div class="progress-bar {{ mempoolInfoData.value.progressColor }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">&nbsp;</div>
-        <div *only-vsize class="progress-text">&lrm;{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
-        <div *only-weight class="progress-text">&lrm;{{ mempoolInfoData.value.vBytesPerSecond * 4 | ceil | number }} <ng-container i18n="shared.weight-per-second|WU/s">WU/s</ng-container></div>
-      </div>
-    </ng-template>
-  </ng-template>
-</ng-template>
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 2b319c425..d74d82054 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -44,8 +44,11 @@
 
 .graph-card {
   height: 100%;
+  @media (min-width: 768px) {
+    height: 415px;
+  }
   @media (min-width: 992px) {
-    height: 385px;
+    height: 500px;
   }
 }
 
@@ -258,6 +261,12 @@
 
 .mempool-graph {
   height: 255px;
+  @media (min-width: 768px) {
+    height: 285px;
+  }
+  @media (min-width: 992px) {
+    height: 370px;
+  }
 }
 .loadingGraphs{
   height: 250px;
@@ -364,3 +373,18 @@
   text-decoration: none;
   color: inherit;
 }
+
+.mempool-block-wrapper {
+  max-height: 430px;
+  max-width: 430px;
+  margin: auto;
+
+  @media (min-width: 768px) {
+    max-height: 344px;
+    max-width: 344px;
+  }
+  @media (min-width: 992px) {
+    max-height: 430px;
+    max-width: 430px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 6e65f2332..505fecc14 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { combineLatest, EMPTY, merge, Observable, of, Subject, Subscription, timer } from 'rxjs';
 import { catchError, delayWhen, filter, map, scan, share, shareReplay, startWith, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
 import { AuditStatus, BlockExtended, CurrentPegs, OptimizedMempoolStats } from '../interfaces/node-api.interface';
@@ -54,8 +54,10 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   currentReserves$: Observable<CurrentPegs>;
   fullHistory$: Observable<any>;
   isLoad: boolean = true;
+  mempoolInfoSubscription: Subscription;
   currencySubscription: Subscription;
   currency: string;
+  incomingGraphHeight: number = 300;
   private lastPegBlockUpdate: number = 0;
   private lastPegAmount: string = '';
   private lastReservesBlockUpdate: number = 0;
@@ -74,6 +76,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngOnDestroy(): void {
+    this.mempoolInfoSubscription.unsubscribe();
     this.currencySubscription.unsubscribe();
     this.websocketService.stopTrackRbfSummary();
     this.destroy$.next(1);
@@ -81,6 +84,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngOnInit(): void {
+    this.onResize();
     this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
     this.seoService.resetTitle();
     this.seoService.resetDescription();
@@ -95,36 +99,37 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
     this.mempoolInfoData$ = combineLatest([
       this.stateService.mempoolInfo$,
       this.stateService.vbytesPerSecond$
-    ])
-      .pipe(
-        map(([mempoolInfo, vbytesPerSecond]) => {
-          const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100);
+    ]).pipe(
+      map(([mempoolInfo, vbytesPerSecond]) => {
+        const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100);
 
-          let progressColor = 'bg-success';
-          if (vbytesPerSecond > 1667) {
-            progressColor = 'bg-warning';
-          }
-          if (vbytesPerSecond > 3000) {
-            progressColor = 'bg-danger';
-          }
+        let progressColor = 'bg-success';
+        if (vbytesPerSecond > 1667) {
+          progressColor = 'bg-warning';
+        }
+        if (vbytesPerSecond > 3000) {
+          progressColor = 'bg-danger';
+        }
 
-          const mempoolSizePercentage = (mempoolInfo.usage / mempoolInfo.maxmempool * 100);
-          let mempoolSizeProgress = 'bg-danger';
-          if (mempoolSizePercentage <= 50) {
-            mempoolSizeProgress = 'bg-success';
-          } else if (mempoolSizePercentage <= 75) {
-            mempoolSizeProgress = 'bg-warning';
-          }
+        const mempoolSizePercentage = (mempoolInfo.usage / mempoolInfo.maxmempool * 100);
+        let mempoolSizeProgress = 'bg-danger';
+        if (mempoolSizePercentage <= 50) {
+          mempoolSizeProgress = 'bg-success';
+        } else if (mempoolSizePercentage <= 75) {
+          mempoolSizeProgress = 'bg-warning';
+        }
 
-          return {
-            memPoolInfo: mempoolInfo,
-            vBytesPerSecond: vbytesPerSecond,
-            progressWidth: percent + '%',
-            progressColor: progressColor,
-            mempoolSizeProgress: mempoolSizeProgress,
-          };
-        })
-      );
+        return {
+          memPoolInfo: mempoolInfo,
+          vBytesPerSecond: vbytesPerSecond,
+          progressWidth: percent + '%',
+          progressColor: progressColor,
+          mempoolSizeProgress: mempoolSizeProgress,
+        };
+      })
+    );
+
+    this.mempoolInfoSubscription = this.mempoolInfoData$.subscribe();
 
     this.mempoolBlocksData$ = this.stateService.mempoolBlocks$
       .pipe(
@@ -347,4 +352,15 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   trackByBlock(index: number, block: BlockExtended) {
     return block.height;
   }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    if (window.innerWidth >= 992) {
+      this.incomingGraphHeight = 300;
+    } else if (window.innerWidth >= 768) {
+      this.incomingGraphHeight = 215;
+    } else {
+      this.incomingGraphHeight = 180;
+    }
+  }
 }

From ba0a3d004df4ce3b4db444f20219f6fbbb9e6f75 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 7 Feb 2024 21:40:22 +0000
Subject: [PATCH 78/92] Expand acceleration dashboard widgets & improve
 responsiveness

---
 .../acceleration-fees-graph.component.html    |  6 ----
 .../acceleration-fees-graph.component.scss    |  5 ----
 .../acceleration-fees-graph.component.ts      |  5 +++-
 .../accelerator-dashboard.component.html      | 15 +++++++++-
 .../accelerator-dashboard.component.scss      | 30 +++++++++++++++++--
 .../accelerator-dashboard.component.ts        | 16 +++++++++-
 6 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html
index 98095aa07..3698a3060 100644
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html
@@ -27,12 +27,6 @@
     </form>
   </div>
 
-  <div *ngIf="widget">
-    <div class="item">
-      <h5 class="card-title" i18n="acceleration.total-bid-boost">Total Bid Boost</h5>
-    </div>
-  </div>
-
   <div [class.chart]="!widget" [class.chart-widget]="widget" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
     (chartInit)="onChartInit($event)">
   </div>
diff --git a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
index c4b4335ee..e01beb350 100644
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
@@ -53,11 +53,6 @@
     padding-bottom: 55px;
   }
 }
-.chart-widget {
-  width: 100%;
-  height: 100%;
-  max-height: 290px;
-}
 
 h5 {
   margin-bottom: 10px;
diff --git a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
index d75cbba2d..c47232501 100644
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
 import { EChartsOption, graphic } from 'echarts';
-import { Observable, Subscription, combineLatest } from 'rxjs';
+import { Observable, Subscription, combineLatest, fromEvent } from 'rxjs';
 import { map, max, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../../services/api.service';
 import { SeoService } from '../../../services/seo.service';
@@ -28,6 +28,7 @@ import { Acceleration } from '../../../interfaces/node-api.interface';
 })
 export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
   @Input() widget: boolean = false;
+  @Input() height: number | string = '200';
   @Input() right: number | string = 45;
   @Input() left: number | string = 75;
   @Input() accelerations$: Observable<Acceleration[]>;
@@ -74,6 +75,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
       this.statsObservable$ = combineLatest([
         (this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: this.miningWindowPreference })),
         this.apiService.getHistoricalBlockFees$(this.miningWindowPreference),
+        fromEvent(window, 'resize').pipe(startWith(null)),
       ]).pipe(
         tap(([accelerations, blockFeesResponse]) => {
           this.prepareChartOptions(accelerations, blockFeesResponse.body);
@@ -173,6 +175,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
       ],
       animation: false,
       grid: {
+        height: this.height,
         right: this.right,
         left: this.left,
         bottom: this.widget ? 30 : 80,
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
index 19d01e726..e7a11ac89 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
@@ -37,6 +37,11 @@
     <div class="col" style="margin-bottom: 1.47rem">
       <div class="card">
         <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
+          <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
+            <h5 class="card-title d-inline" i18n="dashboard.next-block">Next Block</h5>
+            <span>&nbsp;</span>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
+          </a>
           <div class="mempool-block-wrapper">
             <app-mempool-block-overview [index]="0" [overrideColors]="getAcceleratorColor"></app-mempool-block-overview>
           </div>
@@ -48,7 +53,15 @@
     <div class="col" style="margin-bottom: 1.47rem">
       <div class="card graph-card">
         <div class="card-body pl-2 pr-2">
-          <app-acceleration-fees-graph [attr.data-cy]="'acceleration-fees'" [widget]=true [accelerations$]="accelerations$"></app-acceleration-fees-graph>
+          <h5 class="card-title" i18n="acceleration.total-bid-boost">Total Bid Boost</h5>
+          <div class="mempool-graph">
+            <app-acceleration-fees-graph
+              [height]="graphHeight"
+              [attr.data-cy]="'acceleration-fees'"
+              [widget]=true
+              [accelerations$]="accelerations$"
+            ></app-acceleration-fees-graph>
+          </div>
           <div class="mt-1"><a [attr.data-cy]="'acceleration-fees-view-more'" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
         </div>
       </div>
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
index 145569342..77e287447 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
@@ -17,6 +17,16 @@
   }
 }
 
+.mempool-graph {
+  height: 295px;
+  @media (min-width: 768px) {
+    height: 325px;
+  }
+  @media (min-width: 992px) {
+    height: 400px;
+  }
+}
+
 .card-title {
   font-size: 1rem;
   color: #4a68b9;
@@ -135,7 +145,12 @@
 }
 
 .card {
-  height: 385px;
+  @media (min-width: 768px) {
+    height: 420px;
+  }
+  @media (min-width: 992px) {
+    height: 500px;
+  }
 }
 .list-card {
   height: 410px;
@@ -145,7 +160,16 @@
 }
 
 .mempool-block-wrapper {
-  max-height: 380px;
-  max-width: 380px;
+  max-height: 430px;
+  max-width: 430px;
   margin: auto;
+
+  @media (min-width: 768px) {
+    max-height: 344px;
+    max-width: 344px;
+  }
+  @media (min-width: 992px) {
+    max-height: 430px;
+    max-width: 430px;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
index c39dbd253..07a513e7f 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
 import { SeoService } from '../../../services/seo.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
@@ -30,6 +30,8 @@ export class AcceleratorDashboardComponent implements OnInit {
   minedAccelerations$: Observable<Acceleration[]>;
   loadingBlocks: boolean = true;
 
+  graphHeight: number = 300;
+
   constructor(
     private seoService: SeoService,
     private websocketService: WebsocketService,
@@ -40,6 +42,7 @@ export class AcceleratorDashboardComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.onResize();
     this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
 
     this.pendingAccelerations$ = interval(30000).pipe(
@@ -121,4 +124,15 @@ export class AcceleratorDashboardComponent implements OnInit {
       return normalColors[feeLevelIndex] || normalColors[mempoolFeeColors.length - 1];
     }
   }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    if (window.innerWidth >= 992) {
+      this.graphHeight = 330;
+    } else if (window.innerWidth >= 768) {
+      this.graphHeight = 245;
+    } else {
+      this.graphHeight = 210;
+    }
+  }
 }

From ce7a007b62517fe71260dacb5fcf1d9ffb734150 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 7 Feb 2024 23:26:06 +0000
Subject: [PATCH 79/92] Expand mining dashboard widgets & improve
 responsiveness

---
 .../hashrate-chart.component.scss             |  1 -
 .../hashrate-chart.component.ts               | 44 +++++++++++--------
 .../mining-dashboard.component.html           | 10 +++--
 .../mining-dashboard.component.scss           | 13 ++++++
 .../mining-dashboard.component.ts             | 16 ++++++-
 .../pool-ranking/pool-ranking.component.html  |  2 +-
 .../pool-ranking/pool-ranking.component.scss  |  4 +-
 .../pool-ranking/pool-ranking.component.ts    |  1 +
 8 files changed, 65 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
index 886608573..a19cd47aa 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -58,7 +58,6 @@
 .chart-widget {
   width: 100%;
   height: 100%;
-  height: 240px;
 }
 
 .pool-distribution {
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
index 9858807a6..2bda9a35a 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
 import { echarts, EChartsOption } from '../../graphs/echarts';
-import { merge, Observable, of } from 'rxjs';
+import { combineLatest, fromEvent, merge, Observable, of } from 'rxjs';
 import { map, mergeMap, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
@@ -31,6 +31,7 @@ import { seoDescriptionNetwork } from '../../shared/common.utils';
 export class HashrateChartComponent implements OnInit {
   @Input() tableOnly = false;
   @Input() widget = false;
+  @Input() height: number = 300;
   @Input() right: number | string = 45;
   @Input() left: number | string = 75;
 
@@ -86,28 +87,32 @@ export class HashrateChartComponent implements OnInit {
         }
       });
 
-    this.hashrateObservable$ = merge(
-      this.radioGroupForm.get('dateSpan').valueChanges
-        .pipe(
-          startWith(this.radioGroupForm.controls.dateSpan.value),
-          switchMap((timespan) => {
-            if (!this.widget && !firstRun) {
-              this.storageService.setValue('miningWindowPreference', timespan);
-            }
-            this.timespan = timespan;
-            firstRun = false;
-            this.miningWindowPreference = timespan;
-            this.isLoading = true;
-            return this.apiService.getHistoricalHashrate$(this.timespan);
-          })
-        ),
-        this.stateService.chainTip$
+    this.hashrateObservable$ = combineLatest(
+        merge(
+        this.radioGroupForm.get('dateSpan').valueChanges
           .pipe(
-            switchMap(() => {
+            startWith(this.radioGroupForm.controls.dateSpan.value),
+            switchMap((timespan) => {
+              if (!this.widget && !firstRun) {
+                this.storageService.setValue('miningWindowPreference', timespan);
+              }
+              this.timespan = timespan;
+              firstRun = false;
+              this.miningWindowPreference = timespan;
+              this.isLoading = true;
               return this.apiService.getHistoricalHashrate$(this.timespan);
             })
-          )
+          ),
+          this.stateService.chainTip$
+            .pipe(
+              switchMap(() => {
+                return this.apiService.getHistoricalHashrate$(this.timespan);
+              })
+            )
+        ),
+        fromEvent(window, 'resize').pipe(startWith(null)),
       ).pipe(
+        map(([response, _]) => response),
         tap((response: any) => {
           const data = response.body;
 
@@ -221,6 +226,7 @@ export class HashrateChartComponent implements OnInit {
         ]),
       ],
       grid: {
+        height: (this.widget && this.height) ? this.height - 30 : undefined,
         top: this.widget ? 20 : 40,
         bottom: this.widget ? 30 : 70,
         right: this.right,
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
index fd6e045dc..c4fca72eb 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
@@ -26,9 +26,11 @@
 
     <!-- pool distribution -->
     <div class="col" style="margin-bottom: 1.47rem">
-      <div class="card graph-card">
+      <div class="card">
         <div class="card-body pl-2 pr-2">
-          <app-pool-ranking [attr.data-cy]="'pool-distribution'" [widget]=true></app-pool-ranking>
+          <div class="mempool-graph">
+            <app-pool-ranking [height]="graphHeight" [attr.data-cy]="'pool-distribution'" [widget]=true></app-pool-ranking>
+          </div>
           <div class="mt-1"><a [attr.data-cy]="'pool-distribution-view-more'" [routerLink]="['/graphs/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
         </div>
       </div>
@@ -38,7 +40,9 @@
     <div class="col" style="margin-bottom: 1.47rem">
       <div class="card">
         <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
-          <app-hashrate-chart [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-hashrate-chart>
+          <div class="fixed-mempool-graph">
+            <app-hashrate-chart [height]="graphHeight" [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-hashrate-chart>
+          </div>
           <div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" fragment="1y" i18n="dashboard.view-more">View more &raquo;</a></div>
         </div>
       </div>
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
index 4f01f7cad..c93a952f1 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -17,6 +17,19 @@
   }
 }
 
+.fixed-mempool-graph {
+  height: 330px;
+}
+
+.mempool-graph, .fixed-mempool-graph {
+  @media (min-width: 768px) {
+    height: 345px;
+  }
+  @media (min-width: 992px) {
+    height: 432px;
+  }
+}
+
 .card-title {
   font-size: 1rem;
   color: #4a68b9;
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
index b3b2093ce..dce9b9f13 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
 import { SeoService } from '../../services/seo.service';
 import { WebsocketService } from '../../services/websocket.service';
 import { StateService } from '../../services/state.service';
@@ -11,6 +11,8 @@ import { EventType, NavigationStart, Router } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MiningDashboardComponent implements OnInit, AfterViewInit {
+  graphHeight = 300;
+
   constructor(
     private seoService: SeoService,
     private websocketService: WebsocketService,
@@ -22,6 +24,7 @@ export class MiningDashboardComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit(): void {
+    this.onResize();
     this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
   }
 
@@ -35,4 +38,15 @@ export class MiningDashboardComponent implements OnInit, AfterViewInit {
       }
     });
   }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    if (window.innerWidth >= 992) {
+      this.graphHeight = 330;
+    } else if (window.innerWidth >= 768) {
+      this.graphHeight = 245;
+    } else {
+      this.graphHeight = 240;
+    }
+  }
 }
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
index 19ccaccdd..85dd16152 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -76,7 +76,7 @@
   </div>
 
   <div [class]="!widget ? '' : 'pb-0'" class="container pb-lg-0">
-    <div [class]="widget ? 'chart-widget' : 'chart'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    <div [class]="widget ? 'chart-widget' : 'chart'" [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
       (chartInit)="onChartInit($event)">
     </div>
 
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
index 970b3a8ea..f5a49678b 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -28,7 +28,9 @@
 .chart-widget {
   width: 100%;
   height: 100%;
-  height: 240px;
+  @media (max-width: 767px) {
+    max-height: 240px;
+  }
   @media (max-width: 485px) {
     max-height: 200px;
   }
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
index 392cdf8c5..f7b91e151 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -20,6 +20,7 @@ import { isMobile } from '../../shared/common.utils';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PoolRankingComponent implements OnInit {
+  @Input() height: number = 300;
   @Input() widget = false;
 
   miningWindowPreference: string;

From ca2c5d3628859a79e76c99e4103fe331b1d11ce3 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 8 Feb 2024 00:00:06 +0000
Subject: [PATCH 80/92] Expand lightning dashboard widgets & improve
 responsiveness

---
 .../lightning-dashboard.component.html        | 16 ++--
 .../lightning-dashboard.component.scss        | 13 +++
 .../lightning-dashboard.component.ts          | 16 +++-
 .../nodes-networks-chart.component.html       |  2 +-
 .../nodes-networks-chart.component.scss       |  1 -
 .../nodes-networks-chart.component.ts         | 91 ++++++++++---------
 .../nodes-per-isp-chart.component.html        |  2 +-
 .../nodes-per-isp-chart.component.ts          |  1 +
 .../lightning-statistics-chart.component.html |  2 +-
 .../lightning-statistics-chart.component.scss |  1 -
 .../lightning-statistics-chart.component.ts   | 76 +++++++++-------
 11 files changed, 134 insertions(+), 87 deletions(-)

diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
index 89059185e..ec59b7432 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
@@ -34,9 +34,11 @@
 
     <!-- ISP pie chart -->
     <div class="col" style="margin-bottom: 1.47rem">
-      <div class="card graph-card">
+      <div class="card">
         <div class="card-body pl-2 pr-2">
-          <app-nodes-per-isp-chart [widget]="true"></app-nodes-per-isp-chart>
+          <div class="mempool-graph">
+            <app-nodes-per-isp-chart [height]="graphHeight" [widget]="true"></app-nodes-per-isp-chart>
+          </div>
           <div style="margin-top: 5px"><a [attr.data-cy]="'pool-distribution-view-more'" [routerLink]="['/graphs/lightning/nodes-per-isp' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
         </div>
       </div>
@@ -44,11 +46,13 @@
 
     <!-- Network history -->
     <div class="col">
-      <div class="card graph-card">
+      <div class="card">
         <div class="card-body pl-2 pr-2 pt-1">
-          <h5 class="card-title mt-3" i18n="lightning.network-history">Lightning Network History</h5>
-          <app-lightning-statistics-chart [widget]=true></app-lightning-statistics-chart>
-          <app-nodes-networks-chart [widget]=true></app-nodes-networks-chart>
+          <div class="mempool-graph">
+            <h5 class="card-title mt-3" i18n="lightning.network-history">Lightning Network History</h5>
+            <app-lightning-statistics-chart [height]="(graphHeight / 1.7)" [widget]=true></app-lightning-statistics-chart>
+            <app-nodes-networks-chart [height]="(graphHeight / 1.7)" [widget]=true></app-nodes-networks-chart>
+          </div>
           <div><a [routerLink]="['/graphs/lightning/nodes-networks' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
         </div>
       </div>
diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
index e91f7606a..3b95f4d3a 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
@@ -20,6 +20,19 @@
   }
 }
 
+.fixed-mempool-graph {
+  height: 330px;
+}
+
+.mempool-graph, .fixed-mempool-graph {
+  @media (min-width: 768px) {
+    height: 345px;
+  }
+  @media (min-width: 992px) {
+    height: 432px;
+  }
+}
+
 .card-title {
   font-size: 1rem;
   color: #4a68b9;
diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts
index dece98ddb..e49d55dd5 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { share } from 'rxjs/operators';
 import { INodesRanking, INodesStatistics } from '../../interfaces/node-api.interface';
@@ -16,6 +16,7 @@ export class LightningDashboardComponent implements OnInit, AfterViewInit {
   statistics$: Observable<INodesStatistics>;
   nodesRanking$: Observable<INodesRanking>;
   officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
+  graphHeight: number = 300;
 
   constructor(
     private lightningApiService: LightningApiService,
@@ -24,6 +25,8 @@ export class LightningDashboardComponent implements OnInit, AfterViewInit {
   ) { }
 
   ngOnInit(): void {
+    this.onResize();
+    
     this.seoService.setTitle($localize`:@@142e923d3b04186ac6ba23387265d22a2fa404e0:Lightning Explorer`);
     this.seoService.setDescription($localize`:@@meta.description.lightning.dashboard:Get stats on the Lightning network (aggregate capacity, connectivity, etc), Lightning nodes (channels, liquidity, etc) and Lightning channels (status, fees, etc).`);
 
@@ -34,4 +37,15 @@ export class LightningDashboardComponent implements OnInit, AfterViewInit {
   ngAfterViewInit(): void {
     this.stateService.focusSearchInputDesktop();
   }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    if (window.innerWidth >= 992) {
+      this.graphHeight = 330;
+    } else if (window.innerWidth >= 768) {
+      this.graphHeight = 245;
+    } else {
+      this.graphHeight = 210;
+    }
+  }
 }
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
index 908b98fda..915f2f7ec 100644
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
@@ -35,7 +35,7 @@
     </form>
   </div>
 
-  <div [class]="!widget ? 'chart' : 'chart-widget'" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
+  <div [class]="!widget ? 'chart' : 'chart-widget'" [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
index 0e6fb056d..aaea41265 100644
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
@@ -56,7 +56,6 @@
 }
 .chart-widget {
   width: 100%;
-  height: 145px;
 }
 
 .pool-distribution {
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
index 30f786b16..82c74395b 100644
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding, OnChanges, SimpleChanges } from '@angular/core';
 import { echarts, EChartsOption, LineSeriesOption } from '../../graphs/echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
@@ -26,7 +26,8 @@ import { isMobile } from '../../shared/common.utils';
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NodesNetworksChartComponent implements OnInit {
+export class NodesNetworksChartComponent implements OnInit, OnChanges {
+  @Input() height: number = 150;
   @Input() right: number | string = 45;
   @Input() left: number | string = 45;
   @Input() widget = false;
@@ -47,6 +48,9 @@ export class NodesNetworksChartComponent implements OnInit {
   timespan = '';
   chartInstance: any = undefined;
 
+  chartData: any;
+  maxYAxis: number;
+
   constructor(
     @Inject(LOCALE_ID) public locale: string,
     private seoService: SeoService,
@@ -71,44 +75,49 @@ export class NodesNetworksChartComponent implements OnInit {
     this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
     this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
 
-    this.nodesNetworkObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
-      .pipe(
-        startWith(this.miningWindowPreference),
-        switchMap((timespan) => {
-          this.timespan = timespan;
-          if (!this.widget && !firstRun) {
-            this.storageService.setValue('lightningWindowPreference', timespan);
-          }
-          firstRun = false;
-          this.miningWindowPreference = timespan;
-          this.isLoading = true;
-          return this.lightningApiService.cachedRequest(this.lightningApiService.listStatistics$, 250, timespan)
-            .pipe(
-              tap((response:any) => {
-                const data = response.body;
-                const chartData = {
-                  tor_nodes: data.map(val => [val.added * 1000, val.tor_nodes]),
-                  clearnet_nodes: data.map(val => [val.added * 1000, val.clearnet_nodes]),
-                  unannounced_nodes: data.map(val => [val.added * 1000, val.unannounced_nodes]),
-                  clearnet_tor_nodes: data.map(val => [val.added * 1000, val.clearnet_tor_nodes]),
-                };
-                let maxYAxis = 0;
-                for (const day of data) {
-                  maxYAxis = Math.max(maxYAxis, day.tor_nodes + day.clearnet_nodes + day.unannounced_nodes + day.clearnet_tor_nodes);
-                }
-                maxYAxis = Math.ceil(maxYAxis / 3000) * 3000;
-                this.prepareChartOptions(chartData, maxYAxis);
-                this.isLoading = false;
-              }),
-              map((response) => {
-                return {
-                  days: parseInt(response.headers.get('x-total-count'), 10),
-                };
-              }),
-            );
-        }),
-        share()
-      );
+    this.nodesNetworkObservable$ = this.radioGroupForm.get('dateSpan').valueChanges.pipe(
+      startWith(this.miningWindowPreference),
+      switchMap((timespan) => {
+        this.timespan = timespan;
+        if (!this.widget && !firstRun) {
+          this.storageService.setValue('lightningWindowPreference', timespan);
+        }
+        firstRun = false;
+        this.miningWindowPreference = timespan;
+        this.isLoading = true;
+        return this.lightningApiService.cachedRequest(this.lightningApiService.listStatistics$, 250, timespan)
+          .pipe(
+            tap((response:any) => {
+              const data = response.body;
+              this.chartData = {
+                tor_nodes: data.map(val => [val.added * 1000, val.tor_nodes]),
+                clearnet_nodes: data.map(val => [val.added * 1000, val.clearnet_nodes]),
+                unannounced_nodes: data.map(val => [val.added * 1000, val.unannounced_nodes]),
+                clearnet_tor_nodes: data.map(val => [val.added * 1000, val.clearnet_tor_nodes]),
+              };
+              this.maxYAxis = 0;
+              for (const day of data) {
+                this.maxYAxis = Math.max(this.maxYAxis, day.tor_nodes + day.clearnet_nodes + day.unannounced_nodes + day.clearnet_tor_nodes);
+              }
+              this.maxYAxis = Math.ceil(this.maxYAxis / 3000) * 3000;
+              this.prepareChartOptions(this.chartData, this.maxYAxis);
+              this.isLoading = false;
+            }),
+            map((response) => {
+              return {
+                days: parseInt(response.headers.get('x-total-count'), 10),
+              };
+            }),
+          );
+      }),
+      share()
+    );
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.height && this.chartData && this.maxYAxis != null) {
+      this.prepareChartOptions(this.chartData, this.maxYAxis);
+    }
   }
 
   prepareChartOptions(data, maxYAxis): void {
@@ -228,7 +237,7 @@ export class NodesNetworksChartComponent implements OnInit {
       title: title,
       animation: false,
       grid: {
-        height: this.widget ? 90 : undefined,
+        height: this.widget ? ((this.height || 120) - 60) : undefined,
         top: this.widget ? 20 : 40,
         bottom: this.widget ? 0 : 70,
         right: (isMobile() && this.widget) ? 35 : this.right,
diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
index 259c3503a..794ced684 100644
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
@@ -39,7 +39,7 @@
   </div>
 
   <div *ngIf="!indexingInProgress else indexing" [class]="!widget ? '' : 'pb-0'" class="container pb-lg-0">
-    <div [class]="widget ? 'chart-widget' : 'chart'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    <div [class]="widget ? 'chart-widget' : 'chart'" [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
       (chartInit)="onChartInit($event)">
     </div>
 
diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
index 5342f616b..3d8a4b861 100644
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
@@ -18,6 +18,7 @@ import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pi
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NodesPerISPChartComponent implements OnInit {
+  @Input() height: number = 300;
   @Input() widget: boolean = false;
 
   isLoading = true;
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
index 68fe3ee64..9bb88ac59 100644
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
@@ -42,7 +42,7 @@
     </form>
   </div>
 
-  <div [class]="!widget ? 'chart' : 'chart-widget'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div [class]="!widget ? 'chart' : 'chart-widget'" [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
     (chartInit)="onChartInit($event)"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
index c885e4839..923a8a3e4 100644
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
@@ -56,7 +56,6 @@
 }
 .chart-widget {
   width: 100%;
-  height: 145px;
 }
 
 .pool-distribution {
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
index 0e4f66ca0..8bcf01015 100644
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
@@ -1,6 +1,6 @@
-import { Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
+import { Component, Inject, Input, LOCALE_ID, OnInit, HostBinding, OnChanges, SimpleChanges } from '@angular/core';
 import { echarts, EChartsOption } from '../../graphs/echarts';
-import { Observable } from 'rxjs';
+import { Observable, combineLatest, fromEvent } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { SeoService } from '../../services/seo.service';
 import { formatNumber } from '@angular/common';
@@ -25,7 +25,8 @@ import { isMobile } from '../../shared/common.utils';
     }
   `],
 })
-export class LightningStatisticsChartComponent implements OnInit {
+export class LightningStatisticsChartComponent implements OnInit, OnChanges {
+  @Input() height: number = 150;
   @Input() right: number | string = 45;
   @Input() left: number | string = 45;
   @Input() widget = false;
@@ -37,6 +38,7 @@ export class LightningStatisticsChartComponent implements OnInit {
   chartInitOptions = {
     renderer: 'svg',
   };
+  chartData: any;
 
   @HostBinding('attr.dir') dir = 'ltr';
 
@@ -70,36 +72,42 @@ export class LightningStatisticsChartComponent implements OnInit {
     this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
     this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
 
-    this.capacityObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
-      .pipe(
-        startWith(this.miningWindowPreference),
-        switchMap((timespan) => {
-          this.timespan = timespan;
-          if (!this.widget && !firstRun) {
-            this.storageService.setValue('lightningWindowPreference', timespan);
-          }
-          firstRun = false;
-          this.miningWindowPreference = timespan;
-          this.isLoading = true;
-          return this.lightningApiService.cachedRequest(this.lightningApiService.listStatistics$, 250, timespan)
-            .pipe(
-              tap((response:any) => {
-                const data = response.body;
-                this.prepareChartOptions({
-                  channel_count: data.map(val => [val.added * 1000, val.channel_count]),
-                  capacity: data.map(val => [val.added * 1000, val.total_capacity]),
-                });
-                this.isLoading = false;
-              }),
-              map((response) => {
-                return {
-                  days: parseInt(response.headers.get('x-total-count'), 10),
-                };
-              }),
-            );
-        }),
-        share(),
-      );
+    this.capacityObservable$ = this.radioGroupForm.get('dateSpan').valueChanges.pipe(
+      startWith(this.miningWindowPreference),
+      switchMap((timespan) => {
+        this.timespan = timespan;
+        if (!this.widget && !firstRun) {
+          this.storageService.setValue('lightningWindowPreference', timespan);
+        }
+        firstRun = false;
+        this.miningWindowPreference = timespan;
+        this.isLoading = true;
+        return this.lightningApiService.cachedRequest(this.lightningApiService.listStatistics$, 250, timespan)
+          .pipe(
+            tap((response:any) => {
+              const data = response.body;
+              this.chartData = {
+                channel_count: data.map(val => [val.added * 1000, val.channel_count]),
+                capacity: data.map(val => [val.added * 1000, val.total_capacity]),
+              };
+              this.prepareChartOptions(this.chartData);
+              this.isLoading = false;
+            }),
+            map((response) => {
+              return {
+                days: parseInt(response.headers.get('x-total-count'), 10),
+              };
+            }),
+          );
+      }),
+      share(),
+    );
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.height && this.chartData) {
+      this.prepareChartOptions(this.chartData);
+    }
   }
 
   prepareChartOptions(data): void {
@@ -138,7 +146,7 @@ export class LightningStatisticsChartComponent implements OnInit {
         ]),
       ],
       grid: {
-        height: this.widget ? 90 : undefined,
+        height: this.widget ? ((this.height || 120) - 60) : undefined,
         top: this.widget ? 20 : 40,
         bottom: this.widget ? 0 : 70,
         right: (isMobile() && this.widget) ? 35 : this.right,

From e268a6a033ce8ed8f6b3fa98612d67c81297f8f5 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 8 Feb 2024 00:03:34 +0000
Subject: [PATCH 81/92] Fix mining dashboard hashrate graph height

---
 .../app/components/hashrate-chart/hashrate-chart.component.html | 2 +-
 .../app/components/hashrate-chart/hashrate-chart.component.scss | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
index 83f8a3a4c..f3d340472 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
@@ -54,7 +54,7 @@
     </form>
   </div>
 
-  <div [class]="!widget ? 'chart' : 'chart-widget'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div [class]="!widget ? 'chart' : 'chart-widget'" [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
     (chartInit)="onChartInit($event)">
   </div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
index a19cd47aa..32885d5de 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -57,7 +57,6 @@
 }
 .chart-widget {
   width: 100%;
-  height: 100%;
 }
 
 .pool-distribution {

From f14cd5ee2bdf3ccefbdfdf4b31f766eeea5414d9 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 8 Feb 2024 00:37:16 +0000
Subject: [PATCH 82/92] Swap incoming vb chart and mempool stats

---
 frontend/src/app/dashboard/dashboard.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 08d4a130a..ae3fff673 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -40,8 +40,9 @@
     <div class="col">
       <div class="card graph-card">
         <div class="card-body">
+          <ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
           <ng-container *ngIf="stateService.network !== 'liquid'">
-            <h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming Transactions</h5>
+            <h5 class="card-title mt-3" i18n="dashboard.incoming-transactions">Incoming Transactions</h5>
             <div class="mempool-graph" *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
               <app-incoming-transactions-graph
                 [height]="incomingGraphHeight"
@@ -52,7 +53,6 @@
                 ></app-incoming-transactions-graph>
             </div>
           </ng-container>
-          <ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
           <div class="mempool-graph" *ngIf="stateService.network === 'liquid'">
             <hr>
             <table class="table table-borderless table-striped" *ngIf="(featuredAssets$ | async) as featuredAssets else loadingAssetsTable">

From 3039481686d1a713abfeee4d089820b66c63f4ce Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 8 Feb 2024 02:47:46 +0000
Subject: [PATCH 83/92] Change titles, adjust padding

---
 .../accelerator-dashboard/accelerator-dashboard.component.html  | 2 +-
 .../accelerator-dashboard/accelerator-dashboard.component.scss  | 2 +-
 .../components/mining-dashboard/mining-dashboard.component.scss | 2 +-
 .../components/mining-dashboard/mining-dashboard.component.ts   | 2 +-
 frontend/src/app/dashboard/dashboard.component.html             | 2 +-
 frontend/src/app/dashboard/dashboard.component.scss             | 2 +-
 .../lightning-dashboard/lightning-dashboard.component.scss      | 2 +-
 .../lightning-dashboard/lightning-dashboard.component.ts        | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
index e7a11ac89..6d9e49265 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
@@ -38,7 +38,7 @@
       <div class="card">
         <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
           <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
-            <h5 class="card-title d-inline" i18n="dashboard.next-block">Next Block</h5>
+            <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-accelerations">Mempool Goggles: Accelerations</h5>
             <span>&nbsp;</span>
             <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
           </a>
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
index 77e287447..d6fb57953 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
@@ -149,7 +149,7 @@
     height: 420px;
   }
   @media (min-width: 992px) {
-    height: 500px;
+    height: 510px;
   }
 }
 .list-card {
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
index c93a952f1..c07042605 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -26,7 +26,7 @@
     height: 345px;
   }
   @media (min-width: 992px) {
-    height: 432px;
+    height: 442px;
   }
 }
 
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
index dce9b9f13..1a446d673 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
@@ -42,7 +42,7 @@ export class MiningDashboardComponent implements OnInit, AfterViewInit {
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     if (window.innerWidth >= 992) {
-      this.graphHeight = 330;
+      this.graphHeight = 340;
     } else if (window.innerWidth >= 768) {
       this.graphHeight = 245;
     } else {
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index ae3fff673..403107bf2 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -19,7 +19,7 @@
         <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
           <ng-template [ngIf]="(network$ | async) !== 'liquid'" [ngIfElse]="liquidPegs">
             <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
-              <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles">Mempool Goggles</h5>
+              <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-next-block">Mempool Goggles: Next Block</h5>
               <span>&nbsp;</span>
               <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
             </a>
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index d74d82054..f8549e166 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -48,7 +48,7 @@
     height: 415px;
   }
   @media (min-width: 992px) {
-    height: 500px;
+    height: 510px;
   }
 }
 
diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
index 3b95f4d3a..052ea6227 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
@@ -29,7 +29,7 @@
     height: 345px;
   }
   @media (min-width: 992px) {
-    height: 432px;
+    height: 442px;
   }
 }
 
diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts
index e49d55dd5..63cdab42d 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts
@@ -41,7 +41,7 @@ export class LightningDashboardComponent implements OnInit, AfterViewInit {
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     if (window.innerWidth >= 992) {
-      this.graphHeight = 330;
+      this.graphHeight = 340;
     } else if (window.innerWidth >= 768) {
       this.graphHeight = 245;
     } else {

From d7be5a47371e019aebe7595fc02b949812f3993d Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 8 Feb 2024 03:57:11 +0000
Subject: [PATCH 84/92] Simple Goggle Toggles

---
 .../block-overview-graph.component.ts         |  9 +++++----
 .../mempool-block-overview.component.html     |  4 +++-
 .../mempool-block-overview.component.ts       |  3 +++
 .../mining-dashboard.component.scss           |  2 +-
 .../app/dashboard/dashboard.component.html    | 20 ++++++++++++++++---
 .../app/dashboard/dashboard.component.scss    | 19 ++++++++++++++----
 .../src/app/dashboard/dashboard.component.ts  | 12 +++++++++++
 7 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
index d6000e27b..ac1df2bf5 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -42,6 +42,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   @Input() showFilters: boolean = false;
   @Input() excludeFilters: string[] = [];
   @Input() filterFlags: bigint | null = null;
+  @Input() filterMode: 'and' | 'or' = 'and';
   @Input() blockConversion: Price;
   @Input() overrideColors: ((tx: TxView) => Color) | null = null;
   @Output() txClickEvent = new EventEmitter<{ tx: TransactionStripped, keyModifier: boolean}>();
@@ -113,7 +114,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (changes.overrideColor && this.scene) {
       this.scene.setColorFunction(this.overrideColors);
     }
-    if ((changes.filterFlags || changes.showFilters)) {
+    if ((changes.filterFlags || changes.showFilters || changes.filterMode)) {
       this.setFilterFlags();
     }
   }
@@ -121,8 +122,8 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   setFilterFlags(flags?: bigint | null): void {
     this.activeFilterFlags = this.filterFlags || flags || null;
     if (this.scene) {
-      if (flags != null) {
-        this.scene.setColorFunction(this.getFilterColorFunction(flags));
+      if (this.activeFilterFlags != null) {
+        this.scene.setColorFunction(this.getFilterColorFunction(this.activeFilterFlags));
       } else {
         this.scene.setColorFunction(this.overrideColors);
       }
@@ -523,7 +524,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
 
   getFilterColorFunction(flags: bigint): ((tx: TxView) => Color) {
     return (tx: TxView) => {
-      if ((tx.bigintFlags & flags) === flags) {
+      if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (tx.bigintFlags & flags) > 0n)) {
         return defaultColorFunction(tx);
       } else {
         return defaultColorFunction(
diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
index 85e7eebb1..7cc458e60 100644
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
@@ -1,11 +1,13 @@
 <app-block-overview-graph
   #blockGraph
   [isLoading]="isLoading$ | async"
-  [resolution]="86"
+  [resolution]="resolution"
   [blockLimit]="stateService.blockVSize"
   [orientation]="timeLtr ? 'right' : 'left'"
   [flip]="true"
   [showFilters]="showFilters"
+  [filterFlags]="filterFlags"
+  [filterMode]="filterMode"
   [overrideColors]="overrideColors"
   (txClickEvent)="onTxClick($event)"
 ></app-block-overview-graph>
diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
index 8dad6a9c1..7fb036718 100644
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
@@ -18,8 +18,11 @@ import TxView from '../block-overview-graph/tx-view';
 })
 export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
   @Input() index: number;
+  @Input() resolution = 86;
   @Input() showFilters: boolean = false;
   @Input() overrideColors: ((tx: TxView) => Color) | null = null;
+  @Input() filterFlags: bigint | undefined = undefined;
+  @Input() filterMode: 'and' | 'or' = 'and';
   @Output() txPreviewEvent = new EventEmitter<TransactionStripped | void>();
 
   @ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent;
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
index c07042605..310b9e9de 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -26,7 +26,7 @@
     height: 345px;
   }
   @media (min-width: 992px) {
-    height: 442px;
+    height: 472px;
   }
 }
 
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 403107bf2..bf254a9a8 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -18,13 +18,27 @@
       <div class="card graph-card">
         <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
           <ng-template [ngIf]="(network$ | async) !== 'liquid'" [ngIfElse]="liquidPegs">
-            <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
-              <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-next-block">Mempool Goggles: Next Block</h5>
+            <a class="title-link mb-0" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
+              <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-next-block">Mempool Goggles: {{ goggleCycle[goggleIndex].name }}</h5>
               <span>&nbsp;</span>
               <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
             </a>
+            <div class="quick-filter">
+              <ng-container *ngFor="let filter of goggleCycle">
+                <div
+                  class="badge badge-primary"
+                  [class.active]="filter.index === goggleIndex"
+                  (click)="goggleIndex = filter.index"
+                >{{ filter.name }}</div>
+              </ng-container>
+            </div>
             <div class="mempool-block-wrapper">
-              <app-mempool-block-overview [index]="0"></app-mempool-block-overview>
+              <app-mempool-block-overview
+                [index]="0"
+                [resolution]="goggleResolution"
+                [filterFlags]="goggleCycle[goggleIndex].flag"
+                filterMode="or"
+              ></app-mempool-block-overview>
             </div>
           </ng-template>
           <ng-template #liquidPegs>
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index f8549e166..f6362bc21 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -375,8 +375,8 @@
 }
 
 .mempool-block-wrapper {
-  max-height: 430px;
-  max-width: 430px;
+  max-height: 410px;
+  max-width: 410px;
   margin: auto;
 
   @media (min-width: 768px) {
@@ -384,7 +384,18 @@
     max-width: 344px;
   }
   @media (min-width: 992px) {
-    max-height: 430px;
-    max-width: 430px;
+    max-height: 410px;
+    max-width: 410px;
+  }
+}
+
+.badge {
+  margin: 6px 5px 8px;
+  background: none;
+  border: solid 2px #105fb0;
+  cursor: pointer;
+
+  &.active {
+    background: #105fb0;
   }
 }
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 505fecc14..cd6097a43 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -62,6 +62,15 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   private lastPegAmount: string = '';
   private lastReservesBlockUpdate: number = 0;
 
+  goggleResolution = 82;
+  goggleCycle = [
+    { index: 0, name: 'All' },
+    { index: 1, name: 'CPFP', flag: 0b00000010_00000000_00000000n },
+    { index: 2, name: 'RBF', flag: 0b00000100_00000000_00000000n },
+    { index: 3, name: '💩', flag: 0b00000100_00000000_00000000_00000000n | 0b00000010_00000000_00000000_00000000n | 0b00000001_00000000_00000000_00000000n },
+  ];
+  goggleIndex = 0; // Math.floor(Math.random() * this.goggleCycle.length);
+
   private destroy$ = new Subject();
 
   constructor(
@@ -357,10 +366,13 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   onResize(): void {
     if (window.innerWidth >= 992) {
       this.incomingGraphHeight = 300;
+      this.goggleResolution = 82;
     } else if (window.innerWidth >= 768) {
       this.incomingGraphHeight = 215;
+      this.goggleResolution = 80;
     } else {
       this.incomingGraphHeight = 180;
+      this.goggleResolution = 86;
     }
   }
 }

From 3ceb583127655eb83482fb9dc084de9ff857027b Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 8 Feb 2024 04:03:20 +0000
Subject: [PATCH 85/92] Fix Goggles title alignment

---
 frontend/src/app/dashboard/dashboard.component.html | 6 +++---
 frontend/src/app/dashboard/dashboard.component.scss | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index bf254a9a8..c2076d114 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -18,15 +18,15 @@
       <div class="card graph-card">
         <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
           <ng-template [ngIf]="(network$ | async) !== 'liquid'" [ngIfElse]="liquidPegs">
-            <a class="title-link mb-0" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
-              <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-next-block">Mempool Goggles: {{ goggleCycle[goggleIndex].name }}</h5>
+            <a class="title-link mb-0" style="margin-top: -2px" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
+              <h5 class="card-title d-inline"><span i18n="dashboard.mempool-goggles">Mempool Goggles</span>: {{ goggleCycle[goggleIndex].name }}</h5>
               <span>&nbsp;</span>
               <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
             </a>
             <div class="quick-filter">
               <ng-container *ngFor="let filter of goggleCycle">
                 <div
-                  class="badge badge-primary"
+                  class="goggle-badge badge badge-primary"
                   [class.active]="filter.index === goggleIndex"
                   (click)="goggleIndex = filter.index"
                 >{{ filter.name }}</div>
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index f6362bc21..704d02813 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -389,7 +389,7 @@
   }
 }
 
-.badge {
+.goggle-badge {
   margin: 6px 5px 8px;
   background: none;
   border: solid 2px #105fb0;

From 510dd9132860925bd76f360479074c482e37df09 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Thu, 8 Feb 2024 14:52:31 +0800
Subject: [PATCH 86/92] Changed to toggle buttons. Changed filters.

---
 frontend/src/app/dashboard/dashboard.component.html | 12 +++++-------
 frontend/src/app/dashboard/dashboard.component.scss | 12 +++++++++++-
 frontend/src/app/dashboard/dashboard.component.ts   |  4 ++--
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index c2076d114..676dfa0ee 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -24,13 +24,11 @@
               <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
             </a>
             <div class="quick-filter">
-              <ng-container *ngFor="let filter of goggleCycle">
-                <div
-                  class="goggle-badge badge badge-primary"
-                  [class.active]="filter.index === goggleIndex"
-                  (click)="goggleIndex = filter.index"
-                >{{ filter.name }}</div>
-              </ng-container>
+              <div class="btn-group btn-group-toggle">
+                <label class="btn btn-primary btn-xs" [class.active]="filter.index === goggleIndex"  *ngFor="let filter of goggleCycle">
+                  <input type="radio" [value]="'3m'" fragment="3m" (click)="goggleIndex = filter.index" [attr.data-cy]="'3m'"> {{ filter.name }}
+                </label>
+              </div>
             </div>
             <div class="mempool-block-wrapper">
               <app-mempool-block-overview
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 704d02813..9bd44ea29 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -398,4 +398,14 @@
   &.active {
     background: #105fb0;
   }
-}
\ No newline at end of file
+}
+
+.btn-xs {
+  padding: 0.35rem 0.5rem;
+  font-size: 12px;
+}
+
+.quick-filter {
+  margin-top: 5px;
+  margin-bottom: 6px;
+}
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index cd6097a43..c762d309f 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -65,8 +65,8 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   goggleResolution = 82;
   goggleCycle = [
     { index: 0, name: 'All' },
-    { index: 1, name: 'CPFP', flag: 0b00000010_00000000_00000000n },
-    { index: 2, name: 'RBF', flag: 0b00000100_00000000_00000000n },
+    { index: 1, name: 'Consolidations', flag: 0b00000010_00000000_00000000_00000000_00000000n },
+    { index: 2, name: 'Coinjoin', flag: 0b00000001_00000000_00000000_00000000_00000000n },
     { index: 3, name: '💩', flag: 0b00000100_00000000_00000000_00000000n | 0b00000010_00000000_00000000_00000000n | 0b00000001_00000000_00000000_00000000n },
   ];
   goggleIndex = 0; // Math.floor(Math.random() * this.goggleCycle.length);

From fdad3d1fd5c58fd6e6be8e9c516047c84f67c216 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Thu, 8 Feb 2024 20:56:16 +0800
Subject: [PATCH 87/92] Fixing new liquid dashboard height

---
 .../app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts | 2 +-
 frontend/src/app/dashboard/dashboard.component.html             | 2 +-
 frontend/src/app/dashboard/dashboard.component.ts               | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
index 0f6f115ff..e2231e7ce 100644
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
@@ -20,7 +20,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
   @Input() data: any;
   pegsChartOptions: EChartsOption;
 
-  height: number | string = '200';
+  height: number | string = '320';
   right: number | string = '10';
   top: number | string = '20';
   left: number | string = '50';
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 16c1af36d..9ebc22dd4 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -187,7 +187,7 @@
 <ng-template #loadingAssetsTable>
   <table class="table table-borderless table-striped asset-table">
     <tbody>
-      <tr *ngFor="let i of [1,2,3,4]">
+      <tr *ngFor="let i of [1,2,3,4,5,6]">
         <td class="asset-icon">
           <div class="skeleton-loader skeleton-loader-transactions"></div>
         </td>
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index c762d309f..cd393e89f 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -162,7 +162,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
               newArray.push(feature);
             }
           }
-          return newArray.slice(0, 4);
+          return newArray.slice(0, 6);
         }),
       );
 

From 9d6231b6e57c3770a101a23b42cb8013ecc2286d Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Thu, 8 Feb 2024 21:01:24 +0800
Subject: [PATCH 88/92] New mining dashboard graph height

---
 .../components/mining-dashboard/mining-dashboard.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
index 1a446d673..0a72386cb 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
@@ -11,7 +11,7 @@ import { EventType, NavigationStart, Router } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MiningDashboardComponent implements OnInit, AfterViewInit {
-  graphHeight = 300;
+  graphHeight = 375;
 
   constructor(
     private seoService: SeoService,
@@ -42,7 +42,7 @@ export class MiningDashboardComponent implements OnInit, AfterViewInit {
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     if (window.innerWidth >= 992) {
-      this.graphHeight = 340;
+      this.graphHeight = 375;
     } else if (window.innerWidth >= 768) {
       this.graphHeight = 245;
     } else {

From efdc83d4bb95f258f2a8f491d9d708006873a381 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Thu, 8 Feb 2024 21:25:34 +0800
Subject: [PATCH 89/92] Enabling Accelerator

---
 production/mempool-frontend-config.mainnet.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/production/mempool-frontend-config.mainnet.json b/production/mempool-frontend-config.mainnet.json
index 5eb3d0a7d..144783a93 100644
--- a/production/mempool-frontend-config.mainnet.json
+++ b/production/mempool-frontend-config.mainnet.json
@@ -11,5 +11,6 @@
   "BISQ_WEBSITE_URL": "https://bisq.markets",
   "ITEMS_PER_PAGE": 25,
   "LIGHTNING": true,
+  "ACCELERATOR": true,
   "AUDIT": true
 }

From e5f0544cc27c1b78bd3f4986c7c5ad84b68c2d83 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Thu, 8 Feb 2024 18:32:07 +0100
Subject: [PATCH 90/92] Fix Liquid dashboard layout for mobile view

---
 .../lbtc-pegs-graph.component.ts              |  2 +-
 .../app/dashboard/dashboard.component.html    |  4 +--
 .../app/dashboard/dashboard.component.scss    |  2 +-
 .../src/app/dashboard/dashboard.component.ts  | 31 +++++++++++++++----
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
index e2231e7ce..9931fb78a 100644
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
@@ -18,9 +18,9 @@ import { EChartsOption } from '../../graphs/echarts';
 })
 export class LbtcPegsGraphComponent implements OnInit, OnChanges {
   @Input() data: any;
+  @Input() height: number | string = '320';
   pegsChartOptions: EChartsOption;
 
-  height: number | string = '320';
   right: number | string = '10';
   top: number | string = '20';
   left: number | string = '50';
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 9ebc22dd4..a2c46a198 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -44,7 +44,7 @@
               <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
               <hr>
             </div>
-            <app-lbtc-pegs-graph [data]="fullHistory$ | async"></app-lbtc-pegs-graph>
+            <app-lbtc-pegs-graph [data]="fullHistory$ | async" [height]="lbtcPegGraphHeight"></app-lbtc-pegs-graph>
           </ng-template>
         </div>
       </div>
@@ -187,7 +187,7 @@
 <ng-template #loadingAssetsTable>
   <table class="table table-borderless table-striped asset-table">
     <tbody>
-      <tr *ngFor="let i of [1,2,3,4,5,6]">
+      <tr *ngFor="let i of getArrayFromNumber(this.nbFeaturedAssets)">
         <td class="asset-icon">
           <div class="skeleton-loader skeleton-loader-transactions"></div>
         </td>
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 9bd44ea29..70972ae8e 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -69,7 +69,7 @@
     @media (min-width: 485px) {
       margin: 0px auto 10px;
     }
-    @media (min-width: 785px) {
+    @media (min-width: 768px) {
       margin: 0px auto 0px;
     }
     &:last-child {
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index cd393e89f..5dfd68419 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -1,6 +1,6 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
-import { combineLatest, EMPTY, merge, Observable, of, Subject, Subscription, timer } from 'rxjs';
-import { catchError, delayWhen, filter, map, scan, share, shareReplay, startWith, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
+import { combineLatest, EMPTY, fromEvent, merge, Observable, of, Subject, Subscription, timer } from 'rxjs';
+import { catchError, delayWhen, distinctUntilChanged, filter, map, scan, share, shareReplay, startWith, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
 import { AuditStatus, BlockExtended, CurrentPegs, OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { MempoolInfo, TransactionStripped, ReplacementInfo } from '../interfaces/websocket.interface';
 import { ApiService } from '../services/api.service';
@@ -33,6 +33,7 @@ interface MempoolStatsData {
 })
 export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   featuredAssets$: Observable<any>;
+  nbFeaturedAssets = 6;
   network$: Observable<string>;
   mempoolBlocksData$: Observable<MempoolBlocksData>;
   mempoolInfoData$: Observable<MempoolInfoData>;
@@ -58,6 +59,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   currencySubscription: Subscription;
   currency: string;
   incomingGraphHeight: number = 300;
+  lbtcPegGraphHeight: number = 320;
   private lastPegBlockUpdate: number = 0;
   private lastPegAmount: string = '';
   private lastReservesBlockUpdate: number = 0;
@@ -153,16 +155,23 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
         })
       );
 
-    this.featuredAssets$ = this.apiService.listFeaturedAssets$()
-      .pipe(
-        map((featured) => {
+    const windowResize$ = fromEvent(window, 'resize').pipe(
+      distinctUntilChanged(),
+      startWith(null)
+    );
+  
+    this.featuredAssets$ = combineLatest([
+      this.apiService.listFeaturedAssets$(),
+      windowResize$
+    ]).pipe(
+        map(([featured, _]) => {
           const newArray = [];
           for (const feature of featured) {
             if (feature.ticker !== 'L-BTC' && feature.asset) {
               newArray.push(feature);
             }
           }
-          return newArray.slice(0, 6);
+          return newArray.slice(0, this.nbFeaturedAssets);
         }),
       );
 
@@ -362,17 +371,27 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
     return block.height;
   }
 
+  getArrayFromNumber(num: number): number[] {
+    return Array.from({ length: num }, (_, i) => i + 1);
+  }
+  
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     if (window.innerWidth >= 992) {
       this.incomingGraphHeight = 300;
       this.goggleResolution = 82;
+      this.lbtcPegGraphHeight = 320;
+      this.nbFeaturedAssets = 6;
     } else if (window.innerWidth >= 768) {
       this.incomingGraphHeight = 215;
       this.goggleResolution = 80;
+      this.lbtcPegGraphHeight = 230;
+      this.nbFeaturedAssets = 4;
     } else {
       this.incomingGraphHeight = 180;
       this.goggleResolution = 86;
+      this.lbtcPegGraphHeight = 220;
+      this.nbFeaturedAssets = 4;
     }
   }
 }

From 7de4a03f1b04a34df4d2a52e4b7d36cdc69f0428 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 8 Feb 2024 22:50:47 +0000
Subject: [PATCH 91/92] Fix mining/liquid dashboard widget heights

---
 .../components/mining-dashboard/mining-dashboard.component.scss | 2 +-
 .../components/mining-dashboard/mining-dashboard.component.ts   | 2 +-
 .../lightning-dashboard/lightning-dashboard.component.scss      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
index 310b9e9de..ce68c97ae 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -26,7 +26,7 @@
     height: 345px;
   }
   @media (min-width: 992px) {
-    height: 472px;
+    height: 440px;
   }
 }
 
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
index 0a72386cb..cfc8ef230 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
@@ -42,7 +42,7 @@ export class MiningDashboardComponent implements OnInit, AfterViewInit {
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     if (window.innerWidth >= 992) {
-      this.graphHeight = 375;
+      this.graphHeight = 335;
     } else if (window.innerWidth >= 768) {
       this.graphHeight = 245;
     } else {
diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
index 052ea6227..e6da450df 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
@@ -29,7 +29,7 @@
     height: 345px;
   }
   @media (min-width: 992px) {
-    height: 442px;
+    height: 439px;
   }
 }
 

From b3dbe1215c8bacbbf19defb52bca45b51ce9f2d6 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Fri, 9 Feb 2024 14:11:12 +0800
Subject: [PATCH 92/92] Adjusting Load more position to match other dashboards

---
 .../accelerator-dashboard/accelerator-dashboard.component.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
index d6fb57953..c8755c94e 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
@@ -23,7 +23,7 @@
     height: 325px;
   }
   @media (min-width: 992px) {
-    height: 400px;
+    height: 409px;
   }
 }