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(