329 lines
21 KiB
HTML
329 lines
21 KiB
HTML
<ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn">
|
|
<div *ngIf="!transactionPage" class="header-bg box tx-page-container">
|
|
<a class="tx-link" [routerLink]="['/tx/' | relativeUrl, tx.txid]">
|
|
<app-truncate [text]="tx.txid"></app-truncate>
|
|
</a>
|
|
<div>
|
|
<ng-template [ngIf]="tx.status.confirmed">‎{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}</ng-template>
|
|
<ng-template [ngIf]="!tx.status.confirmed && tx.firstSeen">
|
|
<i><app-time-since [time]="tx.firstSeen" [fastRender]="true"></app-time-since></i>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-bg box" infiniteScroll [alwaysCallback]="true" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [attr.data-cy]="'tx-' + i">
|
|
|
|
<div *ngIf="errorUnblinded" class="error-unblinded">{{ errorUnblinded }}</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<table class="table table-fixed table-borderless smaller-text table-sm table-tx-vin">
|
|
<tbody>
|
|
<ng-template ngFor let-vin let-vindex="index" [ngForOf]="tx.vin.slice(0, getVinLimit(tx))" [ngForTrackBy]="trackByIndexFn">
|
|
<tr [ngClass]="{
|
|
'assetBox': (assetsMinimal && vin.prevout && assetsMinimal[vin.prevout.asset] && !vin.is_coinbase && vin.prevout.scriptpubkey_address && tx._unblinded) || inputIndex === vindex,
|
|
'highlight': vin.prevout?.scriptpubkey_address === this.address && this.address !== ''
|
|
}">
|
|
<td class="arrow-td">
|
|
<ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
|
|
<span class="grey">
|
|
<fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
|
|
</span>
|
|
</ng-template>
|
|
<ng-template #hasPrevout>
|
|
<ng-template [ngIf]="vin.is_pegin" [ngIfElse]="defaultPrevout">
|
|
<a *ngIf="stateService.env.BASE_MODULE === 'liquid'; else localPegInLink" [attr.href]="'https://mempool.space/tx/' + vin.txid" class="red">
|
|
<fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
|
|
</a>
|
|
<ng-template #localPegInLink>
|
|
<a [routerLink]="['/tx/', vin.txid]" class="red">
|
|
<fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
|
|
</a>
|
|
</ng-template>
|
|
</ng-template>
|
|
<ng-template #defaultPrevout>
|
|
<a [routerLink]="['/tx/' | relativeUrl, vin.txid]" [fragment]="'vout=' + vin.vout" class="red">
|
|
<fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
|
|
</a>
|
|
</ng-template>
|
|
</ng-template>
|
|
</td>
|
|
<td class="address-cell">
|
|
<div [ngSwitch]="true">
|
|
<ng-container *ngSwitchCase="vin.is_coinbase"><span i18n="transactions-list.coinbase">Coinbase</span><ng-template [ngIf]="network !== 'liquid' && network !== 'liquidtestnet'"> <span i18n="transactions-list.newly-generated-coins">(Newly Generated Coins)</span></ng-template><br /><a placement="bottom" [ngbTooltip]="vin.scriptsig | hex2ascii"><span class="badge badge-secondary scriptmessage longer">{{ vin.scriptsig | hex2ascii }}</span></a></ng-container>
|
|
<ng-container *ngSwitchCase="vin.is_pegin">
|
|
<span i18n="transactions-list.peg-in">Peg-in</span>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="vin.prevout && vin.prevout.scriptpubkey_type === 'p2pk'">
|
|
<span>P2PK</span>
|
|
</ng-container>
|
|
<ng-container *ngSwitchDefault>
|
|
<ng-template [ngIf]="!vin.prevout" [ngIfElse]="defaultAddress">
|
|
<span *ngIf="vin.lazy; else defaultNoPrevout" class="skeleton-loader"></span>
|
|
<ng-template #defaultNoPrevout>
|
|
<span>{{ vin.issuance ? 'Issuance' : 'UNKNOWN' }}</span>
|
|
</ng-template>
|
|
</ng-template>
|
|
<ng-template #defaultAddress>
|
|
<a class="address" *ngIf="vin.prevout.scriptpubkey_address; else vinScriptPubkeyType" [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
|
|
<app-truncate [text]="vin.prevout.scriptpubkey_address" [lastChars]="8"></app-truncate>
|
|
</a>
|
|
<ng-template #vinScriptPubkeyType>
|
|
{{ vin.prevout.scriptpubkey_type?.toUpperCase() }}
|
|
</ng-template>
|
|
<div>
|
|
<app-address-labels [vin]="vin" [channel]="tx._channels && tx._channels.inputs[vindex] || null"></app-address-labels>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container>
|
|
</div>
|
|
</td>
|
|
<td class="text-right nowrap amount">
|
|
<ng-template [ngIf]="vin.prevout && vin.prevout.asset && vin.prevout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
|
|
<div *ngIf="assetsMinimal && assetsMinimal[vin.prevout.asset] else assetVinNotFound">
|
|
<ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vin.prevout }"></ng-container>
|
|
</div>
|
|
<ng-template #assetVinNotFound>
|
|
{{ vin.prevout.value }} <a [routerLink]="['/assets/asset/' | relativeUrl, vin.prevout.asset]">{{ vin.prevout.asset | slice : 0 : 7 }}</a>
|
|
</ng-template>
|
|
</ng-template>
|
|
<ng-template #defaultOutput>
|
|
<span *ngIf="vin.lazy" class="skeleton-loader"></span>
|
|
<app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
|
|
</ng-template>
|
|
</td>
|
|
</tr>
|
|
<tr *ngIf="(showDetails$ | async) === true">
|
|
<td colspan="3" class="details-container" >
|
|
<table class="table table-striped table-fixed table-borderless details-table mb-3">
|
|
<tbody>
|
|
<ng-template [ngIf]="vin.scriptsig">
|
|
<tr>
|
|
<td i18n="transactions-list.scriptsig.asm|ScriptSig (ASM)">ScriptSig (ASM)</td>
|
|
<td style="text-align: left;" [innerHTML]="vin.scriptsig_asm | asmStyler"></td>
|
|
</tr>
|
|
<tr>
|
|
<td i18n="transactions-list.scriptsig.hex|ScriptSig (HEX)">ScriptSig (HEX)</td>
|
|
<td style="text-align: left;">{{ vin.scriptsig }}</td>
|
|
</tr>
|
|
</ng-template>
|
|
<tr *ngIf="vin.witness" class="vin-witness">
|
|
<td i18n="transactions-list.witness">Witness</td>
|
|
<td style="text-align: left;">
|
|
<ng-container *ngFor="let witness of vin.witness; index as i">
|
|
<input type="checkbox" [id]="'tx' + vindex + 'witness' + i" style="display: none;">
|
|
<p class="witness-item" [class.accordioned]="witness.length > 1000">
|
|
{{ witness }}
|
|
</p>
|
|
<div class="witness-toggle" *ngIf="witness.length > 1000">
|
|
<span class="ellipsis">...</span>
|
|
<label [for]="'tx' + vindex + 'witness' + i" class="btn btn-sm btn-primary mt-2">
|
|
<span class="show-all" i18n="show-all">Show all</span>
|
|
<span class="show-less" i18n="show-less">Show less</span>
|
|
</label>
|
|
</div>
|
|
</ng-container>
|
|
</td>
|
|
</tr>
|
|
<tr *ngIf="vin.inner_redeemscript_asm">
|
|
<td i18n="transactions-list.p2sh-redeem-script">P2SH redeem script</td>
|
|
<td style="text-align: left;" [innerHTML]="vin.inner_redeemscript_asm | asmStyler"></td>
|
|
</tr>
|
|
<tr *ngIf="vin.inner_witnessscript_asm">
|
|
<td *ngIf="vin.prevout && vin.prevout.scriptpubkey_type == 'v1_p2tr'; else p2wsh" i18n="transactions-list.p2tr-tapscript">P2TR tapscript</td>
|
|
<ng-template #p2wsh>
|
|
<td i18n="transactions-list.p2wsh-witness-script">P2WSH witness script</td>
|
|
</ng-template>
|
|
<td style="text-align: left;" [innerHTML]="vin.inner_witnessscript_asm | asmStyler"></td>
|
|
</tr>
|
|
<tr>
|
|
<td i18n="transactions-list.nsequence">nSequence</td>
|
|
<td style="text-align: left;">{{ formatHex(vin.sequence) }}</td>
|
|
</tr>
|
|
<ng-template [ngIf]="vin.prevout">
|
|
<tr>
|
|
<td i18n="transactions-list.previous-output-script">Previous output script</td>
|
|
<td style="text-align: left;" [innerHTML]="vin.prevout.scriptpubkey_asm | asmStyler"></td>
|
|
</tr>
|
|
<tr>
|
|
<td i18n="transactions-list.previous-output-type">Previous output type</td>
|
|
<td style="text-align: left;">{{ vin.prevout.scriptpubkey_type?.toUpperCase() }}</td>
|
|
</tr>
|
|
</ng-template>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
<tr *ngIf="tx.vin.length > getVinLimit(tx)">
|
|
<td colspan="3" class="text-center">
|
|
<button class="btn btn-sm btn-primary mt-2" (click)="showMoreInputs(tx)">
|
|
<span *ngIf="getVinLimit(tx, true) >= tx.vin.length; else showMoreInputsLabel" i18n="show-all">Show all</span>
|
|
<ng-template #showMoreInputsLabel>
|
|
<span i18n="show-more">Show more</span>
|
|
</ng-template>
|
|
({{ tx.vin.length - getVinLimit(tx) }} <span i18n="inputs-remaining">remaining</span>)
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="w-100 d-block d-md-none"></div>
|
|
<div class="col mobile-bottomcol">
|
|
<table class="table table-fixed table-borderless smaller-text table-sm table-tx-vout">
|
|
<tbody>
|
|
<ng-template ngFor let-vout let-vindex="index" [ngForOf]="tx.vout.slice(0, getVoutLimit(tx))" [ngForTrackBy]="trackByIndexFn">
|
|
<tr [ngClass]="{
|
|
'assetBox': assetsMinimal && assetsMinimal[vout.asset] && vout.scriptpubkey_address && tx.vin && !tx.vin[0].is_coinbase && tx._unblinded || outputIndex === vindex,
|
|
'highlight': vout.scriptpubkey_address === this.address && this.address !== ''
|
|
}">
|
|
<td class="address-cell">
|
|
<a class="address" *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
|
|
<app-truncate [text]="vout.scriptpubkey_address" [lastChars]="8"></app-truncate>
|
|
</a>
|
|
<div>
|
|
<app-address-labels [vout]="vout" [channel]="tx._channels && tx._channels.outputs[vindex] ? tx._channels.outputs[vindex] : null"></app-address-labels>
|
|
</div>
|
|
<ng-template #scriptpubkey_type>
|
|
<ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">
|
|
<ng-container i18n="transactions-list.peg-out-to">Peg-out to <ng-container *ngTemplateOutlet="pegOutLink"></ng-container></ng-container>
|
|
<ng-template #pegOutLink>
|
|
<a *ngIf="stateService.env.BASE_MODULE === 'liquid'; else localPegoutLink" [attr.href]="'https://mempool.space/address/' + vout.pegout.scriptpubkey_address" title="{{ vout.pegout.scriptpubkey_address }}">
|
|
<app-truncate [text]="vout.pegout.scriptpubkey_address"></app-truncate>
|
|
</a>
|
|
<ng-template #localPegoutLink>
|
|
<a [routerLink]="['/address/', vout.pegout.scriptpubkey_address]" title="{{ vout.pegout.scriptpubkey_address }}">
|
|
<app-truncate [text]="vout.pegout.scriptpubkey_address"></app-truncate>
|
|
</a>
|
|
</ng-template>
|
|
</ng-template>
|
|
</ng-template>
|
|
<ng-template #defaultscriptpubkey_type>
|
|
<ng-template [ngIf]="vout.scriptpubkey_type === 'op_return'" [ngIfElse]="otherPubkeyType">
|
|
OP_RETURN <a placement="bottom" [ngbTooltip]="vout.scriptpubkey_asm | hex2ascii"><span *ngIf="vout.scriptpubkey_asm !== 'OP_RETURN'" class="badge badge-secondary scriptmessage">{{ vout.scriptpubkey_asm | hex2ascii }}</span></a>
|
|
</ng-template>
|
|
<ng-template #otherPubkeyType>{{ vout.scriptpubkey_type | scriptpubkeyType }}</ng-template>
|
|
</ng-template>
|
|
</ng-template>
|
|
</td>
|
|
<td class="text-right nowrap amount">
|
|
<ng-template [ngIf]="vout.asset && vout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
|
|
<div *ngIf="assetsMinimal && assetsMinimal[vout.asset] else assetNotFound">
|
|
<ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vout }"></ng-container>
|
|
</div>
|
|
<ng-template #assetNotFound>
|
|
{{ vout.value }} <a [routerLink]="['/assets/asset/' | relativeUrl, vout.asset]">{{ vout.asset | slice : 0 : 7 }}</a>
|
|
</ng-template>
|
|
</ng-template>
|
|
<ng-template #defaultOutput>
|
|
<app-amount [satoshis]="vout.value"></app-amount>
|
|
</ng-template>
|
|
</td>
|
|
<td class="arrow-td">
|
|
<span *ngIf="!tx._outspends || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="grey">
|
|
<fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
|
|
</span>
|
|
<ng-template #outspend>
|
|
<span *ngIf="!tx._outspends[vindex] || !tx._outspends[vindex].spent; else spent" class="green">
|
|
<fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
|
|
</span>
|
|
<ng-template #spent>
|
|
<a *ngIf="tx._outspends[vindex].txid else outputNoTxId" [routerLink]="['/tx/' | relativeUrl, tx._outspends[vindex].txid]" [fragment]="'vin=' + tx._outspends[vindex].vin" class="red">
|
|
<fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
|
|
</a>
|
|
<ng-template #outputNoTxId>
|
|
<span class="red">
|
|
<fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
|
|
</span>
|
|
</ng-template>
|
|
</ng-template>
|
|
</ng-template>
|
|
</td>
|
|
</tr>
|
|
<tr *ngIf="(showDetails$ | async) === true">
|
|
<td colspan="3" class=" details-container" >
|
|
<table class="table table-striped table-borderless details-table mb-3">
|
|
<tbody>
|
|
<tr>
|
|
<td i18n="transactions-list.scriptpubkey.asm|ScriptPubKey (ASM)">ScriptPubKey (ASM)</td>
|
|
<td style="text-align: left;" [innerHTML]="vout.scriptpubkey_asm | asmStyler"></td>
|
|
</tr>
|
|
<tr>
|
|
<td i18n="transactions-list.scriptpubkey.hex|ScriptPubKey (HEX)">ScriptPubKey (HEX)</td>
|
|
<td style="text-align: left;">{{ vout.scriptpubkey }}</td>
|
|
</tr>
|
|
<tr *ngIf="vout.scriptpubkey_type == 'op_return'">
|
|
<td>OP_RETURN <span>data</span></td>
|
|
<td style="text-align: left;">{{ vout.scriptpubkey_asm | hex2ascii }}</td>
|
|
</tr>
|
|
<tr *ngIf="vout.scriptpubkey_type">
|
|
<td i18n="transactions-list.vout.scriptpubkey-type">Type</td>
|
|
<td style="text-align: left;">{{ vout.scriptpubkey_type.toUpperCase() }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
<tr *ngIf="tx.vout.length > getVoutLimit(tx)">
|
|
<td colspan="3" class="text-center">
|
|
<button class="btn btn-sm btn-primary mt-2" (click)="showMoreOutputs(tx)">
|
|
<span *ngIf="getVoutLimit(tx, true) >= tx.vout.length; else showMoreOutputsLabel" i18n="show-all">Show all</span>
|
|
<ng-template #showMoreOutputsLabel>
|
|
<span i18n="show-more">Show more</span>
|
|
</ng-template>
|
|
({{ tx.vout.length - getVoutLimit(tx) }} <span i18n="outputs-remaining">remaining</span>)
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="summary">
|
|
<div class="float-left mt-2-5" *ngIf="!transactionPage && !tx.vin[0].is_coinbase && tx.fee !== -1">
|
|
{{ tx.fee / (tx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="d-none d-sm-inline-block"> – {{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [value]="tx.fee"></app-fiat></span></span>
|
|
</div>
|
|
<div class="float-left mt-2-5 grey-info-text" *ngIf="tx.fee === -1" i18n="transactions-list.load-to-reveal-fee-info">Show more inputs to reveal fee data</div>
|
|
|
|
<div class="float-right">
|
|
<ng-container *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
|
|
<button *ngIf="tx.status.confirmed; else unconfirmedButton" type="button" class="btn btn-sm btn-success mt-2">
|
|
<ng-container *ngTemplateOutlet="latestBlock.height - tx.status.block_height + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.status.block_height + 1}"></ng-container>
|
|
<ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
|
|
<ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
|
|
</button>
|
|
<ng-template #unconfirmedButton>
|
|
<button type="button" class="btn btn-sm btn-danger mt-2" i18n="transaction.unconfirmed|Transaction unconfirmed state">Unconfirmed</button>
|
|
</ng-template>
|
|
</ng-container>
|
|
<button *ngIf="address === ''; else viewingAddress" type="button" class="btn btn-sm btn-primary mt-2 ml-2" (click)="switchCurrency()">
|
|
<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>
|
|
</button>
|
|
<ng-template #viewingAddress>
|
|
<button type="button" class="btn btn-sm mt-2 ml-2" (click)="switchCurrency()" [ngClass]="{'btn-success': tx['addressValue'] >= 0, 'btn-danger': tx['addressValue'] < 0}">
|
|
<app-amount [satoshis]="tx['addressValue']" [addPlus]="true"></app-amount>
|
|
</button>
|
|
</ng-template>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<br />
|
|
|
|
</ng-container>
|
|
|
|
<ng-template #assetBox let-item>
|
|
{{ item.value / pow(10, assetsMinimal[item.asset][3]) | number: '1.' + assetsMinimal[item.asset][3] + '-' + assetsMinimal[item.asset][3] }} {{ assetsMinimal[item.asset][1] }}
|
|
<br />
|
|
{{ assetsMinimal[item.asset][0] }}
|
|
<br />
|
|
<a [routerLink]="['/assets/asset/' | relativeUrl, item.asset]">{{ item.asset | shortenString : 13 }}</a>
|
|
</ng-template>
|