machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display more accurate price on prevout/spent outputs in bowtie tooltip

Browse Source
This commit is contained in:
natsoni
2024-03-17 16:25:36 +09:00
parent df107d34b4
commit 2dc6f6ff5a
6 changed files with 157 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,6 +44,28 @@
<span *ngSwitchCase="'fee'" i18n="transaction.fee|Transaction fee">Fee</span>
</ng-container>
<span *ngIf="line.type !== 'fee'"> #{{ line.index + 1 }}</span>
<ng-container [ngSwitch]="line.type">
<span *ngSwitchCase="'input'">
<ng-container *ngIf="line.status?.block_height">
<ng-container *ngIf="line.blockHeight; else noBlockHeight">
<ng-container *ngTemplateOutlet="nBlocksAgo; context:{n: line.blockHeight - line?.status?.block_height, connector: false}"></ng-container>
</ng-container>
<ng-template #noBlockHeight>
<ng-container *ngTemplateOutlet="nBlocksAgo; context:{n: chainTip + 1 - line?.status?.block_height, connector: false}"></ng-container>
</ng-template>
</ng-container>
</span>
<span *ngSwitchCase="'output'">
<ng-container *ngIf="line.blockHeight && line?.spent">
<ng-container *ngIf="line?.status?.block_height; else noBlockHeight">
<ng-container *ngTemplateOutlet="nBlocksLater; context:{n: line?.status?.block_height - line.blockHeight, connector: false}"></ng-container>
</ng-container>
<ng-template #noBlockHeight>
<ng-container *ngTemplateOutlet="nBlocksLater; context:{n: chainTip + 1 - line.blockHeight, connector: false}"></ng-container>
</ng-template>
</ng-container>
</span>
</ng-container>
</p>
<ng-container *ngIf="isConnector && line.txid">
<p>
@@ -51,8 +73,26 @@
<app-truncate [text]="line.txid"></app-truncate>
</p>
<ng-container [ngSwitch]="line.type">
<p *ngSwitchCase="'input'"><span i18n="transaction.output">Output</span>&nbsp; #{{ line.vout + 1 }}</p>
<p *ngSwitchCase="'output'"><span i18n="transaction.input">Input</span>&nbsp; #{{ line.vin + 1 }}</p>
<p *ngSwitchCase="'input'"><span i18n="transaction.output">Output</span>&nbsp; #{{ line.vout + 1 }}
<ng-container *ngIf="line.status?.block_height">
<ng-container *ngIf="line.blockHeight; else noBlockHeight">
<ng-container *ngTemplateOutlet="nBlocksAgo; context:{n: line.blockHeight - line?.status?.block_height, connector: true}"></ng-container>
</ng-container>
<ng-template #noBlockHeight>
<ng-container *ngTemplateOutlet="nBlocksAgo; context:{n: chainTip + 1 - line?.status?.block_height, connector: true}"></ng-container>
</ng-template>
</ng-container>
</p>
<p *ngSwitchCase="'output'"><span i18n="transaction.input">Input</span>&nbsp; #{{ line.vin + 1 }}
<ng-container *ngIf="line.blockHeight">
<ng-container *ngIf="line?.status?.block_height; else noBlockHeight">
<ng-container *ngTemplateOutlet="nBlocksLater; context:{n: line?.status?.block_height - line.blockHeight, connector: true}"></ng-container>
</ng-container>
<ng-template #noBlockHeight>
<ng-container *ngTemplateOutlet="nBlocksLater; context:{n: chainTip + 1 - line.blockHeight, connector: true}"></ng-container>
</ng-template>
</ng-container>
</p>
</ng-container>
</ng-container>
<p *ngIf="line.displayValue == null && line.confidential" i18n="shared.confidential">Confidential</p>
@@ -66,7 +106,7 @@
</ng-template>
</ng-template>
<ng-template #defaultOutput>
<app-amount [blockConversion]="blockConversion" [satoshis]="line.displayValue"></app-amount>
<app-amount [blockConversion]="isConnector ? blockConversions[line?.status?.block_time] : blockConversions[line?.timestamp]" [satoshis]="line.displayValue" [forceBlockConversion]="isConnector && line?.status?.block_time"></app-amount>
</ng-template>
</p>
<p *ngIf="line.type !== 'fee' && line.address" class="address">
@@ -77,4 +117,42 @@
<ng-template #assetBox let-item>
{{ item.displayValue / 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>
<ng-template #oneBlockAgo>
<span i18n="shared.one-block-ago">1 block ago</span>
</ng-template>
<ng-template #oneBlockLater>
<span i18n="shared.one-block-later">1 block later</span>
</ng-template>
<ng-template #inTheSameBlock>
<span i18n="shared.in-the-same-block">in the same block</span>
</ng-template>
<ng-template #nBlocksAgo let-n="n" let-connector="connector">
(<span *ngIf="!connector">prevout </span>
<ng-container *ngIf="n > 1">
<span>{{ n }} <ng-container i18n="shared.n-blocks-ago">blocks ago</ng-container>)</span>
</ng-container>
<ng-container *ngIf="n === 1">
<span><ng-container *ngTemplateOutlet="oneBlockAgo"></ng-container>)</span>
</ng-container>
<ng-container *ngIf="n === 0">
<span><ng-container *ngTemplateOutlet="inTheSameBlock"></ng-container>)</span>
</ng-container>
</ng-template>
<ng-template #nBlocksLater let-n="n" let-connector="connector">
(<span *ngIf="!connector" i18n="shared.spent">spent </span>
<ng-container *ngIf="n > 1">
<span>{{ n }} <ng-container i18n="shared.n-blocks-later">blocks later</ng-container>)</span>
</ng-container>
<ng-container *ngIf="n === 1">
<span><ng-container *ngTemplateOutlet="oneBlockLater"></ng-container>)</span>
</ng-container>
<ng-container *ngIf="n === 0">
<span><ng-container *ngTemplateOutlet="inTheSameBlock"></ng-container>)</span>
</ng-container>
</ng-template>

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

@@ -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();
}
}