Show historical price on transaction bowtie chart

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html

@@ -56,7 +56,7 @@
           </ng-container>
       </ng-container>
       <p *ngIf="line.value == null && line.confidential" i18n="shared.confidential">Confidential</p>
-      <p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
+      <p *ngIf="line.value != null"><app-amount [blockConversion]="blockConversion" [satoshis]="line.value"></app-amount></p>
       <p *ngIf="line.type !== 'fee' && line.address" class="address">
         <app-truncate [text]="line.address"></app-truncate>
       </p>

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts

@@ -1,5 +1,6 @@
-import { Component, ElementRef, ViewChild, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ElementRef, ViewChild, Input, OnChanges, OnInit } from '@angular/core';
-import { TransactionStripped } from '../../interfaces/websocket.interface';
+import { tap } from 'rxjs';
+import { Price, PriceService } from 'src/app/services/price.service';
 
 interface Xput {
   type: 'input' | 'output' | 'fee';
@@ -14,6 +15,7 @@ interface Xput {
   pegin?: boolean;
   pegout?: string;
   confidential?: boolean;
+  timestamp?: number;
 }
 
 @Component({
@@ -27,12 +29,21 @@ export class TxBowtieGraphTooltipComponent implements OnChanges {
   @Input() isConnector: boolean = false;
 
   tooltipPosition = { x: 0, y: 0 };
+  blockConversion: Price;
 
   @ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
 
-  constructor() {}
+  constructor(private priceService: PriceService) {}
 
   ngOnChanges(changes): void {
+    if (changes.line?.currentValue) {
+      this.priceService.getBlockPrice$(changes.line?.currentValue.timestamp).pipe(
+        tap((price) => {
+          this.blockConversion = price;
+        })
+      ).subscribe();
+    }
+
     if (changes.cursorPosition && changes.cursorPosition.currentValue) {
       let x = Math.max(10, changes.cursorPosition.currentValue.x - 50);
       let y = changes.cursorPosition.currentValue.y + 20;

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts

@@ -29,6 +29,7 @@ interface Xput {
   pegin?: boolean;
   pegout?: string;
   confidential?: boolean;
+  timestamp?: number;
 }
 
 @Component({
@@ -152,6 +153,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
         index: i,
         pegout: v?.pegout?.scriptpubkey_address,
         confidential: (this.isLiquid && v?.value === undefined),
+        timestamp: this.tx.status.block_time
       } as Xput;
     });
 
@@ -171,6 +173,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
         coinbase: v?.is_coinbase,
         pegin: v?.is_pegin,
         confidential: (this.isLiquid && v?.prevout?.value === undefined),
+        timestamp: this.tx.status.block_time
       } as Xput;
     });