Merge branch 'master' into nymkappa/api-key-rest

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 }
 ];
 

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>

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) {
   }
 

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';
 import { AudioService } from '../../services/audio.service';
 
 export type AccelerationEstimate = {
@@ -62,7 +63,7 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
   maxRateOptions: RateOption[] = [];
 
   constructor(
-    private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
     private storageService: StorageService,
     private audioService: AudioService,
     private cd: ChangeDetectorRef
@@ -83,7 +84,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;
@@ -183,7 +184,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({
@@ -213,4 +214,4 @@ export class AcceleratePreviewComponent implements OnInit, OnDestroy, OnChanges
   onResize(): void {
     this.isMobile = window.innerWidth <= 767.98;
   }
-}
+}

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>

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;

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 { 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';
 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',
@@ -28,6 +29,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[]>;
@@ -54,6 +56,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,
@@ -66,15 +69,15 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.seoService.setTitle($localize`:@@bcf34abc2d9ed8f45a2f65dd464c46694e9a181e:Acceleration Fees`);
     this.isLoading = true;
     if (this.widget) {
       this.miningWindowPreference = '1m';
       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),
+        fromEvent(window, 'resize').pipe(startWith(null)),
       ]).pipe(
         tap(([accelerations, blockFeesResponse]) => {
           this.prepareChartOptions(accelerations, blockFeesResponse.body);
@@ -86,6 +89,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);
@@ -101,7 +105,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(
@@ -173,6 +177,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
       ],
       animation: false,
       grid: {
+        height: this.height,
         right: this.right,
         left: this.left,
         bottom: this.widget ? 30 : 80,

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 */

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) {

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.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>
           <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>
@@ -80,7 +93,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>

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: 409px;
+  }
+}
+
 .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: 510px;
+  }
 }
 .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;
+  }
 }

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts

@@ -1,14 +1,14 @@
-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';
 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'));
@@ -30,43 +30,48 @@ export class AcceleratorDashboardComponent implements OnInit {
   minedAccelerations$: Observable<Acceleration[]>;
   loadingBlocks: boolean = true;
 
+  graphHeight: number = 300;
+
   constructor(
     private seoService: SeoService,
     private websocketService: WebsocketService,
-    private apiService: ApiService,
+    private serviceApiServices: ServicesApiServices,
     private stateService: StateService,
   ) {
     this.seoService.setTitle($localize`:@@a681a4e2011bb28157689dbaa387de0dd0aa0c11:Accelerator Dashboard`);
   }
 
   ngOnInit(): void {
+    this.onResize();
     this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
 
     this.pendingAccelerations$ = interval(30000).pipe(
       startWith(true),
       switchMap(() => {
-        return this.apiService.getAccelerations$();
-      }),
-      catchError((e) => {
-        return of([]);
+        return this.serviceApiServices.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.serviceApiServices.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', 'failed'].includes(acc.status));
       })
     );
 
@@ -119,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;
+    }
+  }
 }

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;

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 {

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;
@@ -105,7 +104,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;
@@ -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,19 @@ 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);
+        } else {
+          this.fullyLoaded = true;
+        }
         this.isLoadingTransactions = false;
       },
       (error) => {
@@ -278,7 +277,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() {

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>

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,

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(

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([])
           ]);
         }
       ),

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([])
         ]);
       })
     )

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"

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'">

frontend/src/app/components/difficulty-mining/difficulty-mining.component.html

@@ -47,20 +47,30 @@
           </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="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 #approxTime>
+              <div class="symbol">
+                <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>
           </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">

frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts

