reduce latest rbf websocket data

frontend/src/app/dashboard/dashboard.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { combineLatest, merge, Observable, of, Subscription } from 'rxjs';
-import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
+import { filter, map, scan, share, switchMap } from 'rxjs/operators';
 import { BlockExtended, OptimizedMempoolStats, RbfTree } from '../interfaces/node-api.interface';
-import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
+import { MempoolInfo, TransactionStripped, ReplacementInfo } from '../interfaces/websocket.interface';
 import { ApiService } from '../services/api.service';
 import { StateService } from '../services/state.service';
 import { WebsocketService } from '../services/websocket.service';
@@ -25,17 +25,6 @@ interface MempoolStatsData {
   weightPerSecond: any;
 }
 
-interface ReplacementInfo {
-  tree: RbfTree;
-  mined: boolean;
-  fullRbf: boolean;
-  txid: string;
-  oldFee: number;
-  oldVsize: number;
-  newFee: number;
-  newVsize: number;
-}
-
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
@@ -69,13 +58,14 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.currencySubscription.unsubscribe();
+    this.websocketService.stopTrackRbfSummary();
   }
 
   ngOnInit(): void {
     this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
     this.seoService.resetTitle();
     this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']);
-    this.websocketService.startTrackRbf('all');
+    this.websocketService.startTrackRbfSummary();
     this.network$ = merge(of(''), this.stateService.networkChanged$);
     this.mempoolLoadingStatus$ = this.stateService.loadingIndicators$
       .pipe(
@@ -154,30 +144,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
         }, []),
       );
 
-    this.replacements$ = this.stateService.rbfLatest$.pipe(
-      switchMap((rbfList) => {
-        const replacements = rbfList.slice(0, 6).map(rbfTree => {
-          let oldFee = 0;
-          let oldVsize = 0;
-          for (const replaced of rbfTree.replaces) {
-            oldFee += replaced.tx.fee;
-            oldVsize += replaced.tx.vsize;
-          }
-          this.checkFullRbf(rbfTree);
-          return {
-            tree: rbfTree,
-            txid: rbfTree.tx.txid,
-            mined: rbfTree.tx.mined,
-            fullRbf: rbfTree.tx.fullRbf,
-            oldFee,
-            oldVsize,
-            newFee: rbfTree.tx.fee,
-            newVsize: rbfTree.tx.vsize,
-          };
-        });
-        return of(replacements);
-      })
-    );
+    this.replacements$ = this.stateService.rbfLatestSummary$;
 
     this.mempoolStats$ = this.stateService.connectionState$
       .pipe(

frontend/src/app/interfaces/websocket.interface.ts

@@ -18,6 +18,7 @@ export interface WebsocketResponse {
   txReplaced?: ReplacedTransaction;
   rbfInfo?: RbfTree;
   rbfLatest?: RbfTree[];
+  rbfLatestSummary?: ReplacementInfo[];
   utxoSpent?: object;
   transactions?: TransactionStripped[];
   loadingIndicators?: ILoadingIndicators;
@@ -29,6 +30,7 @@ export interface WebsocketResponse {
   'track-asset'?: string;
   'track-mempool-block'?: number;
   'track-rbf'?: string;
+  'track-rbf-summary'?: boolean;
   'watch-mempool'?: boolean;
   'track-bisq-market'?: string;
   'refresh-blocks'?: boolean;
@@ -37,6 +39,16 @@ export interface WebsocketResponse {
 export interface ReplacedTransaction extends Transaction {
   txid: string;
 }
+
+export interface ReplacementInfo {
+  mined: boolean;
+  fullRbf: boolean;
+  txid: string;
+  oldFee: number;
+  oldVsize: number;
+  newFee: number;
+  newVsize: number;
+}
 export interface MempoolBlock {
   blink?: boolean;
   height?: number;

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

@@ -1,7 +1,7 @@
 import { Inject, Injectable, PLATFORM_ID, LOCALE_ID } from '@angular/core';
 import { ReplaySubject, BehaviorSubject, Subject, fromEvent, Observable, merge } from 'rxjs';
 import { Transaction } from '../interfaces/electrs.interface';
-import { IBackendInfo, MempoolBlock, MempoolBlockDelta, MempoolInfo, Recommendedfees, ReplacedTransaction, TransactionStripped } from '../interfaces/websocket.interface';
+import { IBackendInfo, MempoolBlock, MempoolBlockDelta, MempoolInfo, Recommendedfees, ReplacedTransaction, ReplacementInfo, TransactionStripped } from '../interfaces/websocket.interface';
 import { BlockExtended, DifficultyAdjustment, MempoolPosition, OptimizedMempoolStats, RbfTree } from '../interfaces/node-api.interface';
 import { Router, NavigationStart } from '@angular/router';
 import { isPlatformBrowser } from '@angular/common';
@@ -108,6 +108,7 @@ export class StateService {
   txReplaced$ = new Subject<ReplacedTransaction>();
   txRbfInfo$ = new Subject<RbfTree>();
   rbfLatest$ = new Subject<RbfTree[]>();
+  rbfLatestSummary$ = new Subject<ReplacementInfo[]>();
   utxoSpent$ = new Subject<object>();
   difficultyAdjustment$ = new ReplaySubject<DifficultyAdjustment>(1);
   mempoolTransactions$ = new Subject<Transaction>();

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

@@ -29,6 +29,7 @@ export class WebsocketService {
   private trackingTxId: string;
   private isTrackingMempoolBlock = false;
   private isTrackingRbf = false;
+  private isTrackingRbfSummary = false;
   private trackingMempoolBlock: number;
   private latestGitCommit = '';
   private onlineCheckTimeout: number;
@@ -185,6 +186,16 @@ export class WebsocketService {
     this.isTrackingRbf = false;
   }
 
+  startTrackRbfSummary() {
+    this.websocketSubject.next({ 'track-rbf-summary': true });
+    this.isTrackingRbfSummary = true;
+  }
+
+  stopTrackRbfSummary() {
+    this.websocketSubject.next({ 'track-rbf-summary': false });
+    this.isTrackingRbfSummary = false;
+  }
+
   startTrackBisqMarket(market: string) {
     this.websocketSubject.next({ 'track-bisq-market': market });
   }
@@ -283,6 +294,10 @@ export class WebsocketService {
       this.stateService.rbfLatest$.next(response.rbfLatest);
     }
 
+    if (response.rbfLatestSummary) {
+      this.stateService.rbfLatestSummary$.next(response.rbfLatestSummary);
+    }
+
     if (response.txReplaced) {
       this.stateService.txReplaced$.next(response.txReplaced);
     }