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

Highlight url input/output in tx diagram & list

Browse Source
This commit is contained in:
Mononaut 2022-10-04 23:30:14 +00:00
parent 626a1a2977
commit 75fd036ec2
No known key found for this signature in database
GPG Key ID: 61B952CAF4838F94
7 changed files with 40 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -209,6 +209,7 @@
[maxStrands]="graphExpanded ? maxInOut : 24"
[network]="network"
[tooltip]="true"
[inputIndex]="inputIndex" [outputIndex]="outputIndex"
(selectInput)="selectInput($event)"
(selectOutput)="selectOutput($event)"
>

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

@ -122,8 +122,15 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
.pipe(
switchMap((params: ParamMap) => {
const urlMatch = (params.get('id') || '').split(':');
this.txId = urlMatch[0];
this.outputIndex = urlMatch[1] === undefined ? null : parseInt(urlMatch[1], 10);
if (urlMatch.length === 2 && urlMatch[1].length === 64) {
this.inputIndex = parseInt(urlMatch[0], 10);
this.outputIndex = null;
this.txId = urlMatch[1];
} else {
this.txId = urlMatch[0];
this.outputIndex = urlMatch[1] === undefined ? null : parseInt(urlMatch[1], 10);
this.inputIndex = null;
}
this.seoService.setTitle(
$localize`:@@bisq.transaction.browser-title:Transaction: ${this.txId}:INTERPOLATION:`
);

2
frontend/src/app/components/transactions-list/transactions-list.component.html
View File

@ -220,7 +220,7 @@
<fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
</span>
<ng-template #spent>
<a *ngIf="tx._outspends[vindex].txid else outputNoTxId" [routerLink]="['/tx/' | relativeUrl, tx._outspends[vindex].txid]" class="red">
<a *ngIf="tx._outspends[vindex].txid else outputNoTxId" [routerLink]="['/tx/' | relativeUrl, tx._outspends[vindex].vin + ':' + tx._outspends[vindex].txid]" class="red">
<fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
</a>
<ng-template #outputNoTxId>

2
frontend/src/app/components/transactions-list/transactions-list.component.ts
View File

@ -104,7 +104,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
if (changes.inputIndex || changes.outputIndex || changes.rowLimit) {
this.inputRowLimit = Math.max(this.rowLimit, (this.inputIndex || 0) + 3);
this.outputRowLimit = Math.max(this.rowLimit, (this.outputIndex || 0) + 3);
if (this.inputIndex || this.outputIndex) {
if ((this.inputIndex || this.outputIndex) && !changes.transactions) {
setTimeout(() => {
const assetBoxElements = document.getElementsByClassName('assetBox');
if (assetBoxElements && assetBoxElements[0]) {

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

@ -41,6 +41,18 @@
<stop offset="98%" [attr.stop-color]="gradient[0]" />
<stop offset="100%" [attr.stop-color]="gradient[0]" />
</linearGradient>
<linearGradient id="input-highlight-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]" />
<stop offset="30%" stop-color="#1bd8f4" />
<stop offset="100%" [attr.stop-color]="gradient[1]" />
</linearGradient>
<linearGradient id="output-highlight-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" [attr.stop-color]="gradient[1]" />
<stop offset="70%" stop-color="#1bd8f4" />
<stop offset="98%" [attr.stop-color]="gradient[0]" />
<stop offset="100%" [attr.stop-color]="gradient[0]" />
</linearGradient>
<linearGradient id="fee-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" [attr.stop-color]="gradient[1]" />
<stop offset="100%" stop-color="white" />
@ -56,6 +68,7 @@
<path
[attr.d]="input.path"
class="line {{input.class}}"
[class.highlight]="inputData[i].index === inputIndex"
[style]="input.style"
attr.marker-start="url(#{{input.class}}-arrow)"
(pointerover)="onHover($event, 'input', i);"
@ -67,6 +80,7 @@
<path
[attr.d]="output.path"
class="line {{output.class}}"
[class.highlight]="outputData[i].index === outputIndex"
[style]="output.style"
attr.marker-start="url(#{{output.class}}-arrow)"
(pointerover)="onHover($event, 'output', i);"

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

@ -12,6 +12,17 @@
stroke: url(#fee-gradient);
}
&.highlight {
z-index: 8;
cursor: pointer;
&.input {
stroke: url(#input-highlight-gradient);
}
&.output {
stroke: url(#output-highlight-gradient);
}
}
&:hover {
z-index: 10;
cursor: pointer;

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

@ -40,6 +40,8 @@ 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() inputIndex: number;
@Input() outputIndex: number;
@Output() selectInput = new EventEmitter<number>();
@Output() selectOutput = new EventEmitter<number>();
@ -378,7 +380,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
const output = this.tx.vout[index];
const outspend = this.outspends[index];
if (output && outspend && outspend.spent && outspend.txid) {
this.router.navigate([this.relativeUrlPipe.transform('/tx'), outspend.txid], {
this.router.navigate([this.relativeUrlPipe.transform('/tx'), outspend.vin + ':' + outspend.txid], {
queryParamsHandling: 'merge',
fragment: 'flow'
});