@@ -1,6 +1,6 @@
 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';
 
 interface EpochProgress {
@@ -15,6 +15,7 @@ interface EpochProgress {
   previousRetarget: number;
   blocksUntilHalving: number;
   timeUntilHalving: number;
+  timeAvg: number;
 }
 
 @Component({
@@ -26,6 +27,9 @@ interface EpochProgress {
 export class DifficultyMiningComponent implements OnInit {
   isLoadingWebSocket$: Observable<boolean>;
   difficultyEpoch$: Observable<EpochProgress>;
+  blocksUntilHalving: number | null = null;
+  timeUntilHalving = 0;
+  now = new Date().getTime();
 
   @Input() showProgress = true;
   @Input() showHalving = false;
@@ -64,8 +68,9 @@ export class DifficultyMiningComponent implements OnInit {
           colorPreviousAdjustments = '#ffffff66';
         }
 
-        const blocksUntilHalving = 210000 - (maxHeight % 210000);
-        const timeUntilHalving = new Date().getTime() + (blocksUntilHalving * 600000);
+        this.blocksUntilHalving = 210000 - (maxHeight % 210000);
+        this.timeUntilHalving = new Date().getTime() + (this.blocksUntilHalving * 600000);
+        this.now = new Date().getTime();
 
         const data = {
           base: `${da.progressPercent.toFixed(2)}%`,
@@ -77,8 +82,9 @@ export class DifficultyMiningComponent implements OnInit {
           newDifficultyHeight: da.nextRetargetHeight,
           estimatedRetargetDate: da.estimatedRetargetDate,
           previousRetarget: da.previousRetarget,
-          blocksUntilHalving,
-          timeUntilHalving,
+          blocksUntilHalving: this.blocksUntilHalving,
+          timeUntilHalving: this.timeUntilHalving,
+          timeAvg: da.timeAvg,
         };
         return data;
       })

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">

frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss

@@ -57,8 +57,6 @@
 }
 .chart-widget {
   width: 100%;
-  height: 100%;
-  height: 240px;
 }
 
 .pool-distribution {

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,

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,77 @@ 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] = true;
+      }
+    }
+
+    const sortedTimes = Object.keys(times).sort((a,b) => parseInt(a) - parseInt(b)).map(time => ({ time: parseInt(time), hashrates: times[time].hashrates }));
+    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 = [];
+    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 +288,7 @@ export class HashrateChartPoolsComponent implements OnInit {
         },
       }],
     };
+    this.cd.markForCheck();
   }
 
   onChartInit(ec) {

frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts

@@ -18,16 +18,15 @@ import { EChartsOption } from '../../graphs/echarts';
 })
 export class LbtcPegsGraphComponent implements OnInit, OnChanges {
   @Input() data: any;
+  @Input() height: number | string = '320';
   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'
   };
@@ -41,20 +40,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.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 +102,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 +142,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',
+          },
+        },
       ],
     };
   }

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" [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.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>
       </li>

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

@@ -0,0 +1,72 @@
+<div [ngClass]="{'widget': widget}">
+
+  <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="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">
+          <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>

frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss

@@ -0,0 +1,45 @@
+.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;
+}
+
+.address {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+}
+.address.widget {
+  width: 60%;
+}
+
+.amount {
+  width: 25%;
+}
+.amount.widget {
+  width: 40%;
+}

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

@@ -0,0 +1,109 @@
+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, 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;
+  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(5).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.federationAddresses$ = this.auditUpdated$.pipe(
+        filter(auditUpdated => auditUpdated === true),
+        throttleTime(40000),
+        switchMap(_ => this.apiService.federationAddresses$()),
+        tap(_ => this.isLoading = false),
+        share()
+      );
+    }
+
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(1);
+    this.destroy$.complete();
+  }
+
+  pageChange(page: number): void {
+    this.page = page;
+  }
+
+}

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/wallet/addresses' | relativeUrl]">
+          <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>
+          <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/wallet/addresses' | relativeUrl]">
+        <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>
+        <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>

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;
+}

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 {
+  }
+
+}

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

@@ -0,0 +1,109 @@
+<div [ngClass]="{'widget': widget}">
+
+  <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}" 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-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">
+          <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>
+              </a>
+            </td>
+            <td class="amount text-right widget">
+              <app-amount [satoshis]="utxo.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
+            </td>
+            <td class="timestamp text-left 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="pegin text-left">
+              <ng-container *ngIf="utxo.pegtxid; else noPeginMessage">
+                <a [routerLink]="['/tx' | relativeUrl, utxo.pegtxid]" [fragment]="'vin=' + utxo.pegindex">
+                  <app-truncate [text]="utxo.pegtxid + ':' + utxo.pegindex" [lastChars]="6"></app-truncate>
+                </a>
+              </ng-container>
+              <ng-template #noPeginMessage>
+                <i><span class="text-muted" i18n="liquid.change-output">Change output</span></i>
+              </ng-template>
+            </td>
+            <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>
+          </tr>
+        </ng-template>
+      </tbody>
+      <ng-template #skeleton>
+        <tbody *ngIf="widget; else regularRowsSkeleton">
+          <tr *ngFor="let item of skeletonLines">
+            <td class="txid 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-left widget">
+              <span class="skeleton-loader" style="max-width: 300px"></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>
+
+    <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>

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

