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

Alternative transaction unfurl design

Browse Source
This commit is contained in:
Mononaut
2022-08-22 19:12:04 +00:00
parent 80f4c8c4b5
commit 83bcdb320d
7 changed files with 315 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
frontend/src/app/components/transaction/transaction-preview.component.html
View File

@@ -13,104 +13,47 @@
</div>
</div>
<a [routerLink]="['/tx/' | relativeUrl, txId]" class="tx-link">
{{ txId }}
</a>
<p class="text-center mb-0">
<a [routerLink]="['/tx/' | relativeUrl, txId]" class="tx-link">
{{ txId }}
</a>
</p>
<div class="row">
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr *ngIf="tx.status.confirmed; else firstSeen">
<td i18n="block.timestamp">Timestamp</td>
<td>
&lrm;{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}
</td>
</tr>
<ng-template #firstSeen>
<tr>
<td i18n="transaction.first-seen|Transaction first seen">First seen</td>
<td *ngIf="transactionTime > 0; else notSeen">
&lrm;{{ transactionTime * 1000 | date:'yyyy-MM-dd HH:mm' }}
</td>
<ng-template #notSeen>
<td>?</td>
</ng-template>
</tr>
</ng-template>
<tr>
<td class="td-width" i18n="dashboard.latest-transactions.amount">Amount</td>
<td>
<ng-template [ngIf]="(network === 'liquid' || network === 'liquidtestnet') && haveBlindedOutputValues(tx)" [ngIfElse]="defaultAmount" i18n="shared.confidential">Confidential</ng-template>
<ng-template #defaultAmount>
<app-amount [satoshis]="getTotalTxOutput(tx)"></app-amount>
</ng-template>
</td>
</tr>
<tr>
<td i18n="block.size">Size</td>
<td [innerHTML]="'&lrm;' + (tx.size | bytes: 2)"></td>
</tr>
<tr>
<td i18n="block.weight">Weight</td>
<td [innerHTML]="'&lrm;' + (tx.weight | wuBytes: 2)"></td>
</tr>
<tr>
<td i18n="transaction.inputs">Inputs</td>
<td *ngIf="!isCoinbase(tx); else coinbaseInputs">{{ tx.vin.length }}</td>
<ng-template #coinbaseInputs>
<td i18n="transactions-list.coinbase">Coinbase</td>
</ng-template>
</tr>
</tbody>
</table>
<div class="row graph-wrapper">
<tx-bowtie-graph [tx]="tx" [width]="1112" [height]="346" [isLiquid]="isLiquid"></tx-bowtie-graph>
<div class="above-bow">
<p class="field">
<ng-template [ngIf]="isLiquid && haveBlindedOutputValues(tx)" [ngIfElse]="defaultAmount" i18n="shared.confidential">Confidential</ng-template>
<ng-template #defaultAmount>
<app-amount [satoshis]="totalValue"></app-amount>
</ng-template>
</p>
<p class="field" *ngIf="!isCoinbase(tx)">
{{ tx.feePerVsize | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
</p>
</div>
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
<td>{{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
</tr>
<tr *ngIf="!cpfpInfo || (!cpfpInfo.bestDescendant && !cpfpInfo.ancestors.length); else cpfpFee">
<td i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
<td>
{{ tx.feePerVsize | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
<ng-template [ngIf]="tx.status.confirmed">
&nbsp;
<app-tx-fee-rating *ngIf="tx.fee && ((cpfpInfo && !cpfpInfo.bestDescendant && !cpfpInfo.ancestors.length) || !cpfpInfo)" [tx]="tx"></app-tx-fee-rating>
</ng-template>
</td>
</tr>
<ng-template #cpfpFee>
<div class="overlaid">
<ng-container [ngSwitch]="extraData">
<table class="opreturns" *ngSwitchCase="'coinbase'">
<tbody>
<tr>
<td i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
<td>
<div class="effective-fee-container">
{{ tx.effectiveFeePerVsize | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
<ng-template [ngIf]="tx.status.confirmed">
<app-tx-fee-rating class="d-none d-lg-inline ml-2" *ngIf="tx.fee" [tx]="tx"></app-tx-fee-rating>
</ng-template>
</div>
</td>
<td class="label">Coinbase</td>
<td class="message">{{ tx.vin[0].scriptsig | hex2ascii }}</td>
</tr>
</ng-template>
<tr>
<td i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
<td [innerHTML]="'&lrm;' + (tx.weight / 4 | vbytes: 2)"></td>
</tr>
<tr>
<td i18n="transaction.locktime">Locktime</td>
<td [innerHTML]="'&lrm;' + (tx.locktime | number)"></td>
</tr>
<tr>
<td i18n="transaction.outputs">Outputs</td>
<td>{{ tx.vout.length }}</td>
</tr>
</tbody>
</table>
</tbody>
</table>
<table class="opreturns" *ngSwitchCase="'opreturn'">
<tbody>
<ng-container *ngFor="let vout of opReturns.slice(0,3)">
<tr>
<td class="label">OP_RETURN</td>
<td *ngIf="vout.scriptpubkey_asm !== 'OP_RETURN'" class="message">{{ vout.scriptpubkey_asm | hex2ascii }}</td>
</tr>
</ng-container>
</tbody>
</table>
</ng-container>
</div>
</div>
</div>