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

Add shapes to flow diagram to indicate spent txos

Browse Source
This commit is contained in:
Mononaut 2022-11-21 12:28:26 +09:00
parent 90912af62d
commit eb2abefabc
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
8 changed files with 67 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/transaction/transaction-preview.component.html
View File

@ -29,7 +29,7 @@
<div class="row graph-wrapper">
<tx-bowtie-graph [tx]="tx" [width]="1112" [height]="346" [network]="network"></tx-bowtie-graph>
<tx-bowtie-graph [tx]="tx" [width]="1132" [height]="346" [network]="network"></tx-bowtie-graph>
<div class="above-bow">
<p class="field pair">
<span [innerHTML]="'&lrm;' + (tx.size | bytes: 2)"></span>

2
frontend/src/app/components/transaction/transaction-preview.component.scss
View File

@ -69,7 +69,7 @@
.graph-wrapper {
position: relative;
background: #181b2d;
padding: 10px;
padding: 10px 0;
padding-bottom: 0;
.above-bow {

1
frontend/src/app/components/transaction/transaction.component.html
View File

@ -209,6 +209,7 @@
[maxStrands]="graphExpanded ? maxInOut : 24"
[network]="network"
[tooltip]="true"
[connectors]="true"
[inputIndex]="inputIndex" [outputIndex]="outputIndex"
>
</tx-bowtie-graph>

2
frontend/src/app/components/transaction/transaction.component.scss
View File

@ -86,7 +86,7 @@
position: relative;
width: 100%;
background: #181b2d;
padding: 10px;
padding: 10px 0;
padding-bottom: 0;
}

2
frontend/src/app/components/transaction/transaction.component.ts
View File

@ -402,7 +402,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
@HostListener('window:resize', ['$event'])
setGraphSize(): void {
if (this.graphContainer) {
this.graphWidth = this.graphContainer.nativeElement.clientWidth - 24;
this.graphWidth = this.graphContainer.nativeElement.clientWidth;
}
}

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

@ -29,6 +29,14 @@
<stop offset="0%" [attr.stop-color]="gradient[1]" />
<stop offset="100%" [attr.stop-color]="gradient[0]" />
</linearGradient>
<linearGradient id="input-connector-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" [attr.stop-color]="gradient[2]" />
<stop offset="80%" [attr.stop-color]="gradient[0]" />
</linearGradient>
<linearGradient id="output-connector-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="20%" [attr.stop-color]="gradient[0]" />
<stop offset="100%" [attr.stop-color]="gradient[2]" />
</linearGradient>
<linearGradient id="input-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" [attr.stop-color]="gradient[0]" />
<stop offset="2%" [attr.stop-color]="gradient[0]" />
@ -65,6 +73,14 @@
</defs>
<path [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"
class="input connector {{input.class}}"
[class.highlight]="inputData[i].index === inputIndex"
(pointerover)="onHover($event, 'input', i);"
(pointerout)="onBlur($event, 'input', i);"
(click)="onClick($event, 'input', inputData[i].index);"
/>
<path
[attr.d]="input.path"
class="line {{input.class}}"
@ -77,6 +93,14 @@
/>
</ng-container>
<ng-container *ngFor="let output of outputs; let i = index">
<path *ngIf="connectors && outspends[outputData[i].index]?.spent"
[attr.d]="output.connectorPath"
class="output connector {{output.class}}"
[class.highlight]="outputData[i].index === outputIndex"
(pointerover)="onHover($event, 'output', i);"
(pointerout)="onBlur($event, 'output', i);"
(click)="onClick($event, 'output', outputData[i].index);"
/>
<path
[attr.d]="output.path"
class="line {{output.class}}"

11
frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
View File

@ -37,4 +37,15 @@
}
}
}
.connector {
stroke: none;
opacity: 0.75;
&.input {
fill: url(#input-connector-gradient);
}
&.output {
fill: url(#output-connector-gradient);
}
}
}

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

@ -11,6 +11,7 @@ interface SvgLine {
path: string;
style: string;
class?: string;
connectorPath?: string;
}
interface Xput {
@ -40,6 +41,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
@Input() minWeight = 2; //
@Input() maxStrands = 24; // number of inputs/outputs to keep fully on-screen.
@Input() tooltip = false;
@Input() connectors = false;
@Input() inputIndex: number;
@Input() outputIndex: number;
@ -59,16 +61,16 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
refreshOutspends$: ReplaySubject<string> = new ReplaySubject();
gradientColors = {
'': ['#9339f4', '#105fb0'],
bisq: ['#9339f4', '#105fb0'],
'': ['#9339f4', '#105fb0', '#9339f433'],
bisq: ['#9339f4', '#105fb0', '#9339f433'],
// liquid: ['#116761', '#183550'],
liquid: ['#09a197', '#0f62af'],
liquid: ['#09a197', '#0f62af', '#09a19733'],
// 'liquidtestnet': ['#494a4a', '#272e46'],
'liquidtestnet': ['#d2d2d2', '#979797'],
'liquidtestnet': ['#d2d2d2', '#979797', '#d2d2d233'],
// testnet: ['#1d486f', '#183550'],
testnet: ['#4edf77', '#10a0af'],
testnet: ['#4edf77', '#10a0af', '#4edf7733'],
// signet: ['#6f1d5d', '#471850'],
signet: ['#d24fc8', '#a84fd2'],
signet: ['#d24fc8', '#a84fd2', '#d24fc833'],
};
gradient: string[] = ['#105fb0', '#105fb0'];
@ -308,13 +310,14 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
return {
path: this.makePath(side, line.outerY, line.innerY, line.thickness, line.offset, pad + maxOffset),
style: this.makeStyle(line.thickness, xputs[i].type),
class: xputs[i].type
class: xputs[i].type,
connectorPath: this.connectors ? this.makeConnectorPath(side, line.outerY, line.innerY, line.thickness): null,
};
});
}
makePath(side: 'in' | 'out', outer: number, inner: number, weight: number, offset: number, pad: number): string {
const start = (weight * 0.5);
const start = (weight * 0.5) + 10;
const curveStart = Math.max(start + 1, pad - offset);
const end = this.width / 2 - (this.midWidth * 0.9) + 1;
const curveEnd = end - offset - 10;
@ -332,6 +335,22 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
}
}
makeConnectorPath(side: 'in' | 'out', y: number, inner, weight: number): string {
const halfWidth = weight * 0.5;
const offset = Math.max(2, halfWidth * 0.2);
// align with for svg horizontal gradient bug correction
if (Math.round(y) === Math.round(inner)) {
y -= 1;
}
if (side === 'in') {
return `M ${10 - offset} ${y - halfWidth} L ${halfWidth + 10 - offset} ${y} L ${10 - offset} ${y + halfWidth} L -10 ${ y + halfWidth} L -10 ${y - halfWidth}`;
} else {
return `M ${this.width - halfWidth - 10 + offset} ${y - halfWidth} L ${this.width - 10 + offset} ${y} L ${this.width - halfWidth - 10 + offset} ${y + halfWidth} L ${this.width + 10} ${ y + halfWidth} L ${this.width + 10} ${y - halfWidth}`;
}
}
makeStyle(minWeight, type): string {
if (type === 'fee') {
return `stroke-width: ${minWeight}`;