highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-10-04 20:33:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve op_return display

Browse Source
This commit is contained in:
Mononaut
2025-07-26 01:40:15 +00:00
parent acf7a1c600
commit 981cb35240
2 changed files with 29 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/app/components/transactions-list/transactions-list.component.html
View File

@@ -341,7 +341,18 @@
@if (vout.isRunestone) { @if (vout.isRunestone) {
<button (click)="toggleOrdData(tx.txid, 'vout', vindex)" type="button" class="btn btn-sm badge badge-ord">Runestone</button> <button (click)="toggleOrdData(tx.txid, 'vout', vindex)" type="button" class="btn btn-sm badge badge-ord">Runestone</button>
} @else { } @else {
<a placement="bottom" [ngbTooltip]="vout.scriptpubkey_asm | slice:0:200 | hex2ascii"><span *ngIf="vout.scriptpubkey_asm !== 'OP_RETURN'" class="badge badge-secondary scriptmessage">{{ vout.scriptpubkey_asm | slice:0:200 | hex2ascii }}</span></a> <a placement="bottom" style="cursor: pointer;">
<span *ngIf="vout.scriptpubkey_asm !== 'OP_RETURN'" class="badge badge-secondary scriptmessage" (click)="toggleShowFullOpReturnPreview(vindex)">{{ vout.scriptpubkey_asm | hex2ascii | slice:0:200 }}</span>
<ng-container *ngIf="(showDetails$ | async) === false">
@if ((vout.scriptpubkey_asm | hex2ascii).length > 200) {
@if (!showFullOpReturnPreview[vindex]) {
<span class="badge badge-primary" (click)="toggleShowFullOpReturnPreview(vindex)">Show more</span>
} @else {
<span class="badge badge-primary" (click)="toggleShowFullOpReturnPreview(vindex)">Show less</span>
}
}
</ng-container>
</a>
} }
</ng-template> </ng-template>
<ng-template #otherPubkeyType>{{ vout.scriptpubkey_type | scriptpubkeyType }}</ng-template> <ng-template #otherPubkeyType>{{ vout.scriptpubkey_type | scriptpubkeyType }}</ng-template>
@@ -392,6 +403,15 @@
<app-ord-data [runestone]="showOrdData[tx.txid + '-vout-' + vindex]['runestone']" [runeInfo]="showOrdData[tx.txid + '-vout-' + vindex]['runeInfo']" [type]="'vout'"></app-ord-data> <app-ord-data [runestone]="showOrdData[tx.txid + '-vout-' + vindex]['runestone']" [runeInfo]="showOrdData[tx.txid + '-vout-' + vindex]['runeInfo']" [type]="'vout'"></app-ord-data>
</td> </td>
</tr> </tr>
<tr *ngIf="vout.scriptpubkey_type === 'op_return' && showFullOpReturnPreview[vindex]" [ngClass]="{
'assetBox': assetsMinimal && assetsMinimal[vout.asset] && vout.scriptpubkey_address && tx.vin && !tx.vin[0].is_coinbase && tx._unblinded || outputIndex === vindex,
'highlight': addresses?.length && (addresses.includes(vout.scriptpubkey_address)),
'sigged': selectedSig && selectedSig.txIndex === i && sigHighlights.vout[vindex],
}">
<td colspan="3" style="white-space: pre-line;">
{{ vout.scriptpubkey_asm | hex2ascii | slice:0:8000 }}
</td>
</tr>
<tr *ngIf="(showDetails$ | async) === true"> <tr *ngIf="(showDetails$ | async) === true">
<td [attr.colspan]="3" class="details-container"> <td [attr.colspan]="3" class="details-container">
<table class="table table-striped table-borderless details-table mb-3"> <table class="table table-striped table-borderless details-table mb-3">
@@ -428,7 +448,7 @@
</tr> </tr>
<tr *ngIf="vout.scriptpubkey_type == 'op_return'"> <tr *ngIf="vout.scriptpubkey_type == 'op_return'">
<td>OP_RETURN <span>data</span></td> <td>OP_RETURN <span>data</span></td>
<td style="text-align: left; word-break: break-word;"> <td style="text-align: left; word-break: break-word; white-space: pre-line;">
@if (!showFullOpReturnData[vindex]) { @if (!showFullOpReturnData[vindex]) {
{{ (vout.scriptpubkey_asm | hex2ascii | slice:0:1000) }} {{ (vout.scriptpubkey_asm | hex2ascii | slice:0:1000) }}
} @else { } @else {

7
frontend/src/app/components/transactions-list/transactions-list.component.ts
View File

@@ -66,6 +66,7 @@ export class TransactionsListComponent implements OnInit, OnChanges, OnDestroy {
showFullScriptPubkeyAsm: { [voutIndex: number]: boolean } = {}; showFullScriptPubkeyAsm: { [voutIndex: number]: boolean } = {};
showFullScriptPubkeyHex: { [voutIndex: number]: boolean } = {}; showFullScriptPubkeyHex: { [voutIndex: number]: boolean } = {};
showFullOpReturnData: { [voutIndex: number]: boolean } = {}; showFullOpReturnData: { [voutIndex: number]: boolean } = {};
showFullOpReturnPreview: { [voutIndex: number]: boolean } = {};
showOrdData: { [key: string]: { show: boolean; inscriptions?: Inscription[]; runestone?: Runestone, runeInfo?: { [id: string]: { etching: Etching; txid: string; } }; } } = {}; showOrdData: { [key: string]: { show: boolean; inscriptions?: Inscription[]; runestone?: Runestone, runeInfo?: { [id: string]: { etching: Etching; txid: string; } }; } } = {};
similarityMatches: Map<string, Map<string, { score: number, match: AddressMatch, group: number }>> = new Map(); similarityMatches: Map<string, Map<string, { score: number, match: AddressMatch, group: number }>> = new Map();
@@ -551,6 +552,12 @@ export class TransactionsListComponent implements OnInit, OnChanges, OnDestroy {
this.showFullOpReturnData[voutIndex] = !this.showFullOpReturnData[voutIndex]; this.showFullOpReturnData[voutIndex] = !this.showFullOpReturnData[voutIndex];
} }
toggleShowFullOpReturnPreview(voutIndex: number): void {
console.log('toggleShowFullOpReturnPreview', voutIndex);
this.showFullOpReturnPreview[voutIndex] = !this.showFullOpReturnPreview[voutIndex];
console.log(this.showFullOpReturnPreview[voutIndex]);
}
toggleOrdData(txid: string, type: 'vin' | 'vout', index: number) { toggleOrdData(txid: string, type: 'vin' | 'vout', index: number) {
const tx = this.transactions.find((tx) => tx.txid === txid); const tx = this.transactions.find((tx) => tx.txid === txid);
if (!tx) { if (!tx) {