mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 10:21:52 +01:00
Code Issues Projects Releases Wiki Activity

Liquid dashboard: Fix double api call

Browse Source
This commit is contained in:
natsee 2024-01-26 20:43:34 +01:00
parent 7102a72f84
commit 1a2844ffdf
No known key found for this signature in database
GPG Key ID: 233CF3150A89BED8
4 changed files with 65 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core'; import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
import { Observable, combineLatest, concat, of } from 'rxjs'; import { Observable, combineLatest, of, timer } from 'rxjs';
import { delay, filter, map, share, skip, switchMap, tap, throttleTime } from 'rxjs/operators'; import { delayWhen, filter, map, share, shareReplay, switchMap, tap, throttleTime } from 'rxjs/operators';
import { ApiService } from '../../../services/api.service'; import { ApiService } from '../../../services/api.service';
import { Env, StateService } from '../../../services/state.service'; import { Env, StateService } from '../../../services/state.service';
import { AuditStatus, CurrentPegs, FederationAddress } from '../../../interfaces/node-api.interface'; import { AuditStatus, CurrentPegs, FederationAddress } from '../../../interfaces/node-api.interface';
@ -28,6 +28,7 @@ export class FederationAddressesListComponent implements OnInit {
currentPeg$: Observable<CurrentPegs>; currentPeg$: Observable<CurrentPegs>;
lastPegBlockUpdate: number = 0; lastPegBlockUpdate: number = 0;
lastPegAmount: string = ''; lastPegAmount: string = '';
isLoad: boolean = true;
constructor( constructor(
private apiService: ApiService, private apiService: ApiService,
@ -42,15 +43,12 @@ export class FederationAddressesListComponent implements OnInit {
this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()]; this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
if (!this.widget) { if (!this.widget) {
this.websocketService.want(['blocks']); this.websocketService.want(['blocks']);
this.auditStatus$ = concat( this.auditStatus$ = this.stateService.blocks$.pipe(
this.apiService.federationAuditSynced$().pipe(share()),
this.stateService.blocks$.pipe(
skip(1),
throttleTime(40000), throttleTime(40000),
delay(2000), delayWhen(_ => this.isLoad ? timer(0) : timer(2000)),
tap(() => this.isLoad = false),
switchMap(() => this.apiService.federationAuditSynced$()), switchMap(() => this.apiService.federationAuditSynced$()),
share() shareReplay(1)
)
); );
this.currentPeg$ = this.auditStatus$.pipe( this.currentPeg$ = this.auditStatus$.pipe(

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

@ -1,6 +1,6 @@
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core'; import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
import { Observable, combineLatest, concat, of } from 'rxjs'; import { Observable, combineLatest, of, timer } from 'rxjs';
import { delay, filter, map, share, skip, switchMap, tap, throttleTime } from 'rxjs/operators'; import { delayWhen, filter, map, share, shareReplay, switchMap, tap, throttleTime } from 'rxjs/operators';
import { ApiService } from '../../../services/api.service'; import { ApiService } from '../../../services/api.service';
import { Env, StateService } from '../../../services/state.service'; import { Env, StateService } from '../../../services/state.service';
import { AuditStatus, CurrentPegs, FederationUtxo } from '../../../interfaces/node-api.interface'; import { AuditStatus, CurrentPegs, FederationUtxo } from '../../../interfaces/node-api.interface';
@ -28,6 +28,7 @@ export class FederationUtxosListComponent implements OnInit {
currentPeg$: Observable<CurrentPegs>; currentPeg$: Observable<CurrentPegs>;
lastPegBlockUpdate: number = 0; lastPegBlockUpdate: number = 0;
lastPegAmount: string = ''; lastPegAmount: string = '';
isLoad: boolean = true;
constructor( constructor(
private apiService: ApiService, private apiService: ApiService,
@ -42,15 +43,12 @@ export class FederationUtxosListComponent implements OnInit {
this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()]; this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
if (!this.widget) { if (!this.widget) {
this.websocketService.want(['blocks']); this.websocketService.want(['blocks']);
this.auditStatus$ = concat( this.auditStatus$ = this.stateService.blocks$.pipe(
this.apiService.federationAuditSynced$().pipe(share()),
this.stateService.blocks$.pipe(
skip(1),
throttleTime(40000), throttleTime(40000),
delay(2000), delayWhen(_ => this.isLoad ? timer(0) : timer(2000)),
tap(() => this.isLoad = false),
switchMap(() => this.apiService.federationAuditSynced$()), switchMap(() => this.apiService.federationAuditSynced$()),
share() shareReplay(1)
)
); );
this.currentPeg$ = this.auditStatus$.pipe( this.currentPeg$ = this.auditStatus$.pipe(

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

@ -2,9 +2,9 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { SeoService } from '../../../services/seo.service'; import { SeoService } from '../../../services/seo.service';
import { WebsocketService } from '../../../services/websocket.service'; import { WebsocketService } from '../../../services/websocket.service';
import { StateService } from '../../../services/state.service'; import { StateService } from '../../../services/state.service';
import { Observable, combineLatest, concat, delay, filter, interval, map, mergeMap, of, share, skip, startWith, switchMap, tap, throttleTime } from 'rxjs'; import { Observable, combineLatest, delayWhen, filter, interval, map, of, share, shareReplay, startWith, switchMap, tap, throttleTime, timer } from 'rxjs';
import { ApiService } from '../../../services/api.service'; import { ApiService } from '../../../services/api.service';
import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo, LiquidPegs } from '../../../interfaces/node-api.interface'; import { AuditStatus, CurrentPegs, FederationAddress, FederationUtxo } from '../../../interfaces/node-api.interface';
@Component({ @Component({
selector: 'app-reserves-audit-dashboard', selector: 'app-reserves-audit-dashboard',
@ -24,6 +24,7 @@ export class ReservesAuditDashboardComponent implements OnInit {
liquidPegsMonth$: Observable<any>; liquidPegsMonth$: Observable<any>;
liquidReservesMonth$: Observable<any>; liquidReservesMonth$: Observable<any>;
fullHistory$: Observable<any>; fullHistory$: Observable<any>;
isLoad: boolean = true;
private lastPegBlockUpdate: number = 0; private lastPegBlockUpdate: number = 0;
private lastPegAmount: string = ''; private lastPegAmount: string = '';
private lastReservesBlockUpdate: number = 0; private lastReservesBlockUpdate: number = 0;
@ -41,15 +42,12 @@ export class ReservesAuditDashboardComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.websocketService.want(['blocks', 'mempool-blocks']); this.websocketService.want(['blocks', 'mempool-blocks']);
this.auditStatus$ = concat( this.auditStatus$ = this.stateService.blocks$.pipe(
this.apiService.federationAuditSynced$().pipe(share()),
this.stateService.blocks$.pipe(
skip(1),
throttleTime(40000), throttleTime(40000),
delay(2000), delayWhen(_ => this.isLoad ? timer(0) : timer(2000)),
tap(() => this.isLoad = false),
switchMap(() => this.apiService.federationAuditSynced$()), switchMap(() => this.apiService.federationAuditSynced$()),
share() shareReplay(1)
)
); );
this.currentPeg$ = this.auditStatus$.pipe( this.currentPeg$ = this.auditStatus$.pipe(

62
frontend/src/app/dashboard/dashboard.component.ts
View File

@ -1,6 +1,6 @@
import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
import { combineLatest, concat, EMPTY, interval, merge, Observable, of, Subscription } from 'rxjs'; import { combineLatest, EMPTY, merge, Observable, of, Subscription, timer } from 'rxjs';
import { catchError, delay, filter, map, mergeMap, scan, share, skip, startWith, switchMap, tap, throttleTime } from 'rxjs/operators'; import { catchError, delayWhen, filter, map, scan, share, shareReplay, startWith, switchMap, tap, throttleTime } from 'rxjs/operators';
import { AuditStatus, BlockExtended, CurrentPegs, OptimizedMempoolStats } from '../interfaces/node-api.interface'; import { AuditStatus, BlockExtended, CurrentPegs, OptimizedMempoolStats } from '../interfaces/node-api.interface';
import { MempoolInfo, TransactionStripped, ReplacementInfo } from '../interfaces/websocket.interface'; import { MempoolInfo, TransactionStripped, ReplacementInfo } from '../interfaces/websocket.interface';
import { ApiService } from '../services/api.service'; import { ApiService } from '../services/api.service';
@ -53,6 +53,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
liquidReservesMonth$: Observable<any>; liquidReservesMonth$: Observable<any>;
currentReserves$: Observable<CurrentPegs>; currentReserves$: Observable<CurrentPegs>;
fullHistory$: Observable<any>; fullHistory$: Observable<any>;
isLoad: boolean = true;
currencySubscription: Subscription; currencySubscription: Subscription;
currency: string; currency: string;
private lastPegBlockUpdate: number = 0; private lastPegBlockUpdate: number = 0;
@ -213,10 +214,18 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
); );
if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') { if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') {
this.auditStatus$ = this.stateService.blocks$.pipe(
throttleTime(40000),
delayWhen(_ => this.isLoad ? timer(0) : timer(2000)),
tap(() => this.isLoad = false),
switchMap(() => this.apiService.federationAuditSynced$()),
shareReplay(1),
share()
);
////////// Pegs historical data ////////// ////////// Pegs historical data //////////
this.liquidPegsMonth$ = interval(60 * 60 * 1000) this.liquidPegsMonth$ = this.auditStatus$.pipe(
.pipe( throttleTime(60 * 60 * 1000),
startWith(0),
switchMap(() => this.apiService.listLiquidPegsMonth$()), switchMap(() => this.apiService.listLiquidPegsMonth$()),
map((pegs) => { map((pegs) => {
const labels = pegs.map(stats => stats.date); const labels = pegs.map(stats => stats.date);
@ -230,39 +239,19 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
share(), share(),
); );
this.currentPeg$ = concat( this.currentPeg$ = this.auditStatus$.pipe(
// We fetch the current peg when the page load and switchMap(_ =>
// wait for the API response before listening to websocket blocks this.apiService.liquidPegs$().pipe(
this.apiService.liquidPegs$() filter((currentPegs) => currentPegs.lastBlockUpdate >= this.lastPegBlockUpdate),
.pipe( tap((currentPegs) => {
tap((currentPeg) => this.lastPegBlockUpdate = currentPeg.lastBlockUpdate) this.lastPegBlockUpdate = currentPegs.lastBlockUpdate;
), })
// Or when we receive a newer block, we wait 2 seconds so that the backend updates and we fetch the current peg
this.stateService.blocks$
.pipe(
skip(1),
throttleTime(40000),
delay(2000),
switchMap((_) => this.apiService.liquidPegs$()),
filter((currentPeg) => currentPeg.lastBlockUpdate >= this.lastPegBlockUpdate),
tap((currentPeg) => this.lastPegBlockUpdate = currentPeg.lastBlockUpdate)
) )
).pipe( ),
share() share()
); );
////////// BTC Reserves historical data ////////// ////////// BTC Reserves historical data //////////
this.auditStatus$ = concat(
this.apiService.federationAuditSynced$().pipe(share()),
this.stateService.blocks$.pipe(
skip(1),
throttleTime(40000),
delay(2000),
switchMap(() => this.apiService.federationAuditSynced$()),
share()
)
);
this.auditUpdated$ = combineLatest([ this.auditUpdated$ = combineLatest([
this.auditStatus$, this.auditStatus$,
this.currentPeg$ this.currentPeg$
@ -273,18 +262,15 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
currentPegAmount: currentPeg.amount currentPegAmount: currentPeg.amount
})), })),
switchMap(({ lastBlockAudit, currentPegAmount }) => { switchMap(({ lastBlockAudit, currentPegAmount }) => {
console.log(lastBlockAudit, this.lastReservesBlockUpdate, currentPegAmount, this.lastPegAmount)
const blockAuditCheck = lastBlockAudit > this.lastReservesBlockUpdate; const blockAuditCheck = lastBlockAudit > this.lastReservesBlockUpdate;
const amountCheck = currentPegAmount !== this.lastPegAmount; const amountCheck = currentPegAmount !== this.lastPegAmount;
this.lastPegAmount = currentPegAmount; this.lastPegAmount = currentPegAmount;
console.log(blockAuditCheck || amountCheck)
return of(blockAuditCheck || amountCheck); return of(blockAuditCheck || amountCheck);
}) })
); );
this.liquidReservesMonth$ = interval(60 * 60 * 1000).pipe( this.liquidReservesMonth$ = this.auditStatus$.pipe(
startWith(0), throttleTime(60 * 60 * 1000),
mergeMap(() => this.apiService.federationAuditSynced$()),
switchMap((auditStatus) => { switchMap((auditStatus) => {
return auditStatus.isAuditSynced ? this.apiService.listLiquidReservesMonth$() : EMPTY; return auditStatus.isAuditSynced ? this.apiService.listLiquidReservesMonth$() : EMPTY;
}), }),