From a8b162387b096befe2e02fd4b55507b240bdf472 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Mon, 23 Jan 2023 10:59:53 -0600
Subject: [PATCH] better frontend handling for very large witnesses

---
 .../transactions-list.component.html          | 20 +++++++--
 .../transactions-list.component.scss          | 45 +++++++++++++++++--
 2 files changed, 59 insertions(+), 6 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 56e853f71..da8ab6fe6 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -94,7 +94,7 @@
               </tr>
               <tr *ngIf="(showDetails$ | async) === true">
                 <td colspan="3" class="details-container" >
-                  <table class="table table-striped table-borderless details-table mb-3">
+                  <table class="table table-striped table-fixed table-borderless details-table mb-3">
                     <tbody>
                       <ng-template [ngIf]="vin.scriptsig">
                         <tr>
@@ -106,9 +106,23 @@
                           <td style="text-align: left;">{{ vin.scriptsig }}</td>
                         </tr>
                       </ng-template>
-                      <tr *ngIf="vin.witness">
+                      <tr *ngIf="vin.witness" class="vin-witness">
                         <td i18n="transactions-list.witness">Witness</td>
-                        <td style="text-align: left;">{{ vin.witness.join(' ') }}</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">
+                              {{ witness }}
+                            </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>
+                          </ng-container>
+                        </td>
                       </tr>
                       <tr *ngIf="vin.inner_redeemscript_asm">
                         <td i18n="transactions-list.p2sh-redeem-script">P2SH redeem script</td>
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 b093a88fd..08d7d7486 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -105,9 +105,7 @@ td.amount {
 		&:first-child {
 			color: #ffffff66;
 			white-space: pre-wrap;
-			@media (min-width: 476px) {
-				white-space: nowrap;
-			}
+			width: 150px;
 		}
 		&:nth-child(2) {
 			word-break: break-all;
@@ -152,4 +150,45 @@ h2 {
 	width: 0;
 	flex-grow: 1;
 	margin-inline-end: 2em;
+}
+
+.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;
+		}
+	}
 }
\ No newline at end of file