Merge pull request #2804 from mempool/mononaut/zero-value-tx-diagrams

Handle zero-value flow diagram edge case
This commit is contained in:
wiz 2022-12-26 20:16:56 +09:00 committed by GitHub
commit 313df79e33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 3 deletions

View File

@ -88,7 +88,7 @@
<stop offset="100%" stop-color="transparent" />
</linearGradient>
</defs>
<path [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
<path *ngIf="hasLine" [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
<ng-container *ngFor="let input of inputs; let i = index">
<path *ngIf="connectors && !inputData[i].coinbase && !inputData[i].pegin"
[attr.d]="input.connectorPath"
@ -106,7 +106,7 @@
(pointerout)="onBlur($event, 'input', i);"
(click)="onClick($event, 'input', inputData[i].index);"
/>
<path
<path *ngIf="!input.zeroValue"
[attr.d]="input.path"
class="line {{input.class}}"
[class.highlight]="inputIndex != null && inputData[i].index === inputIndex"
@ -116,6 +116,16 @@
(pointerout)="onBlur($event, 'input', i);"
(click)="onClick($event, 'input', inputData[i].index);"
/>
<path *ngIf="input.zeroValue"
[attr.d]="input.path"
class="line {{input.class}} zerovalue"
[class.highlight]="inputIndex != null && inputData[i].index === inputIndex"
[class.zerovalue]="input.zeroValue"
[style]="input.style"
(pointerover)="onHover($event, 'input', i);"
(pointerout)="onBlur($event, 'input', i);"
(click)="onClick($event, 'input', inputData[i].index);"
/>
</ng-container>
<ng-container *ngFor="let output of outputs; let i = index">
<path *ngIf="connectors && outspends[outputData[i].index]?.spent"

View File

@ -68,6 +68,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
outspends: Outspend[] = [];
zeroValueWidth = 60;
zeroValueThickness = 20;
hasLine: boolean;
outspendsSubscription: Subscription;
refreshOutspends$: ReplaySubject<string> = new ReplaySubject();
@ -162,7 +163,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
let truncatedInputs = this.tx.vin.map((v, i) => {
return {
type: 'input',
value: v?.prevout?.value,
value: v?.prevout?.value || (v?.is_coinbase && !totalValue ? 0 : undefined),
txid: v.txid,
vout: v.vout,
address: v?.prevout?.scriptpubkey_address || v?.prevout?.scriptpubkey_type?.toUpperCase(),
@ -198,6 +199,9 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.5} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.5}`,
style: `stroke-width: ${this.combinedWeight + 1}; stroke: ${this.gradient[1]}`
};
this.hasLine = this.inputs.reduce((line, put) => line || !put.zeroValue, false)
&& this.outputs.reduce((line, put) => line || !put.zeroValue, false);
}
calcTotalValue(tx: Transaction): number {
@ -278,6 +282,9 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
lineParams.forEach((line, i) => {
if (xputs[i].value === 0) {
line.outerY = lastOuter + (this.zeroValueThickness / 2);
if (xputs.length === 1) {
line.outerY = (this.height / 2);
}
lastOuter += this.zeroValueThickness + spacing;
return;
}