new page listing recent RBF events

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

@@ -1,4 +1,4 @@
-<div class="rbf-timeline box">
+<div class="rbf-timeline box" [class.mined]="mined">
   <div class="timeline">
     <div class="intervals">
       <ng-container *ngFor="let replacement of replacements; let i = index;">
@@ -15,7 +15,7 @@
         <div class="interval-spacer" *ngIf="i > 0">
           <div class="track"></div>
         </div>
-        <div class="node" [class.selected]="txid === replacement.tx.txid">
+        <div class="node" [class.selected]="txid === replacement.tx.txid" [class.mined]="replacement.mined">
           <div class="track"></div>
           <a class="shape-border" [class.rbf]="replacement.tx.rbf" [routerLink]="['/tx/' | relativeUrl, replacement.tx.txid]" [title]="replacement.tx.txid">
             <div class="shape"></div>

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

@@ -126,6 +126,12 @@
         }
       }
 
+      &.mined {
+        .shape-border {
+          background: #1a9436;
+        }
+      }
+
       .shape-border:hover {
         padding: 0px;
         .shape {

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

@@ -12,6 +12,7 @@ import { ApiService } from '../../services/api.service';
 export class RbfTimelineComponent implements OnInit, OnChanges {
   @Input() replacements: RbfInfo[];
   @Input() txid: string;
+  mined: boolean;
 
   dir: 'rtl' | 'ltr' = 'ltr';
 
@@ -27,10 +28,10 @@ export class RbfTimelineComponent implements OnInit, OnChanges {
   }
 
   ngOnInit(): void {
-    
+    this.mined = this.replacements.some(entry => entry.mined);
   }
 
   ngOnChanges(): void {
-    
+    this.mined = this.replacements.some(entry => entry.mined);
   }
 }