From a8ac6aedf75aeba51b506cff936bc91eaa8d46d7 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sun, 12 Mar 2023 17:36:45 +0900 Subject: [PATCH] Fix units in flow diagram tooltips for liquid assets --- .../tx-bowtie-graph-tooltip.component.html | 18 +++++++++++++++++- .../tx-bowtie-graph-tooltip.component.ts | 15 ++++++++++++++- .../tx-bowtie-graph.component.html | 1 + .../tx-bowtie-graph.component.ts | 16 ++++++++++++++-- 4 files changed, 46 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html index 395c38f88..427cc7c7c 100644 --- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html +++ b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html @@ -56,9 +56,25 @@

Confidential

-

+

+ +

+ +
+ + {{ line.value }} {{ line.asset | slice : 0 : 7 }} + + + + + +

+ + + {{ item.value / pow(10, assetsMinimal[item.asset][3]) | number: '1.' + assetsMinimal[item.asset][3] + '-' + assetsMinimal[item.asset][3] }} {{ assetsMinimal[item.asset][1] }} + \ No newline at end of file diff --git a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts index b02637ef0..bd669b897 100644 --- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts +++ b/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; - 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); + } } diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html index 9360899e6..14e49e21b 100644 --- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html +++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html @@ -172,5 +172,6 @@ [line]="hoverLine" [cursorPosition]="tooltipPosition" [isConnector]="hoverConnector" + [assetsMinimal]="assetsMinimal" > diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts index b402ddea8..18f13cc15 100644 --- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts +++ b/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 = 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; });