highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-09-25 20:57:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

Crop large OP_RETURN data in tx details section

Browse Source
This commit is contained in:
natsoni
2025-05-22 17:21:44 +02:00
parent 082a06c6b6
commit 30c50a1d50
3 changed files with 64 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -327,7 +327,7 @@
@if (vout.isRunestone) {
<button (click)="toggleOrdData(tx.txid, 'vout', vindex)" type="button" class="btn btn-sm badge badge-ord">Runestone</button>
} @else {
<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>
<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>
}
</ng-template>
<ng-template #otherPubkeyType>{{ vout.scriptpubkey_type | scriptpubkeyType }}</ng-template>
@@ -384,15 +384,58 @@
<tbody>
<tr>
<td i18n="transactions-list.scriptpubkey.asm|ScriptPubKey (ASM)">ScriptPubKey (ASM)</td>
<td style="text-align: left;" [innerHTML]="vout.scriptpubkey_asm | asmStyler"></td>
<td style="text-align: left;">
<app-asm [asm]="vout.scriptpubkey_asm" [crop]="showFullScriptPubkeyAsm[vindex] ? 0 : 1000"></app-asm>
<div *ngIf="vout.scriptpubkey_asm.length > 1000" style="display: flex;">
<span *ngIf="!showFullScriptPubkeyAsm[vindex]">...</span>
<label class="btn btn-sm btn-primary mt-2" (click)="toggleShowFullScriptPubkeyAsm(vindex)" style="margin-left: auto;">
<span *ngIf="!showFullScriptPubkeyAsm[vindex]" i18n="show-all">Show all</span>
<span *ngIf="showFullScriptPubkeyAsm[vindex]" i18n="show-less">Show less</span>
</label>
</div>
</td>
</tr>
<tr>
<td i18n="transactions-list.scriptpubkey.hex|ScriptPubKey (HEX)">ScriptPubKey (HEX)</td>
<td style="text-align: left;">{{ vout.scriptpubkey }}</td>
<td style="text-align: left;">
@if (vout.scriptpubkey.length > 1000) {
@if (!showFullScriptPubkeyHex[vindex]) {
{{ vout.scriptpubkey | slice:0:1000 }}
} @else {
{{ vout.scriptpubkey }}
}
} @else {
{{ vout.scriptpubkey }}
}
<div *ngIf="vout.scriptpubkey.length > 1000" style="display: flex;">
<span *ngIf="!showFullScriptPubkeyHex[vindex]">...</span>
<label class="btn btn-sm btn-primary mt-2" (click)="toggleShowFullScriptPubkeyHex(vindex)" style="margin-left: auto;">
<span *ngIf="!showFullScriptPubkeyHex[vindex]" i18n="show-all">Show all</span>
<span *ngIf="showFullScriptPubkeyHex[vindex]" i18n="show-less">Show less</span>
</label>
</div>
</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>
<td style="text-align: left; word-break: break-word;">
@if (vout.scriptpubkey_asm.length > 1000) {
@if (!showFullOpReturnData[vindex]) {
{{ (vout.scriptpubkey_asm | slice:0:1000 | hex2ascii) }}
} @else {
{{ vout.scriptpubkey_asm | hex2ascii }}
}
} @else {
{{ vout.scriptpubkey_asm | hex2ascii }}
}
<div *ngIf="vout.scriptpubkey_asm.length > 1000" style="display: flex;">
<span *ngIf="!showFullOpReturnData[vindex]">...</span>
<label class="btn btn-sm btn-primary mt-2" (click)="toggleShowFullOpReturnData(vindex)" style="margin-left: auto;">
<span *ngIf="!showFullOpReturnData[vindex]" i18n="show-all">Show all</span>
<span *ngIf="showFullOpReturnData[vindex]" i18n="show-less">Show less</span>
</label>
</div>
</td>
</tr>
<tr *ngIf="vout.scriptpubkey_type">
<td i18n="transactions-list.vout.scriptpubkey-type">Type</td>

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

@@ -62,6 +62,9 @@ export class TransactionsListComponent implements OnInit, OnChanges, OnDestroy {
outputRowLimit: number = 12;
showFullScript: { [vinIndex: number]: boolean } = {};
showFullWitness: { [vinIndex: number]: { [witnessIndex: number]: boolean } } = {};
showFullScriptPubkeyAsm: { [voutIndex: number]: boolean } = {};
showFullScriptPubkeyHex: { [voutIndex: number]: boolean } = {};
showFullOpReturnData: { [voutIndex: number]: boolean } = {};
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();
@@ -516,6 +519,18 @@ export class TransactionsListComponent implements OnInit, OnChanges, OnDestroy {
this.showFullWitness[vinIndex][witnessIndex] = !this.showFullWitness[vinIndex][witnessIndex];
}
toggleShowFullScriptPubkeyAsm(voutIndex: number): void {
this.showFullScriptPubkeyAsm[voutIndex] = !this.showFullScriptPubkeyAsm[voutIndex];
}
toggleShowFullScriptPubkeyHex(voutIndex: number): void {
this.showFullScriptPubkeyHex[voutIndex] = !this.showFullScriptPubkeyHex[voutIndex];
}
toggleShowFullOpReturnData(voutIndex: number): void {
this.showFullOpReturnData[voutIndex] = !this.showFullOpReturnData[voutIndex];
}
toggleOrdData(txid: string, type: 'vin' | 'vout', index: number) {
const tx = this.transactions.find((tx) => tx.txid === txid);
if (!tx) {

3
frontend/src/app/shared/components/asm/asm.component.ts
View File

@@ -28,7 +28,7 @@ export class AsmComponent {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['asm']) {
if (changes['asm'] || changes['crop']) {
this.parseASM();
}
}
@@ -82,6 +82,7 @@ export class AsmComponent {
['ELSE', 'control'],
['ENDIF', 'control'],
['VERIFY', 'control'],
['RETURN', 'control'],
...Array.from({length: 70}, (_, i) => [`RETURN_${i + 186}`, 'control']),
// Stack