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 9d66f83996
commit c91714c697
3 changed files with 62 additions and 18 deletions
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 };