Add show all toggle for redeem scripts

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

@@ -142,7 +142,16 @@
                         <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>
+                        <td style="text-align: left;">
+                          <div [innerHTML]="vin.inner_witnessscript_asm | asmStyler:showFullScript[vindex]"></div>
+                          <div *ngIf="vin.inner_witnessscript_asm.length > 1000" style="display: flex;">
+                            <span *ngIf="!showFullScript[vindex]">...</span>
+                            <label class="btn btn-sm btn-primary mt-2" (click)="toggleShowFullScript(vindex)" style="margin-left: auto;">
+                              <span *ngIf="!showFullScript[vindex]" i18n="show-all">Show all</span>
+                              <span *ngIf="showFullScript[vindex]" i18n="show-less">Show less</span>
+                            </label>
+                          </div>
+                        </td>
                       </tr>
                       <tr>
                         <td i18n="transactions-list.nsequence">nSequence</td>

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

@@ -48,6 +48,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   transactionsLength: number = 0;
   inputRowLimit: number = 12;
   outputRowLimit: number = 12;
+  showFullScript: { [vinIndex: number]: boolean } = {};
 
   constructor(
     public stateService: StateService,
@@ -300,7 +301,9 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   toggleDetails(): void {
     if (this.showDetails$.value === true) {
       this.showDetails$.next(false);
+      this.showFullScript = {};
     } else {
+      this.showFullScript = this.transactions[0] ? this.transactions[0].vin.reduce((acc, _, i) => ({...acc, [i]: false}), {}) : {};
       this.showDetails$.next(true);
     }
   }
@@ -352,6 +355,10 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     return limit;
   }
 
+  toggleShowFullScript(vinIndex: number): void {
+    this.showFullScript[vinIndex] = !this.showFullScript[vinIndex];
+  }
+
   ngOnDestroy(): void {
     this.outspendsSubscription.unsubscribe();
     this.currencyChangeSubscription?.unsubscribe();

frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.ts

@@ -5,13 +5,18 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class AsmStylerPipe implements PipeTransform {
 
-  transform(asm: string): string {
+  transform(asm: string, showAll = true): string {
     const instructions = asm.split('OP_');
     let out = '';
+    let chars = -3;
     for (const instruction of instructions) {
       if (instruction === '') {
         continue;
       }
+      if (!showAll && chars > 1000) {
+        break;
+      }
+      chars += instruction.length + 3;
       out += this.addStyling(instruction);
     }
     return out;