Merge pull request #3325 from mempool/mononaut/fix-liquid-asset-tooltips

Fix units in flow diagram tooltips for liquid assets

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

@@ -56,9 +56,25 @@
           </ng-container>
       </ng-container>
       <p *ngIf="line.value == null && line.confidential" i18n="shared.confidential">Confidential</p>
-      <p *ngIf="line.value != null"><app-amount [blockConversion]="blockConversion" [satoshis]="line.value"></app-amount></p>
+      <p *ngIf="line.value != null">
+        <ng-template [ngIf]="line.asset && line.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
+          <div *ngIf="assetsMinimal && assetsMinimal[line.asset] else assetNotFound">
+            <ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: line }"></ng-container>
+          </div>
+          <ng-template #assetNotFound>
+            {{ line.value }} <span class="symbol">{{ line.asset | slice : 0 : 7 }}</span>
+          </ng-template>
+        </ng-template>
+        <ng-template #defaultOutput>
+          <app-amount [blockConversion]="blockConversion" [satoshis]="line.value"></app-amount>
+        </ng-template>
+      </p>
       <p *ngIf="line.type !== 'fee' && line.address" class="address">
         <app-truncate [text]="line.address"></app-truncate>
       </p>
   </ng-template>
 </div>
+
+<ng-template #assetBox let-item>
+  {{ item.value / pow(10, assetsMinimal[item.asset][3]) | number: '1.' + assetsMinimal[item.asset][3] + '-' + assetsMinimal[item.asset][3] }} <span class="symbol">{{ assetsMinimal[item.asset][1] }}</span>
+</ng-template>

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

@@ -1,6 +1,8 @@
 import { Component, ElementRef, ViewChild, Input, OnChanges, OnInit } from '@angular/core';
 import { tap } from 'rxjs';
 import { Price, PriceService } from '../../services/price.service';
+import { StateService } from '../../services/state.service';
+import { environment } from '../../../environments/environment';
 
 interface Xput {
   type: 'input' | 'output' | 'fee';
@@ -16,6 +18,7 @@ interface Xput {
   pegout?: string;
   confidential?: boolean;
   timestamp?: number;
+  asset?: string;
 }
 
 @Component({
@@ -27,13 +30,19 @@ export class TxBowtieGraphTooltipComponent implements OnChanges {
   @Input() line: Xput | void;
   @Input() cursorPosition: { x: number, y: number };
   @Input() isConnector: boolean = false;
+  @Input() assetsMinimal: any;
 
   tooltipPosition = { x: 0, y: 0 };
   blockConversion: Price;
 
+  nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;
+
   @ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
 
-  constructor(private priceService: PriceService) {}
+  constructor(
+    private priceService: PriceService,
+    private stateService: StateService,
+  ) {}
 
   ngOnChanges(changes): void {
     if (changes.line?.currentValue) {
@@ -60,4 +69,8 @@ export class TxBowtieGraphTooltipComponent implements OnChanges {
       this.tooltipPosition = { x, y };
     }
   }
+
+  pow(base: number, exponent: number): number {
+    return Math.pow(base, exponent);
+  }
 }

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

@@ -172,5 +172,6 @@
     [line]="hoverLine"
     [cursorPosition]="tooltipPosition"
     [isConnector]="hoverConnector"
+    [assetsMinimal]="assetsMinimal"
   ></app-tx-bowtie-graph-tooltip>
 </div>

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

@@ -6,6 +6,7 @@ import { ReplaySubject, merge, Subscription, of } from 'rxjs';
 import { tap, switchMap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { AssetsService } from '../../services/assets.service';
 
 interface SvgLine {
   path: string;
@@ -30,6 +31,7 @@ interface Xput {
   pegout?: string;
   confidential?: boolean;
   timestamp?: number;
+  asset?: string;
 }
 
 @Component({
@@ -71,6 +73,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   zeroValueWidth = 60;
   zeroValueThickness = 20;
   hasLine: boolean;
+  assetsMinimal: any;
 
   outspendsSubscription: Subscription;
   refreshOutspends$: ReplaySubject<string> = new ReplaySubject();
@@ -95,6 +98,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     private relativeUrlPipe: RelativeUrlPipe,
     private stateService: StateService,
     private apiService: ApiService,
+    private assetsService: AssetsService,
     @Inject(LOCALE_ID) private locale: string,
   ) {
     if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
@@ -105,6 +109,12 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   ngOnInit(): void {
     this.initGraph();
 
+    if (this.network === 'liquid' || this.network === 'liquidtestnet') {
+      this.assetsService.getAssetsMinimalJson$.subscribe((assets) => {
+        this.assetsMinimal = assets;
+      });
+    }
+
     this.outspendsSubscription = merge(
       this.refreshOutspends$
         .pipe(
@@ -162,7 +172,8 @@ 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
+        timestamp: this.tx.status.block_time,
+        asset: v?.asset,
       } as Xput;
     });
 
@@ -182,7 +193,8 @@ 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
+        timestamp: this.tx.status.block_time,
+        asset: v?.prevout?.asset,
       } as Xput;
     });