From 981cb35240f2bd730ede18bd74cc71883153cca6 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 26 Jul 2025 01:40:15 +0000
Subject: [PATCH] improve op_return display

---
 .../transactions-list.component.html          | 24 +++++++++++++++++--
 .../transactions-list.component.ts            |  7 ++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index 70c559c33..5ec98d488 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -341,7 +341,18 @@
                         @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 | 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 #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>
                 </td>
               </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">
                 <td [attr.colspan]="3" class="details-container">
                   <table class="table table-striped table-borderless details-table mb-3">
@@ -428,7 +448,7 @@
                       </tr>
                       <tr *ngIf="vout.scriptpubkey_type == 'op_return'">
                         <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]) {
                             {{ (vout.scriptpubkey_asm | hex2ascii | slice:0:1000) }}
                           } @else {
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.ts b/frontend/src/app/components/transactions-list/transactions-list.component.ts
index 241c39101..80a144ca8 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts
@@ -66,6 +66,7 @@ export class TransactionsListComponent implements OnInit, OnChanges, OnDestroy {
   showFullScriptPubkeyAsm: { [voutIndex: number]: boolean } = {};
   showFullScriptPubkeyHex: { [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; } }; } } = {};
   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];
   }
 
+  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) {
     const tx = this.transactions.find((tx) => tx.txid === txid);
     if (!tx) {