@@ -0,0 +1,94 @@
+.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;
+}
+
+.txid {
+  width: 25%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+}
+.txid.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%;
+}
+
+.pegin {
+  width: 25%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+  @media (max-width: 872px) {
+    display: none;
+  }
+}
+
+.timestamp {
+  width: 18%;
+  @media (max-width: 800px) {
+    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;
+  }
+}
+

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

@@ -0,0 +1,109 @@
+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 } 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>;
+  auditUpdated$: Observable<boolean>;
+  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()
+      );
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(1);
+    this.destroy$.complete();
+  }
+
+  pageChange(page: number): void {
+    this.page = page;
+  }
+
+}

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"><ng-container i18n="mining.addresses">Addresses</ng-container></a>
+      </li>
+    </ul>
+  </div>
+
+  <div class="clearfix"></div>
+
+  <router-outlet></router-outlet>
+
+</div>
+
+<br>

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;
+  }
+}

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

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { SeoService } from '../../../services/seo.service';
+
+@Component({
+  selector: 'app-federation-wallet',
+  templateUrl: './federation-wallet.component.html',
+  styleUrls: ['./federation-wallet.component.scss']
+})
+export class FederationWalletComponent implements OnInit {
+
+  constructor(
+    private seoService: SeoService
+  ) {
+    this.seoService.setTitle($localize`:@@993e5bc509c26db81d93018e24a6afe6e50cae52:Liquid Federation Wallet`);
+  }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,139 @@
+<div class="container-xl">
+  <div [ngClass]="{'widget': widget}">
+
+    <div *ngIf="!widget">
+      <h1 i18n="liquid.recent-pegs">Recent Peg-In / Out's</h1>
+    </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="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>
+        </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:5">
+              <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"></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"></app-truncate>
+                  </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, 'glow-effect': peg.amount < 0 && peg.bitcoinaddress && !peg.bitcointxid}">
+                <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
+              </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="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, '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">
+                <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">
+                    <i><span class="text-muted" i18n="liquid.redemption-in-progress">Peg out in progress...</span></i>
+                  </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>
+            </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="timestamp text-left widget">
+                <span class="skeleton-loader" style="max-width: 300px"></span>
+              </td>
+              <td class="amount 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="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>
+              <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>
+            </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 #noRedeem>
+  <span class="text-muted">-</span>
+</ng-template>

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

@@ -0,0 +1,120 @@
+.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: 20%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 120px;
+}
+.transaction.widget {
+  width: 100%;
+  
+}
+
+.address {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+  @media (max-width: 527px) {
+    display: none;
+  }
+}
+
+.amount {
+  width: 0%;
+}
+
+.output {
+  width: 20%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+  @media (max-width: 800px) {
+    display: none;
+  }
+}
+
+.address {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+  @media (max-width: 960px) {
+    display: none;
+  }
+}
+
+.timestamp {
+  width: 0%;
+  @media (max-width: 650px) {
+    display: none;
+  }
+  @media (max-width: 1000px) {
+    .relative-time {
+      display: none;
+    }
+  }
+}
+.timestamp.widget {
+  @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;
+}
+
+.glow-effect {
+  animation: color-oscillation 1s ease-in-out infinite alternate;
+}
+
+@keyframes color-oscillation {
+  0% {
+      color: #777983;
+  }
+  100% {
+      color: #D81B60;
+  }
+}

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

