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);
+  }
 }