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

Handle special input/output types in tx diagram

Browse Source
This commit is contained in:
Mononaut 2022-09-17 17:23:44 +00:00
parent 64f3a597a2
commit 0ca33f7b5b
No known key found for this signature in database
GPG Key ID: 61B952CAF4838F94
3 changed files with 62 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,28 +6,51 @@
[style.left]="tooltipPosition.x + 'px'"
[style.top]="tooltipPosition.y + 'px'"
>
<ng-container *ngIf="!line.rest; else restMsg">
<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"><app-amount [satoshis]="line.value"></app-amount></p>
</ng-container>
<ng-template #restMsg>
<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>
<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 #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>

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

@ -1,13 +1,25 @@
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: { type: string, value?: number, index?: number, address?: string, rest?: number } | void;
@Input() line: Xput | void;
@Input() cursorPosition: { x: number, y: number };
tooltipPosition = { x: 0, y: 0 };

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

@ -13,6 +13,10 @@ interface Xput {
index?: number;
address?: string;
rest?: number;
coinbase?: boolean;
pegin?: boolean;
pegout?: string;
confidential?: boolean;
}
const lineLimit = 250;
@ -78,6 +82,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
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;
});
@ -91,6 +97,9 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
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;
});