Crop large OP_RETURN data in tx details section

frontend/src/app/components/transactions-list/transactions-list.component.html

@@ -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>

frontend/src/app/components/transactions-list/transactions-list.component.ts

@@ -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) {

frontend/src/app/shared/components/asm/asm.component.ts

@@ -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