Timeline of replacements for RBF-d transactions

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

@@ -0,0 +1,35 @@
+<div class="rbf-timeline box">
+  <div class="timeline">
+    <div class="intervals">
+      <ng-container *ngFor="let replacement of replacements; let i = index;">
+        <div class="interval" *ngIf="i > 0">
+          <div class="interval-time">
+            <app-time [time]="replacement.time - replacements[i-1].time" [relative]="false"></app-time>
+          </div>
+        </div>
+        <div class="node-spacer"></div>
+      </ng-container>
+    </div>
+    <div class="nodes">
+      <ng-container *ngFor="let replacement of replacements; let i = index;">
+        <div class="interval-spacer" *ngIf="i > 0">
+          <div class="track"></div>
+        </div>
+        <div class="node" [class.selected]="txid === replacement.tx.txid">
+          <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>
+          </a>
+          <span class="fee-rate">{{ replacement.tx.fee / (replacement.tx.vsize) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+
+  <!-- <app-rbf-timeline-tooltip
+    *ngIf=[tooltip]
+    [line]="hoverLine"
+    [cursorPosition]="tooltipPosition"
+    [isConnector]="hoverConnector"
+  ></app-rbf-timeline-tooltip> -->
+</div>

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

@@ -0,0 +1,137 @@
+.rbf-timeline {
+  position: relative;
+  width: 100%;
+  padding: 1em 0;
+
+  &::after, &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2em;
+    z-index: 2;
+  }
+
+  &::before {
+    left: 0;
+    background: linear-gradient(to right, #24273e, #24273e, transparent);
+  }
+
+  &::after {
+    right: 0;
+    background: linear-gradient(to left, #24273e, #24273e, transparent);
+  }
+
+  .timeline {
+    position: relative;
+    width: calc(100% - 2em);
+    margin: auto;
+    overflow-x: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .intervals, .nodes {
+    min-width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    text-align: center;
+
+    .node, .node-spacer {
+      width: 4em;
+      min-width: 4em;
+      flex-grow: 1;
+    }
+
+    .interval, .interval-spacer {
+      width: 8em;
+      min-width: 4em;
+      max-width: 8em;
+    }
+
+    .interval-time {
+      font-size: 12px;
+    }
+  }
+
+  .node, .interval-spacer {
+    position: relative;
+    .track {
+      position: absolute;
+      height: 10px;
+      left: -5px;
+      right: -5px;
+      top: 0;
+      transform: translateY(-50%);
+      background: #105fb0;
+      border-radius: 5px;
+    }
+    &:first-child {
+      .track {
+        left: 50%;
+      }
+    }
+    &:last-child {
+      .track {
+        right: 50%;
+      }
+    }
+  }
+
+  .nodes {
+    position: relative;
+    margin-top: 1em;
+    .node {
+      .shape-border {
+        display: block;
+        margin: auto;
+        height: calc(1em + 8px);
+        width: calc(1em + 8px);
+        margin-bottom: -8px;
+        transform: translateY(-50%);
+        border-radius: 10%;
+        cursor: pointer;
+        padding: 4px;
+        background: transparent;
+        transition: background-color 300ms, padding 300ms;
+
+        .shape {
+          width: 100%;
+          height: 100%;
+          border-radius: 10%;
+          background: white;
+          transition: background-color 300ms;
+        }
+
+        &.rbf, &.rbf .shape {
+          border-radius: 50%;
+        }
+      }
+
+      .symbol::ng-deep {
+        display: block;
+        margin-top: -0.5em;
+      }
+
+      &.selected {
+        .shape-border {
+          background: #9339f4;
+        }
+      }
+
+      .shape-border:hover {
+        padding: 0px;
+        .shape {
+          background: #1bd8f4;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+import { Component, Input, OnInit, OnChanges, Inject, LOCALE_ID } from '@angular/core';
+import { Router } from '@angular/router';
+import { RbfInfo } from '../../interfaces/node-api.interface';
+import { StateService } from '../../services/state.service';
+import { ApiService } from '../../services/api.service';
+
+@Component({
+  selector: 'app-rbf-timeline',
+  templateUrl: './rbf-timeline.component.html',
+  styleUrls: ['./rbf-timeline.component.scss'],
+})
+export class RbfTimelineComponent implements OnInit, OnChanges {
+  @Input() replacements: RbfInfo[];
+  @Input() txid: string;
+
+  dir: 'rtl' | 'ltr' = 'ltr';
+
+  constructor(
+    private router: Router,
+    private stateService: StateService,
+    private apiService: ApiService,
+    @Inject(LOCALE_ID) private locale: string,
+  ) {
+    if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
+      this.dir = 'rtl';
+    }
+  }
+
+  ngOnInit(): void {
+    
+  }
+
+  ngOnChanges(): void {
+    
+  }
+}