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

Merge pull request #2562 from mononaut/tx-page-diagram

Browse Source 
Tx page diagram
This commit is contained in:
wiz 2022-09-19 05:29:18 +09:00 committed by GitHub
commit 5c8d28bf1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 404 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -190,6 +190,24 @@
<br>
<div class="title">
<h2 i18n="transaction.diagram|Transaction diagram">Diagram</h2>
</div>
<div class="box">
<div class="graph-container" #graphContainer>
<tx-bowtie-graph [tx]="tx" [width]="graphWidth" [height]="graphExpanded ? (maxInOut * 15) : graphHeight" [maxStrands]="graphExpanded ? maxInOut : 24" [network]="network" [tooltip]="true"></tx-bowtie-graph>
</div>
<div class="toggle-wrapper" *ngIf="maxInOut > 24">
<button class="btn btn-sm btn-primary graph-toggle" (click)="expandGraph();" *ngIf="!graphExpanded; else collapseBtn"><span i18n="show-more">Show more</span></button>
<ng-template #collapseBtn>
<button class="btn btn-sm btn-primary graph-toggle" (click)="collapseGraph();"><span i18n="show-less">Show less</span></button>
</ng-template>
</div>
</div>
<br>
<div class="title float-left">
<h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
</div>
@ -283,6 +301,36 @@
<br>
<div class="title">
<h2 i18n="transaction.diagram|Transaction diagram">Diagram</h2>
</div>
<div class="box">
<div class="graph-container" #graphContainer style="visibility: hidden;"></div>
<div class="row">
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br>
<div class="title">
<h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
</div>

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

