diff --git a/frontend/src/app/components/amount/amount.component.html b/frontend/src/app/components/amount/amount.component.html index 34f9be8ae..b611b098c 100644 --- a/frontend/src/app/components/amount/amount.component.html +++ b/frontend/src/app/components/amount/amount.component.html @@ -8,8 +8,13 @@ }} - {{ addPlus && satoshis >= 0 ? '+' : '' }}{{ (conversions[currency] > -1 ? conversions[currency] : 0) * satoshis / 100000000 | fiatCurrency : digitsInfo : currency }} - + + {{ addPlus && satoshis >= 0 ? '+' : '' }}{{ (conversions[currency] > -1 ? conversions[currency] : 0) * satoshis / 100000000 | fiatCurrency : digitsInfo : currency }} + + + + + {{ 0 | fiatCurrency : digitsInfo : currency }} diff --git a/frontend/src/app/components/amount/amount.component.ts b/frontend/src/app/components/amount/amount.component.ts index 9c779265c..9d0337574 100644 --- a/frontend/src/app/components/amount/amount.component.ts +++ b/frontend/src/app/components/amount/amount.component.ts @@ -24,6 +24,7 @@ export class AmountComponent implements OnInit, OnDestroy { @Input() addPlus = false; @Input() blockConversion: Price; @Input() forceBtc: boolean = false; + @Input() forceBlockConversion: boolean = false; // true = displays fiat price as 0 if blockConversion is undefined instead of falling back to conversions constructor( private stateService: StateService, 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 1bc141f49..97aabd7fe 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 @@ -44,6 +44,28 @@ Fee #{{ line.index + 1 }} + + + + + + + + + + + + + + + + + + + + + +

@@ -51,8 +73,26 @@

-

Output  #{{ line.vout + 1 }}

-

Input  #{{ line.vin + 1 }}

+

Output  #{{ line.vout + 1 }} + + + + + + + + +

+

Input  #{{ line.vin + 1 }} + + + + + + + + +

Confidential

@@ -66,7 +106,7 @@ - +

@@ -77,4 +117,42 @@ {{ item.displayValue / pow(10, assetsMinimal[item.asset][3]) | number: '1.' + assetsMinimal[item.asset][3] + '-' + assetsMinimal[item.asset][3] }} {{ assetsMinimal[item.asset][1] }} + + + + 1 block ago + + + + 1 block later + + + + in the same block + + + + (prevout + + {{ n }} blocks ago) + + + ) + + + ) + + + + + (spent + + {{ n }} blocks later) + + + ) + + + ) + \ 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 aa98779ca..3e0e514af 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 @@ -2,6 +2,7 @@ import { Component, ElementRef, ViewChild, Input, OnChanges, OnInit } from '@ang import { Subscription, of, switchMap, tap } from 'rxjs'; import { Price, PriceService } from '../../services/price.service'; import { StateService } from '../../services/state.service'; +import { ApiService } from '../../services/api.service'; import { environment } from '../../../environments/environment'; interface Xput { @@ -19,6 +20,9 @@ interface Xput { pegout?: string; confidential?: boolean; timestamp?: number; + blockHeight?: number; + status?: any; + spent?: boolean; asset?: string; } @@ -34,8 +38,14 @@ export class TxBowtieGraphTooltipComponent implements OnChanges { @Input() assetsMinimal: any; tooltipPosition = { x: 0, y: 0 }; - blockConversion: Price; + blockConversions: { [timestamp: number]: Price } = {}; + inputStatus: { [index: number]: any } = {}; + currency: string; + viewFiat: boolean; + chainTip: number; currencyChangeSubscription: Subscription; + viewFiatSubscription: Subscription; + chainTipSubscription: Subscription; nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId; @@ -44,18 +54,37 @@ export class TxBowtieGraphTooltipComponent implements OnChanges { constructor( private priceService: PriceService, private stateService: StateService, + private apiService: ApiService, ) {} + ngOnInit(): void { + this.currencyChangeSubscription = this.stateService.fiatCurrency$.subscribe(currency => { + this.currency = currency; + this.blockConversions = {}; + this.inputStatus = {}; + }); + this.viewFiatSubscription = this.stateService.viewFiat$.subscribe(viewFiat => this.viewFiat = viewFiat); + this.chainTipSubscription = this.stateService.chainTip$.subscribe(tip => this.chainTip = tip); + } + ngOnChanges(changes): void { if (changes.line?.currentValue) { - this.currencyChangeSubscription?.unsubscribe(); - this.currencyChangeSubscription = this.stateService.fiatCurrency$.pipe( - switchMap((currency) => { - return changes.line?.currentValue.timestamp ? this.priceService.getBlockPrice$(changes.line?.currentValue.timestamp, true, currency).pipe( - tap((price) => this.blockConversion = price), - ) : of(undefined); + if (changes.line.currentValue.type === 'input') { + if (!this.inputStatus[changes.line.currentValue.index]) { + this.apiService.getTransactionStatus$(changes.line.currentValue.txid).pipe( + tap((status) => { + changes.line.currentValue.status = status; + this.inputStatus[changes.line.currentValue.index] = status; + this.fetchPrices(changes); }) ).subscribe(); + } else { + changes.line.currentValue.status = this.inputStatus[changes.line.currentValue.index]; + this.fetchPrices(changes); + } + } else { + this.fetchPrices(changes); + } } if (changes.cursorPosition && changes.cursorPosition.currentValue) { @@ -75,7 +104,32 @@ export class TxBowtieGraphTooltipComponent implements OnChanges { } } + fetchPrices(changes: any) { + if (!this.currency || !this.viewFiat) return; + if (this.isConnector) { // If the tooltip is on a connector, we fetch prices at the time of the input / output + if (['input', 'output'].includes(changes.line.currentValue.type) && changes.line.currentValue?.status?.block_time && !this.blockConversions?.[changes.line.currentValue?.status.block_time]) { + this.priceService.getBlockPrice$(changes.line.currentValue?.status.block_time, true, this.currency).pipe( + tap((price) => this.blockConversions[changes.line.currentValue.status.block_time] = price), + ).subscribe(); + } + } else { // If the tooltip is on the transaction itself, we fetch prices at the time of the transaction + if (changes.line.currentValue.timestamp && !this.blockConversions[changes.line.currentValue.timestamp]) { + if (changes.line.currentValue.timestamp) { + this.priceService.getBlockPrice$(changes.line.currentValue.timestamp, true, this.currency).pipe( + tap((price) => this.blockConversions[changes.line.currentValue.timestamp] = price), + ).subscribe(); + } + } + } + } + pow(base: number, exponent: number): number { return Math.pow(base, exponent); } + + ngOnDestroy(): void { + this.currencyChangeSubscription?.unsubscribe(); + this.viewFiatSubscription?.unsubscribe(); + this.chainTipSubscription?.unsubscribe(); + } } 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 043c9ea3b..9aa9fb275 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 @@ -34,6 +34,7 @@ interface Xput { pegout?: string; confidential?: boolean; timestamp?: number; + blockHeight?: number; asset?: string; } @@ -178,6 +179,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { pegout: v?.pegout?.scriptpubkey_address, confidential: (this.isLiquid && v?.value === undefined), timestamp: this.tx.status.block_time, + blockHeight: this.tx.status.block_height, asset: v?.asset, } as Xput; }); @@ -200,6 +202,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { pegin: v?.is_pegin, confidential: (this.isLiquid && v?.prevout?.value === undefined), timestamp: this.tx.status.block_time, + blockHeight: this.tx.status.block_height, asset: v?.prevout?.asset, } as Xput; }); diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index 8b3b693f3..2d5ec03d4 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -240,6 +240,10 @@ export class ApiService { return this.httpClient.post(this.apiBaseUrl + this.apiBasePath + '/api/tx', hexPayload, { responseType: 'text' as 'json'}); } + getTransactionStatus$(txid: string): Observable { + return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + '/api/tx/' + txid + '/status'); + } + listPools$(interval: string | undefined) : Observable { return this.httpClient.get( this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pools` +