@@ -0,0 +1,154 @@
+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';
+import { SeoService } from '../../../services/seo.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[]> = of([]);
+  @Input() recentPegOuts$: Observable<RecentPeg[]> = of([]);
+
+  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,
+    private seoService: SeoService
+  ) {
+  }
+
+  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.seoService.setTitle($localize`:@@a8b0889ea1b41888f1e247f2731cc9322198ca04:Recent Peg-In / Out's`);
+      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$()),
+        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,
+            bitcoinaddress: utxo.bitcoinaddress,
+            bitcointxid: utxo.txid,
+            bitcoinindex: utxo.txindex,
+            blocktime: utxo.pegblocktime,
+          }
+        })),
+        share()
+      );
+
+      this.recentPegOuts$ = this.auditUpdated$.pipe(
+        filter(auditUpdated => auditUpdated === true),
+        throttleTime(40000),
+        switchMap(_ => this.apiService.recentPegOuts$()),
+        share()
+      );
+  
+    }
+
+    this.recentPegs$ = combineLatest([
+      this.recentPegIns$,
+      this.recentPegOuts$
+    ]).pipe(
+      map(([recentPegIns, recentPegOuts]) => {
+        return [
+          ...recentPegIns,
+          ...recentPegOuts
+        ].sort((a, b) => {
+          return b.blocktime - a.blocktime;
+        });
+      }),
+      filter(recentPegs => recentPegs.length > 0),
+      tap(_ => this.isLoading = false),
+      share()
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(1);
+    this.destroy$.complete();
+  }
+
+  pageChange(page: number): void {
+    this.page = page;
+  }
+
+}

frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html

@@ -0,0 +1,47 @@
+<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>

frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss

@@ -0,0 +1,79 @@
+.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;
+    }
+  }
+}
+
+.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;
+}
+
+.credit {
+  color: #7CB342;
+}
+
+.debit {
+  color: #D81B60;
+}

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

@@ -0,0 +1,19 @@
+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',
+  styleUrls: ['./recent-pegs-stats.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecentPegsStatsComponent implements OnInit {
+  @Input() pegsVolume$: Observable<PegsVolume[]>;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,98 @@
+<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="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" 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-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>
+    </div>
+
+    <div class="col" style="margin-bottom: 1.47rem">
+      <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>
+  </div>
+</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="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" 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="card">
+          <div class="card-body">
+            <app-recent-pegs-stats></app-recent-pegs-stats>
+            <app-recent-pegs-list [widget]="true"></app-recent-pegs-list>
+          </div>
+        </div>
+      </div>
+  
+      <div class="col" style="margin-bottom: 1.47rem">
+        <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>
+    </div>
+  </div>
+</ng-template>
+
+<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: Bitcoin block height #{{ auditStatus.lastBlockAudit }} / #{{ auditStatus.bitcoinHeaders }}</span>
+    </div>
+  </ng-container>
+</ng-template>

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

@@ -0,0 +1,138 @@
+.dashboard-container {
+  text-align: center;
+  margin-top: 0.5rem;
+  .col {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.card {
+  background-color: #1d1f31;
+}
+
+.card-title {
+  padding-top: 20px;
+}
+
+.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%)
+}
+
+.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;
+}

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

@@ -0,0 +1,212 @@
+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, 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, PegsVolume, RecentPeg } 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>;
+  auditUpdated$: Observable<boolean>;
+  currentPeg$: Observable<CurrentPegs>;
+  currentReserves$: Observable<CurrentPegs>;
+  federationUtxos$: Observable<FederationUtxo[]>;
+  recentPegIns$: Observable<RecentPeg[]>;
+  recentPegOuts$: Observable<RecentPeg[]>;
+  pegsVolume$: Observable<PegsVolume[]>;
+  federationAddresses$: Observable<FederationAddress[]>;
+  federationAddressesOneMonthAgo$: Observable<any>;
+  liquidPegsMonth$: Observable<any>;
+  liquidReservesMonth$: Observable<any>;
+  fullHistory$: Observable<any>;
+  isLoad: boolean = true;
+  private lastPegBlockUpdate: number = 0;
+  private lastPegAmount: string = '';
+  private lastReservesBlockUpdate: number = 0;
+
+  private destroy$ = new Subject();
+
+  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$ = 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.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.recentPegIns$ = this.federationUtxos$.pipe(
+      map(federationUtxos => federationUtxos.filter(utxo => utxo.pegtxid).map(utxo => {
+        return {
+          txid: utxo.pegtxid,
+          txindex: utxo.pegindex,
+          amount: utxo.amount,
+          bitcoinaddress: utxo.bitcoinaddress,
+          bitcointxid: utxo.txid,
+          bitcoinindex: utxo.txindex,
+          blocktime: utxo.pegblocktime,
+        }
+      })),
+      share()
+    );
+
+    this.recentPegOuts$ = this.auditUpdated$.pipe(
+      filter(auditUpdated => auditUpdated === true),
+      throttleTime(40000),
+      switchMap(_ => this.apiService.recentPegOuts$()),
+      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),
+      switchMap(_ => this.apiService.federationAddresses$()),
+      share()
+    );
+
+    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()
+      );
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(1);
+    this.destroy$.complete();
+  }
+
+}

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.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) }}
+          </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.unpeg">Unpeg</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+
+    <div class="item"> 
+      <h5 class="card-title" i18n="liquid.avg-peg-ratio">Avg Peg Ratio</h5> 
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+  </div>
+</ng-template>
+

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;
+  }
+}

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,
+          };
+        })
+      );
+
+  }
+
+}

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>

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;
+}

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'
+        }
+      },
+    };
+  }
+}
+

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