@ -73,6 +73,24 @@
}
}
.graph-container {
position: relative;
width: 100%;
background: #181b2d;
padding: 10px;
padding-bottom: 0;
}
.toggle-wrapper {
width: 100%;
text-align: center;
margin: 1.25em 0 0;
}
.graph-toggle {
margin: auto;
}
@media (max-width: 767.98px) {
.mobile-bottomcol {
margin-top: 15px;

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

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Component, OnInit, AfterViewInit, OnDestroy, HostListener, ViewChild, ElementRef } from '@angular/core';
import { ElectrsApiService } from '../../services/electrs-api.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import {
@ -24,7 +24,7 @@ import { LiquidUnblinding } from './liquid-ublinding';
templateUrl: './transaction.component.html',
styleUrls: ['./transaction.component.scss'],
})
export class TransactionComponent implements OnInit, OnDestroy {
export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
network = '';
tx: Transaction;
txId: string;
@ -47,6 +47,14 @@ export class TransactionComponent implements OnInit, OnDestroy {
timeAvg$: Observable<number>;
liquidUnblinding = new LiquidUnblinding();
outputIndex: number;
graphExpanded: boolean = false;
graphWidth: number = 1000;
graphHeight: number = 360;
maxInOut: number = 0;
tooltipPosition: { x: number, y: number };
@ViewChild('graphContainer')
graphContainer: ElementRef;
constructor(
private route: ActivatedRoute,
@ -167,6 +175,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
this.waitingForTransaction = false;
this.setMempoolBlocksSubscription();
this.websocketService.startTrackTransaction(tx.txid);
this.setupGraph();
if (!tx.status.confirmed && tx.firstSeen) {
this.transactionTime = tx.firstSeen;
@ -222,6 +231,10 @@ export class TransactionComponent implements OnInit, OnDestroy {
});
}
ngAfterViewInit(): void {
this.setGraphSize();
}
handleLoadElectrsTransactionError(error: any): Observable<any> {
if (error.status === 404 && /^[a-fA-F0-9]{64}$/.test(this.txId)) {
this.websocketService.startMultiTrackTransaction(this.txId);
@ -284,6 +297,26 @@ export class TransactionComponent implements OnInit, OnDestroy {
return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
}
setupGraph() {
this.maxInOut = Math.min(250, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1));
this.graphHeight = Math.min(360, this.maxInOut * 80);
}
expandGraph() {
this.graphExpanded = true;
}
collapseGraph() {
this.graphExpanded = false;
}
@HostListener('window:resize', ['$event'])
setGraphSize(): void {
if (this.graphContainer) {
this.graphWidth = this.graphContainer.nativeElement.clientWidth - 24;
}
}
ngOnDestroy() {
this.subscription.unsubscribe();
this.fetchCpfpSubscription.unsubscribe();

56
frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html Normal file
View File

@ -0,0 +1,56 @@
<div
#tooltip
*ngIf="line"
class="bowtie-graph-tooltip"
[style.visibility]="line ? 'visible' : 'hidden'"
[style.left]="tooltipPosition.x + 'px'"
[style.top]="tooltipPosition.y + 'px'"
>
<ng-container *ngIf="line.rest; else coinbase">
<span>{{ line.rest }} </span>
<ng-container [ngSwitch]="line.type">
<span *ngSwitchCase="'input'" i18n="transaction.other-inputs">other inputs</span>
<span *ngSwitchCase="'output'" i18n="transaction.other-outputs">other outputs</span>
</ng-container>
</ng-container>
<ng-template #coinbase>
<ng-container *ngIf="line.coinbase; else pegin">
<p>Coinbase</p>
</ng-container>
</ng-template>
<ng-template #pegin>
<ng-container *ngIf="line.pegin; else pegout">
<p>Peg In</p>
</ng-container>
</ng-template>
<ng-template #pegout>
<ng-container *ngIf="line.pegout; else normal">
<p>Peg Out</p>
<p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
<p class="address">
<span class="first">{{ line.pegout.slice(0, -4) }}</span>
<span class="last-four">{{ line.pegout.slice(-4) }}</span>
</p>
</ng-container>
</ng-template>
<ng-template #normal>
<p>
<ng-container [ngSwitch]="line.type">
<span *ngSwitchCase="'input'" i18n="transaction.input">Input</span>
<span *ngSwitchCase="'output'" i18n="transaction.output">Output</span>
<span *ngSwitchCase="'fee'" i18n="transaction.fee">Fee</span>
</ng-container>
<span *ngIf="line.type !== 'fee'"> #{{ line.index }}</span>
</p>
<p *ngIf="line.value == null && line.confidential" i18n="shared.confidential">Confidential</p>
<p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
<p *ngIf="line.type !== 'fee' && line.address" class="address">
<span class="first">{{ line.address.slice(0, -4) }}</span>
<span class="last-four">{{ line.address.slice(-4) }}</span>
</p>
</ng-template>
</div>

38
frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss Normal file
View File

@ -0,0 +1,38 @@
.bowtie-graph-tooltip {
position: absolute;
background: rgba(#11131f, 0.95);
border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: #b1b1b1;
padding: 10px 15px;
text-align: left;
pointer-events: none;
max-width: 300px;
p {
margin: 0;
white-space: nowrap;
}
.address {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: flex-start;
.first {
flex-grow: 0;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
margin-right: -2px;
}
.last-four {
flex-shrink: 0;
flex-grow: 0;
}
}
}

48
frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts Normal file
View File

@ -0,0 +1,48 @@
import { Component, ElementRef, ViewChild, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
import { TransactionStripped } from 'src/app/interfaces/websocket.interface';
interface Xput {
type: 'input' | 'output' | 'fee';
value?: number;
index?: number;
address?: string;
rest?: number;
coinbase?: boolean;
pegin?: boolean;
pegout?: string;
confidential?: boolean;
}
@Component({
selector: 'app-tx-bowtie-graph-tooltip',
templateUrl: './tx-bowtie-graph-tooltip.component.html',
styleUrls: ['./tx-bowtie-graph-tooltip.component.scss'],
})
export class TxBowtieGraphTooltipComponent implements OnChanges {
@Input() line: Xput | void;
@Input() cursorPosition: { x: number, y: number };
tooltipPosition = { x: 0, y: 0 };
@ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
constructor() {}
ngOnChanges(changes): void {
if (changes.cursorPosition && changes.cursorPosition.currentValue) {
let x = Math.max(10, changes.cursorPosition.currentValue.x - 50);
let y = changes.cursorPosition.currentValue.y + 20;
if (this.tooltipElement) {
const elementBounds = this.tooltipElement.nativeElement.getBoundingClientRect();
const parentBounds = this.tooltipElement.nativeElement.offsetParent.getBoundingClientRect();
if ((parentBounds.left + x + elementBounds.width) > parentBounds.right) {
x = Math.max(0, parentBounds.width - elementBounds.width - 10);
}
if (y + elementBounds.height > parentBounds.height) {
y = y - elementBounds.height - 20;
}
}
this.tooltipPosition = { x, y };
}
}
}

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

@ -1,4 +1,5 @@
<svg *ngIf="inputs && outputs" class="bowtie" [attr.height]="(height + 10) + 'px'" [attr.width]="width + 'px'">
<div class="bowtie-graph">
<svg *ngIf="inputs && outputs" class="bowtie" [attr.height]="(height + 10) + 'px'" [attr.width]="width + 'px'">
<defs>
<marker id="input-arrow" viewBox="-5 -5 10 10"
refX="0" refY="0"
@ -28,6 +29,22 @@
<stop offset="0%" [attr.stop-color]="gradient[1]" />
<stop offset="100%" [attr.stop-color]="gradient[0]" />
</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]" />
<stop offset="30%" stop-color="white" />
<stop offset="100%" [attr.stop-color]="gradient[1]" />
</linearGradient>
<linearGradient id="output-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" [attr.stop-color]="gradient[1]" />
<stop offset="70%" stop-color="white" />
<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" />
</linearGradient>
<linearGradient id="fee-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" [attr.stop-color]="gradient[1]" />
<stop offset="50%" [attr.stop-color]="gradient[1]" />
@ -35,10 +52,31 @@
</linearGradient>
</defs>
<path [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
<ng-container *ngFor="let input of inputs">
<path [attr.d]="input.path" class="line {{input.class}}" [style]="input.style" attr.marker-start="url(#{{input.class}}-arrow)"/>
<ng-container *ngFor="let input of inputs; let i = index">
<path
[attr.d]="input.path"
class="line {{input.class}}"
[style]="input.style"
attr.marker-start="url(#{{input.class}}-arrow)"
(pointerover)="onHover($event, 'input', i);"
(pointerout)="onBlur($event, 'input', i);"
/>
</ng-container>
<ng-container *ngFor="let output of outputs">
<path [attr.d]="output.path" class="line {{output.class}}" [style]="output.style" attr.marker-start="url(#{{output.class}}-arrow)" />
<ng-container *ngFor="let output of outputs; let i = index">
<path
[attr.d]="output.path"
class="line {{output.class}}"
[style]="output.style"
attr.marker-start="url(#{{output.class}}-arrow)"
(pointerover)="onHover($event, 'output', i);"
(pointerout)="onBlur($event, 'output', i);"
/>
</ng-container>
</svg>
</svg>
<app-tx-bowtie-graph-tooltip
*ngIf=[tooltip]
[line]="hoverLine"
[cursorPosition]="tooltipPosition"
></app-tx-bowtie-graph-tooltip>
</div>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

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

@ -11,5 +11,19 @@
&.fee {
stroke: url(#fee-gradient);
}
&:hover {
z-index: 10;
cursor: pointer;
&.input {
stroke: url(#input-hover-gradient);
}
&.output {
stroke: url(#output-hover-gradient);
}
&.fee {
stroke: url(#fee-hover-gradient);
}
}
}
}

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

@ -1,4 +1,4 @@
import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { Component, OnInit, Input, OnChanges, HostListener } from '@angular/core';
import { Transaction } from '../../interfaces/electrs.interface';
interface SvgLine {
@ -10,6 +10,13 @@ interface SvgLine {
interface Xput {
type: 'input' | 'output' | 'fee';
value?: number;
index?: number;
address?: string;
rest?: number;
coinbase?: boolean;
pegin?: boolean;
pegout?: string;
confidential?: boolean;
}
const lineLimit = 250;
@ -27,12 +34,17 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
@Input() combinedWeight = 100;
@Input() minWeight = 2; //
@Input() maxStrands = 24; // number of inputs/outputs to keep fully on-screen.
@Input() tooltip = false;
inputData: Xput[];
outputData: Xput[];
inputs: SvgLine[];
outputs: SvgLine[];
middle: SvgLine;
midWidth: number;
isLiquid: boolean = false;
hoverLine: Xput | void = null;
tooltipPosition = { x: 0, y: 0 };
gradientColors = {
'': ['#9339f4', '#105fb0'],
@ -59,34 +71,56 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
ngOnChanges(): void {
this.isLiquid = (this.network === 'liquid' || this.network === 'liquidtestnet');
this.gradient = this.gradientColors[this.network];
this.midWidth = Math.min(50, Math.ceil(this.width / 20));
this.initGraph();
}
initGraph(): void {
const totalValue = this.calcTotalValue(this.tx);
let voutWithFee = this.tx.vout.map(v => { return { type: v.scriptpubkey_type === 'fee' ? 'fee' : 'output', value: v?.value } as Xput; });
let voutWithFee = this.tx.vout.map(v => {
return {
type: v.scriptpubkey_type === 'fee' ? 'fee' : 'output',
value: v?.value,
address: v?.scriptpubkey_address || v?.scriptpubkey_type?.toUpperCase(),
pegout: v?.pegout?.scriptpubkey_address,
confidential: (this.isLiquid && v?.value === undefined),
} as Xput;
});
if (this.tx.fee && !this.isLiquid) {
voutWithFee.unshift({ type: 'fee', value: this.tx.fee });
}
const outputCount = voutWithFee.length;
let truncatedInputs = this.tx.vin.map(v => { return {type: 'input', value: v?.prevout?.value } as Xput; });
let truncatedInputs = this.tx.vin.map(v => {
return {
type: 'input',
value: v?.prevout?.value,
address: v?.prevout?.scriptpubkey_address || v?.prevout?.scriptpubkey_type?.toUpperCase(),
coinbase: v?.is_coinbase,
pegin: v?.is_pegin,
confidential: (this.isLiquid && v?.prevout?.value === undefined),
} as Xput;
});
if (truncatedInputs.length > lineLimit) {
const valueOfRest = truncatedInputs.slice(lineLimit).reduce((r, v) => {
return r + (v.value || 0);
}, 0);
truncatedInputs = truncatedInputs.slice(0, lineLimit);
truncatedInputs.push({ type: 'input', value: valueOfRest });
truncatedInputs.push({ type: 'input', value: valueOfRest, rest: this.tx.vin.length - lineLimit });
}
if (voutWithFee.length > lineLimit) {
const valueOfRest = voutWithFee.slice(lineLimit).reduce((r, v) => {
return r + (v.value || 0);
}, 0);
voutWithFee = voutWithFee.slice(0, lineLimit);
voutWithFee.push({ type: 'output', value: valueOfRest });
voutWithFee.push({ type: 'output', value: valueOfRest, rest: outputCount - lineLimit });
}
this.inputData = truncatedInputs;
this.outputData = voutWithFee;
this.inputs = this.initLines('in', truncatedInputs, totalValue, this.maxStrands);
this.outputs = this.initLines('out', voutWithFee, totalValue, this.maxStrands);
@ -195,9 +229,32 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
makeStyle(minWeight, type): string {
if (type === 'fee') {
return `stroke-width: ${minWeight}; stroke: url(#fee-gradient)`;
return `stroke-width: ${minWeight}`;
} else {
return `stroke-width: ${minWeight}`;
}
}
@HostListener('pointermove', ['$event'])
onPointerMove(event) {
this.tooltipPosition = { x: event.offsetX, y: event.offsetY };
}
onHover(event, side, index): void {
if (side === 'input') {
this.hoverLine = {
...this.inputData[index],
index
};
} else {
this.hoverLine = {
...this.outputData[index],
index
};
}
}
onBlur(event, side, index): void {
this.hoverLine = null;
}
}

3
frontend/src/app/shared/shared.module.ts
View File

@ -61,6 +61,7 @@ import { FeesBoxComponent } from '../components/fees-box/fees-box.component';
import { DifficultyComponent } from '../components/difficulty/difficulty.component';
import { TermsOfServiceComponent } from '../components/terms-of-service/terms-of-service.component';
import { TxBowtieGraphComponent } from '../components/tx-bowtie-graph/tx-bowtie-graph.component';
import { TxBowtieGraphTooltipComponent } from '../components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component';
import { PrivacyPolicyComponent } from '../components/privacy-policy/privacy-policy.component';
import { TrademarkPolicyComponent } from '../components/trademark-policy/trademark-policy.component';
import { PushTransactionComponent } from '../components/push-transaction/push-transaction.component';
@ -134,6 +135,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
FeesBoxComponent,
DifficultyComponent,
TxBowtieGraphComponent,
TxBowtieGraphTooltipComponent,
TermsOfServiceComponent,
PrivacyPolicyComponent,
TrademarkPolicyComponent,
@ -236,6 +238,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
FeesBoxComponent,
DifficultyComponent,
TxBowtieGraphComponent,
TxBowtieGraphTooltipComponent,
TermsOfServiceComponent,
PrivacyPolicyComponent,
TrademarkPolicyComponent,