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

Show goggles badges on block overview tooltip

Browse Source
This commit is contained in:
Mononaut
2024-03-22 07:13:21 +00:00
parent 00a94f9e3c
commit d6f1b51fa6
6 changed files with 158 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
View File

@@ -12,6 +12,8 @@
[clickable]="!!selectedTx"
[auditEnabled]="auditHighlighting"
[blockConversion]="blockConversion"
[filterFlags]="activeFilterFlags"
[filterMode]="filterMode"
></app-block-overview-tooltip>
<app-block-filters *ngIf="webGlEnabled && showFilters && filtersAvailable" [excludeFilters]="excludeFilters" [cssWidth]="cssWidth" (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
<div *ngIf="!webGlEnabled" class="placeholder">

2
frontend/src/app/components/block-overview-graph/tx-view.ts
View File

@@ -30,6 +30,7 @@ export default class TxView implements TransactionStripped {
feerate: number;
acc?: boolean;
rate?: number;
flags: number;
bigintFlags?: bigint | null = 0b00000100_00000000_00000000_00000000n;
status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'rbf' | 'accelerated';
context?: 'projected' | 'actual';
@@ -59,6 +60,7 @@ export default class TxView implements TransactionStripped {
this.acc = tx.acc;
this.rate = tx.rate;
this.status = tx.status;
this.flags = tx.flags || 0;
this.bigintFlags = tx.flags ? (BigInt(tx.flags) | (this.acc ? TransactionFlags.acceleration : 0n)): 0n;
this.initialised = false;
this.vertexArray = scene.vertexArray;

74
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
View File

@@ -6,61 +6,71 @@
[style.left]="tooltipPosition.x + 'px'"
[style.top]="tooltipPosition.y + 'px'"
>
<table>
<table class="table-fixed">
<tbody>
<tr>
<td class="td-width" i18n="shared.transaction">Transaction</td>
<td>
<td class="label" i18n="shared.transaction">Transaction</td>
<td class="value">
<a [routerLink]="['/tx/' | relativeUrl, txid]">{{ txid | shortenString : 16}}</a>
</td>
</tr>
<tr>
<td class="td-width" i18n="dashboard.latest-transactions.amount">Amount</td>
<td><app-amount [blockConversion]="blockConversion" [satoshis]="value" [noFiat]="true"></app-amount></td>
<td class="label" i18n="dashboard.latest-transactions.amount">Amount</td>
<td class="value"><app-amount [blockConversion]="blockConversion" [satoshis]="value" [noFiat]="true"></app-amount></td>
</tr>
<tr>
<td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
<td>{{ fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> &nbsp; <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="fee"></app-fiat></span></td>
<td class="label" i18n="transaction.fee|Transaction fee">Fee</td>
<td class="value">{{ fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> &nbsp; <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="fee"></app-fiat></span>
</tr>
<tr>
<td class="td-width" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
<td>
<td class="label" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
<td class="value">
<app-fee-rate [fee]="feeRate"></app-fee-rate>
</td>
</tr>
<tr *ngIf="hasEffectiveRate && effectiveRate != null">
<td *ngIf="!this.acceleration" class="td-width" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
<td *ngIf="this.acceleration" class="td-width" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Accelerated fee rate</td>
<td>
<td *ngIf="!this.acceleration" class="label" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
<td *ngIf="this.acceleration" class="label" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Accelerated fee rate</td>
<td class="value">
<app-fee-rate [fee]="effectiveRate"></app-fee-rate>
</td>
</tr>
<tr *only-vsize>
<td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
<td [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
<td class="label" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
<td class="value" [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
</tr>
<tr *only-weight>
<td class="td-width" i18n="transaction.weight|Transaction Weight">Weight</td>
<td [innerHTML]="'&lrm;' + ((vsize * 4) | wuBytes: 2)"></td>
<td class="label" i18n="transaction.weight|Transaction Weight">Weight</td>
<td class="value" [innerHTML]="'&lrm;' + ((vsize * 4) | wuBytes: 2)"></td>
</tr>
<tr *ngIf="auditEnabled && tx && tx.status && tx.status.length">
<td class="td-width" i18n="transaction.audit-status">Audit status</td>
<ng-container [ngSwitch]="tx?.status">
<td *ngSwitchCase="'found'"><span class="badge badge-success" i18n="transaction.audit.match">Match</span></td>
<td *ngSwitchCase="'censored'"><span class="badge badge-danger" i18n="transaction.audit.removed">Removed</span></td>
<td *ngSwitchCase="'missing'"><span class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span></td>
<td *ngSwitchCase="'sigop'"><span class="badge badge-warning" i18n="transaction.audit.sigop">High sigop count</span></td>
<td *ngSwitchCase="'fresh'"><span class="badge badge-warning" i18n="transaction.audit.recently-broadcasted">Recently broadcasted</span></td>
<td *ngSwitchCase="'freshcpfp'"><span class="badge badge-warning" i18n="transaction.audit.recently-cpfped">Recently CPFP'd</span></td>
<td *ngSwitchCase="'added'"><span class="badge badge-warning" i18n="transaction.audit.added">Added</span></td>
<td *ngSwitchCase="'selected'"><span class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span></td>
<td *ngSwitchCase="'rbf'"><span class="badge badge-warning" i18n="transaction.audit.conflicting">Conflicting</span></td>
<td *ngSwitchCase="'accelerated'"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></td>
</ng-container>
<td class="label" i18n="transaction.audit-status">Audit status</td>
<td class="value">
<ng-container [ngSwitch]="tx?.status">
<span *ngSwitchCase="'found'" class="badge badge-success" i18n="transaction.audit.match">Match</span>
<span *ngSwitchCase="'censored'" class="badge badge-danger" i18n="transaction.audit.removed">Removed</span>
<span *ngSwitchCase="'missing'" class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span>
<span *ngSwitchCase="'sigop'" class="badge badge-warning" i18n="transaction.audit.sigop">High sigop count</span>
<span *ngSwitchCase="'fresh'" class="badge badge-warning" i18n="transaction.audit.recently-broadcasted">Recently broadcasted</span>
<span *ngSwitchCase="'freshcpfp'" class="badge badge-warning" i18n="transaction.audit.recently-cpfped">Recently CPFP'd</span>
<span *ngSwitchCase="'added'" class="badge badge-warning" i18n="transaction.audit.added">Added</span>
<span *ngSwitchCase="'selected'" class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span>
<span *ngSwitchCase="'rbf'" class="badge badge-warning" i18n="transaction.audit.conflicting">Conflicting</span>
<span *ngSwitchCase="'accelerated'" class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span>
</ng-container>
</td>
</tr>
<tr *ngIf="!auditEnabled && tx && tx.status === 'accelerated'">
<td class="td-width"></td>
<td><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></td>
{{ activeFilters.rbf }}
<tr *ngIf="(!auditEnabled && tx && tx.status === 'accelerated') || filters.length">
<td colspan="2">
<div class="tags" [class.any-mode]="filterMode === 'or'">
<span class="goggles-icon"><app-svg-images name="goggles" width="100%" height="100%"></app-svg-images></span>
<span *ngIf="!auditEnabled && tx && tx.status === 'accelerated'" class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span>
<ng-container *ngFor="let filter of filters;">
<span class="btn badge filter-tag" [class.matching]="activeFilters[filter.key]">{{ filter.label }}</span>
</ng-container>
</div>
</td>
</tr>
</tbody>
</table>

51
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
View File

@@ -10,6 +10,7 @@
padding: 10px 15px;
text-align: left;
min-width: 320px;
max-width: 320px;
pointer-events: none;
z-index: 11;
@@ -18,8 +19,14 @@
}
}
.td-width {
padding-right: 10px;
th, td {
&.label {
width: 30%;
}
&.value {
width: 70%;
text-align: end;
}
}
.badge.badge-accelerated {
@@ -29,6 +36,46 @@
animation: acceleratePulse 1s infinite;
}
.tags {
display: flex;
flex-wrap: wrap;
row-gap: 0.25em;
margin-top: 0.2em;
max-width: 100%;
.badge {
border-radius: 0.2rem;
padding: 0.2em 0.5em;
margin-right: 0.25em;
}
.filter-tag {
background: #181b2daf;
border: solid 1px #105fb0;
color: white;
transition: background-color 300ms;
&.matching {
background-color: #105fb0;
}
}
&.any-mode {
.filter-tag {
border: solid 1px #1a9436;
&.matching {
background-color: #1a9436;
}
}
}
.goggles-icon {
height: 0.9em;
margin-top: -5px;
margin-right: 0.2em;
}
}
@keyframes acceleratePulse {
0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;}

38
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts
View File

@@ -1,8 +1,8 @@
import { Component, ElementRef, ViewChild, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
import { Component, ElementRef, ViewChild, Input, OnChanges, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Position } from '../../components/block-overview-graph/sprite-types.js';
import { Price } from '../../services/price.service';
import { TransactionStripped } from '../../interfaces/node-api.interface.js';
import { TransactionFlags } from '../../shared/filters.utils';
import { Filter, FilterMode, TransactionFlags, toFilters } from '../../shared/filters.utils';
@Component({
selector: 'app-block-overview-tooltip',
@@ -15,6 +15,8 @@ export class BlockOverviewTooltipComponent implements OnChanges {
@Input() clickable: boolean;
@Input() auditEnabled: boolean = false;
@Input() blockConversion: Price;
@Input() filterFlags: bigint | null = null;
@Input() filterMode: FilterMode = 'and';
txid = '';
fee = 0;
@@ -24,12 +26,16 @@ export class BlockOverviewTooltipComponent implements OnChanges {
effectiveRate;
acceleration;
hasEffectiveRate: boolean = false;
filters: Filter[] = [];
activeFilters: { [key: string]: boolean } = {};
tooltipPosition: Position = { x: 0, y: 0 };
@ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
constructor() {}
constructor(
private cd: ChangeDetectorRef,
) {}
ngOnChanges(changes): void {
if (changes.cursorPosition && changes.cursorPosition.currentValue) {
@@ -48,17 +54,25 @@ export class BlockOverviewTooltipComponent implements OnChanges {
this.tooltipPosition = { x, y };
}
if (changes.tx) {
const tx = changes.tx.currentValue || {};
this.txid = tx.txid || '';
this.fee = tx.fee || 0;
this.value = tx.value || 0;
this.vsize = tx.vsize || 1;
if (this.tx && (changes.tx || changes.filterFlags || changes.filterMode)) {
this.txid = this.tx.txid || '';
this.fee = this.tx.fee || 0;
this.value = this.tx.value || 0;
this.vsize = this.tx.vsize || 1;
this.feeRate = this.fee / this.vsize;
this.effectiveRate = tx.rate;
this.acceleration = tx.acc;
this.effectiveRate = this.tx.rate;
this.acceleration = this.tx.acc;
const txFlags = BigInt(this.tx.flags) || 0n;
this.hasEffectiveRate = Math.abs((this.fee / this.vsize) - this.effectiveRate) > 0.05
|| (tx.bigintFlags && (tx.bigintFlags & (TransactionFlags.cpfp_child | TransactionFlags.cpfp_parent)) > 0n);
|| (txFlags && (txFlags & (TransactionFlags.cpfp_child | TransactionFlags.cpfp_parent)) > 0n);
this.filters = this.tx.flags ? toFilters(txFlags).filter(f => f.tooltip) : [];
this.activeFilters = {}
for (const filter of this.filters) {
if (this.filterFlags && (this.filterFlags & BigInt(filter.flag))) {
this.activeFilters[filter.key] = true;
}
}
this.cd.markForCheck();
}
}
}