@@ -0,0 +1,4 @@
+<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>

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;
+}

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

@@ -0,0 +1,126 @@
+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;
+  ratioChartOptions: EChartsOption;
+
+  height: number | string = '200';
+  right: number | string = '10';
+  top: number | string = '20';
+  left: number | string = '50';
+  template: ('widget' | 'advanced') = 'widget';
+  isLoading = true;
+
+  ratioChartInitOptions = {
+    renderer: 'svg'
+  };
+
+  constructor() { }
+
+  ngOnInit() {
+    this.isLoading = true;
+  }
+
+  ngOnChanges() {
+    if (!this.currentPeg || !this.currentReserves || this.currentPeg.amount === '0') {
+      return;
+    }
+    this.ratioChartOptions = 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'
+            }
+          ]
+        }
+      ]
+    };
+  }
+}
+

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>L-BTC</span></div>
+          <span class="fiat">
+            <span>As of block&nbsp;<a [routerLink]="['/block', currentPeg.hash]">{{ currentPeg.lastBlockUpdate }}</a></span>
+          </span>
+        </div>
+      </div>
+      <div class="item">
+        <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">
+            <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>
+

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;
+    }
+  }
+}

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;
+  }
+
+}

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>

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;
   }
 }

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>

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;

frontend/src/app/components/menu/menu.component.html

@@ -2,8 +2,19 @@
   <div class="d-flex menu-click">
 
     <nav class="scrollable menu-click">
-      <span *ngIf="userAuth" class="menu-click">
-        <strong class="menu-click text-nowrap ellipsis">@ {{ userAuth.user.username }}</strong>
+      <span *ngIf="user$ | async as user" class="menu-click">
+        <span class="menu-click text-nowrap ellipsis">
+          <strong>
+            <span *ngIf="user.username.includes('@'); else usernamenospace">{{ user.username }}</span>
+            <ng-template #usernamenospace>@{{ user.username }}</ng-template>
+          </strong>
+        </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>

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;
 }

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('/');
       }
     });

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>

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: 440px;
+  }
+}
+
 .card-title {
   font-size: 1rem;
   color: #4a68b9;

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 = 375;
+
   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 = 335;
+    } else if (window.innerWidth >= 768) {
+      this.graphHeight = 245;
+    } else {
+      this.graphHeight = 240;
+    }
+  }
 }

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>
 

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;
   }

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;

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;
+          }
+        }
+    }
+  }
 }

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>

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
@@ -247,7 +248,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);
@@ -507,7 +508,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;
       }
     });

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>

frontend/src/app/dashboard/dashboard.component.html

@@ -16,24 +16,35 @@
     </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>
+            <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">
+              <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>
-            </ng-container>
+            </div>
+            <div class="mempool-block-wrapper">
+              <app-mempool-block-overview
+                [index]="0"
+                [resolution]="goggleResolution"
+                [filterFlags]="goggleCycle[goggleIndex].flag"
+                filterMode="or"
+              ></app-mempool-block-overview>
+            </div>
           </ng-template>
           <ng-template #liquidPegs>
-            <app-lbtc-pegs-graph [data]="liquidPegsMonth$ | async"></app-lbtc-pegs-graph>
+            <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" [height]="lbtcPegGraphHeight"></app-lbtc-pegs-graph>
           </ng-template>
         </div>
       </div>
