From 77d42bfdbbe023eb3b1162de40621a272b790143 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Thu, 6 Jun 2024 17:53:20 +0200
Subject: [PATCH] Don't render full input witness if user does not press "show
 all"

---
 .../transactions-list.component.html          | 37 +++++++++++-------
 .../transactions-list.component.scss          | 39 +------------------
 .../transactions-list.component.ts            | 13 +++++++
 3 files changed, 39 insertions(+), 50 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 27c2150a7..f57b221f3 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -114,22 +114,33 @@
                         <td i18n="transactions-list.witness">Witness</td>
                         <td style="text-align: left;">
                           <ng-container *ngFor="let witness of vin.witness; index as i">
-                            <input type="checkbox" [id]="'tx' + vindex + 'witness' + i" style="display: none;">
-                            <p class="witness-item" [class.accordioned]="witness.length > 1000">
-                              <ng-template [ngIf]="witness" [ngIfElse]="emptyWitnessItem">
+                            <p class="witness-item">
+                              @if (witness.length > 1000) {
+                                @if (!showFullWitness[vindex][i]) {
+                                  {{ witness | slice:0:1000 }}
+                                } @else {
+                                  {{ witness }}
+                                }
+                              } @else if (witness) {
                                 {{ witness }}
-                              </ng-template>
-                              <ng-template #emptyWitnessItem>
+                              } @else {
                                 &lt;empty&gt;
-                              </ng-template>
+                              }
                             </p>
-                            <div class="witness-toggle" *ngIf="witness.length > 1000">
-                              <span  class="ellipsis">...</span>
-                              <label [for]="'tx' + vindex + 'witness' + i" class="btn btn-sm btn-primary mt-2">
-                                <span class="show-all" i18n="show-all">Show all</span>
-                                <span class="show-less" i18n="show-less">Show less</span>
-                              </label>
-                            </div>
+                            @if (witness.length > 1000) {
+                              <div style="display: flex;">
+                                @if (!showFullWitness[vindex][i]) {
+                                  <span>...</span>
+                                }
+                                <label class="btn btn-sm btn-primary mt-2" (click)="toggleShowFullWitness(vindex, i)" style="margin-left: auto;">
+                                  @if (!showFullWitness[vindex][i]) {
+                                    <span i18n="show-all">Show all</span>
+                                  } @else {
+                                    <span i18n="show-less">Show less</span>
+                                  }
+                                </label>
+                              </div>
+                            }
                           </ng-container>
                         </td>
                       </tr>
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss
index 7efe0ef11..280e36b0f 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -172,42 +172,7 @@ h2 {
 }
 
 .vin-witness {
-	.witness-item.accordioned {
-		max-height: 300px;
-		overflow: hidden;
-	}
-
-	input:checked + .witness-item.accordioned {
-		max-height: none;
-	}
-
-	.witness-toggle {
-		display: flex;
-		flex-direction: row;
-		align-items: flex-start;
-		justify-content: space-between;
-		margin-bottom: 1em;
-
-		.show-all {
-			display: inline;
-		}
-		.show-less {
-			display: none;
-		}
-		.ellipsis {
-			visibility: visible;
-		}
-	}
-
-	input:checked ~ .witness-toggle {
-		.show-all {
-			display: none;
-		}
-		.show-less {
-			display: inline;
-		}
-		.ellipsis {
-			visibility: hidden;
-		}
+	.witness-item {
+		overflow: hidden;	
 	}
 }
\ No newline at end of file
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 f0b1f34e3..688c941b0 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts
@@ -49,6 +49,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   inputRowLimit: number = 12;
   outputRowLimit: number = 12;
   showFullScript: { [vinIndex: number]: boolean } = {};
+  showFullWitness: { [vinIndex: number]: { [witnessIndex: number]: boolean } } = {};
 
   constructor(
     public stateService: StateService,
@@ -302,8 +303,16 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     if (this.showDetails$.value === true) {
       this.showDetails$.next(false);
       this.showFullScript = {};
+      this.showFullWitness = {};
     } else {
       this.showFullScript = this.transactions[0] ? this.transactions[0].vin.reduce((acc, _, i) => ({...acc, [i]: false}), {}) : {};
+      this.showFullWitness = this.transactions[0] ? this.transactions[0].vin.reduce((acc, vin, vinIndex) => {
+        acc[vinIndex] = vin.witness ? vin.witness.reduce((witnessAcc, _, witnessIndex) => {
+          witnessAcc[witnessIndex] = false;
+          return witnessAcc;
+        }, {}) : {};
+        return acc;
+      }, {}) : {};
       this.showDetails$.next(true);
     }
   }
@@ -359,6 +368,10 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     this.showFullScript[vinIndex] = !this.showFullScript[vinIndex];
   }
 
+  toggleShowFullWitness(vinIndex: number, witnessIndex: number): void {
+    this.showFullWitness[vinIndex][witnessIndex] = !this.showFullWitness[vinIndex][witnessIndex];
+  }
+
   ngOnDestroy(): void {
     this.outspendsSubscription.unsubscribe();
     this.currencyChangeSubscription?.unsubscribe();