support trees of RBF replacements

frontend/src/app/components/rbf-list/rbf-list.component.html

@@ -17,37 +17,22 @@
 
   <div class="clearfix"></div>
 
-  <div class="rbf-chains" style="min-height: 295px">
-    <ng-container *ngIf="rbfChains$ | async as chains">
-      <div *ngFor="let chain of chains" class="chain">
+  <div class="rbf-trees" style="min-height: 295px">
+    <ng-container *ngIf="rbfTrees$ | async as trees">
+      <div *ngFor="let tree of trees" class="tree">
         <p class="info">
-          <app-time kind="since" [time]="chain[chain.length - 1].time"></app-time>
           <span class="type">
-            <span *ngIf="isMined(chain)" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
-            <span *ngIf="isFullRbf(chain)" class="badge badge-info" i18n="transaction.full-rbf">Full RBF</span>
+            <span *ngIf="isMined(tree)" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
+            <span *ngIf="isFullRbf(tree)" class="badge badge-info" i18n="transaction.full-rbf">Full RBF</span>
           </span>
+          <app-time kind="since" [time]="tree.time"></app-time>
         </p>
-        <div class="txids">
-          <span class="txid">
-            <a class="rbf-link" [routerLink]="['/tx/' | relativeUrl, chain[0].tx.txid]">
-              <span class="d-inline">{{ chain[0].tx.txid | shortenString : 24 }}</span>
-            </a>
-          </span>
-          <span class="arrow">
-            <fa-icon [icon]="['fas', 'arrow-right']" [fixedWidth]="true"></fa-icon>
-          </span>
-          <span class="txid right">
-            <a class="rbf-link" [routerLink]="['/tx/' | relativeUrl, chain[chain.length - 1].tx.txid]">
-              <span class="d-inline">{{ chain[chain.length - 1].tx.txid | shortenString : 24 }}</span>
-            </a>
-          </span>
-        </div>
-        <div class="timeline-wrapper" [class.mined]="isMined(chain)">
-          <app-rbf-timeline [replacements]="chain"></app-rbf-timeline>
+        <div class="timeline-wrapper" [class.mined]="isMined(tree)">
+          <app-rbf-timeline [replacements]="tree"></app-rbf-timeline>
         </div>
       </div>
 
-      <div class="no-replacements" *ngIf="!chains?.length">
+      <div class="no-replacements" *ngIf="!trees?.length">
         <p i18n="rbf.no-replacements-yet">there are no replacements in the mempool yet!</p>
       </div>
     </ng-container>

frontend/src/app/components/rbf-list/rbf-list.component.scss

@@ -4,13 +4,14 @@
   margin-top: 13px;
 }
 
-.rbf-chains {
+.rbf-trees {
   .info {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: baseline;
     margin: 0;
+    margin-bottom: 0.5em;
 
     .type {
       .badge {
@@ -19,27 +20,10 @@
     }
   }
 
-  .chain {
+  .tree {
     margin-bottom: 1em;
   }
 
-  .txids {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    justify-content: space-between;
-    margin-bottom: 2px;
-
-    .txid {
-      flex-basis: 0;
-      flex-grow: 1;
-
-      &.right {
-        text-align: right;
-      }
-    }
-  }
-
   .timeline-wrapper.mined {
     border: solid 4px #1a9436;
   }

frontend/src/app/components/rbf-list/rbf-list.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, EMPTY, merge, Observable, Subscription } from 'rxjs';
 import { catchError, switchMap, tap } from 'rxjs/operators';
 import { WebsocketService } from 'src/app/services/websocket.service';
-import { RbfInfo } from '../../interfaces/node-api.interface';
+import { RbfTree } from '../../interfaces/node-api.interface';
 import { ApiService } from '../../services/api.service';
 import { StateService } from '../../services/state.service';
 
@@ -14,14 +14,12 @@ import { StateService } from '../../services/state.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RbfList implements OnInit, OnDestroy {
-  rbfChains$: Observable<RbfInfo[][]>;
-  fromChainSubject = new BehaviorSubject(null);
+  rbfTrees$: Observable<RbfTree[]>;
+  nextRbfSubject = new BehaviorSubject(null);
   urlFragmentSubscription: Subscription;
   fullRbfEnabled: boolean;
   fullRbf: boolean;
   isLoading = true;
-  firstChainId: string;
-  lastChainId: string;
 
   constructor(
     private route: ActivatedRoute,
@@ -37,13 +35,13 @@ export class RbfList implements OnInit, OnDestroy {
     this.urlFragmentSubscription = this.route.fragment.subscribe((fragment) => {
       this.fullRbf = (fragment === 'fullrbf');
       this.websocketService.startTrackRbf(this.fullRbf ? 'fullRbf' : 'all');
-      this.fromChainSubject.next(this.firstChainId);
+      this.nextRbfSubject.next(null);
     });
 
-    this.rbfChains$ = merge(
-      this.fromChainSubject.pipe(
-        switchMap((fromChainId) => {
-          return this.apiService.getRbfList$(this.fullRbf, fromChainId || undefined)
+    this.rbfTrees$ = merge(
+      this.nextRbfSubject.pipe(
+        switchMap(() => {
+          return this.apiService.getRbfList$(this.fullRbf);
         }),
         catchError((e) => {
           return EMPTY;
@@ -52,11 +50,8 @@ export class RbfList implements OnInit, OnDestroy {
       this.stateService.rbfLatest$
     )
     .pipe(
-      tap((result: RbfInfo[][]) => {
+      tap(() => {
         this.isLoading = false;
-        if (result && result.length && result[0].length) {
-          this.lastChainId = result[result.length - 1][0].tx.txid;
-        }
       })
     );
   }
@@ -68,16 +63,16 @@ export class RbfList implements OnInit, OnDestroy {
     });
   }
 
-  isFullRbf(chain: RbfInfo[]): boolean {
-    return chain.slice(0, -1).some(entry => !entry.tx.rbf);
+  isFullRbf(tree: RbfTree): boolean {
+    return tree.fullRbf;
   }
 
-  isMined(chain: RbfInfo[]): boolean {
-    return chain.some(entry => entry.mined);
+  isMined(tree: RbfTree): boolean {
+    return tree.mined;
   }
 
   // pageChange(page: number) {
-  //   this.fromChainSubject.next(this.lastChainId);
+  //   this.fromTreeSubject.next(this.lastTreeId);
   // }
 
   ngOnDestroy(): void {