@@ -41,9 +52,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 *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
+          <ng-container *ngIf="stateService.network !== 'liquid'">
+            <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"
+                [left]="50"
+                [right]="20"
+                [data]="mempoolStats.value?.weightPerSecond"
+                [windowPreferenceOverride]="'2h'"
+                ></app-incoming-transactions-graph>
+            </div>
+          </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 +83,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>
@@ -117,22 +131,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">
@@ -181,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 getArrayFromNumber(this.nbFeaturedAssets)">
         <td class="asset-icon">
           <div class="skeleton-loader skeleton-loader-transactions"></div>
         </td>
@@ -221,6 +227,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>
@@ -270,25 +287,17 @@
   <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>L-BTC</span></p>
+      </ng-container>
+    </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>&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>
       </ng-container>
     </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>

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: 510px;
   }
 }
 
@@ -66,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 {
@@ -97,6 +100,9 @@
         color: #ffffff66;
         font-size: 12px;
       }
+      .bitcoin-color {
+        color: #b86d12;
+      }
     }
     .progress {
       width: 90%;
@@ -255,6 +261,12 @@
 
 .mempool-graph {
   height: 255px;
+  @media (min-width: 768px) {
+    height: 285px;
+  }
+  @media (min-width: 992px) {
+    height: 370px;
+  }
 }
 .loadingGraphs{
   height: 250px;
@@ -361,3 +373,39 @@
   text-decoration: none;
   color: inherit;
 }
+
+.mempool-block-wrapper {
+  max-height: 410px;
+  max-width: 410px;
+  margin: auto;
+
+  @media (min-width: 768px) {
+    max-height: 344px;
+    max-width: 344px;
+  }
+  @media (min-width: 992px) {
+    max-height: 410px;
+    max-width: 410px;
+  }
+}
+
+.goggle-badge {
+  margin: 6px 5px 8px;
+  background: none;
+  border: solid 2px #105fb0;
+  cursor: pointer;
+
+  &.active {
+    background: #105fb0;
+  }
+}
+
+.btn-xs {
+  padding: 0.35rem 0.5rem;
+  font-size: 12px;
+}
+
+.quick-filter {
+  margin-top: 5px;
+  margin-bottom: 6px;
+}

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 { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
+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';
 import { StateService } from '../services/state.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>;
@@ -47,8 +48,32 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   transactionsWeightPerSecondOptions: any;
   isLoadingWebSocket$: Observable<boolean>;
   liquidPegsMonth$: Observable<any>;
+  currentPeg$: Observable<CurrentPegs>;
+  auditStatus$: Observable<AuditStatus>;
+  auditUpdated$: Observable<boolean>;
+  liquidReservesMonth$: Observable<any>;
+  currentReserves$: Observable<CurrentPegs>;
+  fullHistory$: Observable<any>;
+  isLoad: boolean = true;
+  mempoolInfoSubscription: Subscription;
   currencySubscription: Subscription;
   currency: string;
+  incomingGraphHeight: number = 300;
+  lbtcPegGraphHeight: number = 320;
+  private lastPegBlockUpdate: number = 0;
+  private lastPegAmount: string = '';
+  private lastReservesBlockUpdate: number = 0;
+
+  goggleResolution = 82;
+  goggleCycle = [
+    { index: 0, name: 'All' },
+    { 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);
+
+  private destroy$ = new Subject();
 
   constructor(
     public stateService: StateService,
@@ -62,11 +87,15 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngOnDestroy(): void {
+    this.mempoolInfoSubscription.unsubscribe();
     this.currencySubscription.unsubscribe();
     this.websocketService.stopTrackRbfSummary();
+    this.destroy$.next(1);
+    this.destroy$.complete();
   }
 
   ngOnInit(): void {
+    this.onResize();
     this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
     this.seoService.resetTitle();
     this.seoService.resetDescription();
@@ -81,8 +110,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
     this.mempoolInfoData$ = combineLatest([
       this.stateService.mempoolInfo$,
       this.stateService.vbytesPerSecond$
-    ])
-    .pipe(
+    ]).pipe(
       map(([mempoolInfo, vbytesPerSecond]) => {
         const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100);
 
@@ -112,6 +140,8 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
       })
     );
 
+    this.mempoolInfoSubscription = this.mempoolInfoData$.subscribe();
+
     this.mempoolBlocksData$ = this.stateService.mempoolBlocks$
       .pipe(
         map((mempoolBlocks) => {
@@ -125,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, 4);
+          return newArray.slice(0, this.nbFeaturedAssets);
         }),
       );
 
@@ -204,18 +241,114 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
       );
 
     if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') {
-      this.liquidPegsMonth$ = this.apiService.listLiquidPegsMonth$()
+      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)
+      );
+
+      ////////// 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;
+            })
+          )
+        ),
+        share()
+      );
+
+      ////////// BTC Reserves historical data //////////
+      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);
+        })
+      );
+
+      this.liquidReservesMonth$ = this.auditStatus$.pipe(
+        throttleTime(60 * 60 * 1000),
+        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.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.fullHistory$ = combineLatest([this.liquidPegsMonth$, this.currentPeg$, this.liquidReservesMonth$.pipe(startWith(null)), this.currentReserves$.pipe(startWith(null))])
         .pipe(
-          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);
+          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 {
-              series,
-              labels
+              liquidPegs,
+              liquidReserves
             };
           }),
-          share(),
+          share()
         );
     }
 
@@ -237,4 +370,28 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   trackByBlock(index: number, block: BlockExtended) {
     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;
+    }
+  }
 }

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 };

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,
       },

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

@@ -76,6 +76,51 @@ export interface LiquidPegs {
   date: string;
 }
 
+export interface CurrentPegs {
+  amount: string;
+  lastBlockUpdate: number;
+  hash: string;
+}
+
+export interface PegsVolume {
+  volume: string;
+  number: number;
+}
+
+export interface FederationAddress { 
+  bitcoinaddress: string;
+  balance: string;
+}
+
+export interface FederationUtxo {
+  txid: string;
+  txindex: number;
+  bitcoinaddress: string;
+  amount: number;
+  blocknumber: number;
+  blocktime: number;
+  pegtxid: string;
+  pegindex: number;
+  pegblocktime: number;
+}
+
+export interface RecentPeg {
+  txid: string;
+  txindex: number;
+  amount: number;
+  bitcoinaddress: string;
+  bitcointxid: string;
+  bitcoinindex: number;
+  blocktime: number;
+}
+
+export interface AuditStatus {
+  bitcoinBlocks: number;
+  bitcoinHeaders: number;
+  lastBlockAudit: number;
+  isAuditSynced: boolean;
+}
+
 export interface ITranslators { [language: string]: string; }
 
 /**

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>

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: 439px;
+  }
+}
+
 .card-title {
   font-size: 1rem;
   color: #4a68b9;

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 = 340;
+    } else if (window.innerWidth >= 768) {
+      this.graphHeight = 245;
+    } else {
+      this.graphHeight = 210;
+    }
+  }
 }

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);

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>

frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss

@@ -56,7 +56,6 @@
 }
 .chart-widget {
   width: 100%;
-  height: 145px;
 }
 
 .pool-distribution {

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,

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>
 

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;

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>

frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss

@@ -56,7 +56,6 @@
 }
 .chart-widget {
   width: 100%;
-  height: 145px;
 }
 
 .pool-distribution {

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,

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,17 @@ 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 { 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';
+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 = [
   {
@@ -64,6 +77,44 @@ 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/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: 'audit/pegs',
+        data: { networks: ['liquid'] },
+        component: RecentPegsListComponent,
+      },
       {
         path: 'assets',
         data: { networks: ['liquid'] },
@@ -123,9 +174,23 @@ export class LiquidRoutingModule { }
     CommonModule,
     LiquidRoutingModule,
     SharedModule,
+    NgxEchartsModule.forRoot({
+      echarts: () => import('../graphs/echarts').then(m => m.echarts),
+    })
   ],
   declarations: [
     LiquidMasterPageComponent,
+    ReservesAuditDashboardComponent,
+    ReservesSupplyStatsComponent,
+    RecentPegsStatsComponent,
+    RecentPegsListComponent,
+    FederationWalletComponent,
+    FederationUtxosListComponent,
+    FederationAddressesStatsComponent,
+    FederationAddressesListComponent,
+    ReservesRatioComponent,
+    ReservesRatioStatsComponent,
+    ReservesRatioGraphComponent,
   ]
 })
 export class LiquidMasterPageModule { }

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, 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';
-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 {
@@ -178,10 +168,50 @@ 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');
+  }
+
+  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');
   }
 
+  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');
+  }
+
+  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');
+  }
+
+  federationUtxosOneMonthAgo$(): Observable<any> {
+    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');
   }
@@ -378,62 +408,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 } });
-  }
 }